@iress-oss/ids-components 5.16.0 → 6.0.0-alpha.0

package/dist/src/components/Row/Row.styles.d.ts

@@ -0,0 +1,36 @@
+export declare const row: import('../../styled-system/types').RecipeRuntimeFn<{
+    horizontalAlign: {
+        left: {
+            justifyContent: "flex-start";
+        };
+        center: {
+            justifyContent: "center";
+        };
+        right: {
+            justifyContent: "flex-end";
+        };
+        around: {
+            justifyContent: "space-around";
+        };
+        between: {
+            justifyContent: "space-between";
+        };
+        evenly: {
+            justifyContent: "space-evenly";
+        };
+    };
+    verticalAlign: {
+        top: {
+            alignItems: "flex-start";
+        };
+        middle: {
+            alignItems: "center";
+        };
+        bottom: {
+            alignItems: "flex-end";
+        };
+        stretch: {
+            alignItems: "stretch";
+        };
+    };
+}>;

package/dist/src/components/Row/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Row.types';
+export * from './Row.styles';
 export * from './Row';

package/dist/src/components/Row/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Row/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

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

@@ -1,2 +1,47 @@
-import { SelectWithEnums } from './Select.types';
-export declare const IressSelect: SelectWithEnums;
+import { ChangeEvent, ForwardedRef, ReactElement, ReactNode } from 'react';
+import { FormControlValue, IressStyledProps } from '../../types';
+import { IressInputProps } from '../Input';
+type SelectElement<TReadonly extends boolean | undefined = undefined> = TReadonly extends true ? 'div' : 'select';
+export type IressSelectProps<T extends FormControlValue = FormControlValue, TReadonly extends boolean | undefined = undefined> = Omit<IressStyledProps<SelectElement<TReadonly>>, 'defaultValue' | 'value' | 'onChange' | 'width'> & {
+    /**
+     * The `option` and `optgroup` elements to render within the select.
+     */
+    children?: ReactNode | string;
+    /**
+     * Value of selected option for uncontrolled select.
+     */
+    defaultValue?: T;
+    /**
+     * Identifier for select.
+     */
+    name?: string;
+    /**
+     * Handles the onChange event of the select input.
+     * If you pass in a non-string value, you can access it using the second parameter of the function.
+     */
+    onChange?: (e: ChangeEvent<HTMLSelectElement>, value?: T) => void;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    readOnly?: TReadonly;
+    /**
+     * Mark the select as a required field.
+     */
+    required?: boolean;
+    /**
+     * Value of selected option for controlled select.
+     */
+    value?: T;
+    /**
+     * Adds an `option` as the first element with the placeholder text and no value.
+     */
+    placeholder?: string;
+    /**
+     * The width of the select.
+     */
+    width?: IressInputProps['width'];
+};
+export declare const IressSelect: <T extends FormControlValue = FormControlValue, TReadonly extends boolean | undefined = undefined>(props: IressSelectProps<T, TReadonly> & {
+    ref?: ForwardedRef<HTMLElementTagNameMap[SelectElement<TReadonly>]>;
+}) => ReactElement;
+export {};

package/dist/src/components/Select/Select.styles.d.ts

@@ -0,0 +1,94 @@
+/**
+ * The atomic recipe is a function that takes a variant and returns a class name object. It can be used to create a component without JSX (eg. as a utility class).
+ *
+ * [Learn more](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva)
+ */
+export declare const select: import('../../styled-system/types').SlotRecipeRuntimeFn<"element" | "wrapper" | "control", {
+    width: {
+        '2': {
+            wrapper: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]";
+            };
+            element: {
+                width: "auto";
+            };
+        };
+        '4': {
+            wrapper: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]";
+            };
+            element: {
+                width: "auto";
+            };
+        };
+        '6': {
+            wrapper: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]";
+            };
+            element: {
+                width: "auto";
+            };
+        };
+        '8': {
+            wrapper: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]";
+            };
+            element: {
+                width: "auto";
+            };
+        };
+        '10': {
+            wrapper: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]";
+            };
+            element: {
+                width: "auto";
+            };
+        };
+        '12': {
+            wrapper: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]";
+            };
+        };
+        '16': {
+            wrapper: {
+                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]";
+            };
+            element: {
+                width: "auto";
+            };
+        };
+        '25perc': {
+            wrapper: {
+                width: "input.25perc";
+            };
+            element: {
+                width: "auto";
+            };
+        };
+        '50perc': {
+            wrapper: {
+                width: "input.50perc";
+            };
+            element: {
+                width: "auto";
+            };
+        };
+        '75perc': {
+            wrapper: {
+                width: "input.75perc";
+            };
+            element: {
+                width: "auto";
+            };
+        };
+        '100perc': {
+            wrapper: {
+                width: "input.100perc";
+            };
+            element: {
+                width: "auto";
+            };
+        };
+    };
+}>;

package/dist/src/components/Select/SelectOption/SelectOption.d.ts

@@ -1,2 +1,9 @@
-import { IressSelectOptionProps } from '../Select.types';
+import { FormControlValue, IressStyledProps } from '../../../types';
+export interface IressSelectOptionProps extends Omit<IressStyledProps<'option'>, 'value'> {
+    /**
+     * Value of selected option.
+     * It will be converted to a string and used to match with the value of IressSelect during the onChange event.
+     */
+    value?: FormControlValue;
+}
 export declare const IressSelectOption: ({ value, ...restProps }: IressSelectOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Select/components/SelectControl.d.ts

@@ -1,2 +1,24 @@
-import { SelectControlProps } from '../Select.types';
-export declare const SelectControl: import('react').ForwardRefExoticComponent<SelectControlProps & import('react').RefAttributes<HTMLSelectElement>>;
+import { ReactElement, Ref } from 'react';
+import { FormControlValue, IressUnstyledProps } from '../../../types';
+import { IressInputProps } from '../../Input';
+export interface SelectControlProps<T = FormControlValue> extends Omit<IressUnstyledProps<'select'>, 'defaultValue' | 'value' | 'width'> {
+    /**
+     * Value of selected option for uncontrolled select.
+     */
+    defaultValue?: T;
+    /**
+     * Adds an `option` as the first element with the placeholder text and no value.
+     */
+    placeholder?: string;
+    /**
+     * Value of the select.
+     */
+    value?: T;
+    /**
+     * The width of the select.
+     */
+    width?: IressInputProps['width'];
+}
+export declare const SelectControl: <T = FormControlValue>(props: SelectControlProps<T> & {
+    ref?: Ref<HTMLSelectElement>;
+}) => ReactElement;

package/dist/src/components/Select/components/SelectReadonly.d.ts

@@ -1,2 +1,16 @@
-import { SelectReadonlyProps } from '../Select.types';
-export declare const SelectReadonly: import('react').ForwardRefExoticComponent<SelectReadonlyProps & import('react').RefAttributes<HTMLInputElement>>;
+import { ReactElement, ReactNode, Ref } from 'react';
+import { FormControlValue } from '../../../types';
+import { IressReadonlyProps } from '../../Readonly';
+export interface SelectReadonlyProps<T extends FormControlValue = FormControlValue> extends Omit<IressReadonlyProps<T>, 'value'> {
+    /**
+     * The options of the select, used to locate the label of the selected value.
+     */
+    children?: ReactNode;
+    /**
+     * The value of the select.
+     */
+    value?: T;
+}
+export declare const SelectReadonly: <T extends FormControlValue = FormControlValue>(props: SelectReadonlyProps<T> & {
+    ref?: Ref<HTMLInputElement>;
+}) => ReactElement;

package/dist/src/components/Select/helpers/nodesToSelectOptions.d.ts

@@ -1,11 +1,16 @@
 import { FormControlValue } from '../../../types';
-import { IressSelectOptionProps, SelectOption } from '../Select.types';
-import { IressSelectOption } from '..';
+import { IressSelectOptionProps, IressSelectOption } from '../SelectOption/SelectOption';
+import { ReactElement } from 'react';
+interface SelectOption<T = FormControlValue> {
+    children?: SelectOption<T>[];
+    label: string;
+    value?: T;
+}
 type NodeProps = IressSelectOptionProps & {
     label: string;
 };
 type NodeType = typeof IressSelectOption | 'optgroup' | 'option';
-type Node = React.ReactElement<NodeProps, NodeType>;
-export declare const mapNodesToSelectOptions: (nodes: Node[] | Node) => SelectOption[];
-export declare const findValueFromStringInSelectOptions: (value: string, options?: SelectOption[]) => FormControlValue | undefined;
+type Node = ReactElement<NodeProps, NodeType>;
+export declare const mapNodesToSelectOptions: <T = FormControlValue>(nodes: Node[] | Node) => SelectOption<T>[];
+export declare const findValueFromStringInSelectOptions: <T = FormControlValue>(value: string, options?: SelectOption<T>[]) => T | undefined;
 export {};

package/dist/src/components/Select/index.d.ts

@@ -1,4 +1,3 @@
-export * from './Select.types';
+export * from './Select.styles';
 export * from './Select';
 export * from './SelectOption/SelectOption';
-export * from './helpers/mapSelectOptions';

package/dist/src/components/Select/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Select/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Skeleton/Skeleton.d.ts

@@ -1,2 +1,25 @@
-import { SkeletonWithEnums } from './Skeleton.types';
-export declare const IressSkeleton: SkeletonWithEnums;
+import { IressStyledProps } from '../../types';
+import { IressCSSProps } from '../../interfaces';
+type SkeletonMode = 'rect' | 'circle' | 'text';
+export interface IressSkeletonProps<TMode extends SkeletonMode = 'text'> extends Omit<IressStyledProps, 'width' | 'height'> {
+    /**
+     * Sets the height of the skeleton bones. If no unit is specified it will default to pixels.
+     * Not allowed when in `text` mode.
+     */
+    height?: TMode extends 'text' ? never : string;
+    /**
+     * Mode of the skeleton. `rect` and `circle` must have `width` and `height` specified. `text` works with `textStyle`.
+     * @default text
+     */
+    mode?: TMode;
+    /**
+     * Use `textStyle` to specify what the Skeleton should emulate. If set to `h1` a non-break space with the same font-size and line-height of a h1 will be rendered.
+     */
+    textStyle?: IressCSSProps['textStyle'];
+    /**
+     * Sets the width of the skeleton bones. If no unit is specified it will default to pixels.
+     */
+    width?: string;
+}
+export declare const IressSkeleton: <TMode extends SkeletonMode = "text">({ className, height, width, mode: modeProp, style, "data-testid": dataTestId, ...restProps }: IressSkeletonProps<TMode>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Skeleton/Skeleton.styles.d.ts

@@ -0,0 +1,17 @@
+export declare const skeleton: import('../../styled-system/types').RecipeRuntimeFn<{
+    mode: {
+        rect: {
+            width: "[100%]";
+            height: "[100px]";
+        };
+        circle: {
+            borderRadius: "[50%]";
+            width: "[100px]";
+            height: "[100px]";
+        };
+        text: {
+            width: "[100%]";
+            height: "[spacing.600]";
+        };
+    };
+}>;

package/dist/src/components/Skeleton/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Skeleton.types';
 export * from './Skeleton';
+export * from './Skeleton.styles';

package/dist/src/components/Skeleton/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Skeleton/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/SkipLink/SkipLink.d.ts

@@ -1,2 +1,17 @@
-import { IressSkipLinkProps } from './SkipLink.types';
-export declare const IressSkipLink: import('react').ForwardRefExoticComponent<IressSkipLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+import { ElementType, ReactElement, ReactNode } from 'react';
+import { ButtonRef, IressButtonProps } from '../Button';
+export type IressSkipLinkProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = IressButtonProps<C, THref> & {
+    /**
+     * Description of where the skip link jumps to.
+     * @default 'Skip to content'
+     */
+    children?: ReactNode;
+    /**
+     * Contains a URL or a URL fragment that the skip link points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href?: THref;
+};
+export declare const IressSkipLink: <C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressSkipLinkProps<C, THref> & {
+    ref?: ButtonRef<C, THref>;
+}) => ReactElement;

package/dist/src/components/SkipLink/SkipLink.styles.d.ts

@@ -0,0 +1 @@
+export declare const skipLink: import('../../styled-system/types').RecipeRuntimeFn<import('../../styled-system/types').RecipeVariantRecord>;

package/dist/src/components/SkipLink/index.d.ts

@@ -1,2 +1,2 @@
-export * from './SkipLink.types';
 export * from './SkipLink';
+export * from './SkipLink.styles';

package/dist/src/components/SkipLink/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/SkipLink/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Slideout/Slideout.d.ts

@@ -1,2 +1,82 @@
-import { SlideoutWithEnums } from './Slideout.types';
-export declare const IressSlideout: SlideoutWithEnums;
+import { ReactElement, ReactNode, MutableRefObject } from 'react';
+import { OpenChangeReason } from '@floating-ui/react';
+import { FloatingUIContainer, IressStyledProps } from '../../types';
+export interface IressSlideoutProps extends IressStyledProps {
+    /**
+     * Content to be displayed within the slideout.
+     */
+    children?: ReactNode;
+    /**
+     * Screenreader text for close button.
+     * @default 'Close'
+     */
+    closeText?: string;
+    /**
+     * The container element to render the slideout into.
+     * By default, the slideout will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * When set to `true` the slideout will be visible.
+     * Use for uncontrolled slideouts.
+     */
+    defaultShow?: boolean;
+    /**
+     * The element that needs to be pushed relative to the slideout. This can be a string selector to match an existing element in the DOM, a html element, or a React reference.
+     * Will be ignored if `mode` is not set to `push` or if element does not exist.
+     */
+    eleToPush?: string | HTMLElement | MutableRefObject<HTMLElement | null>;
+    /**
+     * Panel to place slideout controls.
+     */
+    footer?: ReactNode;
+    /**
+     * Sets the heading for the slideout.
+     * If passed an element, it will render the element with an id, to ensure its connection to the slideout.
+     */
+    heading?: ReactElement | string;
+    /**
+     * Unique ID for the slideout. Use if you would like to open this slideout from anywhere in your app using the `useSlideout` hook.
+     */
+    id?: string;
+    /**
+     * Sets how the Slideout interacts with the content of the page.
+     * `overlay` overlays the page content, obscuring the content below.
+     * `push` will push the element (specified by `eleToPush`) across the page. `push` will revert back to `overlay` if `eleToPush` is not specified or if the screen size < 1200px.
+     * @default 'overlay'
+     */
+    mode?: 'overlay' | 'push';
+    /**
+     * Emitted when the slideout has opened or closed internally.
+     * Use for controlled slideouts.
+     */
+    onShowChange?: (show: boolean, reason?: OpenChangeReason) => void;
+    /**
+     * Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+     */
+    onStatus?: (status: 'unmounted' | 'initial' | 'open' | 'close') => void;
+    /**
+     * Emitted when the slideout has opened.
+     */
+    onEntered?: () => void;
+    /**
+     * Emitted when the slideout has closed.
+     */
+    onExited?: () => void;
+    /**
+     * Position of the slideout relative to the page. `left` or `right`.
+     * @default 'right'
+     */
+    position?: 'right' | 'left';
+    /**
+     * When set to `true` the slideout will be visible.
+     * Use for controlled slideouts.
+     */
+    show?: boolean;
+    /**
+     * Accepts a single `SlideoutSize`. Slideouts will display at 100% for mobile screens (<576px).
+     * @default 'sm'
+     */
+    size?: 'sm' | 'md';
+}
+export declare const IressSlideout: ({ children, className, closeText, container, "data-testid": dataTestid, defaultShow, eleToPush, footer, heading: headingProp, mode, onEntered, onExited, onShowChange, onStatus, onTransitionEnd, position, show, size, style, ...restProps }: IressSlideoutProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/Slideout/Slideout.styles.d.ts

@@ -0,0 +1,66 @@
+export declare const slideout: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "content" | "root" | "closeButton", {
+    position: {
+        right: {
+            root: {
+                insetInlineEnd: "spacing.000";
+                borderStartStartRadius: "radius.050";
+                borderEndStartRadius: "radius.050";
+                borderStartEndRadius: "radius.000";
+                borderEndEndRadius: "radius.000";
+                _motionReduce: {
+                    transition: "[none]";
+                };
+            };
+        };
+        left: {
+            root: {
+                insetInlineStart: "spacing.000";
+                borderStartStartRadius: "radius.000";
+                borderEndStartRadius: "radius.000";
+                borderStartEndRadius: "radius.050";
+                borderEndEndRadius: "radius.050";
+                _motionReduce: {
+                    transition: "[none]";
+                };
+            };
+        };
+    };
+    size: {
+        sm: {
+            root: {
+                width: "overlay.sm";
+            };
+        };
+        md: {
+            root: {
+                width: "overlay.md";
+            };
+        };
+    };
+    status: {
+        initial: {
+            root: {};
+        };
+        open: {
+            root: {};
+        };
+        close: {
+            root: {};
+        };
+        unmounted: {
+            root: {
+                display: "none";
+            };
+        };
+    };
+    mode: {
+        overlay: {};
+        push: {
+            root: {
+                xl: {
+                    borderRadius: "radius.000";
+                };
+            };
+        };
+    };
+}>;

package/dist/src/components/Slideout/SlideoutProvider.d.ts

@@ -1,3 +1,16 @@
-import { IressSlideoutContextValue, IressSlideoutProviderProps } from './Slideout.types';
-export declare const IressSlideoutContext: import('react').Context<IressSlideoutContextValue | undefined>;
-export declare const IressSlideoutProvider: ({ children, container, injectPushStyles, }: IressSlideoutProviderProps) => import("react/jsx-runtime").JSX.Element;
+import { PropsWithChildren } from 'react';
+import { FloatingUIContainer } from '../../types';
+export interface IressSlideoutProviderProps extends PropsWithChildren {
+    /**
+     * The container element to render the slideout into.
+     * By default, the slideout will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+}
+export interface SlideoutContextValue {
+    container?: FloatingUIContainer;
+    opened: string[];
+    showSlideout: (id: string, flag?: boolean) => void;
+}
+export declare const SlideoutContext: import('react').Context<SlideoutContextValue | undefined>;
+export declare const IressSlideoutProvider: ({ children, container, }: IressSlideoutProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Slideout/components/SlideoutInner.d.ts

@@ -1,2 +1,10 @@
-import { SlideoutInnerProps } from '../Slideout.types';
-export declare const SlideoutInner: ({ children, closeText, "data-testid": dataTestid, floatingRef, footer, heading, onOpenChange, padding, ...restProps }: SlideoutInnerProps) => import("react/jsx-runtime").JSX.Element;
+import { IressStyledProps } from '../../../types';
+import { ReactNode } from 'react';
+export interface SlideoutInnerProps extends IressStyledProps {
+    closeText?: string;
+    floatingRef?: (node: HTMLElement | null) => void;
+    footer?: ReactNode;
+    heading?: ReactNode;
+    onOpenChange: (show: boolean) => void;
+}
+export declare const SlideoutInner: ({ children, closeText, "data-testid": dataTestid, floatingRef, footer, heading, onOpenChange, className, ...restProps }: SlideoutInnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Slideout/hooks/useProviderSlideout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This hook is used to control the slideout state through the provider, used for uncontrolled slideouts.
+ * @param id ID of the modal to control.
+ */
+export declare function useProviderSlideout(id?: string): {
+    opened: boolean | "" | undefined;
+    container: import('../../../types').FloatingUIContainer | undefined;
+    show: (open?: boolean) => void | "" | undefined;
+};

package/dist/src/components/Slideout/hooks/usePushElement.d.ts

@@ -0,0 +1,10 @@
+import { IressSlideoutProps } from '../Slideout';
+export declare function usePushElement({ element, isActive, position, size, status, onOpen, onClose, }: {
+    element: HTMLElement | null;
+    isActive: boolean;
+    position: IressSlideoutProps['position'];
+    size: IressSlideoutProps['size'];
+    status: 'initial' | 'open' | 'close' | 'unmounted';
+    onOpen?: () => void;
+    onClose?: () => void;
+}): void;

package/dist/src/components/Slideout/index.d.ts

@@ -1,4 +1,5 @@
-export * from './Slideout.types';
 export * from './Slideout';
-export * from './SlideoutProvider';
+export * from './Slideout.styles';
+export { IressSlideoutProvider } from './SlideoutProvider';
+export type { IressSlideoutProviderProps } from './SlideoutProvider';
 export * from './hooks/useSlideout';

package/dist/src/components/Slideout/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Slideout/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;