@ostack.tech/ui 0.10.4 → 0.11.0

package/dist/types/components/DescriptionList/DescriptionListItem.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { GridItemProps } from '../Grid';
+/** Properties of the description list item component. */
+export interface DescriptionListItemProps extends GridItemProps {
+    /** Term of the description list item. */
+    term: ReactNode;
+    /** Details of the description list item. */
+    children: ReactNode;
+    /** Properties to pass to the description term element. */
+    descriptionTermProps?: ComponentPropsWithRef<"dt">;
+    /** Properties to pass to the description details element. */
+    descriptionDetailsProps?: ComponentPropsWithRef<"dd">;
+}
+/** Item of the description list: a grouping of a term and its details. */
+export declare const DescriptionListItem: import('react').ForwardRefExoticComponent<DescriptionListItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/DescriptionList/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DescriptionList.tsx';
+export * from './DescriptionListItem.tsx';

package/dist/types/components/Dialog/Dialog.d.ts

@@ -5,8 +5,7 @@ import { Dialog as DialogPrimitive } from 'radix-ui';
  *
  * Built on top of the [Radix Dialog
  * primitive](https://www.radix-ui.com/primitives/docs/components/dialog), and
- * the [`Card`
- * component](https://ui.ostack.tech/?path=/docs/ostack-ui-data-display-card--docs).
+ * the [`Card` component](?path=/docs/ostack-ui-data-display-card--docs).
  *
  * It composes the following subcomponents:
  *

package/dist/types/components/Dialog/DialogContent.d.ts

@@ -13,7 +13,7 @@ export interface DialogContentProps extends ComponentPropsWithoutRef<typeof Dial
     /**
      * Dialog content variant.
      *
-     * @default solid
+     * @default "solid"
      */
     variant?: DialogContentVariant;
     /**
@@ -27,13 +27,13 @@ export interface DialogContentProps extends ComponentPropsWithoutRef<typeof Dial
     /**
      * Dialog content color.
      *
-     * @default neutral
+     * @default "neutral"
      */
     color?: DialogContentColor;
     /**
      * Size of the dialog content.
      *
-     * @default md
+     * @default "md"
      */
     size?: DialogContentSize;
     /** Properties to pass to the portal component. */

package/dist/types/components/DropdownMenu/DropdownMenu.d.ts

@@ -9,7 +9,7 @@ export interface DropdownMenuProps extends Omit<ComponentPropsWithoutRef<typeof
  * Built on top of the [Radix Dropdown Menu
  * primitive](https://www.radix-ui.com/primitives/docs/components/dropdown-menu)
  * and the [`MenuList`
- * component](https://ui.ostack.tech/?path=/docs/ostack-ui-data-display-menu-list--docs).
+ * component](?path=/docs/ostack-ui-data-display-menu-list--docs).
  *
  * It composes the following subcomponents:
  *

package/dist/types/components/FieldGroup/FieldGroup.d.ts

@@ -9,22 +9,50 @@ export interface FieldGroupProps extends ComponentPropsWithoutRef<"div"> {
     asChild?: boolean;
 }
 /**
- * Component used to group a set of fields of a form, improving the organization
- * and usability of forms. By combining a header and body layout, it makes forms
- * more readable and accessible, especially for complex interfaces. The header
- * gives the group a clear title, while the body contains all related input
- * controls.
- *
- * This component is especially useful for creating forms where logical grouping
- * of fields is essential for user comprehension. It ensures consistency in
- * design and simplifies the process of building accessible and maintainable
- * forms.
+ * The field group component can be used to group multiple related form fields
+ * together.
  *
  * It composes the following subcomponents:
  *
- * - `FieldGroupHeader`: Acts as the headers for the group, typically containing
- *   the `FieldGroupTitle` of the section.
- * - `FieldGroupTitle`: Displays the title within the header.
- * - `FieldGroupBody`: The container for all fields and controls within the group.
+ * - `FieldGroupHeader`: Header of the field group.
+ * - `FieldGroupTitle`: Title of the field group, used to label the group.
+ * - `FieldGroupBody`: The container for fields within the group.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import {
+ *   Field,
+ *   FieldGroup,
+ *   FieldGroupBody,
+ *   FieldGroupHeader,
+ *   FieldGroupTitle,
+ *   Input,
+ *   Label,
+ *   Stack,
+ * } from "@ostack.tech/ui";
+ *
+ * export function PassengerIdentification() {
+ *   return (
+ *     <FieldGroup>
+ *       <FieldGroupHeader>
+ *         <FieldGroupTitle>Passenger identification</FieldGroupTitle>
+ *       </FieldGroupHeader>
+ *       <FieldGroupBody>
+ *         <Stack gap={3}>
+ *           <Field>
+ *             <Label>Full name</Label>
+ *             <Input />
+ *           </Field>
+ *           <Field>
+ *             <Label>Passport number</Label>
+ *             <Input />
+ *           </Field>
+ *         </Stack>
+ *       </FieldGroupBody>
+ *     </FieldGroup>
+ *   );
+ * }
+ * ```
  */
 export declare const FieldGroup: import('react').ForwardRefExoticComponent<FieldGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Grid/Grid.d.ts

@@ -5,7 +5,9 @@ export type GridColumnSize = number | "auto" | "content";
 /** Offset of a column. */
 export type GridOffsetSize = number | "auto";
 /** Properties of the grid component. */
-export interface GridProps extends ComponentPropsWithoutRef<"div"> {
+export type GridProps = GridContainerProps | GridItemProps;
+/** Base properties of the grid component. */
+export interface GridPropsBase extends ComponentPropsWithoutRef<"div"> {
     /**
      * Change the component to the HTML tag or custom component of the only child.
      * This will merge the original component props with the props of the supplied
@@ -27,8 +29,8 @@ export interface GridProps extends ComponentPropsWithoutRef<"div"> {
      */
     columns?: Responsive<number>;
     /**
-     * Gap between both rows and columns. When a number `n` is provided, each unit
-     * corresponds to `spacing(n)`.
+     * Gap between both rows and columns. When a number is provided, each unit
+     * corresponds to `var(--o-ui-space)`.
      *
      * A responsive value may be provided to change the gap based on the current
      * breakpoint.
@@ -37,8 +39,8 @@ export interface GridProps extends ComponentPropsWithoutRef<"div"> {
      */
     gap?: Responsive<number | string>;
     /**
-     * Gap between rows. When a number `n` is provided, each unit corresponds to
-     * `spacing(n)`.
+     * Gap between rows. When a number is provided, each unit corresponds to
+     * `var(--o-ui-space)`.
      *
      * A responsive value may be provided to change the row gap based on the
      * current breakpoint.
@@ -47,8 +49,8 @@ export interface GridProps extends ComponentPropsWithoutRef<"div"> {
      */
     rowGap?: Responsive<number | string>;
     /**
-     * Gap between columns. When a number `n` is provided, each unit corresponds
-     * to `spacing(n)`.
+     * Gap between columns. When a number is provided, each unit corresponds to
+     * `var(--o-ui-space)`.
      *
      * A responsive value may be provided to change the column gap based on the
      * current breakpoint.
@@ -81,10 +83,61 @@ export interface GridProps extends ComponentPropsWithoutRef<"div"> {
     /** Offset size (number of columns) at the `xxl` breakpoint. */
     xxlOffset?: GridOffsetSize;
 }
+/** Properties of the grid component when `container` is set. */
+export interface GridContainerProps extends GridPropsBase {
+    container: true;
+    xs?: never;
+    xsOffset?: never;
+    sm?: never;
+    smOffset?: never;
+    md?: never;
+    mdOffset?: never;
+    lg?: never;
+    lgOffset?: never;
+    xl?: never;
+    xlOffset?: never;
+    xxl?: never;
+    xxlOffset?: never;
+}
+/** Properties of the grid component when `container` is not set. */
+export interface GridItemProps extends GridPropsBase {
+    container?: false;
+    columns?: never;
+    gap?: never;
+    rowGap?: never;
+    columnGap?: never;
+}
 /**
- * The `Grid` component is designed for creating layouts with a defined number
- * of columns. It allows you to configure columns responsively by specifying
- * different column spans for each child at various breakpoints, enabling
- * flexible and adaptive designs across screen sizes.
+ * The `Grid` component is designed for creating one or two-dimensional layouts
+ * within a defined number of columns.
+ *
+ * For one-dimensional vertical layouts or one-dimensional horizontal layouts
+ * without a fixed number of columns, you might prefer to use the [`Stack`
+ * component](?path=/docs/ostack-ui-layout-stack--docs) instead.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Grid } from "@ostack.tech/ui";
+ *
+ * function Items() {
+ *   return (
+ *     <Grid container>
+ *       <Grid xs={8}>
+ *         <Item>Item 1</Item>
+ *       </Grid>
+ *       <Grid xs={4}>
+ *         <Item>Item 2</Item>
+ *       </Grid>
+ *       <Grid xs={4}>
+ *         <Item>Item 3</Item>
+ *       </Grid>
+ *       <Grid xs={8}>
+ *         <Item>Item 4</Item>
+ *       </Grid>
+ *     </Grid>
+ *   );
+ * }
+ * ```
  */
 export declare const Grid: import('react').ForwardRefExoticComponent<GridProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Icon/Icon.d.ts

@@ -36,7 +36,7 @@ export interface IconProps extends Omit<ComponentPropsWithoutRef<typeof FontAwes
  * more information on all supported properties, see [FontAwesome's React
  * documentation](https://docs.fontawesome.com/web/use-with/react/).
  *
- * For a list of existing icons, consult:
+ * For a list of existing free icons, consult:
  * https://fontawesome.com/search?ic=free.
  *
  * For tree-shaking purposes, we recommend importing icons individually from

package/dist/types/components/IconButton/IconButton.d.ts

@@ -28,19 +28,19 @@ export interface IconButtonOwnProps {
     /**
      * Icon button's variant.
      *
-     * @default solid
+     * @default "solid"
      */
     variant?: IconButtonVariant;
     /**
      * Icon button's colour.
      *
-     * @default neutral
+     * @default "neutral"
      */
     color?: IconButtonColor;
     /**
      * Size of the icon button.
      *
-     * @default md
+     * @default "md"
      */
     size?: IconButtonSize;
     /** Whether to display the icon button as a circle. */
@@ -125,9 +125,9 @@ export interface IconButtonOwnProps {
      * at the end of the icon button's tooltip for visual users and announced to
      * screen readers via `aria-keyshortcuts`.
      *
-     * **Note:** This property does **not** automatically register a keyboard
-     * shortcut to run the icon button's action. This should be done manually via
-     * _e.g._ the `useKeyboardShortcut` hook.
+     * > **Note:** This property does **not** automatically register a keyboard
+     * > shortcut to run the icon button's action. This should be done manually via
+     * > _e.g._ the `useKeyboardShortcut` hook.
      */
     keybinds?: KeyboardShortcutKeybinds;
     /** Properties to pass to the `Icon` component. */
@@ -151,10 +151,8 @@ export interface IconButtonOwnProps {
  *
  * Built on top of the browser's [`<button>`
  * element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button),
- * [`Icon`
- * component](https://ui.ostack.tech/?path=/docs/ostack-ui-data-display-icon--docs),
- * and [`Tooltip`
- * component](https://ui.ostack.tech/?path=/docs/ostack-ui-overlay-tooltip--docs).
+ * [`Icon` component](?path=/docs/ostack-ui-data-display-icon--docs), and
+ * [`Tooltip` component](?path=/docs/ostack-ui-overlay-tooltip--docs).
  *
  * Example usage:
  *

package/dist/types/components/Input/Input.d.ts

@@ -70,9 +70,8 @@ export interface InputPropsBase {
     /** Input's end adornment. */
     endAdornment?: ReactNode;
     /**
-     * Whether to show a button to clear the input when it has content.
-     *
-     * @default false
+     * Whether to show a button to clear the input when it has content. Defaults
+     * `"auto"` when `type="search"`, `false` otherwise.
      */
     showClearButton?: ShowClearButton;
     /** Label of the clear button announced to assistive technologies. */

package/dist/types/components/Link/Link.d.ts

@@ -21,14 +21,12 @@ export interface LinkOwnProps {
     /**
      * Colour of the link.
      *
-     * @default primary
+     * @default "primary"
      */
     color?: LinkColor;
     /**
      * Link variant. Defaults to `"default"`, unless when rendered within an
      * `Alert`, in which case the `"alert"` variant is used.
-     *
-     * @default default
      */
     variant?: LinkVariant;
     /**

package/dist/types/components/Mark/Mark.d.ts

@@ -13,7 +13,7 @@ export interface MarkProps extends ComponentPropsWithoutRef<"mark"> {
     /**
      * Colour to use for marking the text.
      *
-     * @default warning
+     * @default "warning"
      */
     color?: MarkColor;
 }

package/dist/types/components/MenuList/MenuList.d.ts

@@ -29,6 +29,11 @@ export interface MenuListProps extends ComponentPropsWithoutRef<"ul"> {
  * The menu list component is used to display a list as a menu of actionable
  * items.
  *
+ * It composes the following subcomponents:
+ *
+ * - `MenuListGroup`: Group of items in the menu list.
+ * - `MenuListItem`: Single item in the menu list.
+ *
  * Example usage:
  *
  * ```tsx

package/dist/types/components/MenuList/MenuListItem.d.ts

@@ -94,9 +94,9 @@ export interface MenuListItemProps extends Omit<ComponentPropsWithoutRef<"li">,
      * the item for visual users and announced to screen readers via
      * `aria-keyshortcuts`.
      *
-     * **Note:** This property does **not** automatically register a keyboard
-     * shortcut to run the item's action. This should be done manually via _e.g._
-     * the `useKeyboardShortcut` hook.
+     * > **Note:** This property does **not** automatically register a keyboard
+     * > shortcut to run the item's action. This should be done manually via _e.g._
+     * > the `useKeyboardShortcut` hook.
      */
     keybinds?: KeyboardShortcutKeybinds;
     /** Href for the link, when `type` is set to `"link"`. */

package/dist/types/components/NumericInput/NumericInput.d.ts

@@ -75,8 +75,8 @@ export interface NumericValueRepresentations {
 /**
  * The numeric input component is used to collect numeric user input. It is
  * built on top of the [`Input`
- * component](https://ui.ostack.tech/?path=/docs/ostack-ui-forms-input--docs)
- * and the [`react-number-format`
+ * component](?path=/docs/ostack-ui-forms-input--docs) and the
+ * [`react-number-format`
  * library](https://s-yadav.github.io/react-number-format/).
  *
  * It supports specifying the precision, scale, separators, grouping of digits,

package/dist/types/components/Popover/Popover.d.ts

@@ -1,27 +1,40 @@
 import { Popover as PopoverPrimitive } from 'radix-ui';
 /**
- * Root popover component that provides an interactive and versatile overlay to
- * display additional content or actions in a contextual manner. It is ideal for
- * creating dynamic overlays that enhance user interactions by presenting
- * supplementary information or controls directly related to a trigger element.
+ * The popover component displays content in a floating pop-up, triggered by a
+ * button. Built on top of the [Radix Popover
+ * primitive](https://www.radix-ui.com/primitives/docs/components/popover)
  *
  * It composes the following subcomponents:
  *
- * - `PopoverAnchor`: A utility to anchor the popover to a specific element. It
- *   ensures the popover aligns accurately with the anchor, allowing for dynamic
- *   placement and responsiveness.
- * - `PopoverClose`: An interactive element that closes the popover when clicked.
- *   It is used to provide a seamless and accessible way for users to dismiss
- *   the popover.
- * - `PopoverContent`: The container for the content displayed within the popover.
- *   It supports customization of appearance and behavior, including position
- *   `side` and whether an arrow is shown `showArrow`.
- * - `PopoverTrigger`: An interactive element, such as a button, that toggles the
- *   visibility of the popover. It acts as the primary control for opening and
- *   closing the popover.
+ * - `PopoverTrigger`: Button that toggles the popover. By default, popover
+ *   content positions itself against this component.
+ * - `PopoverContent`: Content that pops out when the popover is open.
+ * - `PopoverAnchor`: Optional element to position the popover content against
+ *   instead of the trigger.
+ * - `PopoverClose`: Optional button that closes an open popover.
  *
- * For detailed information on these props, which do not have descriptions,
- * please refer to the
- * [docs](https://www.radix-ui.com/primitives/docs/components/popover).
+ * Example usage:
+ *
+ * ```tsx
+ * import {
+ *   Button,
+ *   Popover,
+ *   PopoverContent,
+ *   PopoverTrigger,
+ * } from "@ostack.tech/ui";
+ *
+ * export function AccountInformation() {
+ *   return (
+ *     <Popover>
+ *       <PopoverTrigger>
+ *         <Button>Account information</Button>
+ *       </PopoverTrigger>
+ *       <PopoverContent>
+ *         <strong>Account name:</strong> Alana Richards
+ *       </PopoverContent>
+ *     </Popover>
+ *   );
+ * }
+ * ```
  */
 export declare const Popover: import('react').FC<PopoverPrimitive.PopoverProps>;

package/dist/types/components/Popover/PopoverClose.d.ts

@@ -1,7 +1,14 @@
-import { Popover as PopoverPrimitive } from 'radix-ui';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { CloseButton } from '../CloseButton';
 /** Properties of the popover close component. */
-export interface PopoverCloseProps extends Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Close>, "asChild"> {
+export type PopoverCloseProps = PopoverCloseChildlessProps | PopoverCloseChildrenProps;
+/** Properties of the popover close component when rendered without children. */
+export interface PopoverCloseChildlessProps extends Omit<ComponentPropsWithoutRef<typeof CloseButton>, "asChild"> {
+    children?: never;
+}
+/** Properties of the popover close component when rendered with children. */
+export interface PopoverCloseChildrenProps extends ComponentPropsWithoutRef<"button"> {
+    children: ReactNode;
 }
 /** The button that closes an open popover. */
 export declare const PopoverClose: import('react').ForwardRefExoticComponent<PopoverCloseProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Printer/Printer.d.ts

@@ -24,7 +24,7 @@ export interface PrintOptions {
      * [`print-color-adjust`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust)
      * CSS property.
      *
-     * @default exact
+     * @default "exact"
      */
     printColorAdjust?: CSSProperties["printColorAdjust"];
     /**
@@ -114,9 +114,9 @@ export interface PrinterProps extends PrintOptions {
  * Built on top of the
  * [`react-to-print`](https://github.com/MatthewHerbst/react-to-print) package.
  *
- * **Note**: While printing, the content to print is typically (unless
- * `printInForeground` is provided) rendered twice: once for the content visible
- * on the screen and another in a hidden and “portalled” element for printing.
+ * > **Note:** While printing, the content to print is typically (unless
+ * > `printInForeground` is provided) rendered twice: once for the content visible
+ * > on the screen and another in a hidden and “portalled” element for printing.
  *
  * It composes the following subcomponents:
  *

package/dist/types/components/Printer/PrinterContentContext.d.ts

@@ -9,13 +9,13 @@ export declare const PrinterContentContext: import('react').Context<PrinterConte
 /**
  * Hook providing access to the printer content context.
  *
- * **Note**: This hook **can** be called outside the printer context.
+ * > **Note:** This hook **can** be called outside the printer context.
  */
 export declare function usePrinterContentContext(): PrinterContextValue;
 /**
  * Returns whether the component calling this hook is currently being printed.
  *
- * **Note**: This hook **can** be called outside the printer context.
+ * > **Note:** This hook **can** be called outside the printer context.
  */
 export declare function usePrinting(): boolean;
 /** Options for the `useStartPrintingTask` hook. */
@@ -32,7 +32,7 @@ export interface UseStartPrintingTaskOptions {
  * called when it finishes. The printer will wait for any ongoing printing tasks
  * before printing.
  *
- * **Note**: This hook **can** be called outside the printer context, in which
- * case starting/finishing printing tasks will be no-ops but **won't** fail.
+ * > **Note:** This hook **can** be called outside the printer context, in which
+ * > case starting/finishing printing tasks will be no-ops but **won't** fail.
  */
 export declare function useStartPrintingTask({ enabled, }?: UseStartPrintingTaskOptions): () => void;

package/dist/types/components/Printer/PrinterContext.d.ts

@@ -21,8 +21,8 @@ export declare function usePrinterDocumentTitle(): PrinterProps["documentTitle"]
 /**
  * Returns whether printing is currently in progress.
  *
- * **Note**: This hook can be called even when a printer context is **not** in
- * scope, in which case `false` will be returned.
+ * > **Note:** This hook can be called even when a printer context is **not** in
+ * > scope, in which case `false` will be returned.
  */
 export declare function usePrintInProgress(): boolean;
 /**

package/dist/types/components/Root/Root.d.ts

@@ -55,21 +55,21 @@ export interface RootProps extends ComponentPropsWithoutRef<"div">, Pick<Compone
      * The duration from when the pointer enters the trigger until the tooltip
      * gets opened.
      *
-     * @defaultValue 700
+     * @default 700
      */
     tooltipsDelayDuration?: number;
     /**
      * How much time a user has to enter another trigger without incurring a delay
      * again.
      *
-     * @defaultValue 300
+     * @default 300
      */
     tooltipsSkipDelayDuration?: number;
     /**
      * When set, trying to hover the content will result in the tooltip closing as
      * the pointer leaves the trigger.
      *
-     * @defaultValue false
+     * @default false
      */
     disableTooltipsHoverableContent?: boolean;
     /**
@@ -81,26 +81,26 @@ export interface RootProps extends ComponentPropsWithoutRef<"div">, Pick<Compone
     /**
      * Time in milliseconds that each toast should remain visible for.
      *
-     * @defaultValue 5000
+     * @default 5000
      */
     toastsDuration?: number;
     /**
      * Direction of pointer swipe that should close the toast.
      *
-     * @defaultValue "right"
+     * @default "right"
      */
     toastsSwipeDirection?: ToastSwipeDirection;
     /**
      * Distance in pixels that the swipe must pass before a close is triggered.
      *
-     * @defaultValue 50
+     * @default 50
      */
     toastsSwipeThreshold?: number;
     /**
      * The keys to use as the keyboard shortcut that will move focus to the toast
      * viewport.
      *
-     * @defaultValue ["F8"]
+     * @default ["F8"]
      */
     toastViewportHotkey?: string[];
     /**

package/dist/types/components/Select/Select.d.ts

@@ -38,6 +38,12 @@ export interface SelectPropsBase<T extends string | number | readonly string[] =
     onOpenChange?: (open: boolean) => void;
     /** Select's placeholder. */
     placeholder?: ReactNode;
+    /**
+     * Select
+     * [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete)
+     * attribute.
+     */
+    autoComplete?: ComponentPropsWithoutRef<"select">["autoComplete"];
     /** Accessible label for the search input. Not shown visibly. */
     searchLabel?: string;
     /** Accessible label for the list of options. Not shown visibly. */

package/dist/types/components/Select/SelectContext.d.ts

@@ -17,13 +17,14 @@ export interface SelectContextValue {
 }
 /** State of an option. */
 export interface OptionState {
+    value: string;
     content: ReactNode;
     color?: AccentColor;
     disabled?: boolean;
 }
 /** State of the select. */
 export interface SelectState {
-    optionsContent: [Map<string, OptionState>];
+    options: [Map<string, OptionState>];
     actions: SelectActions;
 }
 export interface SelectActions {

package/dist/types/components/Select/SelectNative.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef } from 'react';
+/** Properties of the native `<select>` element. */
+export interface SelectNativeProps extends ComponentPropsWithoutRef<"select"> {
+    onValueChange: (value: string | string[]) => void;
+}
+/** Native `<select>` element used by the `Select` component. */
+export declare function SelectNative({ multiple, onValueChange, ...otherProps }: SelectNativeProps): import("react/jsx-runtime").JSX.Element;