@ballistix.digital/react-components 8.3.2 → 8.4.0

package/dist/index.js

@@ -25,6 +25,10 @@ var $iA2ta$lodashset = require("lodash/set");
 var $iA2ta$luxon = require("luxon");
 var $iA2ta$ballistixdigitalreacttailwindcssdatepicker = require("@ballistix.digital/react-tailwindcss-datepicker");
 var $iA2ta$formik = require("formik");
+var $iA2ta$ishotkey = require("is-hotkey");
+var $iA2ta$slate = require("slate");
+var $iA2ta$slatehistory = require("slate-history");
+var $iA2ta$slatereact = require("slate-react");
 var $iA2ta$reactdropzone = require("react-dropzone");
 var $iA2ta$ubilabsreactgeosuggest = require("@ubilabs/react-geosuggest");
 
@@ -90,6 +94,7 @@ $parcel$export(module.exports, "DateRangeMenuForm", () => $7d3977a96c400c32$expo
 $parcel$export(module.exports, "__DEPRECATED__CheckboxInputGroupForm", () => $03635ab4c6dbf412$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "CheckboxInput", () => $831573d0f77f2d6b$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "SwitchForm", () => $341e1fbf5ffaef7b$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "RichTextArea", () => $784e2eeeb6b1d65b$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "FileInputGroupForm", () => $079d45c48b1515dd$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "OpeningsHourInputGroupForm", () => $9f6cfd21b337aca9$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "AddressInputGroupForm", () => $7fcfa1d90c4a7e45$export$2e2bcd8739ae039);
@@ -6202,11 +6207,431 @@ var $341e1fbf5ffaef7b$export$2e2bcd8739ae039 = $341e1fbf5ffaef7b$var$Switch;
 
 
 
+
+
+
+var $b964d0845ae86974$var$base = {
+    container: 'border border-input rounded-lg overflow-hidden border-palette-lightGray',
+    editor: {
+        toolbar: {
+            container: 'flex items-center gap-1 p-2 border-b border-border',
+            button: 'h-6 w-6 text-[18px] hover:bg-gray-50 active:bg-gray-100 cursor-pointer rounded-sm',
+            buttonActive: 'ring-2 ring-gray-900/10 bg-gray-100',
+            icon: 'h-4! w-4!',
+            divider: 'w-px h-6 bg-gray-200 mx-1'
+        },
+        area: {
+            container: 'overflow-hidden p-4',
+            editable: 'leading-7 focus:outline-none prose prose-sm max-w-none prose-headings:font-semibold prose-h1:text-2xl prose-h2:text-xl prose-p:my-3 prose-blockquote:my-3'
+        }
+    },
+    elements: {
+        blockquote: 'border-l-4 border-gray-300 pl-4 italic text-gray-600 bg-gray-50 rounded-r-md py-2 my-2',
+        list: {
+            bulleted: 'list-disc ml-6 space-y-1',
+            numbered: 'list-decimal ml-6 space-y-1',
+            item: ''
+        },
+        heading: {
+            h1: 'text-2xl font-semibold tracking-tight',
+            h2: 'text-xl font-semibold tracking-tight'
+        },
+        paragraph: '',
+        code: 'px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-800 font-mono text-[0.85em]'
+    },
+    align: {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+        justify: 'text-justify'
+    },
+    readOnly: {
+        container: ''
+    }
+};
+var $b964d0845ae86974$var$styles = $b964d0845ae86974$var$base;
+var $b964d0845ae86974$export$2e2bcd8739ae039 = $b964d0845ae86974$var$styles;
+
+
+var $784e2eeeb6b1d65b$var$__assign = undefined && undefined.__assign || function() {
+    $784e2eeeb6b1d65b$var$__assign = Object.assign || function(t) {
+        for(var s, i = 1, n = arguments.length; i < n; i++){
+            s = arguments[i];
+            for(var p in s)if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return $784e2eeeb6b1d65b$var$__assign.apply(this, arguments);
+};
+var $784e2eeeb6b1d65b$var$HOTKEYS = {
+    'mod+b': 'bold',
+    'mod+i': 'italic',
+    'mod+u': 'underline',
+    'mod+`': 'code'
+};
+var $784e2eeeb6b1d65b$var$LIST_TYPES = [
+    'numbered-list',
+    'bulleted-list'
+];
+var $784e2eeeb6b1d65b$var$TEXT_ALIGN_TYPES = [
+    'left',
+    'center',
+    'right',
+    'justify'
+];
+var $784e2eeeb6b1d65b$var$TAG_BY_TYPE = {
+    'block-quote': 'blockquote',
+    'bulleted-list': 'ul',
+    'numbered-list': 'ol',
+    'heading-one': 'h1',
+    'heading-two': 'h2',
+    'list-item': 'li',
+    paragraph: 'p'
+};
+var $784e2eeeb6b1d65b$var$CLASS_BY_TYPE = {
+    'block-quote': (0, $b964d0845ae86974$export$2e2bcd8739ae039).elements.blockquote,
+    'bulleted-list': (0, $b964d0845ae86974$export$2e2bcd8739ae039).elements.list.bulleted,
+    'numbered-list': (0, $b964d0845ae86974$export$2e2bcd8739ae039).elements.list.numbered,
+    'heading-one': (0, $b964d0845ae86974$export$2e2bcd8739ae039).elements.heading.h1,
+    'heading-two': (0, $b964d0845ae86974$export$2e2bcd8739ae039).elements.heading.h2,
+    'list-item': (0, $b964d0845ae86974$export$2e2bcd8739ae039).elements.list.item,
+    paragraph: (0, $b964d0845ae86974$export$2e2bcd8739ae039).elements.paragraph
+};
+var $784e2eeeb6b1d65b$var$isAlignType = function(format) {
+    return $784e2eeeb6b1d65b$var$TEXT_ALIGN_TYPES.includes(format);
+};
+var $784e2eeeb6b1d65b$var$isListType = function(format) {
+    return $784e2eeeb6b1d65b$var$LIST_TYPES.includes(format);
+};
+var $784e2eeeb6b1d65b$var$isAlignElement = function(element) {
+    return 'align' in element;
+};
+var $784e2eeeb6b1d65b$var$createTagElement = function(tag, options) {
+    var attributes = options.attributes, key = options.key, className = options.className, children = options.children;
+    var props = attributes ? $784e2eeeb6b1d65b$var$__assign($784e2eeeb6b1d65b$var$__assign({}, attributes), {
+        className: className
+    }) : {
+        key: key,
+        className: className
+    };
+    return /*#__PURE__*/ (0, $iA2ta$react.createElement)(tag, props, children);
+};
+var $784e2eeeb6b1d65b$var$applyMarks = function(content, marks) {
+    if (marks.bold) content = (0, $iA2ta$reactjsxruntime.jsx)("strong", {
+        children: content
+    });
+    if (marks.code) content = (0, $iA2ta$reactjsxruntime.jsx)("code", {
+        className: (0, $b964d0845ae86974$export$2e2bcd8739ae039).elements.code,
+        children: content
+    });
+    if (marks.italic) content = (0, $iA2ta$reactjsxruntime.jsx)("em", {
+        children: content
+    });
+    if (marks.underline) content = (0, $iA2ta$reactjsxruntime.jsx)("u", {
+        children: content
+    });
+    return content;
+};
+var $784e2eeeb6b1d65b$var$renderRichNode = function(node, options) {
+    if (options === void 0) options = {};
+    var attributes = options.attributes, providedChildren = options.children, key = options.key;
+    if ((0, $iA2ta$slate.Text).isText(node)) {
+        var content = $784e2eeeb6b1d65b$var$applyMarks(providedChildren !== null && providedChildren !== void 0 ? providedChildren : node.text, node);
+        return attributes ? (0, $iA2ta$reactjsxruntime.jsx)("span", $784e2eeeb6b1d65b$var$__assign({}, attributes, {
+            children: content
+        })) : (0, $iA2ta$reactjsxruntime.jsx)((0, $iA2ta$react.Fragment), {
+            children: content
+        }, key);
+    }
+    var element = node;
+    var type = (0, $iA2ta$lodash.get)(element, 'type', 'paragraph');
+    var tag = (0, $iA2ta$lodash.get)($784e2eeeb6b1d65b$var$TAG_BY_TYPE, type, 'p');
+    var baseClass = (0, $iA2ta$lodash.get)($784e2eeeb6b1d65b$var$CLASS_BY_TYPE, type, $784e2eeeb6b1d65b$var$CLASS_BY_TYPE.paragraph);
+    var alignClass = $784e2eeeb6b1d65b$var$isAlignElement(element) ? (0, $iA2ta$lodash.get)((0, $b964d0845ae86974$export$2e2bcd8739ae039).align, element.align, '') : '';
+    var renderChildNode = function(childNode, index) {
+        return $784e2eeeb6b1d65b$var$renderRichNode(childNode, {
+            key: index
+        });
+    };
+    var renderedChildren = providedChildren !== null && providedChildren !== void 0 ? providedChildren : (0, $iA2ta$lodash.map)(element.children, renderChildNode);
+    // Merge any className Slate might pass in attributes (rare) with ours
+    var mergedClassName = (0, $622cd2936b18c771$export$4370d69198e9314a)(baseClass, alignClass, attributes === null || attributes === void 0 ? void 0 : attributes.className);
+    return $784e2eeeb6b1d65b$var$createTagElement(tag, {
+        attributes: attributes,
+        key: key,
+        className: mergedClassName,
+        children: renderedChildren
+    });
+};
+var $784e2eeeb6b1d65b$var$RichTextArea = function(_a) {
+    var _b = _a.initialValue, initialValue = _b === void 0 ? '[{"type":"paragraph","children":[{"text":"Hello from initial value. Edit me!"}]}]' : _b, onChange = _a.onChange, _c = _a.placeholder, placeholder = _c === void 0 ? "Type something\u2026" : _c, className = _a.className, stylesOverrides = _a.styles, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, toolbarConfig = _a.toolbarConfig;
+    var styles = (0, $iA2ta$react.useMemo)(function() {
+        var result = (0, $iA2ta$lodash.cloneDeep)((0, $b964d0845ae86974$export$2e2bcd8739ae039));
+        var keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $b964d0845ae86974$export$2e2bcd8739ae039));
+        (0, $iA2ta$lodash.forEach)(keys, function(key) {
+            (0, $iA2ta$lodash.set)(result, key, (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $iA2ta$lodash.get)((0, $b964d0845ae86974$export$2e2bcd8739ae039), key), (0, $iA2ta$lodash.get)(stylesOverrides, key)));
+        });
+        return result;
+    }, [
+        stylesOverrides
+    ]);
+    var defaultToolbarItems = (0, $iA2ta$react.useMemo)(function() {
+        return [
+            'bold',
+            'italic',
+            'underline',
+            'code',
+            'heading-one',
+            'heading-two',
+            'block-quote',
+            'numbered-list',
+            'bulleted-list',
+            'left',
+            'center',
+            'right',
+            'justify'
+        ];
+    }, []);
+    var enabledToolbarItems = (0, $iA2ta$react.useMemo)(function() {
+        return (0, $iA2ta$lodash.uniq)(toolbarConfig !== null && toolbarConfig !== void 0 ? toolbarConfig : defaultToolbarItems);
+    }, [
+        toolbarConfig,
+        defaultToolbarItems
+    ]);
+    var editor = (0, $iA2ta$react.useMemo)(function() {
+        return (0, $iA2ta$slatehistory.withHistory)((0, $iA2ta$slatereact.withReact)((0, $iA2ta$slate.createEditor)()));
+    }, []);
+    var renderElement = (0, $iA2ta$react.useCallback)(function(_a) {
+        var element = _a.element, attributes = _a.attributes, children = _a.children;
+        return $784e2eeeb6b1d65b$var$renderRichNode(element, {
+            attributes: attributes,
+            children: children
+        });
+    }, []);
+    var renderLeaf = (0, $iA2ta$react.useCallback)(function(_a) {
+        var leaf = _a.leaf, attributes = _a.attributes, children = _a.children;
+        return $784e2eeeb6b1d65b$var$renderRichNode(leaf, {
+            attributes: attributes,
+            children: children
+        });
+    }, []);
+    var handleChange = (0, $iA2ta$react.useCallback)(function(newValue) {
+        if (!onChange) return;
+        onChange(JSON.stringify(newValue));
+    }, [
+        onChange
+    ]);
+    var parsedInitialValue = (0, $iA2ta$react.useMemo)(function() {
+        try {
+            return JSON.parse(initialValue);
+        } catch (_a) {
+            return [];
+        }
+    }, [
+        initialValue
+    ]);
+    var generateMarkButton = (0, $iA2ta$react.useCallback)(function(format, icon) {
+        return (0, $iA2ta$lodash.includes)(enabledToolbarItems, format) && (0, $iA2ta$reactjsxruntime.jsx)($784e2eeeb6b1d65b$var$Button, {
+            active: $784e2eeeb6b1d65b$export$72001287e2a5b413(editor, format),
+            onMouseDown: function() {
+                return $784e2eeeb6b1d65b$export$797ad2667b8015a8(editor, format);
+            },
+            icon: icon
+        });
+    }, [
+        enabledToolbarItems,
+        editor
+    ]);
+    var generateBlockButton = (0, $iA2ta$react.useCallback)(function(format, icon) {
+        return (0, $iA2ta$lodash.includes)(enabledToolbarItems, format) && (0, $iA2ta$reactjsxruntime.jsx)($784e2eeeb6b1d65b$var$BlockButton, {
+            format: format,
+            icon: icon
+        });
+    }, [
+        enabledToolbarItems
+    ]);
+    var renderToolbarGroups = (0, $iA2ta$react.useCallback)(function() {
+        var sections = [];
+        var marks = (0, $iA2ta$lodash.compact)([
+            generateMarkButton('bold', 'bold'),
+            generateMarkButton('italic', 'italic'),
+            generateMarkButton('underline', 'underline'),
+            generateMarkButton('code', 'code')
+        ]);
+        if (!(0, $iA2ta$lodash.isEmpty)(marks)) sections.push(marks);
+        var headings = (0, $iA2ta$lodash.compact)([
+            generateBlockButton('heading-one', 'h1'),
+            generateBlockButton('heading-two', 'h2'),
+            generateBlockButton('block-quote', 'quote-left')
+        ]);
+        if (!(0, $iA2ta$lodash.isEmpty)(headings)) sections.push(headings);
+        var lists = (0, $iA2ta$lodash.compact)([
+            generateBlockButton('numbered-list', 'list-ol'),
+            generateBlockButton('bulleted-list', 'list-ul')
+        ]);
+        if (!(0, $iA2ta$lodash.isEmpty)(lists)) sections.push(lists);
+        var align = (0, $iA2ta$lodash.compact)([
+            generateBlockButton('left', 'align-left'),
+            generateBlockButton('center', 'align-center'),
+            generateBlockButton('right', 'align-right'),
+            generateBlockButton('justify', 'align-justify')
+        ]);
+        if (!(0, $iA2ta$lodash.isEmpty)(align)) sections.push(align);
+        return sections.map(function(group, index) {
+            return (0, $iA2ta$reactjsxruntime.jsxs)((0, $iA2ta$react.Fragment), {
+                children: [
+                    index > 0 && (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                        className: styles.editor.toolbar.divider
+                    }),
+                    group
+                ]
+            }, index);
+        });
+    }, [
+        generateMarkButton,
+        generateBlockButton,
+        styles.editor.toolbar.divider
+    ]);
+    if (isReadOnly && (0, $iA2ta$lodash.isEmpty)(parsedInitialValue)) return null;
+    return isReadOnly ? (0, $iA2ta$reactjsxruntime.jsx)("div", {
+        className: (0, $622cd2936b18c771$export$4370d69198e9314a)('prose prose-sm max-w-none', styles.readOnly.container, className),
+        children: (0, $iA2ta$lodash.isArray)(parsedInitialValue) ? (0, $iA2ta$lodash.map)(parsedInitialValue, function(n, i) {
+            return $784e2eeeb6b1d65b$var$renderRichNode(n, {
+                key: i
+            });
+        }) : null
+    }) : (0, $iA2ta$reactjsxruntime.jsx)((0, $iA2ta$slatereact.Slate), {
+        editor: editor,
+        initialValue: parsedInitialValue,
+        onChange: handleChange,
+        children: (0, $iA2ta$reactjsxruntime.jsxs)("div", {
+            className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.container, className),
+            children: [
+                (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                    className: styles.editor.toolbar.container,
+                    children: renderToolbarGroups()
+                }),
+                (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                    className: styles.editor.area.container,
+                    children: (0, $iA2ta$reactjsxruntime.jsx)((0, $iA2ta$slatereact.Editable), {
+                        renderElement: renderElement,
+                        renderLeaf: renderLeaf,
+                        className: styles.editor.area.editable,
+                        placeholder: placeholder,
+                        spellCheck: true,
+                        autoFocus: true,
+                        onKeyDown: function(event) {
+                            (0, $iA2ta$lodash.forEach)($784e2eeeb6b1d65b$var$HOTKEYS, function(mark, hotkey) {
+                                if ((0, ($parcel$interopDefault($iA2ta$ishotkey)))(hotkey, event)) {
+                                    event.preventDefault();
+                                    $784e2eeeb6b1d65b$export$797ad2667b8015a8(editor, mark);
+                                }
+                            });
+                        }
+                    })
+                })
+            ]
+        })
+    });
+};
+var $784e2eeeb6b1d65b$export$65eead07296cdb21 = function(editor, format) {
+    var isActive = $784e2eeeb6b1d65b$export$d49b8615a8b45195(editor, format, $784e2eeeb6b1d65b$var$isAlignType(format) ? 'align' : 'type');
+    var isList = $784e2eeeb6b1d65b$var$isListType(format);
+    (0, $iA2ta$slate.Transforms).unwrapNodes(editor, {
+        match: function(n) {
+            return !(0, $iA2ta$slate.Editor).isEditor(n) && (0, $iA2ta$slate.Element).isElement(n) && $784e2eeeb6b1d65b$var$isListType(n.type) && !$784e2eeeb6b1d65b$var$isAlignType(format);
+        },
+        split: true
+    });
+    var newProperties = $784e2eeeb6b1d65b$var$isAlignType(format) ? {
+        align: isActive ? undefined : format
+    } : {
+        type: isActive ? 'paragraph' : isList ? 'list-item' : format
+    };
+    (0, $iA2ta$slate.Transforms).setNodes(editor, newProperties);
+    if (!isActive && isList) {
+        var block = {
+            type: format,
+            children: []
+        };
+        (0, $iA2ta$slate.Transforms).wrapNodes(editor, block);
+    }
+};
+var $784e2eeeb6b1d65b$export$797ad2667b8015a8 = function(editor, format) {
+    var isActive = $784e2eeeb6b1d65b$export$72001287e2a5b413(editor, format);
+    if (isActive) (0, $iA2ta$slate.Editor).removeMark(editor, format);
+    else (0, $iA2ta$slate.Editor).addMark(editor, format, true);
+};
+var $784e2eeeb6b1d65b$export$d49b8615a8b45195 = function(editor, format, blockType) {
+    if (blockType === void 0) blockType = 'type';
+    var selection = editor.selection;
+    if (!selection) return false;
+    var match = Array.from((0, $iA2ta$slate.Editor).nodes(editor, {
+        at: (0, $iA2ta$slate.Editor).unhangRange(editor, selection),
+        match: function(n) {
+            if (!(0, $iA2ta$slate.Editor).isEditor(n) && (0, $iA2ta$slate.Element).isElement(n)) {
+                var element = n;
+                if (blockType === 'align' && $784e2eeeb6b1d65b$var$isAlignElement(element)) return element.align === format;
+                return element.type === format;
+            }
+            return false;
+        }
+    }))[0];
+    return !!match;
+};
+var $784e2eeeb6b1d65b$export$72001287e2a5b413 = function(editor, format) {
+    var marks = (0, $iA2ta$slate.Editor).marks(editor);
+    return marks ? marks[format] === true : false;
+};
+var $784e2eeeb6b1d65b$var$Button = function(_a) {
+    var active = _a.active, onMouseDown = _a.onMouseDown, icon = _a.icon;
+    return (0, $iA2ta$reactjsxruntime.jsx)("button", {
+        type: "button",
+        "aria-pressed": active,
+        className: (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $b964d0845ae86974$export$2e2bcd8739ae039).editor.toolbar.button, active && (0, $b964d0845ae86974$export$2e2bcd8739ae039).editor.toolbar.buttonActive),
+        onMouseDown: function(e) {
+            e.preventDefault();
+            onMouseDown();
+        },
+        children: (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
+            accessor: icon,
+            type: "solid",
+            className: (0, $b964d0845ae86974$export$2e2bcd8739ae039).editor.toolbar.icon
+        })
+    });
+};
+var $784e2eeeb6b1d65b$var$BlockButton = function(_a) {
+    var format = _a.format, icon = _a.icon;
+    var editor = (0, $iA2ta$slatereact.useSlate)();
+    var active = $784e2eeeb6b1d65b$export$d49b8615a8b45195(editor, format, $784e2eeeb6b1d65b$var$isAlignType(format) ? 'align' : 'type');
+    var handleMouseDown = (0, $iA2ta$react.useCallback)(function() {
+        return $784e2eeeb6b1d65b$export$65eead07296cdb21(editor, format);
+    }, [
+        editor,
+        format
+    ]);
+    return (0, $iA2ta$reactjsxruntime.jsx)($784e2eeeb6b1d65b$var$Button, {
+        active: active,
+        onMouseDown: handleMouseDown,
+        icon: icon
+    });
+};
+var $784e2eeeb6b1d65b$export$2e2bcd8739ae039 = $784e2eeeb6b1d65b$var$RichTextArea;
+
+
+
+
+
+
+
+
+
 var $8d406a8542925512$var$base = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md my-2 cursor-pointer',
     foot: '',
+    labelContainer: 'flex flex-col',
     label: 'block font-medium text-gray-900',
     hint: 'text-xs text-gray-500',
     leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
@@ -6290,7 +6715,7 @@ var $079d45c48b1515dd$var$__assign = undefined && undefined.__assign || function
     return $079d45c48b1515dd$var$__assign.apply(this, arguments);
 };
 var $079d45c48b1515dd$var$FileInputGroupForm = function(props) {
-    var _a = props.name, name = _a === void 0 ? 'multiple-file-input' : _a, label = props.label, description = props.description, required = props.required, value = props.value, max = props.max, error = props.error, isDisabled = props.isDisabled, _b = props.isRequired, isRequired = _b === void 0 ? false : _b, _c = props.isTouched, isTouched = _c === void 0 ? false : _c, _d = props.isMulti, isMulti = _d === void 0 ? false : _d, children = props.children, onChange = props.onChange, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var _a = props.name, name = _a === void 0 ? 'multiple-file-input' : _a, label = props.label, description = props.description, hint = props.hint, required = props.required, value = props.value, max = props.max, error = props.error, isDisabled = props.isDisabled, _b = props.isRequired, isRequired = _b === void 0 ? false : _b, _c = props.isTouched, isTouched = _c === void 0 ? false : _c, _d = props.isMulti, isMulti = _d === void 0 ? false : _d, children = props.children, onChange = props.onChange, onBlur = props.onBlur, stylesOverrides = props.styles;
     var isValid = error === undefined;
     var _e = (0, $iA2ta$react.useState)(false), isDragging = _e[0], setIsDragging = _e[1];
     var handleChangeInput = (0, $iA2ta$react.useCallback)(function(files) {
@@ -6355,10 +6780,19 @@ var $079d45c48b1515dd$var$FileInputGroupForm = function(props) {
             (0, $iA2ta$reactjsxruntime.jsxs)("div", {
                 className: styles.head,
                 children: [
-                    label && (0, $iA2ta$reactjsxruntime.jsx)("label", {
-                        htmlFor: name,
-                        className: styles.label,
-                        children: label
+                    label && (0, $iA2ta$reactjsxruntime.jsxs)("div", {
+                        className: styles.labelContainer,
+                        children: [
+                            (0, $iA2ta$reactjsxruntime.jsx)("label", {
+                                htmlFor: name,
+                                className: styles.label,
+                                children: label
+                            }),
+                            description && !(error && isTouched) && (0, $iA2ta$reactjsxruntime.jsx)("p", {
+                                className: styles.description,
+                                children: description
+                            })
+                        ]
                     }),
                     !required && !isRequired && typeof label === 'string' && (0, $iA2ta$reactjsxruntime.jsx)("span", {
                         className: styles.hint,
@@ -6394,9 +6828,9 @@ var $079d45c48b1515dd$var$FileInputGroupForm = function(props) {
             (0, $iA2ta$reactjsxruntime.jsxs)("div", {
                 className: styles.foot,
                 children: [
-                    description && !(error && isTouched) && (0, $iA2ta$reactjsxruntime.jsx)("p", {
-                        className: styles.description,
-                        children: description
+                    hint && !(error && isTouched) && (0, $iA2ta$reactjsxruntime.jsx)("p", {
+                        className: styles.hint,
+                        children: hint
                     }),
                     error && isTouched && (0, $iA2ta$reactjsxruntime.jsx)("p", {
                         className: styles.error,