@northlight/ui 2.12.2 → 2.12.3

package/dist/umd/northlight.cjs

@@ -454,8 +454,8 @@
   };
 
   var __defProp$25 = Object.defineProperty;
-  var __defProps$y = Object.defineProperties;
-  var __getOwnPropDescs$y = Object.getOwnPropertyDescriptors;
+  var __defProps$z = Object.defineProperties;
+  var __getOwnPropDescs$z = Object.getOwnPropertyDescriptors;
   var __getOwnPropSymbols$25 = Object.getOwnPropertySymbols;
   var __hasOwnProp$25 = Object.prototype.hasOwnProperty;
   var __propIsEnum$25 = Object.prototype.propertyIsEnumerable;
@@ -471,43 +471,43 @@
       }
     return a;
   };
-  var __spreadProps$y = (a, b) => __defProps$y(a, __getOwnPropDescs$y(b));
+  var __spreadProps$z = (a, b) => __defProps$z(a, __getOwnPropDescs$z(b));
   const customSelectStyles = {
-    container: (provided) => __spreadProps$y(__spreadValues$25({}, provided), {
+    container: (provided) => __spreadProps$z(__spreadValues$25({}, provided), {
       width: "100%",
       color: "text.default"
     }),
-    option: (provided, state) => __spreadProps$y(__spreadValues$25({}, provided), {
+    option: (provided, state) => __spreadProps$z(__spreadValues$25({}, provided), {
       background: state.isFocused && "background.select.option-focus",
       _active: {
         background: "background.select.option-active"
       }
     }),
-    valueContainer: (provided) => __spreadProps$y(__spreadValues$25({}, provided), {
+    valueContainer: (provided) => __spreadProps$z(__spreadValues$25({}, provided), {
       paddingInlineStart: "padding-inline.select.default"
     }),
-    downChevron: (provided) => __spreadProps$y(__spreadValues$25({}, provided), {
+    downChevron: (provided) => __spreadProps$z(__spreadValues$25({}, provided), {
       color: "icon.select.default"
     }),
-    placeholder: (provided) => __spreadProps$y(__spreadValues$25({}, provided), {
+    placeholder: (provided) => __spreadProps$z(__spreadValues$25({}, provided), {
       color: "text.select.placeholder"
     }),
     multiValue: (provided, state) => {
       var _a;
       const background = state.data.isFixed ? "background.select.option-disabled" : (_a = state.data.color) != null ? _a : provided.bgColor;
-      return __spreadProps$y(__spreadValues$25({}, provided), {
+      return __spreadProps$z(__spreadValues$25({}, provided), {
         bgColor: background,
         color: getContrastColor(background)
       });
     },
-    menuList: (provided) => __spreadProps$y(__spreadValues$25({}, provided), {
+    menuList: (provided) => __spreadProps$z(__spreadValues$25({}, provided), {
       bgColor: "background.default"
     })
   };
 
   var __defProp$24 = Object.defineProperty;
-  var __defProps$x = Object.defineProperties;
-  var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
+  var __defProps$y = Object.defineProperties;
+  var __getOwnPropDescs$y = Object.getOwnPropertyDescriptors;
   var __getOwnPropSymbols$24 = Object.getOwnPropertySymbols;
   var __hasOwnProp$24 = Object.prototype.hasOwnProperty;
   var __propIsEnum$24 = Object.prototype.propertyIsEnumerable;
@@ -523,9 +523,9 @@
       }
     return a;
   };
-  var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
-  const tagsInputStyles = (isFocused, borderColor) => __spreadProps$x(__spreadValues$24({}, customSelectStyles), {
-    container: (provided) => __spreadProps$x(__spreadValues$24({}, provided), {
+  var __spreadProps$y = (a, b) => __defProps$y(a, __getOwnPropDescs$y(b));
+  const tagsInputStyles = (isFocused, borderColor) => __spreadProps$y(__spreadValues$24({}, customSelectStyles), {
+    container: (provided) => __spreadProps$y(__spreadValues$24({}, provided), {
       w: "full",
       height: "100%",
       resize: "vertical",
@@ -538,12 +538,12 @@
       color: "text.default",
       boxShadow: isFocused ? `0 0 0 1px ${borderColor}` : "none"
     }),
-    control: (provided) => __spreadProps$x(__spreadValues$24({}, provided), {
+    control: (provided) => __spreadProps$y(__spreadValues$24({}, provided), {
       minHeight: "20",
       height: "100%",
       alignItems: "start"
     }),
-    valueContainer: (provided) => __spreadProps$x(__spreadValues$24({}, provided), {
+    valueContainer: (provided) => __spreadProps$y(__spreadValues$24({}, provided), {
       paddingInlineStart: "padding-inline.select.default",
       overflowY: "auto",
       maxH: "100%"
@@ -551,8 +551,8 @@
   });
 
   var __defProp$23 = Object.defineProperty;
-  var __defProps$w = Object.defineProperties;
-  var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
+  var __defProps$x = Object.defineProperties;
+  var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
   var __getOwnPropSymbols$23 = Object.getOwnPropertySymbols;
   var __hasOwnProp$23 = Object.prototype.hasOwnProperty;
   var __propIsEnum$23 = Object.prototype.propertyIsEnumerable;
@@ -568,7 +568,7 @@
       }
     return a;
   };
-  var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
+  var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
   var __objRest$1w = (source, exclude) => {
     var target = {};
     for (var prop in source)
@@ -657,7 +657,7 @@
     };
     return /* @__PURE__ */ React.createElement(react.Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
       CustomSelect,
-      __spreadValues$23(__spreadProps$w(__spreadValues$23({
+      __spreadValues$23(__spreadProps$x(__spreadValues$23({
         isMulti: true,
         menuPortalTarget: document.body,
         placeholder: "Type something and press Enter or comma...",
@@ -1511,7 +1511,7 @@
       }
     return target;
   };
-  const Label$1 = (_a) => {
+  const Label$1 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       size = "sm",
@@ -1526,11 +1526,12 @@
       react.FormLabel,
       __spreadValues$1N({
         sx: styles,
-        requiredIndicator: /* @__PURE__ */ React.createElement(react.VisuallyHidden, null)
+        requiredIndicator: /* @__PURE__ */ React.createElement(react.VisuallyHidden, null),
+        ref
       }, rest),
       children
     );
-  };
+  });
 
   const positiveOrZero = ramda.ifElse(ramda.gt(0), ramda.always(0), ramda.identity);
   const EMPTY_RECT = {
@@ -1903,6 +1904,8 @@
   });
 
   var __defProp$1G = Object.defineProperty;
+  var __defProps$w = Object.defineProperties;
+  var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
   var __getOwnPropSymbols$1G = Object.getOwnPropertySymbols;
   var __hasOwnProp$1G = Object.prototype.hasOwnProperty;
   var __propIsEnum$1G = Object.prototype.propertyIsEnumerable;
@@ -1918,6 +1921,7 @@
       }
     return a;
   };
+  var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
   var __objRest$19 = (source, exclude) => {
     var target = {};
     for (var prop in source)
@@ -1930,7 +1934,7 @@
       }
     return target;
   };
-  const FormLabel = (_a) => {
+  const FormLabel = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children: label
     } = _b, rest = __objRest$19(_b, [
@@ -1938,7 +1942,7 @@
     ]);
     return /* @__PURE__ */ React.createElement(
       Label$1,
-      __spreadValues$1G({
+      __spreadProps$w(__spreadValues$1G({
         size: "sm",
         sx: {
           width: "80%",
@@ -1947,10 +1951,12 @@
           marginInlineEnd: 3
         },
         requiredIndicator: void 0
-      }, rest),
+      }, rest), {
+        ref
+      }),
       label
     );
-  };
+  });
 
   var __defProp$1F = Object.defineProperty;
   var __getOwnPropSymbols$1F = Object.getOwnPropertySymbols;
@@ -1980,7 +1986,7 @@
       }
     return target;
   };
-  function Field(_a) {
+  const BaseField = (_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -2004,7 +2010,7 @@
     const { formState: { errors } } = methods;
     const control = passedControl != null ? passedControl : methods.control;
     const fieldError = getFieldError(name, errors);
-    return /* @__PURE__ */ React.createElement(react.FormControl, { isInvalid: !!fieldError, isRequired }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react.FormControl, { isInvalid: !!fieldError, isRequired, ref }, /* @__PURE__ */ React.createElement(
       react.Stack,
       __spreadValues$1F({
         spacing: "auto",
@@ -2022,7 +2028,8 @@
         }
       )
     ), /* @__PURE__ */ React.createElement(react.FormErrorMessage, null, fieldError && (fieldError == null ? void 0 : fieldError.message)));
-  }
+  };
+  const Field = React.forwardRef(BaseField);
 
   const useSetValueRefreshed = () => {
     const { setValue, watch } = reactHookForm.useFormContext();
@@ -2061,7 +2068,7 @@
       }
     return target;
   };
-  const CheckboxField = (_a) => {
+  const CheckboxField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -2096,7 +2103,8 @@
           label: "",
           isRequired,
           direction,
-          validate
+          validate,
+          ref
         },
         ({ onChange, value }) => /* @__PURE__ */ React.createElement(
           react.Flex,
@@ -2121,7 +2129,7 @@
         )
       )
     );
-  };
+  });
 
   var __defProp$1D = Object.defineProperty;
   var __getOwnPropSymbols$1D = Object.getOwnPropertySymbols;
@@ -2727,7 +2735,7 @@
       }
     return target;
   };
-  const FlipButtonGroupField = (_a) => {
+  const FlipButtonGroupField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -2754,7 +2762,8 @@
         label,
         direction,
         isRequired,
-        validate
+        validate,
+        ref
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         FlipButtonGroup,
@@ -2771,7 +2780,7 @@
         children
       )
     );
-  };
+  });
 
   var __defProp$1w = Object.defineProperty;
   var __defProps$s = Object.defineProperties;
@@ -3364,13 +3373,20 @@
             dateFormat
           })
         )
-      )), /* @__PURE__ */ React.createElement(react.InputRightElement, { zIndex: 0 }, /* @__PURE__ */ React.createElement(
-        Trigger,
-        __spreadProps$l(__spreadValues$1n({}, buttonProps), {
-          isDisabled,
-          handleClick: togglePopup
-        })
-      ))), /* @__PURE__ */ React.createElement(
+      )), /* @__PURE__ */ React.createElement(
+        react.InputRightElement,
+        {
+          sx: { height: "100%", paddingRight: "1" },
+          zIndex: 0
+        },
+        /* @__PURE__ */ React.createElement(
+          Trigger,
+          __spreadProps$l(__spreadValues$1n({}, buttonProps), {
+            isDisabled,
+            handleClick: togglePopup
+          })
+        )
+      )), /* @__PURE__ */ React.createElement(
         IconButton,
         {
           "aria-label": "reset-date",
@@ -4664,7 +4680,7 @@
             dateFormat
           })
         )
-      )), /* @__PURE__ */ React.createElement(react.InputRightElement, null, /* @__PURE__ */ React.createElement(
+      )), /* @__PURE__ */ React.createElement(react.InputRightElement, { sx: { height: "100%", paddingRight: "1" } }, /* @__PURE__ */ React.createElement(
         Trigger,
         __spreadProps$f(__spreadValues$1a({}, buttonProps), {
           isDisabled,
@@ -4775,7 +4791,7 @@
       }
     return target;
   };
-  const DatePickerField = (_a) => {
+  const DatePickerField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       minValue,
@@ -4821,7 +4837,8 @@
         label,
         direction,
         isRequired,
-        validate
+        validate,
+        ref
       },
       ({ value, onChange }, { formState: { errors } }) => /* @__PURE__ */ React.createElement(
         InputGroupWrapper,
@@ -4845,7 +4862,7 @@
         )
       )
     );
-  };
+  });
 
   var __defProp$17 = Object.defineProperty;
   var __getOwnPropSymbols$17 = Object.getOwnPropertySymbols;
@@ -4875,7 +4892,7 @@
       }
     return target;
   };
-  const DateRangePickerField = (_a) => {
+  const DateRangePickerField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       minValue,
@@ -4919,7 +4936,8 @@
         label,
         direction,
         isRequired,
-        validate
+        validate,
+        ref
       },
       ({ value, onChange }, { formState: { errors } }) => /* @__PURE__ */ React.createElement(
         DateRangePicker,
@@ -4937,7 +4955,7 @@
         }, rest)
       )
     );
-  };
+  });
 
   var __defProp$16 = Object.defineProperty;
   var __defProps$e = Object.defineProperties;
@@ -5302,7 +5320,7 @@
       }
     return target;
   };
-  const RadioGroupField = (_a) => {
+  const RadioGroupField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -5327,7 +5345,8 @@
         label,
         direction,
         isRequired,
-        validate
+        validate,
+        ref
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         RadioGroup,
@@ -5344,7 +5363,7 @@
         children
       )
     ));
-  };
+  });
 
   const carouselItemWidth = 150;
   const carouselItemSpacing = 60;
@@ -5824,7 +5843,7 @@
       }
     return target;
   };
-  const SearchBarField = (_a) => {
+  const BaseSearchBarField = (_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -5856,7 +5875,8 @@
         direction,
         isRequired,
         noLabelConnection: true,
-        validate
+        validate,
+        ref
       },
       ({ value, onChange }) => /* @__PURE__ */ React.createElement(react.HStack, { w: "full" }, /* @__PURE__ */ React.createElement(
         InputGroupWrapper,
@@ -5892,6 +5912,7 @@
       ))
     );
   };
+  const SearchBarField = React.forwardRef(BaseSearchBarField);
 
   var __defProp$V = Object.defineProperty;
   var __getOwnPropSymbols$V = Object.getOwnPropertySymbols;
@@ -6799,7 +6820,7 @@
       "leftItem"
     ]);
     const [value, setValue] = React.useState(inputValue);
-    const { input, preview } = react.useMultiStyleConfig("EditableText", { size });
+    const { input, preview } = react.useMultiStyleConfig("EditableText", { size, value });
     React.useEffect(() => {
       setValue(inputValue);
     }, [inputValue]);
@@ -10505,7 +10526,7 @@
         }
       })
     },
-    baseStyle: {
+    baseStyle: ({ value }) => ({
       controls: {
         mr: 1
       },
@@ -10515,12 +10536,13 @@
         whiteSpace: "nowrap",
         overflow: "hidden",
         paddingTop: 0,
-        paddingBottom: 0
+        paddingBottom: 0,
+        color: ramda.isNil(value) || ramda.isEmpty(value) ? "text.subdued" : "text.default"
       },
       input: {
         fontWeight: "semibold"
       }
-    }
+    })
   };
 
   const Toolbox = {
@@ -10892,7 +10914,7 @@
 
   const NumberInputStepper = ({
     includePercentage = false
-  }) => /* @__PURE__ */ React.createElement(react.NumberInputStepper, null, /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(react.Center, { bgColor: "gray.50", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P$1, null, "%")), /* @__PURE__ */ React.createElement(react.Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(react.NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
+  }) => /* @__PURE__ */ React.createElement(react.NumberInputStepper, null, /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(react.Center, { bgColor: "gray.50", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P$1, null, "%")), /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React.createElement(react.Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(react.NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
     Icon$1,
     {
       as: icons.ChevronUpSolid,
@@ -10906,7 +10928,7 @@
       color: "icon.input-stepper.default",
       boxSize: 4
     }
-  ))));
+  )))));
 
   const regex = /(9{13,}|0{13,})(\d)*$/gm;
   const advancedParseFloat = (value) => {
@@ -11028,7 +11050,7 @@
       }
     return target;
   };
-  const NumberInputField = (_a) => {
+  const NumberInputField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -11058,7 +11080,8 @@
         label,
         direction,
         isRequired,
-        validate
+        validate,
+        ref
       },
       ({ onChange, value }) => {
         const initialValue = ramda.isNil(value) || Number.isNaN(parseFloat(value)) ? "" : formatNumber(value, 100);
@@ -11087,7 +11110,7 @@
         );
       }
     );
-  };
+  });
 
   var __defProp$o = Object.defineProperty;
   var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
@@ -11214,6 +11237,49 @@
     return value;
   };
 
+  const useAdaptiveMenuPlacement = ({
+    dropdownHeightPx,
+    containerRef
+  }) => {
+    const [menuPlacement, setMenuPlacement] = React.useState("bottom");
+    const selectContainerRef = React.useRef(null);
+    const adjustMenuPlacement = () => {
+      if (ramda.isNil(selectContainerRef.current))
+        return;
+      let node = selectContainerRef.current.parentNode;
+      while (node.parentNode) {
+        const { overflowY, maxHeight, height } = getComputedStyle(node);
+        if (overflowY !== "visible" || maxHeight || height)
+          break;
+        node = node.parentNode;
+      }
+      const selectRect = selectContainerRef.current.getBoundingClientRect();
+      const containerRect = containerRef && containerRef.current ? containerRef.current.getBoundingClientRect() : node.getBoundingClientRect();
+      const pxToContainerBottom = Math.abs(
+        selectRect.bottom - containerRect.bottom
+      );
+      const pxToContainerTop = Math.abs(selectRect.top - containerRect.top);
+      const pxToWindowBottom = Math.abs(selectRect.bottom - window.innerHeight);
+      const shouldBeAtTop = dropdownHeightPx > pxToContainerBottom && pxToContainerTop > pxToContainerBottom || dropdownHeightPx > pxToWindowBottom && selectRect.top > pxToWindowBottom;
+      setMenuPlacement(shouldBeAtTop ? "top" : "bottom");
+    };
+    React.useEffect(() => {
+      adjustMenuPlacement();
+      window.addEventListener("resize", adjustMenuPlacement);
+      window.addEventListener("scroll", adjustMenuPlacement);
+      return () => {
+        window.removeEventListener("resize", adjustMenuPlacement);
+        window.addEventListener("scroll", adjustMenuPlacement);
+      };
+    }, []);
+    return { selectContainerRef, menuPlacement };
+  };
+
+  const DROPDOWN_MAX_HEIGHT = 300;
+  const DROPDOWN_MIN_HEIGHT = 55;
+  const DROPDOWN_OPTION_HEIGHT = 37;
+  const DROPDOWN_PADDING = 30;
+
   var __defProp$m = Object.defineProperty;
   var __defProps$3 = Object.defineProperties;
   var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
@@ -11258,7 +11324,9 @@
       customOption = null,
       customTag = null,
       value,
-      icon
+      icon,
+      containerRef,
+      dropdownMinHeightPx = DROPDOWN_MIN_HEIGHT
     } = _b, rest = __objRest$h(_b, [
       "options",
       "isMulti",
@@ -11271,7 +11339,9 @@
       "customOption",
       "customTag",
       "value",
-      "icon"
+      "icon",
+      "containerRef",
+      "dropdownMinHeightPx"
     ]);
     const handleChange = useSelectCallbacks({
       onChange,
@@ -11293,7 +11363,18 @@
       }
       return prevOptions.current;
     }, [options]);
-    return /* @__PURE__ */ React.createElement(react.Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
+    const dropdownHeightPx = Math.max(
+      Math.min(
+        ramda.length(options || []) * DROPDOWN_OPTION_HEIGHT + DROPDOWN_PADDING,
+        DROPDOWN_MAX_HEIGHT
+      ),
+      dropdownMinHeightPx
+    );
+    const { selectContainerRef, menuPlacement } = useAdaptiveMenuPlacement({
+      dropdownHeightPx,
+      containerRef
+    });
+    return /* @__PURE__ */ React.createElement(react.Box, { w: "full", "data-testid": testId, "data-role": "select-container", ref: selectContainerRef }, /* @__PURE__ */ React.createElement(
       chakraReactSelect.Select,
       __spreadValues$m(__spreadProps$3(__spreadValues$m({
         isMulti,
@@ -11311,6 +11392,7 @@
         customOption,
         customTag,
         icon,
+        menuPlacement,
         components: customComponents,
         ref
       }), rest)
@@ -11345,7 +11427,7 @@
       }
     return target;
   };
-  function SelectField(_a) {
+  const BaseSelectField = (_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -11379,7 +11461,8 @@
         direction,
         isRequired,
         noLabelConnection: true,
-        validate
+        validate,
+        ref
       },
       ({ value, onChange }) => /* @__PURE__ */ React.createElement(react.HStack, { w: "full" }, /* @__PURE__ */ React.createElement(
         InputGroupWrapper,
@@ -11417,7 +11500,8 @@
         }
       ))
     );
-  }
+  };
+  const SelectField = React.forwardRef(BaseSelectField);
 
   var __defProp$k = Object.defineProperty;
   var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
@@ -11498,7 +11582,7 @@
       }
     return target;
   };
-  const SwitchField = (_a) => {
+  const SwitchField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -11506,7 +11590,8 @@
       validate,
       onChange: onChangeCallback = ramda.identity,
       direction = "row",
-      labelPosition = "right"
+      labelPlacement = "right",
+      labelSize = "md"
     } = _b, rest = __objRest$e(_b, [
       "name",
       "label",
@@ -11514,22 +11599,26 @@
       "validate",
       "onChange",
       "direction",
-      "labelPosition"
+      "labelPlacement",
+      "labelSize"
     ]);
-    return /* @__PURE__ */ React.createElement(react.Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { w: label ? "full" : "fit-content", display: "inline-flex" }, /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
         label: "",
         isRequired,
         direction,
-        validate
+        validate,
+        ref
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         react.Flex,
         {
+          display: "inline-flex",
+          alignItems: "center",
           gap: 2,
-          direction: labelPosition === "left" ? "row-reverse" : "row"
+          direction: labelPlacement === "left" ? "row-reverse" : "row"
         },
         /* @__PURE__ */ React.createElement(
           Switch,
@@ -11543,10 +11632,10 @@
             "data-testid": "switch-field-test-id"
           }, rest)
         ),
-        label && /* @__PURE__ */ React.createElement(Label$1, { htmlFor: name }, label)
+        /* @__PURE__ */ React.createElement(Label$1, { htmlFor: name, sx: { fontWeight: "normal" }, size: labelSize }, label)
       )
     ));
-  };
+  });
 
   var __defProp$i = Object.defineProperty;
   var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
@@ -11693,7 +11782,7 @@
       }
     return target;
   };
-  const TextareaField = (_a) => {
+  const TextareaField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -11716,7 +11805,8 @@
         label,
         isRequired,
         validate,
-        direction
+        direction,
+        ref
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         Textarea,
@@ -11731,7 +11821,7 @@
         }, rest)
       )
     );
-  };
+  });
 
   const roundToPrecision = (value, numberOfDecimals) => parseFloat(value.toFixed(numberOfDecimals));
 
@@ -11788,7 +11878,9 @@
       value,
       numberOfDecimals = 2,
       max = Infinity,
-      min = -Infinity
+      min = -Infinity,
+      inputLeftElement,
+      inputRightElement
     } = _b, rest = __objRest$a(_b, [
       "preset",
       "isPercentage",
@@ -11796,33 +11888,54 @@
       "value",
       "numberOfDecimals",
       "max",
-      "min"
+      "min",
+      "inputLeftElement",
+      "inputRightElement"
     ]);
     const props = presetMap[preset];
+    const [v, setV] = React.useState(value);
+    const validateRange = () => {
+      if (ramda.isNil(v))
+        return;
+      const vNum = typeof v === "string" ? parseFloat(v) : v;
+      const factor = isPercentage ? 100 : 1;
+      if (vNum * factor > max) {
+        const newValue = roundToPrecision(max / factor, numberOfDecimals);
+        setV(newValue);
+      }
+      if (vNum * factor < min) {
+        const newValue = roundToPrecision(min / factor, numberOfDecimals);
+        setV(newValue);
+      }
+    };
     const onValueChangeHandler = (values, sourceInfo) => {
+      const newFloatValue = values.floatValue && isPercentage ? roundToPrecision(values.floatValue / 100, numberOfDecimals) : values.floatValue;
+      setV(newFloatValue);
       onChange(
         __spreadProps$2(__spreadValues$e({}, values), {
-          floatValue: values.floatValue && isPercentage ? roundToPrecision(values.floatValue / 100, numberOfDecimals) : values.floatValue
+          floatValue: newFloatValue
         }),
         sourceInfo
       );
     };
     return /* @__PURE__ */ React.createElement(
-      reactNumberFormat.NumericFormat,
-      __spreadValues$e(__spreadValues$e({
-        allowLeadingZeros: true,
-        customInput: react.Input,
-        max: 100,
-        min: 0,
-        onValueChange: onValueChangeHandler,
-        decimalScale: numberOfDecimals,
-        value: isPercentage ? roundToPrecision(parseFloat(`${value != null ? value : 0}`) * 100, numberOfDecimals) : value,
-        suffix: isPercentage ? "%" : "",
-        isAllowed: (values) => {
-          const { floatValue } = values;
-          return floatValue ? floatValue < max && floatValue > min : false;
-        }
-      }, props), rest)
+      InputGroupWrapper,
+      {
+        inputLeftElement,
+        inputRightElement
+      },
+      /* @__PURE__ */ React.createElement(
+        reactNumberFormat.NumericFormat,
+        __spreadValues$e(__spreadValues$e({
+          allowLeadingZeros: true,
+          customInput: react.Input,
+          onBlur: validateRange,
+          onValueChange: onValueChangeHandler,
+          decimalScale: numberOfDecimals,
+          value: isPercentage ? roundToPrecision(parseFloat(`${v != null ? v : 0}`) * 100, numberOfDecimals) : v,
+          suffix: isPercentage ? "%" : ""
+        }, props), rest)
+      )
     );
   };
 
@@ -11854,7 +11967,7 @@
       }
     return target;
   };
-  const FormattedNumberInputField = (_a) => {
+  const FormattedNumberInputField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -11877,7 +11990,8 @@
         label,
         isRequired,
         direction,
-        validate
+        validate,
+        ref
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         FormattedNumberInput,
@@ -11891,7 +12005,7 @@
         }, rest)
       )
     );
-  };
+  });
 
   var __defProp$c = Object.defineProperty;
   var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
@@ -11992,7 +12106,7 @@
       }
     return target;
   };
-  const TextField = (_a) => {
+  const TextField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -12021,7 +12135,8 @@
         label,
         isRequired,
         validate: ramda.isNil(validate) && isRequired ? { validate: (value) => !!value.trim() } : validate,
-        direction
+        direction,
+        ref
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         InputGroupWrapper,
@@ -12044,7 +12159,7 @@
         )
       )
     );
-  };
+  });
 
   const toastIconMap = {
     success: icons.CheckCircleSolid,