@ballistix.digital/react-components 7.4.0 → 7.4.1-rc-76.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import {jsx as $4MPRY$jsx, jsxs as $4MPRY$jsxs, Fragment as $4MPRY$Fragment} from "react/jsx-runtime";
 import {ArrowPathIcon as $4MPRY$ArrowPathIcon, ChevronDownIcon as $4MPRY$ChevronDownIcon, EllipsisVerticalIcon as $4MPRY$EllipsisVerticalIcon, ExclamationCircleIcon as $4MPRY$ExclamationCircleIcon, ChevronDoubleLeftIcon as $4MPRY$ChevronDoubleLeftIcon, ChevronLeftIcon as $4MPRY$ChevronLeftIcon, ChevronRightIcon as $4MPRY$ChevronRightIcon, ChevronDoubleRightIcon as $4MPRY$ChevronDoubleRightIcon, ChevronUpDownIcon as $4MPRY$ChevronUpDownIcon, ChevronUpIcon as $4MPRY$ChevronUpIcon, HomeIcon as $4MPRY$HomeIcon, ArrowLongLeftIcon as $4MPRY$ArrowLongLeftIcon, ArrowLongRightIcon as $4MPRY$ArrowLongRightIcon} from "@heroicons/react/20/solid";
-import {set as $4MPRY$set, get as $4MPRY$get, isArray as $4MPRY$isArray, map as $4MPRY$map, padStart as $4MPRY$padStart, noop as $4MPRY$noop, toSafeInteger as $4MPRY$toSafeInteger, indexOf as $4MPRY$indexOf, compact as $4MPRY$compact, forEach as $4MPRY$forEach, assign as $4MPRY$assign, includes as $4MPRY$includes, isEmpty as $4MPRY$isEmpty, some as $4MPRY$some, findIndex as $4MPRY$findIndex, last as $4MPRY$last, first as $4MPRY$first, find as $4MPRY$find, concat as $4MPRY$concat, times as $4MPRY$times, pick as $4MPRY$pick, isNil as $4MPRY$isNil, intersection as $4MPRY$intersection, trim as $4MPRY$trim, lastIndexOf as $4MPRY$lastIndexOf} from "lodash";
+import {set as $4MPRY$set, get as $4MPRY$get, isArray as $4MPRY$isArray, map as $4MPRY$map, padStart as $4MPRY$padStart, concat as $4MPRY$concat, isNil as $4MPRY$isNil, noop as $4MPRY$noop, toSafeInteger as $4MPRY$toSafeInteger, indexOf as $4MPRY$indexOf, compact as $4MPRY$compact, forEach as $4MPRY$forEach, assign as $4MPRY$assign, includes as $4MPRY$includes, isEmpty as $4MPRY$isEmpty, some as $4MPRY$some, findIndex as $4MPRY$findIndex, last as $4MPRY$last, first as $4MPRY$first, find as $4MPRY$find, times as $4MPRY$times, pick as $4MPRY$pick, intersection as $4MPRY$intersection, trim as $4MPRY$trim, lastIndexOf as $4MPRY$lastIndexOf} from "lodash";
 import $4MPRY$react, {useState as $4MPRY$useState, useMemo as $4MPRY$useMemo, useRef as $4MPRY$useRef, Children as $4MPRY$Children, Fragment as $4MPRY$Fragment1, useCallback as $4MPRY$useCallback, useEffect as $4MPRY$useEffect} from "react";
 import $4MPRY$lodashget from "lodash/get";
 import {library as $4MPRY$library} from "@fortawesome/fontawesome-svg-core";
@@ -1321,64 +1321,277 @@ var $49931a5175dab103$export$2e2bcd8739ae039 = $49931a5175dab103$var$ProgressTra
 
 
 
+
+
+var $26a2a503969671d2$var$base = {
+    hint: 'text-gray-400 text-xs mt-1',
+    error: 'text-red-500 text-xs ml-5 mt-1'
+};
+var $26a2a503969671d2$var$leading = {};
+var $26a2a503969671d2$var$trailing = {};
+var $26a2a503969671d2$var$normal = {
+    hint: 'mt-2 text-sm'
+};
+var $26a2a503969671d2$var$inset = {
+    hint: 'hidden'
+};
+var $26a2a503969671d2$var$overlapping = {
+    hint: 'hidden'
+};
+var $26a2a503969671d2$var$pill = {
+    hint: 'text-xs'
+};
+var $26a2a503969671d2$var$floored = {
+    hint: 'text-xs mt-2'
+};
+var $26a2a503969671d2$var$invalid = {
+    hint: 'text-sm text-red-600'
+};
+var $26a2a503969671d2$var$disabled = {
+    hint: 'text-gray-500'
+};
+var $26a2a503969671d2$var$styles = {
+    base: $26a2a503969671d2$var$base,
+    leading: $26a2a503969671d2$var$leading,
+    trailing: $26a2a503969671d2$var$trailing,
+    normal: $26a2a503969671d2$var$normal,
+    inset: $26a2a503969671d2$var$inset,
+    overlapping: $26a2a503969671d2$var$overlapping,
+    pill: $26a2a503969671d2$var$pill,
+    floored: $26a2a503969671d2$var$floored,
+    invalid: $26a2a503969671d2$var$invalid,
+    disabled: $26a2a503969671d2$var$disabled
+};
+var $26a2a503969671d2$export$2e2bcd8739ae039 = $26a2a503969671d2$var$styles;
+
+
+var $3b70ba41b110d1fa$var$InputFooter = function(props) {
+    var name = props.name, hint = props.hint, error = props.error, isTouched = props.isTouched, _a = props.isHidden, isHidden = _a === void 0 ? false : _a, stylesOverrides = props.styles, _b = props.type, type = _b === void 0 ? 'normal' : _b;
+    var errorDataCy = "form-input-error-".concat(name);
+    var handleGenerateStyle = function() {
+        var result = (0, $b3fc44f26b625a32$export$e2d2075c69d9100d)((0, $26a2a503969671d2$export$2e2bcd8739ae039).base);
+        var keys = (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $26a2a503969671d2$export$2e2bcd8739ae039).base);
+        keys.forEach(function(key) {
+            (0, $4MPRY$set)(result, key, (0, $66c3dcaaa74b5389$export$4370d69198e9314a)((0, $4MPRY$get)((0, $26a2a503969671d2$export$2e2bcd8739ae039).base, key), (0, $4MPRY$get)((0, $26a2a503969671d2$export$2e2bcd8739ae039)[type], key), (0, $4MPRY$get)(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    var hintElement = (0, $4MPRY$useMemo)(function() {
+        if (!hint || error && isTouched) return null;
+        return (0, $4MPRY$jsx)("p", {
+            className: styles.hint,
+            children: hint
+        });
+    }, [
+        hint,
+        styles.hint,
+        error,
+        isTouched
+    ]);
+    var errorElement = (0, $4MPRY$useMemo)(function() {
+        if (!error || !isTouched) return null;
+        return (0, $4MPRY$jsx)("p", {
+            className: styles.error,
+            "data-cy": errorDataCy,
+            children: error
+        });
+    }, [
+        error,
+        styles.error,
+        errorDataCy,
+        isTouched
+    ]);
+    if (isHidden && (0, $4MPRY$isNil)(errorElement) && (0, $4MPRY$isNil)(hintElement)) return null;
+    return (0, $4MPRY$jsxs)("div", {
+        className: styles.foot,
+        children: [
+            hintElement,
+            errorElement
+        ]
+    });
+};
+var $3b70ba41b110d1fa$export$2e2bcd8739ae039 = $3b70ba41b110d1fa$var$InputFooter;
+
+
+
+
+
+
+
+
+
+
+
+var $495392c79d755f40$var$base = {
+    header: {
+        container: 'flex flex-col justify-end',
+        labelWrapper: 'flex',
+        label: '',
+        required: '',
+        optional: 'ml-auto text-xs text-gray-500',
+        description: 'text-xs font-light'
+    }
+};
+var $495392c79d755f40$var$normal = {
+    header: {
+        container: 'mb-2',
+        label: 'leading-6 text-sm',
+        optional: 'leading-6'
+    }
+};
+var $495392c79d755f40$var$inset = {
+    header: {
+        label: 'text-xs',
+        optional: 'text-xs'
+    }
+};
+var $495392c79d755f40$var$overlapping = {
+    header: {
+        container: 'flex flex-col justify-end',
+        labelWrapper: 'absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
+        label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900',
+        required: '',
+        optional: 'text-xs mr-4 bg-white px-1',
+        description: 'hidden'
+    }
+};
+var $495392c79d755f40$var$pill = {
+    header: {
+        labelWrapper: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
+        description: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6'
+    }
+};
+var $495392c79d755f40$var$floored = {
+    header: {
+        label: 'block text-sm font-medium leading-6 text-gray-900'
+    }
+};
+var $495392c79d755f40$var$styles = {
+    base: $495392c79d755f40$var$base,
+    normal: $495392c79d755f40$var$normal,
+    inset: $495392c79d755f40$var$inset,
+    overlapping: $495392c79d755f40$var$overlapping,
+    pill: $495392c79d755f40$var$pill,
+    floored: $495392c79d755f40$var$floored
+};
+var $495392c79d755f40$export$2e2bcd8739ae039 = $495392c79d755f40$var$styles;
+
+
+var $38b37a8c0b4bec9d$var$InputHeader = function(props) {
+    var name = props.name, label = props.label, description = props.description, required = props.required, _a = props.isRequired, isRequired = _a === void 0 ? false : _a, isOptionalLabelHidden = props.isOptionalLabelHidden, stylesOverrides = props.styles, _b = props.type, type = _b === void 0 ? 'normal' : _b;
+    var handleGenerateStyle = function() {
+        var result = (0, $b3fc44f26b625a32$export$e2d2075c69d9100d)((0, $495392c79d755f40$export$2e2bcd8739ae039).base);
+        var keys = (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $495392c79d755f40$export$2e2bcd8739ae039).base);
+        keys.forEach(function(key) {
+            (0, $4MPRY$set)(result, key, (0, $66c3dcaaa74b5389$export$4370d69198e9314a)((0, $4MPRY$get)((0, $495392c79d755f40$export$2e2bcd8739ae039).base, key), (0, $4MPRY$get)((0, $495392c79d755f40$export$2e2bcd8739ae039)[type], key), (0, $4MPRY$get)(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    var requiredLabel = (0, $4MPRY$useMemo)(function() {
+        if (required) return required({
+            isRequired: isRequired
+        });
+        else if (!isRequired && typeof label === 'string' && !isOptionalLabelHidden) return (0, $4MPRY$jsx)("span", {
+            className: styles.header.optional,
+            children: "Optional"
+        });
+        return null;
+    }, [
+        isOptionalLabelHidden,
+        isRequired,
+        label,
+        required,
+        styles.header.optional
+    ]);
+    var labelElement = (0, $4MPRY$useMemo)(function() {
+        if (!label && (0, $4MPRY$isNil)(requiredLabel)) return null;
+        return (0, $4MPRY$jsxs)("div", {
+            className: styles.header.labelWrapper,
+            children: [
+                (0, $4MPRY$jsx)("label", {
+                    htmlFor: name,
+                    className: styles.header.label,
+                    children: label
+                }),
+                requiredLabel
+            ]
+        });
+    }, [
+        label,
+        name,
+        requiredLabel,
+        styles.header.labelWrapper,
+        styles.header.label
+    ]);
+    var descriptionElement = (0, $4MPRY$useMemo)(function() {
+        if (!description) return null;
+        return (0, $4MPRY$jsx)("p", {
+            className: styles.header.description,
+            children: description
+        });
+    }, [
+        description,
+        styles.header.description
+    ]);
+    if ((0, $4MPRY$isNil)(labelElement) && (0, $4MPRY$isNil)(descriptionElement)) return null;
+    return (0, $4MPRY$jsxs)("div", {
+        className: styles.header.container,
+        children: [
+            labelElement,
+            descriptionElement
+        ]
+    });
+};
+var $38b37a8c0b4bec9d$export$2e2bcd8739ae039 = $38b37a8c0b4bec9d$var$InputHeader;
+
+
+
+
+
+
+
+
+
 var $0249406a6f5edb4d$var$base = {
     container: '',
-    head: 'flex justify-between',
     body: 'relative rounded-md',
     foot: '',
-    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',
     input: 'block w-full',
     trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
-    description: 'text-gray-400 text-xs mt-1',
-    error: 'text-red-500 text-xs ml-5 mt-1'
+    error: 'ml-5'
 };
 var $0249406a6f5edb4d$var$leading = {
     input: 'pl-10'
 };
 var $0249406a6f5edb4d$var$trailing = {};
 var $0249406a6f5edb4d$var$normal = {
-    label: 'leading-6 text-sm mb-2',
-    hint: 'leading-6',
     leading: 'pl-3',
     input: 'rounded-md border-gray-200 shadow-xs focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
-    trailing: 'pr-3',
-    description: 'mt-2 text-sm'
+    trailing: 'pr-3'
 };
 var $0249406a6f5edb4d$var$inset = {
     container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-xs ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
-    label: 'text-xs',
-    hint: 'text-xs',
-    input: 'border-0 ring-0! p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
-    description: 'hidden'
+    input: 'border-0 ring-0! p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0'
 };
 var $0249406a6f5edb4d$var$overlapping = {
     container: 'relative',
-    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
-    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
-    hint: 'text-xs mr-4 bg-white px-1',
-    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    description: 'hidden'
+    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6'
 };
 var $0249406a6f5edb4d$var$pill = {
-    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
     foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
     input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    trailing: 'pr-2',
-    description: 'text-xs'
+    trailing: 'pr-2'
 };
 var $0249406a6f5edb4d$var$floored = {
     body: 'relative mt-2',
-    label: 'block text-sm font-medium leading-6 text-gray-900',
-    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
-    description: 'text-xs mt-2'
+    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0'
 };
 var $0249406a6f5edb4d$var$invalid = {
     container: 'ring-red-500',
-    input: // 'block w-full border border-transparent text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:leading-6 pr-10',
-    'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10',
-    description: 'text-sm text-red-600'
+    input: 'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10'
 };
 var $0249406a6f5edb4d$var$disabled = {
     input: 'block w-full rounded-md border-0 text-gray-900 shadow-xs ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200'
@@ -1401,7 +1614,7 @@ var $0249406a6f5edb4d$export$2e2bcd8739ae039 = $0249406a6f5edb4d$var$styles;
 var $7b4ae85c2b92d7dd$var$InputGroupForm = function(props) {
     var _a;
     var _b;
-    var name = props.name, _c = props.htmlType, htmlType = _c === void 0 ? 'text' : _c, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, required = props.required, value = props.value, mask = props.mask, min = props.min, max = props.max, maxLength = props.maxLength, rows = props.rows, error = props.error, _d = props.type, type = _d === void 0 ? 'normal' : _d, isDisabled = props.isDisabled, _e = props.isRequired, isRequired = _e === void 0 ? false : _e, _f = props.isTouched, isTouched = _f === void 0 ? false : _f, _g = props.isSolo, isSolo = _g === void 0 ? false : _g, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, onClick = props.onClick, onKeyDown = props.onKeyDown, setRefOnLoad = props.setRefOnLoad, stylesOverrides = props.styles;
+    var name = props.name, _c = props.htmlType, htmlType = _c === void 0 ? 'text' : _c, label = props.label, hint = props.hint, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, required = props.required, value = props.value, mask = props.mask, min = props.min, max = props.max, maxLength = props.maxLength, rows = props.rows, error = props.error, _d = props.type, type = _d === void 0 ? 'normal' : _d, isDisabled = props.isDisabled, _e = props.isRequired, isRequired = _e === void 0 ? false : _e, _f = props.isTouched, isTouched = _f === void 0 ? false : _f, _g = props.isSolo, isSolo = _g === void 0 ? false : _g, _h = props.isOptionalLabelHidden, isOptionalLabelHidden = _h === void 0 ? false : _h, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, onClick = props.onClick, onKeyDown = props.onKeyDown, setRefOnLoad = props.setRefOnLoad, stylesOverrides = props.styles;
     var isValid = error === undefined;
     var maskRef = (0, $4MPRY$useMask)({
         mask: mask === null || mask === void 0 ? void 0 : mask.mask,
@@ -1411,7 +1624,7 @@ var $7b4ae85c2b92d7dd$var$InputGroupForm = function(props) {
     var ref = mask ? maskRef : defaultRef;
     var handleGenerateStyle = function() {
         var result = (0, $b3fc44f26b625a32$export$e2d2075c69d9100d)((0, $0249406a6f5edb4d$export$2e2bcd8739ae039).base);
-        var keys = (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $0249406a6f5edb4d$export$2e2bcd8739ae039).base);
+        var keys = (0, $4MPRY$concat)((0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $0249406a6f5edb4d$export$2e2bcd8739ae039).base), (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $26a2a503969671d2$export$2e2bcd8739ae039).base), (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $495392c79d755f40$export$2e2bcd8739ae039).base));
         keys.forEach(function(key) {
             (0, $4MPRY$set)(result, key, (0, $66c3dcaaa74b5389$export$4370d69198e9314a)((0, $4MPRY$get)((0, $0249406a6f5edb4d$export$2e2bcd8739ae039).base, key), leading !== undefined && (0, $4MPRY$get)((0, $0249406a6f5edb4d$export$2e2bcd8739ae039).leading, key), trailing !== undefined && (0, $4MPRY$get)((0, $0249406a6f5edb4d$export$2e2bcd8739ae039).trailing, key), type && (0, $4MPRY$get)((0, $0249406a6f5edb4d$export$2e2bcd8739ae039)[type], key), isTouched === true && !isValid && (0, $4MPRY$get)((0, $0249406a6f5edb4d$export$2e2bcd8739ae039).invalid, key), isDisabled && (0, $4MPRY$get)((0, $0249406a6f5edb4d$export$2e2bcd8739ae039).disabled, key), (0, $4MPRY$get)(stylesOverrides, key)));
         });
@@ -1424,7 +1637,6 @@ var $7b4ae85c2b92d7dd$var$InputGroupForm = function(props) {
     });
     var isClearable = !trailing && isValid && onClear && value !== '' && value;
     var inputDataCy = "form-input-".concat(name);
-    var errorDataCy = "form-input-error-".concat(name);
     (0, $4MPRY$useEffect)(function() {
         if (ref.current && ref.current !== null && setRefOnLoad) setRefOnLoad(ref);
     }, [
@@ -1434,22 +1646,15 @@ var $7b4ae85c2b92d7dd$var$InputGroupForm = function(props) {
     return (0, $4MPRY$jsxs)("div", {
         className: styles.container,
         children: [
-            (0, $4MPRY$jsxs)("div", {
-                className: styles.head,
-                children: [
-                    label && (0, $4MPRY$jsx)("label", {
-                        htmlFor: name,
-                        className: styles.label,
-                        children: label
-                    }),
-                    !required && !isRequired && typeof label === 'string' && (0, $4MPRY$jsx)("span", {
-                        className: styles.hint,
-                        children: "Optional"
-                    }),
-                    required && required({
-                        isRequired: isRequired
-                    })
-                ]
+            (0, $4MPRY$jsx)((0, $38b37a8c0b4bec9d$export$2e2bcd8739ae039), {
+                name: name,
+                label: label,
+                required: required,
+                isRequired: isRequired,
+                isOptionalLabelHidden: isOptionalLabelHidden,
+                styles: styles,
+                type: type,
+                description: description
             }),
             (0, $4MPRY$jsxs)("div", {
                 className: styles.body,
@@ -1528,19 +1733,13 @@ var $7b4ae85c2b92d7dd$var$InputGroupForm = function(props) {
                     })
                 ]
             }),
-            (0, $4MPRY$jsxs)("div", {
-                className: styles.foot,
-                children: [
-                    description && !(error && isTouched) && (0, $4MPRY$jsx)("p", {
-                        className: styles.description,
-                        children: description
-                    }),
-                    error && isTouched && (0, $4MPRY$jsx)("p", {
-                        className: styles.error,
-                        "data-cy": errorDataCy,
-                        children: error
-                    })
-                ]
+            (0, $4MPRY$jsx)((0, $3b70ba41b110d1fa$export$2e2bcd8739ae039), {
+                name: name,
+                hint: hint,
+                error: error,
+                isTouched: isTouched,
+                styles: styles,
+                type: type
             })
         ]
     });
@@ -1986,13 +2185,11 @@ https://www.npmjs.com/package/react-tailwindcss-select
 
 
 
+
 var $9ff97c477ac85f31$var$base = {
     container: '',
-    head: 'flex justify-between',
     body: 'relative rounded-md',
     foot: '',
-    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',
     input: 'block w-full flex border',
     menuButton: '',
@@ -2019,8 +2216,6 @@ var $9ff97c477ac85f31$var$leading = {
 };
 var $9ff97c477ac85f31$var$trailing = {};
 var $9ff97c477ac85f31$var$normal = {
-    label: 'leading-6 text-sm mb-2',
-    hint: 'leading-6',
     leading: 'pl-3',
     input: 'rounded-md border-gray-200 shadow-xs focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
     trailing: '',
@@ -2028,21 +2223,15 @@ var $9ff97c477ac85f31$var$normal = {
 };
 var $9ff97c477ac85f31$var$inset = {
     container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-xs ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
-    label: 'text-xs',
-    hint: 'text-xs',
     input: 'border-0 ring-0! p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
     description: 'hidden'
 };
 var $9ff97c477ac85f31$var$overlapping = {
     container: 'relative',
-    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
-    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
-    hint: 'text-xs mr-4 bg-white px-1',
     input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
     description: 'hidden'
 };
 var $9ff97c477ac85f31$var$pill = {
-    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
     foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
     input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
     trailing: 'pr-2',
@@ -2050,7 +2239,6 @@ var $9ff97c477ac85f31$var$pill = {
 };
 var $9ff97c477ac85f31$var$floored = {
     body: 'relative mt-2',
-    label: 'block text-sm font-medium leading-6 text-gray-900',
     input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
     description: 'text-xs mt-2'
 };
@@ -2080,9 +2268,9 @@ var $9ff97c477ac85f31$export$2e2bcd8739ae039 = $9ff97c477ac85f31$var$styles;
 
 var $40038b27a5148d69$var$SelectMenuForm = function(props) {
     var _a;
-    var _b = props.name, name = _b === void 0 ? 'select-menu-form' : _b, label = props.label, description = props.description, placeholder = props.placeholder, options = props.options, required = props.required, value = props.value, error = props.error, _c = props.isRequired, isRequired = _c === void 0 ? false : _c, isLoading = props.isLoading, _d = props.isTouched, isTouched = _d === void 0 ? false : _d, isDisabled = props.isDisabled, _e = props.isClearable, isClearable = _e === void 0 ? true : _e, _f = props.isMultiple, isMultiple = _f === void 0 ? false : _f, _g = props.isSearchable, isSearchable = _g === void 0 ? true : _g, _h = props.isSolo, isSolo = _h === void 0 ? false : _h, onChange = props.onChange, onSearchInputChange = props.onSearchInputChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
-    var _j = (0, $4MPRY$useState)(true), isFocus = _j[0], setIsFocus = _j[1];
-    var _k = (0, $4MPRY$useState)(value !== null && value !== void 0 ? value : null), state = _k[0], setState = _k[1];
+    var _b = props.name, name = _b === void 0 ? 'select-menu-form' : _b, label = props.label, description = props.description, placeholder = props.placeholder, options = props.options, required = props.required, value = props.value, error = props.error, _c = props.isRequired, isRequired = _c === void 0 ? false : _c, isLoading = props.isLoading, _d = props.isTouched, isTouched = _d === void 0 ? false : _d, isDisabled = props.isDisabled, _e = props.isClearable, isClearable = _e === void 0 ? true : _e, _f = props.isMultiple, isMultiple = _f === void 0 ? false : _f, _g = props.isSearchable, isSearchable = _g === void 0 ? true : _g, _h = props.isSolo, isSolo = _h === void 0 ? false : _h, _j = props.isOptionalLabelHidden, isOptionalLabelHidden = _j === void 0 ? false : _j, onChange = props.onChange, onSearchInputChange = props.onSearchInputChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var _k = (0, $4MPRY$useState)(true), isFocus = _k[0], setIsFocus = _k[1];
+    var _l = (0, $4MPRY$useState)(value !== null && value !== void 0 ? value : null), state = _l[0], setState = _l[1];
     var isValid = error === undefined;
     var selectDataCy = "form-select-".concat(name);
     var errorDataCy = "form-select-error-".concat(name);
@@ -2120,25 +2308,28 @@ var $40038b27a5148d69$var$SelectMenuForm = function(props) {
     }, [
         value
     ]);
+    var descriptionElement = (0, $4MPRY$useMemo)(function() {
+        if (!description || error && isTouched) return null;
+        return (0, $4MPRY$jsx)("p", {
+            className: styles.description,
+            children: description
+        });
+    }, [
+        description,
+        error,
+        isTouched,
+        styles.description
+    ]);
     return (0, $4MPRY$jsxs)("div", {
         className: styles.container,
         children: [
-            (0, $4MPRY$jsxs)("div", {
-                className: styles.head,
-                children: [
-                    label && (0, $4MPRY$jsx)("label", {
-                        htmlFor: name,
-                        className: styles.label,
-                        children: label
-                    }),
-                    !required && !isRequired && typeof label === 'string' && (0, $4MPRY$jsx)("span", {
-                        className: styles.hint,
-                        children: "Optional"
-                    }),
-                    required && required({
-                        isRequired: isRequired
-                    })
-                ]
+            (0, $4MPRY$jsx)((0, $38b37a8c0b4bec9d$export$2e2bcd8739ae039), {
+                name: name,
+                label: label,
+                required: required,
+                isRequired: isRequired,
+                isOptionalLabelHidden: isOptionalLabelHidden,
+                styles: styles
             }),
             (0, $4MPRY$jsxs)("div", {
                 className: styles.container,
@@ -2194,10 +2385,7 @@ var $40038b27a5148d69$var$SelectMenuForm = function(props) {
                     !isSolo && (0, $4MPRY$jsxs)("div", {
                         className: styles.foot,
                         children: [
-                            description && !(error && isTouched) && (0, $4MPRY$jsx)("p", {
-                                className: styles.description,
-                                children: description
-                            }),
+                            descriptionElement,
                             error && isTouched && (0, $4MPRY$jsx)("p", {
                                 className: styles.error,
                                 "data-cy": errorDataCy,
@@ -5343,63 +5531,33 @@ var $4e61e073e8ab55ca$export$8649d02bd537ff66 = function(dates) {
 https://github.com/onesine/react-tailwindcss-datepicker
 */ var $e0c8c7fe3fab83be$var$base = {
     container: '',
-    head: 'flex justify-between',
-    body: 'relative rounded-md',
-    foot: '',
-    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',
     inputWrapper: '',
-    input: 'w-full inline-flex',
-    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
-    description: 'text-gray-400 text-xs mt-1',
-    error: 'text-red-500 text-xs ml-5 mt-1'
+    input: 'w-full inline-flex'
 };
 var $e0c8c7fe3fab83be$var$leading = {
     input: 'pl-10'
 };
 var $e0c8c7fe3fab83be$var$trailing = {};
 var $e0c8c7fe3fab83be$var$normal = {
-    label: 'leading-6 text-sm mb-2',
-    hint: 'leading-6',
-    leading: 'pl-3',
-    input: 'rounded-md border-gray-200 shadow-xs focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
-    trailing: 'pr-3',
-    description: 'mt-2 text-sm'
+    input: 'rounded-md border-gray-200 shadow-xs focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300'
 };
 var $e0c8c7fe3fab83be$var$inset = {
     container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-xs ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
-    label: 'text-xs',
-    hint: 'text-xs',
-    input: 'border-0 ring-0! p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
-    description: 'hidden'
+    input: 'border-0 ring-0! p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0'
 };
 var $e0c8c7fe3fab83be$var$overlapping = {
     container: 'relative',
-    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
-    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
-    hint: 'text-xs mr-4 bg-white px-1',
-    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    description: 'hidden'
+    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6'
 };
 var $e0c8c7fe3fab83be$var$pill = {
-    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
-    foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
-    input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    trailing: 'pr-2',
-    description: 'text-xs'
+    input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6'
 };
 var $e0c8c7fe3fab83be$var$floored = {
-    body: 'relative mt-2',
-    label: 'block text-sm font-medium leading-6 text-gray-900',
-    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
-    description: 'text-xs mt-2'
+    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0'
 };
 var $e0c8c7fe3fab83be$var$invalid = {
     container: 'ring-red-500!',
-    input: // 'block w-full border border-transparent text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:leading-6 pr-10',
-    'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10',
-    description: 'text-sm text-red-600'
+    input: 'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10'
 };
 var $e0c8c7fe3fab83be$var$disabled = {
     input: 'block w-full rounded-md border-0 text-gray-900 shadow-xs ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200'
@@ -5428,21 +5586,22 @@ var $e0c8c7fe3fab83be$export$2e2bcd8739ae039 = $e0c8c7fe3fab83be$var$styles;
 
 
 
+
+
 var $00ca07f933061d8a$var$DateRangeMenu = function(props) {
-    var _a;
-    var _b = props.name, name = _b === void 0 ? 'date-menu-form' : _b, _c = props.size, size = _c === void 0 ? 'compact' : _c, label = props.label, _d = props.i18n, i18n = _d === void 0 ? 'en' : _d, description = props.description, placeholder = props.placeholder, separator = props.separator, startFrom = props.startFrom, _e = props.displayFormat, displayFormat = _e === void 0 ? 'DD.MM.YYYY' : _e, _f = props.direction, direction = _f === void 0 ? 'down' : _f, minDate = props.minDate, maxDate = props.maxDate, _g = props.startWeekOn, startWeekOn = _g === void 0 ? 'mon' : _g, _h = props.icon, icon = _h === void 0 ? function(isEmpty) {
+    var _a = props.name, name = _a === void 0 ? 'date-menu-form' : _a, _b = props.size, size = _b === void 0 ? 'compact' : _b, label = props.label, _c = props.i18n, i18n = _c === void 0 ? 'en' : _c, description = props.description, hint = props.hint, placeholder = props.placeholder, separator = props.separator, startFrom = props.startFrom, _d = props.displayFormat, displayFormat = _d === void 0 ? 'DD.MM.YYYY' : _d, _e = props.direction, direction = _e === void 0 ? 'down' : _e, minDate = props.minDate, maxDate = props.maxDate, _f = props.startWeekOn, startWeekOn = _f === void 0 ? 'mon' : _f, _g = props.icon, icon = _g === void 0 ? function(isEmpty) {
         return isEmpty ? (0, $4MPRY$jsx)((0, $77cd4416ca4a0639$export$2e2bcd8739ae039), {
             accessor: "calendar"
         }) : (0, $4MPRY$jsx)((0, $77cd4416ca4a0639$export$2e2bcd8739ae039), {
             accessor: "xmark",
             className: "text-black"
         });
-    } : _h, required = props.required, defaultValue = props.value, error = props.error, _j = props.type, type = _j === void 0 ? 'normal' : _j, _k = props.isRequired, isRequired = _k === void 0 ? false : _k, _l = props.isTouched, isTouched = _l === void 0 ? false : _l, isDisabled = props.isDisabled, _m = props.isSolo, isSolo = _m === void 0 ? false : _m, _o = props.isRanged, isRanged = _o === void 0 ? true : _o, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, onClick = props.onClick, stylesOverrides = props.styles;
+    } : _g, required = props.required, defaultValue = props.value, error = props.error, _h = props.type, type = _h === void 0 ? 'normal' : _h, _j = props.isRequired, isRequired = _j === void 0 ? false : _j, _k = props.isTouched, isTouched = _k === void 0 ? false : _k, isDisabled = props.isDisabled, _l = props.isSolo, isSolo = _l === void 0 ? false : _l, _m = props.isRanged, isRanged = _m === void 0 ? true : _m, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, onClick = props.onClick, stylesOverrides = props.styles;
     var isValid = error === undefined;
-    var _p = (0, $4MPRY$useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {
+    var _o = (0, $4MPRY$useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {
         startDate: null,
         endDate: null
-    }), state = _p[0], setState = _p[1];
+    }), state = _o[0], setState = _o[1];
     var $datepickerInputRef = (0, $4MPRY$useRef)(null);
     var handleValueChange = (0, $4MPRY$useCallback)(function(newValue) {
         setState(newValue);
@@ -5459,15 +5618,14 @@ var $00ca07f933061d8a$var$DateRangeMenu = function(props) {
     ]);
     var handleGenerateStyle = function() {
         var result = (0, $b3fc44f26b625a32$export$e2d2075c69d9100d)((0, $e0c8c7fe3fab83be$export$2e2bcd8739ae039).base);
-        var keys = (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $e0c8c7fe3fab83be$export$2e2bcd8739ae039).base);
+        var keys = (0, $4MPRY$concat)((0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $e0c8c7fe3fab83be$export$2e2bcd8739ae039).base), (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $26a2a503969671d2$export$2e2bcd8739ae039).base), (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $495392c79d755f40$export$2e2bcd8739ae039).base));
         keys.forEach(function(key) {
             (0, $4MPRY$set)(result, key, (0, $66c3dcaaa74b5389$export$4370d69198e9314a)((0, $4MPRY$get)((0, $e0c8c7fe3fab83be$export$2e2bcd8739ae039).base, key), type && (0, $4MPRY$get)((0, $e0c8c7fe3fab83be$export$2e2bcd8739ae039)[type], key), isTouched === true && !isValid && (0, $4MPRY$get)((0, $e0c8c7fe3fab83be$export$2e2bcd8739ae039).invalid, key), isDisabled && (0, $4MPRY$get)((0, $e0c8c7fe3fab83be$export$2e2bcd8739ae039).disabled, key), (0, $4MPRY$get)(stylesOverrides, key)));
         });
         return result;
     };
     var styles = handleGenerateStyle();
-    var inputDataCy = "form-date-".concat(name);
-    var errorDataCy = "form-date-error-".concat(name);
+    var inputDataCy = "form-input-".concat(name);
     // listen to value changes.
     (0, $4MPRY$useEffect)(function() {
         setState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {
@@ -5513,22 +5671,14 @@ var $00ca07f933061d8a$var$DateRangeMenu = function(props) {
     return (0, $4MPRY$jsxs)("div", {
         className: styles.container,
         children: [
-            (0, $4MPRY$jsxs)("div", {
-                className: styles.head,
-                children: [
-                    label && (0, $4MPRY$jsx)("label", {
-                        htmlFor: name,
-                        className: styles.label,
-                        children: label
-                    }),
-                    !required && !isRequired && typeof label === 'string' && (0, $4MPRY$jsx)("span", {
-                        className: styles.hint,
-                        children: "Optional"
-                    }),
-                    required && required({
-                        isRequired: isRequired
-                    })
-                ]
+            (0, $4MPRY$jsx)((0, $38b37a8c0b4bec9d$export$2e2bcd8739ae039), {
+                name: name,
+                type: type,
+                label: label,
+                description: description,
+                required: required,
+                isRequired: isRequired,
+                styles: styles
             }),
             (0, $4MPRY$jsxs)("div", {
                 className: styles.inputWrapper,
@@ -5559,19 +5709,13 @@ var $00ca07f933061d8a$var$DateRangeMenu = function(props) {
                         inputClassName: styles.input,
                         startWeekOn: startWeekOn
                     }),
-                    !isSolo && (0, $4MPRY$jsxs)("div", {
-                        className: styles.foot,
-                        children: [
-                            description && !(error && isTouched) && (0, $4MPRY$jsx)("p", {
-                                className: styles.description,
-                                children: description
-                            }),
-                            error && isTouched && (0, $4MPRY$jsx)("p", {
-                                className: styles.error,
-                                "data-cy": errorDataCy,
-                                children: typeof error === 'string' ? error : (_a = error === null || error === void 0 ? void 0 : error.startDate) !== null && _a !== void 0 ? _a : error === null || error === void 0 ? void 0 : error.endDate
-                            })
-                        ]
+                    (0, $4MPRY$jsx)((0, $3b70ba41b110d1fa$export$2e2bcd8739ae039), {
+                        isHidden: isSolo,
+                        name: name,
+                        error: error,
+                        isTouched: isTouched,
+                        hint: hint,
+                        styles: styles
                     })
                 ]
             })
@@ -5870,13 +6014,10 @@ var $785bf8949af26aa5$export$2e2bcd8739ae039 = $785bf8949af26aa5$var$CheckboxInp
 
 
 
+
 var $f0d9d349d6a2ba53$var$base = {
-    label: 'block font-medium text-gray-900 leading-6 text-sm mb-2 mr-1',
     container: 'flex flex-col',
-    head: 'flex justify-between',
-    hint: 'text-xs text-gray-500',
     foot: 'flex flex-col',
-    description: 'text-gray-400 text-xs mt-1',
     switch: {
         container: 'flex flex-col',
         base: 'relative inline-flex w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
@@ -5895,8 +6036,7 @@ var $f0d9d349d6a2ba53$var$base = {
         hidden: 'opacity-0 ease-out duration-100',
         shown: 'opacity-100 ease-in duration-200',
         icon: 'h-3 w-3'
-    },
-    error: 'text-red-500 text-xs ml-0 mt-2'
+    }
 };
 var $f0d9d349d6a2ba53$var$md = {
     switch: {
@@ -5924,80 +6064,28 @@ var $f0d9d349d6a2ba53$export$2e2bcd8739ae039 = $f0d9d349d6a2ba53$var$styles;
 
 
 var $10ded3c19afe27a9$var$Switch = function(props) {
-    var name = props.name, label = props.label, description = props.description, isDisabled = props.isDisabled, _a = props.isRequired, isRequired = _a === void 0 ? false : _a, required = props.required, _b = props.isTouched, isTouched = _b === void 0 ? false : _b, error = props.error, value = props.value, stylesOverrides = props.styles, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.isOptionalLabelHidden, isOptionalLabelHidden = _d === void 0 ? false : _d, onChange = props.onChange, iconAccessorChecked = props.iconAccessorChecked, iconAccessorUnchecked = props.iconAccessorUnchecked;
+    var name = props.name, label = props.label, description = props.description, hint = props.hint, isDisabled = props.isDisabled, _a = props.isRequired, isRequired = _a === void 0 ? false : _a, required = props.required, _b = props.isTouched, isTouched = _b === void 0 ? false : _b, error = props.error, value = props.value, stylesOverrides = props.styles, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.isOptionalLabelHidden, isOptionalLabelHidden = _d === void 0 ? false : _d, onChange = props.onChange, iconAccessorChecked = props.iconAccessorChecked, iconAccessorUnchecked = props.iconAccessorUnchecked;
     var inputDataCy = "form-input-".concat(name);
-    var errorDataCy = "form-input-error-".concat(name);
     var handleGenerateStyle = function() {
         var result = (0, $b3fc44f26b625a32$export$e2d2075c69d9100d)((0, $f0d9d349d6a2ba53$export$2e2bcd8739ae039).base);
-        var keys = (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $f0d9d349d6a2ba53$export$2e2bcd8739ae039).base);
+        var keys = (0, $4MPRY$concat)((0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $f0d9d349d6a2ba53$export$2e2bcd8739ae039).base), (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $26a2a503969671d2$export$2e2bcd8739ae039).base), (0, $ba1db6dce71c3f25$export$be5d6ab3c5b84767)((0, $495392c79d755f40$export$2e2bcd8739ae039).base));
         (0, $4MPRY$forEach)(keys, function(key) {
-            (0, $4MPRY$set)(result, key, (0, $66c3dcaaa74b5389$export$4370d69198e9314a)((0, $4MPRY$get)((0, $f0d9d349d6a2ba53$export$2e2bcd8739ae039).base, key), (0, $4MPRY$get)((0, $f0d9d349d6a2ba53$export$2e2bcd8739ae039)[size], key), (0, $4MPRY$get)(stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.base, key), (0, $4MPRY$get)(stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides[size], key)));
+            (0, $4MPRY$set)(result, key, (0, $66c3dcaaa74b5389$export$4370d69198e9314a)((0, $4MPRY$get)((0, $f0d9d349d6a2ba53$export$2e2bcd8739ae039).base, key), (0, $4MPRY$get)((0, $f0d9d349d6a2ba53$export$2e2bcd8739ae039)[size], key), (0, $4MPRY$get)(stylesOverrides, key)));
         });
         return result;
     };
     var styles = handleGenerateStyle();
-    var labelComponent = (0, $4MPRY$useMemo)(function() {
-        if (!label) return null;
-        return (0, $4MPRY$jsx)("label", {
-            htmlFor: name,
-            className: styles.label,
-            children: label
-        });
-    }, [
-        label,
-        name,
-        styles.label
-    ]);
-    var optionalLabelComponent = (0, $4MPRY$useMemo)(function() {
-        if (required || isRequired || typeof label !== 'string' || isOptionalLabelHidden) return null;
-        return (0, $4MPRY$jsx)("span", {
-            className: styles.hint,
-            children: "Optional"
-        });
-    }, [
-        isOptionalLabelHidden,
-        isRequired,
-        label,
-        required,
-        styles.hint
-    ]);
-    var footComponent = (0, $4MPRY$useMemo)(function() {
-        if (!description && !error) return null;
-        return (0, $4MPRY$jsxs)("div", {
-            className: styles.foot,
-            children: [
-                description && !(error && isTouched) && (0, $4MPRY$jsx)("p", {
-                    className: styles.description,
-                    children: description
-                }),
-                error && isTouched && (0, $4MPRY$jsx)("p", {
-                    className: styles.error,
-                    "data-cy": errorDataCy,
-                    children: error
-                })
-            ]
-        });
-    }, [
-        description,
-        error,
-        errorDataCy,
-        isTouched,
-        styles.description,
-        styles.error,
-        styles.foot
-    ]);
     return (0, $4MPRY$jsxs)("div", {
         className: styles.container,
         children: [
-            (0, $4MPRY$jsxs)("div", {
-                className: styles.head,
-                children: [
-                    labelComponent,
-                    optionalLabelComponent,
-                    required && required({
-                        isRequired: isRequired
-                    })
-                ]
+            (0, $4MPRY$jsx)((0, $38b37a8c0b4bec9d$export$2e2bcd8739ae039), {
+                name: name,
+                label: label,
+                description: description,
+                required: required,
+                isRequired: isRequired,
+                isOptionalLabelHidden: isOptionalLabelHidden,
+                styles: styles
             }),
             (0, $4MPRY$jsx)("div", {
                 className: styles.switch.container,
@@ -6039,7 +6127,13 @@ var $10ded3c19afe27a9$var$Switch = function(props) {
                     ]
                 })
             }),
-            footComponent
+            (0, $4MPRY$jsx)((0, $3b70ba41b110d1fa$export$2e2bcd8739ae039), {
+                name: name,
+                error: error,
+                isTouched: isTouched,
+                hint: hint,
+                styles: styles
+            })
         ]
     });
 };
@@ -6056,7 +6150,7 @@ var $10ded3c19afe27a9$export$2e2bcd8739ae039 = $10ded3c19afe27a9$var$Switch;
 var $43437b181b294db2$var$base = {
     container: '',
     head: 'flex justify-between',
-    body: 'relative rounded-md py-2',
+    body: 'relative rounded-md my-2 cursor-pointer',
     foot: '',
     label: 'block font-medium text-gray-900',
     hint: 'text-xs text-gray-500',
@@ -6268,6 +6362,83 @@ var $b1b6aa72505b2474$export$2e2bcd8739ae039 = $b1b6aa72505b2474$var$FileInputGr
 
 
 
+var $2109d011c77499b4$var$base = {
+    container: '',
+    head: 'flex justify-between',
+    body: 'relative rounded-md py-2',
+    foot: '',
+    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',
+    input: 'block w-full',
+    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
+    description: 'text-gray-400 text-xs mt-1',
+    error: 'text-red-500 text-xs mt-1'
+};
+var $2109d011c77499b4$var$leading = {
+    input: 'pl-10'
+};
+var $2109d011c77499b4$var$trailing = {};
+var $2109d011c77499b4$var$normal = {
+    label: 'leading-6 text-sm mb-2',
+    hint: 'leading-6',
+    leading: 'pl-3',
+    input: 'rounded-md border-gray-200 shadow-xs focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
+    trailing: 'pr-3',
+    description: 'mt-2 text-sm'
+};
+var $2109d011c77499b4$var$inset = {
+    container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-xs ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
+    label: 'text-xs',
+    hint: 'text-xs',
+    input: 'border-0 ring-0! p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
+    description: 'hidden'
+};
+var $2109d011c77499b4$var$overlapping = {
+    container: 'relative',
+    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
+    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
+    hint: 'text-xs mr-4 bg-white px-1',
+    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
+    description: 'hidden'
+};
+var $2109d011c77499b4$var$pill = {
+    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
+    foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
+    input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
+    trailing: 'pr-2',
+    description: 'text-xs'
+};
+var $2109d011c77499b4$var$floored = {
+    body: 'relative mt-2',
+    label: 'block text-sm font-medium leading-6 text-gray-900',
+    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
+    description: 'text-xs mt-2'
+};
+var $2109d011c77499b4$var$invalid = {
+    container: 'ring-red-500',
+    input: // 'block w-full border border-transparent text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:leading-6 pr-10',
+    'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10',
+    description: 'text-sm text-red-600'
+};
+var $2109d011c77499b4$var$disabled = {
+    input: 'block w-full rounded-md border-0 text-gray-900 shadow-xs ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200'
+};
+var $2109d011c77499b4$var$styles = {
+    base: $2109d011c77499b4$var$base,
+    leading: $2109d011c77499b4$var$leading,
+    trailing: $2109d011c77499b4$var$trailing,
+    normal: $2109d011c77499b4$var$normal,
+    inset: $2109d011c77499b4$var$inset,
+    overlapping: $2109d011c77499b4$var$overlapping,
+    pill: $2109d011c77499b4$var$pill,
+    floored: $2109d011c77499b4$var$floored,
+    invalid: $2109d011c77499b4$var$invalid,
+    disabled: $2109d011c77499b4$var$disabled
+};
+var $2109d011c77499b4$export$2e2bcd8739ae039 = $2109d011c77499b4$var$styles;
+
+
 
 
 
@@ -6578,83 +6749,6 @@ var $99ef0e378c886c3a$export$2e2bcd8739ae039 = $99ef0e378c886c3a$var$styles;
 
 
 
-var $2109d011c77499b4$var$base = {
-    container: '',
-    head: 'flex justify-between',
-    body: 'relative rounded-md py-2',
-    foot: '',
-    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',
-    input: 'block w-full',
-    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
-    description: 'text-gray-400 text-xs mt-1',
-    error: 'text-red-500 text-xs mt-1'
-};
-var $2109d011c77499b4$var$leading = {
-    input: 'pl-10'
-};
-var $2109d011c77499b4$var$trailing = {};
-var $2109d011c77499b4$var$normal = {
-    label: 'leading-6 text-sm mb-2',
-    hint: 'leading-6',
-    leading: 'pl-3',
-    input: 'rounded-md border-gray-200 shadow-xs focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
-    trailing: 'pr-3',
-    description: 'mt-2 text-sm'
-};
-var $2109d011c77499b4$var$inset = {
-    container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-xs ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
-    label: 'text-xs',
-    hint: 'text-xs',
-    input: 'border-0 ring-0! p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
-    description: 'hidden'
-};
-var $2109d011c77499b4$var$overlapping = {
-    container: 'relative',
-    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
-    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
-    hint: 'text-xs mr-4 bg-white px-1',
-    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    description: 'hidden'
-};
-var $2109d011c77499b4$var$pill = {
-    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
-    foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
-    input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    trailing: 'pr-2',
-    description: 'text-xs'
-};
-var $2109d011c77499b4$var$floored = {
-    body: 'relative mt-2',
-    label: 'block text-sm font-medium leading-6 text-gray-900',
-    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
-    description: 'text-xs mt-2'
-};
-var $2109d011c77499b4$var$invalid = {
-    container: 'ring-red-500',
-    input: // 'block w-full border border-transparent text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:leading-6 pr-10',
-    'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10',
-    description: 'text-sm text-red-600'
-};
-var $2109d011c77499b4$var$disabled = {
-    input: 'block w-full rounded-md border-0 text-gray-900 shadow-xs ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200'
-};
-var $2109d011c77499b4$var$styles = {
-    base: $2109d011c77499b4$var$base,
-    leading: $2109d011c77499b4$var$leading,
-    trailing: $2109d011c77499b4$var$trailing,
-    normal: $2109d011c77499b4$var$normal,
-    inset: $2109d011c77499b4$var$inset,
-    overlapping: $2109d011c77499b4$var$overlapping,
-    pill: $2109d011c77499b4$var$pill,
-    floored: $2109d011c77499b4$var$floored,
-    invalid: $2109d011c77499b4$var$invalid,
-    disabled: $2109d011c77499b4$var$disabled
-};
-var $2109d011c77499b4$export$2e2bcd8739ae039 = $2109d011c77499b4$var$styles;
-
-
 var $39e9223269e270c7$var$OpeningsHourInputGroupForm = function(props) {
     var form = props.form, _a = props.name, name = _a === void 0 ? 'opening-hours-input' : _a, label = props.label, description = props.description, required = props.required, value = props.value, error = props.error, lang = props.lang, isDisabled = props.isDisabled, _b = props.isRequired, isRequired = _b === void 0 ? false : _b, _c = props.isTouched, isTouched = _c === void 0 ? false : _c, onChange = props.onChange, stylesOverrides = props.styles, handleDelete = props.handleDelete;
     var isValid = error === undefined;