@northlight/ui 2.34.0 → 2.34.2

package/dist/umd/northlight.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@chakra-ui/react'), require('react'), require('chakra-react-select'), require('ramda'), require('@react-aria/focus'), require('react-hook-form'), require('@chakra-ui/system'), require('@northlight/tokens'), require('@chakra-ui/theme-tools'), require('@northlight/icons'), require('@hookform/resolvers/joi'), require('@react-aria/checkbox'), require('@react-aria/radio'), require('@react-aria/utils'), require('@react-stately/radio'), require('@react-stately/checkbox'), require('@react-aria/datepicker'), require('@react-stately/datepicker'), require('@internationalized/date'), require('@react-aria/button'), require('@react-aria/i18n'), require('@react-stately/calendar'), require('@react-aria/calendar'), require('react-router-dom'), require('@chakra-ui/clickable'), require('framer-motion'), require('@dnd-kit/core'), require('@dnd-kit/utilities'), require('@dnd-kit/sortable'), require('@dnd-kit/modifiers'), require('react-window'), require('react-virtualized-auto-sizer'), require('react-avatar-editor'), require('react-number-format'), require('react-input-mask'), require('yafu')) :
   typeof define === 'function' && define.amd ? define(['exports', '@chakra-ui/react', 'react', 'chakra-react-select', 'ramda', '@react-aria/focus', 'react-hook-form', '@chakra-ui/system', '@northlight/tokens', '@chakra-ui/theme-tools', '@northlight/icons', '@hookform/resolvers/joi', '@react-aria/checkbox', '@react-aria/radio', '@react-aria/utils', '@react-stately/radio', '@react-stately/checkbox', '@react-aria/datepicker', '@react-stately/datepicker', '@internationalized/date', '@react-aria/button', '@react-aria/i18n', '@react-stately/calendar', '@react-aria/calendar', 'react-router-dom', '@chakra-ui/clickable', 'framer-motion', '@dnd-kit/core', '@dnd-kit/utilities', '@dnd-kit/sortable', '@dnd-kit/modifiers', 'react-window', 'react-virtualized-auto-sizer', 'react-avatar-editor', 'react-number-format', 'react-input-mask', 'yafu'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.northlight = {}, global.react, global.React$1, global.chakraReactSelect, global.ramda, global.focus, global.reactHookForm, global.system, global.tokens, global.themeTools, global.icons, global.joi, global.checkbox$1, global.radio$1, global.utils, global.radio, global.checkbox, global.datepicker, global.datepicker$1, global.date, global.button, global.i18n, global.calendar$1, global.calendar, global.reactRouterDom, global.clickable, global.framerMotion, global.core, global.utilities, global.sortable, global.modifiers, global.reactWindow, global.AutoSizer, global.AvatarEditor, global.reactNumberFormat, global.InputMask, global.yafu));
-})(this, (function (exports, react, React$1, chakraReactSelect, ramda, focus, reactHookForm, system, tokens, themeTools, icons, joi, checkbox$1, radio$1, utils, radio, checkbox, datepicker, datepicker$1, date, button, i18n, calendar$1, calendar, reactRouterDom, clickable, framerMotion, core, utilities, sortable, modifiers, reactWindow, AutoSizer, AvatarEditor, reactNumberFormat, InputMask, yafu) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.northlight = {}, global.react, global.React, global.chakraReactSelect, global.ramda, global.focus, global.reactHookForm, global.system, global.tokens, global.themeTools, global.icons, global.joi, global.checkbox$1, global.radio$1, global.utils, global.radio, global.checkbox, global.datepicker, global.datepicker$1, global.date, global.button, global.i18n, global.calendar$1, global.calendar, global.reactRouterDom, global.clickable, global.framerMotion, global.core, global.utilities, global.sortable, global.modifiers, global.reactWindow, global.AutoSizer, global.AvatarEditor, global.reactNumberFormat, global.InputMask, global.yafu));
+})(this, (function (exports, react, React, chakraReactSelect, ramda, focus, reactHookForm, system, tokens, themeTools, icons, joi, checkbox$1, radio$1, utils, radio, checkbox, datepicker, datepicker$1, date, button, i18n, calendar$1, calendar, reactRouterDom, clickable, framerMotion, core, utilities, sortable, modifiers, reactWindow, AutoSizer, AvatarEditor, reactNumberFormat, InputMask, yafu) { 'use strict';
 
   var __defProp$2t = Object.defineProperty;
   var __getOwnPropSymbols$2t = Object.getOwnPropertySymbols;
@@ -20,7 +20,7 @@
       }
     return a;
   };
-  const Accordion = (props) => /* @__PURE__ */ React$1.createElement(react.Accordion, __spreadValues$2t({}, props));
+  const Accordion = (props) => /* @__PURE__ */ React.createElement(react.Accordion, __spreadValues$2t({}, props));
 
   var __defProp$2s = Object.defineProperty;
   var __getOwnPropSymbols$2s = Object.getOwnPropertySymbols;
@@ -38,7 +38,7 @@
       }
     return a;
   };
-  const AccordionButton = (props) => /* @__PURE__ */ React$1.createElement(react.AccordionButton, __spreadValues$2s({}, props));
+  const AccordionButton = (props) => /* @__PURE__ */ React.createElement(react.AccordionButton, __spreadValues$2s({}, props));
 
   var __defProp$2r = Object.defineProperty;
   var __getOwnPropSymbols$2r = Object.getOwnPropertySymbols;
@@ -56,7 +56,7 @@
       }
     return a;
   };
-  const AccordionPanel = (props) => /* @__PURE__ */ React$1.createElement(react.AccordionPanel, __spreadValues$2r({}, props));
+  const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(react.AccordionPanel, __spreadValues$2r({}, props));
 
   var __defProp$2q = Object.defineProperty;
   var __getOwnPropSymbols$2q = Object.getOwnPropertySymbols;
@@ -74,11 +74,11 @@
       }
     return a;
   };
-  const AccordionItem = (props) => /* @__PURE__ */ React$1.createElement(react.AccordionItem, __spreadValues$2q({}, props));
+  const AccordionItem = (props) => /* @__PURE__ */ React.createElement(react.AccordionItem, __spreadValues$2q({}, props));
 
   const useDebounce = (value, delay) => {
-    const [debouncedValue, setDebouncedValue] = React$1.useState(value);
-    React$1.useEffect(() => {
+    const [debouncedValue, setDebouncedValue] = React.useState(value);
+    React.useEffect(() => {
       const handler = setTimeout(() => {
         setDebouncedValue(value);
       }, delay);
@@ -90,7 +90,7 @@
   };
 
   const useLoadingMessage = (prefix = "", delay = 300) => {
-    const [dots, setDots] = React$1.useState(".");
+    const [dots, setDots] = React.useState(".");
     react.useInterval(() => {
       if (dots.length === 3) {
         setDots(".");
@@ -119,7 +119,7 @@
   };
 
   const useScrollToBottom = (scrollView, messages) => {
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       const div = scrollView.current;
       if (div) {
         smoothScrollToBottom(div);
@@ -202,7 +202,7 @@
     isMulti = false,
     value
   }) => {
-    const items = React$1.useRef(value);
+    const items = React.useRef(value);
     const handleChange = (val, event) => {
       var _a;
       onChange(val, event);
@@ -227,12 +227,12 @@
 
   const isBetween = (point, min, max) => point >= min && point <= max;
   const useOutsideRectClick = (ref, callback) => {
-    const stateRef = React$1.useRef({
+    const stateRef = React.useRef({
       isPointerDown: false,
       ignoreEmulatedMouseEvents: false
     });
     const state = stateRef.current;
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       const handleMouseClick = (event) => {
         let clientX;
         let clientY;
@@ -303,8 +303,8 @@
   };
 
   const useDidUpdateEffect = (effect, dependencies) => {
-    const didMountRef = React$1.useRef(false);
-    React$1.useEffect(() => {
+    const didMountRef = React.useRef(false);
+    React.useEffect(() => {
       if (didMountRef.current) {
         effect();
       }
@@ -409,7 +409,7 @@
       }
     return a;
   };
-  const passPropsToChild = (child, styles) => React$1.isValidElement(child) ? React$1.cloneElement(child, __spreadValues$2p({}, styles)) : child;
+  const passPropsToChild = (child, styles) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$2p({}, styles)) : child;
 
   var __defProp$2o = Object.defineProperty;
   var __getOwnPropSymbols$2o = Object.getOwnPropertySymbols;
@@ -428,7 +428,7 @@
     return a;
   };
   const getChildrenWithProps = (children, styles, predicate = ramda.T) => {
-    const childrenAsArr = React$1.Children.toArray(children);
+    const childrenAsArr = React.Children.toArray(children);
     const childrenWithoutFocus = childrenAsArr.map((child, i) => predicate(child, i) ? passPropsToChild(child, __spreadValues$2o({}, styles)) : child);
     return childrenWithoutFocus;
   };
@@ -450,9 +450,9 @@
     };
   };
 
-  const CustomTheme = React$1.createContext("webappTheme");
+  const CustomTheme = React.createContext("webappTheme");
   const useCurrentTheme = () => {
-    const theme = React$1.useContext(CustomTheme);
+    const theme = React.useContext(CustomTheme);
     return theme;
   };
 
@@ -479,7 +479,7 @@
     maxWidthPx = Number.MAX_SAFE_INTEGER,
     defaultWidthPx
   }) => {
-    const [adjustableWidth, setAdjustableWidth] = React$1.useState(defaultWidthPx);
+    const [adjustableWidth, setAdjustableWidth] = React.useState(defaultWidthPx);
     const resizeProps = {
       onMouseDown: (e) => {
         e.preventDefault();
@@ -3733,11 +3733,11 @@
       "onError"
     ]);
     const [borderColor] = react.useToken("border.select", ["focus"]);
-    const [menuIsOpen, setMenuIsOpen] = React$1.useState(false);
-    const [inputValue, setInputValue] = React$1.useState("");
-    const [selectedOptions, setSelectedOptions] = React$1.useState(value);
-    const [isFocused, setIsFocused] = React$1.useState(false);
-    React$1.useEffect(() => {
+    const [menuIsOpen, setMenuIsOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState("");
+    const [selectedOptions, setSelectedOptions] = React.useState(value);
+    const [isFocused, setIsFocused] = React.useState(false);
+    React.useEffect(() => {
       setSelectedOptions(value);
     }, [value.length]);
     const CustomSelect = chakraReactSelect.CreatableSelect;
@@ -3781,7 +3781,7 @@
         setMenuIsOpen(true);
       }
     };
-    return /* @__PURE__ */ React$1.createElement(react.Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
       CustomSelect,
       __spreadValues$2g(__spreadProps$t(__spreadValues$2g({
         isMulti: true,
@@ -3860,19 +3860,19 @@
       container,
       text
     } = react.useMultiStyleConfig("Avatar", __spreadValues$2f({ variant, image }, rest));
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.chakra.div,
       __spreadValues$2f({
         __css: container,
         "data-testid": "organization-logo-test-id"
       }, rest),
-      image ? /* @__PURE__ */ React$1.createElement(
+      image ? /* @__PURE__ */ React.createElement(
         react.chakra.img,
         {
           alt: name,
           src: image
         }
-      ) : /* @__PURE__ */ React$1.createElement(react.chakra.span, { __css: text }, getInitials(name))
+      ) : /* @__PURE__ */ React.createElement(react.chakra.span, { __css: text }, getInitials(name))
     );
   };
 
@@ -3912,7 +3912,7 @@
       "variant",
       "children"
     ]);
-    return /* @__PURE__ */ React$1.createElement(react.Alert, __spreadValues$2e({ variant }, rest), children);
+    return /* @__PURE__ */ React.createElement(react.Alert, __spreadValues$2e({ variant }, rest), children);
   };
 
   var __defProp$2d = Object.defineProperty;
@@ -3931,7 +3931,7 @@
       }
     return a;
   };
-  const AspectRatio = (props) => /* @__PURE__ */ React$1.createElement(react.AspectRatio, __spreadValues$2d({}, props));
+  const AspectRatio = (props) => /* @__PURE__ */ React.createElement(react.AspectRatio, __spreadValues$2d({}, props));
 
   var __defProp$2c = Object.defineProperty;
   var __getOwnPropSymbols$2c = Object.getOwnPropertySymbols;
@@ -3973,15 +3973,15 @@
       "color",
       "boxSize"
     ]);
-    const CustomIcon = As != null ? As : () => /* @__PURE__ */ React$1.createElement(react.Icon, null);
+    const CustomIcon = As != null ? As : () => /* @__PURE__ */ React.createElement(react.Icon, null);
     const styles = react.useStyleConfig("Icon", { size, color, boxSize });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Icon,
       __spreadValues$2c({
         ref,
         sx: styles
       }, rest),
-      /* @__PURE__ */ React$1.createElement(CustomIcon, null)
+      /* @__PURE__ */ React.createElement(CustomIcon, null)
     );
   });
 
@@ -3989,7 +3989,7 @@
     notificationCount = 0
   }) => {
     const { badge } = react.useMultiStyleConfig("Avatar");
-    return /* @__PURE__ */ React$1.createElement(react.chakra.span, { sx: badge }, notificationCount > 999 ? "999+" : notificationCount);
+    return /* @__PURE__ */ React.createElement(react.chakra.span, { sx: badge }, notificationCount > 999 ? "999+" : notificationCount);
   };
 
   var __defProp$2b = Object.defineProperty;
@@ -4043,21 +4043,21 @@
       name,
       bgColor
     });
-    return /* @__PURE__ */ React$1.createElement(react.Box, __spreadValues$2b({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadValues$2b({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React.createElement(
       react.chakra.img,
       {
         alt: name,
         src: image,
         sx: userImage
       }
-    ) : name ? /* @__PURE__ */ React$1.createElement(react.chakra.span, { sx: text }, getInitials(name)) : /* @__PURE__ */ React$1.createElement(
+    ) : name ? /* @__PURE__ */ React.createElement(react.chakra.span, { sx: text }, getInitials(name)) : /* @__PURE__ */ React.createElement(
       Icon,
       {
         as: variant === "square" ? icons.UserSquareDuo : icons.BusinessContactDuo,
         sx: icon,
         "aria-label": "user-avatar"
       }
-    ), notificationCount > 0 && /* @__PURE__ */ React$1.createElement(AvatarBadge, { notificationCount }));
+    ), notificationCount > 0 && /* @__PURE__ */ React.createElement(AvatarBadge, { notificationCount }));
   };
 
   var __defProp$2a = Object.defineProperty;
@@ -4088,7 +4088,7 @@
       }
     return target;
   };
-  const H1 = React$1.forwardRef((_a, ref) => {
+  const H1 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -4097,7 +4097,7 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("H1", { sx });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$2a({
         as: "h1",
@@ -4136,7 +4136,7 @@
       }
     return target;
   };
-  const H2 = React$1.forwardRef((_a, ref) => {
+  const H2 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -4145,7 +4145,7 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("H2", { sx });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$29({
         as: "h2",
@@ -4184,7 +4184,7 @@
       }
     return target;
   };
-  const H3 = React$1.forwardRef((_a, ref) => {
+  const H3 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -4193,7 +4193,7 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("H3", { sx });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$28({
         as: "h3",
@@ -4232,7 +4232,7 @@
       }
     return target;
   };
-  const H4 = React$1.forwardRef((_a, ref) => {
+  const H4 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -4241,7 +4241,7 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("H4", { sx });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$27({
         as: "h4",
@@ -4280,7 +4280,7 @@
       }
     return target;
   };
-  const H5 = React$1.forwardRef((_a, ref) => {
+  const H5 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -4289,7 +4289,7 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("H5", { sx });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$26({
         as: "h5",
@@ -4328,7 +4328,7 @@
       }
     return target;
   };
-  const H6 = React$1.forwardRef((_a, ref) => {
+  const H6 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -4337,7 +4337,7 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("H6", { sx });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$25({
         as: "h6",
@@ -4376,7 +4376,7 @@
       }
     return target;
   };
-  const P = React$1.forwardRef((_a, ref) => {
+  const P = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       variant = "16",
@@ -4387,7 +4387,7 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("P", { variant, sx });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$24({
         variant,
@@ -4426,11 +4426,11 @@
       }
     return target;
   };
-  const Blockquote = React$1.forwardRef(
+  const Blockquote = React.forwardRef(
     (_a, ref) => {
       var _b = _a, { children, sx = {} } = _b, rest = __objRest$1F(_b, ["children", "sx"]);
       const styles = react.useStyleConfig("Blockquote", { sx });
-      return /* @__PURE__ */ React$1.createElement(react.Text, __spreadValues$23({ as: "span", sx: styles, ref }, rest), children);
+      return /* @__PURE__ */ React.createElement(react.Text, __spreadValues$23({ as: "span", sx: styles, ref }, rest), children);
     }
   );
 
@@ -4462,7 +4462,7 @@
       }
     return target;
   };
-  const Capitalized = React$1.forwardRef((_a, ref) => {
+  const Capitalized = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -4471,7 +4471,7 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("Capitalized", { sx });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$22({
         as: "span",
@@ -4510,7 +4510,7 @@
       }
     return target;
   };
-  const Lead = React$1.forwardRef((_a, ref) => {
+  const Lead = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -4519,7 +4519,7 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("Lead", { sx });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$21({
         as: "span",
@@ -4558,7 +4558,7 @@
       }
     return target;
   };
-  const Small = React$1.forwardRef((_a, ref) => {
+  const Small = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -4567,7 +4567,7 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("Small", { sx });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$20({
         as: "small",
@@ -4606,7 +4606,7 @@
       }
     return target;
   };
-  const Tiny = React$1.forwardRef((_a, ref) => {
+  const Tiny = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
@@ -4615,7 +4615,7 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("Tiny", { sx });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$1$({
         as: "span",
@@ -4654,7 +4654,7 @@
       }
     return target;
   };
-  const Label = React$1.forwardRef((_a, ref) => {
+  const Label = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       size = "sm",
@@ -4665,11 +4665,11 @@
       "sx"
     ]);
     const styles = react.useStyleConfig("Label", { sx, size });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.FormLabel,
       __spreadValues$1_({
         sx: styles,
-        requiredIndicator: /* @__PURE__ */ React$1.createElement(react.VisuallyHidden, null),
+        requiredIndicator: /* @__PURE__ */ React.createElement(react.VisuallyHidden, null),
         ref
       }, rest),
       children
@@ -4704,11 +4704,11 @@
       }
     return target;
   };
-  const NumVal = React$1.forwardRef(
+  const NumVal = React.forwardRef(
     (_a, ref) => {
       var _b = _a, { children, size = "sm", sx = {} } = _b, rest = __objRest$1z(_b, ["children", "size", "sx"]);
       const styles = react.useStyleConfig("NumVal", { sx, size });
-      return /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(
         react.Text,
         __spreadValues$1Z({
           as: "span",
@@ -4736,10 +4736,10 @@
     onChange = ramda.identity,
     rect
   }) => {
-    const [max, setMax] = React$1.useState(ramda.isNil(rect) ? initMax : 0);
-    const [windowState, setWindowState] = React$1.useState(EMPTY_WINDOW);
-    const isLocked = React$1.useRef(false);
-    const nbrChildren = React$1.Children.count(children);
+    const [max, setMax] = React.useState(ramda.isNil(rect) ? initMax : 0);
+    const [windowState, setWindowState] = React.useState(EMPTY_WINDOW);
+    const isLocked = React.useRef(false);
+    const nbrChildren = React.Children.count(children);
     const updateMax = () => {
       if (!rect)
         return;
@@ -4752,7 +4752,7 @@
       }
     };
     const rectDependency = ramda.defaultTo(EMPTY_RECT, rect);
-    React$1.useEffect(updateMax, [
+    React.useEffect(updateMax, [
       rectDependency.clientWidth,
       rectDependency.clientHeight,
       nbrChildren,
@@ -4761,7 +4761,7 @@
       windowState.innerHeight,
       initMax
     ]);
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       isLocked.current = false;
     }, [rectDependency.clientHeight, rectDependency.clientWidth]);
     const handleResize = () => {
@@ -4773,13 +4773,13 @@
         });
       }, 200);
     };
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       window.addEventListener("resize", handleResize);
       return () => {
         window.removeEventListener("resize", handleResize);
       };
     }, []);
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       const nbrRemainingChildren = positiveOrZero(nbrChildren - max);
       onChange(nbrRemainingChildren);
     }, [max, nbrChildren]);
@@ -4787,11 +4787,11 @@
       max,
       getChildrenWithProps(children, ramda.defaultTo({}, childrenProps))
     );
-    return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, shownChildren);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, shownChildren);
   };
 
   const useOverflowGroup = () => {
-    const [rect, setRect] = React$1.useState(null);
+    const [rect, setRect] = React.useState(null);
     const containerRef = (node) => {
       if (node) {
         setRect(node);
@@ -4838,13 +4838,13 @@
       "max",
       "spacing"
     ]);
-    const [nbrRemainingAvatars, setNbrRemainingAvatars] = React$1.useState(0);
+    const [nbrRemainingAvatars, setNbrRemainingAvatars] = React.useState(0);
     const childrenWithMargin = getChildrenWithProps(
       children,
       { ml: spacing },
       (_child, idx) => idx > 0
     );
-    return /* @__PURE__ */ React$1.createElement(react.HStack, __spreadValues$1Y({ bgColor: "background.default" }, rest), /* @__PURE__ */ React$1.createElement(react.HStack, { spacing: 0 }, /* @__PURE__ */ React$1.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, childrenWithMargin)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React$1.createElement(Small, { sx: { color: "blue.500" } }, "+", nbrRemainingAvatars));
+    return /* @__PURE__ */ React.createElement(react.HStack, __spreadValues$1Y({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(react.HStack, { spacing: 0 }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, childrenWithMargin)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small, { sx: { color: "blue.500" } }, "+", nbrRemainingAvatars));
   };
 
   var __defProp$1X = Object.defineProperty;
@@ -4863,7 +4863,7 @@
       }
     return a;
   };
-  const Badge = React$1.forwardRef((props, ref) => /* @__PURE__ */ React$1.createElement(react.Badge, __spreadValues$1X({ ref }, props)));
+  const Badge = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(react.Badge, __spreadValues$1X({ ref }, props)));
 
   var __defProp$1W = Object.defineProperty;
   var __getOwnPropSymbols$1W = Object.getOwnPropertySymbols;
@@ -4904,7 +4904,7 @@
       "isBlinking"
     ]);
     const styles = react.useStyleConfig("Blinker", { color, size, isBlinking });
-    return /* @__PURE__ */ React$1.createElement(react.Box, __spreadValues$1W({ sx: styles, "data-testid": "blinker-test-id" }, rest));
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadValues$1W({ sx: styles, "data-testid": "blinker-test-id" }, rest));
   };
 
   var __defProp$1V = Object.defineProperty;
@@ -4937,7 +4937,7 @@
   };
   const Spinner = (_a) => {
     var rest = __objRest$1w(_a, []);
-    return /* @__PURE__ */ React$1.createElement(react.Spinner, __spreadValues$1V({}, rest));
+    return /* @__PURE__ */ React.createElement(react.Spinner, __spreadValues$1V({}, rest));
   };
 
   var __defProp$1U = Object.defineProperty;
@@ -4974,16 +4974,16 @@
     md: "sm",
     lg: "md"
   };
-  const Button = React$1.forwardRef(
+  const Button = React.forwardRef(
     (_a, ref) => {
       var _b = _a, { variant = "default", children, size = "md" } = _b, rest = __objRest$1v(_b, ["variant", "children", "size"]);
-      return /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(
         react.Button,
         __spreadValues$1U({
           variant,
           ref,
           size,
-          spinner: /* @__PURE__ */ React$1.createElement(
+          spinner: /* @__PURE__ */ React.createElement(
             Spinner,
             {
               size: SpinnerSizeMap[size]
@@ -5038,7 +5038,7 @@
       "variant"
     ]);
     const controlledValue = typeof value === "boolean" ? { isChecked: value } : { value };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Checkbox,
       __spreadValues$1T(__spreadValues$1T({
         size,
@@ -5093,7 +5093,7 @@
       }
     return target;
   };
-  const Form = React$1.forwardRef((_a, ref) => {
+  const Form = React.forwardRef((_a, ref) => {
     var _b = _a, {
       initialValues,
       onSubmit,
@@ -5132,10 +5132,10 @@
       defaultValues: initialValues,
       resolver: getResolver()
     }, formSettings));
-    React$1.useImperativeHandle(ref, ramda.always(newMethods), []);
+    React.useImperativeHandle(ref, ramda.always(newMethods), []);
     if (enableReinitialize) {
-      const initalValuesImage = React$1.useRef({});
-      React$1.useEffect(() => {
+      const initalValuesImage = React.useRef({});
+      React.useEffect(() => {
         if (!ramda.equals(initalValuesImage.current, initialValues)) {
           newMethods == null ? void 0 : newMethods.reset(initialValues);
           initalValuesImage.current = initialValues;
@@ -5154,7 +5154,7 @@
       newMethods.trigger();
       e.preventDefault();
     };
-    return /* @__PURE__ */ React$1.createElement(reactHookForm.FormProvider, __spreadValues$1S(__spreadValues$1S({}, newMethods), rest), /* @__PURE__ */ React$1.createElement("form", { style: __spreadValues$1S({ width: "100%" }, innerFormStyle), onSubmit: handleSubmit }, typeof children === "function" ? children(newMethods) : children));
+    return /* @__PURE__ */ React.createElement(reactHookForm.FormProvider, __spreadValues$1S(__spreadValues$1S({}, newMethods), rest), /* @__PURE__ */ React.createElement("form", { style: __spreadValues$1S({ width: "100%" }, innerFormStyle), onSubmit: handleSubmit }, typeof children === "function" ? children(newMethods) : children));
   });
 
   var __defProp$1R = Object.defineProperty;
@@ -5188,13 +5188,13 @@
       }
     return target;
   };
-  const FormLabel = React$1.forwardRef((_a, ref) => {
+  const FormLabel = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children: label
     } = _b, rest = __objRest$1s(_b, [
       "children"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Label,
       __spreadProps$s(__spreadValues$1R({
         size: "sm",
@@ -5264,15 +5264,15 @@
     const { formState: { errors } } = methods;
     const control = passedControl != null ? passedControl : methods.control;
     const fieldError = getFieldError(name, errors);
-    return /* @__PURE__ */ React$1.createElement(react.FormControl, { isInvalid: !!fieldError, isRequired, ref }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.FormControl, { isInvalid: !!fieldError, isRequired, ref }, /* @__PURE__ */ React.createElement(
       react.Stack,
       __spreadValues$1Q({
         spacing: "auto",
         direction,
         alignItems: direction === "column" ? "stretch" : "center"
       }, rest),
-      label && /* @__PURE__ */ React$1.createElement(FormLabel, { htmlFor: noLabelConnection ? void 0 : name, mb: 1 }, label),
-      /* @__PURE__ */ React$1.createElement(
+      label && /* @__PURE__ */ React.createElement(FormLabel, { htmlFor: noLabelConnection ? void 0 : name, mb: 1 }, label),
+      /* @__PURE__ */ React.createElement(
         reactHookForm.Controller,
         {
           name,
@@ -5281,9 +5281,9 @@
           render: ({ field }) => children(field, methods)
         }
       )
-    ), /* @__PURE__ */ React$1.createElement(react.FormErrorMessage, null, fieldError && (fieldError == null ? void 0 : fieldError.message)));
+    ), /* @__PURE__ */ React.createElement(react.FormErrorMessage, null, fieldError && (fieldError == null ? void 0 : fieldError.message)));
   };
-  const Field = React$1.forwardRef(BaseField);
+  const Field = React.forwardRef(BaseField);
 
   const useSetValueRefreshed = () => {
     const { setValue, watch } = reactHookForm.useFormContext();
@@ -5322,7 +5322,7 @@
       }
     return target;
   };
-  const CheckboxField = React$1.forwardRef((_a, ref) => {
+  const CheckboxField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -5344,13 +5344,13 @@
       "labelPlacement",
       "labelSize"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Box,
       {
         w: label ? "full" : "fit-content",
         display: "inline-flex"
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Field,
         {
           name,
@@ -5360,13 +5360,13 @@
           validate,
           ref
         },
-        ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+        ({ onChange, value }) => /* @__PURE__ */ React.createElement(
           react.Flex,
           {
             gap: 2,
             direction: labelPlacement === "left" ? "row-reverse" : "row"
           },
-          /* @__PURE__ */ React$1.createElement(
+          /* @__PURE__ */ React.createElement(
             Checkbox,
             __spreadValues$1P({
               name,
@@ -5379,7 +5379,7 @@
               "data-testid": "checkbox-field-test-id"
             }, rest)
           ),
-          /* @__PURE__ */ React$1.createElement(Label, { htmlFor: name, sx: { fontWeight: "normal" }, size: labelSize }, label)
+          /* @__PURE__ */ React.createElement(Label, { htmlFor: name, sx: { fontWeight: "normal" }, size: labelSize }, label)
         )
       )
     );
@@ -5413,7 +5413,7 @@
       }
     return target;
   };
-  const CheckboxGroupField = React$1.forwardRef((_a, ref) => {
+  const CheckboxGroupField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -5431,7 +5431,7 @@
       "validate",
       "onChange"
     ]);
-    return /* @__PURE__ */ React$1.createElement(react.Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -5441,7 +5441,7 @@
         direction,
         ref
       },
-      ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+      ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         react.CheckboxGroup,
         __spreadValues$1O({
           onChange: (e) => {
@@ -5484,7 +5484,7 @@
       }
     return target;
   };
-  const IconButton = React$1.forwardRef((_a, ref) => {
+  const IconButton = React.forwardRef((_a, ref) => {
     var _b = _a, {
       variant = "default",
       icon,
@@ -5498,8 +5498,8 @@
     ]);
     var _a2;
     const IconComponent = icon != null ? icon : children;
-    const IconWithSize = React$1.cloneElement(IconComponent, { size: (_a2 = IconComponent.props.size) != null ? _a2 : rest.size });
-    return /* @__PURE__ */ React$1.createElement(
+    const IconWithSize = React.cloneElement(IconComponent, { size: (_a2 = IconComponent.props.size) != null ? _a2 : rest.size });
+    return /* @__PURE__ */ React.createElement(
       react.IconButton,
       __spreadValues$1N({
         variant,
@@ -5514,14 +5514,14 @@
   const paletteColors = getShades(100, 500);
   const defaultColors = getShades(500);
 
-  const ColorButton = React$1.forwardRef(({
+  const ColorButton = React.forwardRef(({
     color,
     onClick,
     size,
     selected = false
   }, ref) => {
     if (!color)
-      return /* @__PURE__ */ React$1.createElement(react.Box, null);
+      return /* @__PURE__ */ React.createElement(react.Box, null);
     const { defaultArrows, focusPrevious, focusNext } = useArrowFocus(columns);
     const onKeyDown = (e) => {
       switch (e.key) {
@@ -5539,7 +5539,7 @@
       }
     };
     const { colorButton } = react.useMultiStyleConfig("ColorPicker", { size });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       IconButton,
       {
         bg: color,
@@ -5548,7 +5548,7 @@
         "aria-label": `select-${color}`,
         onClick,
         sx: colorButton,
-        icon: /* @__PURE__ */ React$1.createElement(Icon, { as: icons.CheckDuo, boxSize: selected ? void 0 : "0" }),
+        icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.CheckDuo, boxSize: selected ? void 0 : "0" }),
         color: getContrastColor(color)
       }
     );
@@ -5570,7 +5570,7 @@
       }
     return a;
   };
-  const Popover = (props) => /* @__PURE__ */ React$1.createElement(react.Popover, __spreadValues$1M({ isLazy: true }, props));
+  const Popover = (props) => /* @__PURE__ */ React.createElement(react.Popover, __spreadValues$1M({ isLazy: true }, props));
 
   const ColorsExpandButton = ({
     onClick,
@@ -5597,7 +5597,7 @@
           break;
       }
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       IconButton,
       {
         variant: "ghost",
@@ -5606,7 +5606,7 @@
         onClick,
         sx: colorButton
       },
-      /* @__PURE__ */ React$1.createElement(Icon, { as: expanded ? icons.ChevronUpDuo : icons.ChevronDownDuo })
+      /* @__PURE__ */ React.createElement(Icon, { as: expanded ? icons.ChevronUpDuo : icons.ChevronDownDuo })
     );
   };
 
@@ -5698,9 +5698,9 @@
     ]);
     const { isOpen, onToggle, onClose } = react.useDisclosure();
     const [expanded, setExpanded] = react.useBoolean();
-    const [selectedColor, setSelectedColor] = React$1.useState(value);
-    const [visibleColors, setVisibleColors] = React$1.useState(colors);
-    const initialFocusRef = React$1.useRef(null);
+    const [selectedColor, setSelectedColor] = React.useState(value);
+    const [visibleColors, setVisibleColors] = React.useState(colors);
+    const initialFocusRef = React.useRef(null);
     const {
       trigger,
       heading
@@ -5710,14 +5710,14 @@
     for (let i = 0; i < baseColors.length % columns; i += 1) {
       baseColors.push("");
     }
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       if (value === "") {
         setSelectedColor(null);
       } else {
         setSelectedColor(parsedValue);
       }
     }, [value]);
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       if (expanded) {
         setVisibleColors((prev) => prev.concat(expandedColors));
       } else {
@@ -5748,14 +5748,14 @@
       setSelectedColor(null);
       onChange(null);
     };
-    return /* @__PURE__ */ React$1.createElement(react.Box, { "data-testid": "color-picker-test-id" }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { "data-testid": "color-picker-test-id" }, /* @__PURE__ */ React.createElement(
       Popover,
       __spreadValues$1K({
         isOpen,
         onClose,
         initialFocusRef
       }, popoverProps),
-      /* @__PURE__ */ React$1.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React.createElement(
         IconButton,
         __spreadValues$1K({
           onClick: onToggle,
@@ -5763,10 +5763,10 @@
           name,
           sx: trigger,
           size,
-          icon: /* @__PURE__ */ React$1.createElement(Icon, { as: icons.ColorsDuo })
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.ColorsDuo })
         }, rest)
       )),
-      /* @__PURE__ */ React$1.createElement(RenderInPortal, { shouldRenderInPortal }, /* @__PURE__ */ React$1.createElement(react.PopoverContent, { w: "auto", boxShadow: "md", p: 2, bgColor: "background.default" }, /* @__PURE__ */ React$1.createElement(react.Stack, null, /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(RenderInPortal, { shouldRenderInPortal }, /* @__PURE__ */ React.createElement(react.PopoverContent, { w: "auto", boxShadow: "md", p: 2, bgColor: "background.default" }, /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(
         react.PopoverHeader,
         {
           color: "text.default",
@@ -5777,7 +5777,7 @@
           width: "full"
         },
         "Pick a color",
-        clearable && trigger.color !== "unset" && /* @__PURE__ */ React$1.createElement(
+        clearable && trigger.color !== "unset" && /* @__PURE__ */ React.createElement(
           Button,
           {
             size: "sm",
@@ -5787,7 +5787,7 @@
           },
           "Clear"
         )
-      ), /* @__PURE__ */ React$1.createElement(react.PopoverBody, { p: 0 }, /* @__PURE__ */ React$1.createElement(react.Stack, { alignItems: "center", p: 0, spacing: 0 }, /* @__PURE__ */ React$1.createElement(focus.FocusScope, null, /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(react.PopoverBody, { p: 0 }, /* @__PURE__ */ React.createElement(react.Stack, { alignItems: "center", p: 0, spacing: 0 }, /* @__PURE__ */ React.createElement(focus.FocusScope, null, /* @__PURE__ */ React.createElement(
         react.SimpleGrid,
         {
           columns: getNumberOfColumns(),
@@ -5798,7 +5798,7 @@
           pl: 4,
           py: 1
         },
-        visibleColors.map((color, index) => /* @__PURE__ */ React$1.createElement(
+        visibleColors.map((color, index) => /* @__PURE__ */ React.createElement(
           ColorButton,
           {
             color,
@@ -5809,7 +5809,7 @@
             onClick: () => handleSelect(color)
           }
         ))
-      ), expandedColors.length > 0 && /* @__PURE__ */ React$1.createElement(
+      ), expandedColors.length > 0 && /* @__PURE__ */ React.createElement(
         ColorsExpandButton,
         {
           onClick: expandColors,
@@ -5862,7 +5862,7 @@
       "isRequired",
       "validate"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -5871,7 +5871,7 @@
         isRequired,
         validate
       },
-      ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+      ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         ColorPicker,
         __spreadValues$1J({
           name,
@@ -5901,7 +5901,7 @@
     return a;
   };
   var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
-  const FlipButtonContext = React$1.createContext(null);
+  const FlipButtonContext = React.createContext(null);
   const useFlipButtonState = (props, isMulti) => isMulti ? checkbox.useCheckboxGroupState(props) : radio.useRadioGroupState(props);
   const useFlipButtonGroup = (props, state, isMulti) => {
     const propsWithLabel = __spreadProps$r(__spreadValues$1I({}, props), {
@@ -5972,8 +5972,8 @@
       "value",
       "iconPlacement"
     ]);
-    const state = React$1.useContext(FlipButtonContext);
-    const ref = React$1.useRef(null);
+    const state = React.useContext(FlipButtonContext);
+    const ref = React.useRef(null);
     const propsWithoutChildren = ramda.omit(["children"], __spreadProps$q(__spreadValues$1H({}, props), { "aria-label": `${isMulti ? "Checkbox" : "Radio"}-input for ${value}` }));
     const { inputProps } = isMulti ? checkbox$1.useCheckboxGroupItem(propsWithoutChildren, state, ref) : radio$1.useRadio(propsWithoutChildren, state, ref);
     const { button, buttonIcon } = react.useMultiStyleConfig("FlipButton", { size, variant });
@@ -6008,7 +6008,7 @@
       isMulti: isMulti || false,
       focusRing,
       value
-    }, rest)) : /* @__PURE__ */ React$1.createElement(
+    }, rest)) : /* @__PURE__ */ React.createElement(
       react.HStack,
       {
         spacing: isSelected && iconPlacement !== "none" || icon ? 2 : 0,
@@ -6017,9 +6017,9 @@
         "aria-disabled": isDisabled,
         as: "label"
       },
-      /* @__PURE__ */ React$1.createElement("input", __spreadValues$1H({}, flipButtonProps)),
-      icon && iconPlacement !== "none" ? /* @__PURE__ */ React$1.createElement(Icon, { as: icon || icons.CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React$1.createElement(react.SlideFade, { in: isSelected }, /* @__PURE__ */ React$1.createElement(Icon, { as: icon || icons.CheckSolid, sx: buttonIcon })),
-      /* @__PURE__ */ React$1.createElement(react.Text, { textAlign: "center" }, children)
+      /* @__PURE__ */ React.createElement("input", __spreadValues$1H({}, flipButtonProps)),
+      icon && iconPlacement !== "none" ? /* @__PURE__ */ React.createElement(Icon, { as: icon || icons.CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React.createElement(react.SlideFade, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon, { as: icon || icons.CheckSolid, sx: buttonIcon })),
+      /* @__PURE__ */ React.createElement(react.Text, { textAlign: "center" }, children)
     );
   };
 
@@ -6079,9 +6079,9 @@
       "sx"
     ]);
     const { state, flipButtonGroupProps } = useFlipButton(props, isMulti);
-    const numberOfButtons = React$1.Children.count(children);
-    const childrenWithProps = React$1.Children.toArray(children).map(
-      (child) => React$1.isValidElement(child) ? React$1.cloneElement(child, __spreadValues$1G({
+    const numberOfButtons = React.Children.count(children);
+    const childrenWithProps = React.Children.toArray(children).map(
+      (child) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$1G({
         key: child.props.value,
         isMulti,
         variant,
@@ -6098,7 +6098,7 @@
       sx
     });
     const restWithoutOnChange = ramda.omit(["onChange"], rest);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Stack,
       __spreadValues$1G(__spreadProps$p(__spreadValues$1G({}, flipButtonGroupProps), {
         direction,
@@ -6106,7 +6106,7 @@
         spacing: 0,
         sx: container
       }), restWithoutOnChange),
-      /* @__PURE__ */ React$1.createElement(FlipButtonContext.Provider, { value: state }, childrenWithProps)
+      /* @__PURE__ */ React.createElement(FlipButtonContext.Provider, { value: state }, childrenWithProps)
     );
   };
 
@@ -6138,7 +6138,7 @@
       }
     return target;
   };
-  const FlipButtonGroupField = React$1.forwardRef((_a, ref) => {
+  const FlipButtonGroupField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -6158,7 +6158,7 @@
       "onChange",
       "validate"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -6168,7 +6168,7 @@
         validate,
         ref
       },
-      ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+      ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         FlipButtonGroup,
         __spreadValues$1F({
           name,
@@ -6216,10 +6216,10 @@
   const hoverAndActiveStyles = {
     borderLeftColor: theme.colors.border["pane-divider"].hover
   };
-  const ResizeHandle = React$1.forwardRef(
+  const ResizeHandle = React.forwardRef(
     (_a, ref) => {
       var _b = _a, { color } = _b, rest = __objRest$1h(_b, ["color"]);
-      return /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(
         react.Box,
         __spreadValues$1E({
           ref,
@@ -6259,9 +6259,9 @@
   var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
   const Trigger = (props) => {
     const { isDisabled, handleClick } = props;
-    const ref = React$1.useRef(null);
+    const ref = React.useRef(null);
     const { buttonProps } = button.useButton(props, ref);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Button,
       __spreadProps$o(__spreadValues$1D({}, buttonProps), {
         ref,
@@ -6272,7 +6272,7 @@
         onPointerDown: handleClick,
         pointerEvents: isDisabled ? "none" : "auto"
       }),
-      /* @__PURE__ */ React$1.createElement(Icon, { as: icons.CalendarDuo })
+      /* @__PURE__ */ React.createElement(Icon, { as: icons.CalendarDuo })
     );
   };
 
@@ -6296,12 +6296,12 @@
   };
   var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
   const DateSegment = ({ segment, state }) => {
-    const ref = React$1.useRef(null);
+    const ref = React.useRef(null);
     const { segmentProps } = datepicker.useDateSegment(segment, state, ref);
     const isDivider = segment.type === "literal";
     const { dateSegment } = react.useMultiStyleConfig("DatePicker");
     const minWidth = `${String(segment.maxValue).length}ch`;
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Box,
       __spreadProps$n(__spreadValues$1C({}, segmentProps), {
         ref,
@@ -6343,7 +6343,7 @@
   };
   var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
   const DateField = (props) => {
-    const ref = React$1.useRef(null);
+    const ref = React.useRef(null);
     const state = datepicker$1.useDateFieldState(__spreadProps$m(__spreadValues$1B({}, props), {
       /* Hard coding the United Kingdom locale,
        this enforces using english characters e.g.
@@ -6361,7 +6361,7 @@
     const sortedSegments = ramda.split(delimeterIncluded, dateFormat).map(
       (query, index) => getMatchingSegment(query, index)
     );
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Box,
       __spreadProps$m(__spreadValues$1B({}, fieldProps), {
         ref,
@@ -6371,7 +6371,7 @@
       }),
       sortedSegments.map((segment, i) => {
         const id = `${segment.type}-${i}`;
-        return /* @__PURE__ */ React$1.createElement(DateSegment, { segment, state, key: id });
+        return /* @__PURE__ */ React.createElement(DateSegment, { segment, state, key: id });
       })
     );
   };
@@ -6407,11 +6407,11 @@
       }
     return target;
   };
-  const StyledField = React$1.forwardRef(
+  const StyledField = React.forwardRef(
     (_a, ref) => {
       var _b = _a, { isInvalid, isDisabled, children, variant } = _b, rest = __objRest$1g(_b, ["isInvalid", "isDisabled", "children", "variant"]);
       const { styledField } = react.useMultiStyleConfig("DatePicker", { variant });
-      return /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(
         react.Box,
         __spreadProps$l(__spreadValues$1A({}, rest), {
           ref,
@@ -6443,7 +6443,7 @@
       }
     return a;
   };
-  const Table = (props) => /* @__PURE__ */ React$1.createElement(react.Table, __spreadValues$1z({}, props));
+  const Table = (props) => /* @__PURE__ */ React.createElement(react.Table, __spreadValues$1z({}, props));
 
   var __defProp$1y = Object.defineProperty;
   var __defProps$k = Object.defineProperties;
@@ -6469,7 +6469,7 @@
     date: date$1,
     currentMonth
   }) => {
-    const ref = React$1.useRef(null);
+    const ref = React.useRef(null);
     const { cellProps, buttonProps, isSelected, formattedDate } = calendar.useCalendarCell(
       { date: date$1 },
       state,
@@ -6477,7 +6477,7 @@
     );
     const isToday = date$1.compare(date.today(state.timeZone)) === 0;
     const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
-    return /* @__PURE__ */ React$1.createElement(react.chakra.td, __spreadValues$1y({}, cellProps), /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.chakra.td, __spreadValues$1y({}, cellProps), /* @__PURE__ */ React.createElement(
       Button,
       __spreadProps$k(__spreadValues$1y({}, buttonProps), {
         ref,
@@ -6494,10 +6494,10 @@
     ));
   };
 
-  const DayLabels = React$1.memo(({ weekDays }) => {
+  const DayLabels = React.memo(({ weekDays }) => {
     const { dayLabel } = system.useMultiStyleConfig("Calendar");
     const weekDaysWithIds = weekDays.map((day, i) => ({ label: day, _id: i }));
-    return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, weekDaysWithIds.map(({ label, _id }) => /* @__PURE__ */ React$1.createElement(system.chakra.th, { key: _id, __css: dayLabel }, label)));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, weekDaysWithIds.map(({ label, _id }) => /* @__PURE__ */ React.createElement(system.chakra.th, { key: _id, __css: dayLabel }, label)));
   });
 
   const mondayFirstWeekDays = ["M", "T", "W", "T", "F", "S", "S"];
@@ -6532,16 +6532,16 @@
       }
     return target;
   };
-  const CalendarGrid = React$1.memo(
+  const CalendarGrid = React.memo(
     (_a) => {
       var _b = _a, { state, locale, firstDayOfWeek } = _b, rest = __objRest$1f(_b, ["state", "locale", "firstDayOfWeek"]);
       const startDate = state.visibleRange.start;
       const { gridProps, headerProps } = calendar.useCalendarGrid(rest, state);
       const weeksInMonth = date.getWeeksInMonth(startDate, locale);
       const weekDays = getWeekdays(firstDayOfWeek);
-      return /* @__PURE__ */ React$1.createElement(Table, __spreadValues$1x({ variant: "unstyled" }, gridProps), /* @__PURE__ */ React$1.createElement(react.Thead, __spreadValues$1x({}, headerProps), /* @__PURE__ */ React$1.createElement(react.Tr, null, /* @__PURE__ */ React$1.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React$1.createElement(react.Tbody, null, ramda.times(
-        (weekIndex) => /* @__PURE__ */ React$1.createElement(react.Tr, { key: weekIndex }, state.getDatesInWeek(weekIndex, startDate).map(
-          (date) => date ? /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(Table, __spreadValues$1x({ variant: "unstyled" }, gridProps), /* @__PURE__ */ React.createElement(react.Thead, __spreadValues$1x({}, headerProps), /* @__PURE__ */ React.createElement(react.Tr, null, /* @__PURE__ */ React.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React.createElement(react.Tbody, null, ramda.times(
+        (weekIndex) => /* @__PURE__ */ React.createElement(react.Tr, { key: weekIndex }, state.getDatesInWeek(weekIndex, startDate).map(
+          (date) => date ? /* @__PURE__ */ React.createElement(
             CalendarCell,
             {
               key: date.day,
@@ -6549,7 +6549,7 @@
               date,
               currentMonth: startDate
             }
-          ) : /* @__PURE__ */ React$1.createElement(react.chakra.td, null)
+          ) : /* @__PURE__ */ React.createElement(react.chakra.td, null)
         )),
         weeksInMonth
       )));
@@ -6589,9 +6589,9 @@
   };
   const MonthButton = (_a) => {
     var _b = _a, { children } = _b, rest = __objRest$1e(_b, ["children"]);
-    const ref = React$1.useRef(null);
+    const ref = React.useRef(null);
     const { buttonProps } = button.useButton(rest, ref);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Button,
       __spreadProps$j(__spreadValues$1w({}, buttonProps), {
         boxSize: 8,
@@ -6626,7 +6626,7 @@
       const diff = index - selectedMonth;
       state.setFocusedDate(state.visibleRange.start.add({ months: diff }));
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Select,
       {
         id: "month",
@@ -6640,7 +6640,7 @@
         w: "max-content",
         textAlign: "center"
       },
-      months.map((month, i) => /* @__PURE__ */ React$1.createElement("option", { value: i, key: `month-${i}` }, month))
+      months.map((month, i) => /* @__PURE__ */ React.createElement("option", { value: i, key: `month-${i}` }, month))
     );
   };
 
@@ -6649,7 +6649,7 @@
     years
   }) => {
     const { dateSelect } = react.useMultiStyleConfig("Calendar");
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Select,
       {
         id: "year",
@@ -6662,7 +6662,7 @@
         sx: dateSelect,
         w: "max-content"
       },
-      years.map((year, i) => /* @__PURE__ */ React$1.createElement("option", { key: year.formatted, value: i }, year.formatted))
+      years.map((year, i) => /* @__PURE__ */ React.createElement("option", { key: year.formatted, value: i }, year.formatted))
     );
   };
 
@@ -6701,7 +6701,7 @@
       const date = years[index].value;
       state.setFocusedDate(date);
     };
-    return /* @__PURE__ */ React$1.createElement(YearSelect, { onChange, years });
+    return /* @__PURE__ */ React.createElement(YearSelect, { onChange, years });
   };
 
   const YearSelectRangeCalendar = ({
@@ -6713,7 +6713,7 @@
       const date = years[index].value;
       state.setFocusedDate(date);
     };
-    return /* @__PURE__ */ React$1.createElement(YearSelect, { onChange, years });
+    return /* @__PURE__ */ React.createElement(YearSelect, { onChange, years });
   };
 
   const MILLISECONDS_PER_DAY = 864e5;
@@ -6788,8 +6788,8 @@
   }) => {
     const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
     if (isOutsideMonth)
-      return /* @__PURE__ */ React$1.createElement(react.chakra.td, null);
-    const ref = React$1.useRef(null);
+      return /* @__PURE__ */ React.createElement(react.chakra.td, null);
+    const ref = React.useRef(null);
     const {
       cellProps,
       buttonProps,
@@ -6799,7 +6799,7 @@
     const isToday = date$1.compare(date.today(state.timeZone)) === 0;
     const isHighlighted = range && date$1 < range.end && date$1 > range.start;
     const isSelected = range && !isHighlighted && (ramda.equals(date$1, range.start) || ramda.equals(date$1, range.end));
-    return /* @__PURE__ */ React$1.createElement(react.chakra.td, __spreadValues$1v({}, cellProps), /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.chakra.td, __spreadValues$1v({}, cellProps), /* @__PURE__ */ React.createElement(
       react.chakra.button,
       __spreadProps$i(__spreadValues$1v({}, buttonProps), {
         type: "button",
@@ -6887,19 +6887,19 @@
     const { gridProps, headerProps } = calendar.useCalendarGrid(rest, state);
     const weekDays = getWeekdays(firstDayOfWeek);
     const weeksInMonth = date.getWeeksInMonth(startDate, locale);
-    const weekNumberStart = React$1.useMemo(() => {
+    const weekNumberStart = React.useMemo(() => {
       const weekNumber = getWeekNumberAtStartOfMonth(startDate.year, startDate.month);
       return weekNumber;
     }, [startDate.year, startDate.month]);
-    return /* @__PURE__ */ React$1.createElement(react.Box, __spreadProps$h(__spreadValues$1u({}, calendarProps), { h: "265px", p: "0" }), /* @__PURE__ */ React$1.createElement(react.Stack, null, /* @__PURE__ */ React$1.createElement(react.Flex, { justify: "space-between", w: "full", p: "1", alignItems: "center" }, /* @__PURE__ */ React$1.createElement(MonthButton, __spreadValues$1u({}, prevButtonProps), /* @__PURE__ */ React$1.createElement(Icon, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React$1.createElement(react.HStack, { spacing: "0" }, /* @__PURE__ */ React$1.createElement(MonthSelect, { state }), /* @__PURE__ */ React$1.createElement(YearSelectRangeCalendar, { state })), /* @__PURE__ */ React$1.createElement(MonthButton, __spreadValues$1u({}, nextButtonProps), /* @__PURE__ */ React$1.createElement(Icon, { as: icons.ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React$1.createElement(react.chakra.table, __spreadProps$h(__spreadValues$1u({}, gridProps), { sx: { borderSpacing: "0" } }), /* @__PURE__ */ React$1.createElement(react.chakra.thead, __spreadValues$1u({}, headerProps), /* @__PURE__ */ React$1.createElement(react.chakra.tr, null, /* @__PURE__ */ React$1.createElement(react.chakra.th, null), /* @__PURE__ */ React$1.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React$1.createElement(react.chakra.tbody, null, ramda.times((weekIndex) => {
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$h(__spreadValues$1u({}, calendarProps), { h: "265px", p: "0" }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { justify: "space-between", w: "full", p: "1", alignItems: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1u({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(react.HStack, { spacing: "0" }, /* @__PURE__ */ React.createElement(MonthSelect, { state }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1u({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: icons.ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(react.chakra.table, __spreadProps$h(__spreadValues$1u({}, gridProps), { sx: { borderSpacing: "0" } }), /* @__PURE__ */ React.createElement(react.chakra.thead, __spreadValues$1u({}, headerProps), /* @__PURE__ */ React.createElement(react.chakra.tr, null, /* @__PURE__ */ React.createElement(react.chakra.th, null), /* @__PURE__ */ React.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React.createElement(react.chakra.tbody, null, ramda.times((weekIndex) => {
       const weekNumber = getDisplayWeek(
         weekNumberStart,
         weekIndex,
         startDate.year,
         startDate.month
       );
-      return /* @__PURE__ */ React$1.createElement(react.chakra.tr, { key: weekIndex }, /* @__PURE__ */ React$1.createElement(react.chakra.td, null, /* @__PURE__ */ React$1.createElement(Small, { sx: { color: "text.subdued" }, pr: "2" }, "w.", weekNumber)), state.getDatesInWeek(weekIndex, startDate).map(
-        (date) => date ? /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(react.chakra.tr, { key: weekIndex }, /* @__PURE__ */ React.createElement(react.chakra.td, null, /* @__PURE__ */ React.createElement(Small, { sx: { color: "text.subdued" }, pr: "2" }, "w.", weekNumber)), state.getDatesInWeek(weekIndex, startDate).map(
+        (date) => date ? /* @__PURE__ */ React.createElement(
           RangeCell,
           {
             key: date.day,
@@ -6908,7 +6908,7 @@
             date,
             currentMonth: startDate
           }
-        ) : /* @__PURE__ */ React$1.createElement(react.chakra.td, null)
+        ) : /* @__PURE__ */ React.createElement(react.chakra.td, null)
       ));
     }, weeksInMonth)))));
   };
@@ -6944,7 +6944,7 @@
       props,
       state
     );
-    return /* @__PURE__ */ React$1.createElement(react.Box, __spreadProps$g(__spreadValues$1t({}, calendarProps), { __css: container }), /* @__PURE__ */ React$1.createElement(react.Stack, null, /* @__PURE__ */ React$1.createElement(react.Flex, { justifyContent: "space-between" }, /* @__PURE__ */ React$1.createElement(react.Box, { paddingInlineStart: "2" }, /* @__PURE__ */ React$1.createElement(YearSelectCalendar, { state })), /* @__PURE__ */ React$1.createElement(react.HStack, { spacing: 2 }, /* @__PURE__ */ React$1.createElement(MonthButton, __spreadValues$1t({}, prevButtonProps), /* @__PURE__ */ React$1.createElement(Icon, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React$1.createElement(MonthButton, __spreadValues$1t({}, nextButtonProps), /* @__PURE__ */ React$1.createElement(Icon, { as: icons.ChevronRightSolid, boxSize: 4 })))), /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$g(__spreadValues$1t({}, calendarProps), { __css: container }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(react.Box, { paddingInlineStart: "2" }, /* @__PURE__ */ React.createElement(YearSelectCalendar, { state })), /* @__PURE__ */ React.createElement(react.HStack, { spacing: 2 }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: icons.ChevronRightSolid, boxSize: 4 })))), /* @__PURE__ */ React.createElement(
       CalendarGrid,
       {
         state,
@@ -6959,7 +6959,7 @@
     children
   }) => {
     const locale = firstDayOfWeek === "monday" ? "en-DE" : "en-US";
-    return /* @__PURE__ */ React$1.createElement(i18n.I18nProvider, { locale }, children);
+    return /* @__PURE__ */ React.createElement(i18n.I18nProvider, { locale }, children);
   };
 
   var __defProp$1s = Object.defineProperty;
@@ -6992,7 +6992,7 @@
       variant = "outline",
       firstDayOfWeek = "monday"
     } = props;
-    const ref = React$1.useRef();
+    const ref = React.useRef();
     const { group } = react.useMultiStyleConfig("DatePicker");
     const state = datepicker$1.useDatePickerState(__spreadProps$f(__spreadValues$1s({}, props), {
       shouldCloseOnSelect: false,
@@ -7004,35 +7004,35 @@
       ref
     );
     const togglePopup = () => state.setOpen(!state.isOpen);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Popover,
       {
         isOpen: state.isOpen,
         onClose: () => state.setOpen(false),
         placement: "bottom-end"
       },
-      /* @__PURE__ */ React$1.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React$1.createElement(react.HStack, { minW: 56 }, /* @__PURE__ */ React$1.createElement(react.InputGroup, __spreadProps$f(__spreadValues$1s({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React.createElement(react.HStack, { minW: 56 }, /* @__PURE__ */ React.createElement(react.InputGroup, __spreadProps$f(__spreadValues$1s({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
         StyledField,
         {
           isDisabled,
           isInvalid,
           variant
         },
-        /* @__PURE__ */ React$1.createElement(react.Box, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React$1.createElement(DateField, __spreadProps$f(__spreadValues$1s({}, fieldProps), { dateFormat })))
-      ), /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(react.Box, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(DateField, __spreadProps$f(__spreadValues$1s({}, fieldProps), { dateFormat })))
+      ), /* @__PURE__ */ React.createElement(
         react.InputRightElement,
         {
           sx: { height: "100%", paddingRight: "1" },
           zIndex: 0
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           Trigger,
           __spreadProps$f(__spreadValues$1s({}, buttonProps), {
             isDisabled,
             handleClick: togglePopup
           })
         )
-      )), /* @__PURE__ */ React$1.createElement(
+      )), /* @__PURE__ */ React.createElement(
         IconButton,
         {
           "aria-label": "reset-date",
@@ -7042,10 +7042,10 @@
           onClick: resetDate,
           hidden: !state.dateValue || !isClearable,
           isDisabled,
-          icon: /* @__PURE__ */ React$1.createElement(Icon, { as: icons.XCloseSolid })
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.XCloseSolid })
         }
       ))),
-      state.isOpen && /* @__PURE__ */ React$1.createElement(react.PopoverContent, __spreadProps$f(__spreadValues$1s({}, dialogProps), { ref, w: 64, border: "none" }), /* @__PURE__ */ React$1.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React$1.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React$1.createElement(Calendar, __spreadProps$f(__spreadValues$1s({}, calendarProps), { firstDayOfWeek })))))
+      state.isOpen && /* @__PURE__ */ React.createElement(react.PopoverContent, __spreadProps$f(__spreadValues$1s({}, dialogProps), { ref, w: 64, border: "none" }), /* @__PURE__ */ React.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(Calendar, __spreadProps$f(__spreadValues$1s({}, calendarProps), { firstDayOfWeek })))))
     );
   };
 
@@ -7080,7 +7080,7 @@
   const Clickable = (_a) => {
     var _b = _a, { href, linkProps } = _b, rest = __objRest$1c(_b, ["href", "linkProps"]);
     const clickable$1 = clickable.useClickable(rest);
-    return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, !ramda.isNil(href) && /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, !ramda.isNil(href) && /* @__PURE__ */ React.createElement(
       react.Link,
       __spreadValues$1r(__spreadValues$1r({
         as: reactRouterDom.Link,
@@ -7088,14 +7088,14 @@
         to: href,
         _hover: { textDecoration: "none" }
       }, linkProps), clickable$1)
-    ), ramda.isNil(href) && /* @__PURE__ */ React$1.createElement(react.chakra.button, __spreadValues$1r({ _focusVisible: ring }, clickable$1)));
+    ), ramda.isNil(href) && /* @__PURE__ */ React.createElement(react.chakra.button, __spreadValues$1r({ _focusVisible: ring }, clickable$1)));
   };
 
   const DateButton = ({
     isActive,
     onClick,
     children
-  }) => /* @__PURE__ */ React$1.createElement(react.Flex, { maxW: "120px" }, /* @__PURE__ */ React$1.createElement(Clickable, { onClick }, /* @__PURE__ */ React$1.createElement(
+  }) => /* @__PURE__ */ React.createElement(react.Flex, { maxW: "120px" }, /* @__PURE__ */ React.createElement(Clickable, { onClick }, /* @__PURE__ */ React.createElement(
     Label,
     {
       _hover: {
@@ -7350,7 +7350,7 @@
     locale = "",
     height = "17.5rem"
   }) => {
-    const { quickDates, fiscalQuarters } = React$1.useMemo(
+    const { quickDates, fiscalQuarters } = React.useMemo(
       () => getQuickSelectOptions(state, locale, fiscalStartMonth, fiscalStartDay),
       []
     );
@@ -7362,7 +7362,7 @@
     };
     const getIsActive = (newDate) => ramda.equals(state.value, newDate.value);
     const shouldShow = (dates) => ramda.any((date) => validRange(date.value, state), dates);
-    return /* @__PURE__ */ React$1.createElement(react.Stack, { alignItems: "start", borderRight: seperator, pt: "2" }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Stack, { alignItems: "start", borderRight: seperator, pt: "2" }, /* @__PURE__ */ React.createElement(
       react.Stack,
       {
         h: height,
@@ -7373,7 +7373,7 @@
         display: shouldShow(quickDates) ? "initial" : "none"
       },
       ramda.map(
-        (quickDate) => validRange(quickDate.value, state) && /* @__PURE__ */ React$1.createElement(react.Box, { minH: "20px", key: `quick-select-${quickDate.label}` }, /* @__PURE__ */ React$1.createElement(
+        (quickDate) => validRange(quickDate.value, state) && /* @__PURE__ */ React.createElement(react.Box, { minH: "20px", key: `quick-select-${quickDate.label}` }, /* @__PURE__ */ React.createElement(
           DateButton,
           {
             onClick: updateDate(quickDate.value),
@@ -7383,14 +7383,14 @@
         )),
         quickDates
       )
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       react.Box,
       {
         w: "50%",
         borderTop: seperator,
         display: shouldShow(fiscalQuarters) ? "initial" : "none"
       }
-    ), /* @__PURE__ */ React$1.createElement(react.Spacer, null), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(react.Spacer, null), /* @__PURE__ */ React.createElement(
       react.Flex,
       {
         justifyContent: "space-between",
@@ -7400,7 +7400,7 @@
         display: shouldShow(fiscalQuarters) ? "flex" : "none"
       },
       ramda.map(
-        (quarter) => validRange(quarter.value, state) && /* @__PURE__ */ React$1.createElement(
+        (quarter) => validRange(quarter.value, state) && /* @__PURE__ */ React.createElement(
           DateButton,
           {
             onClick: updateDate(quarter.value),
@@ -7452,7 +7452,7 @@
       buttonLabel = "Save"
     } = props;
     const { locale } = i18n.useLocale();
-    const ref = React$1.useRef(null);
+    const ref = React.useRef(null);
     const { rangeCalendarContainer } = react.useMultiStyleConfig("Calendar");
     const calendarOneState = calendar$1.useCalendarState({
       value: value && value.start ? value.start : null,
@@ -7499,7 +7499,7 @@
       onSave == null ? void 0 : onSave();
       handleClose();
     };
-    return /* @__PURE__ */ React$1.createElement(react.Box, { ref, __css: rangeCalendarContainer }, /* @__PURE__ */ React$1.createElement(react.Stack, null, /* @__PURE__ */ React$1.createElement(react.Flex, { gap: 4 }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { ref, __css: rangeCalendarContainer }, /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { gap: 4 }, /* @__PURE__ */ React.createElement(
       QuickSelect,
       {
         state,
@@ -7507,21 +7507,21 @@
         fiscalStartMonth,
         fiscalStartDay
       }
-    ), /* @__PURE__ */ React$1.createElement(react.Stack, null, /* @__PURE__ */ React$1.createElement(react.HStack, { alignItems: "start", spacing: 8, h: "full", pt: "2" }, /* @__PURE__ */ React$1.createElement(react.Stack, __spreadValues$1q({ h: "full" }, focusedStartMonthProps), /* @__PURE__ */ React$1.createElement(react.Box, { p: "2" }, /* @__PURE__ */ React$1.createElement(Label, { size: "xs" }, "Start date:"), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "start", spacing: 8, h: "full", pt: "2" }, /* @__PURE__ */ React.createElement(react.Stack, __spreadValues$1q({ h: "full" }, focusedStartMonthProps), /* @__PURE__ */ React.createElement(react.Box, { p: "2" }, /* @__PURE__ */ React.createElement(Label, { size: "xs" }, "Start date:"), /* @__PURE__ */ React.createElement(
       StandaloneCalendarGrid,
       {
         state: calendarOneState,
         range: value,
         firstDayOfWeek
       }
-    ))), /* @__PURE__ */ React$1.createElement(react.Stack, { h: "full", justify: "space-between" }, /* @__PURE__ */ React$1.createElement(react.Stack, { opacity: value && value.start ? "1" : "0.4" }, /* @__PURE__ */ React$1.createElement(react.Box, { p: "2" }, /* @__PURE__ */ React$1.createElement(Label, { size: "xs" }, "End date:"), /* @__PURE__ */ React$1.createElement(
+    ))), /* @__PURE__ */ React.createElement(react.Stack, { h: "full", justify: "space-between" }, /* @__PURE__ */ React.createElement(react.Stack, { opacity: value && value.start ? "1" : "0.4" }, /* @__PURE__ */ React.createElement(react.Box, { p: "2" }, /* @__PURE__ */ React.createElement(Label, { size: "xs" }, "End date:"), /* @__PURE__ */ React.createElement(
       StandaloneCalendarGrid,
       {
         state: calendarTwoState,
         range: value,
         firstDayOfWeek
       }
-    ))), /* @__PURE__ */ React$1.createElement(react.HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React$1.createElement(Button, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React$1.createElement(Button, { variant: "brand", onClick: handleSave, size: "sm" }, buttonLabel))))))));
+    ))), /* @__PURE__ */ React.createElement(react.HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React.createElement(Button, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button, { variant: "brand", onClick: handleSave, size: "sm" }, buttonLabel))))))));
   };
 
   const isValidDateRange = (value) => ramda.is(Object, value) && ramda.has("startDate", value) && ramda.has("endDate", value) && ramda.is(String, value.startDate) && ramda.is(String, value.endDate);
@@ -7555,9 +7555,9 @@
     children
   }) => {
     if (renderInPortal) {
-      return /* @__PURE__ */ React$1.createElement(react.Portal, null, children);
+      return /* @__PURE__ */ React.createElement(react.Portal, null, children);
     }
-    return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, children);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
   };
   const DateRangePicker = (props) => {
     const {
@@ -7578,7 +7578,7 @@
       onSave,
       buttonLabel = "Save"
     } = props;
-    const ref = React$1.useRef();
+    const ref = React.useRef();
     const { group } = react.useMultiStyleConfig("DatePicker");
     const parsedProps = {
       onChange: (date) => {
@@ -7617,28 +7617,28 @@
       ref,
       handler: () => state.setOpen(false)
     });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Popover,
       {
         isOpen: state.isOpen,
         onClose: handleClose,
         placement: "bottom-start"
       },
-      /* @__PURE__ */ React$1.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React$1.createElement(react.HStack, null, /* @__PURE__ */ React$1.createElement(react.InputGroup, __spreadProps$e(__spreadValues$1p({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React.createElement(react.HStack, null, /* @__PURE__ */ React.createElement(react.InputGroup, __spreadProps$e(__spreadValues$1p({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
         StyledField,
         {
           isDisabled,
           isInvalid,
           variant
         },
-        /* @__PURE__ */ React$1.createElement(react.HStack, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React$1.createElement(DateField, __spreadProps$e(__spreadValues$1p({}, startFieldProps), { dateFormat })), /* @__PURE__ */ React$1.createElement(P, null, "-"), /* @__PURE__ */ React$1.createElement(DateField, __spreadProps$e(__spreadValues$1p({}, endFieldProps), { dateFormat })))
-      ), /* @__PURE__ */ React$1.createElement(react.InputRightElement, { sx: { height: "100%", paddingRight: "1" } }, /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(react.HStack, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(DateField, __spreadProps$e(__spreadValues$1p({}, startFieldProps), { dateFormat })), /* @__PURE__ */ React.createElement(P, null, "-"), /* @__PURE__ */ React.createElement(DateField, __spreadProps$e(__spreadValues$1p({}, endFieldProps), { dateFormat })))
+      ), /* @__PURE__ */ React.createElement(react.InputRightElement, { sx: { height: "100%", paddingRight: "1" } }, /* @__PURE__ */ React.createElement(
         Trigger,
         __spreadProps$e(__spreadValues$1p({}, buttonProps), {
           isDisabled,
           handleClick: togglePopup
         })
-      ))), /* @__PURE__ */ React$1.createElement(
+      ))), /* @__PURE__ */ React.createElement(
         IconButton,
         {
           "aria-label": "reset-date",
@@ -7648,10 +7648,10 @@
           onClick: resetDate,
           hidden: !isClearable,
           isDisabled,
-          icon: /* @__PURE__ */ React$1.createElement(Icon, { as: icons.XCloseSolid })
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.XCloseSolid })
         }
       ))),
-      /* @__PURE__ */ React$1.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React$1.createElement(react.PopoverContent, __spreadProps$e(__spreadValues$1p({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React$1.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React$1.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React.createElement(react.PopoverContent, __spreadProps$e(__spreadValues$1p({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(
         RangeCalendar,
         __spreadProps$e(__spreadValues$1p({}, calendarProps), {
           resetDate,
@@ -7706,7 +7706,7 @@
       "children"
     ]);
     const containsInputGroupElement = ramda.not(ramda.all(ramda.isNil, [inputLeftElement, inputRightElement]));
-    return containsInputGroupElement ? /* @__PURE__ */ React$1.createElement(react.InputGroup, __spreadValues$1o({}, rest), inputLeftElement, children, inputRightElement) : /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, children);
+    return containsInputGroupElement ? /* @__PURE__ */ React.createElement(react.InputGroup, __spreadValues$1o({}, rest), inputLeftElement, children, inputRightElement) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
   };
 
   var __defProp$1n = Object.defineProperty;
@@ -7737,7 +7737,7 @@
       }
     return target;
   };
-  const DatePickerField = React$1.forwardRef((_a, ref) => {
+  const DatePickerField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       minValue,
@@ -7776,7 +7776,7 @@
       }
       onChangeCallback(date$1);
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -7786,13 +7786,13 @@
         validate,
         ref
       },
-      ({ value, onChange }, { formState: { errors } }) => /* @__PURE__ */ React$1.createElement(
+      ({ value, onChange }, { formState: { errors } }) => /* @__PURE__ */ React.createElement(
         InputGroupWrapper,
         {
           inputLeftElement,
           inputRightElement
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           DatePicker,
           __spreadValues$1n({
             firstDayOfWeek,
@@ -7838,7 +7838,7 @@
       }
     return target;
   };
-  const DateRangePickerField = React$1.forwardRef((_a, ref) => {
+  const DateRangePickerField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       minValue,
@@ -7879,7 +7879,7 @@
       }
       onChangeCallback(dateRange);
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -7889,7 +7889,7 @@
         validate,
         ref
       },
-      ({ value, onChange }, { formState: { errors } }) => /* @__PURE__ */ React$1.createElement(
+      ({ value, onChange }, { formState: { errors } }) => /* @__PURE__ */ React.createElement(
         DateRangePicker,
         __spreadValues$1m({
           firstDayOfWeek,
@@ -7964,7 +7964,7 @@
     ]);
     const iconVariant = variant;
     const icon = tooltipIconMap[iconVariant];
-    const TooltipContent = /* @__PURE__ */ React$1.createElement(react.HStack, { alignItems: "flex-start" }, hasIcon && /* @__PURE__ */ React$1.createElement(Icon, { as: icon, color: `icon.toast.${iconVariant}` }), /* @__PURE__ */ React$1.createElement(react.VStack, { spacing: 0, alignItems: "flex-start" }, /* @__PURE__ */ React$1.createElement(Label, { size: "sm" }, title), /* @__PURE__ */ React$1.createElement(
+    const TooltipContent = /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "flex-start" }, hasIcon && /* @__PURE__ */ React.createElement(Icon, { as: icon, color: `icon.toast.${iconVariant}` }), /* @__PURE__ */ React.createElement(react.VStack, { spacing: 0, alignItems: "flex-start" }, /* @__PURE__ */ React.createElement(Label, { size: "sm" }, title), /* @__PURE__ */ React.createElement(
       P,
       {
         variant: "14",
@@ -7974,7 +7974,7 @@
       },
       description
     )));
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Tooltip,
       __spreadValues$1l({
         hasArrow,
@@ -8026,7 +8026,7 @@
     const SVG_SIZE = 2 * (RADIUS + STROKE_WIDTH);
     const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
     const strokeDashoffset = CIRCUMFERENCE - progress / 100 * CIRCUMFERENCE;
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Circle,
       __spreadValues$1k({
         as: "svg",
@@ -8036,7 +8036,7 @@
           transform: "rotate(-90deg)"
         }
       }, rest),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         system.chakra.circle,
         {
           cx: SVG_SIZE / 2,
@@ -8047,7 +8047,7 @@
           strokeWidth: STROKE_WIDTH
         }
       ),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         system.chakra.circle,
         {
           cx: SVG_SIZE / 2,
@@ -8109,9 +8109,9 @@
       "tooltipText",
       "aria-label"
     ]);
-    const [progress, setProgress] = React$1.useState(0);
-    const [isHovering, setIsHovering] = React$1.useState(false);
-    const timerRef = React$1.useRef(void 0);
+    const [progress, setProgress] = React.useState(0);
+    const [isHovering, setIsHovering] = React.useState(false);
+    const timerRef = React.useRef(void 0);
     const clearTimer = () => {
       if (timerRef.current) {
         clearInterval(timerRef.current);
@@ -8119,7 +8119,7 @@
       }
       setProgress(0);
     };
-    React$1.useEffect(() => clearTimer, []);
+    React.useEffect(() => clearTimer, []);
     const startTimer = () => {
       clearTimer();
       const startTime = Date.now();
@@ -8141,7 +8141,7 @@
       setIsHovering(false);
       clearTimer();
     };
-    return /* @__PURE__ */ React$1.createElement(Tooltip, { label: tooltipText, placement: "top" }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(Tooltip, { label: tooltipText, placement: "top" }, /* @__PURE__ */ React.createElement(
       react.Center,
       __spreadValues$1j({
         position: "relative",
@@ -8153,16 +8153,16 @@
         boxSize: "50px",
         opacity: `${(100 - progress) / 100}`
       }, rest),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         IconButton,
         {
-          icon: /* @__PURE__ */ React$1.createElement(Icon, { as: icon }),
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: icon }),
           size: "md",
           "aria-label": ariaLabel,
           variant: "ghost"
         }
       ),
-      isHovering && /* @__PURE__ */ React$1.createElement(
+      isHovering && /* @__PURE__ */ React.createElement(
         TimeoutProgressCircle,
         {
           ringColor,
@@ -8213,8 +8213,8 @@
     return { offsetX: defaultOffset, offsetY: defaultOffset };
   };
   const useDelay = (show, enterDelay, exitDelay) => {
-    const [showWithDelay, setShowWithDelay] = React$1.useState(false);
-    React$1.useEffect(() => {
+    const [showWithDelay, setShowWithDelay] = React.useState(false);
+    React.useEffect(() => {
       const ref = setTimeout(
         () => setShowWithDelay(show),
         show ? enterDelay : exitDelay
@@ -8224,8 +8224,8 @@
     return showWithDelay;
   };
   const useHiddenDisplay = (anchor = false, exitDelay = 0, exitDuration = 0, duration = 0, onTransitionComplete = ramda.identity) => {
-    const [hidden, setHidden] = React$1.useState(anchor);
-    React$1.useEffect(() => {
+    const [hidden, setHidden] = React.useState(anchor);
+    React.useEffect(() => {
       const ref = setTimeout(() => {
         setHidden(anchor);
         onTransitionComplete(anchor);
@@ -8291,7 +8291,7 @@
     const showWithDelay = useDelay(show, enterDelay, exitDelay);
     const isHidden = useHiddenDisplay(show, exitDelay, exitDuration, duration, onTransitionComplete);
     const childrenWithProps = getChildrenWithFocus(children, disableFocus, isHidden);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Fade,
       __spreadValues$1i({
         in: showWithDelay,
@@ -8358,7 +8358,7 @@
     const showWithDelay = useDelay(show, enterDelay, exitDelay);
     const isHidden = useHiddenDisplay(show, exitDelay, exitDuration, duration, onTransitionComplete);
     const childrenWithProps = getChildrenWithFocus(children, disableFocus, isHidden);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.ScaleFade,
       __spreadValues$1h({
         in: showWithDelay,
@@ -8427,7 +8427,7 @@
     const showWithDelay = useDelay(show, enterDelay, exitDelay);
     const isHidden = useHiddenDisplay(show, exitDelay, exitDuration, duration, onTransitionComplete);
     const childrenWithProps = getChildrenWithFocus(children, disableFocus, isHidden);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Slide,
       __spreadValues$1g({
         in: showWithDelay,
@@ -8504,7 +8504,7 @@
     const showWithDelay = useDelay(show, enterDelay, exitDelay);
     const isHidden = useHiddenDisplay(show, exitDelay, exitDuration, duration, onTransitionComplete);
     const childrenWithProps = getChildrenWithFocus(children, disableFocus, isHidden);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.SlideFade,
       __spreadValues$1f({
         in: showWithDelay,
@@ -8573,7 +8573,7 @@
     const showWithDelay = useDelay(show, enterDelay, exitDelay);
     const isHidden = useHiddenDisplay(show, exitDelay, exitDuration, duration, onTransitionComplete);
     const childrenWithProps = getChildrenWithFocus(children, disableFocus, isHidden);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Collapse,
       __spreadValues$1e({
         in: showWithDelay,
@@ -8664,13 +8664,13 @@
       defaultWidthPx,
       stationaryEdge: direction
     });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Box,
       {
         w: adjustableWidth,
         display: isOpen && shouldPush ? "initial" : "none"
       },
-      /* @__PURE__ */ React$1.createElement(react.Portal, null, /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.Portal, null, /* @__PURE__ */ React.createElement(
         Slide,
         {
           direction,
@@ -8681,7 +8681,7 @@
             zIndex
           }
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           react.Flex,
           __spreadValues$1d({
             sx: __spreadProps$d(__spreadValues$1d({}, container), { w: adjustableWidth }),
@@ -8690,8 +8690,8 @@
             overflow: "hidden",
             direction: direction === "left" ? "row-reverse" : "row"
           }, rest),
-          isResizable && /* @__PURE__ */ React$1.createElement(ResizeHandle, __spreadValues$1d({}, resizeProps)),
-          /* @__PURE__ */ React$1.createElement(focus.FocusScope, { autoFocus }, /* @__PURE__ */ React$1.createElement(react.VStack, { w: "full", h: "full", alignItems: "normal" }, newChildren))
+          isResizable && /* @__PURE__ */ React.createElement(ResizeHandle, __spreadValues$1d({}, resizeProps)),
+          /* @__PURE__ */ React.createElement(focus.FocusScope, { autoFocus }, /* @__PURE__ */ React.createElement(react.VStack, { w: "full", h: "full", alignItems: "normal" }, newChildren))
         )
       ))
     );
@@ -8734,7 +8734,7 @@
       "onClose"
     ]);
     const { header } = system.useMultiStyleConfig("Toolbox", {});
-    return /* @__PURE__ */ React$1.createElement(react.Flex, __spreadValues$1c({ sx: header }, rest), typeof children === "string" ? /* @__PURE__ */ React$1.createElement(H4, null, children) : children, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Flex, __spreadValues$1c({ sx: header }, rest), typeof children === "string" ? /* @__PURE__ */ React.createElement(H4, null, children) : children, /* @__PURE__ */ React.createElement(
       react.CloseButton,
       {
         "aria-label": "Close toolbox",
@@ -8776,7 +8776,7 @@
   const ToolboxContent = (_a) => {
     var _b = _a, { sx = {}, children } = _b, rest = __objRest$_(_b, ["sx", "children"]);
     const { body } = system.useMultiStyleConfig("Toolbox", {});
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Flex,
       __spreadValues$1b({
         sx: ramda.merge(body, sx)
@@ -8816,7 +8816,7 @@
   const ToolboxFooter = (_a) => {
     var _b = _a, { children } = _b, rest = __objRest$Z(_b, ["children"]);
     const { footer } = system.useMultiStyleConfig("Toolbox", {});
-    return /* @__PURE__ */ React$1.createElement(react.Flex, __spreadValues$1a({ sx: footer }, rest), children);
+    return /* @__PURE__ */ React.createElement(react.Flex, __spreadValues$1a({ sx: footer }, rest), children);
   };
 
   var __defProp$19 = Object.defineProperty;
@@ -8859,7 +8859,7 @@
       "name",
       "value"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Radio,
       __spreadValues$19({
         size,
@@ -8908,7 +8908,7 @@
       "children",
       "name"
     ]);
-    return /* @__PURE__ */ React$1.createElement(react.RadioGroup, __spreadValues$18({ name, id: name }, rest), /* @__PURE__ */ React$1.createElement(react.Stack, { direction }, children));
+    return /* @__PURE__ */ React.createElement(react.RadioGroup, __spreadValues$18({ name, id: name }, rest), /* @__PURE__ */ React.createElement(react.Stack, { direction }, children));
   };
 
   var __defProp$17 = Object.defineProperty;
@@ -8939,7 +8939,7 @@
       }
     return target;
   };
-  const RadioGroupField = React$1.forwardRef((_a, ref) => {
+  const RadioGroupField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -8957,7 +8957,7 @@
       "validate",
       "onChange"
     ]);
-    return /* @__PURE__ */ React$1.createElement(react.Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -8967,7 +8967,7 @@
         validate,
         ref
       },
-      ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+      ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         RadioGroup,
         __spreadValues$17({
           name,
@@ -8996,7 +8996,7 @@
     isActive = false,
     itemWidth = carouselItemWidth,
     itemHeight = carouselItemWidth
-  }) => /* @__PURE__ */ React$1.createElement(framerMotion.motion.div, { animate: isActive ? "active" : "inActive", variants }, /* @__PURE__ */ React$1.createElement(react.Center, { minW: `${itemWidth}px`, h: `${itemHeight}px ` }, children));
+  }) => /* @__PURE__ */ React.createElement(framerMotion.motion.div, { animate: isActive ? "active" : "inActive", variants }, /* @__PURE__ */ React.createElement(react.Center, { minW: `${itemWidth}px`, h: `${itemHeight}px ` }, children));
 
   var __defProp$16 = Object.defineProperty;
   var __getOwnPropSymbols$16 = Object.getOwnPropertySymbols;
@@ -9035,13 +9035,13 @@
       "direction"
     ]);
     const { arrow } = react.useMultiStyleConfig("Carousel", {});
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Center,
       __spreadValues$16({
         sx: arrow,
         onClick
       }, rest),
-      /* @__PURE__ */ React$1.createElement(IconButton, { "aria-label": `move carousel to ${direction}`, variant: "ghost", size: "lg" }, /* @__PURE__ */ React$1.createElement(Icon, { as: direction === "right" ? icons.ChevronRightSolid : icons.ChevronLeftSolid }))
+      /* @__PURE__ */ React.createElement(IconButton, { "aria-label": `move carousel to ${direction}`, variant: "ghost", size: "lg" }, /* @__PURE__ */ React.createElement(Icon, { as: direction === "right" ? icons.ChevronRightSolid : icons.ChevronLeftSolid }))
     );
   };
 
@@ -9095,28 +9095,28 @@
       "spacing",
       "carouselStyles"
     ]);
-    const [dragging, setDragging] = React$1.useState(false);
-    const [containerWidth, setContainerWidth] = React$1.useState(0);
-    const [activeIndex, setActiveIndex] = React$1.useState(0);
+    const [dragging, setDragging] = React.useState(false);
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    const [activeIndex, setActiveIndex] = React.useState(0);
     const x = framerMotion.useMotionValue(0);
     const { radio, container } = react.useMultiStyleConfig("Carousel", {});
-    const childrenAsArray = React$1.Children.toArray(children);
-    const numberOfChildren = React$1.Children.count(children);
+    const childrenAsArray = React.Children.toArray(children);
+    const numberOfChildren = React.Children.count(children);
     const carouselTotalWidth = itemWidth + spacing;
     const totalWidth = carouselTotalWidth * numberOfChildren;
-    const containerRef = React$1.useRef(null);
-    React$1.useEffect(() => {
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
       setContainerWidth(containerRef.current.clientWidth);
     }, []);
     const getNewX = () => -(activeIndex * carouselTotalWidth);
     const updateActiveIndex = () => {
       setActiveIndex(Math.abs(Math.round(x.get() / carouselTotalWidth)));
     };
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       framerMotion.animate(x, getNewX());
       onChange(activeIndex);
     }, [activeIndex]);
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       setActiveIndex(controlledIndex);
     }, [controlledIndex]);
     const handleRightArrowClick = () => {
@@ -9129,7 +9129,7 @@
         (prev) => activeIndex === 0 ? numberOfChildren - 1 : prev - 1
       );
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Box,
       __spreadValues$15({
         cursor: dragging ? "grabbing" : "grab",
@@ -9139,7 +9139,7 @@
         pl: `${(containerWidth - itemWidth) / 2}px`,
         sx: container
       }, rest),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         framerMotion.motion.div,
         {
           drag: "x",
@@ -9151,14 +9151,14 @@
           dragConstraints: { right: 0, left: -(totalWidth - itemWidth) },
           onDragEnd: updateActiveIndex
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           react.HStack,
           __spreadValues$15({
             spacing: `${spacing}px`,
             width: `${totalWidth}px`,
             h: "full"
           }, carouselStyles),
-          childrenAsArray.map((child, index) => /* @__PURE__ */ React$1.createElement(
+          childrenAsArray.map((child, index) => /* @__PURE__ */ React.createElement(
             CarouselItem,
             {
               isActive: index === activeIndex,
@@ -9170,14 +9170,14 @@
           ))
         )
       ),
-      showRadio && /* @__PURE__ */ React$1.createElement(
+      showRadio && /* @__PURE__ */ React.createElement(
         RadioGroup,
         {
           onChange: (val) => setActiveIndex(parseInt(val, 10)),
           value: `${activeIndex}`,
           sx: radio
         },
-        /* @__PURE__ */ React$1.createElement(react.HStack, null, childrenAsArray.map((_child, i) => /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(react.HStack, null, childrenAsArray.map((_child, i) => /* @__PURE__ */ React.createElement(
           Radio,
           {
             value: `${i}`,
@@ -9186,14 +9186,14 @@
           }
         )))
       ),
-      showArrows && /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(
+      showArrows && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
         CarouselArrow,
         {
           direction: "left",
           onClick: handleLeftArrowClick,
           left: "2"
         }
-      ), /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(
         CarouselArrow,
         {
           direction: "right",
@@ -9288,17 +9288,17 @@
   function getComponents(components) {
     return ramda.merge(
       {
-        Menu: (props) => /* @__PURE__ */ React$1.createElement(react.Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React$1.createElement(chakraReactSelect.chakraComponents.Menu, __spreadValues$13({}, props), props.children)),
-        DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React$1.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$13({}, props), /* @__PURE__ */ React$1.createElement(Icon, { as: props.selectProps.icon })) : /* @__PURE__ */ React$1.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$13({}, props)),
-        Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React$1.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$13({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React$1.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$13({}, props)),
-        MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React$1.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$13({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React$1.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$13({}, props)),
+        Menu: (props) => /* @__PURE__ */ React.createElement(react.Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Menu, __spreadValues$13({}, props), props.children)),
+        DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$13({}, props), /* @__PURE__ */ React.createElement(Icon, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$13({}, props)),
+        Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$13({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$13({}, props)),
+        MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$13({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$13({}, props)),
         Control: (_a) => {
           var _b = _a, {
             children
           } = _b, props = __objRest$T(_b, [
             "children"
           ]);
-          return props.selectProps.leftComponent ? /* @__PURE__ */ React$1.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$13({}, props), /* @__PURE__ */ React$1.createElement(react.HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React$1.createElement(react.HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React$1.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$13({}, props), children);
+          return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$13({}, props), /* @__PURE__ */ React.createElement(react.HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React.createElement(react.HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$13({}, props), children);
         }
       },
       components || {}
@@ -9333,7 +9333,7 @@
       }
     return target;
   };
-  const SearchBar = React$1.forwardRef(
+  const SearchBar = React.forwardRef(
     (_a, ref) => {
       var _b = _a, {
         defaultOptions = [],
@@ -9370,9 +9370,9 @@
         "onSearchInputChange",
         "icon"
       ]);
-      const [filtered, setFiltered] = React$1.useState(defaultOptions);
-      const [filterInput, setFilterInput] = React$1.useState("");
-      const debounceFunction = React$1.useMemo(
+      const [filtered, setFiltered] = React.useState(defaultOptions);
+      const [filterInput, setFilterInput] = React.useState("");
+      const debounceFunction = React.useMemo(
         () => createDebounceFunctionInstance(debouncedWaitTime),
         [debouncedWaitTime]
       );
@@ -9383,7 +9383,7 @@
         isMulti,
         value: ramda.is(Array, value) ? value : []
       });
-      const customComponents = React$1.useMemo(
+      const customComponents = React.useMemo(
         () => getComponents(),
         []
       );
@@ -9418,7 +9418,7 @@
           }
         }
       };
-      return /* @__PURE__ */ React$1.createElement(react.Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(react.Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
         chakraReactSelect.AsyncSelect,
         __spreadValues$12({
           cacheOptions: true,
@@ -9498,7 +9498,7 @@
       "inputLeftElement",
       "inputRightElement"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -9509,13 +9509,13 @@
         validate,
         ref
       },
-      ({ value, onChange }) => /* @__PURE__ */ React$1.createElement(react.HStack, { w: "full" }, /* @__PURE__ */ React$1.createElement(
+      ({ value, onChange }) => /* @__PURE__ */ React.createElement(react.HStack, { w: "full" }, /* @__PURE__ */ React.createElement(
         InputGroupWrapper,
         {
           inputLeftElement,
           inputRightElement
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           SearchBar,
           __spreadValues$11({
             name,
@@ -9529,7 +9529,7 @@
             value
           }, rest)
         )
-      ), /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(
         IconButton,
         {
           "aria-label": `${name}-close-button`,
@@ -9538,12 +9538,12 @@
           fontSize: "sm",
           hidden: ramda.isEmpty(value) || !isClearable,
           onClick: () => onChange([]),
-          icon: /* @__PURE__ */ React$1.createElement(Icon, { as: icons.XCloseSolid })
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.XCloseSolid })
         }
       ))
     );
   };
-  const SearchBarField = React$1.forwardRef(BaseSearchBarField);
+  const SearchBarField = React.forwardRef(BaseSearchBarField);
 
   var __defProp$10 = Object.defineProperty;
   var __getOwnPropSymbols$10 = Object.getOwnPropertySymbols;
@@ -9561,7 +9561,7 @@
       }
     return a;
   };
-  const DragAndDrop = (props) => /* @__PURE__ */ React$1.createElement(core.DndContext, __spreadValues$10({}, props));
+  const DragAndDrop = (props) => /* @__PURE__ */ React.createElement(core.DndContext, __spreadValues$10({}, props));
 
   var __defProp$$ = Object.defineProperty;
   var __getOwnPropSymbols$$ = Object.getOwnPropertySymbols;
@@ -9591,7 +9591,7 @@
       }
     return target;
   };
-  const Tag = React$1.forwardRef((_a, ref) => {
+  const Tag = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       variant = "solid",
@@ -9603,7 +9603,7 @@
       "bgColor",
       "colorScheme"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Tag,
       __spreadValues$$({
         bgColor,
@@ -9617,7 +9617,7 @@
 
   const OverflowIndicator = ({
     nbrRemainingTags
-  }) => /* @__PURE__ */ React$1.createElement(Tag, { variant: "subtle", minW: "max-content" }, "+", nbrRemainingTags);
+  }) => /* @__PURE__ */ React.createElement(Tag, { variant: "subtle", minW: "max-content" }, "+", nbrRemainingTags);
 
   var __defProp$_ = Object.defineProperty;
   var __getOwnPropSymbols$_ = Object.getOwnPropertySymbols;
@@ -9659,17 +9659,17 @@
       "spacing",
       "OverflowIndicator"
     ]);
-    const [nbrRemainingTags, setNbrRemainingTags] = React$1.useState(0);
+    const [nbrRemainingTags, setNbrRemainingTags] = React.useState(0);
     const { rect, containerRef } = useOverflowGroup();
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.HStack,
       __spreadValues$_({
         bgColor: "background.default",
         ref: containerRef,
         overflow: "hidden"
       }, rest),
-      /* @__PURE__ */ React$1.createElement(react.HStack, { spacing }, /* @__PURE__ */ React$1.createElement(OverflowGroup, { max, onChange: setNbrRemainingTags, rect }, children)),
-      nbrRemainingTags > 0 && /* @__PURE__ */ React$1.createElement(OverflowIndicator$1, { nbrRemainingTags })
+      /* @__PURE__ */ React.createElement(react.HStack, { spacing }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingTags, rect }, children)),
+      nbrRemainingTags > 0 && /* @__PURE__ */ React.createElement(OverflowIndicator$1, { nbrRemainingTags })
     );
   };
 
@@ -9701,7 +9701,7 @@
       }
     return target;
   };
-  const DragItem = React$1.forwardRef(
+  const DragItem = React.forwardRef(
     (_a, ref) => {
       var _b = _a, {
         size = "md",
@@ -9714,7 +9714,7 @@
         "itemLabel",
         "bgColor"
       ]);
-      return /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(
         Tag,
         __spreadValues$Z({
           ref,
@@ -9723,8 +9723,8 @@
           size,
           minW: "max-content"
         }, rest),
-        /* @__PURE__ */ React$1.createElement(react.TagLabel, null, itemLabel),
-        /* @__PURE__ */ React$1.createElement(react.TagRightIcon, null, /* @__PURE__ */ React$1.createElement(Icon, { as: icons.DotsMatrixSolid }))
+        /* @__PURE__ */ React.createElement(react.TagLabel, null, itemLabel),
+        /* @__PURE__ */ React.createElement(react.TagRightIcon, null, /* @__PURE__ */ React.createElement(Icon, { as: icons.DotsMatrixSolid }))
       );
     }
   );
@@ -9786,13 +9786,13 @@
       "isDragging"
     ]);
     if (!listeners) {
-      return /* @__PURE__ */ React$1.createElement(DragItem, { itemLabel });
+      return /* @__PURE__ */ React.createElement(DragItem, { itemLabel });
     }
-    const childrenWithDragCursor = React$1.isValidElement(children) ? React$1.cloneElement(children, {
+    const childrenWithDragCursor = React.isValidElement(children) ? React.cloneElement(children, {
       cursor: isDragging ? "grabbing" : "grab"
     }) : children;
     const dragEventListeners = !disableDrag && listeners;
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Box,
       __spreadValues$Y(__spreadProps$b(__spreadValues$Y({
         ref: setNodeRef
@@ -9803,7 +9803,7 @@
         w: "max-content",
         "data-testid": dataTestId
       }), dragEventListeners),
-      typeof childrenWithDragCursor === "function" ? childrenWithDragCursor(listeners, props) : childrenWithDragCursor || /* @__PURE__ */ React$1.createElement(DragItem, { isDragging, itemLabel })
+      typeof childrenWithDragCursor === "function" ? childrenWithDragCursor(listeners, props) : childrenWithDragCursor || /* @__PURE__ */ React.createElement(DragItem, { isDragging, itemLabel })
     );
   };
 
@@ -9844,7 +9844,7 @@
       "data-testid"
     ]);
     const _a2 = core.useDroppable(__spreadValues$X({}, rest)), { setNodeRef } = _a2, props = __objRest$M(_a2, ["setNodeRef"]);
-    return /* @__PURE__ */ React$1.createElement(react.Box, { ref: setNodeRef, "data-testid": testId }, typeof children === "function" ? children(props) : children || /* @__PURE__ */ React$1.createElement(react.Center, null, "Drop here"));
+    return /* @__PURE__ */ React.createElement(react.Box, { ref: setNodeRef, "data-testid": testId }, typeof children === "function" ? children(props) : children || /* @__PURE__ */ React.createElement(react.Center, null, "Drop here"));
   };
 
   var __defProp$W = Object.defineProperty;
@@ -9863,7 +9863,7 @@
       }
     return a;
   };
-  const Sortable = (props) => /* @__PURE__ */ React$1.createElement(sortable.SortableContext, __spreadValues$W({}, props));
+  const Sortable = (props) => /* @__PURE__ */ React.createElement(sortable.SortableContext, __spreadValues$W({}, props));
 
   var __defProp$V = Object.defineProperty;
   var __defProps$a = Object.defineProperties;
@@ -9926,10 +9926,10 @@
       "isDragging"
     ]);
     if (!listeners) {
-      return /* @__PURE__ */ React$1.createElement(DragItem, { itemLabel });
+      return /* @__PURE__ */ React.createElement(DragItem, { itemLabel });
     }
-    const timeStampSnapchot = React$1.useRef(0);
-    const inEditMode = React$1.useRef(false);
+    const timeStampSnapchot = React.useRef(0);
+    const inEditMode = React.useRef(false);
     const { onPointerDown, onKeyDown } = listeners;
     const handlePointerDown = (e) => {
       const elapsedTime = e.timeStamp - timeStampSnapchot.current;
@@ -9950,14 +9950,14 @@
       transform: utilities.CSS.Translate.toString(transform),
       transition
     };
-    const childrenWithDragCursor = React$1.isValidElement(children) ? React$1.cloneElement(children, {
+    const childrenWithDragCursor = React.isValidElement(children) ? React.cloneElement(children, {
       cursor: isDragging ? "grabbing" : "grab"
     }) : children;
     const dragEventListeners = !disableDrag && {
       onPointerDown: handlePointerDown,
       onKeyDown: handleKeyDown
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Box,
       __spreadValues$V(__spreadProps$a(__spreadValues$V({
         ref: setNodeRef,
@@ -9968,7 +9968,7 @@
         borderRadius: "tag.default",
         "data-testid": dataTestId
       }), dragEventListeners),
-      (typeof childrenWithDragCursor === "function" ? childrenWithDragCursor(listeners, props) : childrenWithDragCursor) || /* @__PURE__ */ React$1.createElement(DragItem, { isDragging, itemLabel })
+      (typeof childrenWithDragCursor === "function" ? childrenWithDragCursor(listeners, props) : childrenWithDragCursor) || /* @__PURE__ */ React.createElement(DragItem, { isDragging, itemLabel })
     );
   };
 
@@ -10002,7 +10002,7 @@
   };
   const DragHandle = (_a) => {
     var _b = _a, { icon, isDragging } = _b, rest = __objRest$K(_b, ["icon", "isDragging"]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Icon,
       __spreadValues$U({
         as: icon || icons.DragDuo,
@@ -10042,7 +10042,7 @@
   const DropZone = (_a) => {
     var _b = _a, { sx = {}, name, children } = _b, rest = __objRest$J(_b, ["sx", "name", "children"]);
     const { dropZone } = react.useMultiStyleConfig("DragAndDrop", { sx });
-    return /* @__PURE__ */ React$1.createElement(Droppable, { id: name }, /* @__PURE__ */ React$1.createElement(react.Stack, __spreadValues$T({ sx: dropZone }, rest), children));
+    return /* @__PURE__ */ React.createElement(Droppable, { id: name }, /* @__PURE__ */ React.createElement(react.Stack, __spreadValues$T({ sx: dropZone }, rest), children));
   };
 
   var __defProp$S = Object.defineProperty;
@@ -10072,7 +10072,7 @@
     collisionDetection,
     sensors
   }) {
-    const [activeItem, setActiveItem] = React$1.useState(null);
+    const [activeItem, setActiveItem] = React.useState(null);
     const moveBetweenContainers = (activeContainerName, activeIndex, overContainerName, overIndex, item) => __spreadProps$9(__spreadValues$S({}, items), {
       [activeContainerName]: ramda.remove(activeIndex, 1, items[activeContainerName]),
       [overContainerName]: ramda.insert(overIndex, item, items[overContainerName])
@@ -10138,7 +10138,7 @@
         ));
       }
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       DragAndDrop,
       {
         sensors: sensors || customSensors,
@@ -10166,8 +10166,8 @@
     disableDrag = false,
     modifiers
   }) {
-    const [activeItem, setActiveItem] = React$1.useState(null);
-    const identifierItems = React$1.useMemo(() => ramda.map(createKey, items), [items]);
+    const [activeItem, setActiveItem] = React.useState(null);
+    const identifierItems = React.useMemo(() => ramda.map(createKey, items), [items]);
     const customSensors = core.useSensors(
       core.useSensor(core.PointerSensor),
       core.useSensor(core.KeyboardSensor, {
@@ -10191,7 +10191,7 @@
         onChange(newItems);
       }
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       DragAndDrop,
       {
         sensors: sensors || customSensors,
@@ -10200,7 +10200,7 @@
         onDragEnd: handleDragEnd,
         modifiers
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Sortable,
         {
           items: identifierItems,
@@ -10208,7 +10208,7 @@
         },
         items.map((item, index) => {
           const id = createKey(item);
-          return /* @__PURE__ */ React$1.createElement(
+          return /* @__PURE__ */ React.createElement(
             SortableItem,
             {
               key: id,
@@ -10221,11 +10221,11 @@
           );
         })
       ),
-      displayOverlay && /* @__PURE__ */ React$1.createElement(core.DragOverlay, null, activeItem ? /* @__PURE__ */ React$1.createElement(DragItem, { itemLabel: activeItem }) : null)
+      displayOverlay && /* @__PURE__ */ React.createElement(core.DragOverlay, null, activeItem ? /* @__PURE__ */ React.createElement(DragItem, { itemLabel: activeItem }) : null)
     );
   }
 
-  const SortableContainer = ({ children, items, strategy }) => /* @__PURE__ */ React$1.createElement(Sortable, { items, strategy: strategy || sortable.rectSortingStrategy }, items.map((id) => /* @__PURE__ */ React$1.createElement(SortableItem, { key: id, id, itemLabel: id }, typeof children === "function" ? children(id) : children)));
+  const SortableContainer = ({ children, items, strategy }) => /* @__PURE__ */ React.createElement(Sortable, { items, strategy: strategy || sortable.rectSortingStrategy }, items.map((id) => /* @__PURE__ */ React.createElement(SortableItem, { key: id, id, itemLabel: id }, typeof children === "function" ? children(id) : children)));
 
   var __defProp$R = Object.defineProperty;
   var __getOwnPropSymbols$R = Object.getOwnPropertySymbols;
@@ -10255,7 +10255,7 @@
       }
     return target;
   };
-  const FastList = React$1.forwardRef((_a, ref) => {
+  const FastList = React.forwardRef((_a, ref) => {
     var _b = _a, {
       itemCount,
       itemSize,
@@ -10275,7 +10275,7 @@
       "overscanCount",
       "initialScrollOffset"
     ]);
-    return /* @__PURE__ */ React$1.createElement(AutoSizer, null, ({ width: autoWidth, height: autoHeight }) => /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(AutoSizer, null, ({ width: autoWidth, height: autoHeight }) => /* @__PURE__ */ React.createElement(
       reactWindow.VariableSizeList,
       __spreadValues$R({
         itemCount,
@@ -10287,7 +10287,7 @@
         overscanCount,
         ref
       }, rest),
-      ({ style, index }) => /* @__PURE__ */ React$1.createElement("div", { style }, typeof children === "function" ? children(index) : children)
+      ({ style, index }) => /* @__PURE__ */ React.createElement("div", { style }, typeof children === "function" ? children(index) : children)
     ));
   });
 
@@ -10319,7 +10319,7 @@
       }
     return target;
   };
-  const FastGrid = React$1.forwardRef((_a, ref) => {
+  const FastGrid = React.forwardRef((_a, ref) => {
     var _b = _a, {
       columns,
       rows,
@@ -10341,7 +10341,7 @@
       "overscanRowCount",
       "overscanColumnCount"
     ]);
-    return /* @__PURE__ */ React$1.createElement(AutoSizer, null, ({ width: autoWidth, height: autoHeight }) => /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(AutoSizer, null, ({ width: autoWidth, height: autoHeight }) => /* @__PURE__ */ React.createElement(
       reactWindow.VariableSizeGrid,
       __spreadValues$Q({
         rowCount: rows,
@@ -10354,7 +10354,7 @@
         overscanColumnCount,
         ref
       }, rest),
-      ({ style, rowIndex, columnIndex }) => /* @__PURE__ */ React$1.createElement("div", { style }, typeof children === "function" ? children(rowIndex, columnIndex) : children)
+      ({ style, rowIndex, columnIndex }) => /* @__PURE__ */ React.createElement("div", { style }, typeof children === "function" ? children(rowIndex, columnIndex) : children)
     ));
   });
 
@@ -10389,23 +10389,23 @@
     } = react.useEditableControls();
     const { onEdit, isEditing } = react.useEditableState();
     const { button, icon, controls } = react.useMultiStyleConfig("EditableText", { size, isEditing });
-    return /* @__PURE__ */ React$1.createElement(react.HStack, { spacing: 1, sx: controls }, isEditing ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.HStack, { spacing: 1, sx: controls }, isEditing ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       IconButton,
       __spreadValues$P({
         "aria-label": "Cancel",
         sx: button,
         variant: mapEditableVariantsToButtonCancelVariants[variant]
       }, getCancelButtonProps()),
-      /* @__PURE__ */ React$1.createElement(Icon, { sx: icon, as: icons.XCloseSolid })
-    ), /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: icons.XCloseSolid })
+    ), /* @__PURE__ */ React.createElement(
       IconButton,
       __spreadValues$P({
         "aria-label": "Save",
         sx: button,
         variant: mapEditableVariantsToButtonSubmitVariants[variant]
       }, getSubmitButtonProps()),
-      /* @__PURE__ */ React$1.createElement(Icon, { sx: icon, as: icons.CheckDuo })
-    )) : /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: icons.CheckDuo })
+    )) : /* @__PURE__ */ React.createElement(
       IconButton,
       {
         "aria-label": "Edit",
@@ -10413,7 +10413,7 @@
         sx: button,
         onClick: onEdit
       },
-      /* @__PURE__ */ React$1.createElement(Icon, { sx: icon, as: icons.EditDuo })
+      /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: icons.EditDuo })
     ));
   };
 
@@ -10459,12 +10459,12 @@
       "leftItem",
       "variant"
     ]);
-    const [value, setValue] = React$1.useState(inputValue);
+    const [value, setValue] = React.useState(inputValue);
     const { input, preview } = react.useMultiStyleConfig("EditableText", { size, value });
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       setValue(inputValue);
     }, [inputValue]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Editable,
       __spreadValues$O({
         isPreviewFocusable: true,
@@ -10473,20 +10473,20 @@
         onChange: (newValue) => setValue(newValue),
         onSubmit
       }, rest),
-      /* @__PURE__ */ React$1.createElement(react.InputGroup, { size }, leftItem && /* @__PURE__ */ React$1.createElement(react.InputLeftElement, null, leftItem), /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.InputGroup, { size }, leftItem && /* @__PURE__ */ React.createElement(react.InputLeftElement, null, leftItem), /* @__PURE__ */ React.createElement(
         react.Input,
         {
           as: react.EditablePreview,
           sx: preview
         }
-      ), /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(
         react.Input,
         {
           as: react.EditableInput,
           size,
           sx: input
         }
-      ), /* @__PURE__ */ React$1.createElement(react.InputRightElement, { sx: { width: "min-content" } }, /* @__PURE__ */ React$1.createElement(EditableControls, { size, variant })))
+      ), /* @__PURE__ */ React.createElement(react.InputRightElement, { sx: { width: "min-content" } }, /* @__PURE__ */ React.createElement(EditableControls, { size, variant })))
     );
   };
 
@@ -10526,15 +10526,15 @@
       "isCentered",
       "children"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Modal,
       __spreadValues$N({
         isCentered,
         scrollBehavior: "inside",
         motionPreset: "slideInBottom"
       }, rest),
-      /* @__PURE__ */ React$1.createElement(react.ModalOverlay, null),
-      /* @__PURE__ */ React$1.createElement(react.ModalContent, { "data-testid": "modal-test-id" }, /* @__PURE__ */ React$1.createElement(react.ModalCloseButton, { "data-testid": "modal-test-button-id" }), children)
+      /* @__PURE__ */ React.createElement(react.ModalOverlay, null),
+      /* @__PURE__ */ React.createElement(react.ModalContent, { "data-testid": "modal-test-id" }, /* @__PURE__ */ React.createElement(react.ModalCloseButton, { "data-testid": "modal-test-button-id" }), children)
     );
   };
 
@@ -10574,7 +10574,7 @@
       "stayMountedOnClose",
       "isOpen"
     ]);
-    return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, (stayMountedOnClose || isOpen) && /* @__PURE__ */ React$1.createElement(ModalBase, __spreadValues$M({ isOpen }, rest)));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, (stayMountedOnClose || isOpen) && /* @__PURE__ */ React.createElement(ModalBase, __spreadValues$M({ isOpen }, rest)));
   };
 
   var __defProp$L = Object.defineProperty;
@@ -10593,7 +10593,7 @@
       }
     return a;
   };
-  const ModalBody = (props) => /* @__PURE__ */ React$1.createElement(react.ModalBody, __spreadValues$L({ minH: props.h, maxH: props.h }, props));
+  const ModalBody = (props) => /* @__PURE__ */ React.createElement(react.ModalBody, __spreadValues$L({ minH: props.h, maxH: props.h }, props));
 
   var __defProp$K = Object.defineProperty;
   var __getOwnPropSymbols$K = Object.getOwnPropertySymbols;
@@ -10623,7 +10623,7 @@
       }
     return target;
   };
-  const FileEditorModal = React$1.forwardRef((_a, ref) => {
+  const FileEditorModal = React.forwardRef((_a, ref) => {
     var _b = _a, {
       fileName,
       setFileName,
@@ -10645,21 +10645,21 @@
       "canEditFileName",
       "canCropImage"
     ]);
-    const [zoomLevel, setZoomLevel] = React$1.useState(1);
-    const [position, setPosition] = React$1.useState({ x: 0.5, y: 0.5 });
+    const [zoomLevel, setZoomLevel] = React.useState(1);
+    const [position, setPosition] = React.useState({ x: 0.5, y: 0.5 });
     const handleClose = () => {
       setZoomLevel(1);
       onClose();
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Modal,
       __spreadValues$K({
         isOpen,
         onClose,
         closeOnOverlayClick: false
       }, rest),
-      /* @__PURE__ */ React$1.createElement(react.ModalHeader, null, "Edit ", isImage ? "image" : "file"),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.ModalHeader, null, "Edit ", isImage ? "image" : "file"),
+      /* @__PURE__ */ React.createElement(
         ModalBody,
         {
           display: "flex",
@@ -10669,7 +10669,7 @@
           gap: 4,
           minH: "300px"
         },
-        /* @__PURE__ */ React$1.createElement(react.Stack, { display: isImage && canCropImage ? "inherit" : "none" }, /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(react.Stack, { display: isImage && canCropImage ? "inherit" : "none" }, /* @__PURE__ */ React.createElement(
           AvatarEditor,
           {
             ref,
@@ -10683,7 +10683,7 @@
             scale: zoomLevel,
             rotate: 0
           }
-        ), /* @__PURE__ */ React$1.createElement(react.HStack, { w: "90%" }, /* @__PURE__ */ React$1.createElement(FormLabel, null, "Zoom"), /* @__PURE__ */ React$1.createElement(
+        ), /* @__PURE__ */ React.createElement(react.HStack, { w: "90%" }, /* @__PURE__ */ React.createElement(FormLabel, null, "Zoom"), /* @__PURE__ */ React.createElement(
           react.Slider,
           {
             "aria-label": "zoom",
@@ -10694,12 +10694,12 @@
             max: 10,
             onChange: (value) => setZoomLevel(value)
           },
-          /* @__PURE__ */ React$1.createElement(react.SliderTrack, null, /* @__PURE__ */ React$1.createElement(react.SliderFilledTrack, null)),
-          /* @__PURE__ */ React$1.createElement(react.SliderThumb, { boxSize: 6 }, /* @__PURE__ */ React$1.createElement(Icon, { as: icons.ZoomInDuo }))
+          /* @__PURE__ */ React.createElement(react.SliderTrack, null, /* @__PURE__ */ React.createElement(react.SliderFilledTrack, null)),
+          /* @__PURE__ */ React.createElement(react.SliderThumb, { boxSize: 6 }, /* @__PURE__ */ React.createElement(Icon, { as: icons.ZoomInDuo }))
         ))),
-        canEditFileName && /* @__PURE__ */ React$1.createElement(react.Stack, { w: "90%", direction: isImage ? "row" : "column", pt: 2 }, /* @__PURE__ */ React$1.createElement(FormLabel, null, "Name the file:"), /* @__PURE__ */ React$1.createElement(react.Box, { maxW: "50%" }, /* @__PURE__ */ React$1.createElement(EditableText, { onSubmit: (v) => setFileName(v), value: fileName, size: "sm" })))
+        canEditFileName && /* @__PURE__ */ React.createElement(react.Stack, { w: "90%", direction: isImage ? "row" : "column", pt: 2 }, /* @__PURE__ */ React.createElement(FormLabel, null, "Name the file:"), /* @__PURE__ */ React.createElement(react.Box, { maxW: "50%" }, /* @__PURE__ */ React.createElement(EditableText, { onSubmit: (v) => setFileName(v), value: fileName, size: "sm" })))
       ),
-      /* @__PURE__ */ React$1.createElement(react.ModalFooter, null, /* @__PURE__ */ React$1.createElement(react.HStack, null, /* @__PURE__ */ React$1.createElement(Button, { variant: "danger", onClick: handleClose }, "Cancel"), /* @__PURE__ */ React$1.createElement(Button, { variant: "success", onClick: handleCrop }, "Save")))
+      /* @__PURE__ */ React.createElement(react.ModalFooter, null, /* @__PURE__ */ React.createElement(react.HStack, null, /* @__PURE__ */ React.createElement(Button, { variant: "danger", onClick: handleClose }, "Cancel"), /* @__PURE__ */ React.createElement(Button, { variant: "success", onClick: handleCrop }, "Save")))
     );
   });
 
@@ -10747,7 +10747,7 @@
       confirmDelete();
       onClose();
     };
-    return /* @__PURE__ */ React$1.createElement(Modal, __spreadValues$J({ isOpen, onClose }, rest), /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(Modal, __spreadValues$J({ isOpen, onClose }, rest), /* @__PURE__ */ React.createElement(
       react.ModalHeader,
       {
         sx: { fontSize: "lg" },
@@ -10758,7 +10758,7 @@
       },
       "Delete ",
       fileName
-    ), /* @__PURE__ */ React$1.createElement(ModalBody, null, "Deleting this file is a permanent action. You will not be able to recover this file at a later time."), /* @__PURE__ */ React$1.createElement(react.ModalFooter, null, /* @__PURE__ */ React$1.createElement(Button, { variant: "danger", onClick: handleDelete }, "Delete")));
+    ), /* @__PURE__ */ React.createElement(ModalBody, null, "Deleting this file is a permanent action. You will not be able to recover this file at a later time."), /* @__PURE__ */ React.createElement(react.ModalFooter, null, /* @__PURE__ */ React.createElement(Button, { variant: "danger", onClick: handleDelete }, "Delete")));
   };
 
   const updateTimeThreshold = 0.5;
@@ -10792,10 +10792,10 @@
       }
     return target;
   };
-  const ProgressBar = React$1.forwardRef(
+  const ProgressBar = React.forwardRef(
     (_a, ref) => {
       var _b = _a, { animationSlideTimeMs = animationSlideTime, sx } = _b, props = __objRest$B(_b, ["animationSlideTimeMs", "sx"]);
-      return /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(
         react.Progress,
         __spreadValues$I({
           ref,
@@ -10868,11 +10868,11 @@
       "onLoadEnd",
       "hideDisplay"
     ]);
-    const ref = React$1.useRef(null);
-    const timeRef = React$1.useRef(0);
+    const ref = React.useRef(null);
+    const timeRef = React.useRef(0);
     const progress = Math.max(0, Math.min(loaded, 1));
-    const [timeLeft, setTimeLeft] = React$1.useState(0);
-    React$1.useEffect(() => {
+    const [timeLeft, setTimeLeft] = React.useState(0);
+    React.useEffect(() => {
       if (ref.current) {
         ref.current.children[0].style.width = `${progress * 100}%`;
       }
@@ -10886,7 +10886,7 @@
         timeRef.current = Date.now();
       }
     }, [progress]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Fade,
       {
         in: progress < 1,
@@ -10900,7 +10900,7 @@
           }
         }
       },
-      /* @__PURE__ */ React$1.createElement(react.VStack, __spreadValues$H({}, rest), /* @__PURE__ */ React$1.createElement(Small, null, Math.round(progress * 100), "%", " ", !!timeLeft && `\xB7 ${formattedTime(timeLeft)} left`), /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.VStack, __spreadValues$H({}, rest), /* @__PURE__ */ React.createElement(Small, null, Math.round(progress * 100), "%", " ", !!timeLeft && `\xB7 ${formattedTime(timeLeft)} left`), /* @__PURE__ */ React.createElement(
         ProgressBar,
         {
           ref,
@@ -11147,7 +11147,7 @@
       "icon",
       "color"
     ]);
-    return /* @__PURE__ */ React$1.createElement(IconButton, __spreadValues$F({ variant: "ghost", size: "sm" }, rest), /* @__PURE__ */ React$1.createElement(Icon, { as: icon, boxSize: "24px", color }));
+    return /* @__PURE__ */ React.createElement(IconButton, __spreadValues$F({ variant: "ghost", size: "sm" }, rest), /* @__PURE__ */ React.createElement(Icon, { as: icon, boxSize: "24px", color }));
   };
 
   var __defProp$E = Object.defineProperty;
@@ -11207,24 +11207,24 @@
       "editFileOptions",
       "sx"
     ]);
-    const fileInputRef = React$1.useRef(null);
-    const imageEditorRef = React$1.useRef(null);
-    const [file, setFile] = React$1.useState(value);
-    const [isInvalid, setIsInvalid] = React$1.useState(false);
-    const [name, setName] = React$1.useState("");
+    const fileInputRef = React.useRef(null);
+    const imageEditorRef = React.useRef(null);
+    const [file, setFile] = React.useState(value);
+    const [isInvalid, setIsInvalid] = React.useState(false);
+    const [name, setName] = React.useState("");
     const editModal = react.useDisclosure();
     const deleteModal = react.useDisclosure();
-    const [editable, setEditable] = React$1.useState(false);
-    const [hasLoaded, setHasLoaded] = React$1.useState(false);
-    const [isLoading, setIsLoading] = React$1.useState(false);
-    const [isImage, setIsImage] = React$1.useState(true);
-    const [uploaded, setUploaded] = React$1.useState(uploadedInitial);
+    const [editable, setEditable] = React.useState(false);
+    const [hasLoaded, setHasLoaded] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [isImage, setIsImage] = React.useState(true);
+    const [uploaded, setUploaded] = React.useState(uploadedInitial);
     const onlyImageAccepted = onlyAcceptsImages(acceptFormat);
     const isUploading = uploaded < 1;
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       setUploaded(uploadedInitial);
     }, [uploadedInitial]);
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       if (!isUploading) {
         setIsLoading(false);
         setHasLoaded(true);
@@ -11238,7 +11238,7 @@
       currentTheme,
       sx
     }, rest));
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       if (isInvalid) {
         setTimeout(() => {
           setIsInvalid(false);
@@ -11317,7 +11317,7 @@
         }
       }
     };
-    return /* @__PURE__ */ React$1.createElement(react.Stack, __spreadValues$E({ maxW: filePicker.width }, rest), /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Stack, __spreadValues$E({ maxW: filePicker.width }, rest), /* @__PURE__ */ React.createElement(
       Clickable,
       {
         onClick: handleOnClick,
@@ -11326,7 +11326,7 @@
         onMouseEnter: () => setEditable(true),
         onMouseLeave: () => setEditable(false)
       },
-      /* @__PURE__ */ React$1.createElement(react.Box, { sx: filePicker }, /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.Box, { sx: filePicker }, /* @__PURE__ */ React.createElement(
         react.SlideFade,
         {
           in: hasLoaded,
@@ -11336,7 +11336,7 @@
             display: hasLoaded && isImage ? "initial" : "none"
           }
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           react.Image,
           {
             src: file ? isFile(file) ? URL.createObjectURL(file) : file : "",
@@ -11348,7 +11348,7 @@
             w: "full"
           }
         )
-      ), /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(
         react.Input,
         {
           type: "file",
@@ -11357,7 +11357,7 @@
           ref: fileInputRef,
           onChange: handleChange
         }
-      ), /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(
         react.Stack,
         {
           display: hasLoaded && isImage ? "none" : "default",
@@ -11365,7 +11365,7 @@
           w: "85%",
           spacing: "0a"
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           Icon,
           {
             as: onlyImageAccepted ? icons.Image03Solid : icons.UploadCloudSolid,
@@ -11375,7 +11375,7 @@
             "aria-label": "file-icon-upload"
           }
         ),
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           Icon,
           {
             as: icons.FileBlankDuo,
@@ -11384,7 +11384,7 @@
             display: hasLoaded && !isImage ? "inline-block" : "none"
           }
         ),
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           P,
           {
             variant: isInvalid ? "16" : "14",
@@ -11397,7 +11397,7 @@
           },
           isInvalid ? "File not supported" : file && isFile(file) ? file.name : `Drag & drop ${onlyImageAccepted ? "image" : "file"} or`
         ),
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           Lead,
           {
             sx: {
@@ -11408,8 +11408,8 @@
           },
           "Click to upload"
         ),
-        /* @__PURE__ */ React$1.createElement(react.Box, { display: isLoading ? "block" : "none", pt: 1 }, loadWithSpinner ? /* @__PURE__ */ React$1.createElement(Spinner, null) : /* @__PURE__ */ React$1.createElement(LoadingBar, { loaded: uploaded }))
-      ), /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(react.Box, { display: isLoading ? "block" : "none", pt: 1 }, loadWithSpinner ? /* @__PURE__ */ React.createElement(Spinner, null) : /* @__PURE__ */ React.createElement(LoadingBar, { loaded: uploaded }))
+      ), /* @__PURE__ */ React.createElement(
         react.Fade,
         {
           in: hasLoaded && editable,
@@ -11418,7 +11418,7 @@
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           react.HStack,
           {
             spacing: 2,
@@ -11430,7 +11430,7 @@
             width: "44",
             py: 2
           },
-          editFileOptions.canEdit && /* @__PURE__ */ React$1.createElement(
+          editFileOptions.canEdit && /* @__PURE__ */ React.createElement(
             FileIconButton,
             {
               "aria-label": "edit-file",
@@ -11438,7 +11438,7 @@
               icon: icons.EditBoxDuo
             }
           ),
-          /* @__PURE__ */ React$1.createElement(
+          /* @__PURE__ */ React.createElement(
             FileIconButton,
             {
               "aria-label": "download-file",
@@ -11446,7 +11446,7 @@
               icon: icons.DownloadDuo
             }
           ),
-          /* @__PURE__ */ React$1.createElement(
+          /* @__PURE__ */ React.createElement(
             FileIconButton,
             {
               "aria-label": "delete-file",
@@ -11456,7 +11456,7 @@
             }
           )
         )
-      ), /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(
         P,
         {
           variant: "14",
@@ -11465,7 +11465,7 @@
         },
         isFile(file) && readableFileSize(file == null ? void 0 : file.size)
       ))
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       FileEditorModal,
       __spreadProps$7(__spreadValues$E({}, editModal), {
         fileName: name,
@@ -11477,7 +11477,7 @@
         canEditFileName: editFileOptions.canEditName,
         canCropImage: editFileOptions.canEditImage
       })
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       ConfirmDeleteModal,
       __spreadProps$7(__spreadValues$E({}, deleteModal), {
         confirmDelete: clearImage,
@@ -11530,8 +11530,8 @@
       "validate",
       "onChange"
     ]);
-    const [uploaded, setUploaded] = React$1.useState(0);
-    return /* @__PURE__ */ React$1.createElement(
+    const [uploaded, setUploaded] = React.useState(0);
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -11540,7 +11540,7 @@
         isRequired,
         validate
       },
-      ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+      ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         FilePicker,
         __spreadValues$D({
           onChange: async (file) => {
@@ -11608,14 +11608,14 @@
       "updatePreviewFiles",
       "maxFileSize"
     ]);
-    const inputRef = React$1.useRef(null);
-    const [isInvalid, setIsInvalid] = React$1.useState(false);
+    const inputRef = React.useRef(null);
+    const [isInvalid, setIsInvalid] = React.useState(false);
     const currentTheme = useCurrentTheme();
     const { multiFilePicker } = react.useMultiStyleConfig("FilePicker", __spreadValues$C({ isInvalid, currentTheme }, rest));
-    const [active, setActive] = React$1.useState(false);
-    const [errorMessage, setErrorMessage] = React$1.useState("");
+    const [active, setActive] = React.useState(false);
+    const [errorMessage, setErrorMessage] = React.useState("");
     const onlyImageAccepted = onlyAcceptsImages(acceptFormat);
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       if (isInvalid) {
         setTimeout(() => {
           setIsInvalid(false);
@@ -11668,7 +11668,7 @@
         updateMultipleFiles(e.target.files);
       }
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Clickable,
       {
         onClick: handleClick,
@@ -11677,7 +11677,7 @@
         onMouseEnter: toggleHover,
         onMouseLeave: toggleHover
       },
-      /* @__PURE__ */ React$1.createElement(react.Box, __spreadValues$C({ sx: multiFilePicker }, rest), /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.Box, __spreadValues$C({ sx: multiFilePicker }, rest), /* @__PURE__ */ React.createElement(
         react.Stack,
         {
           alignItems: "center",
@@ -11686,7 +11686,7 @@
           w: "full",
           spacing: 0
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           Icon,
           {
             as: onlyImageAccepted ? icons.Image03Solid : icons.UploadCloudSolid,
@@ -11696,10 +11696,10 @@
             mb: onlyImageAccepted ? "0a" : 0
           }
         ),
-        /* @__PURE__ */ React$1.createElement(react.HStack, { spacing: 1, display: isInvalid ? "none" : "flex" }, /* @__PURE__ */ React$1.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center" }, "Drag & drop ", onlyImageAccepted ? "images" : "files", " here or"), /* @__PURE__ */ React$1.createElement(Lead, { sx: { textDecoration: "underline", color: "blue.500" } }, "choose ", onlyImageAccepted ? "image" : "file")),
-        /* @__PURE__ */ React$1.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center", display: isInvalid ? "initial" : "none" }, errorMessage),
-        /* @__PURE__ */ React$1.createElement(P, { variant: "14", sx: { color: "gray.400" } }, "Max file size is ", readableFileSize(maxFileSize))
-      ), /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(react.HStack, { spacing: 1, display: isInvalid ? "none" : "flex" }, /* @__PURE__ */ React.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center" }, "Drag & drop ", onlyImageAccepted ? "images" : "files", " here or"), /* @__PURE__ */ React.createElement(Lead, { sx: { textDecoration: "underline", color: "blue.500" } }, "choose ", onlyImageAccepted ? "image" : "file")),
+        /* @__PURE__ */ React.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center", display: isInvalid ? "initial" : "none" }, errorMessage),
+        /* @__PURE__ */ React.createElement(P, { variant: "14", sx: { color: "gray.400" } }, "Max file size is ", readableFileSize(maxFileSize))
+      ), /* @__PURE__ */ React.createElement(
         react.Input,
         {
           type: "file",
@@ -11745,12 +11745,12 @@
     const { fileItem } = react.useMultiStyleConfig("FilePicker");
     const editModalDisclosure = react.useDisclosure();
     const deleteModalDisclosure = react.useDisclosure();
-    const imageEditorRef = React$1.useRef(null);
-    const [fileName, setFileName] = React$1.useState("");
-    const [show, setShow] = React$1.useState(true);
-    const [hasLoaded, setHasLoaded] = React$1.useState(false);
-    const [loadingImage, setLoadingImage] = React$1.useState(true);
-    React$1.useEffect(() => {
+    const imageEditorRef = React.useRef(null);
+    const [fileName, setFileName] = React.useState("");
+    const [show, setShow] = React.useState(true);
+    const [hasLoaded, setHasLoaded] = React.useState(false);
+    const [loadingImage, setLoadingImage] = React.useState(true);
+    React.useEffect(() => {
       if (file.src) {
         const buffer = new Image();
         buffer.src = file.src;
@@ -11784,7 +11784,7 @@
         deleteFile(file);
       }, 500);
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       SlideFade,
       {
         in: show,
@@ -11793,7 +11793,7 @@
         enterDuration: !isLazy ? 300 : 1,
         exitDuration: 300
       },
-      /* @__PURE__ */ React$1.createElement(react.Box, { sx: fileItem }, /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.Box, { sx: fileItem }, /* @__PURE__ */ React.createElement(
         react.HStack,
         {
           w: "full",
@@ -11804,7 +11804,7 @@
           px: 2,
           pt: file.isUploading && !hasLoaded ? 2 : 0
         },
-        /* @__PURE__ */ React$1.createElement(react.HStack, { spacing: 4, alignItems: "start", maxW: "50%" }, isFileImage(file) ? file.isUploading || loadingImage ? /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(react.HStack, { spacing: 4, alignItems: "start", maxW: "50%" }, isFileImage(file) ? file.isUploading || loadingImage ? /* @__PURE__ */ React.createElement(
           Icon,
           {
             as: icons.Image03Duo,
@@ -11814,7 +11814,7 @@
             borderRadius: "8",
             p: "2"
           }
-        ) : /* @__PURE__ */ React$1.createElement(
+        ) : /* @__PURE__ */ React.createElement(
           react.Image,
           {
             src: file.src || "",
@@ -11824,7 +11824,7 @@
             borderRadius: "8",
             boxSize: "10"
           }
-        ) : /* @__PURE__ */ React$1.createElement(
+        ) : /* @__PURE__ */ React.createElement(
           Icon,
           {
             as: icons.FileBlankDuo,
@@ -11832,7 +11832,7 @@
             p: "1",
             color: "gray.300"
           }
-        ), /* @__PURE__ */ React$1.createElement(
+        ), /* @__PURE__ */ React.createElement(
           react.Stack,
           {
             alignItems: "start",
@@ -11840,7 +11840,7 @@
             spacing: "0",
             maxW: "100%"
           },
-          /* @__PURE__ */ React$1.createElement(
+          /* @__PURE__ */ React.createElement(
             P,
             {
               variant: "14",
@@ -11851,9 +11851,9 @@
             },
             file == null ? void 0 : file.name
           ),
-          /* @__PURE__ */ React$1.createElement(P, { variant: "14", sx: { color: "gray.400" } }, (file == null ? void 0 : file.size) && readableFileSize(file.size))
+          /* @__PURE__ */ React.createElement(P, { variant: "14", sx: { color: "gray.400" } }, (file == null ? void 0 : file.size) && readableFileSize(file.size))
         )),
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           react.HStack,
           {
             spacing: "3",
@@ -11863,7 +11863,7 @@
             display: file.isUploading ? "none" : "flex",
             p: "1"
           },
-          canEdit && /* @__PURE__ */ React$1.createElement(
+          canEdit && /* @__PURE__ */ React.createElement(
             FileIconButton,
             {
               "aria-label": "Edit-image",
@@ -11871,7 +11871,7 @@
               icon: icons.EditBoxDuo
             }
           ),
-          /* @__PURE__ */ React$1.createElement(
+          /* @__PURE__ */ React.createElement(
             FileIconButton,
             {
               "aria-label": "download-image",
@@ -11879,14 +11879,14 @@
               icon: icons.DownloadDuo
             }
           ),
-          /* @__PURE__ */ React$1.createElement(
+          /* @__PURE__ */ React.createElement(
             react.CloseButton,
             {
               onClick: confirmDelete ? deleteModalDisclosure.onOpen : clearImage
             }
           )
         )
-      ), /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(
         react.Box,
         {
           w: "full",
@@ -11896,14 +11896,14 @@
           mt: "-2",
           display: file.isUploading ? "block" : "none"
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           LoadingBar,
           {
             loaded: file.size ? ((file == null ? void 0 : file.uploaded) || 0) / file.size : 0,
             onLoadEnd: () => setHasLoaded(true)
           }
         )
-      ), canEdit && /* @__PURE__ */ React$1.createElement(
+      ), canEdit && /* @__PURE__ */ React.createElement(
         FileEditorModal,
         __spreadProps$6(__spreadValues$B({}, editModalDisclosure), {
           fileName: fileName || file.name,
@@ -11915,7 +11915,7 @@
           isImage: isFileImage(file),
           ref: imageEditorRef
         })
-      ), /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(
         ConfirmDeleteModal,
         __spreadProps$6(__spreadValues$B({}, deleteModalDisclosure), {
           confirmDelete: clearImage,
@@ -11973,11 +11973,11 @@
       "editFileOptions",
       "enableSmartLoad"
     ]);
-    const [uploadingFilesReference, setUploadingFilesReference] = React$1.useState(uploadingFiles);
-    const [overflowing, setOverflowing] = React$1.useState(false);
+    const [uploadingFilesReference, setUploadingFilesReference] = React.useState(uploadingFiles);
+    const [overflowing, setOverflowing] = React.useState(false);
     const formattedFiles = files == null ? void 0 : files.map((file) => isFile(file) ? createPreviewFileObject(file) : file);
-    const listRef = React$1.useRef(null);
-    React$1.useEffect(() => {
+    const listRef = React.useRef(null);
+    React.useEffect(() => {
       if (uploadingFiles && uploadingFilesReference && files) {
         if (enableSmartLoad) {
           const newVal = getNewUploadingFiles(uploadingFilesReference, uploadingFiles, files);
@@ -11991,7 +11991,7 @@
       }
     }, [uploadingFiles, files]);
     const isLazy = uploadingFilesReference ? ramda.any((file) => file.isLazy || false, uploadingFilesReference) : false;
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Stack,
       __spreadValues$A({
         ref: listRef,
@@ -12000,7 +12000,7 @@
         pr: overflowing ? 2 : 0,
         overflowY: "auto"
       }, rest),
-      uploadingFilesReference && ramda.map((file) => /* @__PURE__ */ React$1.createElement(
+      uploadingFilesReference && ramda.map((file) => /* @__PURE__ */ React.createElement(
         FileItem,
         {
           onChangeCallback: onChange,
@@ -12012,7 +12012,7 @@
           editFileOptions
         }
       ), uploadingFilesReference),
-      formattedFiles && ramda.map((file) => /* @__PURE__ */ React$1.createElement(
+      formattedFiles && ramda.map((file) => /* @__PURE__ */ React.createElement(
         FileItem,
         {
           onChangeCallback: onChange,
@@ -12083,8 +12083,8 @@
       "editFileOptions",
       "variant"
     ]);
-    const [bufferFiles, setBufferFiles] = React$1.useState([]);
-    const [previewFiles, setPreviewFiles] = React$1.useState([]);
+    const [bufferFiles, setBufferFiles] = React.useState([]);
+    const [previewFiles, setPreviewFiles] = React.useState([]);
     const getIndexById = (id) => ramda.findIndex((file) => file._id === id, previewFiles);
     const addFile = (file, id) => {
       const addedFile = createPreviewFileObject(file);
@@ -12103,14 +12103,14 @@
         setBufferFiles(queuedFiles);
       }
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Stack,
       __spreadValues$z({
         spacing: 4,
         maxW: "inherit",
         maxH: "inherit"
       }, rest),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         MultiFileUploader,
         {
           acceptFormat,
@@ -12122,7 +12122,7 @@
           variant
         }
       ),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         MultiFileList,
         {
           files: files || previewFiles,
@@ -12191,7 +12191,7 @@
       const formattedFiles = ramda.map((file) => isFile(file) ? file : createFileObjectFromSrc(file), buffer);
       return formattedFiles;
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -12206,7 +12206,7 @@
           const newValues = ramda.remove(removedIndex, 1, value);
           onChange(newValues);
         };
-        return /* @__PURE__ */ React$1.createElement(
+        return /* @__PURE__ */ React.createElement(
           MultiFilePicker,
           __spreadValues$y({
             onChange: async (files) => {
@@ -12240,7 +12240,7 @@
     children,
     theme: theme$1 = theme,
     themeName = "webappTheme"
-  }) => /* @__PURE__ */ React$1.createElement(react.ChakraProvider, { resetCSS: true, theme: theme$1 }, /* @__PURE__ */ React$1.createElement(CustomTheme.Provider, { value: themeName }, children));
+  }) => /* @__PURE__ */ React.createElement(react.ChakraProvider, { resetCSS: true, theme: theme$1 }, /* @__PURE__ */ React.createElement(CustomTheme.Provider, { value: themeName }, children));
 
   var __defProp$x = Object.defineProperty;
   var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
@@ -12272,20 +12272,20 @@
   };
   const Menu = (_a) => {
     var _b = _a, { variant = "relaxed" } = _b, props = __objRest$s(_b, ["variant"]);
-    return /* @__PURE__ */ React$1.createElement(react.Menu, __spreadValues$x({ variant }, props));
+    return /* @__PURE__ */ React.createElement(react.Menu, __spreadValues$x({ variant }, props));
   };
 
   const NumberInputStepper = ({
     includePercentage = false,
     enableStepperArrows = false
-  }) => /* @__PURE__ */ React$1.createElement(react.NumberInputStepper, null, /* @__PURE__ */ React$1.createElement(react.HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React$1.createElement(react.Center, { bgColor: "gray.50", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React$1.createElement(P, null, "%")), enableStepperArrows && /* @__PURE__ */ React$1.createElement(react.HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React$1.createElement(react.Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React$1.createElement(react.NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React$1.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, null, "%")), enableStepperArrows && /* @__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,
     {
       as: icons.ChevronUpSolid,
       color: "icon.input-stepper.default",
       boxSize: 4
     }
-  )), /* @__PURE__ */ React$1.createElement(react.NumberDecrementStepper, null, /* @__PURE__ */ React$1.createElement(
+  )), /* @__PURE__ */ React.createElement(react.NumberDecrementStepper, null, /* @__PURE__ */ React.createElement(
     Icon,
     {
       as: icons.ChevronDownSolid,
@@ -12373,7 +12373,7 @@
       const filteredNaN = Number.isNaN(value) ? "" : value;
       onChange(`${filteredNaN}`);
     };
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.NumberInput,
       __spreadValues$w(__spreadValues$w({
         variant,
@@ -12381,8 +12381,8 @@
         onChange: handleChange,
         id: name
       }, percentageProps), rest),
-      /* @__PURE__ */ React$1.createElement(react.NumberInputField, { onChange: handleChange }),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.NumberInputField, { onChange: handleChange }),
+      /* @__PURE__ */ React.createElement(
         NumberInputStepper,
         {
           includePercentage: onlyAcceptPercentage,
@@ -12420,7 +12420,7 @@
       }
     return target;
   };
-  const NumberInputField = React$1.forwardRef((_a, ref) => {
+  const NumberInputField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -12443,7 +12443,7 @@
       "inputRightElement"
     ]);
     const formatNumber = (value, factor) => onlyAcceptPercentage ? advancedParseFloat(value * factor) : value;
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -12455,14 +12455,14 @@
       },
       ({ onChange, value }) => {
         const initialValue = ramda.isNil(value) || Number.isNaN(parseFloat(value)) ? "" : formatNumber(value, 100);
-        const [displayValue, setDisplayValue] = React$1.useState(initialValue);
-        return /* @__PURE__ */ React$1.createElement(
+        const [displayValue, setDisplayValue] = React.useState(initialValue);
+        return /* @__PURE__ */ React.createElement(
           InputGroupWrapper,
           {
             inputLeftElement,
             inputRightElement
           },
-          /* @__PURE__ */ React$1.createElement(
+          /* @__PURE__ */ React.createElement(
             NumberInput,
             __spreadValues$v({
               name,
@@ -12510,7 +12510,7 @@
       }
     return target;
   };
-  const NotificationIconButton = React$1.forwardRef((_a, ref) => {
+  const NotificationIconButton = React.forwardRef((_a, ref) => {
     var _b = _a, {
       variant = "ghost",
       icon,
@@ -12526,17 +12526,17 @@
       "blinkerColor",
       "size"
     ]);
-    const [isBlinking, setIsBlinking] = React$1.useState(false);
+    const [isBlinking, setIsBlinking] = React.useState(false);
     const { container, notifier } = react.useMultiStyleConfig("NotificationIconButton", { size, variant });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Box,
       {
         onMouseEnter: () => setIsBlinking(true),
         onMouseLeave: () => setIsBlinking(false),
         sx: container
       },
-      hasNotification && /* @__PURE__ */ React$1.createElement(react.Box, { sx: notifier }, /* @__PURE__ */ React$1.createElement(Blinker, { isBlinking, color: blinkerColor, size: "2xs" })),
-      /* @__PURE__ */ React$1.createElement(
+      hasNotification && /* @__PURE__ */ React.createElement(react.Box, { sx: notifier }, /* @__PURE__ */ React.createElement(Blinker, { isBlinking, color: blinkerColor, size: "2xs" })),
+      /* @__PURE__ */ React.createElement(
         IconButton,
         __spreadValues$u({
           variant,
@@ -12590,7 +12590,7 @@
       "hidden",
       "children"
     ]);
-    return /* @__PURE__ */ React$1.createElement(react.PinInput, __spreadProps$5(__spreadValues$t({}, rest), { variant, placeholder: "\u25CF", mask: hidden }), children);
+    return /* @__PURE__ */ React.createElement(react.PinInput, __spreadProps$5(__spreadValues$t({}, rest), { variant, placeholder: "\u25CF", mask: hidden }), children);
   };
 
   const isStringArray = (value) => ramda.is(Array, value) && ramda.length(value) > 0 && typeof value[0] === "string";
@@ -12638,7 +12638,7 @@
       }
     return target;
   };
-  const Select = React$1.forwardRef((_a, ref) => {
+  const Select = React.forwardRef((_a, ref) => {
     var _b = _a, {
       options,
       isMulti,
@@ -12679,20 +12679,20 @@
       isMulti,
       value: ramda.is(Array, value) ? value : []
     });
-    const customComponents = React$1.useMemo(
+    const customComponents = React.useMemo(
       () => getComponents(components),
       [generateComponentsUpdateKey()]
     );
-    const prevOptions = React$1.useRef(
+    const prevOptions = React.useRef(
       options
     );
-    const renderedOptions = React$1.useMemo(() => {
+    const renderedOptions = React.useMemo(() => {
       if (!ramda.equals(prevOptions.current, options)) {
         prevOptions.current = options;
       }
       return prevOptions.current;
     }, [options]);
-    return /* @__PURE__ */ React$1.createElement(react.Box, { w: "full", "data-testid": testId, cursor: "pointer" }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { w: "full", "data-testid": testId, cursor: "pointer" }, /* @__PURE__ */ React.createElement(
       chakraReactSelect.Select,
       __spreadValues$s(__spreadProps$4(__spreadValues$s({
         isMulti,
@@ -12772,7 +12772,7 @@
       "inputLeftElement",
       "inputRightElement"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -12783,13 +12783,13 @@
         validate,
         ref
       },
-      ({ value, onChange }) => /* @__PURE__ */ React$1.createElement(react.HStack, { w: "full" }, /* @__PURE__ */ React$1.createElement(
+      ({ value, onChange }) => /* @__PURE__ */ React.createElement(react.HStack, { w: "full" }, /* @__PURE__ */ React.createElement(
         InputGroupWrapper,
         {
           inputLeftElement,
           inputRightElement
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           Select,
           __spreadValues$r({
             name,
@@ -12808,7 +12808,7 @@
             ) : null
           }, rest)
         )
-      ), /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(
         IconButton,
         {
           "aria-label": `${name}-close-button`,
@@ -12820,12 +12820,12 @@
             onChange(void 0);
             onChangeCallback(void 0, { action: "clear", removedValues: value });
           },
-          icon: /* @__PURE__ */ React$1.createElement(Icon, { as: icons.XCloseSolid })
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.XCloseSolid })
         }
       ))
     );
   };
-  const SelectField = React$1.forwardRef(BaseSelectField);
+  const SelectField = React.forwardRef(BaseSelectField);
 
   var __defProp$q = Object.defineProperty;
   var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
@@ -12867,7 +12867,7 @@
       "name",
       "size"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Switch,
       __spreadValues$q({
         size,
@@ -12906,7 +12906,7 @@
       }
     return target;
   };
-  const SwitchField = React$1.forwardRef((_a, ref) => {
+  const SwitchField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -12926,7 +12926,7 @@
       "labelPlacement",
       "labelSize"
     ]);
-    return /* @__PURE__ */ React$1.createElement(react.Box, { w: label ? "full" : "fit-content", display: "inline-flex" }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { w: label ? "full" : "fit-content", display: "inline-flex" }, /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -12936,7 +12936,7 @@
         validate,
         ref
       },
-      ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+      ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         react.Flex,
         {
           display: "inline-flex",
@@ -12944,7 +12944,7 @@
           gap: 2,
           direction: labelPlacement === "left" ? "row-reverse" : "row"
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           Switch,
           __spreadValues$p({
             name,
@@ -12956,7 +12956,7 @@
             "data-testid": "switch-field-test-id"
           }, rest)
         ),
-        /* @__PURE__ */ React$1.createElement(Label, { htmlFor: name, sx: { fontWeight: "normal" }, size: labelSize }, label)
+        /* @__PURE__ */ React.createElement(Label, { htmlFor: name, sx: { fontWeight: "normal" }, size: labelSize }, label)
       )
     ));
   });
@@ -12977,7 +12977,7 @@
       }
     return a;
   };
-  const TabPanel = (props) => /* @__PURE__ */ React$1.createElement(react.TabPanel, __spreadValues$o({ padding: 0 }, props));
+  const TabPanel = (props) => /* @__PURE__ */ React.createElement(react.TabPanel, __spreadValues$o({ padding: 0 }, props));
 
   var __defProp$n = Object.defineProperty;
   var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
@@ -13017,7 +13017,7 @@
       "variant",
       "isManual"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Tabs,
       __spreadValues$n({
         isManual,
@@ -13067,7 +13067,7 @@
       "name",
       "value"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Textarea,
       __spreadValues$m({
         size,
@@ -13106,7 +13106,7 @@
       }
     return target;
   };
-  const TextareaField = React$1.forwardRef((_a, ref) => {
+  const TextareaField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -13122,7 +13122,7 @@
       "direction",
       "onChange"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -13132,7 +13132,7 @@
         direction,
         ref
       },
-      ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+      ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         Textarea,
         __spreadValues$l({
           name,
@@ -13218,7 +13218,7 @@
       "inputRightElement",
       "onBlur"
     ]);
-    const [valueState, setValueState] = React$1.useState(valueProp);
+    const [valueState, setValueState] = React.useState(valueProp);
     const isControlled = typeof valueProp !== "undefined";
     const value = isControlled ? valueProp : valueState;
     const props = presetMap[preset];
@@ -13253,16 +13253,16 @@
         sourceInfo
       );
     };
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       validateRange();
     }, [value]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       InputGroupWrapper,
       {
         inputLeftElement,
         inputRightElement
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         reactNumberFormat.NumericFormat,
         __spreadValues$k(__spreadValues$k({
           allowLeadingZeros: true,
@@ -13308,7 +13308,7 @@
       }
     return target;
   };
-  const FormattedNumberInputField = React$1.forwardRef((_a, ref) => {
+  const FormattedNumberInputField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -13324,7 +13324,7 @@
       "onChange",
       "direction"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -13334,7 +13334,7 @@
         validate,
         ref
       },
-      ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+      ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         FormattedNumberInput,
         __spreadValues$j({
           name,
@@ -13398,7 +13398,7 @@
       "onChange",
       "onBlur"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       CustomInput,
       {
         mask,
@@ -13409,7 +13409,7 @@
         onChange,
         onBlur
       },
-      ({ name: nameProp }) => /* @__PURE__ */ React$1.createElement(
+      ({ name: nameProp }) => /* @__PURE__ */ React.createElement(
         react.Input,
         __spreadValues$i({
           placeholder: maskPlaceholder != null ? maskPlaceholder : placeholder,
@@ -13447,7 +13447,7 @@
       }
     return target;
   };
-  const TextField = React$1.forwardRef((_a, ref) => {
+  const TextField = React.forwardRef((_a, ref) => {
     var _b = _a, {
       name,
       label,
@@ -13469,7 +13469,7 @@
       "inputLeftElement",
       "inputRightElement"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -13479,13 +13479,13 @@
         direction,
         ref
       },
-      ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+      ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         InputGroupWrapper,
         {
           inputLeftElement,
           inputRightElement
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           As,
           __spreadValues$h({
             id: name,
@@ -13554,20 +13554,20 @@
       "onClose"
     ]);
     const icon = toastIconMap[variant];
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Alert,
       __spreadValues$g({
         variant,
         "data-testid": "toast-test"
       }, rest),
-      /* @__PURE__ */ React$1.createElement(react.HStack, { alignItems: "flex-start" }, icon && /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "flex-start" }, icon && /* @__PURE__ */ React.createElement(
         Icon,
         {
           as: icon,
           color: `icon.toast.${variant}`,
           boxSize: 6
         }
-      ), /* @__PURE__ */ React$1.createElement(react.Stack, { spacing: 0, alignItems: "flex-start" }, title && /* @__PURE__ */ React$1.createElement(Label, { size: "md" }, title), description && /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(react.Stack, { spacing: 0, alignItems: "flex-start" }, title && /* @__PURE__ */ React.createElement(Label, { size: "md" }, title), description && /* @__PURE__ */ React.createElement(
         P,
         {
           sx: {
@@ -13575,7 +13575,7 @@
           }
         },
         description
-      )), /* @__PURE__ */ React$1.createElement(
+      )), /* @__PURE__ */ React.createElement(
         react.CloseButton,
         {
           size: "sm",
@@ -13606,7 +13606,7 @@
   };
   const useToast = (defaultOpts = {}) => {
     const toast = react.useToast(defaultOpts);
-    const toastIdRef = React$1.useRef(null);
+    const toastIdRef = React.useRef(null);
     return (opts = {}) => {
       const toastProps = __spreadValues$f({
         render: ({ onClose }) => {
@@ -13615,7 +13615,7 @@
             title = "Success",
             description = ""
           } = opts;
-          return /* @__PURE__ */ React$1.createElement(
+          return /* @__PURE__ */ React.createElement(
             Toast,
             {
               variant,
@@ -13686,7 +13686,7 @@
     const pinColor = pinVariantMap[variant];
     const pinSizeTuple = pinSizeMap[size];
     const [outerSize, innerSize] = pinSizeTuple;
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Circle,
       __spreadValues$e({
         size: outerSize,
@@ -13694,7 +13694,7 @@
         borderWidth: "xs",
         borderColor: pinColor
       }, rest),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         react.Circle,
         {
           size: innerSize,
@@ -13738,7 +13738,7 @@
     } = _b, rest = __objRest$a(_b, [
       "message"
     ]);
-    return /* @__PURE__ */ React$1.createElement(react.Alert, __spreadValues$d({ backgroundColor: "background.default", color: "text.default", width: "100%" }, rest), /* @__PURE__ */ React$1.createElement(react.VStack, { w: "full" }, /* @__PURE__ */ React$1.createElement(Icon, { as: toastIconMap.error, color: "icon.toast.error", boxSize: 6 }), /* @__PURE__ */ React$1.createElement(react.AlertTitle, null, " Error "), message && /* @__PURE__ */ React$1.createElement(react.AlertDescription, null, message)));
+    return /* @__PURE__ */ React.createElement(react.Alert, __spreadValues$d({ backgroundColor: "background.default", color: "text.default", width: "100%" }, rest), /* @__PURE__ */ React.createElement(react.VStack, { w: "full" }, /* @__PURE__ */ React.createElement(Icon, { as: toastIconMap.error, color: "icon.toast.error", boxSize: 6 }), /* @__PURE__ */ React.createElement(react.AlertTitle, null, " Error "), message && /* @__PURE__ */ React.createElement(react.AlertDescription, null, message)));
   };
 
   var __defProp$c = Object.defineProperty;
@@ -13757,7 +13757,7 @@
       }
     return a;
   };
-  const StepPanel = (props) => /* @__PURE__ */ React$1.createElement(TabPanel, __spreadValues$c({ padding: 0 }, props));
+  const StepPanel = (props) => /* @__PURE__ */ React.createElement(TabPanel, __spreadValues$c({ padding: 0 }, props));
 
   var __defProp$b = Object.defineProperty;
   var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
@@ -13775,7 +13775,7 @@
       }
     return a;
   };
-  const Steps = (props) => /* @__PURE__ */ React$1.createElement(react.Tabs, __spreadValues$b({ isManual: true }, props));
+  const Steps = (props) => /* @__PURE__ */ React.createElement(react.Tabs, __spreadValues$b({ isManual: true }, props));
 
   var __defProp$a = Object.defineProperty;
   var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
@@ -13813,12 +13813,12 @@
       description: descriptionStyle,
       indicator: indicatorStyle
     } = react.useMultiStyleConfig("Step");
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Tab,
       __spreadValues$a({
         sx: step
       }, rest),
-      /* @__PURE__ */ React$1.createElement(react.Flex, { flexDirection: "row", alignItems: "flex-start", gap: "4", _groupFocusVisible: ring }, indicator && /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(react.Flex, { flexDirection: "row", alignItems: "flex-start", gap: "4", _groupFocusVisible: ring }, indicator && /* @__PURE__ */ React.createElement(
         react.Box,
         {
           sx: indicatorStyle,
@@ -13826,7 +13826,7 @@
           justifyContent: "center"
         },
         indicator
-      ), /* @__PURE__ */ React$1.createElement(react.Flex, { flexDirection: "column" }, /* @__PURE__ */ React$1.createElement(Capitalized, { sx: labelStyle }, label), description && /* @__PURE__ */ React$1.createElement(Lead, { sx: descriptionStyle }, description)))
+      ), /* @__PURE__ */ React.createElement(react.Flex, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Capitalized, { sx: labelStyle }, label), description && /* @__PURE__ */ React.createElement(Lead, { sx: descriptionStyle }, description)))
     );
   };
 
@@ -13863,9 +13863,9 @@
   };
   const StepList = (_a) => {
     var _b = _a, { children } = _b, rest = __objRest$8(_b, ["children"]);
-    const tabs = React$1.Children.count(children);
+    const tabs = React.Children.count(children);
     const styles = react.useStyleConfig("StepList", { tabs });
-    return /* @__PURE__ */ React$1.createElement(react.TabList, __spreadProps$2(__spreadValues$9({}, rest), { sx: styles }), children);
+    return /* @__PURE__ */ React.createElement(react.TabList, __spreadProps$2(__spreadValues$9({}, rest), { sx: styles }), children);
   };
 
   var __defProp$8 = Object.defineProperty;
@@ -13896,7 +13896,7 @@
       }
     return target;
   };
-  const ClipboardInput = React$1.forwardRef((_a, ref) => {
+  const ClipboardInput = React.forwardRef((_a, ref) => {
     var _b = _a, {
       size = "md",
       value,
@@ -13908,10 +13908,10 @@
     ]);
     const { hasCopied, onCopy, setValue } = react.useClipboard(value);
     const { button, icon, tooltip } = react.useMultiStyleConfig("ClipboardInput", { size });
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       setValue(value);
     }, [value]);
-    return /* @__PURE__ */ React$1.createElement(react.InputGroup, { size, "data-testid": "clipboard-input-test-id", ref }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.InputGroup, { size, "data-testid": "clipboard-input-test-id", ref }, /* @__PURE__ */ React.createElement(
       react.Input,
       __spreadValues$8({
         textOverflow: "ellipsis",
@@ -13919,7 +13919,7 @@
         isReadOnly: true,
         value
       }, rest)
-    ), /* @__PURE__ */ React$1.createElement(react.InputRightElement, null, /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(react.InputRightElement, null, /* @__PURE__ */ React.createElement(
       Tooltip,
       {
         label: hasCopied ? "Copied!" : "Copy",
@@ -13927,7 +13927,7 @@
         closeOnClick: false,
         sx: tooltip
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         IconButton,
         {
           "aria-label": ariaLabel || "Click to copy",
@@ -13935,7 +13935,7 @@
           variant: hasCopied ? "success" : "default",
           sx: button
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           Icon,
           {
             as: hasCopied ? icons.CheckDuo : icons.CopyDuo,
@@ -13988,8 +13988,8 @@
       "minLeftWidth",
       "minRightWidth"
     ]);
-    const dividerRef = React$1.useRef(null);
-    const mouseDownHandler = React$1.useCallback(
+    const dividerRef = React.useRef(null);
+    const mouseDownHandler = React.useCallback(
       (e) => {
         if (e.target !== dividerRef.current) {
           return;
@@ -14022,14 +14022,14 @@
       []
     );
     const containerStyle = react.useStyleConfig("SplitPane", { minLeftWidth, minRightWidth, initialSplit, isOpen });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Grid,
       __spreadValues$7({
         sx: containerStyle,
         onPointerDown: mouseDownHandler
       }, rest),
       children[0],
-      isOpen && React$1.cloneElement(children[1], { ref: dividerRef }),
+      isOpen && React.cloneElement(children[1], { ref: dividerRef }),
       isOpen && children[2]
     );
   };
@@ -14064,7 +14064,7 @@
   };
   const PaneItem = (_a) => {
     var _b = _a, { children } = _b, rest = __objRest$5(_b, ["children"]);
-    return /* @__PURE__ */ React$1.createElement(react.GridItem, __spreadValues$6({ overflow: "hidden" }, rest), children);
+    return /* @__PURE__ */ React.createElement(react.GridItem, __spreadValues$6({ overflow: "hidden" }, rest), children);
   };
 
   var __defProp$5 = Object.defineProperty;
@@ -14085,7 +14085,7 @@
   };
   const PaneDivider = react.forwardRef((props, ref) => {
     const style = react.useStyleConfig("PaneDivider");
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Box,
       __spreadValues$5({
         ref,
@@ -14138,8 +14138,8 @@
     ]);
     const rows = getChildrenWithProps(children, {});
     const parsedRowHeight = system.useToken("sizes", rowHeight);
-    return /* @__PURE__ */ React$1.createElement(react.Stack, __spreadValues$4({ spacing, position: "relative" }, rest), rows.map(
-      (row, i) => /* @__PURE__ */ React$1.createElement(react.HStack, { key: `row-${i}`, alignItems: stepCircleAlignment }, /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.Stack, __spreadValues$4({ spacing, position: "relative" }, rest), rows.map(
+      (row, i) => /* @__PURE__ */ React.createElement(react.HStack, { key: `row-${i}`, alignItems: stepCircleAlignment }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
         react.Box,
         {
           borderRadius: "full",
@@ -14150,7 +14150,7 @@
           zIndex: "docked",
           marginTop: `${stepCircleMarginTopPx}px`
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           Label,
           {
             size: "sm",
@@ -14161,7 +14161,7 @@
           i + 1
         )
       ), row))
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       react.Divider,
       {
         orientation: "vertical",
@@ -14205,7 +14205,7 @@
   const getCustomComponents = () => ({
     Option: (_a) => {
       var _b = _a, { children } = _b, props = __objRest$3(_b, ["children"]);
-      return /* @__PURE__ */ React$1.createElement(ChakraOption, __spreadValues$3({}, props), props.data.isCreation && /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(ChakraOption, __spreadValues$3({}, props), props.data.isCreation && /* @__PURE__ */ React.createElement(
         react.Flex,
         {
           mr: 3,
@@ -14214,8 +14214,8 @@
           justifyContent: "center",
           alignItems: "center"
         },
-        /* @__PURE__ */ React$1.createElement(Icon, { as: icons.PlusSolid, color: "brand" })
-      ), !props.data.isCreation && /* @__PURE__ */ React$1.createElement(react.Box, { mr: 3, width: 1.5 }), /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(Icon, { as: icons.PlusSolid, color: "brand" })
+      ), !props.data.isCreation && /* @__PURE__ */ React.createElement(react.Box, { mr: 3, width: 1.5 }), /* @__PURE__ */ React.createElement(
         react.Text,
         {
           color: props.data.isCreation ? "text.brand" : "text.default",
@@ -14284,19 +14284,19 @@
       "value",
       "menuPlacement"
     ]);
-    const [selectedOption, setSelectedOption] = React$1.useState(() => {
+    const [selectedOption, setSelectedOption] = React.useState(() => {
       var _a2, _b2;
       const targetValue = (_a2 = value != null ? value : defaultValue) != null ? _a2 : null;
       return targetValue ? (_b2 = standardOptions.find((option) => option.value === targetValue)) != null ? _b2 : null : null;
     });
-    const [newOptionPlaceholder, setNewOptionPlaceholder] = React$1.useState(initialPlaceholder);
-    const [createdOptions, setCreatedOptions] = React$1.useState([]);
-    const [createNewOption, setCreateNewOption] = React$1.useState(false);
-    const [addFieldInputValue, setAddFieldInputValue] = React$1.useState("");
+    const [newOptionPlaceholder, setNewOptionPlaceholder] = React.useState(initialPlaceholder);
+    const [createdOptions, setCreatedOptions] = React.useState([]);
+    const [createNewOption, setCreateNewOption] = React.useState(false);
+    const [addFieldInputValue, setAddFieldInputValue] = React.useState("");
     function isCreationOption(option) {
       return option && typeof option.isCreation === "boolean";
     }
-    const ref = React$1.useRef(null);
+    const ref = React.useRef(null);
     const checkIfNewOptionTextExistsInOptions = (string, options) => ramda.any((option) => ramda.toLower(option.value) === string, options);
     const handleCreateOption = (newOptionTextString) => {
       setCreateNewOption(true);
@@ -14341,31 +14341,31 @@
         onOptionChange(option);
       }
     };
-    const combinedOptions = React$1.useMemo(
+    const combinedOptions = React.useMemo(
       () => yafu.uniqBy(ramda.prop("value"), [...standardOptions, ...createdOptions]),
       [standardOptions, createdOptions]
     );
     const customOptions = [
       __spreadProps$1(__spreadValues$2({}, creationOption), {
-        icon: /* @__PURE__ */ React$1.createElement(react.Icon, { as: icons.PlusSolid, color: "brand" })
+        icon: /* @__PURE__ */ React.createElement(react.Icon, { as: icons.PlusSolid, color: "brand" })
       }),
       ...combinedOptions
     ];
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       var _a2;
       const newSelectedOption = (_a2 = combinedOptions.find((option) => option.value === value)) != null ? _a2 : null;
       if ((selectedOption == null ? void 0 : selectedOption.value) !== (newSelectedOption == null ? void 0 : newSelectedOption.value)) {
         setSelectedOption(newSelectedOption);
       }
     }, [value, combinedOptions]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       react.Box,
       {
         ref,
         w: "full",
         borderRadius: "none"
       },
-      createNewOption && /* @__PURE__ */ React$1.createElement(
+      createNewOption && /* @__PURE__ */ React.createElement(
         EditableText,
         {
           value: addFieldInputValue,
@@ -14389,7 +14389,7 @@
           }
         }
       ),
-      !createNewOption && /* @__PURE__ */ React$1.createElement(
+      !createNewOption && /* @__PURE__ */ React.createElement(
         chakraReactSelect.CreatableSelect,
         __spreadValues$2({
           menuPlacement,
@@ -14481,15 +14481,15 @@
     ]);
     var _a2;
     const { isOpen, onToggle, onClose } = react.useDisclosure();
-    const [inputValueState, setInputValueState] = React$1.useState(valueProp == null ? void 0 : valueProp.input);
-    const [selectOptionState, setselectOptionState] = React$1.useState(valueProp == null ? void 0 : valueProp.option);
-    const [enableSelectInput, setEnableSelectInput] = React$1.useState(false);
+    const [inputValueState, setInputValueState] = React.useState(valueProp == null ? void 0 : valueProp.input);
+    const [selectOptionState, setselectOptionState] = React.useState(valueProp == null ? void 0 : valueProp.option);
+    const [enableSelectInput, setEnableSelectInput] = React.useState(false);
     const isInputValueControlled = typeof (valueProp == null ? void 0 : valueProp.input) !== "undefined";
     const inputValue = isInputValueControlled ? valueProp.input : inputValueState;
     const isOptionControlled = typeof (valueProp == null ? void 0 : valueProp.option) !== "undefined";
     const selectOption = isOptionControlled ? valueProp.option : selectOptionState;
-    const buttonRef = React$1.useRef();
-    const selectRef = React$1.useRef();
+    const buttonRef = React.useRef();
+    const selectRef = React.useRef();
     const getNewValue = (option, input) => {
       const newValueOption = option != null ? option : options[0];
       return ramda.is(Number, input) ? { input: Number(input), option: newValueOption } : { option: newValueOption };
@@ -14521,12 +14521,12 @@
       }
       onToggle();
     };
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       if (enableSelectInput) {
         selectRef.current.focus();
       }
     }, [enableSelectInput]);
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       const needsToCorrectOption = !selectOption;
       const needsToCorrectInput = !ramda.is(Number, inputValue) && defaultToZeroIfEmpty;
       const option = needsToCorrectOption ? options[0] : selectOption;
@@ -14541,7 +14541,7 @@
         onChange == null ? void 0 : onChange(getNewValue(option, input));
       }
     }, [inputValue, defaultToZeroIfEmpty]);
-    return /* @__PURE__ */ React$1.createElement(react.InputGroup, null, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(react.InputGroup, null, /* @__PURE__ */ React.createElement(
       FormattedNumberInput,
       __spreadValues$1({
         width: "100%",
@@ -14556,7 +14556,7 @@
         min,
         max
       }, rest)
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       react.InputRightElement,
       {
         width: "auto",
@@ -14564,7 +14564,7 @@
         justifyContent: "flex-end",
         padding: 2
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         react.Button,
         {
           ref: buttonRef,
@@ -14575,7 +14575,7 @@
         },
         (_a2 = selectOption == null ? void 0 : selectOption.label) != null ? _a2 : ""
       )
-    ), /* @__PURE__ */ React$1.createElement(react.Box, { position: "absolute", width: "100%" }, /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(react.Box, { position: "absolute", width: "100%" }, /* @__PURE__ */ React.createElement(
       Select,
       {
         ref: selectRef,
@@ -14648,7 +14648,7 @@
       "validate",
       "onChange"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -14657,7 +14657,7 @@
         isRequired,
         validate
       },
-      ({ value, onChange }) => /* @__PURE__ */ React$1.createElement(
+      ({ value, onChange }) => /* @__PURE__ */ React.createElement(
         ComboPicker,
         __spreadValues({
           "data-testid": "combo-picker-test-id",