@cube-dev/ui-kit 0.9.4 → 0.9.7

package/dist/es/components/content/Text.js

@@ -1,78 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
-import { styled } from '../../styled';
-const STYLE_LIST = [...BASE_STYLES, ...TEXT_STYLES, ...COLOR_STYLES];
-const DEFAULT_STYLES = {
-    display: {
-        '': 'inline',
-        ellipsis: 'block',
-    },
-    margin: '0',
-    whiteSpace: {
-        '': 'inherit',
-        'nowrap | ellipsis': 'nowrap',
-    },
-    textOverflow: {
-        '': false,
-        ellipsis: 'ellipsis',
-    },
-    overflow: {
-        '': false,
-        ellipsis: 'hidden',
-    },
-    width: {
-        '': false,
-        ellipsis: 'max 100%',
-    },
-};
-export const TEXT_PROP_MAP = {
-    transform: 'textTransform',
-    weight: 'fontWeight',
-    italic: 'fontStyle',
-};
-const RawText = styled({
-    name: 'Text',
-    tag: 'span',
-    styles: DEFAULT_STYLES,
-});
-const _Text = forwardRef((allProps, ref) => {
-    let { as, qa, block, styleName, ellipsis, css, nowrap, ...props } = allProps;
-    const styles = extractStyles(props, STYLE_LIST, {}, TEXT_PROP_MAP);
-    return (_jsx(RawText, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
-            nowrap,
-            ellipsis,
-        }, block: !!(block || ellipsis), css: css, ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-const Text = Object.assign(_Text, {
-    Minor: forwardRef(function MinorText(props, ref) {
-        return _jsx(Text, { ref: ref, color: "#minor", ...props }, void 0);
-    }),
-    Danger: forwardRef(function DangerText(props, ref) {
-        return _jsx(Text, { role: "alert", ref: ref, color: "#danger-text", ...props }, void 0);
-    }),
-    Success: forwardRef(function SuccessText(props, ref) {
-        return _jsx(Text, { ref: ref, color: "#success-text", ...props }, void 0);
-    }),
-    Strong: forwardRef(function StrongText(props, ref) {
-        return (_jsx(Text, { as: "strong", preset: "strong", ref: ref, color: "#dark", ...props }, void 0));
-    }),
-    Emphasis: forwardRef(function EmphasisText(props, ref) {
-        return _jsx(Text, { as: "em", preset: "em", ref: ref, ...props }, void 0);
-    }),
-    Selection: forwardRef(function SelectionText(props, ref) {
-        return _jsx(Text, { ref: ref, color: "#dark", fill: "#note.30", ...props }, void 0);
-    }),
-});
-export { Text };
-
-        

package/dist/es/components/content/Title.js

@@ -1,66 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * 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/dist/es/components/forms/Checkbox/Checkbox.js

@@ -1,174 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * 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/dist/es/components/forms/Checkbox/CheckboxGroup.js

@@ -1,107 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * 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/dist/es/components/forms/Checkbox/context.js

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

package/dist/es/components/forms/FieldWrapper.js

@@ -1,79 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * 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, { 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/dist/es/components/forms/FileInput/FileInput.js

@@ -1,149 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * 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 };
-
-