@northlight/ui 2.34.1 → 2.34.3

package/dist/es/northlight.js

@@ -1,6 +1,6 @@
-import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, keyframes, useToken as useToken$1, extendTheme, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$2, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, Flex, CheckboxGroup, IconButton as IconButton$1, Popover as Popover$2, Portal, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, Table as Table$2, Thead, Tr, Tbody, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Spacer, useOutsideClick, Tooltip as Tooltip$2, VStack, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, Progress, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem, theme as theme$1 } from '@chakra-ui/react';
-export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, Box, BreadcrumbItem as Breadcrumb, BreadcrumbLink, BreadcrumbSeparator, Breadcrumb as Breadcrumbs, ButtonGroup, Card, CardBody, CardFooter, CardHeader, Center, Modal as ChakraModal, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Container, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormHelperText, Grid, GridItem, HStack, Heading, Hide, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, Mark, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderThumb, RangeSliderTrack, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, TableCaption, TableContainer, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Tfoot, Th, Thead, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, keyframes, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useEditable, useEditableControls, useEditableState, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
-import React$1, { useState, useEffect, useRef, isValidElement, cloneElement, Children, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, memo, useMemo, useCallback } from 'react';
+import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, useToken as useToken$1, extendTheme, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$2, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, Flex, CheckboxGroup, IconButton as IconButton$1, Popover as Popover$2, Portal, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, Table as Table$2, Thead, Tr, Tbody, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Spacer, useOutsideClick, Tooltip as Tooltip$2, VStack, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, Progress, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem, theme as theme$1 } from '@chakra-ui/react';
+export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, Box, BreadcrumbItem as Breadcrumb, BreadcrumbLink, BreadcrumbSeparator, Breadcrumb as Breadcrumbs, ButtonGroup, Card, CardBody, CardFooter, CardHeader, Center, Modal as ChakraModal, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Container, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormHelperText, Grid, GridItem, HStack, Heading, Hide, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, Mark, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderThumb, RangeSliderTrack, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, TableCaption, TableContainer, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Tfoot, Th, Thead, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useEditable, useEditableControls, useEditableState, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
+import React, { useState, useEffect, useRef, isValidElement, cloneElement, Children, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, memo, useMemo, useCallback } from 'react';
 import { CreatableSelect, chakraComponents, AsyncSelect, Select as Select$3 } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, chakraComponents as selectChakraComponents } from 'chakra-react-select';
 import { isNil, last, map, prop, difference, replace, split, path, T, keys, omit, merge, isEmpty, identity, any, ifElse, gt, always, defaultTo, take, inc, dec, forEach, is, trim, values, equals, mergeAll, toLower, find, times, has, not, all, filter, test, indexOf, remove, insert, intersection, findIndex, concat, head, match, length, propEq } from 'ramda';
@@ -9,6 +9,8 @@ import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-fo
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import { useToken, useMultiStyleConfig as useMultiStyleConfig$1, chakra as chakra$1 } from '@chakra-ui/system';
 import { palette, WebappComponentsTokensSet, WebappSystemTokensSet, typography, TottComponentsTokensSet, TottSystemTokensSet, coreZIndex, coreSizing, coreSpacing, coreFontWeight, coreBoxShadow, coreFontSize, coreLineHeight, coreBorderRadius } from '@northlight/tokens';
+import { keyframes } from '@emotion/react';
+export { keyframes } from '@emotion/react';
 import { randomColor, cssVar, mode } from '@chakra-ui/theme-tools';
 import { UserSquareDuo, BusinessContactDuo, CheckDuo, ChevronUpDuo, ChevronDownDuo, ColorsDuo, CheckSolid, CalendarDuo, ChevronLeftSolid, ChevronRightSolid, XCloseSolid, CheckCircleSolid, AlertTriangleSolid, AlertCircleSolid, AlertOctagonSolid, InfoSolid, BrightnessSolid, HelpCircleSolid, TrashDuo, SearchDuo, DotsMatrixSolid, DragDuo, EditDuo, ZoomInDuo, Image03Solid, UploadCloudSolid, FileBlankDuo, EditBoxDuo, DownloadDuo, TrashFullDuo, Image03Duo, ChevronUpSolid, ChevronDownSolid, BellSolid, CopyDuo, PlusSolid } from '@northlight/icons';
 import { joiResolver } from '@hookform/resolvers/joi';
@@ -58,7 +60,7 @@ var __spreadValues$2t = (a, b) => {
     }
   return a;
 };
-const Accordion = (props) => /* @__PURE__ */ React$1.createElement(Accordion$1, __spreadValues$2t({}, props));
+const Accordion = (props) => /* @__PURE__ */ React.createElement(Accordion$1, __spreadValues$2t({}, props));
 
 var __defProp$2s = Object.defineProperty;
 var __getOwnPropSymbols$2s = Object.getOwnPropertySymbols;
@@ -76,7 +78,7 @@ var __spreadValues$2s = (a, b) => {
     }
   return a;
 };
-const AccordionButton = (props) => /* @__PURE__ */ React$1.createElement(AccordionButton$1, __spreadValues$2s({}, props));
+const AccordionButton = (props) => /* @__PURE__ */ React.createElement(AccordionButton$1, __spreadValues$2s({}, props));
 
 var __defProp$2r = Object.defineProperty;
 var __getOwnPropSymbols$2r = Object.getOwnPropertySymbols;
@@ -94,7 +96,7 @@ var __spreadValues$2r = (a, b) => {
     }
   return a;
 };
-const AccordionPanel = (props) => /* @__PURE__ */ React$1.createElement(AccordionPanel$1, __spreadValues$2r({}, props));
+const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(AccordionPanel$1, __spreadValues$2r({}, props));
 
 var __defProp$2q = Object.defineProperty;
 var __getOwnPropSymbols$2q = Object.getOwnPropertySymbols;
@@ -112,7 +114,7 @@ var __spreadValues$2q = (a, b) => {
     }
   return a;
 };
-const AccordionItem = (props) => /* @__PURE__ */ React$1.createElement(AccordionItem$1, __spreadValues$2q({}, props));
+const AccordionItem = (props) => /* @__PURE__ */ React.createElement(AccordionItem$1, __spreadValues$2q({}, props));
 
 const useDebounce = (value, delay) => {
   const [debouncedValue, setDebouncedValue] = useState(value);
@@ -3819,7 +3821,7 @@ function TagsInput(_a) {
       setMenuIsOpen(true);
     }
   };
-  return /* @__PURE__ */ React$1.createElement(Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
     CustomSelect,
     __spreadValues$2g(__spreadProps$t(__spreadValues$2g({
       isMulti: true,
@@ -3898,19 +3900,19 @@ const OrganizationLogo = (_a) => {
     container,
     text
   } = useMultiStyleConfig("Avatar", __spreadValues$2f({ variant, image }, rest));
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     chakra.div,
     __spreadValues$2f({
       __css: container,
       "data-testid": "organization-logo-test-id"
     }, rest),
-    image ? /* @__PURE__ */ React$1.createElement(
+    image ? /* @__PURE__ */ React.createElement(
       chakra.img,
       {
         alt: name,
         src: image
       }
-    ) : /* @__PURE__ */ React$1.createElement(chakra.span, { __css: text }, getInitials(name))
+    ) : /* @__PURE__ */ React.createElement(chakra.span, { __css: text }, getInitials(name))
   );
 };
 
@@ -3950,7 +3952,7 @@ const Alert = (_a) => {
     "variant",
     "children"
   ]);
-  return /* @__PURE__ */ React$1.createElement(Alert$2, __spreadValues$2e({ variant }, rest), children);
+  return /* @__PURE__ */ React.createElement(Alert$2, __spreadValues$2e({ variant }, rest), children);
 };
 
 var __defProp$2d = Object.defineProperty;
@@ -3969,7 +3971,7 @@ var __spreadValues$2d = (a, b) => {
     }
   return a;
 };
-const AspectRatio = (props) => /* @__PURE__ */ React$1.createElement(AspectRatio$1, __spreadValues$2d({}, props));
+const AspectRatio = (props) => /* @__PURE__ */ React.createElement(AspectRatio$1, __spreadValues$2d({}, props));
 
 var __defProp$2c = Object.defineProperty;
 var __getOwnPropSymbols$2c = Object.getOwnPropertySymbols;
@@ -4011,15 +4013,15 @@ const Icon = forwardRef((_a, ref) => {
     "color",
     "boxSize"
   ]);
-  const CustomIcon = As != null ? As : () => /* @__PURE__ */ React$1.createElement(Icon$2, null);
+  const CustomIcon = As != null ? As : () => /* @__PURE__ */ React.createElement(Icon$2, null);
   const styles = useStyleConfig("Icon", { size, color, boxSize });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Icon$2,
     __spreadValues$2c({
       ref,
       sx: styles
     }, rest),
-    /* @__PURE__ */ React$1.createElement(CustomIcon, null)
+    /* @__PURE__ */ React.createElement(CustomIcon, null)
   );
 });
 
@@ -4027,7 +4029,7 @@ const AvatarBadge = ({
   notificationCount = 0
 }) => {
   const { badge } = useMultiStyleConfig("Avatar");
-  return /* @__PURE__ */ React$1.createElement(chakra.span, { sx: badge }, notificationCount > 999 ? "999+" : notificationCount);
+  return /* @__PURE__ */ React.createElement(chakra.span, { sx: badge }, notificationCount > 999 ? "999+" : notificationCount);
 };
 
 var __defProp$2b = Object.defineProperty;
@@ -4081,21 +4083,21 @@ const Avatar = (_a) => {
     name,
     bgColor
   });
-  return /* @__PURE__ */ React$1.createElement(Box, __spreadValues$2b({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues$2b({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React.createElement(
     chakra.img,
     {
       alt: name,
       src: image,
       sx: userImage
     }
-  ) : name ? /* @__PURE__ */ React$1.createElement(chakra.span, { sx: text }, getInitials(name)) : /* @__PURE__ */ React$1.createElement(
+  ) : name ? /* @__PURE__ */ React.createElement(chakra.span, { sx: text }, getInitials(name)) : /* @__PURE__ */ React.createElement(
     Icon,
     {
       as: variant === "square" ? UserSquareDuo : 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;
@@ -4135,7 +4137,7 @@ const H1 = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("H1", { sx });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Heading,
     __spreadValues$2a({
       as: "h1",
@@ -4183,7 +4185,7 @@ const H2 = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("H2", { sx });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Heading,
     __spreadValues$29({
       as: "h2",
@@ -4231,7 +4233,7 @@ const H3 = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("H3", { sx });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Heading,
     __spreadValues$28({
       as: "h3",
@@ -4279,7 +4281,7 @@ const H4 = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("H4", { sx });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Heading,
     __spreadValues$27({
       as: "h4",
@@ -4327,7 +4329,7 @@ const H5 = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("H5", { sx });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Heading,
     __spreadValues$26({
       as: "h5",
@@ -4375,7 +4377,7 @@ const H6 = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("H6", { sx });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Heading,
     __spreadValues$25({
       as: "h6",
@@ -4425,7 +4427,7 @@ const P = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("P", { variant, sx });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Text,
     __spreadValues$24({
       variant,
@@ -4468,7 +4470,7 @@ const Blockquote = forwardRef$1(
   (_a, ref) => {
     var _b = _a, { children, sx = {} } = _b, rest = __objRest$1F(_b, ["children", "sx"]);
     const styles = useStyleConfig("Blockquote", { sx });
-    return /* @__PURE__ */ React$1.createElement(Text, __spreadValues$23({ as: "span", sx: styles, ref }, rest), children);
+    return /* @__PURE__ */ React.createElement(Text, __spreadValues$23({ as: "span", sx: styles, ref }, rest), children);
   }
 );
 
@@ -4509,7 +4511,7 @@ const Capitalized = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("Capitalized", { sx });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Text,
     __spreadValues$22({
       as: "span",
@@ -4557,7 +4559,7 @@ const Lead = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("Lead", { sx });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Text,
     __spreadValues$21({
       as: "span",
@@ -4605,7 +4607,7 @@ const Small = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("Small", { sx });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Text,
     __spreadValues$20({
       as: "small",
@@ -4653,7 +4655,7 @@ const Tiny = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("Tiny", { sx });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Text,
     __spreadValues$1$({
       as: "span",
@@ -4703,11 +4705,11 @@ const Label = forwardRef$1((_a, ref) => {
     "sx"
   ]);
   const styles = useStyleConfig("Label", { sx, size });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     FormLabel$1,
     __spreadValues$1_({
       sx: styles,
-      requiredIndicator: /* @__PURE__ */ React$1.createElement(VisuallyHidden, null),
+      requiredIndicator: /* @__PURE__ */ React.createElement(VisuallyHidden, null),
       ref
     }, rest),
     children
@@ -4746,7 +4748,7 @@ const NumVal = forwardRef$1(
   (_a, ref) => {
     var _b = _a, { children, size = "sm", sx = {} } = _b, rest = __objRest$1z(_b, ["children", "size", "sx"]);
     const styles = useStyleConfig("NumVal", { sx, size });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Text,
       __spreadValues$1Z({
         as: "span",
@@ -4825,7 +4827,7 @@ const OverflowGroup = ({
     max,
     getChildrenWithProps(children, defaultTo({}, childrenProps))
   );
-  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, shownChildren);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, shownChildren);
 };
 
 const useOverflowGroup = () => {
@@ -4882,7 +4884,7 @@ const AvatarGroup = (_a) => {
     { ml: spacing },
     (_child, idx) => idx > 0
   );
-  return /* @__PURE__ */ React$1.createElement(HStack, __spreadValues$1Y({ bgColor: "background.default" }, rest), /* @__PURE__ */ React$1.createElement(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(HStack, __spreadValues$1Y({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(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;
@@ -4901,7 +4903,7 @@ var __spreadValues$1X = (a, b) => {
     }
   return a;
 };
-const Badge = forwardRef$1((props, ref) => /* @__PURE__ */ React$1.createElement(Badge$2, __spreadValues$1X({ ref }, props)));
+const Badge = forwardRef$1((props, ref) => /* @__PURE__ */ React.createElement(Badge$2, __spreadValues$1X({ ref }, props)));
 
 var __defProp$1W = Object.defineProperty;
 var __getOwnPropSymbols$1W = Object.getOwnPropertySymbols;
@@ -4942,7 +4944,7 @@ const Blinker = (_a) => {
     "isBlinking"
   ]);
   const styles = useStyleConfig("Blinker", { color, size, isBlinking });
-  return /* @__PURE__ */ React$1.createElement(Box, __spreadValues$1W({ sx: styles, "data-testid": "blinker-test-id" }, rest));
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues$1W({ sx: styles, "data-testid": "blinker-test-id" }, rest));
 };
 
 var __defProp$1V = Object.defineProperty;
@@ -4975,7 +4977,7 @@ var __objRest$1w = (source, exclude) => {
 };
 const Spinner = (_a) => {
   var rest = __objRest$1w(_a, []);
-  return /* @__PURE__ */ React$1.createElement(Spinner$2, __spreadValues$1V({}, rest));
+  return /* @__PURE__ */ React.createElement(Spinner$2, __spreadValues$1V({}, rest));
 };
 
 var __defProp$1U = Object.defineProperty;
@@ -5015,13 +5017,13 @@ const SpinnerSizeMap = {
 const Button = forwardRef$1(
   (_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(
       Button$2,
       __spreadValues$1U({
         variant,
         ref,
         size,
-        spinner: /* @__PURE__ */ React$1.createElement(
+        spinner: /* @__PURE__ */ React.createElement(
           Spinner,
           {
             size: SpinnerSizeMap[size]
@@ -5076,7 +5078,7 @@ const Checkbox = (_a) => {
     "variant"
   ]);
   const controlledValue = typeof value === "boolean" ? { isChecked: value } : { value };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Checkbox$2,
     __spreadValues$1T(__spreadValues$1T({
       size,
@@ -5192,7 +5194,7 @@ const Form = forwardRef$1((_a, ref) => {
     newMethods.trigger();
     e.preventDefault();
   };
-  return /* @__PURE__ */ React$1.createElement(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(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;
@@ -5232,7 +5234,7 @@ const FormLabel = forwardRef$1((_a, ref) => {
   } = _b, rest = __objRest$1s(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Label,
     __spreadProps$s(__spreadValues$1R({
       size: "sm",
@@ -5302,15 +5304,15 @@ const BaseField = (_a, ref) => {
   const { formState: { errors } } = methods;
   const control = passedControl != null ? passedControl : methods.control;
   const fieldError = getFieldError(name, errors);
-  return /* @__PURE__ */ React$1.createElement(FormControl, { isInvalid: !!fieldError, isRequired, ref }, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(FormControl, { isInvalid: !!fieldError, isRequired, ref }, /* @__PURE__ */ React.createElement(
     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(
       Controller,
       {
         name,
@@ -5319,7 +5321,7 @@ const BaseField = (_a, ref) => {
         render: ({ field }) => children(field, methods)
       }
     )
-  ), /* @__PURE__ */ React$1.createElement(FormErrorMessage, null, fieldError && (fieldError == null ? void 0 : fieldError.message)));
+  ), /* @__PURE__ */ React.createElement(FormErrorMessage, null, fieldError && (fieldError == null ? void 0 : fieldError.message)));
 };
 const Field = forwardRef$1(BaseField);
 
@@ -5382,13 +5384,13 @@ const CheckboxField = forwardRef$1((_a, ref) => {
     "labelPlacement",
     "labelSize"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Box,
     {
       w: label ? "full" : "fit-content",
       display: "inline-flex"
     },
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(
       Field,
       {
         name,
@@ -5398,13 +5400,13 @@ const CheckboxField = forwardRef$1((_a, ref) => {
         validate,
         ref
       },
-      ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+      ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         Flex,
         {
           gap: 2,
           direction: labelPlacement === "left" ? "row-reverse" : "row"
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           Checkbox,
           __spreadValues$1P({
             name,
@@ -5417,7 +5419,7 @@ const CheckboxField = forwardRef$1((_a, ref) => {
             "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)
       )
     )
   );
@@ -5469,7 +5471,7 @@ const CheckboxGroupField = forwardRef$1((_a, ref) => {
     "validate",
     "onChange"
   ]);
-  return /* @__PURE__ */ React$1.createElement(Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -5479,7 +5481,7 @@ const CheckboxGroupField = forwardRef$1((_a, ref) => {
       direction,
       ref
     },
-    ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+    ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       CheckboxGroup,
       __spreadValues$1O({
         onChange: (e) => {
@@ -5537,7 +5539,7 @@ const IconButton = forwardRef$1((_a, ref) => {
   var _a2;
   const IconComponent = icon != null ? icon : children;
   const IconWithSize = cloneElement(IconComponent, { size: (_a2 = IconComponent.props.size) != null ? _a2 : rest.size });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     IconButton$1,
     __spreadValues$1N({
       variant,
@@ -5559,7 +5561,7 @@ const ColorButton = forwardRef$1(({
   selected = false
 }, ref) => {
   if (!color)
-    return /* @__PURE__ */ React$1.createElement(Box, null);
+    return /* @__PURE__ */ React.createElement(Box, null);
   const { defaultArrows, focusPrevious, focusNext } = useArrowFocus(columns);
   const onKeyDown = (e) => {
     switch (e.key) {
@@ -5577,7 +5579,7 @@ const ColorButton = forwardRef$1(({
     }
   };
   const { colorButton } = useMultiStyleConfig("ColorPicker", { size });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     IconButton,
     {
       bg: color,
@@ -5586,7 +5588,7 @@ const ColorButton = forwardRef$1(({
       "aria-label": `select-${color}`,
       onClick,
       sx: colorButton,
-      icon: /* @__PURE__ */ React$1.createElement(Icon, { as: CheckDuo, boxSize: selected ? void 0 : "0" }),
+      icon: /* @__PURE__ */ React.createElement(Icon, { as: CheckDuo, boxSize: selected ? void 0 : "0" }),
       color: getContrastColor(color)
     }
   );
@@ -5608,7 +5610,7 @@ var __spreadValues$1M = (a, b) => {
     }
   return a;
 };
-const Popover = (props) => /* @__PURE__ */ React$1.createElement(Popover$2, __spreadValues$1M({ isLazy: true }, props));
+const Popover = (props) => /* @__PURE__ */ React.createElement(Popover$2, __spreadValues$1M({ isLazy: true }, props));
 
 const ColorsExpandButton = ({
   onClick,
@@ -5635,7 +5637,7 @@ const ColorsExpandButton = ({
         break;
     }
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     IconButton,
     {
       variant: "ghost",
@@ -5644,7 +5646,7 @@ const ColorsExpandButton = ({
       onClick,
       sx: colorButton
     },
-    /* @__PURE__ */ React$1.createElement(Icon, { as: expanded ? ChevronUpDuo : ChevronDownDuo })
+    /* @__PURE__ */ React.createElement(Icon, { as: expanded ? ChevronUpDuo : ChevronDownDuo })
   );
 };
 
@@ -5786,14 +5788,14 @@ const ColorPicker = (_a) => {
     setSelectedColor(null);
     onChange(null);
   };
-  return /* @__PURE__ */ React$1.createElement(Box, { "data-testid": "color-picker-test-id" }, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { "data-testid": "color-picker-test-id" }, /* @__PURE__ */ React.createElement(
     Popover,
     __spreadValues$1K({
       isOpen,
       onClose,
       initialFocusRef
     }, popoverProps),
-    /* @__PURE__ */ React$1.createElement(PopoverTrigger, null, /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(PopoverTrigger, null, /* @__PURE__ */ React.createElement(
       IconButton,
       __spreadValues$1K({
         onClick: onToggle,
@@ -5801,10 +5803,10 @@ const ColorPicker = (_a) => {
         name,
         sx: trigger,
         size,
-        icon: /* @__PURE__ */ React$1.createElement(Icon, { as: ColorsDuo })
+        icon: /* @__PURE__ */ React.createElement(Icon, { as: ColorsDuo })
       }, rest)
     )),
-    /* @__PURE__ */ React$1.createElement(RenderInPortal, { shouldRenderInPortal }, /* @__PURE__ */ React$1.createElement(PopoverContent, { w: "auto", boxShadow: "md", p: 2, bgColor: "background.default" }, /* @__PURE__ */ React$1.createElement(Stack, null, /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(RenderInPortal, { shouldRenderInPortal }, /* @__PURE__ */ React.createElement(PopoverContent, { w: "auto", boxShadow: "md", p: 2, bgColor: "background.default" }, /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(
       PopoverHeader,
       {
         color: "text.default",
@@ -5815,7 +5817,7 @@ const ColorPicker = (_a) => {
         width: "full"
       },
       "Pick a color",
-      clearable && trigger.color !== "unset" && /* @__PURE__ */ React$1.createElement(
+      clearable && trigger.color !== "unset" && /* @__PURE__ */ React.createElement(
         Button,
         {
           size: "sm",
@@ -5825,7 +5827,7 @@ const ColorPicker = (_a) => {
         },
         "Clear"
       )
-    ), /* @__PURE__ */ React$1.createElement(PopoverBody, { p: 0 }, /* @__PURE__ */ React$1.createElement(Stack, { alignItems: "center", p: 0, spacing: 0 }, /* @__PURE__ */ React$1.createElement(FocusScope, null, /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(PopoverBody, { p: 0 }, /* @__PURE__ */ React.createElement(Stack, { alignItems: "center", p: 0, spacing: 0 }, /* @__PURE__ */ React.createElement(FocusScope, null, /* @__PURE__ */ React.createElement(
       SimpleGrid,
       {
         columns: getNumberOfColumns(),
@@ -5836,7 +5838,7 @@ const ColorPicker = (_a) => {
         pl: 4,
         py: 1
       },
-      visibleColors.map((color, index) => /* @__PURE__ */ React$1.createElement(
+      visibleColors.map((color, index) => /* @__PURE__ */ React.createElement(
         ColorButton,
         {
           color,
@@ -5847,7 +5849,7 @@ const ColorPicker = (_a) => {
           onClick: () => handleSelect(color)
         }
       ))
-    ), expandedColors.length > 0 && /* @__PURE__ */ React$1.createElement(
+    ), expandedColors.length > 0 && /* @__PURE__ */ React.createElement(
       ColorsExpandButton,
       {
         onClick: expandColors,
@@ -5900,7 +5902,7 @@ const ColorPickerField = (_a) => {
     "isRequired",
     "validate"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -5909,7 +5911,7 @@ const ColorPickerField = (_a) => {
       isRequired,
       validate
     },
-    ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+    ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       ColorPicker,
       __spreadValues$1J({
         name,
@@ -6046,7 +6048,7 @@ const FlipButton = (props) => {
     isMulti: isMulti || false,
     focusRing,
     value
-  }, rest)) : /* @__PURE__ */ React$1.createElement(
+  }, rest)) : /* @__PURE__ */ React.createElement(
     HStack,
     {
       spacing: isSelected && iconPlacement !== "none" || icon ? 2 : 0,
@@ -6055,9 +6057,9 @@ const FlipButton = (props) => {
       "aria-disabled": isDisabled,
       as: "label"
     },
-    /* @__PURE__ */ React$1.createElement("input", __spreadValues$1H({}, flipButtonProps)),
-    icon && iconPlacement !== "none" ? /* @__PURE__ */ React$1.createElement(Icon, { as: icon || CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React$1.createElement(SlideFade$1, { in: isSelected }, /* @__PURE__ */ React$1.createElement(Icon, { as: icon || CheckSolid, sx: buttonIcon })),
-    /* @__PURE__ */ React$1.createElement(Text, { textAlign: "center" }, children)
+    /* @__PURE__ */ React.createElement("input", __spreadValues$1H({}, flipButtonProps)),
+    icon && iconPlacement !== "none" ? /* @__PURE__ */ React.createElement(Icon, { as: icon || CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React.createElement(SlideFade$1, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon, { as: icon || CheckSolid, sx: buttonIcon })),
+    /* @__PURE__ */ React.createElement(Text, { textAlign: "center" }, children)
   );
 };
 
@@ -6136,7 +6138,7 @@ const FlipButtonGroup = (props) => {
     sx
   });
   const restWithoutOnChange = omit(["onChange"], rest);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Stack,
     __spreadValues$1G(__spreadProps$p(__spreadValues$1G({}, flipButtonGroupProps), {
       direction,
@@ -6144,7 +6146,7 @@ const FlipButtonGroup = (props) => {
       spacing: 0,
       sx: container
     }), restWithoutOnChange),
-    /* @__PURE__ */ React$1.createElement(FlipButtonContext.Provider, { value: state }, childrenWithProps)
+    /* @__PURE__ */ React.createElement(FlipButtonContext.Provider, { value: state }, childrenWithProps)
   );
 };
 
@@ -6196,7 +6198,7 @@ const FlipButtonGroupField = forwardRef$1((_a, ref) => {
     "onChange",
     "validate"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -6206,7 +6208,7 @@ const FlipButtonGroupField = forwardRef$1((_a, ref) => {
       validate,
       ref
     },
-    ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+    ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       FlipButtonGroup,
       __spreadValues$1F({
         name,
@@ -6257,7 +6259,7 @@ const hoverAndActiveStyles = {
 const ResizeHandle = forwardRef$1(
   (_a, ref) => {
     var _b = _a, { color } = _b, rest = __objRest$1h(_b, ["color"]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Box,
       __spreadValues$1E({
         ref,
@@ -6299,7 +6301,7 @@ const Trigger = (props) => {
   const { isDisabled, handleClick } = props;
   const ref = useRef(null);
   const { buttonProps } = useButton(props, ref);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Button,
     __spreadProps$o(__spreadValues$1D({}, buttonProps), {
       ref,
@@ -6310,7 +6312,7 @@ const Trigger = (props) => {
       onPointerDown: handleClick,
       pointerEvents: isDisabled ? "none" : "auto"
     }),
-    /* @__PURE__ */ React$1.createElement(Icon, { as: CalendarDuo })
+    /* @__PURE__ */ React.createElement(Icon, { as: CalendarDuo })
   );
 };
 
@@ -6339,7 +6341,7 @@ const DateSegment = ({ segment, state }) => {
   const isDivider = segment.type === "literal";
   const { dateSegment } = useMultiStyleConfig("DatePicker");
   const minWidth = `${String(segment.maxValue).length}ch`;
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Box,
     __spreadProps$n(__spreadValues$1C({}, segmentProps), {
       ref,
@@ -6399,7 +6401,7 @@ const DateField = (props) => {
   const sortedSegments = split(delimeterIncluded, dateFormat).map(
     (query, index) => getMatchingSegment(query, index)
   );
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Box,
     __spreadProps$m(__spreadValues$1B({}, fieldProps), {
       ref,
@@ -6409,7 +6411,7 @@ const DateField = (props) => {
     }),
     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 });
     })
   );
 };
@@ -6449,7 +6451,7 @@ const StyledField = forwardRef$1(
   (_a, ref) => {
     var _b = _a, { isInvalid, isDisabled, children, variant } = _b, rest = __objRest$1g(_b, ["isInvalid", "isDisabled", "children", "variant"]);
     const { styledField } = useMultiStyleConfig("DatePicker", { variant });
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Box,
       __spreadProps$l(__spreadValues$1A({}, rest), {
         ref,
@@ -6481,7 +6483,7 @@ var __spreadValues$1z = (a, b) => {
     }
   return a;
 };
-const Table = (props) => /* @__PURE__ */ React$1.createElement(Table$2, __spreadValues$1z({}, props));
+const Table = (props) => /* @__PURE__ */ React.createElement(Table$2, __spreadValues$1z({}, props));
 
 var __defProp$1y = Object.defineProperty;
 var __defProps$k = Object.defineProperties;
@@ -6515,7 +6517,7 @@ const CalendarCell = ({
   );
   const isToday = date.compare(today(state.timeZone)) === 0;
   const isOutsideMonth = !isSameMonth(currentMonth, date);
-  return /* @__PURE__ */ React$1.createElement(chakra.td, __spreadValues$1y({}, cellProps), /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(chakra.td, __spreadValues$1y({}, cellProps), /* @__PURE__ */ React.createElement(
     Button,
     __spreadProps$k(__spreadValues$1y({}, buttonProps), {
       ref,
@@ -6535,7 +6537,7 @@ const CalendarCell = ({
 const DayLabels = memo(({ weekDays }) => {
   const { dayLabel } = useMultiStyleConfig$1("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(chakra$1.th, { key: _id, __css: dayLabel }, label)));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, weekDaysWithIds.map(({ label, _id }) => /* @__PURE__ */ React.createElement(chakra$1.th, { key: _id, __css: dayLabel }, label)));
 });
 
 const mondayFirstWeekDays = ["M", "T", "W", "T", "F", "S", "S"];
@@ -6577,9 +6579,9 @@ const CalendarGrid = memo(
     const { gridProps, headerProps } = useCalendarGrid(rest, state);
     const weeksInMonth = getWeeksInMonth(startDate, locale);
     const weekDays = getWeekdays(firstDayOfWeek);
-    return /* @__PURE__ */ React$1.createElement(Table, __spreadValues$1x({ variant: "unstyled" }, gridProps), /* @__PURE__ */ React$1.createElement(Thead, __spreadValues$1x({}, headerProps), /* @__PURE__ */ React$1.createElement(Tr, null, /* @__PURE__ */ React$1.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React$1.createElement(Tbody, null, times(
-      (weekIndex) => /* @__PURE__ */ React$1.createElement(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(Thead, __spreadValues$1x({}, headerProps), /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React.createElement(Tbody, null, times(
+      (weekIndex) => /* @__PURE__ */ React.createElement(Tr, { key: weekIndex }, state.getDatesInWeek(weekIndex, startDate).map(
+        (date) => date ? /* @__PURE__ */ React.createElement(
           CalendarCell,
           {
             key: date.day,
@@ -6587,7 +6589,7 @@ const CalendarGrid = memo(
             date,
             currentMonth: startDate
           }
-        ) : /* @__PURE__ */ React$1.createElement(chakra.td, null)
+        ) : /* @__PURE__ */ React.createElement(chakra.td, null)
       )),
       weeksInMonth
     )));
@@ -6629,7 +6631,7 @@ const MonthButton = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest$1e(_b, ["children"]);
   const ref = useRef(null);
   const { buttonProps } = useButton(rest, ref);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Button,
     __spreadProps$j(__spreadValues$1w({}, buttonProps), {
       boxSize: 8,
@@ -6664,7 +6666,7 @@ const MonthSelect = ({ state }) => {
     const diff = index - selectedMonth;
     state.setFocusedDate(state.visibleRange.start.add({ months: diff }));
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Select$2,
     {
       id: "month",
@@ -6678,7 +6680,7 @@ const MonthSelect = ({ state }) => {
       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))
   );
 };
 
@@ -6687,7 +6689,7 @@ const YearSelect = ({
   years
 }) => {
   const { dateSelect } = useMultiStyleConfig("Calendar");
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Select$2,
     {
       id: "year",
@@ -6700,7 +6702,7 @@ const YearSelect = ({
       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))
   );
 };
 
@@ -6739,7 +6741,7 @@ const YearSelectCalendar = ({ state }) => {
     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 = ({
@@ -6751,7 +6753,7 @@ const YearSelectRangeCalendar = ({
     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;
@@ -6826,7 +6828,7 @@ const RangeCell = ({
 }) => {
   const isOutsideMonth = !isSameMonth(currentMonth, date);
   if (isOutsideMonth)
-    return /* @__PURE__ */ React$1.createElement(chakra.td, null);
+    return /* @__PURE__ */ React.createElement(chakra.td, null);
   const ref = useRef(null);
   const {
     cellProps,
@@ -6837,7 +6839,7 @@ const RangeCell = ({
   const isToday = date.compare(today(state.timeZone)) === 0;
   const isHighlighted = range && date < range.end && date > range.start;
   const isSelected = range && !isHighlighted && (equals(date, range.start) || equals(date, range.end));
-  return /* @__PURE__ */ React$1.createElement(chakra.td, __spreadValues$1v({}, cellProps), /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(chakra.td, __spreadValues$1v({}, cellProps), /* @__PURE__ */ React.createElement(
     chakra.button,
     __spreadProps$i(__spreadValues$1v({}, buttonProps), {
       type: "button",
@@ -6929,15 +6931,15 @@ const StandaloneCalendarGrid = (_a) => {
     const weekNumber = getWeekNumberAtStartOfMonth(startDate.year, startDate.month);
     return weekNumber;
   }, [startDate.year, startDate.month]);
-  return /* @__PURE__ */ React$1.createElement(Box, __spreadProps$h(__spreadValues$1u({}, calendarProps), { h: "265px", p: "0" }), /* @__PURE__ */ React$1.createElement(Stack, null, /* @__PURE__ */ React$1.createElement(Flex, { justify: "space-between", w: "full", p: "1", alignItems: "center" }, /* @__PURE__ */ React$1.createElement(MonthButton, __spreadValues$1u({}, prevButtonProps), /* @__PURE__ */ React$1.createElement(Icon, { as: ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React$1.createElement(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: ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React$1.createElement(chakra.table, __spreadProps$h(__spreadValues$1u({}, gridProps), { sx: { borderSpacing: "0" } }), /* @__PURE__ */ React$1.createElement(chakra.thead, __spreadValues$1u({}, headerProps), /* @__PURE__ */ React$1.createElement(chakra.tr, null, /* @__PURE__ */ React$1.createElement(chakra.th, null), /* @__PURE__ */ React$1.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React$1.createElement(chakra.tbody, null, times((weekIndex) => {
+  return /* @__PURE__ */ React.createElement(Box, __spreadProps$h(__spreadValues$1u({}, calendarProps), { h: "265px", p: "0" }), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { justify: "space-between", w: "full", p: "1", alignItems: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1u({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(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: ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(chakra.table, __spreadProps$h(__spreadValues$1u({}, gridProps), { sx: { borderSpacing: "0" } }), /* @__PURE__ */ React.createElement(chakra.thead, __spreadValues$1u({}, headerProps), /* @__PURE__ */ React.createElement(chakra.tr, null, /* @__PURE__ */ React.createElement(chakra.th, null), /* @__PURE__ */ React.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React.createElement(chakra.tbody, null, times((weekIndex) => {
     const weekNumber = getDisplayWeek(
       weekNumberStart,
       weekIndex,
       startDate.year,
       startDate.month
     );
-    return /* @__PURE__ */ React$1.createElement(chakra.tr, { key: weekIndex }, /* @__PURE__ */ React$1.createElement(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(chakra.tr, { key: weekIndex }, /* @__PURE__ */ React.createElement(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,
@@ -6946,7 +6948,7 @@ const StandaloneCalendarGrid = (_a) => {
           date,
           currentMonth: startDate
         }
-      ) : /* @__PURE__ */ React$1.createElement(chakra.td, null)
+      ) : /* @__PURE__ */ React.createElement(chakra.td, null)
     ));
   }, weeksInMonth)))));
 };
@@ -6982,7 +6984,7 @@ const Calendar = (props) => {
     props,
     state
   );
-  return /* @__PURE__ */ React$1.createElement(Box, __spreadProps$g(__spreadValues$1t({}, calendarProps), { __css: container }), /* @__PURE__ */ React$1.createElement(Stack, null, /* @__PURE__ */ React$1.createElement(Flex, { justifyContent: "space-between" }, /* @__PURE__ */ React$1.createElement(Box, { paddingInlineStart: "2" }, /* @__PURE__ */ React$1.createElement(YearSelectCalendar, { state })), /* @__PURE__ */ React$1.createElement(HStack, { spacing: 2 }, /* @__PURE__ */ React$1.createElement(MonthButton, __spreadValues$1t({}, prevButtonProps), /* @__PURE__ */ React$1.createElement(Icon, { as: ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React$1.createElement(MonthButton, __spreadValues$1t({}, nextButtonProps), /* @__PURE__ */ React$1.createElement(Icon, { as: ChevronRightSolid, boxSize: 4 })))), /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Box, __spreadProps$g(__spreadValues$1t({}, calendarProps), { __css: container }), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Box, { paddingInlineStart: "2" }, /* @__PURE__ */ React.createElement(YearSelectCalendar, { state })), /* @__PURE__ */ React.createElement(HStack, { spacing: 2 }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: ChevronRightSolid, boxSize: 4 })))), /* @__PURE__ */ React.createElement(
     CalendarGrid,
     {
       state,
@@ -6997,7 +6999,7 @@ const DatePickerLocaleWrapper = ({
   children
 }) => {
   const locale = firstDayOfWeek === "monday" ? "en-DE" : "en-US";
-  return /* @__PURE__ */ React$1.createElement(I18nProvider, { locale }, children);
+  return /* @__PURE__ */ React.createElement(I18nProvider, { locale }, children);
 };
 
 var __defProp$1s = Object.defineProperty;
@@ -7042,35 +7044,35 @@ const DatePicker = (props) => {
     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(PopoverAnchor, null, /* @__PURE__ */ React$1.createElement(HStack, { minW: 56 }, /* @__PURE__ */ React$1.createElement(InputGroup, __spreadProps$f(__spreadValues$1s({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(PopoverAnchor, null, /* @__PURE__ */ React.createElement(HStack, { minW: 56 }, /* @__PURE__ */ React.createElement(InputGroup, __spreadProps$f(__spreadValues$1s({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
       StyledField,
       {
         isDisabled,
         isInvalid,
         variant
       },
-      /* @__PURE__ */ React$1.createElement(Box, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React$1.createElement(DateField, __spreadProps$f(__spreadValues$1s({}, fieldProps), { dateFormat })))
-    ), /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(Box, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(DateField, __spreadProps$f(__spreadValues$1s({}, fieldProps), { dateFormat })))
+    ), /* @__PURE__ */ React.createElement(
       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",
@@ -7080,10 +7082,10 @@ const DatePicker = (props) => {
         onClick: resetDate,
         hidden: !state.dateValue || !isClearable,
         isDisabled,
-        icon: /* @__PURE__ */ React$1.createElement(Icon, { as: XCloseSolid })
+        icon: /* @__PURE__ */ React.createElement(Icon, { as: XCloseSolid })
       }
     ))),
-    state.isOpen && /* @__PURE__ */ React$1.createElement(PopoverContent, __spreadProps$f(__spreadValues$1s({}, dialogProps), { ref, w: 64, border: "none" }), /* @__PURE__ */ React$1.createElement(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(PopoverContent, __spreadProps$f(__spreadValues$1s({}, dialogProps), { ref, w: 64, border: "none" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(Calendar, __spreadProps$f(__spreadValues$1s({}, calendarProps), { firstDayOfWeek })))))
   );
 };
 
@@ -7118,7 +7120,7 @@ var __objRest$1c = (source, exclude) => {
 const Clickable = (_a) => {
   var _b = _a, { href, linkProps } = _b, rest = __objRest$1c(_b, ["href", "linkProps"]);
   const clickable = useClickable(rest);
-  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, !isNil(href) && /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isNil(href) && /* @__PURE__ */ React.createElement(
     Link$1,
     __spreadValues$1r(__spreadValues$1r({
       as: Link$2,
@@ -7126,14 +7128,14 @@ const Clickable = (_a) => {
       to: href,
       _hover: { textDecoration: "none" }
     }, linkProps), clickable)
-  ), isNil(href) && /* @__PURE__ */ React$1.createElement(chakra.button, __spreadValues$1r({ _focusVisible: ring }, clickable)));
+  ), isNil(href) && /* @__PURE__ */ React.createElement(chakra.button, __spreadValues$1r({ _focusVisible: ring }, clickable)));
 };
 
 const DateButton = ({
   isActive,
   onClick,
   children
-}) => /* @__PURE__ */ React$1.createElement(Flex, { maxW: "120px" }, /* @__PURE__ */ React$1.createElement(Clickable, { onClick }, /* @__PURE__ */ React$1.createElement(
+}) => /* @__PURE__ */ React.createElement(Flex, { maxW: "120px" }, /* @__PURE__ */ React.createElement(Clickable, { onClick }, /* @__PURE__ */ React.createElement(
   Label,
   {
     _hover: {
@@ -7400,7 +7402,7 @@ const QuickSelect = ({
   };
   const getIsActive = (newDate) => equals(state.value, newDate.value);
   const shouldShow = (dates) => any((date) => validRange(date.value, state), dates);
-  return /* @__PURE__ */ React$1.createElement(Stack, { alignItems: "start", borderRight: seperator, pt: "2" }, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Stack, { alignItems: "start", borderRight: seperator, pt: "2" }, /* @__PURE__ */ React.createElement(
     Stack,
     {
       h: height,
@@ -7411,7 +7413,7 @@ const QuickSelect = ({
       display: shouldShow(quickDates) ? "initial" : "none"
     },
     map(
-      (quickDate) => validRange(quickDate.value, state) && /* @__PURE__ */ React$1.createElement(Box, { minH: "20px", key: `quick-select-${quickDate.label}` }, /* @__PURE__ */ React$1.createElement(
+      (quickDate) => validRange(quickDate.value, state) && /* @__PURE__ */ React.createElement(Box, { minH: "20px", key: `quick-select-${quickDate.label}` }, /* @__PURE__ */ React.createElement(
         DateButton,
         {
           onClick: updateDate(quickDate.value),
@@ -7421,14 +7423,14 @@ const QuickSelect = ({
       )),
       quickDates
     )
-  ), /* @__PURE__ */ React$1.createElement(
+  ), /* @__PURE__ */ React.createElement(
     Box,
     {
       w: "50%",
       borderTop: seperator,
       display: shouldShow(fiscalQuarters) ? "initial" : "none"
     }
-  ), /* @__PURE__ */ React$1.createElement(Spacer, null), /* @__PURE__ */ React$1.createElement(
+  ), /* @__PURE__ */ React.createElement(Spacer, null), /* @__PURE__ */ React.createElement(
     Flex,
     {
       justifyContent: "space-between",
@@ -7438,7 +7440,7 @@ const QuickSelect = ({
       display: shouldShow(fiscalQuarters) ? "flex" : "none"
     },
     map(
-      (quarter) => validRange(quarter.value, state) && /* @__PURE__ */ React$1.createElement(
+      (quarter) => validRange(quarter.value, state) && /* @__PURE__ */ React.createElement(
         DateButton,
         {
           onClick: updateDate(quarter.value),
@@ -7537,7 +7539,7 @@ const RangeCalendar = (props) => {
     onSave == null ? void 0 : onSave();
     handleClose();
   };
-  return /* @__PURE__ */ React$1.createElement(Box, { ref, __css: rangeCalendarContainer }, /* @__PURE__ */ React$1.createElement(Stack, null, /* @__PURE__ */ React$1.createElement(Flex, { gap: 4 }, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { ref, __css: rangeCalendarContainer }, /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { gap: 4 }, /* @__PURE__ */ React.createElement(
     QuickSelect,
     {
       state,
@@ -7545,21 +7547,21 @@ const RangeCalendar = (props) => {
       fiscalStartMonth,
       fiscalStartDay
     }
-  ), /* @__PURE__ */ React$1.createElement(Stack, null, /* @__PURE__ */ React$1.createElement(HStack, { alignItems: "start", spacing: 8, h: "full", pt: "2" }, /* @__PURE__ */ React$1.createElement(Stack, __spreadValues$1q({ h: "full" }, focusedStartMonthProps), /* @__PURE__ */ React$1.createElement(Box, { p: "2" }, /* @__PURE__ */ React$1.createElement(Label, { size: "xs" }, "Start date:"), /* @__PURE__ */ React$1.createElement(
+  ), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(HStack, { alignItems: "start", spacing: 8, h: "full", pt: "2" }, /* @__PURE__ */ React.createElement(Stack, __spreadValues$1q({ h: "full" }, focusedStartMonthProps), /* @__PURE__ */ React.createElement(Box, { p: "2" }, /* @__PURE__ */ React.createElement(Label, { size: "xs" }, "Start date:"), /* @__PURE__ */ React.createElement(
     StandaloneCalendarGrid,
     {
       state: calendarOneState,
       range: value,
       firstDayOfWeek
     }
-  ))), /* @__PURE__ */ React$1.createElement(Stack, { h: "full", justify: "space-between" }, /* @__PURE__ */ React$1.createElement(Stack, { opacity: value && value.start ? "1" : "0.4" }, /* @__PURE__ */ React$1.createElement(Box, { p: "2" }, /* @__PURE__ */ React$1.createElement(Label, { size: "xs" }, "End date:"), /* @__PURE__ */ React$1.createElement(
+  ))), /* @__PURE__ */ React.createElement(Stack, { h: "full", justify: "space-between" }, /* @__PURE__ */ React.createElement(Stack, { opacity: value && value.start ? "1" : "0.4" }, /* @__PURE__ */ React.createElement(Box, { p: "2" }, /* @__PURE__ */ React.createElement(Label, { size: "xs" }, "End date:"), /* @__PURE__ */ React.createElement(
     StandaloneCalendarGrid,
     {
       state: calendarTwoState,
       range: value,
       firstDayOfWeek
     }
-  ))), /* @__PURE__ */ React$1.createElement(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(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) => is(Object, value) && has("startDate", value) && has("endDate", value) && is(String, value.startDate) && is(String, value.endDate);
@@ -7593,9 +7595,9 @@ const PortalWrapper = ({
   children
 }) => {
   if (renderInPortal) {
-    return /* @__PURE__ */ React$1.createElement(Portal, null, children);
+    return /* @__PURE__ */ React.createElement(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 {
@@ -7655,28 +7657,28 @@ const DateRangePicker = (props) => {
     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(PopoverAnchor, null, /* @__PURE__ */ React$1.createElement(HStack, null, /* @__PURE__ */ React$1.createElement(InputGroup, __spreadProps$e(__spreadValues$1p({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(PopoverAnchor, null, /* @__PURE__ */ React.createElement(HStack, null, /* @__PURE__ */ React.createElement(InputGroup, __spreadProps$e(__spreadValues$1p({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
       StyledField,
       {
         isDisabled,
         isInvalid,
         variant
       },
-      /* @__PURE__ */ React$1.createElement(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(InputRightElement, { sx: { height: "100%", paddingRight: "1" } }, /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(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(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",
@@ -7686,10 +7688,10 @@ const DateRangePicker = (props) => {
         onClick: resetDate,
         hidden: !isClearable,
         isDisabled,
-        icon: /* @__PURE__ */ React$1.createElement(Icon, { as: XCloseSolid })
+        icon: /* @__PURE__ */ React.createElement(Icon, { as: XCloseSolid })
       }
     ))),
-    /* @__PURE__ */ React$1.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React$1.createElement(PopoverContent, __spreadProps$e(__spreadValues$1p({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React$1.createElement(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(PopoverContent, __spreadProps$e(__spreadValues$1p({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(
       RangeCalendar,
       __spreadProps$e(__spreadValues$1p({}, calendarProps), {
         resetDate,
@@ -7744,7 +7746,7 @@ const InputGroupWrapper = (_a) => {
     "children"
   ]);
   const containsInputGroupElement = not(all(isNil, [inputLeftElement, inputRightElement]));
-  return containsInputGroupElement ? /* @__PURE__ */ React$1.createElement(InputGroup, __spreadValues$1o({}, rest), inputLeftElement, children, inputRightElement) : /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, children);
+  return containsInputGroupElement ? /* @__PURE__ */ React.createElement(InputGroup, __spreadValues$1o({}, rest), inputLeftElement, children, inputRightElement) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 };
 
 var __defProp$1n = Object.defineProperty;
@@ -7814,7 +7816,7 @@ const DatePickerField = forwardRef$1((_a, ref) => {
     }
     onChangeCallback(date);
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -7824,13 +7826,13 @@ const DatePickerField = forwardRef$1((_a, ref) => {
       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,
@@ -7917,7 +7919,7 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
     }
     onChangeCallback(dateRange);
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -7927,7 +7929,7 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
       validate,
       ref
     },
-    ({ value, onChange }, { formState: { errors } }) => /* @__PURE__ */ React$1.createElement(
+    ({ value, onChange }, { formState: { errors } }) => /* @__PURE__ */ React.createElement(
       DateRangePicker,
       __spreadValues$1m({
         firstDayOfWeek,
@@ -8002,7 +8004,7 @@ const Tooltip = (_a) => {
   ]);
   const iconVariant = variant;
   const icon = tooltipIconMap[iconVariant];
-  const TooltipContent = /* @__PURE__ */ React$1.createElement(HStack, { alignItems: "flex-start" }, hasIcon && /* @__PURE__ */ React$1.createElement(Icon, { as: icon, color: `icon.toast.${iconVariant}` }), /* @__PURE__ */ React$1.createElement(VStack, { spacing: 0, alignItems: "flex-start" }, /* @__PURE__ */ React$1.createElement(Label, { size: "sm" }, title), /* @__PURE__ */ React$1.createElement(
+  const TooltipContent = /* @__PURE__ */ React.createElement(HStack, { alignItems: "flex-start" }, hasIcon && /* @__PURE__ */ React.createElement(Icon, { as: icon, color: `icon.toast.${iconVariant}` }), /* @__PURE__ */ React.createElement(VStack, { spacing: 0, alignItems: "flex-start" }, /* @__PURE__ */ React.createElement(Label, { size: "sm" }, title), /* @__PURE__ */ React.createElement(
     P,
     {
       variant: "14",
@@ -8012,7 +8014,7 @@ const Tooltip = (_a) => {
     },
     description
   )));
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Tooltip$2,
     __spreadValues$1l({
       hasArrow,
@@ -8064,7 +8066,7 @@ const TimeoutProgressCircle = (_a) => {
   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(
     Circle,
     __spreadValues$1k({
       as: "svg",
@@ -8074,7 +8076,7 @@ const TimeoutProgressCircle = (_a) => {
         transform: "rotate(-90deg)"
       }
     }, rest),
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(
       chakra$1.circle,
       {
         cx: SVG_SIZE / 2,
@@ -8085,7 +8087,7 @@ const TimeoutProgressCircle = (_a) => {
         strokeWidth: STROKE_WIDTH
       }
     ),
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(
       chakra$1.circle,
       {
         cx: SVG_SIZE / 2,
@@ -8179,7 +8181,7 @@ const IntentButton = (_a) => {
     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(
     Center,
     __spreadValues$1j({
       position: "relative",
@@ -8191,16 +8193,16 @@ const IntentButton = (_a) => {
       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,
@@ -8329,7 +8331,7 @@ const Fade = (_a) => {
   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(
     Fade$1,
     __spreadValues$1i({
       in: showWithDelay,
@@ -8396,7 +8398,7 @@ const ScaleFade = (_a) => {
   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(
     ScaleFade$1,
     __spreadValues$1h({
       in: showWithDelay,
@@ -8465,7 +8467,7 @@ const Slide = (_a) => {
   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(
     Slide$1,
     __spreadValues$1g({
       in: showWithDelay,
@@ -8542,7 +8544,7 @@ const SlideFade = (_a) => {
   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(
     SlideFade$1,
     __spreadValues$1f({
       in: showWithDelay,
@@ -8611,7 +8613,7 @@ const Collapse = (_a) => {
   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(
     Collapse$1,
     __spreadValues$1e({
       in: showWithDelay,
@@ -8702,13 +8704,13 @@ const Toolbox = (_a) => {
     defaultWidthPx,
     stationaryEdge: direction
   });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Box,
     {
       w: adjustableWidth,
       display: isOpen && shouldPush ? "initial" : "none"
     },
-    /* @__PURE__ */ React$1.createElement(Portal, null, /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(
       Slide,
       {
         direction,
@@ -8719,7 +8721,7 @@ const Toolbox = (_a) => {
           zIndex
         }
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Flex,
         __spreadValues$1d({
           sx: __spreadProps$d(__spreadValues$1d({}, container), { w: adjustableWidth }),
@@ -8728,8 +8730,8 @@ const Toolbox = (_a) => {
           overflow: "hidden",
           direction: direction === "left" ? "row-reverse" : "row"
         }, rest),
-        isResizable && /* @__PURE__ */ React$1.createElement(ResizeHandle, __spreadValues$1d({}, resizeProps)),
-        /* @__PURE__ */ React$1.createElement(FocusScope, { autoFocus }, /* @__PURE__ */ React$1.createElement(VStack, { w: "full", h: "full", alignItems: "normal" }, newChildren))
+        isResizable && /* @__PURE__ */ React.createElement(ResizeHandle, __spreadValues$1d({}, resizeProps)),
+        /* @__PURE__ */ React.createElement(FocusScope, { autoFocus }, /* @__PURE__ */ React.createElement(VStack, { w: "full", h: "full", alignItems: "normal" }, newChildren))
       )
     ))
   );
@@ -8772,7 +8774,7 @@ const ToolboxHeader = (_a) => {
     "onClose"
   ]);
   const { header } = useMultiStyleConfig$1("Toolbox", {});
-  return /* @__PURE__ */ React$1.createElement(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(Flex, __spreadValues$1c({ sx: header }, rest), typeof children === "string" ? /* @__PURE__ */ React.createElement(H4, null, children) : children, /* @__PURE__ */ React.createElement(
     CloseButton$1,
     {
       "aria-label": "Close toolbox",
@@ -8814,7 +8816,7 @@ var __objRest$_ = (source, exclude) => {
 const ToolboxContent = (_a) => {
   var _b = _a, { sx = {}, children } = _b, rest = __objRest$_(_b, ["sx", "children"]);
   const { body } = useMultiStyleConfig$1("Toolbox", {});
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Flex,
     __spreadValues$1b({
       sx: merge(body, sx)
@@ -8854,7 +8856,7 @@ var __objRest$Z = (source, exclude) => {
 const ToolboxFooter = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest$Z(_b, ["children"]);
   const { footer } = useMultiStyleConfig$1("Toolbox", {});
-  return /* @__PURE__ */ React$1.createElement(Flex, __spreadValues$1a({ sx: footer }, rest), children);
+  return /* @__PURE__ */ React.createElement(Flex, __spreadValues$1a({ sx: footer }, rest), children);
 };
 
 var __defProp$19 = Object.defineProperty;
@@ -8897,7 +8899,7 @@ const Radio = (_a) => {
     "name",
     "value"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Radio$2,
     __spreadValues$19({
       size,
@@ -8946,7 +8948,7 @@ const RadioGroup = (_a) => {
     "children",
     "name"
   ]);
-  return /* @__PURE__ */ React$1.createElement(RadioGroup$1, __spreadValues$18({ name, id: name }, rest), /* @__PURE__ */ React$1.createElement(Stack, { direction }, children));
+  return /* @__PURE__ */ React.createElement(RadioGroup$1, __spreadValues$18({ name, id: name }, rest), /* @__PURE__ */ React.createElement(Stack, { direction }, children));
 };
 
 var __defProp$17 = Object.defineProperty;
@@ -8995,7 +8997,7 @@ const RadioGroupField = forwardRef$1((_a, ref) => {
     "validate",
     "onChange"
   ]);
-  return /* @__PURE__ */ React$1.createElement(Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -9005,7 +9007,7 @@ const RadioGroupField = forwardRef$1((_a, ref) => {
       validate,
       ref
     },
-    ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+    ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       RadioGroup,
       __spreadValues$17({
         name,
@@ -9034,7 +9036,7 @@ const CarouselItem = ({
   isActive = false,
   itemWidth = carouselItemWidth,
   itemHeight = carouselItemWidth
-}) => /* @__PURE__ */ React$1.createElement(motion.div, { animate: isActive ? "active" : "inActive", variants }, /* @__PURE__ */ React$1.createElement(Center, { minW: `${itemWidth}px`, h: `${itemHeight}px ` }, children));
+}) => /* @__PURE__ */ React.createElement(motion.div, { animate: isActive ? "active" : "inActive", variants }, /* @__PURE__ */ React.createElement(Center, { minW: `${itemWidth}px`, h: `${itemHeight}px ` }, children));
 
 var __defProp$16 = Object.defineProperty;
 var __getOwnPropSymbols$16 = Object.getOwnPropertySymbols;
@@ -9073,13 +9075,13 @@ const CarouselArrow = (_a) => {
     "direction"
   ]);
   const { arrow } = useMultiStyleConfig("Carousel", {});
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     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" ? ChevronRightSolid : ChevronLeftSolid }))
+    /* @__PURE__ */ React.createElement(IconButton, { "aria-label": `move carousel to ${direction}`, variant: "ghost", size: "lg" }, /* @__PURE__ */ React.createElement(Icon, { as: direction === "right" ? ChevronRightSolid : ChevronLeftSolid }))
   );
 };
 
@@ -9167,7 +9169,7 @@ const Carousel = (_a) => {
       (prev) => activeIndex === 0 ? numberOfChildren - 1 : prev - 1
     );
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Box,
     __spreadValues$15({
       cursor: dragging ? "grabbing" : "grab",
@@ -9177,7 +9179,7 @@ const Carousel = (_a) => {
       pl: `${(containerWidth - itemWidth) / 2}px`,
       sx: container
     }, rest),
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(
       motion.div,
       {
         drag: "x",
@@ -9189,14 +9191,14 @@ const Carousel = (_a) => {
         dragConstraints: { right: 0, left: -(totalWidth - itemWidth) },
         onDragEnd: updateActiveIndex
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         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,
@@ -9208,14 +9210,14 @@ const Carousel = (_a) => {
         ))
       )
     ),
-    showRadio && /* @__PURE__ */ React$1.createElement(
+    showRadio && /* @__PURE__ */ React.createElement(
       RadioGroup,
       {
         onChange: (val) => setActiveIndex(parseInt(val, 10)),
         value: `${activeIndex}`,
         sx: radio
       },
-      /* @__PURE__ */ React$1.createElement(HStack, null, childrenAsArray.map((_child, i) => /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(HStack, null, childrenAsArray.map((_child, i) => /* @__PURE__ */ React.createElement(
         Radio,
         {
           value: `${i}`,
@@ -9224,14 +9226,14 @@ const Carousel = (_a) => {
         }
       )))
     ),
-    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",
@@ -9326,17 +9328,17 @@ var __objRest$T = (source, exclude) => {
 function getComponents(components) {
   return merge(
     {
-      Menu: (props) => /* @__PURE__ */ React$1.createElement(Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React$1.createElement(chakraComponents.Menu, __spreadValues$13({}, props), props.children)),
-      DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React$1.createElement(chakraComponents.DropdownIndicator, __spreadValues$13({}, props), /* @__PURE__ */ React$1.createElement(Icon, { as: props.selectProps.icon })) : /* @__PURE__ */ React$1.createElement(chakraComponents.DropdownIndicator, __spreadValues$13({}, props)),
-      Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React$1.createElement(chakraComponents.Option, __spreadValues$13({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React$1.createElement(chakraComponents.Option, __spreadValues$13({}, props)),
-      MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React$1.createElement(chakraComponents.MultiValueContainer, __spreadValues$13({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React$1.createElement(chakraComponents.MultiValueContainer, __spreadValues$13({}, props)),
+      Menu: (props) => /* @__PURE__ */ React.createElement(Box, { "data-testid": "select-menu-wrapper-test-id" }, /* @__PURE__ */ React.createElement(chakraComponents.Menu, __spreadValues$13({}, props), props.children)),
+      DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$13({}, props), /* @__PURE__ */ React.createElement(Icon, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, __spreadValues$13({}, props)),
+      Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$13({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$13({}, props)),
+      MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, __spreadValues$13({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(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(chakraComponents.Control, __spreadValues$13({}, props), /* @__PURE__ */ React$1.createElement(HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React$1.createElement(HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React$1.createElement(chakraComponents.Control, __spreadValues$13({}, props), children);
+        return props.selectProps.leftComponent ? /* @__PURE__ */ React.createElement(chakraComponents.Control, __spreadValues$13({}, props), /* @__PURE__ */ React.createElement(HStack, { w: "full", pl: "2" }, props.selectProps.leftComponent, /* @__PURE__ */ React.createElement(HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraComponents.Control, __spreadValues$13({}, props), children);
       }
     },
     components || {}
@@ -9456,7 +9458,7 @@ const SearchBar = forwardRef$1(
         }
       }
     };
-    return /* @__PURE__ */ React$1.createElement(Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
       AsyncSelect,
       __spreadValues$12({
         cacheOptions: true,
@@ -9536,7 +9538,7 @@ const BaseSearchBarField = (_a, ref) => {
     "inputLeftElement",
     "inputRightElement"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -9547,13 +9549,13 @@ const BaseSearchBarField = (_a, ref) => {
       validate,
       ref
     },
-    ({ value, onChange }) => /* @__PURE__ */ React$1.createElement(HStack, { w: "full" }, /* @__PURE__ */ React$1.createElement(
+    ({ value, onChange }) => /* @__PURE__ */ React.createElement(HStack, { w: "full" }, /* @__PURE__ */ React.createElement(
       InputGroupWrapper,
       {
         inputLeftElement,
         inputRightElement
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         SearchBar,
         __spreadValues$11({
           name,
@@ -9567,7 +9569,7 @@ const BaseSearchBarField = (_a, ref) => {
           value
         }, rest)
       )
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       IconButton,
       {
         "aria-label": `${name}-close-button`,
@@ -9576,7 +9578,7 @@ const BaseSearchBarField = (_a, ref) => {
         fontSize: "sm",
         hidden: isEmpty(value) || !isClearable,
         onClick: () => onChange([]),
-        icon: /* @__PURE__ */ React$1.createElement(Icon, { as: XCloseSolid })
+        icon: /* @__PURE__ */ React.createElement(Icon, { as: XCloseSolid })
       }
     ))
   );
@@ -9599,7 +9601,7 @@ var __spreadValues$10 = (a, b) => {
     }
   return a;
 };
-const DragAndDrop = (props) => /* @__PURE__ */ React$1.createElement(DndContext, __spreadValues$10({}, props));
+const DragAndDrop = (props) => /* @__PURE__ */ React.createElement(DndContext, __spreadValues$10({}, props));
 
 var __defProp$$ = Object.defineProperty;
 var __getOwnPropSymbols$$ = Object.getOwnPropertySymbols;
@@ -9641,7 +9643,7 @@ const Tag = forwardRef$1((_a, ref) => {
     "bgColor",
     "colorScheme"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Tag$2,
     __spreadValues$$({
       bgColor,
@@ -9655,7 +9657,7 @@ const Tag = forwardRef$1((_a, ref) => {
 
 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;
@@ -9699,15 +9701,15 @@ const TagGroup = (_a) => {
   ]);
   const [nbrRemainingTags, setNbrRemainingTags] = useState(0);
   const { rect, containerRef } = useOverflowGroup();
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     HStack,
     __spreadValues$_({
       bgColor: "background.default",
       ref: containerRef,
       overflow: "hidden"
     }, rest),
-    /* @__PURE__ */ React$1.createElement(HStack, { spacing }, /* @__PURE__ */ React$1.createElement(OverflowGroup, { max, onChange: setNbrRemainingTags, rect }, children)),
-    nbrRemainingTags > 0 && /* @__PURE__ */ React$1.createElement(OverflowIndicator$1, { nbrRemainingTags })
+    /* @__PURE__ */ React.createElement(HStack, { spacing }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingTags, rect }, children)),
+    nbrRemainingTags > 0 && /* @__PURE__ */ React.createElement(OverflowIndicator$1, { nbrRemainingTags })
   );
 };
 
@@ -9752,7 +9754,7 @@ const DragItem = forwardRef$1(
       "itemLabel",
       "bgColor"
     ]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Tag,
       __spreadValues$Z({
         ref,
@@ -9761,8 +9763,8 @@ const DragItem = forwardRef$1(
         size,
         minW: "max-content"
       }, rest),
-      /* @__PURE__ */ React$1.createElement(TagLabel, null, itemLabel),
-      /* @__PURE__ */ React$1.createElement(TagRightIcon, null, /* @__PURE__ */ React$1.createElement(Icon, { as: DotsMatrixSolid }))
+      /* @__PURE__ */ React.createElement(TagLabel, null, itemLabel),
+      /* @__PURE__ */ React.createElement(TagRightIcon, null, /* @__PURE__ */ React.createElement(Icon, { as: DotsMatrixSolid }))
     );
   }
 );
@@ -9824,13 +9826,13 @@ const Draggable = (_a) => {
     "isDragging"
   ]);
   if (!listeners) {
-    return /* @__PURE__ */ React$1.createElement(DragItem, { itemLabel });
+    return /* @__PURE__ */ React.createElement(DragItem, { itemLabel });
   }
   const childrenWithDragCursor = isValidElement(children) ? cloneElement(children, {
     cursor: isDragging ? "grabbing" : "grab"
   }) : children;
   const dragEventListeners = !disableDrag && listeners;
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Box,
     __spreadValues$Y(__spreadProps$b(__spreadValues$Y({
       ref: setNodeRef
@@ -9841,7 +9843,7 @@ const Draggable = (_a) => {
       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 })
   );
 };
 
@@ -9882,7 +9884,7 @@ const Droppable = (_a) => {
     "data-testid"
   ]);
   const _a2 = useDroppable(__spreadValues$X({}, rest)), { setNodeRef } = _a2, props = __objRest$M(_a2, ["setNodeRef"]);
-  return /* @__PURE__ */ React$1.createElement(Box, { ref: setNodeRef, "data-testid": testId }, typeof children === "function" ? children(props) : children || /* @__PURE__ */ React$1.createElement(Center, null, "Drop here"));
+  return /* @__PURE__ */ React.createElement(Box, { ref: setNodeRef, "data-testid": testId }, typeof children === "function" ? children(props) : children || /* @__PURE__ */ React.createElement(Center, null, "Drop here"));
 };
 
 var __defProp$W = Object.defineProperty;
@@ -9901,7 +9903,7 @@ var __spreadValues$W = (a, b) => {
     }
   return a;
 };
-const Sortable = (props) => /* @__PURE__ */ React$1.createElement(SortableContext, __spreadValues$W({}, props));
+const Sortable = (props) => /* @__PURE__ */ React.createElement(SortableContext, __spreadValues$W({}, props));
 
 var __defProp$V = Object.defineProperty;
 var __defProps$a = Object.defineProperties;
@@ -9964,7 +9966,7 @@ const SortableItem = (_a) => {
     "isDragging"
   ]);
   if (!listeners) {
-    return /* @__PURE__ */ React$1.createElement(DragItem, { itemLabel });
+    return /* @__PURE__ */ React.createElement(DragItem, { itemLabel });
   }
   const timeStampSnapchot = useRef(0);
   const inEditMode = useRef(false);
@@ -9995,7 +9997,7 @@ const SortableItem = (_a) => {
     onPointerDown: handlePointerDown,
     onKeyDown: handleKeyDown
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Box,
     __spreadValues$V(__spreadProps$a(__spreadValues$V({
       ref: setNodeRef,
@@ -10006,7 +10008,7 @@ const SortableItem = (_a) => {
       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 })
   );
 };
 
@@ -10040,7 +10042,7 @@ var __objRest$K = (source, exclude) => {
 };
 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 || DragDuo,
@@ -10080,7 +10082,7 @@ var __objRest$J = (source, exclude) => {
 const DropZone = (_a) => {
   var _b = _a, { sx = {}, name, children } = _b, rest = __objRest$J(_b, ["sx", "name", "children"]);
   const { dropZone } = useMultiStyleConfig("DragAndDrop", { sx });
-  return /* @__PURE__ */ React$1.createElement(Droppable, { id: name }, /* @__PURE__ */ React$1.createElement(Stack, __spreadValues$T({ sx: dropZone }, rest), children));
+  return /* @__PURE__ */ React.createElement(Droppable, { id: name }, /* @__PURE__ */ React.createElement(Stack, __spreadValues$T({ sx: dropZone }, rest), children));
 };
 
 var __defProp$S = Object.defineProperty;
@@ -10176,7 +10178,7 @@ function MultiSort({
       ));
     }
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     DragAndDrop,
     {
       sensors: sensors || customSensors,
@@ -10229,7 +10231,7 @@ function SortableList({
       onChange(newItems);
     }
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     DragAndDrop,
     {
       sensors: sensors || customSensors,
@@ -10238,7 +10240,7 @@ function SortableList({
       onDragEnd: handleDragEnd,
       modifiers
     },
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(
       Sortable,
       {
         items: identifierItems,
@@ -10246,7 +10248,7 @@ function SortableList({
       },
       items.map((item, index) => {
         const id = createKey(item);
-        return /* @__PURE__ */ React$1.createElement(
+        return /* @__PURE__ */ React.createElement(
           SortableItem,
           {
             key: id,
@@ -10259,11 +10261,11 @@ function SortableList({
         );
       })
     ),
-    displayOverlay && /* @__PURE__ */ React$1.createElement(DragOverlay, null, activeItem ? /* @__PURE__ */ React$1.createElement(DragItem, { itemLabel: activeItem }) : null)
+    displayOverlay && /* @__PURE__ */ React.createElement(DragOverlay, null, activeItem ? /* @__PURE__ */ React.createElement(DragItem, { itemLabel: activeItem }) : null)
   );
 }
 
-const SortableContainer = ({ children, items, strategy }) => /* @__PURE__ */ React$1.createElement(Sortable, { items, strategy: strategy || 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 || 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;
@@ -10313,7 +10315,7 @@ const FastList = forwardRef$1((_a, ref) => {
     "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(
     VariableSizeList,
     __spreadValues$R({
       itemCount,
@@ -10325,7 +10327,7 @@ const FastList = forwardRef$1((_a, ref) => {
       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)
   ));
 });
 
@@ -10379,7 +10381,7 @@ const FastGrid = forwardRef$1((_a, ref) => {
     "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(
     VariableSizeGrid,
     __spreadValues$Q({
       rowCount: rows,
@@ -10392,7 +10394,7 @@ const FastGrid = forwardRef$1((_a, ref) => {
       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)
   ));
 });
 
@@ -10427,23 +10429,23 @@ const EditableControls = ({ size, variant = "default" }) => {
   } = useEditableControls();
   const { onEdit, isEditing } = useEditableState();
   const { button, icon, controls } = useMultiStyleConfig("EditableText", { size, isEditing });
-  return /* @__PURE__ */ React$1.createElement(HStack, { spacing: 1, sx: controls }, isEditing ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(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: XCloseSolid })
-  ), /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: XCloseSolid })
+  ), /* @__PURE__ */ React.createElement(
     IconButton,
     __spreadValues$P({
       "aria-label": "Save",
       sx: button,
       variant: mapEditableVariantsToButtonSubmitVariants[variant]
     }, getSubmitButtonProps()),
-    /* @__PURE__ */ React$1.createElement(Icon, { sx: icon, as: CheckDuo })
-  )) : /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: CheckDuo })
+  )) : /* @__PURE__ */ React.createElement(
     IconButton,
     {
       "aria-label": "Edit",
@@ -10451,7 +10453,7 @@ const EditableControls = ({ size, variant = "default" }) => {
       sx: button,
       onClick: onEdit
     },
-    /* @__PURE__ */ React$1.createElement(Icon, { sx: icon, as: EditDuo })
+    /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: EditDuo })
   ));
 };
 
@@ -10502,7 +10504,7 @@ const EditableText = (_a) => {
   useEffect(() => {
     setValue(inputValue);
   }, [inputValue]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Editable,
     __spreadValues$O({
       isPreviewFocusable: true,
@@ -10511,20 +10513,20 @@ const EditableText = (_a) => {
       onChange: (newValue) => setValue(newValue),
       onSubmit
     }, rest),
-    /* @__PURE__ */ React$1.createElement(InputGroup, { size }, leftItem && /* @__PURE__ */ React$1.createElement(InputLeftElement, null, leftItem), /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(InputGroup, { size }, leftItem && /* @__PURE__ */ React.createElement(InputLeftElement, null, leftItem), /* @__PURE__ */ React.createElement(
       Input$1,
       {
         as: EditablePreview,
         sx: preview
       }
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       Input$1,
       {
         as: EditableInput,
         size,
         sx: input
       }
-    ), /* @__PURE__ */ React$1.createElement(InputRightElement, { sx: { width: "min-content" } }, /* @__PURE__ */ React$1.createElement(EditableControls, { size, variant })))
+    ), /* @__PURE__ */ React.createElement(InputRightElement, { sx: { width: "min-content" } }, /* @__PURE__ */ React.createElement(EditableControls, { size, variant })))
   );
 };
 
@@ -10564,15 +10566,15 @@ const ModalBase = (_a) => {
     "isCentered",
     "children"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Modal$2,
     __spreadValues$N({
       isCentered,
       scrollBehavior: "inside",
       motionPreset: "slideInBottom"
     }, rest),
-    /* @__PURE__ */ React$1.createElement(ModalOverlay, null),
-    /* @__PURE__ */ React$1.createElement(ModalContent, { "data-testid": "modal-test-id" }, /* @__PURE__ */ React$1.createElement(ModalCloseButton, { "data-testid": "modal-test-button-id" }), children)
+    /* @__PURE__ */ React.createElement(ModalOverlay, null),
+    /* @__PURE__ */ React.createElement(ModalContent, { "data-testid": "modal-test-id" }, /* @__PURE__ */ React.createElement(ModalCloseButton, { "data-testid": "modal-test-button-id" }), children)
   );
 };
 
@@ -10612,7 +10614,7 @@ const Modal = (_a) => {
     "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;
@@ -10631,7 +10633,7 @@ var __spreadValues$L = (a, b) => {
     }
   return a;
 };
-const ModalBody = (props) => /* @__PURE__ */ React$1.createElement(ModalBody$1, __spreadValues$L({ minH: props.h, maxH: props.h }, props));
+const ModalBody = (props) => /* @__PURE__ */ React.createElement(ModalBody$1, __spreadValues$L({ minH: props.h, maxH: props.h }, props));
 
 var __defProp$K = Object.defineProperty;
 var __getOwnPropSymbols$K = Object.getOwnPropertySymbols;
@@ -10689,15 +10691,15 @@ const FileEditorModal = forwardRef$1((_a, ref) => {
     setZoomLevel(1);
     onClose();
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Modal,
     __spreadValues$K({
       isOpen,
       onClose,
       closeOnOverlayClick: false
     }, rest),
-    /* @__PURE__ */ React$1.createElement(ModalHeader, null, "Edit ", isImage ? "image" : "file"),
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(ModalHeader, null, "Edit ", isImage ? "image" : "file"),
+    /* @__PURE__ */ React.createElement(
       ModalBody,
       {
         display: "flex",
@@ -10707,7 +10709,7 @@ const FileEditorModal = forwardRef$1((_a, ref) => {
         gap: 4,
         minH: "300px"
       },
-      /* @__PURE__ */ React$1.createElement(Stack, { display: isImage && canCropImage ? "inherit" : "none" }, /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(Stack, { display: isImage && canCropImage ? "inherit" : "none" }, /* @__PURE__ */ React.createElement(
         AvatarEditor,
         {
           ref,
@@ -10721,7 +10723,7 @@ const FileEditorModal = forwardRef$1((_a, ref) => {
           scale: zoomLevel,
           rotate: 0
         }
-      ), /* @__PURE__ */ React$1.createElement(HStack, { w: "90%" }, /* @__PURE__ */ React$1.createElement(FormLabel, null, "Zoom"), /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(HStack, { w: "90%" }, /* @__PURE__ */ React.createElement(FormLabel, null, "Zoom"), /* @__PURE__ */ React.createElement(
         Slider,
         {
           "aria-label": "zoom",
@@ -10732,12 +10734,12 @@ const FileEditorModal = forwardRef$1((_a, ref) => {
           max: 10,
           onChange: (value) => setZoomLevel(value)
         },
-        /* @__PURE__ */ React$1.createElement(SliderTrack, null, /* @__PURE__ */ React$1.createElement(SliderFilledTrack, null)),
-        /* @__PURE__ */ React$1.createElement(SliderThumb, { boxSize: 6 }, /* @__PURE__ */ React$1.createElement(Icon, { as: ZoomInDuo }))
+        /* @__PURE__ */ React.createElement(SliderTrack, null, /* @__PURE__ */ React.createElement(SliderFilledTrack, null)),
+        /* @__PURE__ */ React.createElement(SliderThumb, { boxSize: 6 }, /* @__PURE__ */ React.createElement(Icon, { as: ZoomInDuo }))
       ))),
-      canEditFileName && /* @__PURE__ */ React$1.createElement(Stack, { w: "90%", direction: isImage ? "row" : "column", pt: 2 }, /* @__PURE__ */ React$1.createElement(FormLabel, null, "Name the file:"), /* @__PURE__ */ React$1.createElement(Box, { maxW: "50%" }, /* @__PURE__ */ React$1.createElement(EditableText, { onSubmit: (v) => setFileName(v), value: fileName, size: "sm" })))
+      canEditFileName && /* @__PURE__ */ React.createElement(Stack, { w: "90%", direction: isImage ? "row" : "column", pt: 2 }, /* @__PURE__ */ React.createElement(FormLabel, null, "Name the file:"), /* @__PURE__ */ React.createElement(Box, { maxW: "50%" }, /* @__PURE__ */ React.createElement(EditableText, { onSubmit: (v) => setFileName(v), value: fileName, size: "sm" })))
     ),
-    /* @__PURE__ */ React$1.createElement(ModalFooter, null, /* @__PURE__ */ React$1.createElement(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(ModalFooter, null, /* @__PURE__ */ React.createElement(HStack, null, /* @__PURE__ */ React.createElement(Button, { variant: "danger", onClick: handleClose }, "Cancel"), /* @__PURE__ */ React.createElement(Button, { variant: "success", onClick: handleCrop }, "Save")))
   );
 });
 
@@ -10785,7 +10787,7 @@ const ConfirmDeleteModal = (_a) => {
     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(
     ModalHeader,
     {
       sx: { fontSize: "lg" },
@@ -10796,7 +10798,7 @@ const ConfirmDeleteModal = (_a) => {
     },
     "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(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(ModalFooter, null, /* @__PURE__ */ React.createElement(Button, { variant: "danger", onClick: handleDelete }, "Delete")));
 };
 
 const updateTimeThreshold = 0.5;
@@ -10833,7 +10835,7 @@ var __objRest$B = (source, exclude) => {
 const ProgressBar = forwardRef$1(
   (_a, ref) => {
     var _b = _a, { animationSlideTimeMs = animationSlideTime, sx } = _b, props = __objRest$B(_b, ["animationSlideTimeMs", "sx"]);
-    return /* @__PURE__ */ React$1.createElement(
+    return /* @__PURE__ */ React.createElement(
       Progress,
       __spreadValues$I({
         ref,
@@ -10924,7 +10926,7 @@ const LoadingBar = (_a) => {
       timeRef.current = Date.now();
     }
   }, [progress]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Fade,
     {
       in: progress < 1,
@@ -10938,7 +10940,7 @@ const LoadingBar = (_a) => {
         }
       }
     },
-    /* @__PURE__ */ React$1.createElement(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(VStack, __spreadValues$H({}, rest), /* @__PURE__ */ React.createElement(Small, null, Math.round(progress * 100), "%", " ", !!timeLeft && `\xB7 ${formattedTime(timeLeft)} left`), /* @__PURE__ */ React.createElement(
       ProgressBar,
       {
         ref,
@@ -11185,7 +11187,7 @@ const FileIconButton = (_a) => {
     "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;
@@ -11355,7 +11357,7 @@ const FilePicker = (_a) => {
       }
     }
   };
-  return /* @__PURE__ */ React$1.createElement(Stack, __spreadValues$E({ maxW: filePicker.width }, rest), /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Stack, __spreadValues$E({ maxW: filePicker.width }, rest), /* @__PURE__ */ React.createElement(
     Clickable,
     {
       onClick: handleOnClick,
@@ -11364,7 +11366,7 @@ const FilePicker = (_a) => {
       onMouseEnter: () => setEditable(true),
       onMouseLeave: () => setEditable(false)
     },
-    /* @__PURE__ */ React$1.createElement(Box, { sx: filePicker }, /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(Box, { sx: filePicker }, /* @__PURE__ */ React.createElement(
       SlideFade$1,
       {
         in: hasLoaded,
@@ -11374,7 +11376,7 @@ const FilePicker = (_a) => {
           display: hasLoaded && isImage ? "initial" : "none"
         }
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Image$1,
         {
           src: file ? isFile(file) ? URL.createObjectURL(file) : file : "",
@@ -11386,7 +11388,7 @@ const FilePicker = (_a) => {
           w: "full"
         }
       )
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       Input$1,
       {
         type: "file",
@@ -11395,7 +11397,7 @@ const FilePicker = (_a) => {
         ref: fileInputRef,
         onChange: handleChange
       }
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       Stack,
       {
         display: hasLoaded && isImage ? "none" : "default",
@@ -11403,7 +11405,7 @@ const FilePicker = (_a) => {
         w: "85%",
         spacing: "0a"
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Icon,
         {
           as: onlyImageAccepted ? Image03Solid : UploadCloudSolid,
@@ -11413,7 +11415,7 @@ const FilePicker = (_a) => {
           "aria-label": "file-icon-upload"
         }
       ),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Icon,
         {
           as: FileBlankDuo,
@@ -11422,7 +11424,7 @@ const FilePicker = (_a) => {
           display: hasLoaded && !isImage ? "inline-block" : "none"
         }
       ),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         P,
         {
           variant: isInvalid ? "16" : "14",
@@ -11435,7 +11437,7 @@ const FilePicker = (_a) => {
         },
         isInvalid ? "File not supported" : file && isFile(file) ? file.name : `Drag & drop ${onlyImageAccepted ? "image" : "file"} or`
       ),
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Lead,
         {
           sx: {
@@ -11446,8 +11448,8 @@ const FilePicker = (_a) => {
         },
         "Click to upload"
       ),
-      /* @__PURE__ */ React$1.createElement(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(Box, { display: isLoading ? "block" : "none", pt: 1 }, loadWithSpinner ? /* @__PURE__ */ React.createElement(Spinner, null) : /* @__PURE__ */ React.createElement(LoadingBar, { loaded: uploaded }))
+    ), /* @__PURE__ */ React.createElement(
       Fade$1,
       {
         in: hasLoaded && editable,
@@ -11456,7 +11458,7 @@ const FilePicker = (_a) => {
           justifyContent: "center"
         }
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         HStack,
         {
           spacing: 2,
@@ -11468,7 +11470,7 @@ const FilePicker = (_a) => {
           width: "44",
           py: 2
         },
-        editFileOptions.canEdit && /* @__PURE__ */ React$1.createElement(
+        editFileOptions.canEdit && /* @__PURE__ */ React.createElement(
           FileIconButton,
           {
             "aria-label": "edit-file",
@@ -11476,7 +11478,7 @@ const FilePicker = (_a) => {
             icon: EditBoxDuo
           }
         ),
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           FileIconButton,
           {
             "aria-label": "download-file",
@@ -11484,7 +11486,7 @@ const FilePicker = (_a) => {
             icon: DownloadDuo
           }
         ),
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           FileIconButton,
           {
             "aria-label": "delete-file",
@@ -11494,7 +11496,7 @@ const FilePicker = (_a) => {
           }
         )
       )
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       P,
       {
         variant: "14",
@@ -11503,7 +11505,7 @@ const FilePicker = (_a) => {
       },
       isFile(file) && readableFileSize(file == null ? void 0 : file.size)
     ))
-  ), /* @__PURE__ */ React$1.createElement(
+  ), /* @__PURE__ */ React.createElement(
     FileEditorModal,
     __spreadProps$7(__spreadValues$E({}, editModal), {
       fileName: name,
@@ -11515,7 +11517,7 @@ const FilePicker = (_a) => {
       canEditFileName: editFileOptions.canEditName,
       canCropImage: editFileOptions.canEditImage
     })
-  ), /* @__PURE__ */ React$1.createElement(
+  ), /* @__PURE__ */ React.createElement(
     ConfirmDeleteModal,
     __spreadProps$7(__spreadValues$E({}, deleteModal), {
       confirmDelete: clearImage,
@@ -11569,7 +11571,7 @@ const FilePickerField = (_a) => {
     "onChange"
   ]);
   const [uploaded, setUploaded] = useState(0);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -11578,7 +11580,7 @@ const FilePickerField = (_a) => {
       isRequired,
       validate
     },
-    ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+    ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       FilePicker,
       __spreadValues$D({
         onChange: async (file) => {
@@ -11706,7 +11708,7 @@ function MultiFileUploader(_a) {
       updateMultipleFiles(e.target.files);
     }
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Clickable,
     {
       onClick: handleClick,
@@ -11715,7 +11717,7 @@ function MultiFileUploader(_a) {
       onMouseEnter: toggleHover,
       onMouseLeave: toggleHover
     },
-    /* @__PURE__ */ React$1.createElement(Box, __spreadValues$C({ sx: multiFilePicker }, rest), /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(Box, __spreadValues$C({ sx: multiFilePicker }, rest), /* @__PURE__ */ React.createElement(
       Stack,
       {
         alignItems: "center",
@@ -11724,7 +11726,7 @@ function MultiFileUploader(_a) {
         w: "full",
         spacing: 0
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Icon,
         {
           as: onlyImageAccepted ? Image03Solid : UploadCloudSolid,
@@ -11734,10 +11736,10 @@ function MultiFileUploader(_a) {
           mb: onlyImageAccepted ? "0a" : 0
         }
       ),
-      /* @__PURE__ */ React$1.createElement(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(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(
       Input$1,
       {
         type: "file",
@@ -11822,7 +11824,7 @@ function FileItem({
       deleteFile(file);
     }, 500);
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     SlideFade,
     {
       in: show,
@@ -11831,7 +11833,7 @@ function FileItem({
       enterDuration: !isLazy ? 300 : 1,
       exitDuration: 300
     },
-    /* @__PURE__ */ React$1.createElement(Box, { sx: fileItem }, /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(Box, { sx: fileItem }, /* @__PURE__ */ React.createElement(
       HStack,
       {
         w: "full",
@@ -11842,7 +11844,7 @@ function FileItem({
         px: 2,
         pt: file.isUploading && !hasLoaded ? 2 : 0
       },
-      /* @__PURE__ */ React$1.createElement(HStack, { spacing: 4, alignItems: "start", maxW: "50%" }, isFileImage(file) ? file.isUploading || loadingImage ? /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(HStack, { spacing: 4, alignItems: "start", maxW: "50%" }, isFileImage(file) ? file.isUploading || loadingImage ? /* @__PURE__ */ React.createElement(
         Icon,
         {
           as: Image03Duo,
@@ -11852,7 +11854,7 @@ function FileItem({
           borderRadius: "8",
           p: "2"
         }
-      ) : /* @__PURE__ */ React$1.createElement(
+      ) : /* @__PURE__ */ React.createElement(
         Image$1,
         {
           src: file.src || "",
@@ -11862,7 +11864,7 @@ function FileItem({
           borderRadius: "8",
           boxSize: "10"
         }
-      ) : /* @__PURE__ */ React$1.createElement(
+      ) : /* @__PURE__ */ React.createElement(
         Icon,
         {
           as: FileBlankDuo,
@@ -11870,7 +11872,7 @@ function FileItem({
           p: "1",
           color: "gray.300"
         }
-      ), /* @__PURE__ */ React$1.createElement(
+      ), /* @__PURE__ */ React.createElement(
         Stack,
         {
           alignItems: "start",
@@ -11878,7 +11880,7 @@ function FileItem({
           spacing: "0",
           maxW: "100%"
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           P,
           {
             variant: "14",
@@ -11889,9 +11891,9 @@ function FileItem({
           },
           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(
         HStack,
         {
           spacing: "3",
@@ -11901,7 +11903,7 @@ function FileItem({
           display: file.isUploading ? "none" : "flex",
           p: "1"
         },
-        canEdit && /* @__PURE__ */ React$1.createElement(
+        canEdit && /* @__PURE__ */ React.createElement(
           FileIconButton,
           {
             "aria-label": "Edit-image",
@@ -11909,7 +11911,7 @@ function FileItem({
             icon: EditBoxDuo
           }
         ),
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           FileIconButton,
           {
             "aria-label": "download-image",
@@ -11917,14 +11919,14 @@ function FileItem({
             icon: DownloadDuo
           }
         ),
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           CloseButton$1,
           {
             onClick: confirmDelete ? deleteModalDisclosure.onOpen : clearImage
           }
         )
       )
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       Box,
       {
         w: "full",
@@ -11934,14 +11936,14 @@ function FileItem({
         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,
@@ -11953,7 +11955,7 @@ function FileItem({
         isImage: isFileImage(file),
         ref: imageEditorRef
       })
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       ConfirmDeleteModal,
       __spreadProps$6(__spreadValues$B({}, deleteModalDisclosure), {
         confirmDelete: clearImage,
@@ -12029,7 +12031,7 @@ function MultiFileList(_a) {
     }
   }, [uploadingFiles, files]);
   const isLazy = uploadingFilesReference ? any((file) => file.isLazy || false, uploadingFilesReference) : false;
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Stack,
     __spreadValues$A({
       ref: listRef,
@@ -12038,7 +12040,7 @@ function MultiFileList(_a) {
       pr: overflowing ? 2 : 0,
       overflowY: "auto"
     }, rest),
-    uploadingFilesReference && map((file) => /* @__PURE__ */ React$1.createElement(
+    uploadingFilesReference && map((file) => /* @__PURE__ */ React.createElement(
       FileItem,
       {
         onChangeCallback: onChange,
@@ -12050,7 +12052,7 @@ function MultiFileList(_a) {
         editFileOptions
       }
     ), uploadingFilesReference),
-    formattedFiles && map((file) => /* @__PURE__ */ React$1.createElement(
+    formattedFiles && map((file) => /* @__PURE__ */ React.createElement(
       FileItem,
       {
         onChangeCallback: onChange,
@@ -12141,14 +12143,14 @@ function MultiFilePicker(_a) {
       setBufferFiles(queuedFiles);
     }
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Stack,
     __spreadValues$z({
       spacing: 4,
       maxW: "inherit",
       maxH: "inherit"
     }, rest),
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(
       MultiFileUploader,
       {
         acceptFormat,
@@ -12160,7 +12162,7 @@ function MultiFilePicker(_a) {
         variant
       }
     ),
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(
       MultiFileList,
       {
         files: files || previewFiles,
@@ -12229,7 +12231,7 @@ const MultiFilePickerField = (_a) => {
     const formattedFiles = map((file) => isFile(file) ? file : createFileObjectFromSrc(file), buffer);
     return formattedFiles;
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -12244,7 +12246,7 @@ const MultiFilePickerField = (_a) => {
         const newValues = remove(removedIndex, 1, value);
         onChange(newValues);
       };
-      return /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(
         MultiFilePicker,
         __spreadValues$y({
           onChange: async (files) => {
@@ -12278,7 +12280,7 @@ const MediatoolThemeProvider = ({
   children,
   theme: theme$1 = theme,
   themeName = "webappTheme"
-}) => /* @__PURE__ */ React$1.createElement(ChakraProvider, { resetCSS: true, theme: theme$1 }, /* @__PURE__ */ React$1.createElement(CustomTheme.Provider, { value: themeName }, children));
+}) => /* @__PURE__ */ React.createElement(ChakraProvider, { resetCSS: true, theme: theme$1 }, /* @__PURE__ */ React.createElement(CustomTheme.Provider, { value: themeName }, children));
 
 var __defProp$x = Object.defineProperty;
 var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
@@ -12310,20 +12312,20 @@ var __objRest$s = (source, exclude) => {
 };
 const Menu = (_a) => {
   var _b = _a, { variant = "relaxed" } = _b, props = __objRest$s(_b, ["variant"]);
-  return /* @__PURE__ */ React$1.createElement(Menu$2, __spreadValues$x({ variant }, props));
+  return /* @__PURE__ */ React.createElement(Menu$2, __spreadValues$x({ variant }, props));
 };
 
 const NumberInputStepper = ({
   includePercentage = false,
   enableStepperArrows = false
-}) => /* @__PURE__ */ React$1.createElement(NumberInputStepper$1, null, /* @__PURE__ */ React$1.createElement(HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React$1.createElement(Center, { bgColor: "gray.50", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React$1.createElement(P, null, "%")), enableStepperArrows && /* @__PURE__ */ React$1.createElement(HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React$1.createElement(Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React$1.createElement(NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React$1.createElement(
+}) => /* @__PURE__ */ React.createElement(NumberInputStepper$1, null, /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(Center, { bgColor: "gray.50", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P, null, "%")), enableStepperArrows && /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
   Icon,
   {
     as: ChevronUpSolid,
     color: "icon.input-stepper.default",
     boxSize: 4
   }
-)), /* @__PURE__ */ React$1.createElement(NumberDecrementStepper, null, /* @__PURE__ */ React$1.createElement(
+)), /* @__PURE__ */ React.createElement(NumberDecrementStepper, null, /* @__PURE__ */ React.createElement(
   Icon,
   {
     as: ChevronDownSolid,
@@ -12411,7 +12413,7 @@ const NumberInput = (_a) => {
     const filteredNaN = Number.isNaN(value) ? "" : value;
     onChange(`${filteredNaN}`);
   };
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     NumberInput$2,
     __spreadValues$w(__spreadValues$w({
       variant,
@@ -12419,8 +12421,8 @@ const NumberInput = (_a) => {
       onChange: handleChange,
       id: name
     }, percentageProps), rest),
-    /* @__PURE__ */ React$1.createElement(NumberInputField$1, { onChange: handleChange }),
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(NumberInputField$1, { onChange: handleChange }),
+    /* @__PURE__ */ React.createElement(
       NumberInputStepper,
       {
         includePercentage: onlyAcceptPercentage,
@@ -12481,7 +12483,7 @@ const NumberInputField = forwardRef$1((_a, ref) => {
     "inputRightElement"
   ]);
   const formatNumber = (value, factor) => onlyAcceptPercentage ? advancedParseFloat(value * factor) : value;
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -12494,13 +12496,13 @@ const NumberInputField = forwardRef$1((_a, ref) => {
     ({ onChange, value }) => {
       const initialValue = isNil(value) || Number.isNaN(parseFloat(value)) ? "" : formatNumber(value, 100);
       const [displayValue, setDisplayValue] = useState(initialValue);
-      return /* @__PURE__ */ React$1.createElement(
+      return /* @__PURE__ */ React.createElement(
         InputGroupWrapper,
         {
           inputLeftElement,
           inputRightElement
         },
-        /* @__PURE__ */ React$1.createElement(
+        /* @__PURE__ */ React.createElement(
           NumberInput,
           __spreadValues$v({
             name,
@@ -12566,15 +12568,15 @@ const NotificationIconButton = forwardRef$1((_a, ref) => {
   ]);
   const [isBlinking, setIsBlinking] = useState(false);
   const { container, notifier } = useMultiStyleConfig("NotificationIconButton", { size, variant });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Box,
     {
       onMouseEnter: () => setIsBlinking(true),
       onMouseLeave: () => setIsBlinking(false),
       sx: container
     },
-    hasNotification && /* @__PURE__ */ React$1.createElement(Box, { sx: notifier }, /* @__PURE__ */ React$1.createElement(Blinker, { isBlinking, color: blinkerColor, size: "2xs" })),
-    /* @__PURE__ */ React$1.createElement(
+    hasNotification && /* @__PURE__ */ React.createElement(Box, { sx: notifier }, /* @__PURE__ */ React.createElement(Blinker, { isBlinking, color: blinkerColor, size: "2xs" })),
+    /* @__PURE__ */ React.createElement(
       IconButton,
       __spreadValues$u({
         variant,
@@ -12628,7 +12630,7 @@ const PinInput = (_a) => {
     "hidden",
     "children"
   ]);
-  return /* @__PURE__ */ React$1.createElement(PinInput$2, __spreadProps$5(__spreadValues$t({}, rest), { variant, placeholder: "\u25CF", mask: hidden }), children);
+  return /* @__PURE__ */ React.createElement(PinInput$2, __spreadProps$5(__spreadValues$t({}, rest), { variant, placeholder: "\u25CF", mask: hidden }), children);
 };
 
 const isStringArray = (value) => is(Array, value) && length(value) > 0 && typeof value[0] === "string";
@@ -12730,7 +12732,7 @@ const Select = forwardRef$1((_a, ref) => {
     }
     return prevOptions.current;
   }, [options]);
-  return /* @__PURE__ */ React$1.createElement(Box, { w: "full", "data-testid": testId, cursor: "pointer" }, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { w: "full", "data-testid": testId, cursor: "pointer" }, /* @__PURE__ */ React.createElement(
     Select$3,
     __spreadValues$s(__spreadProps$4(__spreadValues$s({
       isMulti,
@@ -12810,7 +12812,7 @@ const BaseSelectField = (_a, ref) => {
     "inputLeftElement",
     "inputRightElement"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -12821,13 +12823,13 @@ const BaseSelectField = (_a, ref) => {
       validate,
       ref
     },
-    ({ value, onChange }) => /* @__PURE__ */ React$1.createElement(HStack, { w: "full" }, /* @__PURE__ */ React$1.createElement(
+    ({ value, onChange }) => /* @__PURE__ */ React.createElement(HStack, { w: "full" }, /* @__PURE__ */ React.createElement(
       InputGroupWrapper,
       {
         inputLeftElement,
         inputRightElement
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Select,
         __spreadValues$r({
           name,
@@ -12846,7 +12848,7 @@ const BaseSelectField = (_a, ref) => {
           ) : null
         }, rest)
       )
-    ), /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(
       IconButton,
       {
         "aria-label": `${name}-close-button`,
@@ -12858,7 +12860,7 @@ const BaseSelectField = (_a, ref) => {
           onChange(void 0);
           onChangeCallback(void 0, { action: "clear", removedValues: value });
         },
-        icon: /* @__PURE__ */ React$1.createElement(Icon, { as: XCloseSolid })
+        icon: /* @__PURE__ */ React.createElement(Icon, { as: XCloseSolid })
       }
     ))
   );
@@ -12905,7 +12907,7 @@ const Switch = (_a) => {
     "name",
     "size"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Switch$2,
     __spreadValues$q({
       size,
@@ -12964,7 +12966,7 @@ const SwitchField = forwardRef$1((_a, ref) => {
     "labelPlacement",
     "labelSize"
   ]);
-  return /* @__PURE__ */ React$1.createElement(Box, { w: label ? "full" : "fit-content", display: "inline-flex" }, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { w: label ? "full" : "fit-content", display: "inline-flex" }, /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -12974,7 +12976,7 @@ const SwitchField = forwardRef$1((_a, ref) => {
       validate,
       ref
     },
-    ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+    ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       Flex,
       {
         display: "inline-flex",
@@ -12982,7 +12984,7 @@ const SwitchField = forwardRef$1((_a, ref) => {
         gap: 2,
         direction: labelPlacement === "left" ? "row-reverse" : "row"
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Switch,
         __spreadValues$p({
           name,
@@ -12994,7 +12996,7 @@ const SwitchField = forwardRef$1((_a, ref) => {
           "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)
     )
   ));
 });
@@ -13015,7 +13017,7 @@ var __spreadValues$o = (a, b) => {
     }
   return a;
 };
-const TabPanel = (props) => /* @__PURE__ */ React$1.createElement(TabPanel$1, __spreadValues$o({ padding: 0 }, props));
+const TabPanel = (props) => /* @__PURE__ */ React.createElement(TabPanel$1, __spreadValues$o({ padding: 0 }, props));
 
 var __defProp$n = Object.defineProperty;
 var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
@@ -13055,7 +13057,7 @@ const Tabs = (_a) => {
     "variant",
     "isManual"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Tabs$2,
     __spreadValues$n({
       isManual,
@@ -13105,7 +13107,7 @@ const Textarea = (_a) => {
     "name",
     "value"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Textarea$2,
     __spreadValues$m({
       size,
@@ -13160,7 +13162,7 @@ const TextareaField = forwardRef$1((_a, ref) => {
     "direction",
     "onChange"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -13170,7 +13172,7 @@ const TextareaField = forwardRef$1((_a, ref) => {
       direction,
       ref
     },
-    ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+    ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       Textarea,
       __spreadValues$l({
         name,
@@ -13294,13 +13296,13 @@ const FormattedNumberInput = (_a) => {
   useEffect(() => {
     validateRange();
   }, [value]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     InputGroupWrapper,
     {
       inputLeftElement,
       inputRightElement
     },
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(
       NumericFormat,
       __spreadValues$k(__spreadValues$k({
         allowLeadingZeros: true,
@@ -13362,7 +13364,7 @@ const FormattedNumberInputField = forwardRef$1((_a, ref) => {
     "onChange",
     "direction"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -13372,7 +13374,7 @@ const FormattedNumberInputField = forwardRef$1((_a, ref) => {
       validate,
       ref
     },
-    ({ onChange, value }) => /* @__PURE__ */ React$1.createElement(
+    ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       FormattedNumberInput,
       __spreadValues$j({
         name,
@@ -13436,7 +13438,7 @@ const MaskedTextInput = (_a) => {
     "onChange",
     "onBlur"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     CustomInput,
     {
       mask,
@@ -13447,7 +13449,7 @@ const MaskedTextInput = (_a) => {
       onChange,
       onBlur
     },
-    ({ name: nameProp }) => /* @__PURE__ */ React$1.createElement(
+    ({ name: nameProp }) => /* @__PURE__ */ React.createElement(
       Input$1,
       __spreadValues$i({
         placeholder: maskPlaceholder != null ? maskPlaceholder : placeholder,
@@ -13507,7 +13509,7 @@ const TextField = forwardRef$1((_a, ref) => {
     "inputLeftElement",
     "inputRightElement"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -13517,13 +13519,13 @@ const TextField = forwardRef$1((_a, ref) => {
       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,
@@ -13592,20 +13594,20 @@ const Toast = (_a) => {
     "onClose"
   ]);
   const icon = toastIconMap[variant];
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Alert$2,
     __spreadValues$g({
       variant,
       "data-testid": "toast-test"
     }, rest),
-    /* @__PURE__ */ React$1.createElement(HStack, { alignItems: "flex-start" }, icon && /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(HStack, { alignItems: "flex-start" }, icon && /* @__PURE__ */ React.createElement(
       Icon,
       {
         as: icon,
         color: `icon.toast.${variant}`,
         boxSize: 6
       }
-    ), /* @__PURE__ */ React$1.createElement(Stack, { spacing: 0, alignItems: "flex-start" }, title && /* @__PURE__ */ React$1.createElement(Label, { size: "md" }, title), description && /* @__PURE__ */ React$1.createElement(
+    ), /* @__PURE__ */ React.createElement(Stack, { spacing: 0, alignItems: "flex-start" }, title && /* @__PURE__ */ React.createElement(Label, { size: "md" }, title), description && /* @__PURE__ */ React.createElement(
       P,
       {
         sx: {
@@ -13613,7 +13615,7 @@ const Toast = (_a) => {
         }
       },
       description
-    )), /* @__PURE__ */ React$1.createElement(
+    )), /* @__PURE__ */ React.createElement(
       CloseButton$1,
       {
         size: "sm",
@@ -13653,7 +13655,7 @@ const useToast = (defaultOpts = {}) => {
           title = "Success",
           description = ""
         } = opts;
-        return /* @__PURE__ */ React$1.createElement(
+        return /* @__PURE__ */ React.createElement(
           Toast,
           {
             variant,
@@ -13724,7 +13726,7 @@ const StatusPin = (_a) => {
   const pinColor = pinVariantMap[variant];
   const pinSizeTuple = pinSizeMap[size];
   const [outerSize, innerSize] = pinSizeTuple;
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Circle,
     __spreadValues$e({
       size: outerSize,
@@ -13732,7 +13734,7 @@ const StatusPin = (_a) => {
       borderWidth: "xs",
       borderColor: pinColor
     }, rest),
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(
       Circle,
       {
         size: innerSize,
@@ -13776,7 +13778,7 @@ const AsyncError = (_a) => {
   } = _b, rest = __objRest$a(_b, [
     "message"
   ]);
-  return /* @__PURE__ */ React$1.createElement(Alert$2, __spreadValues$d({ backgroundColor: "background.default", color: "text.default", width: "100%" }, rest), /* @__PURE__ */ React$1.createElement(VStack, { w: "full" }, /* @__PURE__ */ React$1.createElement(Icon, { as: toastIconMap.error, color: "icon.toast.error", boxSize: 6 }), /* @__PURE__ */ React$1.createElement(AlertTitle, null, " Error "), message && /* @__PURE__ */ React$1.createElement(AlertDescription, null, message)));
+  return /* @__PURE__ */ React.createElement(Alert$2, __spreadValues$d({ backgroundColor: "background.default", color: "text.default", width: "100%" }, rest), /* @__PURE__ */ React.createElement(VStack, { w: "full" }, /* @__PURE__ */ React.createElement(Icon, { as: toastIconMap.error, color: "icon.toast.error", boxSize: 6 }), /* @__PURE__ */ React.createElement(AlertTitle, null, " Error "), message && /* @__PURE__ */ React.createElement(AlertDescription, null, message)));
 };
 
 var __defProp$c = Object.defineProperty;
@@ -13795,7 +13797,7 @@ var __spreadValues$c = (a, b) => {
     }
   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;
@@ -13813,7 +13815,7 @@ var __spreadValues$b = (a, b) => {
     }
   return a;
 };
-const Steps = (props) => /* @__PURE__ */ React$1.createElement(Tabs$2, __spreadValues$b({ isManual: true }, props));
+const Steps = (props) => /* @__PURE__ */ React.createElement(Tabs$2, __spreadValues$b({ isManual: true }, props));
 
 var __defProp$a = Object.defineProperty;
 var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
@@ -13851,12 +13853,12 @@ const Step = (_a) => {
     description: descriptionStyle,
     indicator: indicatorStyle
   } = useMultiStyleConfig("Step");
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Tab,
     __spreadValues$a({
       sx: step
     }, rest),
-    /* @__PURE__ */ React$1.createElement(Flex, { flexDirection: "row", alignItems: "flex-start", gap: "4", _groupFocusVisible: ring }, indicator && /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(Flex, { flexDirection: "row", alignItems: "flex-start", gap: "4", _groupFocusVisible: ring }, indicator && /* @__PURE__ */ React.createElement(
       Box,
       {
         sx: indicatorStyle,
@@ -13864,7 +13866,7 @@ const Step = (_a) => {
         justifyContent: "center"
       },
       indicator
-    ), /* @__PURE__ */ React$1.createElement(Flex, { flexDirection: "column" }, /* @__PURE__ */ React$1.createElement(Capitalized, { sx: labelStyle }, label), description && /* @__PURE__ */ React$1.createElement(Lead, { sx: descriptionStyle }, description)))
+    ), /* @__PURE__ */ React.createElement(Flex, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Capitalized, { sx: labelStyle }, label), description && /* @__PURE__ */ React.createElement(Lead, { sx: descriptionStyle }, description)))
   );
 };
 
@@ -13903,7 +13905,7 @@ const StepList = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest$8(_b, ["children"]);
   const tabs = Children.count(children);
   const styles = useStyleConfig("StepList", { tabs });
-  return /* @__PURE__ */ React$1.createElement(TabList, __spreadProps$2(__spreadValues$9({}, rest), { sx: styles }), children);
+  return /* @__PURE__ */ React.createElement(TabList, __spreadProps$2(__spreadValues$9({}, rest), { sx: styles }), children);
 };
 
 var __defProp$8 = Object.defineProperty;
@@ -13949,7 +13951,7 @@ const ClipboardInput = forwardRef$1((_a, ref) => {
   useEffect(() => {
     setValue(value);
   }, [value]);
-  return /* @__PURE__ */ React$1.createElement(InputGroup, { size, "data-testid": "clipboard-input-test-id", ref }, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(InputGroup, { size, "data-testid": "clipboard-input-test-id", ref }, /* @__PURE__ */ React.createElement(
     Input$1,
     __spreadValues$8({
       textOverflow: "ellipsis",
@@ -13957,7 +13959,7 @@ const ClipboardInput = forwardRef$1((_a, ref) => {
       isReadOnly: true,
       value
     }, rest)
-  ), /* @__PURE__ */ React$1.createElement(InputRightElement, null, /* @__PURE__ */ React$1.createElement(
+  ), /* @__PURE__ */ React.createElement(InputRightElement, null, /* @__PURE__ */ React.createElement(
     Tooltip,
     {
       label: hasCopied ? "Copied!" : "Copy",
@@ -13965,7 +13967,7 @@ const ClipboardInput = forwardRef$1((_a, ref) => {
       closeOnClick: false,
       sx: tooltip
     },
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(
       IconButton,
       {
         "aria-label": ariaLabel || "Click to copy",
@@ -13973,7 +13975,7 @@ const ClipboardInput = forwardRef$1((_a, ref) => {
         variant: hasCopied ? "success" : "default",
         sx: button
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Icon,
         {
           as: hasCopied ? CheckDuo : CopyDuo,
@@ -14060,7 +14062,7 @@ const SplitPane = (_a) => {
     []
   );
   const containerStyle = useStyleConfig("SplitPane", { minLeftWidth, minRightWidth, initialSplit, isOpen });
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Grid,
     __spreadValues$7({
       sx: containerStyle,
@@ -14102,7 +14104,7 @@ var __objRest$5 = (source, exclude) => {
 };
 const PaneItem = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest$5(_b, ["children"]);
-  return /* @__PURE__ */ React$1.createElement(GridItem, __spreadValues$6({ overflow: "hidden" }, rest), children);
+  return /* @__PURE__ */ React.createElement(GridItem, __spreadValues$6({ overflow: "hidden" }, rest), children);
 };
 
 var __defProp$5 = Object.defineProperty;
@@ -14123,7 +14125,7 @@ var __spreadValues$5 = (a, b) => {
 };
 const PaneDivider = forwardRef((props, ref) => {
   const style = useStyleConfig("PaneDivider");
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Box,
     __spreadValues$5({
       ref,
@@ -14176,8 +14178,8 @@ const StepStack = (_a) => {
   ]);
   const rows = getChildrenWithProps(children, {});
   const parsedRowHeight = useToken("sizes", rowHeight);
-  return /* @__PURE__ */ React$1.createElement(Stack, __spreadValues$4({ spacing, position: "relative" }, rest), rows.map(
-    (row, i) => /* @__PURE__ */ React$1.createElement(HStack, { key: `row-${i}`, alignItems: stepCircleAlignment }, /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(Stack, __spreadValues$4({ spacing, position: "relative" }, rest), rows.map(
+    (row, i) => /* @__PURE__ */ React.createElement(HStack, { key: `row-${i}`, alignItems: stepCircleAlignment }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       Box,
       {
         borderRadius: "full",
@@ -14188,7 +14190,7 @@ const StepStack = (_a) => {
         zIndex: "docked",
         marginTop: `${stepCircleMarginTopPx}px`
       },
-      /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(
         Label,
         {
           size: "sm",
@@ -14199,7 +14201,7 @@ const StepStack = (_a) => {
         i + 1
       )
     ), row))
-  ), /* @__PURE__ */ React$1.createElement(
+  ), /* @__PURE__ */ React.createElement(
     Divider,
     {
       orientation: "vertical",
@@ -14243,7 +14245,7 @@ const { Option: ChakraOption } = chakraComponents;
 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(
       Flex,
       {
         mr: 3,
@@ -14252,8 +14254,8 @@ const getCustomComponents = () => ({
         justifyContent: "center",
         alignItems: "center"
       },
-      /* @__PURE__ */ React$1.createElement(Icon, { as: PlusSolid, color: "brand" })
-    ), !props.data.isCreation && /* @__PURE__ */ React$1.createElement(Box, { mr: 3, width: 1.5 }), /* @__PURE__ */ React$1.createElement(
+      /* @__PURE__ */ React.createElement(Icon, { as: PlusSolid, color: "brand" })
+    ), !props.data.isCreation && /* @__PURE__ */ React.createElement(Box, { mr: 3, width: 1.5 }), /* @__PURE__ */ React.createElement(
       Text,
       {
         color: props.data.isCreation ? "text.brand" : "text.default",
@@ -14385,7 +14387,7 @@ const CreatableSelectDropdown = (_a) => {
   );
   const customOptions = [
     __spreadProps$1(__spreadValues$2({}, creationOption), {
-      icon: /* @__PURE__ */ React$1.createElement(Icon$2, { as: PlusSolid, color: "brand" })
+      icon: /* @__PURE__ */ React.createElement(Icon$2, { as: PlusSolid, color: "brand" })
     }),
     ...combinedOptions
   ];
@@ -14396,14 +14398,14 @@ const CreatableSelectDropdown = (_a) => {
       setSelectedOption(newSelectedOption);
     }
   }, [value, combinedOptions]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Box,
     {
       ref,
       w: "full",
       borderRadius: "none"
     },
-    createNewOption && /* @__PURE__ */ React$1.createElement(
+    createNewOption && /* @__PURE__ */ React.createElement(
       EditableText,
       {
         value: addFieldInputValue,
@@ -14427,7 +14429,7 @@ const CreatableSelectDropdown = (_a) => {
         }
       }
     ),
-    !createNewOption && /* @__PURE__ */ React$1.createElement(
+    !createNewOption && /* @__PURE__ */ React.createElement(
       CreatableSelect,
       __spreadValues$2({
         menuPlacement,
@@ -14579,7 +14581,7 @@ const ComboPicker = (_a) => {
       onChange == null ? void 0 : onChange(getNewValue(option, input));
     }
   }, [inputValue, defaultToZeroIfEmpty]);
-  return /* @__PURE__ */ React$1.createElement(InputGroup, null, /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(InputGroup, null, /* @__PURE__ */ React.createElement(
     FormattedNumberInput,
     __spreadValues$1({
       width: "100%",
@@ -14594,7 +14596,7 @@ const ComboPicker = (_a) => {
       min,
       max
     }, rest)
-  ), /* @__PURE__ */ React$1.createElement(
+  ), /* @__PURE__ */ React.createElement(
     InputRightElement,
     {
       width: "auto",
@@ -14602,7 +14604,7 @@ const ComboPicker = (_a) => {
       justifyContent: "flex-end",
       padding: 2
     },
-    /* @__PURE__ */ React$1.createElement(
+    /* @__PURE__ */ React.createElement(
       Button$2,
       {
         ref: buttonRef,
@@ -14613,7 +14615,7 @@ const ComboPicker = (_a) => {
       },
       (_a2 = selectOption == null ? void 0 : selectOption.label) != null ? _a2 : ""
     )
-  ), /* @__PURE__ */ React$1.createElement(Box, { position: "absolute", width: "100%" }, /* @__PURE__ */ React$1.createElement(
+  ), /* @__PURE__ */ React.createElement(Box, { position: "absolute", width: "100%" }, /* @__PURE__ */ React.createElement(
     Select,
     {
       ref: selectRef,
@@ -14686,7 +14688,7 @@ const ComboPickerField = (_a) => {
     "validate",
     "onChange"
   ]);
-  return /* @__PURE__ */ React$1.createElement(
+  return /* @__PURE__ */ React.createElement(
     Field,
     {
       name,
@@ -14695,7 +14697,7 @@ const ComboPickerField = (_a) => {
       isRequired,
       validate
     },
-    ({ value, onChange }) => /* @__PURE__ */ React$1.createElement(
+    ({ value, onChange }) => /* @__PURE__ */ React.createElement(
       ComboPicker,
       __spreadValues({
         "data-testid": "combo-picker-test-id",