nurseitaly-components 0.0.1

package/dist/basic/SelectField/SelectFieldTheme.js

@@ -0,0 +1,57 @@
+import { createTheme } from '@mui/material/styles';
+export const selectFieldTheme = (outerTheme, { hasLabel = true, hasAddornments: hasAddorments = false, } = {}) => createTheme({
+    ...outerTheme,
+    components: {
+        MuiFilledInput: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'white',
+                    border: '1px solid #EAEAEB',
+                    borderRadius: '4px',
+                    paddingLeft: '16px',
+                    paddingRight: '30px',
+                    borderBottomLeftRadius: '4px',
+                    borderBottomRightRadius: '4px',
+                    height: '100%',
+                    '&:before': {
+                        display: 'none',
+                    },
+                    '&:after': {
+                        display: 'none',
+                    },
+                },
+            },
+        },
+        MuiNativeSelect: {
+            styleOverrides: {
+                select: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: hasLabel ? '21px 0px 4px!important' : '8px 16px!important',
+                    fontSize: '16px',
+                    fontWeight: '400',
+                    lineHeight: '120%',
+                    letterSpacing: '0px',
+                    fontFamily: 'Work Sans, sans-serif',
+                },
+                icon: {
+                    marginRight: hasAddorments ? '24px' : '0px',
+                },
+            },
+        },
+        MuiInputLabel: {
+            styleOverrides: {
+                root: {
+                    paddingLeft: '4px',
+                    color: '#000000',
+                    textTransform: 'uppercase',
+                    fontSize: '12px',
+                    fontWeight: '400',
+                    lineHeight: '100%',
+                    letterSpacing: '0.16px',
+                    fontFamily: 'Work Sans, sans-serif',
+                },
+            },
+        },
+    },
+});

package/dist/basic/SelectField/SelectMultipleField.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import './styles.scss';
+export type SelectItem = {
+    label: string;
+    value: string | number;
+};
+type DefaultEndAdornmentType = 'close' | 'info';
+type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
+    attr: string;
+    label: string;
+    createdForm: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+    className?: string;
+    disabled?: boolean;
+    title?: string;
+    placeholder?: string;
+    options: SelectItem[];
+    required?: boolean;
+    showEndAdornment?: boolean;
+    endAdornment?: ReactNode[];
+    defaultEndAdornments?: DefaultEndAdornmentType[];
+    onRemove?: () => void;
+    onChange?: (attr: string, value: any) => void;
+    maxHeight?: number;
+    infoText?: string;
+};
+export default function SelectMultipleField<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ className, attr, label, createdForm, disabled, title, placeholder, options, required, endAdornment, defaultEndAdornments, showEndAdornment, onRemove, onChange, maxHeight, infoText, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+export {};

package/dist/basic/SelectField/SelectMultipleField.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
+import { FormControl, InputAdornment, InputLabel, MenuItem, Select, } from '@mui/material';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
+import cx from 'classnames';
+import { useEffect, useState } from 'react';
+import { Controller } from 'react-hook-form';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import { selectFieldTheme } from './SelectFieldTheme';
+import './styles.scss';
+export default function SelectMultipleField({ className, attr, label, createdForm, disabled, title, placeholder, options = [], required, endAdornment, defaultEndAdornments = ['close'], showEndAdornment = true, onRemove, onChange, maxHeight = 300, infoText, }) {
+    const fieldName = attr;
+    const outerTheme = useTheme();
+    const [active, setActive] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const [mouseOver, setMouseOver] = useState(false);
+    const hasError = () => !!createdForm.formState.errors[attr];
+    const getClassNames = cx('ds-select-text', className, {
+        disabled: disabled,
+    });
+    useEffect(() => {
+        if (focus || mouseOver) {
+            setActive(true);
+        }
+        else {
+            setActive(false);
+        }
+    }, [focus, mouseOver]);
+    const getEndAdornmentIcon = (value) => {
+        const adornments = [];
+        if (defaultEndAdornments.length > 0) {
+            if (defaultEndAdornments.includes('info') && infoText) {
+                const infoTextElement = (_jsx(Icon, { name: "info", size: "small", className: `icon-info pointer ${disabled ? 'd-none' : ''}` }));
+                adornments.push(_jsx(Tooltip, { title: infoText, mode: "simple", children: _jsx("span", { children: infoTextElement }) }, "info"));
+            }
+            if (defaultEndAdornments.includes('close') &&
+                Array.isArray(value) &&
+                value.length > 0 &&
+                onRemove) {
+                adornments.push(_jsx(Icon, { name: "close", size: "small", className: `${disabled ? 'd-none' : ''} pointer`, onClick: () => onRemove && onRemove() }, "close"));
+            }
+        }
+        if (endAdornment && endAdornment.length > 0) {
+            adornments.push(...endAdornment);
+        }
+        if (adornments.length === 0) {
+            return null;
+        }
+        if (adornments.length === 1) {
+            return adornments[0];
+        }
+        return _jsx("div", { className: "ds-end-adornments", children: adornments });
+    };
+    return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: selectFieldTheme(outerTheme), children: [_jsxs(FormControl, { fullWidth: true, variant: "filled", disabled: disabled, children: [_jsx(InputLabel, { shrink: true, sx: {
+                                    color: disabled
+                                        ? '#BEBFC1'
+                                        : hasError()
+                                            ? '#C6080A'
+                                            : active
+                                                ? '#1C83F4'
+                                                : '#000000',
+                                }, children: `${label}${required ? ' *' : ''}` }), _jsxs(Select, { ...field, value: Array.isArray(field.value) ? field.value : [], multiple: true, fullWidth: true, displayEmpty: true, required: required, disabled: disabled, variant: "filled", color: "primary", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
+                                    let value = event.target.value;
+                                    if (Array.isArray(value) && value.includes('')) {
+                                        value = [];
+                                    }
+                                    field.onChange(value);
+                                    onChange && onChange(attr, value);
+                                }, MenuProps: {
+                                    disableScrollLock: true,
+                                    disableRestoreFocus: true,
+                                    slotProps: {
+                                        paper: {
+                                            style: {
+                                                maxHeight: maxHeight,
+                                            },
+                                        },
+                                    },
+                                    // This is the specific property that stops the "auto-select/jump"
+                                    // while keeping the smart "flipping" logic active
+                                    variant: 'menu',
+                                    anchorReference: 'anchorEl',
+                                }, sx: {
+                                    borderColor: disabled
+                                        ? '#BEBFC1'
+                                        : hasError()
+                                            ? '#C6080A!important'
+                                            : active
+                                                ? '#1C83F4!important'
+                                                : '#BEBFC1!important',
+                                    backgroundColor: disabled
+                                        ? '#BEBFC1!important'
+                                        : '#FFFFFF!important',
+                                }, endAdornment: showEndAdornment && (_jsx(InputAdornment, { position: "end", children: getEndAdornmentIcon(field.value) })), children: [_jsx(MenuItem, { value: "", sx: (theme) => ({
+                                            minHeight: theme.spacing(6),
+                                        }), children: placeholder || '\u00a0' }), options.map((option, idx) => (_jsx(MenuItem, { value: option.value, children: option.label }, idx.valueOf())))] })] }), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] })) }) }));
+}

package/dist/basic/SelectField/index.d.ts

@@ -0,0 +1,2 @@
+import SelectField from './SelectField';
+export default SelectField;

package/dist/basic/SelectField/index.js

@@ -0,0 +1,2 @@
+import SelectField from './SelectField';
+export default SelectField;

package/dist/basic/SelectField/styles.scss

@@ -0,0 +1,38 @@
+.ds-select-text {
+  width: 100%;
+  position: relative;
+
+  .ds-icon {
+    cursor: pointer;
+  }
+
+  .icon-info {
+    color: var(--icon-tertiary);
+  }
+
+  &.disabled {
+    color: var(--text-on-disabled);
+    cursor: not-allowed;
+
+    input {
+      cursor: not-allowed;
+    }
+  }
+
+  .character-counter {
+    @include helper-small-1;
+    color: var(--text-placeholder);
+    position: absolute;
+    bottom: 12px;
+    left: 16px;
+  }
+}
+
+.validation-message {
+  @include helper-small-1;
+  margin-top: 4px;
+
+  &.error {
+    color: var(--text-error);
+  }
+}

package/dist/basic/Spinner/Spinner.d.ts

@@ -0,0 +1,14 @@
+import './styles.scss';
+export declare const SpinnerSizes: readonly ["large", "medium", "small", "x-small"];
+type SpinnerSizes = (typeof SpinnerSizes)[number];
+export declare const TitlePlacements: readonly ["right", "bottom"];
+type TitlePlacements = (typeof TitlePlacements)[number];
+export type Props = {
+    className?: string;
+    size?: SpinnerSizes;
+    title?: string;
+    description?: string;
+    titlePlacement?: TitlePlacements;
+};
+export default function Spinner({ className, size, title, description, titlePlacement }: Props): import("react").JSX.Element;
+export {};

package/dist/basic/Spinner/Spinner.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import './styles.scss';
+import { Box, CircularProgress } from '@mui/material';
+import { useEffect, useState } from 'react';
+export const SpinnerSizes = ['large', 'medium', 'small', 'x-small'];
+export const TitlePlacements = ['right', 'bottom'];
+export default function Spinner({ className, size = 'medium', title, description, titlePlacement = 'right' }) {
+    const getClassNames = cx('ds-spinner', className, size, {
+        'title-bottom': titlePlacement === 'bottom',
+        'title-right': titlePlacement === 'right',
+    });
+    const [circleSize, setCircleSize] = useState(40);
+    useEffect(() => {
+        switch (size) {
+            case 'large':
+                setCircleSize(56);
+                break;
+            case 'small':
+                setCircleSize(32);
+                break;
+            case 'x-small':
+                setCircleSize(24);
+                break;
+            default:
+                setCircleSize(40);
+        }
+    }, [size]);
+    return (_jsxs("div", { className: getClassNames, children: [_jsxs(Box, { position: "relative", display: "inline-flex", children: [_jsx(CircularProgress, { variant: "determinate", value: 100, size: circleSize, thickness: 4, sx: {
+                            color: '#EDF3FF',
+                            position: 'absolute',
+                            left: 0,
+                        } }), _jsx(CircularProgress, { variant: "indeterminate", disableShrink: true, size: circleSize, thickness: 4, sx: {
+                            color: '#B720E9',
+                            animationDuration: '1.5s',
+                        } })] }), title && (_jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "desc", children: description })] }))] }));
+}

package/dist/basic/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+import Spinner from './Spinner';
+export default Spinner;

package/dist/basic/Spinner/index.js

@@ -0,0 +1,2 @@
+import Spinner from './Spinner';
+export default Spinner;

package/dist/basic/Spinner/styles.scss

@@ -0,0 +1,37 @@
+.ds-spinner {
+  display: flex;
+  align-items: center;
+
+  > .texts {
+    display: flex;
+    flex-direction: column;
+
+    > .title {
+      @include label-small-1;
+      color: var(--text-primary);
+    }
+
+    > .desc {
+      @include helper-small-1;
+      color: var(--text-tertiary);
+      margin-top: 4px;
+    }
+  }
+
+  &.title-bottom {
+    flex-direction: column;
+    text-align: center;
+
+    > .texts {
+      margin-top: 8px;
+    }
+  }
+
+  &.title-right {
+    flex-direction: row;
+
+    > .texts {
+      margin-left: 8px;
+    }
+  }
+}

package/dist/basic/SwitchField/SwitchField.d.ts

@@ -0,0 +1,11 @@
+import { FieldValues, UseFormReturn } from "react-hook-form";
+import "./style.scss";
+type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
+    attr: string;
+    label: string;
+    createdForm: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+    disabled?: boolean;
+    onChange?: (value: boolean) => void;
+};
+export default function SwitchField<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ attr, label, createdForm, disabled, onChange, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+export {};

package/dist/basic/SwitchField/SwitchField.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormControlLabel, Switch } from "@mui/material";
+import { Controller } from "react-hook-form";
+import "./style.scss";
+export default function SwitchField({ attr, label, createdForm, disabled = false, onChange, }) {
+    const fieldName = attr;
+    const { control } = createdForm;
+    return (_jsx(Controller, { name: fieldName, control: control, render: ({ field }) => (_jsx(FormControlLabel, { className: "ds-switch", disabled: disabled, control: _jsx(Switch, { ...field, checked: !!field.value, onChange: (e) => {
+                    const checked = e.target.checked;
+                    field.onChange(checked);
+                    onChange?.(checked);
+                } }), label: label })) }));
+}

package/dist/basic/SwitchField/index.d.ts

@@ -0,0 +1,2 @@
+import SwitchField from './SwitchField';
+export default SwitchField;

package/dist/basic/SwitchField/index.js

@@ -0,0 +1,2 @@
+import SwitchField from './SwitchField';
+export default SwitchField;

package/dist/basic/SwitchField/style.scss

@@ -0,0 +1,4 @@
+.ds-switch {
+  display: flex;
+  align-items: center;
+}

package/dist/basic/Tabs/Tabs.d.ts

@@ -0,0 +1,17 @@
+import './styles.scss';
+export type TabItem = {
+    label: string | React.ReactElement;
+    value: string;
+    active?: boolean;
+    disabled?: boolean;
+};
+export declare const TabsColors: readonly ["white", "blue"];
+type TabsColors = (typeof TabsColors)[number];
+export type Props = {
+    items: TabItem[];
+    onSelect: (value: TabItem) => void;
+    className?: string;
+    color?: TabsColors;
+};
+export default function Tabs({ className, items, onSelect, color, }: Props): import("react").JSX.Element;
+export {};

package/dist/basic/Tabs/Tabs.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import './styles.scss';
+export const TabsColors = ['white', 'blue'];
+export default function Tabs({ className, items, onSelect, color = 'white', }) {
+    const getClassNames = cx('ds-tabs', className, color);
+    const getClassNamesTab = (item) => cx('ds-tab', { disabled: item.disabled, active: item.active });
+    return (_jsx("div", { className: getClassNames, children: items.map((item, idx) => (_jsx("div", { className: getClassNamesTab(item), onClick: () => onSelect(item), children: item.label }, idx.valueOf()))) }));
+}

package/dist/basic/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+import Tabs from './Tabs';
+export default Tabs;

package/dist/basic/Tabs/index.js

@@ -0,0 +1,2 @@
+import Tabs from './Tabs';
+export default Tabs;

package/dist/basic/Tabs/styles.scss

@@ -0,0 +1,51 @@
+.ds-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-200);
+
+  .ds-tab {
+    @include label-large-1;
+    display: flex;
+    align-items: center;
+    height: 48px;
+    cursor: pointer;
+
+    &.disabled {
+      font-weight: 400 !important;
+      color: var(--text-disabled) !important;
+    }
+
+    &.active {
+      @include label-large-2;
+      border-bottom: 2.5px solid var(--border-hover);
+    }
+
+    &:hover {
+      @include label-large-2;
+      color: var(--text-accent-hover);
+    }
+  }
+
+  &.white {
+    .ds-tab {
+      color: var(--icon-light-fixed);
+      &.active {
+        border-bottom: 2.5px solid var(--border-subtle-4);
+      }
+    }
+  }
+
+  &.blue {
+    .ds-tab {
+      color: var(--text-primary);
+      &.active {
+        border-bottom: 2.5px solid var(--border-hover);
+      }
+
+      &:hover,
+      &.active {
+        color: var(--icon-accent-hover);
+      }
+    }
+  }
+}

package/dist/basic/Tag/Tag.d.ts

@@ -0,0 +1,18 @@
+import './styles.scss';
+export declare const TagTypesValues: readonly ["low", "accent"];
+export type TagTypes = (typeof TagTypesValues)[number];
+export declare const TagSizesValues: readonly ["large", "medium", "small"];
+export type TagSizes = (typeof TagSizesValues)[number];
+export declare const TagColorsValues: readonly ["gray", "blue", "green", "red", "yellow", "violet"];
+export type TagColors = (typeof TagColorsValues)[number];
+export type Props = {
+    text: string | JSX.Element;
+    className?: string;
+    color?: TagColors;
+    size?: TagSizes;
+    type?: TagTypes;
+    disabled?: boolean;
+    title?: string | React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+};
+export default function Tag({ text, title, className, disabled, color, size, type, onClick, }: Props): import("react").JSX.Element;

package/dist/basic/Tag/Tag.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+import cx from 'classnames';
+import { createElement } from 'react';
+import './styles.scss';
+export const TagTypesValues = ['low', 'accent'];
+export const TagSizesValues = ['large', 'medium', 'small'];
+export const TagColorsValues = [
+    'gray',
+    'blue',
+    'green',
+    'red',
+    'yellow',
+    'violet',
+];
+export default function Tag({ text = '', title = '', className = '', disabled = false, color = 'gray', size = 'large', type = 'low', onClick, }) {
+    const getClassNames = cx('ds-tag', className, type, size, color, {
+        disabled: disabled,
+    });
+    if (title) {
+        return (_jsx(Tooltip, { title: createElement('div', {
+                dangerouslySetInnerHTML: { __html: title },
+            }), placement: "top", arrow: true, children: (_jsx("div", { className: getClassNames, style: {
+                    cursor: title ? 'pointer' : '',
+                }, onClick: (e) => onClick && onClick(e), children: text })) }));
+    }
+    return (_jsx("div", { className: getClassNames, style: {
+            cursor: title ? 'pointer' : '',
+        }, onClick: (e) => onClick && onClick(e), children: text }));
+}

package/dist/basic/Tag/index.d.ts

@@ -0,0 +1,2 @@
+import Tag from './Tag';
+export default Tag;

package/dist/basic/Tag/index.js

@@ -0,0 +1,2 @@
+import Tag from './Tag';
+export default Tag;

package/dist/basic/Tag/styles.scss

@@ -0,0 +1,101 @@
+.ds-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-050);
+  padding: var(--spacing-150);
+  width: fit-content;
+
+  > img {
+    width: 24px;
+    height: 24px;
+  }
+
+  > sup {
+    font-size: 8px;
+  }
+
+  &:hover {
+    background-color: var(--layer-hover-1);
+  }
+
+  &.disabled {
+    background-color: var(--layer-disabled) !important;
+    color: var(--text-on-disabled) !important;
+  }
+
+  &.large {
+    @include tag-large-1;
+    line-height: 20px;
+    padding: var(--spacing-050) var(--spacing-100);
+  }
+
+  &.medium {
+    @include tag-medium-1;
+    line-height: 16px;
+    padding: var(--spacing-050) var(--spacing-100);
+  }
+
+  &.small {
+    @include tag-small-1;
+    line-height: 14px;
+    padding: var(--spacing-050);
+  }
+
+  &.low {
+    color: var(--text-on-color-dark);
+  }
+
+  &.accent {
+    color: var(--text-on-color-light);
+  }
+
+  &.gray.low {
+    background-color: var(--tag-gray-low);
+  }
+
+  &.gray.accent {
+    background-color: var(--tag-gray-accent);
+  }
+
+  &.blue.low {
+    background-color: var(--tag-blue-low);
+    color: var(--text-on-color-accent);
+  }
+
+  &.blue.accent {
+    background-color: var(--tag-blue-accent);
+  }
+
+  &.green.low {
+    background-color: var(--tag-green-low);
+  }
+
+  &.green.accent {
+    background-color: var(--tag-green-accent);
+  }
+
+  &.red.low {
+    background-color: var(--tag-red-low);
+  }
+
+  &.red.accent {
+    background-color: var(--tag-red-accent);
+  }
+
+  &.yellow.low {
+    background-color: var(--tag-yellow-low);
+  }
+
+  &.yellow.accent {
+    background-color: var(--tag-yellow-accent);
+  }
+
+  &.violet.low {
+    background-color: var(--tag-violet-low);
+  }
+
+  &.violet.accent {
+    background-color: var(--tag-violet-accent);
+  }
+}

package/dist/basic/TextField/TextField.d.ts

@@ -0,0 +1,34 @@
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import './styles.scss';
+export type MaskFunction = (value: string, isBlur?: boolean) => string;
+type DefaultEndAdornmentType = 'password' | 'close' | 'info';
+type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
+    attr: string;
+    label?: string;
+    createdForm: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+    className?: string;
+    disabled?: boolean;
+    multiline?: boolean;
+    title?: string;
+    placeholder?: string;
+    maxChars?: number;
+    required?: boolean;
+    showEndAdornment?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode[];
+    defaultEndAdornments?: DefaultEndAdornmentType[];
+    onChange?: (attr: string, value: any) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    onRemove?: () => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void;
+    rows?: number;
+    infoText?: string;
+    inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
+    width?: string | number;
+    height?: string | number;
+    mask?: MaskFunction;
+    blurMask?: MaskFunction;
+};
+export default function TextField<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, endAdornment, defaultEndAdornments, showEndAdornment, onChange, onFocus, onKeyDown, onRemove, onBlur, rows, infoText, inputRef, width, height, mask, blurMask, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+export {};