@ballistix.digital/react-components 8.3.2-rc-93.0 → 8.3.2-rc-95.0

package/dist/index.js

@@ -6207,6 +6207,7 @@ var $8d406a8542925512$var$base = {
     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 +6291,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 +6356,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 +6404,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,