@cube-dev/ui-kit 0.9.4 → 0.9.7

package/es/components/content/Title.js

@@ -0,0 +1,66 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TEXT_PROP_MAP } from './Text';
+import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
+import { extractStyles } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+import { useSlotProps } from '../../utils/react';
+import { styled } from '../../styled';
+const DEFAULT_STYLES = {
+    gridArea: 'heading',
+    display: 'block',
+    color: '#dark',
+    preset: {
+        '': 'h6m',
+        '[data-level="1"]': 'h1',
+        '[data-level="2"]': 'h2',
+        '[data-level="3"]': 'h3',
+        '[data-level="4"]': 'h4',
+        '[data-level="5"]': 'h5',
+        '[data-level="6"]': 'h6',
+    },
+    margin: '0',
+    whiteSpace: {
+        '': 'initial',
+        'nowrap | ellipsis': 'nowrap',
+    },
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    width: 'max 100%',
+};
+const STYLE_LIST = [...TEXT_STYLES, ...CONTAINER_STYLES];
+const RawTitle = styled({
+    name: 'Title',
+    tag: 'h1',
+    styles: DEFAULT_STYLES,
+    props: {
+        'data-qa': 'Title',
+    },
+});
+const _Title = forwardRef(({ qa, as, styleName, inline, nowrap, ellipsis, level, ...props }, ref) => {
+    props = useSlotProps(props, 'heading');
+    const tag = `h${level || 1}`;
+    const styles = extractStyles(props, STYLE_LIST, {}, TEXT_PROP_MAP);
+    return (_jsx(RawTitle, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
+            nowrap,
+            ellipsis,
+        }, inline: inline, ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+const Title = Object.assign(_Title, {
+    Danger: forwardRef(function DangerTitle(props, ref) {
+        return _jsx(Title, { ref: ref, color: "#danger-text", ...props }, void 0);
+    }),
+    Success: forwardRef(function SuccessTitle(props, ref) {
+        return _jsx(Title, { ref: ref, color: "#success-text", ...props }, void 0);
+    }),
+});
+export { Title };
+
+        

package/es/components/forms/Checkbox/Checkbox.js

@@ -0,0 +1,174 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFocusableRef } from '@react-spectrum/utils';
+import { forwardRef, useContext, useRef } from 'react';
+import { useCheckbox, useCheckboxGroupItem } from '@react-aria/checkbox';
+import { useHover } from '@react-aria/interactions';
+import { useToggleState } from '@react-stately/toggle';
+import { useProviderProps } from '../../../provider';
+import { BLOCK_STYLES, OUTER_STYLES } from '../../../styles/list';
+import { extractStyles } from '../../../utils/styles';
+import { Base } from '../../Base';
+import { useFocus } from '../../../utils/interactions';
+import { mergeProps } from '../../../utils/react';
+import { filterBaseProps } from '../../../utils/filterBaseProps';
+import { useContextStyles } from '../../../providers/StylesProvider';
+import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
+import { HiddenInput } from '../../HiddenInput';
+import { useFormProps } from '../Form/Form';
+import { FieldWrapper } from '../FieldWrapper';
+import { CheckboxGroup } from './CheckboxGroup';
+import { CheckboxGroupContext } from './context';
+import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
+const CheckOutlined = () => (_jsx("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }, void 0) }, void 0));
+const IndeterminateOutline = () => (_jsx("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }, void 0) }, void 0));
+const DEFAULT_STYLES = {
+    position: 'relative',
+    display: 'flex',
+    placeItems: 'center start',
+    gap: '1x',
+    flow: 'row',
+    preset: 'default',
+    cursor: 'pointer',
+};
+const INPUT_STYLES = {
+    display: 'grid',
+    placeItems: 'center',
+    radius: '.5r',
+    fill: {
+        '': '#white',
+        'checked | indeterminate': '#purple-text',
+        'invalid & !checked': '#white',
+        'invalid & checked': '#danger-text',
+        disabled: '#dark.12',
+    },
+    color: {
+        '': '#white',
+        'disabled & !checked & !indeterminate': '#clear',
+    },
+    border: {
+        '': '#dark.30',
+        invalid: '#danger-text.50',
+        'disabled | ((indeterminate | checked) & !invalid)': '#clear',
+    },
+    width: '(2x - 2bw)',
+    height: '(2x - 2bw)',
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
+    },
+    transition: 'theme',
+};
+function Checkbox(props, ref) {
+    props = castNullableIsSelected(props);
+    let originalProps = props;
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, autoFocus, children, label, validationState, labelProps, labelStyles, labelPosition, necessityLabel, necessityIndicator, message, description, requiredMark = true, tooltip, isHidden, ...otherProps } = props;
+    label = label || children;
+    // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
+    // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
+    // but since the checkbox won't move in and out of a group, it should be safe.
+    let groupState = useContext(CheckboxGroupContext);
+    let wrapperContextStyles = useContextStyles('Checkbox_Wrapper', props);
+    let inputContextStyles = useContextStyles('Checkbox', props);
+    let labelContextStyles = useContextStyles('Checkbox_Label', props);
+    let styles = extractStyles(props, OUTER_STYLES, {
+        ...(insideForm && !groupState ? {} : DEFAULT_STYLES),
+        ...wrapperContextStyles,
+    });
+    let inputStyles = extractStyles(props, BLOCK_STYLES, {
+        ...INPUT_STYLES,
+        ...inputContextStyles,
+    });
+    labelStyles = {
+        ...(insideForm && !groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),
+        ...labelContextStyles,
+        ...labelStyles,
+    };
+    if (!insideForm) {
+        labelStyles.fontWeight = 400;
+    }
+    if (insideForm && labelPosition === 'side') {
+        inputStyles.marginTop = '1x';
+    }
+    let { isFocused, focusProps } = useFocus({ isDisabled }, true);
+    let { hoverProps, isHovered } = useHover({ isDisabled });
+    let inputRef = useRef(null);
+    let domRef = useFocusableRef(ref, inputRef);
+    let { inputProps } = groupState // eslint-disable-next-line react-hooks/rules-of-hooks
+        ? useCheckboxGroupItem({
+            ...props,
+            // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
+            // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).
+            value: props.value || '',
+            // Only pass isRequired and validationState to react-aria if they came from
+            // the props for this individual checkbox, and not from the group via context.
+            isRequired: originalProps.isRequired,
+            validationState: originalProps.validationState,
+        }, groupState, inputRef) // eslint-disable-next-line react-hooks/rules-of-hooks
+        : useCheckbox(props, useToggleState(props), inputRef);
+    let markIcon = isIndeterminate ? _jsx(IndeterminateOutline, {}, void 0) : _jsx(CheckOutlined, {}, void 0);
+    if (groupState) {
+        for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {
+            if (originalProps[key] != null) {
+                console.warn(`CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`);
+            }
+        }
+        if (props.value == null) {
+            console.warn('CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.');
+        }
+    }
+    let checkboxField = (_jsxs(Base, { qa: "CheckboxContainer", isHidden: isHidden, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Checkbox', ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(Base, { qa: "CheckboxIcon", mods: {
+                    checked: inputProps.checked,
+                    indeterminate: isIndeterminate,
+                    invalid: validationState === 'invalid',
+                    valid: validationState === 'valid',
+                    disabled: isDisabled,
+                    hovered: isHovered,
+                    focused: isFocused,
+                }, styles: inputStyles, children: markIcon }, void 0)] }, void 0));
+    if (insideForm && !groupState) {
+        return (_jsx(FieldWrapper, { ...{
+                as: 'label',
+                labelPosition,
+                label,
+                styles,
+                isRequired,
+                labelStyles,
+                isHidden,
+                labelProps,
+                isDisabled,
+                validationState,
+                necessityLabel,
+                necessityIndicator,
+                message,
+                description,
+                requiredMark,
+                tooltip,
+                Component: checkboxField,
+                ref: domRef,
+            } }, void 0));
+    }
+    return (_jsxs(Base, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [checkboxField, label && (_jsx(Base, { styles: labelStyles, mods: {
+                    invalid: validationState === 'invalid',
+                    valid: validationState === 'valid',
+                    disabled: isDisabled,
+                }, ...filterBaseProps(labelProps), children: label }, void 0))] }, void 0));
+}
+/**
+ * Checkboxes allow users to select multiple items from a list of individual items,
+ * or to mark one individual item as selected.
+ */
+let _Checkbox = forwardRef(Checkbox);
+_Checkbox.cubeInputType = 'Checkbox';
+let __Checkbox = Object.assign(_Checkbox, { Group: CheckboxGroup });
+export { __Checkbox as Checkbox };
+
+        

package/es/components/forms/Checkbox/CheckboxGroup.js

@@ -0,0 +1,107 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useDOMRef } from '@react-spectrum/utils';
+import { LABEL_STYLES } from '../Label';
+import { useProviderProps } from '../../../provider';
+import { useCheckboxGroup } from '@react-aria/checkbox';
+import { useCheckboxGroupState } from '@react-stately/checkbox';
+import { FormContext, useFormProps } from '../Form/Form';
+import { CheckboxGroupContext } from './context';
+import { extractStyles } from '../../../utils/styles';
+import { BLOCK_STYLES, OUTER_STYLES } from '../../../styles/list';
+import { Base } from '../../Base';
+import { useContextStyles } from '../../../providers/StylesProvider';
+import { FieldWrapper } from '../FieldWrapper';
+import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
+const STYLES = {
+    display: 'grid',
+    gridColumns: {
+        '': '1fr',
+        'has-sider': 'max-content 1fr',
+    },
+    gap: {
+        '': '0',
+        'has-sider': '1x',
+    },
+    placeItems: 'baseline start',
+};
+const GROUP_STYLES = {
+    display: 'flex',
+    placeItems: 'start',
+    placeContent: 'start',
+    flow: {
+        '': 'column',
+        horizontal: 'row wrap',
+    },
+    gap: {
+        '': '1x',
+        horizontal: '1x 2x',
+    },
+    padding: '(1x - 1bw) 0',
+};
+function CheckboxGroup(props, ref) {
+    props = castNullableArrayValue(props);
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, ...otherProps } = props;
+    let domRef = useDOMRef(ref);
+    let wrapperContextStyles = useContextStyles('CheckboxGroup_Wrapper', props);
+    let groupContextStyles = useContextStyles('CheckboxGroup', props);
+    let labelContextStyles = useContextStyles('CheckboxGroup_Label', props);
+    let styles = extractStyles(otherProps, OUTER_STYLES, {
+        ...STYLES,
+        ...wrapperContextStyles,
+    });
+    let groupStyles = extractStyles(otherProps, BLOCK_STYLES, {
+        ...GROUP_STYLES,
+        ...groupContextStyles,
+    });
+    labelStyles = {
+        ...LABEL_STYLES,
+        ...labelContextStyles,
+        ...labelStyles,
+    };
+    let state = useCheckboxGroupState(props);
+    let { groupProps, labelProps } = useCheckboxGroup(props, state);
+    let radioGroup = (_jsx(Base, { qa: "CheckboxGroup", styles: groupStyles, mods: {
+            horizontal: orientation === 'horizontal',
+        }, children: _jsx(FormContext.Provider, { value: {
+                isDisabled,
+                validationState,
+            }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
+    return (_jsx(FieldWrapper, { ...{
+            labelPosition,
+            label,
+            styles,
+            isRequired,
+            labelStyles,
+            necessityIndicator,
+            necessityLabel,
+            labelProps,
+            fieldProps: groupProps,
+            isDisabled,
+            validationState,
+            message,
+            description,
+            requiredMark,
+            tooltip,
+            Component: radioGroup,
+            ref: domRef,
+        } }, void 0));
+}
+/**
+ * Checkbox groups allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
+ */
+const _CheckboxGroup = forwardRef(CheckboxGroup);
+_CheckboxGroup.cubeInputType = 'CheckboxGroup';
+export { _CheckboxGroup as CheckboxGroup };
+
+        

package/es/components/forms/Checkbox/context.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { createContext } from 'react';
+export const CheckboxGroupContext = createContext(null);
+
+        

package/es/components/forms/FieldWrapper.js

@@ -0,0 +1,79 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Base } from '../Base';
+import { Label } from './Label';
+import { Paragraph } from '../content/Paragraph';
+import { TooltipProvider } from '../overlays/Tooltip/TooltipProvider';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { wrapNodeIfPlain } from '../../utils/react';
+const FIELD_STYLES = {
+    display: 'grid',
+    gridColumns: {
+        '': '1fr',
+        'has-sider': '@(label-width, auto) 1fr',
+    },
+    gap: {
+        '': '1x',
+        'has-sider': '@(column-gap, 1x)',
+    },
+    placeItems: 'baseline stretch',
+    LabelArea: {
+        display: 'block',
+        width: {
+            '': 'initial',
+            'has-sider': '@label-width',
+        },
+    },
+    InputArea: {
+        display: 'block',
+        flow: 'column',
+        gridColumn: {
+            '': 'initial',
+            'has-sider': 2,
+        },
+    },
+};
+const MESSAGE_STYLES = {
+    preset: 'default',
+    color: {
+        '': '#dark.75',
+        invalid: '#danger-text',
+        valid: '#success-text',
+        disabled: '#dark.40',
+    },
+    fontWeight: 400,
+    textAlign: 'left',
+    userSelect: 'none',
+};
+function FieldWrapper(props, ref) {
+    const { as, labelPosition, label, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, Component, validationState, requiredMark = true, tooltip, isHidden, } = props;
+    const labelComponent = label ? (_jsxs(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, ...labelProps, children: [label, tooltip ? (_jsxs(_Fragment, { children: ["\u00A0", _jsx(TooltipProvider, { title: tooltip, activeWrap: true, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: { color: 'var(--primary-color)' } }, void 0) }, void 0)] }, void 0)) : null] }, void 0)) : null;
+    let descriptionComponent = description ? (_jsx("div", { "data-element": "Description", children: wrapNodeIfPlain(description, () => (_jsx(Paragraph, { children: description }, void 0))) }, void 0)) : null;
+    const mods = {
+        'has-sider': labelPosition === 'side',
+        'has-description': !!description,
+        invalid: validationState === 'invalid',
+        valid: validationState === 'valid',
+    };
+    return (_jsxs(Base, { as: as || 'div', qa: "Field", ref: ref, mods: mods, isHidden: isHidden, styles: {
+            ...FIELD_STYLES,
+            ...styles,
+        }, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(Base, { qa: "Field_Message", mods: mods, styles: {
+                            ...MESSAGE_STYLES,
+                            ...messageStyles,
+                        }, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
+}
+/**
+ * A wrapper for form fields to provide additional decoration for inputs.
+ */
+const _FieldWrapper = forwardRef(FieldWrapper);
+export { _FieldWrapper as FieldWrapper };
+
+        

package/es/components/forms/FileInput/FileInput.js

@@ -0,0 +1,149 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
+import { useProviderProps } from '../../../provider';
+import { Action } from '../../actions/Action';
+import { createFocusableRef } from '@react-spectrum/utils';
+import { FieldWrapper } from '../FieldWrapper';
+import { extractStyles } from '../../../utils/styles';
+import { CONTAINER_STYLES } from '../../../styles/list';
+import { useContextStyles } from '../../../providers/StylesProvider';
+const DEFAULT_WRAPPER_STYLES = {
+    display: 'inline-flex',
+    position: 'relative',
+    preset: 't3',
+    padding: '.75x 1x',
+    gap: '1x',
+    flow: 'row',
+    placeItems: 'center start',
+    fill: {
+        '': '#white',
+        'drag-hover': '#purple.16',
+    },
+    border: true,
+    radius: true,
+    cursor: 'pointer',
+    overflow: 'hidden',
+    Button: {
+        radius: 'round',
+        fill: {
+            '': '#light',
+            'hovered | focused | pressed': '#purple-04',
+            disabled: '#light',
+        },
+        color: '#dark',
+        padding: '.5x 1x',
+        transition: 'fill',
+    },
+    Placeholder: {
+        color: '#dark-02',
+    },
+    Value: {
+        color: '#dark-02',
+    },
+    Input: {
+        position: 'absolute',
+        top: '-50px',
+        right: 0,
+        bottom: 0,
+        left: 0,
+        radius: '@content-radius',
+        // opacity: 0,
+        cursor: 'pointer',
+        zIndex: 10,
+    },
+};
+function extractContents(element, callback) {
+    const files = element === null || element === void 0 ? void 0 : element.files;
+    if (files && files.length > 0) {
+        const fileReader = new FileReader();
+        fileReader.onload = function () {
+            callback(fileReader.result);
+        };
+        fileReader.readAsText(files[0]);
+    }
+}
+function FileInput(props, ref) {
+    let { id, name, qa, qaVal, onChange, placeholder, inputRef, label, labelPosition, isRequired, necessityIndicator, necessityLabel, labelStyles, labelProps, isDisabled, validationState, message, description, requiredMark, tooltip, isHidden, inputStyles, type = 'file', ...otherProps } = useProviderProps(props);
+    const [value, setValue] = useState();
+    const [dragHover, setDragHover] = useState(false);
+    let domRef = useRef(null);
+    let defaultInputRef = useRef(null);
+    inputRef = inputRef || defaultInputRef;
+    let styles = extractStyles(otherProps, CONTAINER_STYLES);
+    inputStyles = {
+        ...DEFAULT_WRAPPER_STYLES,
+        ...useContextStyles('FileInput', otherProps),
+        ...inputStyles,
+    };
+    const onLocalChange = useCallback((event) => {
+        const value = event.target.value;
+        if (type === 'file') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        }
+        else if (onChange) {
+            extractContents(event.target, onChange);
+        }
+        setValue(value);
+    }, [onChange]);
+    // Expose imperative interface for ref
+    useImperativeHandle(ref, () => ({
+        ...createFocusableRef(domRef, inputRef),
+        select() {
+            if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+                inputRef.current.select();
+            }
+        },
+        getInputElement() {
+            return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+        },
+    }));
+    const fileInput = (_jsxs(Action, { qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, ref: domRef, mods: {
+            selected: !!value,
+            'drag-hover': dragHover,
+        }, onKeyDown: (e) => {
+            var _a;
+            if (e.key === 'Enter' || e.key === 'Space') {
+                (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+            }
+        }, children: [_jsx("input", { id: id, name: name, ref: inputRef, onChange: onLocalChange, "data-element": "Input", type: "file", tabIndex: -1, onDragEnter: () => {
+                    setDragHover(true);
+                }, onDragLeave: () => {
+                    setDragHover(false);
+                }, onDrop: () => {
+                    setDragHover(false);
+                } }, void 0), _jsx("div", { "data-element": "Button", children: "Choose file" }, void 0), _jsx("div", { "data-element": !!value ? 'Value' : 'Placeholder', children: value || placeholder || 'No file selected' }, void 0)] }, void 0));
+    return (_jsx(FieldWrapper, { ...{
+            labelPosition,
+            label,
+            styles,
+            isRequired,
+            labelStyles,
+            necessityIndicator,
+            necessityLabel,
+            labelProps,
+            isDisabled,
+            validationState,
+            message,
+            description,
+            requiredMark,
+            tooltip,
+            isHidden,
+            Component: fileInput,
+            ref: domRef,
+        } }, void 0));
+}
+/**
+ * FileInputs are file inputs that allow users to select local files to
+ * upload them to the server.
+ */
+const _FileInput = forwardRef(FileInput);
+export { _FileInput as FileInput };
+
+