@indico-data/design-system 3.18.0 → 3.19.0

package/lib/components/forms/date/datePicker/types.d.ts

@@ -1,4 +1,9 @@
 import { CustomComponents, DateRange, DayEventHandler, Formatters, Matcher, Mode, MonthChangeEventHandler, OnSelectHandler } from 'react-day-picker';
+/** Customizable text for DatePicker. */
+export interface DatePickerText {
+    /** Label for "Select Time" text. Default: "Select Time" */
+    selectTime?: string;
+}
 export interface DatePickerProps {
     ref?: React.LegacyRef<HTMLInputElement>;
     /** The selected day(s). */
@@ -41,6 +46,8 @@ export interface DatePickerProps {
     isReadOnly?: boolean;
     timeTabIndex?: number;
     dateTabIndex?: number;
+    /** Customizable display text. */
+    text?: DatePickerText;
 }
 export interface CommonProps {
     className?: string;

package/lib/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.d.ts

@@ -2,6 +2,7 @@ import { DateRange, Mode } from 'react-day-picker';
 import { IconName, IconSizes } from '../../../icons/types';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
+import { IconTriggerDatePickerText } from './types';
 interface Props {
     /** Allows you to select a single day, a range of days, or multiple days. */
     mode?: Mode;
@@ -38,6 +39,8 @@ interface Props {
     isPortal?: boolean;
     /** The floating options for the date picker. Follows floating-ui options. */
     floatingOptions?: UseFloatingOptions;
+    /** Customizable display text. */
+    text?: IconTriggerDatePickerText;
 }
 export declare const IconTriggerDatePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/forms/date/iconTriggerDatePicker/types.d.ts

@@ -0,0 +1,5 @@
+/** Customizable text for IconTriggerDatePicker. */
+export interface IconTriggerDatePickerText {
+    /** Aria label for the trigger icon. Default: "Open date picker" */
+    triggerIcon?: string;
+}

package/lib/components/forms/date/inputDatePicker/SingleInputDatePicker.d.ts

@@ -10,7 +10,8 @@ export interface SingleInputDatePickerProps {
     /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
     captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
     id?: string;
-    label?: string;
+    /** The label for the input field. */
+    label: string;
     onSelect: (selected: Date | undefined) => void;
     initialMonth?: Date;
     selected?: Date;

package/lib/components/forms/date/inputDateRangePicker/InputDateRangePicker.d.ts

@@ -2,6 +2,7 @@ import { IconName } from '../../../icons/types';
 import { DateRange } from 'react-day-picker';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
+import { InputDateRangePickerText } from './types';
 interface InputDateRangePickerProps {
     /** A label for assistive technologies. */
     ariaLabel: string;
@@ -43,6 +44,8 @@ interface InputDateRangePickerProps {
     floatingOptions?: UseFloatingOptions;
     /** Whether the date picker is a portal. */
     isPortal?: boolean;
+    /** Customizable display text. */
+    text?: InputDateRangePickerText;
 }
 export declare function InputDateRangePicker(props: InputDateRangePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/forms/date/inputDateRangePicker/types.d.ts

@@ -0,0 +1,7 @@
+/** Customizable text for InputDateRangePicker. */
+export interface InputDateRangePickerText {
+    /** Label for the "from" date input. Default: "From Date" */
+    fromDate?: string;
+    /** Label for the "to" date input. Default: "To Date" */
+    toDate?: string;
+}

package/lib/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.d.ts

@@ -9,7 +9,8 @@ export interface SingleInputDateTimePickerProps {
     isDisabled?: boolean;
     captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
     id?: string;
-    label?: string;
+    /** The label for the date input field. */
+    label: string;
     onSelect: (selected: Date | undefined) => void;
     initialMonth?: Date;
     selected?: Date;

package/lib/components/forms/select/Select.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Props as ReactSelectProps } from 'react-select';
-import { SelectOption } from './types';
+import { SelectOption, SelectText } from './types';
 export interface SelectProps<OptionType extends SelectOption> extends ReactSelectProps<OptionType> {
     /** Options for the select component */
     options: OptionType[];
@@ -16,6 +16,8 @@ export interface SelectProps<OptionType extends SelectOption> extends ReactSelec
     classNamePrefix?: string;
     /** Event handler for when the selected value changes */
     onChange?: (newValue: any, actionMeta: any) => void;
+    /** Customizable display text. */
+    text?: SelectText;
 }
 declare const LabeledSelect: React.ForwardRefExoticComponent<Omit<SelectProps<SelectOption> & {
     ref?: React.Ref<any>;

package/lib/components/forms/select/types.d.ts

@@ -1,7 +1,17 @@
 import { ReactNode } from 'react';
+import { FormLabelText } from '../subcomponents/Label';
 export type SelectOption = {
     label: string;
     value: string;
     detail?: ReactNode;
     [key: string]: any;
 };
+/** Customizable text for Select. Extends FormLabelText for label-related text. */
+export interface SelectText extends FormLabelText {
+    /** Placeholder text when no option is selected. Default: "Select..." */
+    placeholder?: string;
+    /** Text when there are no options. Default: "No options" */
+    noOptions?: string;
+    /** Text while loading options. Default: "Loading..." */
+    loading?: string;
+}

package/lib/components/forms/subcomponents/Label.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
+import { FormLabelText } from './types';
+export type { FormLabelText } from './types';
 export interface LabelProps {
     label?: string;
     name: string;
     isRequired?: boolean;
     hasHiddenLabel?: boolean;
+    /** Customizable display text. */
+    text?: FormLabelText;
 }
 export declare const Label: ({ label, name, isRequired }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export declare function withLabel<P extends object>(WrappedComponent: React.ComponentType<P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & LabelProps> & React.RefAttributes<any>>;

package/lib/components/forms/subcomponents/types.d.ts

@@ -0,0 +1,5 @@
+/** Customizable text for form Label. */
+export interface FormLabelText {
+    /** Text appended to aria-label for required fields. Default: "(required)" */
+    required?: string;
+}

package/lib/components/forms/timePicker/TimePicker.d.ts

@@ -1,3 +1,4 @@
+import { TimePickerText } from './types';
 interface TimePickerProps {
     ref?: React.LegacyRef<HTMLInputElement>;
     /** The time value to be displayed in the input field */
@@ -14,7 +15,9 @@ interface TimePickerProps {
     isReadOnly?: boolean;
     isDisabled?: boolean;
     tabIndex?: number;
+    /** Customizable display text. */
+    text?: TimePickerText;
     [key: string]: unknown;
 }
-export declare const TimePicker: ({ ref, timeValue, label, name, hasHiddenLabel, onTimeChange, className, isDisabled, isReadOnly, tabIndex, ...rest }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePicker: ({ ref, timeValue, label, name, hasHiddenLabel, onTimeChange, className, isDisabled, isReadOnly, tabIndex, text: textProp, ...rest }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/forms/timePicker/types.d.ts

@@ -0,0 +1,5 @@
+/** Customizable text for TimePicker. */
+export interface TimePickerText {
+    /** Aria label for the validation error tooltip. Default: "Time validation error" */
+    validationError?: string;
+}

package/lib/components/modal/ConfirmationModal.d.ts

@@ -1,2 +1,2 @@
 import { ConfirmationModalProps } from './types';
-export declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, hasDontShowAgainCheckbox, }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonVariant, icon, title, status, maxWidthInPixels, hasDontShowAgainCheckbox, text: textProp, }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/modal/Modal.d.ts

@@ -1,2 +1,2 @@
 import { ModalProps } from './types';
-export declare const Modal: ({ className, children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position, parentSelector, title, subtitle, footer, maxWidthInPixels, ...rest }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ className, children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position, parentSelector, title, subtitle, footer, maxWidthInPixels, text: textProp, ...rest }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/modal/Modal.stories.d.ts

@@ -7,3 +7,7 @@ type Story = StoryObj<typeof Modal>;
 export declare const Default: Story;
 export declare const ConfirmationModalStory: StoryObj<typeof ConfirmationModal>;
 export declare const ConfirmationModalStoryWithCheckbox: StoryObj<typeof ConfirmationModal>;
+/**
+ * Use the `text` prop to customize displayed text.
+ */
+export declare const WithText: StoryObj<typeof ConfirmationModal>;

package/lib/components/modal/types.d.ts

@@ -1,5 +1,10 @@
 import { ButtonVariants } from '../button/types';
 import { IconName } from '../icons/types';
+/** Customizable text for Modal. */
+export interface ModalText {
+    /** Aria label for the close button. Default: "Close" */
+    closeButton?: string;
+}
 export interface ModalProps {
     /** Additional classes for the badge component */
     className?: string;
@@ -35,8 +40,19 @@ export interface ModalProps {
     footer?: React.ReactNode;
     /** The maximum width of the modal in pixels */
     maxWidthInPixels?: number;
+    /** Customizable display text. */
+    text?: ModalText;
+}
+/** Customizable text for ConfirmationModal. Extends ModalText. */
+export interface ConfirmationModalText extends ModalText {
+    /** Label for the "Don't show again" checkbox. Default: "Don't display this again." */
+    dontShowAgain?: string;
+    /** Text for the confirm button. Default: "Confirm" */
+    confirm?: string;
+    /** Text for the cancel button. Default: "Cancel" */
+    cancel?: string;
 }
-export interface ConfirmationModalProps extends ModalProps {
+export interface ConfirmationModalProps extends Omit<ModalProps, 'text'> {
     onConfirmRequest?: ({ dontShowAgain, }: {
         dontShowAgain?: boolean;
     }) => void | Promise<void> | Promise<boolean>;
@@ -45,12 +61,10 @@ export interface ConfirmationModalProps extends ModalProps {
     hasDontShowAgainCheckbox?: boolean;
     /** The variant of the confirmation button. */
     confirmationButtonVariant?: ButtonVariants;
-    /** The text of the confirmation button */
-    confirmationButtonText?: string;
-    /** The text of the cancel button */
-    cancelButtonText?: string;
     /** The icon of the modal */
     icon?: IconName;
     /** The status of the modal. This will determine the color of the icon. */
     status?: 'info' | 'success' | 'error';
+    /** Customizable display text. */
+    text?: ConfirmationModalText;
 }

package/lib/components/pagination/Pagination.d.ts

@@ -1,2 +1,2 @@
 import { PaginationProps } from './types';
-export declare const Pagination: ({ totalPages, currentPage, onChange, className, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ totalPages, currentPage, onChange, className, text: textProp, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/pagination/index.d.ts

@@ -1 +1,2 @@
 export { Pagination } from './Pagination';
+export type { PaginationText } from './types';

package/lib/components/pagination/types.d.ts

@@ -1,3 +1,14 @@
+/** Customizable text for Pagination. */
+export interface PaginationText {
+    /** Aria label for previous page button. Default: "Previous Page" */
+    previousPage?: string;
+    /** Aria label for next page button. Default: "Next Page" */
+    nextPage?: string;
+    /** Label for current page input. Default: "Current Page" */
+    currentPage?: string;
+    /** Text between current page and total (e.g., "of"). Default: "of" */
+    of?: string;
+}
 export interface PaginationProps {
     /** The total number of pages to be displayed */
     totalPages: number;
@@ -7,4 +18,6 @@ export interface PaginationProps {
     className?: string;
     /** The callback function that is called when the page changes. */
     onChange?: (value: number) => void;
+    /** Customizable display text. */
+    text?: PaginationText;
 }

package/lib/components/stepper/Stepper.d.ts

@@ -1,2 +1,2 @@
 import { StepperProps } from './types';
-export declare const Stepper: ({ currentStep: externalCurrentStep, legendHeader, legendFooter, steps, onBackClick, onNextClick, onFinishClick, children, onStepClick, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: ({ currentStep: externalCurrentStep, legendHeader, legendFooter, steps, onBackClick, onNextClick, onFinishClick, children, onStepClick, text: textProp, }: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/components/BackNavigation.d.ts

@@ -1,6 +1,7 @@
 type Props = {
     isDisabled: boolean;
     onBackClick: () => void;
+    label: string;
 };
-export declare const BackNavigation: ({ isDisabled, onBackClick }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const BackNavigation: ({ isDisabled, onBackClick, label }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/stepper/components/NextNavigation.d.ts

@@ -3,6 +3,8 @@ type Props = {
     onNextClick: () => void;
     onFinishClick: () => void;
     isDisabled: boolean;
+    nextLabel: string;
+    finishLabel: string;
 };
-export declare const NextNavigation: ({ isLastStep, onNextClick, onFinishClick, isDisabled }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const NextNavigation: ({ isLastStep, onNextClick, onFinishClick, isDisabled, nextLabel, finishLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/stepper/types.d.ts

@@ -1,4 +1,13 @@
 import { ReactNode } from 'react';
+/** Customizable text for Stepper. */
+export interface StepperText {
+    /** Label for the "Previous Step" button. Default: "Previous Step" */
+    previousStep?: string;
+    /** Label for the "Next Step" button. Default: "Next Step" */
+    nextStep?: string;
+    /** Label for the "Finish" button. Default: "Finish" */
+    finish?: string;
+}
 export interface StepperProps {
     /** An array of step objects that define the stepper navigation. */
     steps: Step[];
@@ -17,6 +26,8 @@ export interface StepperProps {
     children: React.ReactNode;
     /** The function to call when a step is clicked ont he legend. */
     onStepClick: (step: number) => void;
+    /** Customizable display text. */
+    text?: StepperText;
 }
 export interface StepperLegendProps {
     currentStep: number;

package/lib/components/table/LoadingComponent.d.ts

@@ -1 +1,5 @@
-export declare const LoadingComponent: () => import("react/jsx-runtime").JSX.Element;
+interface LoadingComponentProps {
+    loadingText: string;
+}
+export declare const LoadingComponent: ({ loadingText }: LoadingComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/table/components/HorizontalStickyHeader.d.ts

@@ -1,3 +1,4 @@
+import { HorizontalStickyHeaderText } from '../types';
 interface HorizontalStickyHeaderProps {
     children: React.ReactNode;
     position: number;
@@ -5,6 +6,8 @@ interface HorizontalStickyHeaderProps {
     isPinned?: boolean;
     forceUpdate?: number;
     pinnedColumnIds: string[];
+    /** Customizable display text. */
+    text?: HorizontalStickyHeaderText;
 }
-declare const HorizontalStickyHeader: ({ children, position, onPinColumn, isPinned, pinnedColumnIds, }: HorizontalStickyHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const HorizontalStickyHeader: ({ children, position, onPinColumn, isPinned, pinnedColumnIds, text: textProp, }: HorizontalStickyHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default HorizontalStickyHeader;

package/lib/components/table/hooks/usePinnedColumnsManager.d.ts

@@ -1,8 +1,8 @@
-import { TableColumn } from '../types';
+import { TableColumn, HorizontalStickyHeaderText } from '../types';
 /**
  * Hook to manage pinned columns in a table
  * Handles initialization, toggling, positioning and resizing of pinned columns
  */
-export declare const usePinnedColumnsManager: <T>(columns: TableColumn<T>[], canPinColumns: boolean, onPinnedColumnsChange?: (pinnedColumnIds: string[]) => void) => {
+export declare const usePinnedColumnsManager: <T>(columns: TableColumn<T>[], canPinColumns: boolean, onPinnedColumnsChange?: (pinnedColumnIds: string[]) => void, text?: HorizontalStickyHeaderText) => {
     columnsWithPinning: TableColumn<T>[];
 };

package/lib/components/table/types.d.ts

@@ -9,6 +9,22 @@ export interface PinnableColumn<T> extends RDTTableColumn<T> {
     position?: number;
 }
 export type TableColumn<T> = PinnableColumn<T>;
+/** Customizable text for Table. */
+export interface TableText {
+    /** Text to display while loading. Default: "Loading..." */
+    loading?: string;
+    /** Aria label for unpinning a column. Default: "Unpin column" */
+    unpinColumn?: string;
+    /** Aria label for pinning a column. Default: "Pin column" */
+    pinColumn?: string;
+}
+/** Customizable text for HorizontalStickyHeader. */
+export interface HorizontalStickyHeaderText {
+    /** Aria label for unpinning a column. Default: "Unpin column" */
+    unpinColumn?: string;
+    /** Aria label for pinning a column. Default: "Pin column" */
+    pinColumn?: string;
+}
 export interface TableProps<T> extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
     /** The columns to display in the table. All columns require a unique id property. For pinned columns, please see the pinned example below. */
     columns: TableColumn<T>[];
@@ -28,4 +44,6 @@ export interface TableProps<T> extends Omit<IDataTableProps<T>, 'paginationCompo
     canPinColumns?: boolean;
     /** Callback that receives the IDs of the pinned columns when they change. */
     onPinnedColumnsChange?: (pinnedColumnIds: any[]) => void;
+    /** Customizable display text. */
+    text?: TableText;
 }

package/lib/components/table/utils/processColumns.d.ts

@@ -1,2 +1,2 @@
-import { TableColumn } from '../types';
-export declare const processColumns: <T>(columns: TableColumn<T>[], pinnedColumnIds: string[], togglePinnedColumn: (id: string) => void) => TableColumn<T>[];
+import { TableColumn, HorizontalStickyHeaderText } from '../types';
+export declare const processColumns: <T>(columns: TableColumn<T>[], pinnedColumnIds: string[], togglePinnedColumn: (id: string) => void, text?: HorizontalStickyHeaderText) => TableColumn<T>[];

package/lib/components/tanstackTable/TankstackTable.types.d.ts

@@ -1,4 +1,21 @@
 import { Row, ColumnDef, SortingState } from '@tanstack/react-table';
+/** Customizable text for TanstackTable. */
+export interface TanstackTableText {
+    /** Message while table is loading. Default: "Table is loading..." */
+    loading?: string;
+    /** Message when no results found. Default: "No results found." */
+    noResults?: string;
+    /** Message when there's an error loading data. Default: "There was an error loading the data." */
+    error?: string;
+    /** Text for reset filters button. Default: "Reset filters" */
+    resetFilters?: string;
+    /** Singular entry text. Default: "entry" */
+    entry?: string;
+    /** Plural entries text. Default: "entries" */
+    entries?: string;
+    /** "of" text in pagination (e.g., "5 of 10 entries"). Default: "of" */
+    of?: string;
+}
 export type WithPaginationProps = {
     /** Number of rows to display per pagination page. */
     rowsPerPage: number;
@@ -52,8 +69,6 @@ export type Props<T extends object> = {
     hasFilters?: boolean;
     /** When this is true, the table is considered to be in a loading state. */
     isLoading?: boolean;
-    /** Message to display when the table is loading. */
-    isLoadingMessage?: string;
     /** Columns that are pinned by default. */
     defaultPinnedColumns?: string[];
     /** Callback when a row is clicked. */
@@ -70,4 +85,6 @@ export type Props<T extends object> = {
     onSelectAllChange?: (isSelected: boolean) => void;
     /** You may pass a default sorting state to the table. This will be used to sort the table by default. This is useful if you want to sort the table by a column by default. */
     defaultSorting?: SortingState;
+    /** Customizable display text. */
+    text?: TanstackTableText;
 } & PaginationProps;

package/lib/components/tanstackTable/TanstackTable.d.ts

@@ -1,4 +1,4 @@
 import { Props } from './TankstackTable.types';
-export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, isLoadingMessage, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, defaultSorting, ...rest }: Props<T & {
+export declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, defaultSorting, text: textProp, ...rest }: Props<T & {
     id: string;
 }>): import("react/jsx-runtime").JSX.Element;

package/lib/components/tanstackTable/components/NoResults/NoResults.d.ts

@@ -2,6 +2,7 @@ type Props = {
     clearFilters?: () => void;
     hasFilters?: boolean;
     message: string;
+    resetFiltersText?: string;
 };
-export declare function NoResults({ clearFilters, hasFilters, message }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function NoResults({ clearFilters, hasFilters, message, resetFiltersText, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/tanstackTable/components/TablePagination/TablePagination.d.ts

@@ -1,9 +1,11 @@
+import { PaginationText } from '../../../pagination';
 interface TablePaginationProps {
     rowsPerPage: number;
     rowCount: number;
     onChangePage: (page: number) => void;
     currentPage: number;
     totalEntriesText?: string;
+    text?: PaginationText;
 }
-export declare const TablePagination: ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, }: TablePaginationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TablePagination: ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, text, }: TablePaginationProps) => import("react/jsx-runtime").JSX.Element;
 export {};