@cube-dev/ui-kit 0.9.5 → 0.9.8

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

@@ -1,81 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.5
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.TEXT_PROP_MAP = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
-const styled_1 = require("../../styled");
-const STYLE_LIST = [...list_1.BASE_STYLES, ...list_1.TEXT_STYLES, ...list_1.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%',
-    },
-};
-exports.TEXT_PROP_MAP = {
-    transform: 'textTransform',
-    weight: 'fontWeight',
-    italic: 'fontStyle',
-};
-const RawText = (0, styled_1.styled)({
-    name: 'Text',
-    tag: 'span',
-    styles: DEFAULT_STYLES,
-});
-const _Text = (0, react_1.forwardRef)((allProps, ref) => {
-    let { as, qa, block, styleName, ellipsis, css, nowrap, ...props } = allProps;
-    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST, {}, exports.TEXT_PROP_MAP);
-    return ((0, jsx_runtime_1.jsx)(RawText, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
-            nowrap,
-            ellipsis,
-        }, block: !!(block || ellipsis), css: css, ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-const Text = Object.assign(_Text, {
-    Minor: (0, react_1.forwardRef)(function MinorText(props, ref) {
-        return (0, jsx_runtime_1.jsx)(Text, { ref: ref, color: "#minor", ...props }, void 0);
-    }),
-    Danger: (0, react_1.forwardRef)(function DangerText(props, ref) {
-        return (0, jsx_runtime_1.jsx)(Text, { role: "alert", ref: ref, color: "#danger-text", ...props }, void 0);
-    }),
-    Success: (0, react_1.forwardRef)(function SuccessText(props, ref) {
-        return (0, jsx_runtime_1.jsx)(Text, { ref: ref, color: "#success-text", ...props }, void 0);
-    }),
-    Strong: (0, react_1.forwardRef)(function StrongText(props, ref) {
-        return ((0, jsx_runtime_1.jsx)(Text, { as: "strong", preset: "strong", ref: ref, color: "#dark", ...props }, void 0));
-    }),
-    Emphasis: (0, react_1.forwardRef)(function EmphasisText(props, ref) {
-        return (0, jsx_runtime_1.jsx)(Text, { as: "em", preset: "em", ref: ref, ...props }, void 0);
-    }),
-    Selection: (0, react_1.forwardRef)(function SelectionText(props, ref) {
-        return (0, jsx_runtime_1.jsx)(Text, { ref: ref, color: "#dark", fill: "#note.30", ...props }, void 0);
-    }),
-});
-exports.Text = Text;
-
-        

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

@@ -1,69 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.5
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Title = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Text_1 = require("./Text");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
-const react_2 = require("../../utils/react");
-const styled_1 = require("../../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 = [...list_1.TEXT_STYLES, ...list_1.CONTAINER_STYLES];
-const RawTitle = (0, styled_1.styled)({
-    name: 'Title',
-    tag: 'h1',
-    styles: DEFAULT_STYLES,
-    props: {
-        'data-qa': 'Title',
-    },
-});
-const _Title = (0, react_1.forwardRef)(({ qa, as, styleName, inline, nowrap, ellipsis, level, ...props }, ref) => {
-    props = (0, react_2.useSlotProps)(props, 'heading');
-    const tag = `h${level || 1}`;
-    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST, {}, Text_1.TEXT_PROP_MAP);
-    return ((0, jsx_runtime_1.jsx)(RawTitle, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
-            nowrap,
-            ellipsis,
-        }, inline: inline, ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-const Title = Object.assign(_Title, {
-    Danger: (0, react_1.forwardRef)(function DangerTitle(props, ref) {
-        return (0, jsx_runtime_1.jsx)(Title, { ref: ref, color: "#danger-text", ...props }, void 0);
-    }),
-    Success: (0, react_1.forwardRef)(function SuccessTitle(props, ref) {
-        return (0, jsx_runtime_1.jsx)(Title, { ref: ref, color: "#success-text", ...props }, void 0);
-    }),
-});
-exports.Title = Title;
-
-        

package/dist/cjs/components/forms/Checkbox/Checkbox.js

@@ -1,177 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.5
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("@react-spectrum/utils");
-const react_1 = require("react");
-const checkbox_1 = require("@react-aria/checkbox");
-const interactions_1 = require("@react-aria/interactions");
-const toggle_1 = require("@react-stately/toggle");
-const provider_1 = require("../../../provider");
-const list_1 = require("../../../styles/list");
-const styles_1 = require("../../../utils/styles");
-const Base_1 = require("../../Base");
-const interactions_2 = require("../../../utils/interactions");
-const react_2 = require("../../../utils/react");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-const Label_1 = require("../Label");
-const HiddenInput_1 = require("../../HiddenInput");
-const Form_1 = require("../Form/Form");
-const FieldWrapper_1 = require("../FieldWrapper");
-const CheckboxGroup_1 = require("./CheckboxGroup");
-const context_1 = require("./context");
-const nullableValue_1 = require("../../../utils/react/nullableValue");
-const CheckOutlined = () => ((0, jsx_runtime_1.jsx)("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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 = () => ((0, jsx_runtime_1.jsx)("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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 = (0, nullableValue_1.castNullableIsSelected)(props);
-    let originalProps = props;
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.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 = (0, react_1.useContext)(context_1.CheckboxGroupContext);
-    let wrapperContextStyles = (0, StylesProvider_1.useContextStyles)('Checkbox_Wrapper', props);
-    let inputContextStyles = (0, StylesProvider_1.useContextStyles)('Checkbox', props);
-    let labelContextStyles = (0, StylesProvider_1.useContextStyles)('Checkbox_Label', props);
-    let styles = (0, styles_1.extractStyles)(props, list_1.OUTER_STYLES, {
-        ...(insideForm && !groupState ? {} : DEFAULT_STYLES),
-        ...wrapperContextStyles,
-    });
-    let inputStyles = (0, styles_1.extractStyles)(props, list_1.BLOCK_STYLES, {
-        ...INPUT_STYLES,
-        ...inputContextStyles,
-    });
-    labelStyles = {
-        ...(insideForm && !groupState ? Label_1.LABEL_STYLES : Label_1.INLINE_LABEL_STYLES),
-        ...labelContextStyles,
-        ...labelStyles,
-    };
-    if (!insideForm) {
-        labelStyles.fontWeight = 400;
-    }
-    if (insideForm && labelPosition === 'side') {
-        inputStyles.marginTop = '1x';
-    }
-    let { isFocused, focusProps } = (0, interactions_2.useFocus)({ isDisabled }, true);
-    let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
-    let inputRef = (0, react_1.useRef)(null);
-    let domRef = (0, utils_1.useFocusableRef)(ref, inputRef);
-    let { inputProps } = groupState // eslint-disable-next-line react-hooks/rules-of-hooks
-        ? (0, checkbox_1.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
-        : (0, checkbox_1.useCheckbox)(props, (0, toggle_1.useToggleState)(props), inputRef);
-    let markIcon = isIndeterminate ? (0, jsx_runtime_1.jsx)(IndeterminateOutline, {}, void 0) : (0, jsx_runtime_1.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 = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { qa: "CheckboxContainer", isHidden: isHidden, styles: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Checkbox', ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(Base_1.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 ((0, jsx_runtime_1.jsx)(FieldWrapper_1.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 ((0, jsx_runtime_1.jsxs)(Base_1.Base, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...(0, filterBaseProps_1.filterBaseProps)(otherProps), ref: domRef, children: [checkboxField, label && ((0, jsx_runtime_1.jsx)(Base_1.Base, { styles: labelStyles, mods: {
-                    invalid: validationState === 'invalid',
-                    valid: validationState === 'valid',
-                    disabled: isDisabled,
-                }, ...(0, filterBaseProps_1.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 = (0, react_1.forwardRef)(Checkbox);
-_Checkbox.cubeInputType = 'Checkbox';
-let __Checkbox = Object.assign(_Checkbox, { Group: CheckboxGroup_1.CheckboxGroup });
-exports.Checkbox = __Checkbox;
-
-        

package/dist/cjs/components/forms/Checkbox/CheckboxGroup.js

@@ -1,110 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.5
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxGroup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const utils_1 = require("@react-spectrum/utils");
-const Label_1 = require("../Label");
-const provider_1 = require("../../../provider");
-const checkbox_1 = require("@react-aria/checkbox");
-const checkbox_2 = require("@react-stately/checkbox");
-const Form_1 = require("../Form/Form");
-const context_1 = require("./context");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const Base_1 = require("../../Base");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-const FieldWrapper_1 = require("../FieldWrapper");
-const nullableValue_1 = require("../../../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 = (0, nullableValue_1.castNullableArrayValue)(props);
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
-    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, ...otherProps } = props;
-    let domRef = (0, utils_1.useDOMRef)(ref);
-    let wrapperContextStyles = (0, StylesProvider_1.useContextStyles)('CheckboxGroup_Wrapper', props);
-    let groupContextStyles = (0, StylesProvider_1.useContextStyles)('CheckboxGroup', props);
-    let labelContextStyles = (0, StylesProvider_1.useContextStyles)('CheckboxGroup_Label', props);
-    let styles = (0, styles_1.extractStyles)(otherProps, list_1.OUTER_STYLES, {
-        ...STYLES,
-        ...wrapperContextStyles,
-    });
-    let groupStyles = (0, styles_1.extractStyles)(otherProps, list_1.BLOCK_STYLES, {
-        ...GROUP_STYLES,
-        ...groupContextStyles,
-    });
-    labelStyles = {
-        ...Label_1.LABEL_STYLES,
-        ...labelContextStyles,
-        ...labelStyles,
-    };
-    let state = (0, checkbox_2.useCheckboxGroupState)(props);
-    let { groupProps, labelProps } = (0, checkbox_1.useCheckboxGroup)(props, state);
-    let radioGroup = ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "CheckboxGroup", styles: groupStyles, mods: {
-            horizontal: orientation === 'horizontal',
-        }, children: (0, jsx_runtime_1.jsx)(Form_1.FormContext.Provider, { value: {
-                isDisabled,
-                validationState,
-            }, children: (0, jsx_runtime_1.jsx)(context_1.CheckboxGroupContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
-    return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.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 = (0, react_1.forwardRef)(CheckboxGroup);
-exports.CheckboxGroup = _CheckboxGroup;
-_CheckboxGroup.cubeInputType = 'CheckboxGroup';
-
-        

package/dist/cjs/components/forms/Checkbox/context.js

@@ -1,14 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.5
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxGroupContext = void 0;
-const react_1 = require("react");
-exports.CheckboxGroupContext = (0, react_1.createContext)(null);
-
-        

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

@@ -1,82 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.5
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldWrapper = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Base_1 = require("../Base");
-const Label_1 = require("./Label");
-const Paragraph_1 = require("../content/Paragraph");
-const TooltipProvider_1 = require("../overlays/Tooltip/TooltipProvider");
-const icons_1 = require("@ant-design/icons");
-const react_2 = require("../../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 ? ((0, jsx_runtime_1.jsxs)(Label_1.Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, ...labelProps, children: [label, tooltip ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(TooltipProvider_1.TooltipProvider, { title: tooltip, activeWrap: true, width: "initial max-content 40x", children: (0, jsx_runtime_1.jsx)(icons_1.InfoCircleOutlined, { style: { color: 'var(--primary-color)' } }, void 0) }, void 0)] }, void 0)) : null] }, void 0)) : null;
-    let descriptionComponent = description ? ((0, jsx_runtime_1.jsx)("div", { "data-element": "Description", children: (0, react_2.wrapNodeIfPlain)(description, () => ((0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { children: description }, void 0))) }, void 0)) : null;
-    const mods = {
-        'has-sider': labelPosition === 'side',
-        'has-description': !!description,
-        invalid: validationState === 'invalid',
-        valid: validationState === 'valid',
-    };
-    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { as: as || 'div', qa: "Field", ref: ref, mods: mods, isHidden: isHidden, styles: {
-            ...FIELD_STYLES,
-            ...styles,
-        }, ...fieldProps, children: [labelComponent || descriptionComponent ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && ((0, jsx_runtime_1.jsx)(Base_1.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 = (0, react_1.forwardRef)(FieldWrapper);
-exports.FieldWrapper = _FieldWrapper;
-
-