@northlight/ui 2.12.2 → 2.12.3

package/dist/es/northlight.js

@@ -490,8 +490,8 @@ const useCurrentTheme = () => {
 };
 
 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;
@@ -507,43 +507,43 @@ var __spreadValues$25 = (a, b) => {
     }
   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;
@@ -559,9 +559,9 @@ var __spreadValues$24 = (a, b) => {
     }
   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",
@@ -574,12 +574,12 @@ const tagsInputStyles = (isFocused, borderColor) => __spreadProps$x(__spreadValu
     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%"
@@ -587,8 +587,8 @@ const tagsInputStyles = (isFocused, borderColor) => __spreadProps$x(__spreadValu
 });
 
 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;
@@ -604,7 +604,7 @@ var __spreadValues$23 = (a, b) => {
     }
   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)
@@ -693,7 +693,7 @@ function TagsInput(_a) {
   };
   return /* @__PURE__ */ React.createElement(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...",
@@ -1547,7 +1547,7 @@ var __objRest$1f = (source, exclude) => {
     }
   return target;
 };
-const Label$1 = (_a) => {
+const Label$1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     size = "sm",
@@ -1562,11 +1562,12 @@ const Label$1 = (_a) => {
     FormLabel$1,
     __spreadValues$1N({
       sx: styles,
-      requiredIndicator: /* @__PURE__ */ React.createElement(VisuallyHidden, null)
+      requiredIndicator: /* @__PURE__ */ React.createElement(VisuallyHidden, null),
+      ref
     }, rest),
     children
   );
-};
+});
 
 const positiveOrZero = ifElse(gt(0), always(0), identity);
 const EMPTY_RECT = {
@@ -1939,6 +1940,8 @@ const Form = forwardRef$1((_a, ref) => {
 });
 
 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;
@@ -1954,6 +1957,7 @@ var __spreadValues$1G = (a, b) => {
     }
   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)
@@ -1966,7 +1970,7 @@ var __objRest$19 = (source, exclude) => {
     }
   return target;
 };
-const FormLabel = (_a) => {
+const FormLabel = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children: label
   } = _b, rest = __objRest$19(_b, [
@@ -1974,7 +1978,7 @@ const FormLabel = (_a) => {
   ]);
   return /* @__PURE__ */ React.createElement(
     Label$1,
-    __spreadValues$1G({
+    __spreadProps$w(__spreadValues$1G({
       size: "sm",
       sx: {
         width: "80%",
@@ -1983,10 +1987,12 @@ const FormLabel = (_a) => {
         marginInlineEnd: 3
       },
       requiredIndicator: void 0
-    }, rest),
+    }, rest), {
+      ref
+    }),
     label
   );
-};
+});
 
 var __defProp$1F = Object.defineProperty;
 var __getOwnPropSymbols$1F = Object.getOwnPropertySymbols;
@@ -2016,7 +2022,7 @@ var __objRest$18 = (source, exclude) => {
     }
   return target;
 };
-function Field(_a) {
+const BaseField = (_a, ref) => {
   var _b = _a, {
     name,
     label,
@@ -2040,7 +2046,7 @@ function Field(_a) {
   const { formState: { errors } } = methods;
   const control = passedControl != null ? passedControl : methods.control;
   const fieldError = getFieldError(name, errors);
-  return /* @__PURE__ */ React.createElement(FormControl, { isInvalid: !!fieldError, isRequired }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(FormControl, { isInvalid: !!fieldError, isRequired, ref }, /* @__PURE__ */ React.createElement(
     Stack,
     __spreadValues$1F({
       spacing: "auto",
@@ -2058,7 +2064,8 @@ function Field(_a) {
       }
     )
   ), /* @__PURE__ */ React.createElement(FormErrorMessage, null, fieldError && (fieldError == null ? void 0 : fieldError.message)));
-}
+};
+const Field = forwardRef$1(BaseField);
 
 const useSetValueRefreshed = () => {
   const { setValue, watch } = useFormContext();
@@ -2097,7 +2104,7 @@ var __objRest$17 = (source, exclude) => {
     }
   return target;
 };
-const CheckboxField = (_a) => {
+const CheckboxField = forwardRef$1((_a, ref) => {
   var _b = _a, {
     name,
     label,
@@ -2132,7 +2139,8 @@ const CheckboxField = (_a) => {
         label: "",
         isRequired,
         direction,
-        validate
+        validate,
+        ref
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         Flex,
@@ -2157,7 +2165,7 @@ const CheckboxField = (_a) => {
       )
     )
   );
-};
+});
 
 var __defProp$1D = Object.defineProperty;
 var __getOwnPropSymbols$1D = Object.getOwnPropertySymbols;
@@ -2763,7 +2771,7 @@ var __objRest$11 = (source, exclude) => {
     }
   return target;
 };
-const FlipButtonGroupField = (_a) => {
+const FlipButtonGroupField = forwardRef$1((_a, ref) => {
   var _b = _a, {
     name,
     label,
@@ -2790,7 +2798,8 @@ const FlipButtonGroupField = (_a) => {
       label,
       direction,
       isRequired,
-      validate
+      validate,
+      ref
     },
     ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       FlipButtonGroup,
@@ -2807,7 +2816,7 @@ const FlipButtonGroupField = (_a) => {
       children
     )
   );
-};
+});
 
 var __defProp$1w = Object.defineProperty;
 var __defProps$s = Object.defineProperties;
@@ -3400,13 +3409,20 @@ const DatePicker$1 = (props) => {
           dateFormat
         })
       )
-    )), /* @__PURE__ */ React.createElement(InputRightElement, { zIndex: 0 }, /* @__PURE__ */ React.createElement(
-      Trigger,
-      __spreadProps$l(__spreadValues$1n({}, buttonProps), {
-        isDisabled,
-        handleClick: togglePopup
-      })
-    ))), /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement(
+      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",
@@ -4700,7 +4716,7 @@ const DateRangePicker = (props) => {
           dateFormat
         })
       )
-    )), /* @__PURE__ */ React.createElement(InputRightElement, null, /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement(InputRightElement, { sx: { height: "100%", paddingRight: "1" } }, /* @__PURE__ */ React.createElement(
       Trigger,
       __spreadProps$f(__spreadValues$1a({}, buttonProps), {
         isDisabled,
@@ -4811,7 +4827,7 @@ var __objRest$S = (source, exclude) => {
     }
   return target;
 };
-const DatePickerField = (_a) => {
+const DatePickerField = forwardRef$1((_a, ref) => {
   var _b = _a, {
     name,
     minValue,
@@ -4857,7 +4873,8 @@ const DatePickerField = (_a) => {
       label,
       direction,
       isRequired,
-      validate
+      validate,
+      ref
     },
     ({ value, onChange }, { formState: { errors } }) => /* @__PURE__ */ React.createElement(
       InputGroupWrapper,
@@ -4881,7 +4898,7 @@ const DatePickerField = (_a) => {
       )
     )
   );
-};
+});
 
 var __defProp$17 = Object.defineProperty;
 var __getOwnPropSymbols$17 = Object.getOwnPropertySymbols;
@@ -4911,7 +4928,7 @@ var __objRest$R = (source, exclude) => {
     }
   return target;
 };
-const DateRangePickerField = (_a) => {
+const DateRangePickerField = forwardRef$1((_a, ref) => {
   var _b = _a, {
     name,
     minValue,
@@ -4955,7 +4972,8 @@ const DateRangePickerField = (_a) => {
       label,
       direction,
       isRequired,
-      validate
+      validate,
+      ref
     },
     ({ value, onChange }, { formState: { errors } }) => /* @__PURE__ */ React.createElement(
       DateRangePicker,
@@ -4973,7 +4991,7 @@ const DateRangePickerField = (_a) => {
       }, rest)
     )
   );
-};
+});
 
 var __defProp$16 = Object.defineProperty;
 var __defProps$e = Object.defineProperties;
@@ -5338,7 +5356,7 @@ var __objRest$K = (source, exclude) => {
     }
   return target;
 };
-const RadioGroupField = (_a) => {
+const RadioGroupField = forwardRef$1((_a, ref) => {
   var _b = _a, {
     name,
     label,
@@ -5363,7 +5381,8 @@ const RadioGroupField = (_a) => {
       label,
       direction,
       isRequired,
-      validate
+      validate,
+      ref
     },
     ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       RadioGroup,
@@ -5380,7 +5399,7 @@ const RadioGroupField = (_a) => {
       children
     )
   ));
-};
+});
 
 const carouselItemWidth = 150;
 const carouselItemSpacing = 60;
@@ -5860,7 +5879,7 @@ var __objRest$F = (source, exclude) => {
     }
   return target;
 };
-const SearchBarField = (_a) => {
+const BaseSearchBarField = (_a, ref) => {
   var _b = _a, {
     name,
     label,
@@ -5892,7 +5911,8 @@ const SearchBarField = (_a) => {
       direction,
       isRequired,
       noLabelConnection: true,
-      validate
+      validate,
+      ref
     },
     ({ value, onChange }) => /* @__PURE__ */ React.createElement(HStack, { w: "full" }, /* @__PURE__ */ React.createElement(
       InputGroupWrapper,
@@ -5928,6 +5948,7 @@ const SearchBarField = (_a) => {
     ))
   );
 };
+const SearchBarField = forwardRef$1(BaseSearchBarField);
 
 var __defProp$V = Object.defineProperty;
 var __getOwnPropSymbols$V = Object.getOwnPropertySymbols;
@@ -6835,7 +6856,7 @@ const EditableText$1 = (_a) => {
     "leftItem"
   ]);
   const [value, setValue] = useState(inputValue);
-  const { input, preview } = useMultiStyleConfig("EditableText", { size });
+  const { input, preview } = useMultiStyleConfig("EditableText", { size, value });
   useEffect(() => {
     setValue(inputValue);
   }, [inputValue]);
@@ -10541,7 +10562,7 @@ const EditableText = {
       }
     })
   },
-  baseStyle: {
+  baseStyle: ({ value }) => ({
     controls: {
       mr: 1
     },
@@ -10551,12 +10572,13 @@ const EditableText = {
       whiteSpace: "nowrap",
       overflow: "hidden",
       paddingTop: 0,
-      paddingBottom: 0
+      paddingBottom: 0,
+      color: isNil(value) || isEmpty(value) ? "text.subdued" : "text.default"
     },
     input: {
       fontWeight: "semibold"
     }
-  }
+  })
 };
 
 const Toolbox = {
@@ -10928,7 +10950,7 @@ const MediatoolThemeProvider = ({
 
 const NumberInputStepper = ({
   includePercentage = false
-}) => /* @__PURE__ */ React.createElement(NumberInputStepper$1, null, /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(Center, { bgColor: "gray.50", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P$1, null, "%")), /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ React.createElement(NumberInputStepper$1, null, /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(Center, { bgColor: "gray.50", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P$1, null, "%")), /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
   Icon$1,
   {
     as: ChevronUpSolid,
@@ -10942,7 +10964,7 @@ const NumberInputStepper = ({
     color: "icon.input-stepper.default",
     boxSize: 4
   }
-))));
+)))));
 
 const regex = /(9{13,}|0{13,})(\d)*$/gm;
 const advancedParseFloat = (value) => {
@@ -11064,7 +11086,7 @@ var __objRest$k = (source, exclude) => {
     }
   return target;
 };
-const NumberInputField = (_a) => {
+const NumberInputField = forwardRef$1((_a, ref) => {
   var _b = _a, {
     name,
     label,
@@ -11094,7 +11116,8 @@ const NumberInputField = (_a) => {
       label,
       direction,
       isRequired,
-      validate
+      validate,
+      ref
     },
     ({ onChange, value }) => {
       const initialValue = isNil(value) || Number.isNaN(parseFloat(value)) ? "" : formatNumber(value, 100);
@@ -11123,7 +11146,7 @@ const NumberInputField = (_a) => {
       );
     }
   );
-};
+});
 
 var __defProp$o = Object.defineProperty;
 var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
@@ -11250,6 +11273,49 @@ const getMatchingValue = (value, options) => {
   return value;
 };
 
+const useAdaptiveMenuPlacement = ({
+  dropdownHeightPx,
+  containerRef
+}) => {
+  const [menuPlacement, setMenuPlacement] = useState("bottom");
+  const selectContainerRef = useRef(null);
+  const adjustMenuPlacement = () => {
+    if (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");
+  };
+  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;
@@ -11294,7 +11360,9 @@ const Select = forwardRef$1((_a, ref) => {
     customOption = null,
     customTag = null,
     value,
-    icon
+    icon,
+    containerRef,
+    dropdownMinHeightPx = DROPDOWN_MIN_HEIGHT
   } = _b, rest = __objRest$h(_b, [
     "options",
     "isMulti",
@@ -11307,7 +11375,9 @@ const Select = forwardRef$1((_a, ref) => {
     "customOption",
     "customTag",
     "value",
-    "icon"
+    "icon",
+    "containerRef",
+    "dropdownMinHeightPx"
   ]);
   const handleChange = useSelectCallbacks({
     onChange,
@@ -11329,7 +11399,18 @@ const Select = forwardRef$1((_a, ref) => {
     }
     return prevOptions.current;
   }, [options]);
-  return /* @__PURE__ */ React.createElement(Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
+  const dropdownHeightPx = Math.max(
+    Math.min(
+      length(options || []) * DROPDOWN_OPTION_HEIGHT + DROPDOWN_PADDING,
+      DROPDOWN_MAX_HEIGHT
+    ),
+    dropdownMinHeightPx
+  );
+  const { selectContainerRef, menuPlacement } = useAdaptiveMenuPlacement({
+    dropdownHeightPx,
+    containerRef
+  });
+  return /* @__PURE__ */ React.createElement(Box, { w: "full", "data-testid": testId, "data-role": "select-container", ref: selectContainerRef }, /* @__PURE__ */ React.createElement(
     Select$3,
     __spreadValues$m(__spreadProps$3(__spreadValues$m({
       isMulti,
@@ -11347,6 +11428,7 @@ const Select = forwardRef$1((_a, ref) => {
       customOption,
       customTag,
       icon,
+      menuPlacement,
       components: customComponents,
       ref
     }), rest)
@@ -11381,7 +11463,7 @@ var __objRest$g = (source, exclude) => {
     }
   return target;
 };
-function SelectField(_a) {
+const BaseSelectField = (_a, ref) => {
   var _b = _a, {
     name,
     label,
@@ -11415,7 +11497,8 @@ function SelectField(_a) {
       direction,
       isRequired,
       noLabelConnection: true,
-      validate
+      validate,
+      ref
     },
     ({ value, onChange }) => /* @__PURE__ */ React.createElement(HStack, { w: "full" }, /* @__PURE__ */ React.createElement(
       InputGroupWrapper,
@@ -11453,7 +11536,8 @@ function SelectField(_a) {
       }
     ))
   );
-}
+};
+const SelectField = forwardRef$1(BaseSelectField);
 
 var __defProp$k = Object.defineProperty;
 var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
@@ -11534,7 +11618,7 @@ var __objRest$e = (source, exclude) => {
     }
   return target;
 };
-const SwitchField = (_a) => {
+const SwitchField = forwardRef$1((_a, ref) => {
   var _b = _a, {
     name,
     label,
@@ -11542,7 +11626,8 @@ const SwitchField = (_a) => {
     validate,
     onChange: onChangeCallback = identity,
     direction = "row",
-    labelPosition = "right"
+    labelPlacement = "right",
+    labelSize = "md"
   } = _b, rest = __objRest$e(_b, [
     "name",
     "label",
@@ -11550,22 +11635,26 @@ const SwitchField = (_a) => {
     "validate",
     "onChange",
     "direction",
-    "labelPosition"
+    "labelPlacement",
+    "labelSize"
   ]);
-  return /* @__PURE__ */ React.createElement(Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(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(
       Flex,
       {
+        display: "inline-flex",
+        alignItems: "center",
         gap: 2,
-        direction: labelPosition === "left" ? "row-reverse" : "row"
+        direction: labelPlacement === "left" ? "row-reverse" : "row"
       },
       /* @__PURE__ */ React.createElement(
         Switch,
@@ -11579,10 +11668,10 @@ const SwitchField = (_a) => {
           "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;
@@ -11729,7 +11818,7 @@ var __objRest$b = (source, exclude) => {
     }
   return target;
 };
-const TextareaField = (_a) => {
+const TextareaField = forwardRef$1((_a, ref) => {
   var _b = _a, {
     name,
     label,
@@ -11752,7 +11841,8 @@ const TextareaField = (_a) => {
       label,
       isRequired,
       validate,
-      direction
+      direction,
+      ref
     },
     ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       Textarea,
@@ -11767,7 +11857,7 @@ const TextareaField = (_a) => {
       }, rest)
     )
   );
-};
+});
 
 const roundToPrecision = (value, numberOfDecimals) => parseFloat(value.toFixed(numberOfDecimals));
 
@@ -11824,7 +11914,9 @@ const FormattedNumberInput = (_a) => {
     value,
     numberOfDecimals = 2,
     max = Infinity,
-    min = -Infinity
+    min = -Infinity,
+    inputLeftElement,
+    inputRightElement
   } = _b, rest = __objRest$a(_b, [
     "preset",
     "isPercentage",
@@ -11832,33 +11924,54 @@ const FormattedNumberInput = (_a) => {
     "value",
     "numberOfDecimals",
     "max",
-    "min"
+    "min",
+    "inputLeftElement",
+    "inputRightElement"
   ]);
   const props = presetMap[preset];
+  const [v, setV] = useState(value);
+  const validateRange = () => {
+    if (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(
-    NumericFormat,
-    __spreadValues$e(__spreadValues$e({
-      allowLeadingZeros: true,
-      customInput: Input$1,
-      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(
+      NumericFormat,
+      __spreadValues$e(__spreadValues$e({
+        allowLeadingZeros: true,
+        customInput: Input$1,
+        onBlur: validateRange,
+        onValueChange: onValueChangeHandler,
+        decimalScale: numberOfDecimals,
+        value: isPercentage ? roundToPrecision(parseFloat(`${v != null ? v : 0}`) * 100, numberOfDecimals) : v,
+        suffix: isPercentage ? "%" : ""
+      }, props), rest)
+    )
   );
 };
 
@@ -11890,7 +12003,7 @@ var __objRest$9 = (source, exclude) => {
     }
   return target;
 };
-const FormattedNumberInputField = (_a) => {
+const FormattedNumberInputField = forwardRef$1((_a, ref) => {
   var _b = _a, {
     name,
     label,
@@ -11913,7 +12026,8 @@ const FormattedNumberInputField = (_a) => {
       label,
       isRequired,
       direction,
-      validate
+      validate,
+      ref
     },
     ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       FormattedNumberInput,
@@ -11927,7 +12041,7 @@ const FormattedNumberInputField = (_a) => {
       }, rest)
     )
   );
-};
+});
 
 var __defProp$c = Object.defineProperty;
 var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
@@ -12028,7 +12142,7 @@ var __objRest$7 = (source, exclude) => {
     }
   return target;
 };
-const TextField = (_a) => {
+const TextField = forwardRef$1((_a, ref) => {
   var _b = _a, {
     name,
     label,
@@ -12057,7 +12171,8 @@ const TextField = (_a) => {
       label,
       isRequired,
       validate: isNil(validate) && isRequired ? { validate: (value) => !!value.trim() } : validate,
-      direction
+      direction,
+      ref
     },
     ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       InputGroupWrapper,
@@ -12080,7 +12195,7 @@ const TextField = (_a) => {
       )
     )
   );
-};
+});
 
 const toastIconMap = {
   success: CheckCircleSolid,