@reapit/elements 4.0.4 → 4.1.0

package/dist/cjs/storybook/render-html-markup.d.ts

@@ -1,8 +1,5 @@
-import React from 'react';
-type RenderHtmlMarkupProps = {
-    component: string;
-    story: string | string[];
-    label?: string;
-};
-export declare const RenderHtmlMarkup: ({ component, story, label }: RenderHtmlMarkupProps) => React.JSX.Element;
-export {};
+import { Dispatch, FC, SetStateAction } from 'react';
+import { SourceProps } from '@storybook/blocks';
+import { Args, Renderer, StoryContextForLoaders } from '@storybook/types';
+export declare const handleTransform: (setStoryContext: Dispatch<SetStateAction<StoryContextForLoaders<Renderer, Args> | null>>, storyContext: StoryContextForLoaders<Renderer, Args> | null, html: string) => (code: string, context: StoryContextForLoaders<Renderer, Args>) => string;
+export declare const RenderHtmlMarkup: FC<SourceProps>;

package/dist/cjs/styles/flexbox.stories.d.ts

@@ -0,0 +1,116 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Flex: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const IsFlexColumn: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexRow: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexRowReverse: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexColumn: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexColumnReverse: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexWrap: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexNoWrap: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexWrapReverse: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const Flex1: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAuto: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexInitial: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexGrow: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexGrow0: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexShrink: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexShrink0: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyCenter: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyStart: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyEnd: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyBetween: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyAround: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexJustifyEvenly: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignCenter: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignStart: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignEnd: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignSelfCenter: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignSelfStart: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FlexAlignSelfEnd: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};

package/dist/cjs/styles/theming.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const BasicExample: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/styles/utilities.stories.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Margin: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Padding: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const HeightAndWidth: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const BorderRadiusAndBoxShadow: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/accordion/accordion.d.ts

@@ -7,6 +7,7 @@ export interface AccordionItemProps {
     title: string;
     titleItems?: ReactNode[];
     content: ReactNode;
+    onClick?: () => void;
 }
 export interface AccordionProps extends AccordionBaseProps {
     items: AccordionItemProps[];
@@ -17,5 +18,5 @@ export declare const AccordionTitle: FC<AccordionBaseProps>;
 export declare const AccordionTitleContentWrapper: FC<AccordionBaseProps>;
 export declare const AccordionTitleContent: FC<AccordionBaseProps>;
 export declare const AccordionContent: FC<AccordionBaseProps>;
-export declare const handleSetOpenItem: (openItem: number, setOpenItem: Dispatch<SetStateAction<number | null>>) => () => void;
+export declare const handleSetOpenItem: (openItem: number, setOpenItem: Dispatch<SetStateAction<number | null>>, onClick?: () => void) => () => void;
 export declare const Accordion: FC<AccordionProps>;

package/dist/esm/components/accordion/accordion.stories.d.ts

@@ -0,0 +1,8 @@
+import { Accordion } from './index';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+export declare const BasicUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ReactUsage: StoryObj<typeof Accordion>;

package/dist/esm/components/avatar/avatar.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./avatar").AvatarProps>;
+};
+export default _default;
+export declare const BasicUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithSrc: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithImage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/badge/badge.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./badge").BadgeProps>;
+};
+export default _default;
+export declare const BasicUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithIntent: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/breadcrumb/breadcrumb.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./breadcrumb").BreadCrumbProps>;
+};
+export default _default;
+export declare const BasicUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const DefaultIndex: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/button/button.stories.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./button").ButtonProps>;
+};
+export default _default;
+export declare const DefaultUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Intent: {
+    args: {
+        intent: string;
+        children: string;
+    };
+};
+export declare const Loading: {
+    args: {
+        loading: boolean;
+        children: string;
+    };
+};
+export declare const Disabled: {
+    args: {
+        disabled: boolean;
+        children: string;
+    };
+};
+export declare const StandardAttributes: {
+    name: string;
+    args: {
+        onClick: import("@storybook/addon-actions").HandlerFunction;
+        type: string;
+        children: string;
+    };
+};
+export declare const Group: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const ButtonSize: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ButtonIcons: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Floating: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    component: import("react").FC<import("./button").FloatingButtonProps>;
+};

package/dist/esm/components/card/card.stories.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./card-components").CardProps>;
+};
+export default _default;
+export declare const CardWithAvatar: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CardWithImage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CardWithBody: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CardFocussed: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CardWithList: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CardCompleteExample: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ReactShorthandAvatarBody: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const ReactShorthandList: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ReactShorthandComplete: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/chip/chip.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./chip").ChipProps>;
+};
+export default _default;
+export declare const BasicUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ChipGroupUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/drawer/drawer.stories.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./drawer").DrawerProps>;
+};
+export default _default;
+export declare const BasicUsageClosed: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const ReactUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ReactUsageCanDismiss: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};

package/dist/esm/components/file-input/file-input.stories.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    title: string;
+    component: import("./file-input").FileInputWrapped;
+};
+export default _default;
+export declare const DefaultUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const AdvancedUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/form-layout/form-layout.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./form-layout").FormLayoutProps>;
+};
+export default _default;
+export declare const BasicForm: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ComplexForm: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/grid/grid.stories.d.ts

@@ -0,0 +1,26 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const BasicUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const BasicUsageQuarterAndHalves: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const BasicUsageSplitScreenGrid: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const BasicUsageSplitScreenGridThirds: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const CustomUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ReactExampleResponsiveCustomisation: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};

package/dist/esm/components/icon/icon.stories.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./icon-component").IconProps>;
+};
+export default _default;
+export declare const BasicUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const IconFontSize: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const IconCustomSizes: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const IconIntent: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const OtherIcons: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const LegacyIcons: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/input/input.stories.d.ts

@@ -0,0 +1,67 @@
+import { StoryObj } from '@storybook/react';
+import { Input } from './index';
+declare const _default: {
+    title: string;
+    component: import("./input").InputWrapped;
+};
+export default _default;
+export declare const InputText: StoryObj<typeof Input>;
+export declare const InputWithError: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const InputEmail: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputPassword: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputNumber: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputTel: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputUrl: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputSearch: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputDate: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputTime: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputDatetimeLocal: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputWeek: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputMonth: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputFile: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputCheckbox: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputRadio: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};

package/dist/esm/components/input-add-on/input-add-on.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./input-add-on").InputAddOnProps>;
+};
+export default _default;
+export declare const BasicUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithIcon: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithIntent: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/input-error/input-error.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 export interface InputErrorInterface {
     message: string;
 }
-export declare const InputError: ({ message }: InputErrorInterface) => React.JSX.Element;
+export declare const InputError: ({ message }: InputErrorInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/input-error/input-error.stories.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    title: string;
+    component: ({ message }: import("./input-error").InputErrorInterface) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export declare const ErrorMessage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/input-group/input-group.stories.d.ts

@@ -0,0 +1,58 @@
+declare const _default: {
+    title: string;
+    component: import("./input-group").InputGroupWrapped;
+};
+export default _default;
+export declare const CompleteExample: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const WithIconOnly: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const WithLabelOnly: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const WithInputAddOnOnly: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const ReactShorthand: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const ReactShorthandCustomId: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const ReactShorthandAllProps: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const InputCheckbox: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const InputCheckboxWithIntent: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const InputCheckboxNoIcon: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const InputCheckboxNoLabel: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const InputRadio: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const InputRadioWithIntent: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const InputRadioWithInputAddOn: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ErrorMessage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};

package/dist/esm/components/key-value-list/key-value-list.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./key-value-list").KeyValueListProps>;
+};
+export default _default;
+export declare const BasicUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const UsageLargeGrid: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/label/label.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./label").LabelProps>;
+};
+export default _default;
+export declare const BasicUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/layout/layout.stories.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./layout").ContainerProps>;
+};
+export default _default;
+export declare const MainContainerUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const SecondaryNavContainerUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const PageContainerUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const PageContainerMaxWidth: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const HasGreyBackground: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const FlexContainerUsage: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CombinedContainerComponents: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CompleteCombinedExample: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CompleteCombinedExampleMaxWidth: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/components/loader/loader.stories.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./loader").LoaderProps>;
+};
+export default _default;
+export declare const Inline: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithALabel: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const FullPageLoader: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};