@cube-dev/ui-kit 0.113.1 → 0.115.0

package/es/components/fields/TextInput/TextInputBase.js

@@ -1,244 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createFocusableRef } from '@react-spectrum/utils';
-import { cloneElement, forwardRef, useImperativeHandle, useMemo, useRef, } from 'react';
-import { useHover } from 'react-aria';
-import { LoadingIcon } from '../../../icons/index.js';
-import { useProviderProps } from '../../../provider.js';
-import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty/index.js';
-import { mergeProps, useCombinedRefs } from '../../../utils/react/index.js';
-import { useFocus } from '../../../utils/react/interactions.js';
-import { useFieldProps, useFormProps, wrapWithField } from '../../form/index.js';
-import { InvalidIcon } from '../../shared/InvalidIcon.js';
-import { ValidIcon } from '../../shared/ValidIcon.js';
-const ADD_STYLES = {
-    $: '>',
-    display: 'grid',
-    placeContent: 'stretch',
-    placeItems: 'center',
-    gridRows: '1sf',
-    flow: 'column',
-    gap: 0,
-    cursor: 'inherit',
-    opacity: {
-        '': 1,
-        disabled: '$disabled-opacity',
-    },
-};
-export const INPUT_WRAPPER_STYLES = {
-    display: 'grid',
-    flow: 'row',
-    position: 'relative',
-    gridColumns: {
-        '': '1sf',
-        prefix: 'max-content 1sf',
-        suffix: '1sf max-content',
-        'prefix & suffix': 'max-content 1sf max-content',
-    },
-    gridRows: '1sf',
-    placeItems: 'stretch',
-    fill: {
-        '': '#white',
-        disabled: '#dark.04',
-    },
-    border: {
-        '': true,
-        valid: '#success-text.50',
-        invalid: '#danger-text.50',
-        focused: '#primary-text',
-        'valid & focused': '#success-text',
-        'invalid & focused': '#danger-text',
-        disabled: true,
-    },
-    preset: 't3',
-    radius: true,
-    cursor: 'text',
-    color: {
-        '': '#dark-02',
-        focused: '#dark-02',
-        invalid: '#danger-text',
-        disabled: '#dark.30',
-    },
-    zIndex: {
-        '': 'initial',
-        focused: 1,
-    },
-    boxSizing: 'border-box',
-    transition: 'theme',
-    backgroundClip: 'content-box',
-    height: {
-        '': '$size $size',
-        multiline: 'min $size',
-    },
-    $size: {
-        '': '$size-md',
-        'size=small': '$size-sm',
-        'size=medium': '$size-md',
-        'size=large': '$size-lg',
-    },
-    Prefix: ADD_STYLES,
-    Suffix: ADD_STYLES,
-    State: {
-        $: '> Suffix >',
-        display: 'flex',
-    },
-    InputIcon: {
-        display: 'grid',
-        placeItems: 'center',
-        width: 'min $size-sm',
-        color: 'inherit',
-        fontSize: '$icon-size',
-    },
-    ValidationIcon: {
-        $: '> Suffix > State >',
-        display: 'grid',
-        placeItems: 'center',
-        width: {
-            '': 'min $size-sm',
-            suffix: 'min $size-xs',
-        },
-        fontSize: '$icon-size',
-    },
-};
-const InputWrapperElement = tasty({
-    qa: 'InputWrapper',
-    styles: INPUT_WRAPPER_STYLES,
-});
-const INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];
-export const DEFAULT_INPUT_STYLES = {
-    placeSelf: 'stretch',
-    width: 'initial 100% 100%',
-    color: 'inherit',
-    fill: '#clear',
-    border: 0,
-    transition: 'theme',
-    radius: true,
-    padding: '$vertical-padding $right-padding $vertical-padding $left-padding',
-    textAlign: 'left',
-    reset: 'input',
-    preset: 't3',
-    flexGrow: 1,
-    margin: {
-        '': 0,
-        multiline: '((($size-md - 1lh) / 2) - 1bw) 0',
-        'multiline & size=small': '((($size-sm - 1lh) / 2) - 1bw) 0',
-        'multiline & size=large': '((($size-lg - 1lh) / 2) - 1bw) 0',
-    },
-    resize: 'none',
-    boxSizing: 'border-box',
-    userSelect: 'auto',
-    outline: 0,
-    '$vertical-padding': 0,
-    '$left-padding': {
-        '': '(1x - 1bw)',
-        'size=small': '(1x - 1bw)',
-        'size=large': '(1.25x - 1bw)',
-        'size=xlarge': '(1.5x - 1bw)',
-        prefix: '0',
-    },
-    '$right-padding': {
-        '': '(1x - 1bw)',
-        'size=small': '(1x - 1bw)',
-        'size=large': '(1.25x - 1bw)',
-        'size=xlarge': '(1.5x - 1bw)',
-        suffix: '0',
-    },
-};
-const InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });
-function _TextInputBase(props, ref) {
-    props = useProviderProps(props);
-    props = useFormProps(props);
-    props = useFieldProps(props, {
-        defaultValidationTrigger: 'onBlur',
-        valuePropsMapper: ({ value, onChange }) => ({
-            value: typeof value === 'string' || typeof value === 'number'
-                ? String(value)
-                : '',
-            onChange,
-        }),
-    });
-    let { qa, mods, validationState, prefix, isDisabled, multiLine, autoFocus, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, suffix, suffixPosition = 'before', wrapperRef, tooltip, rows = 1, size = 'medium', autocomplete, icon, maxLength, minLength, form, ...otherProps } = props;
-    let styles = extractStyles(otherProps, OUTER_STYLES);
-    let type = otherProps.type;
-    inputStyles = extractStyles(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles, undefined, ['styles']);
-    let ElementType = multiLine ? 'textarea' : 'input';
-    let { isFocused, focusProps } = useFocus({ isDisabled });
-    let { hoverProps, isHovered } = useHover({ isDisabled });
-    let domRef = useRef(null);
-    inputRef = useCombinedRefs(inputRef);
-    // Expose imperative interface for ref
-    useImperativeHandle(ref, () => ({
-        ...createFocusableRef(domRef, inputRef),
-        select() {
-            if (inputRef?.current) {
-                inputRef.current.select();
-            }
-        },
-        getInputElement() {
-            return inputRef?.current;
-        },
-    }));
-    let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
-    let validation = cloneElement(validationIcon);
-    // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270
-    if (!inputProps?.placeholder) {
-        if (!inputProps) {
-            inputProps = {};
-        }
-        inputProps.placeholder = ' ';
-    }
-    if (icon) {
-        icon = _jsx("div", { "data-element": "InputIcon", children: icon });
-        if (prefix) {
-            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }));
-        }
-        else {
-            prefix = icon;
-        }
-    }
-    const modifiers = useMemo(() => ({
-        invalid: isInvalid,
-        valid: validationState === 'valid',
-        loadable: !!loadingIndicator,
-        focused: isFocused,
-        hovered: isHovered,
-        disabled: isDisabled,
-        multiline: multiLine,
-        prefix: !!prefix,
-        suffix: (validationState && !isLoading) || isLoading || !!suffix,
-        ...mods,
-    }), [
-        mods,
-        isInvalid,
-        validationState,
-        loadingIndicator,
-        isFocused,
-        isDisabled,
-        isHovered,
-        multiLine,
-        prefix,
-        suffix,
-    ]);
-    const hasTextSecurity = multiLine && type === 'password';
-    const textSecurityStyles = hasTextSecurity && inputProps.value?.length
-        ? {
-            fontFamily: 'text-security-disc',
-        }
-        : {};
-    const textField = (_jsxs(InputWrapperElement, { ref: wrapperRef, mods: modifiers, "data-size": size, styles: styles, ...wrapperProps, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { qa: qa || 'Input', as: ElementType, "data-input-type": "textinput", ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: modifiers, style: textSecurityStyles, "data-autofocus": autoFocus ? '' : undefined, autoFocus: autoFocus, "data-size": size, autoComplete: autocomplete, styles: inputStyles, disabled: !!isDisabled, maxLength: maxLength, minLength: minLength }), (validationState && !isLoading) || isLoading || suffix ? (_jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? (_jsxs("div", { "data-element": "State", children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingIcon, { "data-element": "InputIcon" })] })) : null, suffixPosition === 'after' ? suffix : null] })) : null] }));
-    return wrapWithField(textField, domRef, {
-        ...props,
-        form: undefined,
-    });
-}
-const TextInputBase = forwardRef(_TextInputBase);
-export { TextInputBase };
-
-        

package/es/components/fields/TextInput/index.js

@@ -1,11 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-export * from './TextInput.js';
-export * from './TextInputBase.js';
-
-        

package/es/components/fields/TextInputMapper/TextInputMapper.js

@@ -1,188 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
-import { useEvent } from '../../../_internal/hooks/index.js';
-import { CloseIcon, PlusIcon } from '../../../icons/index.js';
-import { mergeProps, useCombinedRefs } from '../../../utils/react/index.js';
-import { Button } from '../../actions/index.js';
-import { Block } from '../../Block.js';
-import { useFieldProps, useFormProps, wrapWithField } from '../../form/index.js';
-import { Flow } from '../../layout/Flow.js';
-import { Grid } from '../../layout/Grid.js';
-import { Space } from '../../layout/Space.js';
-import { ComboBox } from '../ComboBox/index.js';
-import { PasswordInput } from '../PasswordInput/PasswordInput.js';
-import { TextArea } from '../TextArea/index.js';
-import { TextInput } from '../TextInput/index.js';
-// Rewrites upper level field component styles
-// @TODO: Remove this after the release of new Element API
-const PROPS_GRID_HACK = {
-    styles: {
-        InputArea: {
-            gridColumn: {
-                '': 'auto',
-                'has-sider': 'auto',
-            },
-        },
-    },
-};
-// remove duplicates in mappings
-function removeDuplicates(mappings) {
-    const keys = new Set();
-    return mappings.filter(({ key }) => {
-        if (keys.has(key)) {
-            return false;
-        }
-        keys.add(key);
-        return true;
-    });
-}
-function TextInputMapper(props, ref) {
-    ref = useCombinedRefs(ref);
-    props = useFormProps(props);
-    props = useFieldProps(props, {
-        defaultValidationTrigger: 'onChange',
-        valuePropsMapper: ({ value, onChange }) => ({
-            value: value != null ? value : {},
-            onChange: onChange,
-        }),
-    });
-    const counterRef = useRef(0);
-    let { qa, isDisabled, actionLabel, value, onChange, keyProps, valueProps, KeyComponent, ValueComponent, size = 'medium', form, } = props;
-    function extractLocalValues(value, localValues) {
-        const valueKeys = Object.keys(value);
-        const localKeys = localValues.map(({ key }) => key);
-        localKeys.forEach((key) => {
-            if (!valueKeys.includes(key) && key !== '') {
-                localValues = localValues.filter(({ key: k }) => k !== key);
-            }
-        });
-        Object.entries(value ?? {}).forEach(([key, value]) => {
-            const exist = localValues.find(({ key: k }) => k === key);
-            if (exist) {
-                exist.value = value;
-            }
-            else {
-                localValues.push({ key, value, id: counterRef.current++ });
-            }
-        });
-        return removeDuplicates(localValues);
-    }
-    const [mappings, setMappings] = useState(() => {
-        return extractLocalValues(value ?? {}, []);
-    });
-    useEffect(() => {
-        setMappings(extractLocalValues(value ?? {}, mappings));
-    }, [JSON.stringify(value)]);
-    const onMappingsChange = useEvent((newMappings) => {
-        const newValue = newMappings.reduce((acc, { key, value }) => {
-            acc[key.trim()] = value.trim();
-            return acc;
-        }, {});
-        const keys = Object.keys(newValue);
-        if (!keys.length) {
-            onChange?.(undefined);
-        }
-        else {
-            onChange?.(newValue);
-        }
-        const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);
-        if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {
-            setMappings(updatedMappings);
-        }
-    });
-    // useEffect(() => {
-    //   // focus on the last non-disabled input
-    //   setTimeout(() => {
-    //     (
-    //       ref?.current?.querySelector(
-    //         '[data-qa="Mapping"]:last-child input:not([disabled])',
-    //       ) as HTMLInputElement
-    //     )?.focus();
-    //   }, 100);
-    // }, [mappings.length]);
-    const addNewMapping = useEvent(() => {
-        setMappings((prev) => {
-            return [...prev, { key: '', value: '', id: counterRef.current++ }];
-        });
-    });
-    const showNewButton = useMemo(() => {
-        return (!mappings.length || !mappings.some(({ key, value }) => !key || !value));
-    }, [mappings]);
-    KeyComponent = KeyComponent ?? TextInputMapperInput;
-    ValueComponent = ValueComponent ?? TextInputMapperInput;
-    const onKeyChange = useEvent((id, value) => {
-        mappings.forEach((mapping) => {
-            if (mapping.id === id) {
-                mapping.key = value;
-            }
-        });
-        setMappings([...mappings]);
-    });
-    const onValueChange = useEvent((id, value) => {
-        mappings.forEach((mapping) => {
-            if (mapping.id === id) {
-                mapping.value = value;
-            }
-        });
-        setMappings([...mappings]);
-    });
-    const onSubmit = useEvent(() => {
-        onMappingsChange(mappings);
-    });
-    const onKeyDown = useEvent((e) => {
-        // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled
-        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && showNewButton) {
-            addNewMapping();
-        }
-    });
-    const renderedMappings = useMemo(() => {
-        return mappings.map((mapping, index) => {
-            const { key, value, id } = mapping;
-            return (_jsxs(Grid, { qa: "Mapping", columns: "minmax(0, 1fr) minmax(0, 1fr) min-content", gap: "1x", children: [_jsx(KeyComponent, { autoFocus: index === mappings.length - 1, id: id, isDisabled: isDisabled, fieldType: "key", value: key, placeholder: "Key", size: size, onChange: onKeyChange, onSubmit: onSubmit, ...keyProps }), _jsx(ValueComponent, { id: id, fieldType: "value", isDisabled: !key || isDisabled, value: value, placeholder: "Value", size: size, onChange: onValueChange, onSubmit: onSubmit, ...valueProps }), _jsx(Button, { "aria-label": "Remove mapping", theme: "danger", type: "clear", size: size, icon: _jsx(CloseIcon, {}), onPress: () => {
-                            setMappings(mappings.filter((m) => m.id !== id));
-                            onMappingsChange(mappings.filter((m) => m.id !== id));
-                        } })] }, id));
-        });
-    }, [JSON.stringify(mappings)]);
-    const element = (_jsxs(Flow, { ref: ref, gap: "1x", "data-qa": qa || 'TextInputMapper', "data-input-type": "textinputmapper", onKeyDown: onKeyDown, children: [[...renderedMappings], showNewButton ? (_jsxs(Space, { gap: 0, children: [_jsx(Block, { styles: { overflow: 'clip', width: 'max 0px' }, children: "\u00A0" }), _jsx(Button, { isDisabled: isDisabled, size: size, icon: _jsx(PlusIcon, {}), onPress: addNewMapping, children: actionLabel ? actionLabel : 'Mapping' })] })) : null] }));
-    return wrapWithField(element, ref, props);
-}
-function TextInputMapperInput(props) {
-    const { id, fieldType, inputType = 'input', options, value, size = 'medium', placeholder, allowsCustomValue, ...rest } = props;
-    const onChange = useEvent((newValue) => {
-        props.onChange?.(id, newValue);
-    });
-    const onBlur = useEvent(() => {
-        props.onSubmit?.(id);
-    });
-    const onSelectionChange = useEvent((newValue) => {
-        if (!allowsCustomValue && !options?.includes(newValue)) {
-            props.onChange?.(id, '');
-        }
-        else {
-            props.onChange?.(id, newValue);
-        }
-        props.onSubmit?.(id);
-    });
-    const Component = {
-        input: TextInput,
-        textarea: TextArea,
-        password: PasswordInput,
-    }[inputType];
-    if (inputType === 'combobox') {
-        return (_jsx(ComboBox, { qa: "AddMapping", "data-type": fieldType, width: "auto", size: size, ...mergeProps(rest, PROPS_GRID_HACK), id: undefined, inputValue: value, selectedKey: value, labelPosition: "top", "aria-label": placeholder, placeholder: placeholder, allowsCustomValue: allowsCustomValue, onInputChange: onChange, onSelectionChange: (val) => onSelectionChange(val ?? ''), children: (options ?? []).map((option) => (_jsx(ComboBox.Item, { children: option }, option))) }));
-    }
-    return (_jsx(Component, { qa: "AddMapping", "data-type": fieldType, width: "auto", rows: 1, size: size, ...mergeProps(rest, PROPS_GRID_HACK), id: undefined, value: value, labelPosition: "top", "aria-label": placeholder, placeholder: placeholder, onChange: onChange, onBlur: onBlur }));
-}
-const _TextInputMapper = forwardRef(TextInputMapper);
-_TextInputMapper.displayName = 'TextInputMapper';
-export { _TextInputMapper as TextInputMapper };
-
-        

package/es/components/fields/TextInputMapper/index.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-export * from './TextInputMapper.js';
-
-        

package/es/components/fields/index.js

@@ -1,28 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-export * from './Input/index.js';
-export * from './TextInput/index.js';
-export * from './PasswordInput/PasswordInput.js';
-export * from './NumberInput/NumberInput.js';
-export * from './FileInput/FileInput.js';
-export * from './TextArea/index.js';
-export * from './Checkbox/index.js';
-export * from './DatePicker/index.js';
-export * from './RadioGroup/index.js';
-export * from './SearchInput/index.js';
-export * from './Slider/index.js';
-export * from './Switch/Switch.js';
-export * from './Select/index.js';
-export * from './ComboBox/index.js';
-export * from './ListBox/index.js';
-export * from './FilterListBox/index.js';
-export * from './FilterPicker/index.js';
-export * from './Picker/index.js';
-export * from './TextInputMapper/index.js';
-
-        

package/es/components/form/FieldWrapper/FieldWrapper.js

@@ -1,130 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { InfoCircleIcon } from '../../../icons/index.js';
-import { tasty } from '../../../tasty/index.js';
-import { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index.js';
-import { Item } from '../../content/Item/index.js';
-import { Text } from '../../content/Text.js';
-import { Flex } from '../../layout/Flex.js';
-import { Space } from '../../layout/Space.js';
-import { Label } from '../Label.js';
-const FieldElement = tasty({
-    qa: 'Field',
-    styles: {
-        display: 'grid',
-        width: 'auto',
-        gridColumns: {
-            '': 'minmax(0, 1fr)',
-            'has-sider': '($full-label-width, auto) minmax(0, 1fr)',
-            'has-split': 'auto auto',
-        },
-        gap: 0,
-        placeItems: {
-            '': 'baseline stretch',
-            'has-split': 'center',
-        },
-        placeContent: {
-            '': 'initial',
-            'has-split': 'space-between',
-        },
-        '$full-label-width': '($label-width + 1x)',
-        LabelArea: {
-            display: 'block',
-            width: {
-                '': 'initial',
-                'has-sider': '$label-width',
-            },
-            margin: {
-                '': '1x bottom',
-                'has-sider': '1x right',
-                'has-split': '1x right',
-                ':empty': '0',
-            },
-        },
-        InputArea: {
-            display: 'block',
-            flow: 'column',
-            gap: '.5x',
-            gridColumn: {
-                '': 'initial',
-                'has-sider': 2,
-                'has-split': 2,
-            },
-        },
-    },
-});
-if (process.env.NODE_ENV === 'development') {
-    FieldElement.displayName = 'FieldWrapperElement';
-}
-const MessageElement = tasty({
-    qa: 'Field_Message',
-    styles: {
-        preset: 't4',
-        color: {
-            '': '#dark-02',
-            invalid: '#danger-text',
-            valid: '#success-text',
-            disabled: '#dark.40',
-        },
-        textAlign: 'left',
-        userSelect: 'none',
-    },
-});
-const DescriptionElement = tasty({
-    qa: 'Field_Description',
-    styles: {
-        preset: 't4',
-        color: '#dark-03',
-        textAlign: 'left',
-        userSelect: 'none',
-    },
-});
-/**
- * A wrapper for form fields to provide additional decoration for inputs.
- * @internal Do not use this component directly.
- */
-export const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
-    const { as, labelPosition = 'top', label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, children, } = props;
-    const labelComponent = label ? (_jsx(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": typeof label === 'string' ? label : undefined, ...labelProps, children: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "0.75x", children: [_jsx("div", { children: label }), tooltip ? (_jsx(Item, { icon: _jsx(InfoCircleIcon, { color: "#primary-text" }), size: "inline", tooltip: typeof tooltip === 'string' ? tooltip : { title: tooltip } })) : null, labelSuffix ? _jsx("div", { children: labelSuffix }) : null] }), extra && _jsx(Text, { preset: "t3", children: extra })] }) })) : null;
-    // Create description component with proper styling
-    const createDescriptionComponent = () => {
-        if (!description)
-            return null;
-        return (_jsx(DescriptionElement, { "data-element": "Description", children: wrapNodeIfPlain(description, () => (_jsx("span", { children: description }))) }));
-    };
-    // Description positioning based on label position
-    const descriptionForLabel = labelPosition === 'side' || labelPosition === 'split'
-        ? createDescriptionComponent()
-        : null;
-    const descriptionForInput = labelPosition === 'top' ? createDescriptionComponent() : null;
-    const mods = {
-        'has-sider': labelPosition === 'side',
-        'has-split': labelPosition === 'split',
-        'has-description': !!description,
-        invalid: validationState === 'invalid',
-        valid: validationState === 'valid',
-    };
-    // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)
-    const displayMessage = errorMessage || message;
-    const isErrorMessage = !!errorMessage;
-    // Merge fieldProps with styles to ensure both are applied
-    const mergedFieldProps = styles
-        ? mergeProps(fieldProps, { styles })
-        : fieldProps;
-    return (_jsxs(_Fragment, { children: [_jsxs(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, ...mergedFieldProps, children: [labelComponent || descriptionForLabel ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionForLabel] })) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, descriptionForInput, displayMessage && !isDisabled && (_jsx(MessageElement, { mods: {
-                                    ...mods,
-                                    // Force invalid state for errorMessage regardless of validationState
-                                    invalid: isErrorMessage || validationState === 'invalid',
-                                }, styles: messageStyles, role: isErrorMessage || validationState === 'invalid'
-                                    ? 'alert'
-                                    : undefined, children: displayMessage }))] })] }), children] }));
-});
-
-        

package/es/components/form/FieldWrapper/extract-field-wrapper-props.js

@@ -1,47 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-const createFieldWrapperPropsKeys = (arr) => new Set(arr);
-const fieldWrapperPropsKeys = createFieldWrapperPropsKeys([
-    'as',
-    'validationState',
-    'styles',
-    'isRequired',
-    'isDisabled',
-    'fieldProps',
-    'isHidden',
-    'label',
-    'labelPosition',
-    'labelSuffix',
-    'labelStyles',
-    'labelProps',
-    'description',
-    'requiredMark',
-    'tooltip',
-    'extra',
-    'necessityLabel',
-    'necessityIndicator',
-    'message',
-    'messageStyles',
-    'errorMessage',
-    'Component',
-]);
-export function extractFieldWrapperProps(props) {
-    const fieldWrapperProps = {};
-    const rest = {};
-    for (const [key, prop] of Object.entries(props)) {
-        if (fieldWrapperPropsKeys.has(key)) {
-            fieldWrapperProps[key] = prop;
-        }
-        else {
-            rest[key] = prop;
-        }
-    }
-    return { fieldWrapperProps, rest };
-}
-
-        

package/es/components/form/FieldWrapper/index.js

@@ -1,12 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-export * from './FieldWrapper.js';
-export * from './extract-field-wrapper-props.js';
-export * from './types.js';
-
-