@cube-dev/ui-kit 0.9.5 → 0.9.8

package/cjs/components/content/Text.js

@@ -0,0 +1,81 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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/cjs/components/content/Title.js

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

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

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

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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/cjs/components/forms/FieldWrapper.js

@@ -0,0 +1,82 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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, { 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 = (0, react_1.forwardRef)(FieldWrapper);
+exports.FieldWrapper = _FieldWrapper;
+
+