@northlight/ui 2.43.0 → 2.43.2

package/dist/es/northlight.js

@@ -1,4 +1,4 @@
-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, Flex, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, 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, 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 as Progress$1, 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, Tab as Tab$1, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, AlertTitle, AlertDescription, TabList, useClipboard, Grid, GridItem, theme as theme$1 } from '@chakra-ui/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, Flex, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, 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, useOutsideClick, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Spacer, 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 as Progress$1, 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, Tab as Tab$1, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, AlertTitle, AlertDescription, 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, 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';
@@ -23,10 +23,10 @@ import { useCheckboxGroupState } from '@react-stately/checkbox';
 import { useDateSegment, useDateField, useDatePicker, useDateRangePicker } from '@react-aria/datepicker';
 import { useDateFieldState, useDatePickerState, useDateRangePickerState } from '@react-stately/datepicker';
 import { createCalendar, today, isSameMonth, getWeeksInMonth, GregorianCalendar, parseDate, startOfWeek, endOfWeek, startOfMonth, endOfMonth, startOfYear, endOfYear } from '@internationalized/date';
-import { useButton } from '@react-aria/button';
 import { useDateFormatter, useLocale, I18nProvider } from '@react-aria/i18n';
 import { useCalendarState } from '@react-stately/calendar';
 import { useCalendarCell, useCalendarGrid, useCalendar } from '@react-aria/calendar';
+import { useButton } from '@react-aria/button';
 import { Link as Link$2 } from 'react-router-dom';
 import { useClickable } from '@chakra-ui/clickable';
 import { motion, useMotionValue, animate } from 'framer-motion';
@@ -46,24 +46,6 @@ import { NumericFormat, numericFormatter } from 'react-number-format';
 import InputMask from 'react-input-mask';
 import { uniqBy } from 'yafu';
 
-var __defProp$2x = Object.defineProperty;
-var __getOwnPropSymbols$2x = Object.getOwnPropertySymbols;
-var __hasOwnProp$2x = Object.prototype.hasOwnProperty;
-var __propIsEnum$2x = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2x = (obj, key, value) => key in obj ? __defProp$2x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2x = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2x.call(b, prop))
-      __defNormalProp$2x(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2x)
-    for (var prop of __getOwnPropSymbols$2x(b)) {
-      if (__propIsEnum$2x.call(b, prop))
-        __defNormalProp$2x(a, prop, b[prop]);
-    }
-  return a;
-};
-const Accordion = (props) => /* @__PURE__ */ React.createElement(Accordion$1, __spreadValues$2x({}, props));
-
 var __defProp$2w = Object.defineProperty;
 var __getOwnPropSymbols$2w = Object.getOwnPropertySymbols;
 var __hasOwnProp$2w = Object.prototype.hasOwnProperty;
@@ -80,7 +62,7 @@ var __spreadValues$2w = (a, b) => {
     }
   return a;
 };
-const AccordionButton = (props) => /* @__PURE__ */ React.createElement(AccordionButton$1, __spreadValues$2w({}, props));
+const Accordion = (props) => /* @__PURE__ */ React.createElement(Accordion$1, __spreadValues$2w({}, props));
 
 var __defProp$2v = Object.defineProperty;
 var __getOwnPropSymbols$2v = Object.getOwnPropertySymbols;
@@ -98,7 +80,7 @@ var __spreadValues$2v = (a, b) => {
     }
   return a;
 };
-const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(AccordionPanel$1, __spreadValues$2v({}, props));
+const AccordionButton = (props) => /* @__PURE__ */ React.createElement(AccordionButton$1, __spreadValues$2v({}, props));
 
 var __defProp$2u = Object.defineProperty;
 var __getOwnPropSymbols$2u = Object.getOwnPropertySymbols;
@@ -116,7 +98,25 @@ var __spreadValues$2u = (a, b) => {
     }
   return a;
 };
-const AccordionItem = (props) => /* @__PURE__ */ React.createElement(AccordionItem$1, __spreadValues$2u({}, props));
+const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(AccordionPanel$1, __spreadValues$2u({}, props));
+
+var __defProp$2t = Object.defineProperty;
+var __getOwnPropSymbols$2t = Object.getOwnPropertySymbols;
+var __hasOwnProp$2t = Object.prototype.hasOwnProperty;
+var __propIsEnum$2t = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2t = (obj, key, value) => key in obj ? __defProp$2t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2t = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2t.call(b, prop))
+      __defNormalProp$2t(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2t)
+    for (var prop of __getOwnPropSymbols$2t(b)) {
+      if (__propIsEnum$2t.call(b, prop))
+        __defNormalProp$2t(a, prop, b[prop]);
+    }
+  return a;
+};
+const AccordionItem = (props) => /* @__PURE__ */ React.createElement(AccordionItem$1, __spreadValues$2t({}, props));
 
 const useDebounce = (value, delay) => {
   const [debouncedValue, setDebouncedValue] = useState(value);
@@ -461,24 +461,6 @@ function getFieldError(name, errors) {
   return fieldError;
 }
 
-var __defProp$2t = Object.defineProperty;
-var __getOwnPropSymbols$2t = Object.getOwnPropertySymbols;
-var __hasOwnProp$2t = Object.prototype.hasOwnProperty;
-var __propIsEnum$2t = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2t = (obj, key, value) => key in obj ? __defProp$2t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2t = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2t.call(b, prop))
-      __defNormalProp$2t(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2t)
-    for (var prop of __getOwnPropSymbols$2t(b)) {
-      if (__propIsEnum$2t.call(b, prop))
-        __defNormalProp$2t(a, prop, b[prop]);
-    }
-  return a;
-};
-const passPropsToChild = (child, styles) => isValidElement(child) ? cloneElement(child, __spreadValues$2t({}, styles)) : child;
-
 var __defProp$2s = Object.defineProperty;
 var __getOwnPropSymbols$2s = Object.getOwnPropertySymbols;
 var __hasOwnProp$2s = Object.prototype.hasOwnProperty;
@@ -495,9 +477,27 @@ var __spreadValues$2s = (a, b) => {
     }
   return a;
 };
+const passPropsToChild = (child, styles) => isValidElement(child) ? cloneElement(child, __spreadValues$2s({}, styles)) : child;
+
+var __defProp$2r = Object.defineProperty;
+var __getOwnPropSymbols$2r = Object.getOwnPropertySymbols;
+var __hasOwnProp$2r = Object.prototype.hasOwnProperty;
+var __propIsEnum$2r = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2r = (obj, key, value) => key in obj ? __defProp$2r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2r = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2r.call(b, prop))
+      __defNormalProp$2r(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2r)
+    for (var prop of __getOwnPropSymbols$2r(b)) {
+      if (__propIsEnum$2r.call(b, prop))
+        __defNormalProp$2r(a, prop, b[prop]);
+    }
+  return a;
+};
 const getChildrenWithProps = (children, styles, predicate = T) => {
   const childrenAsArr = Children.toArray(children);
-  const childrenWithoutFocus = childrenAsArr.map((child, i) => predicate(child, i) ? passPropsToChild(child, __spreadValues$2s({}, styles)) : child);
+  const childrenWithoutFocus = childrenAsArr.map((child, i) => predicate(child, i) ? passPropsToChild(child, __spreadValues$2r({}, styles)) : child);
   return childrenWithoutFocus;
 };
 
@@ -571,80 +571,80 @@ const useResizeWidth = ({
   };
 };
 
-var __defProp$2r = Object.defineProperty;
-var __defProps$A = Object.defineProperties;
-var __getOwnPropDescs$A = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2r = Object.getOwnPropertySymbols;
-var __hasOwnProp$2r = Object.prototype.hasOwnProperty;
-var __propIsEnum$2r = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2r = (obj, key, value) => key in obj ? __defProp$2r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2r = (a, b) => {
+var __defProp$2q = Object.defineProperty;
+var __defProps$z = Object.defineProperties;
+var __getOwnPropDescs$z = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2q = Object.getOwnPropertySymbols;
+var __hasOwnProp$2q = Object.prototype.hasOwnProperty;
+var __propIsEnum$2q = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2q = (obj, key, value) => key in obj ? __defProp$2q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2q = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2r.call(b, prop))
-      __defNormalProp$2r(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2r)
-    for (var prop of __getOwnPropSymbols$2r(b)) {
-      if (__propIsEnum$2r.call(b, prop))
-        __defNormalProp$2r(a, prop, b[prop]);
+    if (__hasOwnProp$2q.call(b, prop))
+      __defNormalProp$2q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2q)
+    for (var prop of __getOwnPropSymbols$2q(b)) {
+      if (__propIsEnum$2q.call(b, prop))
+        __defNormalProp$2q(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$A = (a, b) => __defProps$A(a, __getOwnPropDescs$A(b));
+var __spreadProps$z = (a, b) => __defProps$z(a, __getOwnPropDescs$z(b));
 const customSelectStyles = {
-  container: (provided) => __spreadProps$A(__spreadValues$2r({}, provided), {
+  container: (provided) => __spreadProps$z(__spreadValues$2q({}, provided), {
     width: "100%",
     color: "text.default"
   }),
-  option: (provided, state) => __spreadProps$A(__spreadValues$2r({}, provided), {
+  option: (provided, state) => __spreadProps$z(__spreadValues$2q({}, provided), {
     background: state.isFocused && "background.select.option-focus",
     overflowWrap: "anywhere",
     _active: {
       background: "background.select.option-active"
     }
   }),
-  valueContainer: (provided) => __spreadProps$A(__spreadValues$2r({}, provided), {
+  valueContainer: (provided) => __spreadProps$z(__spreadValues$2q({}, provided), {
     paddingInlineStart: "padding-inline.select.default"
   }),
-  downChevron: (provided) => __spreadProps$A(__spreadValues$2r({}, provided), {
+  downChevron: (provided) => __spreadProps$z(__spreadValues$2q({}, provided), {
     color: "icon.select.default"
   }),
-  placeholder: (provided) => __spreadProps$A(__spreadValues$2r({}, provided), {
+  placeholder: (provided) => __spreadProps$z(__spreadValues$2q({}, provided), {
     color: "text.select.placeholder"
   }),
   multiValue: (provided, state) => {
     var _a;
     const background = state.data.isFixed ? "background.select.option-disabled" : (_a = state.data.color) != null ? _a : provided.bgColor;
-    return __spreadProps$A(__spreadValues$2r({}, provided), {
+    return __spreadProps$z(__spreadValues$2q({}, provided), {
       bgColor: background,
       color: getContrastColor(background)
     });
   },
-  menuList: (provided) => __spreadProps$A(__spreadValues$2r({}, provided), {
+  menuList: (provided) => __spreadProps$z(__spreadValues$2q({}, provided), {
     bgColor: "background.default"
   })
 };
 
-var __defProp$2q = Object.defineProperty;
-var __defProps$z = Object.defineProperties;
-var __getOwnPropDescs$z = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2q = Object.getOwnPropertySymbols;
-var __hasOwnProp$2q = Object.prototype.hasOwnProperty;
-var __propIsEnum$2q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2q = (obj, key, value) => key in obj ? __defProp$2q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2q = (a, b) => {
+var __defProp$2p = Object.defineProperty;
+var __defProps$y = Object.defineProperties;
+var __getOwnPropDescs$y = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2p = Object.getOwnPropertySymbols;
+var __hasOwnProp$2p = Object.prototype.hasOwnProperty;
+var __propIsEnum$2p = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2p = (obj, key, value) => key in obj ? __defProp$2p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2p = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2q.call(b, prop))
-      __defNormalProp$2q(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2q)
-    for (var prop of __getOwnPropSymbols$2q(b)) {
-      if (__propIsEnum$2q.call(b, prop))
-        __defNormalProp$2q(a, prop, b[prop]);
+    if (__hasOwnProp$2p.call(b, prop))
+      __defNormalProp$2p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2p)
+    for (var prop of __getOwnPropSymbols$2p(b)) {
+      if (__propIsEnum$2p.call(b, prop))
+        __defNormalProp$2p(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$z = (a, b) => __defProps$z(a, __getOwnPropDescs$z(b));
-const tagsInputStyles = (isFocused, borderColor) => __spreadProps$z(__spreadValues$2q({}, customSelectStyles), {
-  container: (provided) => __spreadProps$z(__spreadValues$2q({}, provided), {
+var __spreadProps$y = (a, b) => __defProps$y(a, __getOwnPropDescs$y(b));
+const tagsInputStyles = (isFocused, borderColor) => __spreadProps$y(__spreadValues$2p({}, customSelectStyles), {
+  container: (provided) => __spreadProps$y(__spreadValues$2p({}, provided), {
     w: "full",
     height: "100%",
     resize: "vertical",
@@ -657,12 +657,12 @@ const tagsInputStyles = (isFocused, borderColor) => __spreadProps$z(__spreadValu
     color: "text.default",
     boxShadow: isFocused ? `0 0 0 1px ${borderColor}` : "none"
   }),
-  control: (provided) => __spreadProps$z(__spreadValues$2q({}, provided), {
+  control: (provided) => __spreadProps$y(__spreadValues$2p({}, provided), {
     minHeight: "20",
     height: "100%",
     alignItems: "start"
   }),
-  valueContainer: (provided) => __spreadProps$z(__spreadValues$2q({}, provided), {
+  valueContainer: (provided) => __spreadProps$y(__spreadValues$2p({}, provided), {
     paddingInlineStart: "padding-inline.select.default",
     overflowY: "auto",
     maxH: "100%"
@@ -1591,58 +1591,99 @@ const Tabs$1 = {
 
 const Textarea$1 = {
   baseStyle: ({ theme: {
-    space: spacing,
-    colors: color,
-    borders: borderWidth,
-    radii: borderRadius
+    colors: color
   } }) => ({
-    paddingInlineStart: spacing["padding-inline"].textarea.default,
-    paddingInlineEnd: spacing["padding-inline"].textarea.default,
-    borderRadius: borderRadius.textarea.default,
-    borderWidth: borderWidth.textarea.default,
-    borderColor: color.border.textarea.default,
     color: color.text.default,
-    bgColor: color.background.textarea.default,
-    _hover: {
-      borderColor: color.border.textarea["default-hover"],
-      bgColor: color.background.textarea.hover
-    },
-    _focusVisible: {
-      borderColor: color.border.textarea.focus,
-      boxShadow: `0 0 0 1px ${color.border.textarea.focus}`,
-      bgColor: color.background.textarea.active
-    },
-    _invalid: {
-      boxShadow: "none",
-      borderColor: color.border.textarea.error,
-      bgColor: color.background.textarea.error
-    },
-    _readOnly: {
-      _focusVisible: {
-        borderColor: color.border.textarea.readonly,
-        bgColor: color.background.textarea.default
-      },
-      _hover: {
-        borderColor: color.border.textarea.readonly
-      }
-    },
-    _disabled: {
-      bgColor: color.background.textarea.disabled,
-      _hover: {
-        borderColor: color.border.textarea.default
-      }
-    },
     _placeholder: {
       color: color.text.textarea.placeholder
     }
   }),
   variants: {
-    outline: {},
-    ai: ({ theme: { colors: color } }) => ({
+    outline: ({ theme: {
+      space: spacing,
+      colors: color,
+      borders: borderWidth,
+      radii: borderRadius
+    } }) => ({
+      paddingInlineStart: spacing["padding-inline"].textarea.default,
+      paddingInlineEnd: spacing["padding-inline"].textarea.default,
+      borderRadius: borderRadius.textarea.default,
+      borderWidth: borderWidth.textarea.default,
+      borderColor: color.border.textarea.default,
+      bgColor: color.background.textarea.default,
+      _hover: {
+        borderColor: color.border.textarea["default-hover"],
+        bgColor: color.background.textarea.hover
+      },
+      _focusVisible: {
+        borderColor: color.border.textarea.focus,
+        boxShadow: `0 0 0 1px ${color.border.textarea.focus}`,
+        bgColor: color.background.textarea.active
+      },
+      _invalid: {
+        boxShadow: "none",
+        borderColor: color.border.textarea.error,
+        bgColor: color.background.textarea.error
+      },
+      _readOnly: {
+        _focusVisible: {
+          borderColor: color.border.textarea.readonly,
+          bgColor: color.background.textarea.default
+        },
+        _hover: {
+          borderColor: color.border.textarea.readonly
+        }
+      },
+      _disabled: {
+        bgColor: color.background.textarea.disabled,
+        _hover: {
+          borderColor: color.border.textarea.default
+        }
+      }
+    }),
+    ai: ({ theme: {
+      space: spacing,
+      colors: color,
+      borders: borderWidth,
+      radii: borderRadius
+    } }) => ({
+      paddingInlineStart: spacing["padding-inline"].textarea.default,
+      paddingInlineEnd: spacing["padding-inline"].textarea.default,
+      borderRadius: borderRadius.textarea.default,
+      borderWidth: borderWidth.textarea.default,
+      borderColor: color.border.textarea.default,
+      bgColor: color.background.textarea.default,
+      _hover: {
+        borderColor: color.border.textarea["default-hover"],
+        bgColor: color.background.textarea.hover
+      },
       _focusVisible: {
+        bgColor: color.background.textarea.active,
+        boxShadow: `inset 0 0 0 1px ${color.border.ai}`,
+        borderColor: color.border.ai,
+        _invalid: {
+          boxShadow: `inset 0 0 0 1px ${color.border.textarea.error}`,
+          bgColor: color.background.textarea.error,
+          borderColor: color.border.textarea.error
+        }
+      },
+      _invalid: {
+        bgColor: color.background.textarea.error,
+        borderColor: color.border.textarea.error
+      },
+      _readOnly: {
+        _focusVisible: {
+          borderColor: color.border.textarea.readonly,
+          bgColor: color.background.textarea.default
+        },
+        _hover: {
+          borderColor: color.border.textarea.readonly
+        }
+      },
+      _disabled: {
+        bgColor: color.background.textarea.disabled,
         _hover: {
-          boxShadow: `0 0 0 1px ${color.border.ai}`,
-          borderColor: color.border.ai
+          borderColor: color.border.textarea.default
         }
       }
     })
@@ -2027,19 +2068,19 @@ const NotificationIconButton$1 = {
   })
 };
 
-var __defProp$2p = Object.defineProperty;
-var __getOwnPropSymbols$2p = Object.getOwnPropertySymbols;
-var __hasOwnProp$2p = Object.prototype.hasOwnProperty;
-var __propIsEnum$2p = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2p = (obj, key, value) => key in obj ? __defProp$2p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2p = (a, b) => {
+var __defProp$2o = Object.defineProperty;
+var __getOwnPropSymbols$2o = Object.getOwnPropertySymbols;
+var __hasOwnProp$2o = Object.prototype.hasOwnProperty;
+var __propIsEnum$2o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2o = (obj, key, value) => key in obj ? __defProp$2o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2o = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2p.call(b, prop))
-      __defNormalProp$2p(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2p)
-    for (var prop of __getOwnPropSymbols$2p(b)) {
-      if (__propIsEnum$2p.call(b, prop))
-        __defNormalProp$2p(a, prop, b[prop]);
+    if (__hasOwnProp$2o.call(b, prop))
+      __defNormalProp$2o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2o)
+    for (var prop of __getOwnPropSymbols$2o(b)) {
+      if (__propIsEnum$2o.call(b, prop))
+        __defNormalProp$2o(a, prop, b[prop]);
     }
   return a;
 };
@@ -2064,7 +2105,7 @@ const Calendar$1 = {
       bgColor: "background.default",
       borderRadius: "input.outline"
     },
-    dateSelect: __spreadValues$2p({
+    dateSelect: __spreadValues$2o({
       fontWeight: "semibold",
       border: "none",
       padding: "1",
@@ -3413,19 +3454,19 @@ const Toolbox$1 = {
   }
 };
 
-var __defProp$2o = Object.defineProperty;
-var __getOwnPropSymbols$2o = Object.getOwnPropertySymbols;
-var __hasOwnProp$2o = Object.prototype.hasOwnProperty;
-var __propIsEnum$2o = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2o = (obj, key, value) => key in obj ? __defProp$2o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2o = (a, b) => {
+var __defProp$2n = Object.defineProperty;
+var __getOwnPropSymbols$2n = Object.getOwnPropertySymbols;
+var __hasOwnProp$2n = Object.prototype.hasOwnProperty;
+var __propIsEnum$2n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2n = (obj, key, value) => key in obj ? __defProp$2n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2o.call(b, prop))
-      __defNormalProp$2o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2o)
-    for (var prop of __getOwnPropSymbols$2o(b)) {
-      if (__propIsEnum$2o.call(b, prop))
-        __defNormalProp$2o(a, prop, b[prop]);
+    if (__hasOwnProp$2n.call(b, prop))
+      __defNormalProp$2n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2n)
+    for (var prop of __getOwnPropSymbols$2n(b)) {
+      if (__propIsEnum$2n.call(b, prop))
+        __defNormalProp$2n(a, prop, b[prop]);
     }
   return a;
 };
@@ -3481,7 +3522,7 @@ const getAiColorStyles = (isInvalid, isImage = true) => ({
 const FilePicker$1 = {
   parts: ["filePicker", "fileItem", "multiFilePicker"],
   baseStyle: ({ theme: { sizes, colors }, hasLoaded, isImage, isInvalid, currentTheme, sx }) => ({
-    filePicker: merge(__spreadValues$2o(__spreadValues$2o({
+    filePicker: merge(__spreadValues$2n(__spreadValues$2n({
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -3494,7 +3535,7 @@ const FilePicker$1 = {
       borderStyle: "dashed",
       borderRadius: "lg"
     }, getInvalidColorStyles(isInvalid, isImage, currentTheme)), thickRing), sx),
-    multiFilePicker: __spreadValues$2o(__spreadValues$2o({
+    multiFilePicker: __spreadValues$2n(__spreadValues$2n({
       width: "full",
       maxWidth: "inherit",
       height: "32",
@@ -3519,8 +3560,8 @@ const FilePicker$1 = {
   }),
   variants: {
     ai: ({ isInvalid }) => ({
-      filePicker: __spreadValues$2o({}, getAiColorStyles(isInvalid)),
-      multiFilePicker: __spreadValues$2o({}, getAiColorStyles(isInvalid))
+      filePicker: __spreadValues$2n({}, getAiColorStyles(isInvalid)),
+      multiFilePicker: __spreadValues$2n({}, getAiColorStyles(isInvalid))
     })
   }
 };
@@ -3786,47 +3827,14 @@ var components = /*#__PURE__*/Object.freeze({
   Tooltip: Tooltip$1
 });
 
-var __defProp$2n = Object.defineProperty;
-var __defProps$y = Object.defineProperties;
-var __getOwnPropDescs$y = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2n = Object.getOwnPropertySymbols;
-var __hasOwnProp$2n = Object.prototype.hasOwnProperty;
-var __propIsEnum$2n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2n = (obj, key, value) => key in obj ? __defProp$2n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2n = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2n.call(b, prop))
-      __defNormalProp$2n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2n)
-    for (var prop of __getOwnPropSymbols$2n(b)) {
-      if (__propIsEnum$2n.call(b, prop))
-        __defNormalProp$2n(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$y = (a, b) => __defProps$y(a, __getOwnPropDescs$y(b));
-const WebappSkin = {
-  colors: __spreadProps$y(__spreadValues$2n(__spreadValues$2n({}, WebappSystemTokensSet.st.color), WebappComponentsTokensSet.color), {
-    text: __spreadValues$2n(__spreadValues$2n({}, WebappSystemTokensSet.st.color.text), WebappComponentsTokensSet.color.text),
-    border: __spreadValues$2n(__spreadValues$2n({}, WebappSystemTokensSet.st.color.border), WebappComponentsTokensSet.color.border)
-  }),
-  sizes: WebappComponentsTokensSet.sizing,
-  space: WebappComponentsTokensSet.spacing,
-  radii: __spreadValues$2n(__spreadValues$2n({}, WebappSystemTokensSet.st.borderRadius), WebappComponentsTokensSet.borderRadius),
-  borders: __spreadValues$2n(__spreadValues$2n({}, WebappSystemTokensSet.st.borderWidth), WebappComponentsTokensSet.borderWidth),
-  opacity: WebappComponentsTokensSet.opacity,
-  typography,
-  shadows: __spreadValues$2n({}, WebappSystemTokensSet.st.boxShadow)
-};
-
-var __defProp$2m = Object.defineProperty;
-var __defProps$x = Object.defineProperties;
-var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2m = Object.getOwnPropertySymbols;
-var __hasOwnProp$2m = Object.prototype.hasOwnProperty;
-var __propIsEnum$2m = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2m = (obj, key, value) => key in obj ? __defProp$2m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2m = (a, b) => {
+var __defProp$2m = Object.defineProperty;
+var __defProps$x = Object.defineProperties;
+var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2m = Object.getOwnPropertySymbols;
+var __hasOwnProp$2m = Object.prototype.hasOwnProperty;
+var __propIsEnum$2m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2m = (obj, key, value) => key in obj ? __defProp$2m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2m = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp$2m.call(b, prop))
       __defNormalProp$2m(a, prop, b[prop]);
@@ -3838,17 +3846,18 @@ var __spreadValues$2m = (a, b) => {
   return a;
 };
 var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
-const TottSkin = {
-  colors: __spreadProps$x(__spreadValues$2m(__spreadValues$2m({}, TottSystemTokensSet.st.color), TottComponentsTokensSet.color), {
-    border: __spreadValues$2m(__spreadValues$2m({}, TottSystemTokensSet.st.color.border), TottComponentsTokensSet.color.border)
+const WebappSkin = {
+  colors: __spreadProps$x(__spreadValues$2m(__spreadValues$2m({}, WebappSystemTokensSet.st.color), WebappComponentsTokensSet.color), {
+    text: __spreadValues$2m(__spreadValues$2m({}, WebappSystemTokensSet.st.color.text), WebappComponentsTokensSet.color.text),
+    border: __spreadValues$2m(__spreadValues$2m({}, WebappSystemTokensSet.st.color.border), WebappComponentsTokensSet.color.border)
   }),
-  sizes: TottComponentsTokensSet.sizing,
-  space: TottComponentsTokensSet.spacing,
-  radii: __spreadValues$2m(__spreadValues$2m({}, TottSystemTokensSet.st.borderRadius), TottComponentsTokensSet.borderRadius),
-  borders: __spreadValues$2m(__spreadValues$2m({}, TottSystemTokensSet.st.borderWidth), TottComponentsTokensSet.borderWidth),
-  opacity: TottComponentsTokensSet.opacity,
+  sizes: WebappComponentsTokensSet.sizing,
+  space: WebappComponentsTokensSet.spacing,
+  radii: __spreadValues$2m(__spreadValues$2m({}, WebappSystemTokensSet.st.borderRadius), WebappComponentsTokensSet.borderRadius),
+  borders: __spreadValues$2m(__spreadValues$2m({}, WebappSystemTokensSet.st.borderWidth), WebappComponentsTokensSet.borderWidth),
+  opacity: WebappComponentsTokensSet.opacity,
   typography,
-  shadows: __spreadValues$2m({}, TottSystemTokensSet.st.boxShadow)
+  shadows: __spreadValues$2m({}, WebappSystemTokensSet.st.boxShadow)
 };
 
 var __defProp$2l = Object.defineProperty;
@@ -3870,21 +3879,22 @@ var __spreadValues$2l = (a, b) => {
   return a;
 };
 var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
-const CamphouseLightSkin = {
-  colors: __spreadProps$w(__spreadValues$2l(__spreadValues$2l({}, CamphouseLightSystemTokensSet.st.color), CamphouseLightComponentsTokensSet.color), {
-    text: __spreadValues$2l(__spreadValues$2l({}, CamphouseLightSystemTokensSet.st.color.text), CamphouseLightComponentsTokensSet.color.text),
-    border: __spreadValues$2l(__spreadValues$2l({}, CamphouseLightSystemTokensSet.st.color.border), CamphouseLightComponentsTokensSet.color.border)
+const TottSkin = {
+  colors: __spreadProps$w(__spreadValues$2l(__spreadValues$2l({}, TottSystemTokensSet.st.color), TottComponentsTokensSet.color), {
+    border: __spreadValues$2l(__spreadValues$2l({}, TottSystemTokensSet.st.color.border), TottComponentsTokensSet.color.border)
   }),
-  sizes: CamphouseLightComponentsTokensSet.sizing,
-  space: CamphouseLightComponentsTokensSet.spacing,
-  radii: __spreadValues$2l(__spreadValues$2l({}, CamphouseLightSystemTokensSet.st.borderRadius), CamphouseLightComponentsTokensSet.borderRadius),
-  borders: __spreadValues$2l(__spreadValues$2l({}, CamphouseLightSystemTokensSet.st.borderWidth), CamphouseLightComponentsTokensSet.borderWidth),
-  opacity: CamphouseLightComponentsTokensSet.opacity,
+  sizes: TottComponentsTokensSet.sizing,
+  space: TottComponentsTokensSet.spacing,
+  radii: __spreadValues$2l(__spreadValues$2l({}, TottSystemTokensSet.st.borderRadius), TottComponentsTokensSet.borderRadius),
+  borders: __spreadValues$2l(__spreadValues$2l({}, TottSystemTokensSet.st.borderWidth), TottComponentsTokensSet.borderWidth),
+  opacity: TottComponentsTokensSet.opacity,
   typography,
-  shadows: __spreadValues$2l({}, CamphouseLightSystemTokensSet.st.boxShadow)
+  shadows: __spreadValues$2l({}, TottSystemTokensSet.st.boxShadow)
 };
 
 var __defProp$2k = Object.defineProperty;
+var __defProps$v = Object.defineProperties;
+var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$2k = Object.getOwnPropertySymbols;
 var __hasOwnProp$2k = Object.prototype.hasOwnProperty;
 var __propIsEnum$2k = Object.prototype.propertyIsEnumerable;
@@ -3900,6 +3910,37 @@ var __spreadValues$2k = (a, b) => {
     }
   return a;
 };
+var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
+const CamphouseLightSkin = {
+  colors: __spreadProps$v(__spreadValues$2k(__spreadValues$2k({}, CamphouseLightSystemTokensSet.st.color), CamphouseLightComponentsTokensSet.color), {
+    text: __spreadValues$2k(__spreadValues$2k({}, CamphouseLightSystemTokensSet.st.color.text), CamphouseLightComponentsTokensSet.color.text),
+    border: __spreadValues$2k(__spreadValues$2k({}, CamphouseLightSystemTokensSet.st.color.border), CamphouseLightComponentsTokensSet.color.border)
+  }),
+  sizes: CamphouseLightComponentsTokensSet.sizing,
+  space: CamphouseLightComponentsTokensSet.spacing,
+  radii: __spreadValues$2k(__spreadValues$2k({}, CamphouseLightSystemTokensSet.st.borderRadius), CamphouseLightComponentsTokensSet.borderRadius),
+  borders: __spreadValues$2k(__spreadValues$2k({}, CamphouseLightSystemTokensSet.st.borderWidth), CamphouseLightComponentsTokensSet.borderWidth),
+  opacity: CamphouseLightComponentsTokensSet.opacity,
+  typography,
+  shadows: __spreadValues$2k({}, CamphouseLightSystemTokensSet.st.boxShadow)
+};
+
+var __defProp$2j = Object.defineProperty;
+var __getOwnPropSymbols$2j = Object.getOwnPropertySymbols;
+var __hasOwnProp$2j = Object.prototype.hasOwnProperty;
+var __propIsEnum$2j = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2j = (obj, key, value) => key in obj ? __defProp$2j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2j = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2j.call(b, prop))
+      __defNormalProp$2j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2j)
+    for (var prop of __getOwnPropSymbols$2j(b)) {
+      if (__propIsEnum$2j.call(b, prop))
+        __defNormalProp$2j(a, prop, b[prop]);
+    }
+  return a;
+};
 const overrides = {
   config: {
     cssVarPrefix: ""
@@ -3913,7 +3954,7 @@ const overrides = {
     }
   },
   styles: {
-    global: __spreadValues$2k({
+    global: __spreadValues$2j({
       html: {
         scrollBehavior: "smooth"
       },
@@ -3929,7 +3970,7 @@ const overrides = {
     heading: "Inter, sans-serif",
     body: "Inter, sans-serif"
   },
-  components: __spreadValues$2k({}, components),
+  components: __spreadValues$2j({}, components),
   colors: palette,
   zIndices: coreZIndex,
   sizes: coreSizing,
@@ -3945,33 +3986,33 @@ const theme = extendTheme(overrides, WebappSkin);
 const tottTheme = extendTheme(overrides, TottSkin);
 const camphouseLightTheme = extendTheme(overrides, CamphouseLightSkin);
 
-var __defProp$2j = Object.defineProperty;
-var __defProps$v = Object.defineProperties;
-var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2j = Object.getOwnPropertySymbols;
-var __hasOwnProp$2j = Object.prototype.hasOwnProperty;
-var __propIsEnum$2j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2j = (obj, key, value) => key in obj ? __defProp$2j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2j = (a, b) => {
+var __defProp$2i = Object.defineProperty;
+var __defProps$u = Object.defineProperties;
+var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2i = Object.getOwnPropertySymbols;
+var __hasOwnProp$2i = Object.prototype.hasOwnProperty;
+var __propIsEnum$2i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2i = (obj, key, value) => key in obj ? __defProp$2i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2i = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2j.call(b, prop))
-      __defNormalProp$2j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2j)
-    for (var prop of __getOwnPropSymbols$2j(b)) {
-      if (__propIsEnum$2j.call(b, prop))
-        __defNormalProp$2j(a, prop, b[prop]);
+    if (__hasOwnProp$2i.call(b, prop))
+      __defNormalProp$2i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2i)
+    for (var prop of __getOwnPropSymbols$2i(b)) {
+      if (__propIsEnum$2i.call(b, prop))
+        __defNormalProp$2i(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
-var __objRest$1V = (source, exclude) => {
+var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
+var __objRest$1X = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$2j.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$2i.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2j)
-    for (var prop of __getOwnPropSymbols$2j(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2j.call(source, prop))
+  if (source != null && __getOwnPropSymbols$2i)
+    for (var prop of __getOwnPropSymbols$2i(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2i.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -3985,7 +4026,7 @@ function TagsInput(_a) {
     "data-testid": testId,
     value = [],
     onError
-  } = _b, rest = __objRest$1V(_b, [
+  } = _b, rest = __objRest$1X(_b, [
     "options",
     "onChange",
     "isLoading",
@@ -4045,7 +4086,7 @@ function TagsInput(_a) {
   };
   return /* @__PURE__ */ React.createElement(Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
     CustomSelect,
-    __spreadValues$2j(__spreadProps$v(__spreadValues$2j({
+    __spreadValues$2i(__spreadProps$u(__spreadValues$2i({
       isMulti: true,
       menuPortalTarget: document.body,
       placeholder: "Type something and press Enter or comma...",
@@ -4073,36 +4114,36 @@ function TagsInput(_a) {
       components: {
         DropdownIndicator: () => null
       },
-      styles: { menuPortal: (base) => __spreadProps$v(__spreadValues$2j({}, base), { zIndex: theme.zIndices.popover }) },
+      styles: { menuPortal: (base) => __spreadProps$u(__spreadValues$2i({}, base), { zIndex: theme.zIndices.popover }) },
       formatCreateLabel: (textInputValue) => `Add tag "${textInputValue}"`
     }), rest)
   ));
 }
 
-var __defProp$2i = Object.defineProperty;
-var __getOwnPropSymbols$2i = Object.getOwnPropertySymbols;
-var __hasOwnProp$2i = Object.prototype.hasOwnProperty;
-var __propIsEnum$2i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2i = (obj, key, value) => key in obj ? __defProp$2i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2i = (a, b) => {
+var __defProp$2h = Object.defineProperty;
+var __getOwnPropSymbols$2h = Object.getOwnPropertySymbols;
+var __hasOwnProp$2h = Object.prototype.hasOwnProperty;
+var __propIsEnum$2h = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2h = (obj, key, value) => key in obj ? __defProp$2h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2h = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2i.call(b, prop))
-      __defNormalProp$2i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2i)
-    for (var prop of __getOwnPropSymbols$2i(b)) {
-      if (__propIsEnum$2i.call(b, prop))
-        __defNormalProp$2i(a, prop, b[prop]);
+    if (__hasOwnProp$2h.call(b, prop))
+      __defNormalProp$2h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2h)
+    for (var prop of __getOwnPropSymbols$2h(b)) {
+      if (__propIsEnum$2h.call(b, prop))
+        __defNormalProp$2h(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1U = (source, exclude) => {
+var __objRest$1W = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$2i.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$2h.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2i)
-    for (var prop of __getOwnPropSymbols$2i(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2i.call(source, prop))
+  if (source != null && __getOwnPropSymbols$2h)
+    for (var prop of __getOwnPropSymbols$2h(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2h.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -4112,7 +4153,7 @@ const OrganizationLogo = (_a) => {
     name,
     image,
     variant = "square"
-  } = _b, rest = __objRest$1U(_b, [
+  } = _b, rest = __objRest$1W(_b, [
     "name",
     "image",
     "variant"
@@ -4121,10 +4162,10 @@ const OrganizationLogo = (_a) => {
   const {
     container,
     text
-  } = useMultiStyleConfig("Avatar", __spreadValues$2i({ variant, image }, rest));
+  } = useMultiStyleConfig("Avatar", __spreadValues$2h({ variant, image }, rest));
   return /* @__PURE__ */ React.createElement(
     chakra.div,
-    __spreadValues$2i({
+    __spreadValues$2h({
       __css: container,
       "data-testid": "organization-logo-test-id"
     }, rest),
@@ -4138,30 +4179,30 @@ const OrganizationLogo = (_a) => {
   );
 };
 
-var __defProp$2h = Object.defineProperty;
-var __getOwnPropSymbols$2h = Object.getOwnPropertySymbols;
-var __hasOwnProp$2h = Object.prototype.hasOwnProperty;
-var __propIsEnum$2h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2h = (obj, key, value) => key in obj ? __defProp$2h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2h = (a, b) => {
+var __defProp$2g = Object.defineProperty;
+var __getOwnPropSymbols$2g = Object.getOwnPropertySymbols;
+var __hasOwnProp$2g = Object.prototype.hasOwnProperty;
+var __propIsEnum$2g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2g = (obj, key, value) => key in obj ? __defProp$2g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2g = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2h.call(b, prop))
-      __defNormalProp$2h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2h)
-    for (var prop of __getOwnPropSymbols$2h(b)) {
-      if (__propIsEnum$2h.call(b, prop))
-        __defNormalProp$2h(a, prop, b[prop]);
+    if (__hasOwnProp$2g.call(b, prop))
+      __defNormalProp$2g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2g)
+    for (var prop of __getOwnPropSymbols$2g(b)) {
+      if (__propIsEnum$2g.call(b, prop))
+        __defNormalProp$2g(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1T = (source, exclude) => {
+var __objRest$1V = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$2h.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$2g.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2h)
-    for (var prop of __getOwnPropSymbols$2h(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2h.call(source, prop))
+  if (source != null && __getOwnPropSymbols$2g)
+    for (var prop of __getOwnPropSymbols$2g(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2g.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -4170,30 +4211,12 @@ const Alert = (_a) => {
   var _b = _a, {
     variant = "success",
     children
-  } = _b, rest = __objRest$1T(_b, [
+  } = _b, rest = __objRest$1V(_b, [
     "variant",
     "children"
   ]);
-  return /* @__PURE__ */ React.createElement(Alert$2, __spreadValues$2h({ variant }, rest), children);
-};
-
-var __defProp$2g = Object.defineProperty;
-var __getOwnPropSymbols$2g = Object.getOwnPropertySymbols;
-var __hasOwnProp$2g = Object.prototype.hasOwnProperty;
-var __propIsEnum$2g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2g = (obj, key, value) => key in obj ? __defProp$2g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2g = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2g.call(b, prop))
-      __defNormalProp$2g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2g)
-    for (var prop of __getOwnPropSymbols$2g(b)) {
-      if (__propIsEnum$2g.call(b, prop))
-        __defNormalProp$2g(a, prop, b[prop]);
-    }
-  return a;
+  return /* @__PURE__ */ React.createElement(Alert$2, __spreadValues$2g({ variant }, rest), children);
 };
-const AspectRatio = (props) => /* @__PURE__ */ React.createElement(AspectRatio$1, __spreadValues$2g({}, props));
 
 var __defProp$2f = Object.defineProperty;
 var __getOwnPropSymbols$2f = Object.getOwnPropertySymbols;
@@ -4211,14 +4234,32 @@ var __spreadValues$2f = (a, b) => {
     }
   return a;
 };
-var __objRest$1S = (source, exclude) => {
+const AspectRatio = (props) => /* @__PURE__ */ React.createElement(AspectRatio$1, __spreadValues$2f({}, props));
+
+var __defProp$2e = Object.defineProperty;
+var __getOwnPropSymbols$2e = Object.getOwnPropertySymbols;
+var __hasOwnProp$2e = Object.prototype.hasOwnProperty;
+var __propIsEnum$2e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2e = (obj, key, value) => key in obj ? __defProp$2e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2e = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2e.call(b, prop))
+      __defNormalProp$2e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2e)
+    for (var prop of __getOwnPropSymbols$2e(b)) {
+      if (__propIsEnum$2e.call(b, prop))
+        __defNormalProp$2e(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest$1U = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$2f.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$2e.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2f)
-    for (var prop of __getOwnPropSymbols$2f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2f.call(source, prop))
+  if (source != null && __getOwnPropSymbols$2e)
+    for (var prop of __getOwnPropSymbols$2e(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2e.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -4229,7 +4270,7 @@ const Icon = forwardRef((_a, ref) => {
     size,
     color,
     boxSize
-  } = _b, rest = __objRest$1S(_b, [
+  } = _b, rest = __objRest$1U(_b, [
     "as",
     "size",
     "color",
@@ -4239,7 +4280,7 @@ const Icon = forwardRef((_a, ref) => {
   const styles = useStyleConfig("Icon", { size, color, boxSize });
   return /* @__PURE__ */ React.createElement(
     Icon$2,
-    __spreadValues$2f({
+    __spreadValues$2e({
       ref,
       sx: styles
     }, rest),
@@ -4254,30 +4295,30 @@ const AvatarBadge = ({
   return /* @__PURE__ */ React.createElement(chakra.span, { sx: badge }, notificationCount > 999 ? "999+" : notificationCount);
 };
 
-var __defProp$2e = Object.defineProperty;
-var __getOwnPropSymbols$2e = Object.getOwnPropertySymbols;
-var __hasOwnProp$2e = Object.prototype.hasOwnProperty;
-var __propIsEnum$2e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2e = (obj, key, value) => key in obj ? __defProp$2e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2e = (a, b) => {
+var __defProp$2d = Object.defineProperty;
+var __getOwnPropSymbols$2d = Object.getOwnPropertySymbols;
+var __hasOwnProp$2d = Object.prototype.hasOwnProperty;
+var __propIsEnum$2d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2d = (obj, key, value) => key in obj ? __defProp$2d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2e.call(b, prop))
-      __defNormalProp$2e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2e)
-    for (var prop of __getOwnPropSymbols$2e(b)) {
-      if (__propIsEnum$2e.call(b, prop))
-        __defNormalProp$2e(a, prop, b[prop]);
+    if (__hasOwnProp$2d.call(b, prop))
+      __defNormalProp$2d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2d)
+    for (var prop of __getOwnPropSymbols$2d(b)) {
+      if (__propIsEnum$2d.call(b, prop))
+        __defNormalProp$2d(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1R = (source, exclude) => {
+var __objRest$1T = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$2e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$2d.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2e)
-    for (var prop of __getOwnPropSymbols$2e(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2e.call(source, prop))
+  if (source != null && __getOwnPropSymbols$2d)
+    for (var prop of __getOwnPropSymbols$2d(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2d.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -4290,7 +4331,7 @@ const Avatar = (_a) => {
     image,
     size,
     bgColor
-  } = _b, rest = __objRest$1R(_b, [
+  } = _b, rest = __objRest$1T(_b, [
     "variant",
     "notificationCount",
     "name",
@@ -4305,7 +4346,7 @@ const Avatar = (_a) => {
     name,
     bgColor
   });
-  return /* @__PURE__ */ React.createElement(Box, __spreadValues$2e({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues$2d({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React.createElement(
     chakra.img,
     {
       alt: name,
@@ -4322,54 +4363,6 @@ const Avatar = (_a) => {
   ), notificationCount > 0 && /* @__PURE__ */ React.createElement(AvatarBadge, { notificationCount }));
 };
 
-var __defProp$2d = Object.defineProperty;
-var __getOwnPropSymbols$2d = Object.getOwnPropertySymbols;
-var __hasOwnProp$2d = Object.prototype.hasOwnProperty;
-var __propIsEnum$2d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2d = (obj, key, value) => key in obj ? __defProp$2d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2d = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2d.call(b, prop))
-      __defNormalProp$2d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2d)
-    for (var prop of __getOwnPropSymbols$2d(b)) {
-      if (__propIsEnum$2d.call(b, prop))
-        __defNormalProp$2d(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest$1Q = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$2d.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2d)
-    for (var prop of __getOwnPropSymbols$2d(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2d.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const H1 = forwardRef$1((_a, ref) => {
-  var _b = _a, {
-    children,
-    sx = {}
-  } = _b, rest = __objRest$1Q(_b, [
-    "children",
-    "sx"
-  ]);
-  const styles = useStyleConfig("H1", { sx });
-  return /* @__PURE__ */ React.createElement(
-    Heading,
-    __spreadValues$2d({
-      as: "h1",
-      sx: styles,
-      ref
-    }, rest),
-    children
-  );
-});
-
 var __defProp$2c = Object.defineProperty;
 var __getOwnPropSymbols$2c = Object.getOwnPropertySymbols;
 var __hasOwnProp$2c = Object.prototype.hasOwnProperty;
@@ -4386,7 +4379,7 @@ var __spreadValues$2c = (a, b) => {
     }
   return a;
 };
-var __objRest$1P = (source, exclude) => {
+var __objRest$1S = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2c.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4398,19 +4391,19 @@ var __objRest$1P = (source, exclude) => {
     }
   return target;
 };
-const H2 = forwardRef$1((_a, ref) => {
+const H1 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1P(_b, [
+  } = _b, rest = __objRest$1S(_b, [
     "children",
     "sx"
   ]);
-  const styles = useStyleConfig("H2", { sx });
+  const styles = useStyleConfig("H1", { sx });
   return /* @__PURE__ */ React.createElement(
     Heading,
     __spreadValues$2c({
-      as: "h2",
+      as: "h1",
       sx: styles,
       ref
     }, rest),
@@ -4434,7 +4427,7 @@ var __spreadValues$2b = (a, b) => {
     }
   return a;
 };
-var __objRest$1O = (source, exclude) => {
+var __objRest$1R = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2b.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4446,19 +4439,19 @@ var __objRest$1O = (source, exclude) => {
     }
   return target;
 };
-const H3 = forwardRef$1((_a, ref) => {
+const H2 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1O(_b, [
+  } = _b, rest = __objRest$1R(_b, [
     "children",
     "sx"
   ]);
-  const styles = useStyleConfig("H3", { sx });
+  const styles = useStyleConfig("H2", { sx });
   return /* @__PURE__ */ React.createElement(
     Heading,
     __spreadValues$2b({
-      as: "h3",
+      as: "h2",
       sx: styles,
       ref
     }, rest),
@@ -4482,7 +4475,7 @@ var __spreadValues$2a = (a, b) => {
     }
   return a;
 };
-var __objRest$1N = (source, exclude) => {
+var __objRest$1Q = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2a.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4494,19 +4487,19 @@ var __objRest$1N = (source, exclude) => {
     }
   return target;
 };
-const H4 = forwardRef$1((_a, ref) => {
+const H3 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1N(_b, [
+  } = _b, rest = __objRest$1Q(_b, [
     "children",
     "sx"
   ]);
-  const styles = useStyleConfig("H4", { sx });
+  const styles = useStyleConfig("H3", { sx });
   return /* @__PURE__ */ React.createElement(
     Heading,
     __spreadValues$2a({
-      as: "h4",
+      as: "h3",
       sx: styles,
       ref
     }, rest),
@@ -4530,7 +4523,7 @@ var __spreadValues$29 = (a, b) => {
     }
   return a;
 };
-var __objRest$1M = (source, exclude) => {
+var __objRest$1P = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$29.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4542,19 +4535,19 @@ var __objRest$1M = (source, exclude) => {
     }
   return target;
 };
-const H5 = forwardRef$1((_a, ref) => {
+const H4 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1M(_b, [
+  } = _b, rest = __objRest$1P(_b, [
     "children",
     "sx"
   ]);
-  const styles = useStyleConfig("H5", { sx });
+  const styles = useStyleConfig("H4", { sx });
   return /* @__PURE__ */ React.createElement(
     Heading,
     __spreadValues$29({
-      as: "h5",
+      as: "h4",
       sx: styles,
       ref
     }, rest),
@@ -4578,7 +4571,7 @@ var __spreadValues$28 = (a, b) => {
     }
   return a;
 };
-var __objRest$1L = (source, exclude) => {
+var __objRest$1O = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$28.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4590,19 +4583,19 @@ var __objRest$1L = (source, exclude) => {
     }
   return target;
 };
-const H6 = forwardRef$1((_a, ref) => {
+const H5 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1L(_b, [
+  } = _b, rest = __objRest$1O(_b, [
     "children",
     "sx"
   ]);
-  const styles = useStyleConfig("H6", { sx });
+  const styles = useStyleConfig("H5", { sx });
   return /* @__PURE__ */ React.createElement(
     Heading,
     __spreadValues$28({
-      as: "h6",
+      as: "h5",
       sx: styles,
       ref
     }, rest),
@@ -4626,7 +4619,7 @@ var __spreadValues$27 = (a, b) => {
     }
   return a;
 };
-var __objRest$1K = (source, exclude) => {
+var __objRest$1N = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$27.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4638,21 +4631,19 @@ var __objRest$1K = (source, exclude) => {
     }
   return target;
 };
-const P = forwardRef$1((_a, ref) => {
+const H6 = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
-    variant = "16",
     sx = {}
-  } = _b, rest = __objRest$1K(_b, [
+  } = _b, rest = __objRest$1N(_b, [
     "children",
-    "variant",
     "sx"
   ]);
-  const styles = useStyleConfig("P", { variant, sx });
+  const styles = useStyleConfig("H6", { sx });
   return /* @__PURE__ */ React.createElement(
-    Text,
+    Heading,
     __spreadValues$27({
-      variant,
+      as: "h6",
       sx: styles,
       ref
     }, rest),
@@ -4676,7 +4667,7 @@ var __spreadValues$26 = (a, b) => {
     }
   return a;
 };
-var __objRest$1J = (source, exclude) => {
+var __objRest$1M = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$26.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4688,13 +4679,27 @@ var __objRest$1J = (source, exclude) => {
     }
   return target;
 };
-const Blockquote = forwardRef$1(
-  (_a, ref) => {
-    var _b = _a, { children, sx = {} } = _b, rest = __objRest$1J(_b, ["children", "sx"]);
-    const styles = useStyleConfig("Blockquote", { sx });
-    return /* @__PURE__ */ React.createElement(Text, __spreadValues$26({ as: "span", sx: styles, ref }, rest), children);
-  }
-);
+const P = forwardRef$1((_a, ref) => {
+  var _b = _a, {
+    children,
+    variant = "16",
+    sx = {}
+  } = _b, rest = __objRest$1M(_b, [
+    "children",
+    "variant",
+    "sx"
+  ]);
+  const styles = useStyleConfig("P", { variant, sx });
+  return /* @__PURE__ */ React.createElement(
+    Text,
+    __spreadValues$26({
+      variant,
+      sx: styles,
+      ref
+    }, rest),
+    children
+  );
+});
 
 var __defProp$25 = Object.defineProperty;
 var __getOwnPropSymbols$25 = Object.getOwnPropertySymbols;
@@ -4712,7 +4717,7 @@ var __spreadValues$25 = (a, b) => {
     }
   return a;
 };
-var __objRest$1I = (source, exclude) => {
+var __objRest$1L = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$25.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4724,25 +4729,13 @@ var __objRest$1I = (source, exclude) => {
     }
   return target;
 };
-const Capitalized = forwardRef$1((_a, ref) => {
-  var _b = _a, {
-    children,
-    sx = {}
-  } = _b, rest = __objRest$1I(_b, [
-    "children",
-    "sx"
-  ]);
-  const styles = useStyleConfig("Capitalized", { sx });
-  return /* @__PURE__ */ React.createElement(
-    Text,
-    __spreadValues$25({
-      as: "span",
-      sx: styles,
-      ref
-    }, rest),
-    children
-  );
-});
+const Blockquote = forwardRef$1(
+  (_a, ref) => {
+    var _b = _a, { children, sx = {} } = _b, rest = __objRest$1L(_b, ["children", "sx"]);
+    const styles = useStyleConfig("Blockquote", { sx });
+    return /* @__PURE__ */ React.createElement(Text, __spreadValues$25({ as: "span", sx: styles, ref }, rest), children);
+  }
+);
 
 var __defProp$24 = Object.defineProperty;
 var __getOwnPropSymbols$24 = Object.getOwnPropertySymbols;
@@ -4760,7 +4753,7 @@ var __spreadValues$24 = (a, b) => {
     }
   return a;
 };
-var __objRest$1H = (source, exclude) => {
+var __objRest$1K = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$24.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4772,15 +4765,15 @@ var __objRest$1H = (source, exclude) => {
     }
   return target;
 };
-const Lead = forwardRef$1((_a, ref) => {
+const Capitalized = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1H(_b, [
+  } = _b, rest = __objRest$1K(_b, [
     "children",
     "sx"
   ]);
-  const styles = useStyleConfig("Lead", { sx });
+  const styles = useStyleConfig("Capitalized", { sx });
   return /* @__PURE__ */ React.createElement(
     Text,
     __spreadValues$24({
@@ -4808,7 +4801,7 @@ var __spreadValues$23 = (a, b) => {
     }
   return a;
 };
-var __objRest$1G = (source, exclude) => {
+var __objRest$1J = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$23.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4820,19 +4813,19 @@ var __objRest$1G = (source, exclude) => {
     }
   return target;
 };
-const Small = forwardRef$1((_a, ref) => {
+const Lead = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1G(_b, [
+  } = _b, rest = __objRest$1J(_b, [
     "children",
     "sx"
   ]);
-  const styles = useStyleConfig("Small", { sx });
+  const styles = useStyleConfig("Lead", { sx });
   return /* @__PURE__ */ React.createElement(
     Text,
     __spreadValues$23({
-      as: "small",
+      as: "span",
       sx: styles,
       ref
     }, rest),
@@ -4856,7 +4849,7 @@ var __spreadValues$22 = (a, b) => {
     }
   return a;
 };
-var __objRest$1F = (source, exclude) => {
+var __objRest$1I = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$22.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4868,19 +4861,19 @@ var __objRest$1F = (source, exclude) => {
     }
   return target;
 };
-const Tiny = forwardRef$1((_a, ref) => {
+const Small = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
     sx = {}
-  } = _b, rest = __objRest$1F(_b, [
+  } = _b, rest = __objRest$1I(_b, [
     "children",
     "sx"
   ]);
-  const styles = useStyleConfig("Tiny", { sx });
+  const styles = useStyleConfig("Small", { sx });
   return /* @__PURE__ */ React.createElement(
     Text,
     __spreadValues$22({
-      as: "span",
+      as: "small",
       sx: styles,
       ref
     }, rest),
@@ -4904,7 +4897,7 @@ var __spreadValues$21 = (a, b) => {
     }
   return a;
 };
-var __objRest$1E = (source, exclude) => {
+var __objRest$1H = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$21.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4916,22 +4909,20 @@ var __objRest$1E = (source, exclude) => {
     }
   return target;
 };
-const Label = forwardRef$1((_a, ref) => {
+const Tiny = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children,
-    size = "sm",
     sx = {}
-  } = _b, rest = __objRest$1E(_b, [
+  } = _b, rest = __objRest$1H(_b, [
     "children",
-    "size",
     "sx"
   ]);
-  const styles = useStyleConfig("Label", { sx, size });
+  const styles = useStyleConfig("Tiny", { sx });
   return /* @__PURE__ */ React.createElement(
-    FormLabel$1,
+    Text,
     __spreadValues$21({
+      as: "span",
       sx: styles,
-      requiredIndicator: /* @__PURE__ */ React.createElement(VisuallyHidden, null),
       ref
     }, rest),
     children
@@ -4954,7 +4945,7 @@ var __spreadValues$20 = (a, b) => {
     }
   return a;
 };
-var __objRest$1D = (source, exclude) => {
+var __objRest$1G = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$20.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4966,13 +4957,63 @@ var __objRest$1D = (source, exclude) => {
     }
   return target;
 };
+const Label = forwardRef$1((_a, ref) => {
+  var _b = _a, {
+    children,
+    size = "sm",
+    sx = {}
+  } = _b, rest = __objRest$1G(_b, [
+    "children",
+    "size",
+    "sx"
+  ]);
+  const styles = useStyleConfig("Label", { sx, size });
+  return /* @__PURE__ */ React.createElement(
+    FormLabel$1,
+    __spreadValues$20({
+      sx: styles,
+      requiredIndicator: /* @__PURE__ */ React.createElement(VisuallyHidden, null),
+      ref
+    }, rest),
+    children
+  );
+});
+
+var __defProp$1$ = Object.defineProperty;
+var __getOwnPropSymbols$1$ = Object.getOwnPropertySymbols;
+var __hasOwnProp$1$ = Object.prototype.hasOwnProperty;
+var __propIsEnum$1$ = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1$ = (obj, key, value) => key in obj ? __defProp$1$(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1$ = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1$.call(b, prop))
+      __defNormalProp$1$(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1$)
+    for (var prop of __getOwnPropSymbols$1$(b)) {
+      if (__propIsEnum$1$.call(b, prop))
+        __defNormalProp$1$(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest$1F = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1$.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1$)
+    for (var prop of __getOwnPropSymbols$1$(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1$.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const NumVal = forwardRef$1(
   (_a, ref) => {
-    var _b = _a, { children, size = "sm", sx = {} } = _b, rest = __objRest$1D(_b, ["children", "size", "sx"]);
+    var _b = _a, { children, size = "sm", sx = {} } = _b, rest = __objRest$1F(_b, ["children", "size", "sx"]);
     const styles = useStyleConfig("NumVal", { sx, size });
     return /* @__PURE__ */ React.createElement(
       Text,
-      __spreadValues$20({
+      __spreadValues$1$({
         as: "span",
         sx: styles,
         ref
@@ -5062,53 +5103,6 @@ const useOverflowGroup = () => {
   return { rect, containerRef };
 };
 
-var __defProp$1$ = Object.defineProperty;
-var __getOwnPropSymbols$1$ = Object.getOwnPropertySymbols;
-var __hasOwnProp$1$ = Object.prototype.hasOwnProperty;
-var __propIsEnum$1$ = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1$ = (obj, key, value) => key in obj ? __defProp$1$(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1$ = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1$.call(b, prop))
-      __defNormalProp$1$(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1$)
-    for (var prop of __getOwnPropSymbols$1$(b)) {
-      if (__propIsEnum$1$.call(b, prop))
-        __defNormalProp$1$(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest$1C = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$1$.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1$)
-    for (var prop of __getOwnPropSymbols$1$(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1$.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const AvatarGroup = (_a) => {
-  var _b = _a, {
-    children,
-    max = Infinity,
-    spacing = "-4"
-  } = _b, rest = __objRest$1C(_b, [
-    "children",
-    "max",
-    "spacing"
-  ]);
-  const [nbrRemainingAvatars, setNbrRemainingAvatars] = useState(0);
-  const childrenWithMargin = getChildrenWithProps(
-    children,
-    { ml: spacing },
-    (_child, idx) => idx > 0
-  );
-  return /* @__PURE__ */ React.createElement(HStack, __spreadValues$1$({ 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: "brand" } }, "+", nbrRemainingAvatars));
-};
-
 var __defProp$1_ = Object.defineProperty;
 var __getOwnPropSymbols$1_ = Object.getOwnPropertySymbols;
 var __hasOwnProp$1_ = Object.prototype.hasOwnProperty;
@@ -5125,7 +5119,7 @@ var __spreadValues$1_ = (a, b) => {
     }
   return a;
 };
-var __objRest$1B = (source, exclude) => {
+var __objRest$1E = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1_.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -5137,22 +5131,24 @@ var __objRest$1B = (source, exclude) => {
     }
   return target;
 };
-const Badge = forwardRef$1((props, ref) => {
-  const _a = props, {
+const AvatarGroup = (_a) => {
+  var _b = _a, {
     children,
-    withIcon,
-    iconPosition = "left",
-    iconAs
-  } = _a, rest = __objRest$1B(_a, [
+    max = Infinity,
+    spacing = "-4"
+  } = _b, rest = __objRest$1E(_b, [
     "children",
-    "withIcon",
-    "iconPosition",
-    "iconAs"
+    "max",
+    "spacing"
   ]);
-  const IconComponent = iconAs ? NorthlightIcons[iconAs] : MediatoolLogoSolid;
-  const currentTheme = useCurrentTheme();
-  return /* @__PURE__ */ React.createElement(Badge$2, __spreadValues$1_({ ref, currentTheme }, rest), /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: "1" }, withIcon && iconPosition === "left" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" }), children, withIcon && iconPosition === "right" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" })));
-});
+  const [nbrRemainingAvatars, setNbrRemainingAvatars] = useState(0);
+  const childrenWithMargin = getChildrenWithProps(
+    children,
+    { ml: spacing },
+    (_child, idx) => idx > 0
+  );
+  return /* @__PURE__ */ React.createElement(HStack, __spreadValues$1_({ 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: "brand" } }, "+", nbrRemainingAvatars));
+};
 
 var __defProp$1Z = Object.defineProperty;
 var __getOwnPropSymbols$1Z = Object.getOwnPropertySymbols;
@@ -5170,7 +5166,7 @@ var __spreadValues$1Z = (a, b) => {
     }
   return a;
 };
-var __objRest$1A = (source, exclude) => {
+var __objRest$1D = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1Z.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -5182,19 +5178,22 @@ var __objRest$1A = (source, exclude) => {
     }
   return target;
 };
-const Blinker = (_a) => {
-  var _b = _a, {
-    color = "",
-    size,
-    isBlinking = true
-  } = _b, rest = __objRest$1A(_b, [
-    "color",
-    "size",
-    "isBlinking"
+const Badge = forwardRef$1((props, ref) => {
+  const _a = props, {
+    children,
+    withIcon,
+    iconPosition = "left",
+    iconAs
+  } = _a, rest = __objRest$1D(_a, [
+    "children",
+    "withIcon",
+    "iconPosition",
+    "iconAs"
   ]);
-  const styles = useStyleConfig("Blinker", { color, size, isBlinking });
-  return /* @__PURE__ */ React.createElement(Box, __spreadValues$1Z({ sx: styles, "data-testid": "blinker-test-id" }, rest));
-};
+  const IconComponent = iconAs ? NorthlightIcons[iconAs] : MediatoolLogoSolid;
+  const currentTheme = useCurrentTheme();
+  return /* @__PURE__ */ React.createElement(Badge$2, __spreadValues$1Z({ ref, currentTheme }, rest), /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: "1" }, withIcon && iconPosition === "left" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" }), children, withIcon && iconPosition === "right" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" })));
+});
 
 var __defProp$1Y = Object.defineProperty;
 var __getOwnPropSymbols$1Y = Object.getOwnPropertySymbols;
@@ -5212,7 +5211,7 @@ var __spreadValues$1Y = (a, b) => {
     }
   return a;
 };
-var __objRest$1z = (source, exclude) => {
+var __objRest$1C = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1Y.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -5224,9 +5223,18 @@ var __objRest$1z = (source, exclude) => {
     }
   return target;
 };
-const Spinner = (_a) => {
-  var rest = __objRest$1z(_a, []);
-  return /* @__PURE__ */ React.createElement(Spinner$2, __spreadValues$1Y({}, rest));
+const Blinker = (_a) => {
+  var _b = _a, {
+    color = "",
+    size,
+    isBlinking = true
+  } = _b, rest = __objRest$1C(_b, [
+    "color",
+    "size",
+    "isBlinking"
+  ]);
+  const styles = useStyleConfig("Blinker", { color, size, isBlinking });
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues$1Y({ sx: styles, "data-testid": "blinker-test-id" }, rest));
 };
 
 var __defProp$1X = Object.defineProperty;
@@ -5245,14 +5253,47 @@ var __spreadValues$1X = (a, b) => {
     }
   return a;
 };
-var __objRest$1y = (source, exclude) => {
+var __objRest$1B = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1X.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1X)
+    for (var prop of __getOwnPropSymbols$1X(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1X.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Spinner = (_a) => {
+  var rest = __objRest$1B(_a, []);
+  return /* @__PURE__ */ React.createElement(Spinner$2, __spreadValues$1X({}, rest));
+};
+
+var __defProp$1W = Object.defineProperty;
+var __getOwnPropSymbols$1W = Object.getOwnPropertySymbols;
+var __hasOwnProp$1W = Object.prototype.hasOwnProperty;
+var __propIsEnum$1W = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1W = (obj, key, value) => key in obj ? __defProp$1W(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1W = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1W.call(b, prop))
+      __defNormalProp$1W(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1W)
+    for (var prop of __getOwnPropSymbols$1W(b)) {
+      if (__propIsEnum$1W.call(b, prop))
+        __defNormalProp$1W(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest$1A = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1X.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1W.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1X)
-    for (var prop of __getOwnPropSymbols$1X(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1X.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1W)
+    for (var prop of __getOwnPropSymbols$1W(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1W.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5265,10 +5306,10 @@ const SpinnerSizeMap = {
 };
 const Button = forwardRef$1(
   (_a, ref) => {
-    var _b = _a, { variant = "default", children, size = "md" } = _b, rest = __objRest$1y(_b, ["variant", "children", "size"]);
+    var _b = _a, { variant = "default", children, size = "md" } = _b, rest = __objRest$1A(_b, ["variant", "children", "size"]);
     return /* @__PURE__ */ React.createElement(
       Button$2,
-      __spreadValues$1X({
+      __spreadValues$1W({
         variant,
         ref,
         size,
@@ -5284,30 +5325,30 @@ const Button = forwardRef$1(
   }
 );
 
-var __defProp$1W = Object.defineProperty;
-var __getOwnPropSymbols$1W = Object.getOwnPropertySymbols;
-var __hasOwnProp$1W = Object.prototype.hasOwnProperty;
-var __propIsEnum$1W = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1W = (obj, key, value) => key in obj ? __defProp$1W(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1W = (a, b) => {
+var __defProp$1V = Object.defineProperty;
+var __getOwnPropSymbols$1V = Object.getOwnPropertySymbols;
+var __hasOwnProp$1V = Object.prototype.hasOwnProperty;
+var __propIsEnum$1V = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1V = (obj, key, value) => key in obj ? __defProp$1V(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1V = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1W.call(b, prop))
-      __defNormalProp$1W(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1W)
-    for (var prop of __getOwnPropSymbols$1W(b)) {
-      if (__propIsEnum$1W.call(b, prop))
-        __defNormalProp$1W(a, prop, b[prop]);
+    if (__hasOwnProp$1V.call(b, prop))
+      __defNormalProp$1V(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1V)
+    for (var prop of __getOwnPropSymbols$1V(b)) {
+      if (__propIsEnum$1V.call(b, prop))
+        __defNormalProp$1V(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1x = (source, exclude) => {
+var __objRest$1z = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1W.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1V.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1W)
-    for (var prop of __getOwnPropSymbols$1W(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1W.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1V)
+    for (var prop of __getOwnPropSymbols$1V(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1V.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5319,7 +5360,7 @@ const Checkbox = (_a) => {
     name,
     size = "md",
     variant = "default"
-  } = _b, rest = __objRest$1x(_b, [
+  } = _b, rest = __objRest$1z(_b, [
     "value",
     "onChange",
     "name",
@@ -5329,7 +5370,7 @@ const Checkbox = (_a) => {
   const controlledValue = typeof value === "boolean" ? { isChecked: value } : { value };
   return /* @__PURE__ */ React.createElement(
     Checkbox$2,
-    __spreadValues$1W(__spreadValues$1W({
+    __spreadValues$1V(__spreadValues$1V({
       size,
       id: name,
       onChange,
@@ -5354,30 +5395,30 @@ const trimFormValues = (obj) => {
   return newObj;
 };
 
-var __defProp$1V = Object.defineProperty;
-var __getOwnPropSymbols$1V = Object.getOwnPropertySymbols;
-var __hasOwnProp$1V = Object.prototype.hasOwnProperty;
-var __propIsEnum$1V = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1V = (obj, key, value) => key in obj ? __defProp$1V(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1V = (a, b) => {
+var __defProp$1U = Object.defineProperty;
+var __getOwnPropSymbols$1U = Object.getOwnPropertySymbols;
+var __hasOwnProp$1U = Object.prototype.hasOwnProperty;
+var __propIsEnum$1U = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1U = (obj, key, value) => key in obj ? __defProp$1U(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1U = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1V.call(b, prop))
-      __defNormalProp$1V(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1V)
-    for (var prop of __getOwnPropSymbols$1V(b)) {
-      if (__propIsEnum$1V.call(b, prop))
-        __defNormalProp$1V(a, prop, b[prop]);
+    if (__hasOwnProp$1U.call(b, prop))
+      __defNormalProp$1U(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1U)
+    for (var prop of __getOwnPropSymbols$1U(b)) {
+      if (__propIsEnum$1U.call(b, prop))
+        __defNormalProp$1U(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1w = (source, exclude) => {
+var __objRest$1y = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1V.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1U.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1V)
-    for (var prop of __getOwnPropSymbols$1V(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1V.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1U)
+    for (var prop of __getOwnPropSymbols$1U(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1U.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5394,7 +5435,7 @@ const Form = forwardRef$1((_a, ref) => {
     shouldTrim = true,
     innerFormStyle = {},
     joiSchema
-  } = _b, rest = __objRest$1w(_b, [
+  } = _b, rest = __objRest$1y(_b, [
     "initialValues",
     "onSubmit",
     "children",
@@ -5417,7 +5458,7 @@ const Form = forwardRef$1((_a, ref) => {
       return joiResolver(joiSchema);
     return void 0;
   };
-  const newMethods = methods || useForm(__spreadValues$1V({
+  const newMethods = methods || useForm(__spreadValues$1U({
     defaultValues: initialValues,
     resolver: getResolver()
   }, formSettings));
@@ -5443,36 +5484,36 @@ const Form = forwardRef$1((_a, ref) => {
     newMethods.trigger();
     e.preventDefault();
   };
-  return /* @__PURE__ */ React.createElement(FormProvider, __spreadValues$1V(__spreadValues$1V({}, newMethods), rest), /* @__PURE__ */ React.createElement("form", { style: __spreadValues$1V({ width: "100%" }, innerFormStyle), onSubmit: handleSubmit }, typeof children === "function" ? children(newMethods) : children));
+  return /* @__PURE__ */ React.createElement(FormProvider, __spreadValues$1U(__spreadValues$1U({}, newMethods), rest), /* @__PURE__ */ React.createElement("form", { style: __spreadValues$1U({ width: "100%" }, innerFormStyle), onSubmit: handleSubmit }, typeof children === "function" ? children(newMethods) : children));
 });
 
-var __defProp$1U = Object.defineProperty;
-var __defProps$u = Object.defineProperties;
-var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1U = Object.getOwnPropertySymbols;
-var __hasOwnProp$1U = Object.prototype.hasOwnProperty;
-var __propIsEnum$1U = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1U = (obj, key, value) => key in obj ? __defProp$1U(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1U = (a, b) => {
+var __defProp$1T = Object.defineProperty;
+var __defProps$t = Object.defineProperties;
+var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1T = Object.getOwnPropertySymbols;
+var __hasOwnProp$1T = Object.prototype.hasOwnProperty;
+var __propIsEnum$1T = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1T = (obj, key, value) => key in obj ? __defProp$1T(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1T = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1U.call(b, prop))
-      __defNormalProp$1U(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1U)
-    for (var prop of __getOwnPropSymbols$1U(b)) {
-      if (__propIsEnum$1U.call(b, prop))
-        __defNormalProp$1U(a, prop, b[prop]);
+    if (__hasOwnProp$1T.call(b, prop))
+      __defNormalProp$1T(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1T)
+    for (var prop of __getOwnPropSymbols$1T(b)) {
+      if (__propIsEnum$1T.call(b, prop))
+        __defNormalProp$1T(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
-var __objRest$1v = (source, exclude) => {
+var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __objRest$1x = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1U.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1T.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1U)
-    for (var prop of __getOwnPropSymbols$1U(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1U.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1T)
+    for (var prop of __getOwnPropSymbols$1T(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1T.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5480,12 +5521,12 @@ var __objRest$1v = (source, exclude) => {
 const FormLabel = forwardRef$1((_a, ref) => {
   var _b = _a, {
     children: label
-  } = _b, rest = __objRest$1v(_b, [
+  } = _b, rest = __objRest$1x(_b, [
     "children"
   ]);
   return /* @__PURE__ */ React.createElement(
     Label,
-    __spreadProps$u(__spreadValues$1U({
+    __spreadProps$t(__spreadValues$1T({
       size: "sm",
       sx: {
         width: "80%",
@@ -5501,30 +5542,30 @@ const FormLabel = forwardRef$1((_a, ref) => {
   );
 });
 
-var __defProp$1T = Object.defineProperty;
-var __getOwnPropSymbols$1T = Object.getOwnPropertySymbols;
-var __hasOwnProp$1T = Object.prototype.hasOwnProperty;
-var __propIsEnum$1T = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1T = (obj, key, value) => key in obj ? __defProp$1T(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1T = (a, b) => {
+var __defProp$1S = Object.defineProperty;
+var __getOwnPropSymbols$1S = Object.getOwnPropertySymbols;
+var __hasOwnProp$1S = Object.prototype.hasOwnProperty;
+var __propIsEnum$1S = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1S = (obj, key, value) => key in obj ? __defProp$1S(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1S = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1T.call(b, prop))
-      __defNormalProp$1T(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1T)
-    for (var prop of __getOwnPropSymbols$1T(b)) {
-      if (__propIsEnum$1T.call(b, prop))
-        __defNormalProp$1T(a, prop, b[prop]);
+    if (__hasOwnProp$1S.call(b, prop))
+      __defNormalProp$1S(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1S)
+    for (var prop of __getOwnPropSymbols$1S(b)) {
+      if (__propIsEnum$1S.call(b, prop))
+        __defNormalProp$1S(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1u = (source, exclude) => {
+var __objRest$1w = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1T.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1S.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1T)
-    for (var prop of __getOwnPropSymbols$1T(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1T.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1S)
+    for (var prop of __getOwnPropSymbols$1S(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1S.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5539,7 +5580,7 @@ const BaseField = (_a, ref) => {
     noLabelConnection = false,
     validate,
     control: passedControl
-  } = _b, rest = __objRest$1u(_b, [
+  } = _b, rest = __objRest$1w(_b, [
     "name",
     "label",
     "children",
@@ -5555,7 +5596,7 @@ const BaseField = (_a, ref) => {
   const fieldError = getFieldError(name, errors);
   return /* @__PURE__ */ React.createElement(FormControl, { isInvalid: !!fieldError, isRequired, ref }, /* @__PURE__ */ React.createElement(
     Stack,
-    __spreadValues$1T({
+    __spreadValues$1S({
       spacing: "auto",
       direction,
       alignItems: direction === "column" ? "stretch" : "center"
@@ -5583,30 +5624,30 @@ const useSetValueRefreshed = () => {
   return setValueRefreshed;
 };
 
-var __defProp$1S = Object.defineProperty;
-var __getOwnPropSymbols$1S = Object.getOwnPropertySymbols;
-var __hasOwnProp$1S = Object.prototype.hasOwnProperty;
-var __propIsEnum$1S = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1S = (obj, key, value) => key in obj ? __defProp$1S(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1S = (a, b) => {
+var __defProp$1R = Object.defineProperty;
+var __getOwnPropSymbols$1R = Object.getOwnPropertySymbols;
+var __hasOwnProp$1R = Object.prototype.hasOwnProperty;
+var __propIsEnum$1R = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1R = (obj, key, value) => key in obj ? __defProp$1R(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1R = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1S.call(b, prop))
-      __defNormalProp$1S(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1S)
-    for (var prop of __getOwnPropSymbols$1S(b)) {
-      if (__propIsEnum$1S.call(b, prop))
-        __defNormalProp$1S(a, prop, b[prop]);
+    if (__hasOwnProp$1R.call(b, prop))
+      __defNormalProp$1R(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1R)
+    for (var prop of __getOwnPropSymbols$1R(b)) {
+      if (__propIsEnum$1R.call(b, prop))
+        __defNormalProp$1R(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1t = (source, exclude) => {
+var __objRest$1v = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1S.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1R.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1S)
-    for (var prop of __getOwnPropSymbols$1S(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1S.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1R)
+    for (var prop of __getOwnPropSymbols$1R(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1R.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5622,7 +5663,7 @@ const CheckboxField = forwardRef$1((_a, ref) => {
     direction = "row",
     labelPlacement = "left",
     labelSize = "md"
-  } = _b, rest = __objRest$1t(_b, [
+  } = _b, rest = __objRest$1v(_b, [
     "name",
     "label",
     "variant",
@@ -5657,7 +5698,7 @@ const CheckboxField = forwardRef$1((_a, ref) => {
         },
         /* @__PURE__ */ React.createElement(
           Checkbox,
-          __spreadValues$1S({
+          __spreadValues$1R({
             name,
             onChange: (e) => {
               onChange(e);
@@ -5674,30 +5715,30 @@ const CheckboxField = forwardRef$1((_a, ref) => {
   );
 });
 
-var __defProp$1R = Object.defineProperty;
-var __getOwnPropSymbols$1R = Object.getOwnPropertySymbols;
-var __hasOwnProp$1R = Object.prototype.hasOwnProperty;
-var __propIsEnum$1R = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1R = (obj, key, value) => key in obj ? __defProp$1R(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1R = (a, b) => {
+var __defProp$1Q = Object.defineProperty;
+var __getOwnPropSymbols$1Q = Object.getOwnPropertySymbols;
+var __hasOwnProp$1Q = Object.prototype.hasOwnProperty;
+var __propIsEnum$1Q = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1Q = (obj, key, value) => key in obj ? __defProp$1Q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1Q = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1R.call(b, prop))
-      __defNormalProp$1R(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1R)
-    for (var prop of __getOwnPropSymbols$1R(b)) {
-      if (__propIsEnum$1R.call(b, prop))
-        __defNormalProp$1R(a, prop, b[prop]);
+    if (__hasOwnProp$1Q.call(b, prop))
+      __defNormalProp$1Q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1Q)
+    for (var prop of __getOwnPropSymbols$1Q(b)) {
+      if (__propIsEnum$1Q.call(b, prop))
+        __defNormalProp$1Q(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1s = (source, exclude) => {
+var __objRest$1u = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1R.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1Q.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1R)
-    for (var prop of __getOwnPropSymbols$1R(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1R.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1Q)
+    for (var prop of __getOwnPropSymbols$1Q(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1Q.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5711,7 +5752,7 @@ const CheckboxGroupField = forwardRef$1((_a, ref) => {
     direction,
     validate,
     onChange: onChangeCallback = identity
-  } = _b, rest = __objRest$1s(_b, [
+  } = _b, rest = __objRest$1u(_b, [
     "name",
     "label",
     "children",
@@ -5732,7 +5773,7 @@ const CheckboxGroupField = forwardRef$1((_a, ref) => {
     },
     ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       CheckboxGroup,
-      __spreadValues$1R({
+      __spreadValues$1Q({
         onChange: (e) => {
           onChange(e);
           onChangeCallback(e);
@@ -5745,30 +5786,30 @@ const CheckboxGroupField = forwardRef$1((_a, ref) => {
   ));
 });
 
-var __defProp$1Q = Object.defineProperty;
-var __getOwnPropSymbols$1Q = Object.getOwnPropertySymbols;
-var __hasOwnProp$1Q = Object.prototype.hasOwnProperty;
-var __propIsEnum$1Q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1Q = (obj, key, value) => key in obj ? __defProp$1Q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1Q = (a, b) => {
+var __defProp$1P = Object.defineProperty;
+var __getOwnPropSymbols$1P = Object.getOwnPropertySymbols;
+var __hasOwnProp$1P = Object.prototype.hasOwnProperty;
+var __propIsEnum$1P = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1P = (obj, key, value) => key in obj ? __defProp$1P(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1P = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1Q.call(b, prop))
-      __defNormalProp$1Q(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1Q)
-    for (var prop of __getOwnPropSymbols$1Q(b)) {
-      if (__propIsEnum$1Q.call(b, prop))
-        __defNormalProp$1Q(a, prop, b[prop]);
+    if (__hasOwnProp$1P.call(b, prop))
+      __defNormalProp$1P(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1P)
+    for (var prop of __getOwnPropSymbols$1P(b)) {
+      if (__propIsEnum$1P.call(b, prop))
+        __defNormalProp$1P(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1r = (source, exclude) => {
+var __objRest$1t = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1Q.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1P.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1Q)
-    for (var prop of __getOwnPropSymbols$1Q(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1Q.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1P)
+    for (var prop of __getOwnPropSymbols$1P(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1P.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5779,7 +5820,7 @@ const IconButton = forwardRef$1((_a, ref) => {
     icon,
     "aria-label": ariaLabel,
     children
-  } = _b, rest = __objRest$1r(_b, [
+  } = _b, rest = __objRest$1t(_b, [
     "variant",
     "icon",
     "aria-label",
@@ -5790,7 +5831,7 @@ const IconButton = forwardRef$1((_a, ref) => {
   const IconWithSize = cloneElement(IconComponent, { size: (_a2 = IconComponent.props.size) != null ? _a2 : rest.size });
   return /* @__PURE__ */ React.createElement(
     IconButton$1,
-    __spreadValues$1Q({
+    __spreadValues$1P({
       variant,
       icon: IconWithSize,
       "aria-label": ariaLabel,
@@ -5843,23 +5884,23 @@ const ColorButton = forwardRef$1(({
   );
 });
 
-var __defProp$1P = Object.defineProperty;
-var __getOwnPropSymbols$1P = Object.getOwnPropertySymbols;
-var __hasOwnProp$1P = Object.prototype.hasOwnProperty;
-var __propIsEnum$1P = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1P = (obj, key, value) => key in obj ? __defProp$1P(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1P = (a, b) => {
+var __defProp$1O = Object.defineProperty;
+var __getOwnPropSymbols$1O = Object.getOwnPropertySymbols;
+var __hasOwnProp$1O = Object.prototype.hasOwnProperty;
+var __propIsEnum$1O = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1O = (obj, key, value) => key in obj ? __defProp$1O(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1O = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1P.call(b, prop))
-      __defNormalProp$1P(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1P)
-    for (var prop of __getOwnPropSymbols$1P(b)) {
-      if (__propIsEnum$1P.call(b, prop))
-        __defNormalProp$1P(a, prop, b[prop]);
+    if (__hasOwnProp$1O.call(b, prop))
+      __defNormalProp$1O(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1O)
+    for (var prop of __getOwnPropSymbols$1O(b)) {
+      if (__propIsEnum$1O.call(b, prop))
+        __defNormalProp$1O(a, prop, b[prop]);
     }
   return a;
 };
-const Popover = (props) => /* @__PURE__ */ React.createElement(Popover$2, __spreadValues$1P({ isLazy: true }, props));
+const Popover = (props) => /* @__PURE__ */ React.createElement(Popover$2, __spreadValues$1O({ isLazy: true }, props));
 
 const ColorsExpandButton = ({
   onClick,
@@ -5899,41 +5940,6 @@ const ColorsExpandButton = ({
   );
 };
 
-var __defProp$1O = Object.defineProperty;
-var __getOwnPropSymbols$1O = Object.getOwnPropertySymbols;
-var __hasOwnProp$1O = Object.prototype.hasOwnProperty;
-var __propIsEnum$1O = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1O = (obj, key, value) => key in obj ? __defProp$1O(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1O = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1O.call(b, prop))
-      __defNormalProp$1O(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1O)
-    for (var prop of __getOwnPropSymbols$1O(b)) {
-      if (__propIsEnum$1O.call(b, prop))
-        __defNormalProp$1O(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest$1q = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$1O.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1O)
-    for (var prop of __getOwnPropSymbols$1O(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1O.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const RenderInPortal = (_a) => {
-  var _b = _a, { shouldRenderInPortal, children } = _b, rest = __objRest$1q(_b, ["shouldRenderInPortal", "children"]);
-  if (!shouldRenderInPortal)
-    return children;
-  return /* @__PURE__ */ React.createElement(Portal, __spreadValues$1O({}, rest), children);
-};
-
 var __defProp$1N = Object.defineProperty;
 var __getOwnPropSymbols$1N = Object.getOwnPropertySymbols;
 var __hasOwnProp$1N = Object.prototype.hasOwnProperty;
@@ -5950,7 +5956,7 @@ var __spreadValues$1N = (a, b) => {
     }
   return a;
 };
-var __objRest$1p = (source, exclude) => {
+var __objRest$1s = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1N.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -5962,6 +5968,41 @@ var __objRest$1p = (source, exclude) => {
     }
   return target;
 };
+const RenderInPortal = (_a) => {
+  var _b = _a, { shouldRenderInPortal, children } = _b, rest = __objRest$1s(_b, ["shouldRenderInPortal", "children"]);
+  if (!shouldRenderInPortal)
+    return children;
+  return /* @__PURE__ */ React.createElement(Portal, __spreadValues$1N({}, rest), children);
+};
+
+var __defProp$1M = Object.defineProperty;
+var __getOwnPropSymbols$1M = Object.getOwnPropertySymbols;
+var __hasOwnProp$1M = Object.prototype.hasOwnProperty;
+var __propIsEnum$1M = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1M = (obj, key, value) => key in obj ? __defProp$1M(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1M = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1M.call(b, prop))
+      __defNormalProp$1M(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1M)
+    for (var prop of __getOwnPropSymbols$1M(b)) {
+      if (__propIsEnum$1M.call(b, prop))
+        __defNormalProp$1M(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest$1r = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1M.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1M)
+    for (var prop of __getOwnPropSymbols$1M(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1M.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const ColorPicker = (_a) => {
   var _b = _a, {
     onChange = () => {
@@ -5974,7 +6015,7 @@ const ColorPicker = (_a) => {
     size = "md",
     shouldRenderInPortal = false,
     popoverProps
-  } = _b, rest = __objRest$1p(_b, [
+  } = _b, rest = __objRest$1r(_b, [
     "onChange",
     "clearable",
     "colors",
@@ -6039,14 +6080,14 @@ const ColorPicker = (_a) => {
   };
   return /* @__PURE__ */ React.createElement(Box, { "data-testid": "color-picker-test-id" }, /* @__PURE__ */ React.createElement(
     Popover,
-    __spreadValues$1N({
+    __spreadValues$1M({
       isOpen,
       onClose,
       initialFocusRef
     }, popoverProps),
     /* @__PURE__ */ React.createElement(PopoverTrigger, null, /* @__PURE__ */ React.createElement(
       IconButton,
-      __spreadValues$1N({
+      __spreadValues$1M({
         onClick: onToggle,
         "aria-label": name || "color picker",
         name,
@@ -6109,30 +6150,30 @@ const ColorPicker = (_a) => {
   ));
 };
 
-var __defProp$1M = Object.defineProperty;
-var __getOwnPropSymbols$1M = Object.getOwnPropertySymbols;
-var __hasOwnProp$1M = Object.prototype.hasOwnProperty;
-var __propIsEnum$1M = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1M = (obj, key, value) => key in obj ? __defProp$1M(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1M = (a, b) => {
+var __defProp$1L = Object.defineProperty;
+var __getOwnPropSymbols$1L = Object.getOwnPropertySymbols;
+var __hasOwnProp$1L = Object.prototype.hasOwnProperty;
+var __propIsEnum$1L = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1L = (obj, key, value) => key in obj ? __defProp$1L(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1L = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1M.call(b, prop))
-      __defNormalProp$1M(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1M)
-    for (var prop of __getOwnPropSymbols$1M(b)) {
-      if (__propIsEnum$1M.call(b, prop))
-        __defNormalProp$1M(a, prop, b[prop]);
+    if (__hasOwnProp$1L.call(b, prop))
+      __defNormalProp$1L(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1L)
+    for (var prop of __getOwnPropSymbols$1L(b)) {
+      if (__propIsEnum$1L.call(b, prop))
+        __defNormalProp$1L(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1o = (source, exclude) => {
+var __objRest$1q = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1M.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1L.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1M)
-    for (var prop of __getOwnPropSymbols$1M(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1M.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1L)
+    for (var prop of __getOwnPropSymbols$1L(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1L.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -6144,7 +6185,7 @@ const ColorPickerField = (_a) => {
     direction,
     isRequired,
     validate
-  } = _b, rest = __objRest$1o(_b, [
+  } = _b, rest = __objRest$1q(_b, [
     "name",
     "label",
     "direction",
@@ -6162,7 +6203,7 @@ const ColorPickerField = (_a) => {
     },
     ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       ColorPicker,
-      __spreadValues$1M({
+      __spreadValues$1L({
         name,
         onChange,
         value
@@ -6171,29 +6212,29 @@ const ColorPickerField = (_a) => {
   );
 };
 
-var __defProp$1L = Object.defineProperty;
-var __defProps$t = Object.defineProperties;
-var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1L = Object.getOwnPropertySymbols;
-var __hasOwnProp$1L = Object.prototype.hasOwnProperty;
-var __propIsEnum$1L = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1L = (obj, key, value) => key in obj ? __defProp$1L(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1L = (a, b) => {
+var __defProp$1K = Object.defineProperty;
+var __defProps$s = Object.defineProperties;
+var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1K = Object.getOwnPropertySymbols;
+var __hasOwnProp$1K = Object.prototype.hasOwnProperty;
+var __propIsEnum$1K = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1K = (obj, key, value) => key in obj ? __defProp$1K(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1K = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1L.call(b, prop))
-      __defNormalProp$1L(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1L)
-    for (var prop of __getOwnPropSymbols$1L(b)) {
-      if (__propIsEnum$1L.call(b, prop))
-        __defNormalProp$1L(a, prop, b[prop]);
+    if (__hasOwnProp$1K.call(b, prop))
+      __defNormalProp$1K(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1K)
+    for (var prop of __getOwnPropSymbols$1K(b)) {
+      if (__propIsEnum$1K.call(b, prop))
+        __defNormalProp$1K(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
 const FlipButtonContext = createContext(null);
 const useFlipButtonState = (props, isMulti) => isMulti ? useCheckboxGroupState(props) : useRadioGroupState(props);
 const useFlipButtonGroup = (props, state, isMulti) => {
-  const propsWithLabel = __spreadProps$t(__spreadValues$1L({}, props), {
+  const propsWithLabel = __spreadProps$s(__spreadValues$1K({}, props), {
     "aria-label": `${isMulti ? "Checkbox" : "Radio"}-button-group`
   });
   return isMulti ? useCheckboxGroup(
@@ -6210,33 +6251,33 @@ const useFlipButton = (props, isMulti) => {
   return { state, flipButtonGroupProps };
 };
 
-var __defProp$1K = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1K = Object.getOwnPropertySymbols;
-var __hasOwnProp$1K = Object.prototype.hasOwnProperty;
-var __propIsEnum$1K = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1K = (obj, key, value) => key in obj ? __defProp$1K(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1K = (a, b) => {
+var __defProp$1J = Object.defineProperty;
+var __defProps$r = Object.defineProperties;
+var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1J = Object.getOwnPropertySymbols;
+var __hasOwnProp$1J = Object.prototype.hasOwnProperty;
+var __propIsEnum$1J = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1J = (obj, key, value) => key in obj ? __defProp$1J(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1J = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1K.call(b, prop))
-      __defNormalProp$1K(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1K)
-    for (var prop of __getOwnPropSymbols$1K(b)) {
-      if (__propIsEnum$1K.call(b, prop))
-        __defNormalProp$1K(a, prop, b[prop]);
+    if (__hasOwnProp$1J.call(b, prop))
+      __defNormalProp$1J(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1J)
+    for (var prop of __getOwnPropSymbols$1J(b)) {
+      if (__propIsEnum$1J.call(b, prop))
+        __defNormalProp$1J(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
-var __objRest$1n = (source, exclude) => {
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
+var __objRest$1p = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1K.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1J.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1K)
-    for (var prop of __getOwnPropSymbols$1K(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1K.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1J)
+    for (var prop of __getOwnPropSymbols$1J(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1J.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -6251,7 +6292,7 @@ const FlipButton = forwardRef$1((props, wrapperRef) => {
     icon,
     value,
     iconPlacement = "left"
-  } = _a, rest = __objRest$1n(_a, [
+  } = _a, rest = __objRest$1p(_a, [
     "children",
     "size",
     "variant",
@@ -6263,7 +6304,7 @@ const FlipButton = forwardRef$1((props, wrapperRef) => {
   ]);
   const state = useContext(FlipButtonContext);
   const ref = useRef(null);
-  const propsWithoutChildren = omit(["children"], __spreadProps$s(__spreadValues$1K({}, props), { "aria-label": `${isMulti ? "Checkbox" : "Radio"}-input for ${value}` }));
+  const propsWithoutChildren = omit(["children"], __spreadProps$r(__spreadValues$1J({}, props), { "aria-label": `${isMulti ? "Checkbox" : "Radio"}-input for ${value}` }));
   const { inputProps } = isMulti ? useCheckboxGroupItem(propsWithoutChildren, state, ref) : useRadio(propsWithoutChildren, state, ref);
   const { button, buttonIcon } = useMultiStyleConfig("FlipButton", { size, variant });
   const { focusProps, isFocusVisible: isFocused } = useFocusRing();
@@ -6275,7 +6316,7 @@ const FlipButton = forwardRef$1((props, wrapperRef) => {
   };
   const focusRing = isFocused ? focusStyles : {};
   const isSelected = isMulti ? state.isSelected(value) : state.selectedValue === value;
-  const flipButtonProps = __spreadProps$s(__spreadValues$1K({}, mergeProps(inputProps, focusProps)), {
+  const flipButtonProps = __spreadProps$r(__spreadValues$1J({}, mergeProps(inputProps, focusProps)), {
     ref,
     style: { opacity: "0", width: "0", height: "0" },
     "aria-label": isMulti ? "Checkbox-input" : "Radio-input"
@@ -6287,7 +6328,7 @@ const FlipButton = forwardRef$1((props, wrapperRef) => {
     as: "label",
     cursor: "pointer"
   };
-  return typeof children === "function" ? children(__spreadValues$1K({
+  return typeof children === "function" ? children(__spreadValues$1J({
     state,
     containerProps,
     flipButtonProps,
@@ -6307,39 +6348,39 @@ const FlipButton = forwardRef$1((props, wrapperRef) => {
       as: "label",
       ref: wrapperRef
     },
-    /* @__PURE__ */ React.createElement("input", __spreadValues$1K({}, flipButtonProps)),
+    /* @__PURE__ */ React.createElement("input", __spreadValues$1J({}, 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)
   );
 });
 
-var __defProp$1J = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1J = Object.getOwnPropertySymbols;
-var __hasOwnProp$1J = Object.prototype.hasOwnProperty;
-var __propIsEnum$1J = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1J = (obj, key, value) => key in obj ? __defProp$1J(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1J = (a, b) => {
+var __defProp$1I = Object.defineProperty;
+var __defProps$q = Object.defineProperties;
+var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1I = Object.getOwnPropertySymbols;
+var __hasOwnProp$1I = Object.prototype.hasOwnProperty;
+var __propIsEnum$1I = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1I = (obj, key, value) => key in obj ? __defProp$1I(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1I = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1J.call(b, prop))
-      __defNormalProp$1J(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1J)
-    for (var prop of __getOwnPropSymbols$1J(b)) {
-      if (__propIsEnum$1J.call(b, prop))
-        __defNormalProp$1J(a, prop, b[prop]);
+    if (__hasOwnProp$1I.call(b, prop))
+      __defNormalProp$1I(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1I)
+    for (var prop of __getOwnPropSymbols$1I(b)) {
+      if (__propIsEnum$1I.call(b, prop))
+        __defNormalProp$1I(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
-var __objRest$1m = (source, exclude) => {
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
+var __objRest$1o = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1J.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1I.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1J)
-    for (var prop of __getOwnPropSymbols$1J(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1J.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1I)
+    for (var prop of __getOwnPropSymbols$1I(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1I.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -6356,7 +6397,7 @@ const FlipButtonGroup = (props) => {
     variant,
     icon,
     sx = {}
-  } = _a, rest = __objRest$1m(_a, [
+  } = _a, rest = __objRest$1o(_a, [
     "isMulti",
     "name",
     "children",
@@ -6371,7 +6412,7 @@ const FlipButtonGroup = (props) => {
   const { state, flipButtonGroupProps } = useFlipButton(props, isMulti);
   const numberOfButtons = Children.count(children);
   const childrenWithProps = Children.toArray(children).map(
-    (child) => isValidElement(child) ? cloneElement(child, __spreadValues$1J({
+    (child) => isValidElement(child) ? cloneElement(child, __spreadValues$1I({
       key: child.props.value,
       isMulti,
       variant,
@@ -6390,7 +6431,7 @@ const FlipButtonGroup = (props) => {
   const restWithoutOnChange = omit(["onChange"], rest);
   return /* @__PURE__ */ React.createElement(
     Stack,
-    __spreadValues$1J(__spreadProps$r(__spreadValues$1J({}, flipButtonGroupProps), {
+    __spreadValues$1I(__spreadProps$q(__spreadValues$1I({}, flipButtonGroupProps), {
       direction,
       id: name,
       spacing: 0,
@@ -6400,30 +6441,30 @@ const FlipButtonGroup = (props) => {
   );
 };
 
-var __defProp$1I = Object.defineProperty;
-var __getOwnPropSymbols$1I = Object.getOwnPropertySymbols;
-var __hasOwnProp$1I = Object.prototype.hasOwnProperty;
-var __propIsEnum$1I = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1I = (obj, key, value) => key in obj ? __defProp$1I(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1I = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1I.call(b, prop))
-      __defNormalProp$1I(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1I)
-    for (var prop of __getOwnPropSymbols$1I(b)) {
-      if (__propIsEnum$1I.call(b, prop))
-        __defNormalProp$1I(a, prop, b[prop]);
+var __defProp$1H = Object.defineProperty;
+var __getOwnPropSymbols$1H = Object.getOwnPropertySymbols;
+var __hasOwnProp$1H = Object.prototype.hasOwnProperty;
+var __propIsEnum$1H = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1H = (obj, key, value) => key in obj ? __defProp$1H(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1H = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1H.call(b, prop))
+      __defNormalProp$1H(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1H)
+    for (var prop of __getOwnPropSymbols$1H(b)) {
+      if (__propIsEnum$1H.call(b, prop))
+        __defNormalProp$1H(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1l = (source, exclude) => {
+var __objRest$1n = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1I.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1H.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1I)
-    for (var prop of __getOwnPropSymbols$1I(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1I.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1H)
+    for (var prop of __getOwnPropSymbols$1H(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1H.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -6438,7 +6479,7 @@ const FlipButtonGroupField = forwardRef$1((_a, ref) => {
     iconPlacement = "left",
     onChange: onChangeCallback = identity,
     validate
-  } = _b, rest = __objRest$1l(_b, [
+  } = _b, rest = __objRest$1n(_b, [
     "name",
     "label",
     "children",
@@ -6460,7 +6501,7 @@ const FlipButtonGroupField = forwardRef$1((_a, ref) => {
     },
     ({ onChange, value }) => /* @__PURE__ */ React.createElement(
       FlipButtonGroup,
-      __spreadValues$1I({
+      __spreadValues$1H({
         name,
         onChange: (e) => {
           onChange(e);
@@ -6475,30 +6516,30 @@ const FlipButtonGroupField = forwardRef$1((_a, ref) => {
   );
 });
 
-var __defProp$1H = Object.defineProperty;
-var __getOwnPropSymbols$1H = Object.getOwnPropertySymbols;
-var __hasOwnProp$1H = Object.prototype.hasOwnProperty;
-var __propIsEnum$1H = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1H = (obj, key, value) => key in obj ? __defProp$1H(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1H = (a, b) => {
+var __defProp$1G = Object.defineProperty;
+var __getOwnPropSymbols$1G = Object.getOwnPropertySymbols;
+var __hasOwnProp$1G = Object.prototype.hasOwnProperty;
+var __propIsEnum$1G = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1G = (obj, key, value) => key in obj ? __defProp$1G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1G = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1H.call(b, prop))
-      __defNormalProp$1H(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1H)
-    for (var prop of __getOwnPropSymbols$1H(b)) {
-      if (__propIsEnum$1H.call(b, prop))
-        __defNormalProp$1H(a, prop, b[prop]);
+    if (__hasOwnProp$1G.call(b, prop))
+      __defNormalProp$1G(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1G)
+    for (var prop of __getOwnPropSymbols$1G(b)) {
+      if (__propIsEnum$1G.call(b, prop))
+        __defNormalProp$1G(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1k = (source, exclude) => {
+var __objRest$1m = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1H.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$1G.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1H)
-    for (var prop of __getOwnPropSymbols$1H(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1H.call(source, prop))
+  if (source != null && __getOwnPropSymbols$1G)
+    for (var prop of __getOwnPropSymbols$1G(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1G.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -6508,10 +6549,10 @@ const hoverAndActiveStyles = {
 };
 const ResizeHandle = forwardRef$1(
   (_a, ref) => {
-    var _b = _a, { color } = _b, rest = __objRest$1k(_b, ["color"]);
+    var _b = _a, { color } = _b, rest = __objRest$1m(_b, ["color"]);
     return /* @__PURE__ */ React.createElement(
       Box,
-      __spreadValues$1H({
+      __spreadValues$1G({
         ref,
         cursor: "col-resize",
         _hover: hoverAndActiveStyles,
@@ -6528,40 +6569,42 @@ const ResizeHandle = forwardRef$1(
   }
 );
 
-var __defProp$1G = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1G = Object.getOwnPropertySymbols;
-var __hasOwnProp$1G = Object.prototype.hasOwnProperty;
-var __propIsEnum$1G = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1G = (obj, key, value) => key in obj ? __defProp$1G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1G = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1G.call(b, prop))
-      __defNormalProp$1G(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1G)
-    for (var prop of __getOwnPropSymbols$1G(b)) {
-      if (__propIsEnum$1G.call(b, prop))
-        __defNormalProp$1G(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
 const Trigger = (props) => {
-  const { isDisabled, handleClick } = props;
+  const {
+    id,
+    "aria-haspopup": ariaHasPopup,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    isDisabled,
+    handleClick
+  } = props;
   const ref = useRef(null);
-  const { buttonProps } = useButton(props, ref);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
   return /* @__PURE__ */ React.createElement(
     Button,
-    __spreadProps$q(__spreadValues$1G({}, buttonProps), {
+    {
       ref,
+      id,
+      "aria-haspopup": ariaHasPopup,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-expanded": ariaExpanded,
       size: "sm",
       boxSize: 8,
       variant: "ghost",
       isDisabled,
-      onPointerDown: handleClick,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
       pointerEvents: isDisabled ? "none" : "auto"
-    }),
+    },
     /* @__PURE__ */ React.createElement(Icon, { as: CalendarDuo })
   );
 };
@@ -6685,7 +6728,7 @@ var __spreadValues$1D = (a, b) => {
   return a;
 };
 var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
-var __objRest$1j = (source, exclude) => {
+var __objRest$1l = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1D.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -6699,7 +6742,7 @@ var __objRest$1j = (source, exclude) => {
 };
 const StyledField = forwardRef$1(
   (_a, ref) => {
-    var _b = _a, { isInvalid, isDisabled, children, variant } = _b, rest = __objRest$1j(_b, ["isInvalid", "isDisabled", "children", "variant"]);
+    var _b = _a, { isInvalid, isDisabled, children, variant } = _b, rest = __objRest$1l(_b, ["isInvalid", "isDisabled", "children", "variant"]);
     const { styledField } = useMultiStyleConfig("DatePicker", { variant });
     return /* @__PURE__ */ React.createElement(
       Box,
@@ -6810,7 +6853,7 @@ var __spreadValues$1A = (a, b) => {
     }
   return a;
 };
-var __objRest$1i = (source, exclude) => {
+var __objRest$1k = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1A.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -6824,7 +6867,7 @@ var __objRest$1i = (source, exclude) => {
 };
 const CalendarGrid = memo(
   (_a) => {
-    var _b = _a, { state, locale, firstDayOfWeek } = _b, rest = __objRest$1i(_b, ["state", "locale", "firstDayOfWeek"]);
+    var _b = _a, { state, locale, firstDayOfWeek } = _b, rest = __objRest$1k(_b, ["state", "locale", "firstDayOfWeek"]);
     const startDate = state.visibleRange.start;
     const { gridProps, headerProps } = useCalendarGrid(rest, state);
     const weeksInMonth = getWeeksInMonth(startDate, locale);
@@ -6865,7 +6908,7 @@ var __spreadValues$1z = (a, b) => {
   return a;
 };
 var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
-var __objRest$1h = (source, exclude) => {
+var __objRest$1j = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1z.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -6878,7 +6921,7 @@ var __objRest$1h = (source, exclude) => {
   return target;
 };
 const MonthButton = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest$1h(_b, ["children"]);
+  var _b = _a, { children } = _b, rest = __objRest$1j(_b, ["children"]);
   const ref = useRef(null);
   const { buttonProps } = useButton(rest, ref);
   return /* @__PURE__ */ React.createElement(
@@ -7146,7 +7189,7 @@ var __spreadValues$1x = (a, b) => {
   return a;
 };
 var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
-var __objRest$1g = (source, exclude) => {
+var __objRest$1i = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1x.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -7163,7 +7206,7 @@ const StandaloneCalendarGrid = (_a) => {
     state,
     range,
     firstDayOfWeek
-  } = _b, rest = __objRest$1g(_b, [
+  } = _b, rest = __objRest$1i(_b, [
     "state",
     "range",
     "firstDayOfWeek"
@@ -7271,6 +7314,18 @@ var __spreadValues$1v = (a, b) => {
   return a;
 };
 var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+var __objRest$1h = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1v.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1v)
+    for (var prop of __getOwnPropSymbols$1v(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1v.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const DatePicker = (props) => {
   const {
     isDisabled,
@@ -7280,49 +7335,265 @@ const DatePicker = (props) => {
     dateFormat,
     minValue,
     variant = "outline",
-    firstDayOfWeek = "monday"
+    firstDayOfWeek = "monday",
+    value,
+    defaultValue,
+    onChange,
+    maxValue,
+    isReadOnly,
+    isRequired,
+    placeholderValue,
+    isDateUnavailable,
+    granularity,
+    hourCycle,
+    shouldForceLeadingZeros,
+    pageBehavior,
+    defaultOpen,
+    onOpenChange,
+    label,
+    description,
+    errorMessage,
+    id,
+    name,
+    autoFocus,
+    onFocus,
+    onBlur,
+    onFocusChange,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails
   } = props;
   const ref = useRef();
+  const dialogRef = useRef();
   const { group } = useMultiStyleConfig("DatePicker");
-  const state = useDatePickerState(__spreadProps$h(__spreadValues$1v({}, props), {
+  const state = useDatePickerState({
+    value,
+    defaultValue,
+    onChange,
+    minValue,
+    maxValue,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    isInvalid,
+    placeholderValue,
+    isDateUnavailable,
+    granularity,
+    hourCycle,
+    shouldForceLeadingZeros,
+    defaultOpen,
+    onOpenChange,
     shouldCloseOnSelect: false,
     hideTimeZone: true
-  }));
+  });
   const { buttonProps, fieldProps, calendarProps, groupProps, dialogProps } = useDatePicker(
-    __spreadProps$h(__spreadValues$1v({}, props), { minValue: minValue || parseDate("1994-03-08") }),
+    {
+      value,
+      defaultValue,
+      onChange,
+      minValue: minValue || parseDate("1994-03-08"),
+      maxValue,
+      isDisabled,
+      isReadOnly,
+      isRequired,
+      isInvalid,
+      placeholderValue,
+      isDateUnavailable,
+      granularity,
+      hourCycle,
+      shouldForceLeadingZeros,
+      pageBehavior,
+      defaultOpen,
+      onOpenChange,
+      label,
+      description,
+      errorMessage,
+      id,
+      name,
+      autoFocus,
+      onFocus,
+      onBlur,
+      onFocusChange,
+      onKeyDown,
+      onKeyUp,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-details": ariaDetails
+    },
     state,
     ref
   );
-  const togglePopup = () => state.setOpen(!state.isOpen);
+  const {
+    id: buttonId,
+    "aria-haspopup": buttonAriaHasPopup,
+    "aria-label": buttonAriaLabel,
+    "aria-labelledby": buttonAriaLabelledBy,
+    "aria-describedby": buttonAriaDescribedBy,
+    "aria-expanded": buttonAriaExpanded
+  } = buttonProps;
+  const {
+    id: dialogId,
+    "aria-labelledby": dialogAriaLabelledBy
+  } = dialogProps;
+  const {
+    autoFocus: calAutoFocus,
+    value: calValue,
+    onChange: calOnChange,
+    minValue: calMinValue,
+    maxValue: calMaxValue,
+    isDisabled: calIsDisabled,
+    isReadOnly: calIsReadOnly,
+    isDateUnavailable: calIsDateUnavailable,
+    defaultFocusedValue: calDefaultFocusedValue,
+    isInvalid: calIsInvalid,
+    errorMessage: calErrorMessage
+  } = calendarProps;
+  const _a = fieldProps, {
+    id: fieldId,
+    "aria-describedby": fieldAriaDescribedBy,
+    "aria-labelledby": fieldAriaLabelledBy,
+    value: fieldValue,
+    onChange: fieldOnChange,
+    minValue: fieldMinValue,
+    maxValue: fieldMaxValue,
+    placeholderValue: fieldPlaceholderValue,
+    hideTimeZone: fieldHideTimeZone,
+    hourCycle: fieldHourCycle,
+    shouldForceLeadingZeros: fieldShouldForceLeadingZeros,
+    granularity: fieldGranularity,
+    isDisabled: fieldIsDisabled,
+    isReadOnly: fieldIsReadOnly,
+    isRequired: fieldIsRequired,
+    isInvalid: fieldIsInvalid,
+    autoFocus: fieldAutoFocus,
+    name: fieldName
+  } = _a, restFieldProps = __objRest$1h(_a, [
+    "id",
+    "aria-describedby",
+    "aria-labelledby",
+    "value",
+    "onChange",
+    "minValue",
+    "maxValue",
+    "placeholderValue",
+    "hideTimeZone",
+    "hourCycle",
+    "shouldForceLeadingZeros",
+    "granularity",
+    "isDisabled",
+    "isReadOnly",
+    "isRequired",
+    "isInvalid",
+    "autoFocus",
+    "name"
+  ]);
+  const {
+    role: groupRole,
+    id: groupId,
+    "aria-disabled": groupAriaDisabled,
+    "aria-labelledby": groupAriaLabelledBy,
+    "aria-describedby": groupAriaDescribedBy,
+    onKeyDown: groupOnKeyDown,
+    onKeyUp: groupOnKeyUp,
+    onFocus: groupOnFocus,
+    onBlur: groupOnBlur,
+    onPointerDown: groupOnPointerDown,
+    onClick: groupOnClick
+  } = groupProps;
+  const togglePopup = () => {
+    state.setOpen(!state.isOpen);
+  };
+  useOutsideClick({
+    ref: dialogRef,
+    handler: (event) => {
+      var _a2;
+      if ((_a2 = ref.current) == null ? void 0 : _a2.contains(event.target))
+        return;
+      state.setOpen(false);
+    }
+  });
   return /* @__PURE__ */ React.createElement(
     Popover,
     {
       isOpen: state.isOpen,
       onClose: () => state.setOpen(false),
+      closeOnBlur: false,
       placement: "bottom-end"
     },
-    /* @__PURE__ */ React.createElement(PopoverAnchor, null, /* @__PURE__ */ React.createElement(HStack, { minW: 56 }, /* @__PURE__ */ React.createElement(InputGroup, __spreadProps$h(__spreadValues$1v({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
-      StyledField,
-      {
-        isDisabled,
-        isInvalid,
-        variant
-      },
-      /* @__PURE__ */ React.createElement(Box, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(DateField, __spreadProps$h(__spreadValues$1v({}, fieldProps), { dateFormat })))
-    ), /* @__PURE__ */ React.createElement(
-      InputRightElement,
+    /* @__PURE__ */ React.createElement(PopoverAnchor, null, /* @__PURE__ */ React.createElement(HStack, { minW: 56 }, /* @__PURE__ */ React.createElement(
+      InputGroup,
       {
-        sx: { height: "100%", paddingRight: "1" },
-        zIndex: 0
+        role: groupRole,
+        id: groupId,
+        "aria-disabled": groupAriaDisabled,
+        "aria-labelledby": groupAriaLabelledBy,
+        "aria-describedby": groupAriaDescribedBy,
+        onKeyDown: groupOnKeyDown,
+        onKeyUp: groupOnKeyUp,
+        onFocus: groupOnFocus,
+        onBlur: groupOnBlur,
+        onPointerDown: groupOnPointerDown,
+        onClick: groupOnClick,
+        ref,
+        __css: group
       },
       /* @__PURE__ */ React.createElement(
-        Trigger,
-        __spreadProps$h(__spreadValues$1v({}, buttonProps), {
+        StyledField,
+        {
           isDisabled,
-          handleClick: togglePopup
-        })
+          isInvalid,
+          variant
+        },
+        /* @__PURE__ */ React.createElement(Box, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(
+          DateField,
+          __spreadProps$h(__spreadValues$1v({}, restFieldProps), {
+            id: fieldId,
+            "aria-describedby": fieldAriaDescribedBy,
+            "aria-labelledby": fieldAriaLabelledBy,
+            value: fieldValue,
+            onChange: fieldOnChange,
+            minValue: fieldMinValue,
+            maxValue: fieldMaxValue,
+            placeholderValue: fieldPlaceholderValue,
+            hideTimeZone: fieldHideTimeZone,
+            hourCycle: fieldHourCycle,
+            shouldForceLeadingZeros: fieldShouldForceLeadingZeros,
+            granularity: fieldGranularity,
+            isDisabled: fieldIsDisabled,
+            isReadOnly: fieldIsReadOnly,
+            isRequired: fieldIsRequired,
+            isInvalid: fieldIsInvalid,
+            autoFocus: fieldAutoFocus,
+            name: fieldName,
+            dateFormat
+          })
+        ))
+      ),
+      /* @__PURE__ */ React.createElement(
+        InputRightElement,
+        {
+          sx: { height: "100%", paddingRight: "1" },
+          zIndex: 0
+        },
+        /* @__PURE__ */ React.createElement(
+          Trigger,
+          {
+            id: buttonId,
+            "aria-haspopup": buttonAriaHasPopup,
+            "aria-label": buttonAriaLabel,
+            "aria-labelledby": buttonAriaLabelledBy,
+            "aria-describedby": buttonAriaDescribedBy,
+            "aria-expanded": buttonAriaExpanded,
+            isDisabled,
+            handleClick: togglePopup
+          }
+        )
       )
-    )), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement(
       IconButton,
       {
         "aria-label": "reset-date",
@@ -7335,7 +7606,33 @@ const DatePicker = (props) => {
         icon: /* @__PURE__ */ React.createElement(Icon, { as: XCloseSolid })
       }
     ))),
-    state.isOpen && /* @__PURE__ */ React.createElement(PopoverContent, __spreadProps$h(__spreadValues$1v({}, dialogProps), { ref, w: 64, border: "none" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(Calendar, __spreadProps$h(__spreadValues$1v({}, calendarProps), { firstDayOfWeek })))))
+    state.isOpen && /* @__PURE__ */ React.createElement(
+      PopoverContent,
+      {
+        id: dialogId,
+        "aria-labelledby": dialogAriaLabelledBy,
+        ref: dialogRef,
+        w: 64,
+        border: "none"
+      },
+      /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(
+        Calendar,
+        {
+          autoFocus: calAutoFocus,
+          value: calValue,
+          onChange: calOnChange,
+          minValue: calMinValue,
+          maxValue: calMaxValue,
+          isDisabled: calIsDisabled,
+          isReadOnly: calIsReadOnly,
+          isDateUnavailable: calIsDateUnavailable,
+          defaultFocusedValue: calDefaultFocusedValue,
+          isInvalid: calIsInvalid,
+          errorMessage: calErrorMessage,
+          firstDayOfWeek
+        }
+      )))
+    )
   );
 };
 
@@ -7355,7 +7652,7 @@ var __spreadValues$1u = (a, b) => {
     }
   return a;
 };
-var __objRest$1f = (source, exclude) => {
+var __objRest$1g = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1u.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -7368,7 +7665,7 @@ var __objRest$1f = (source, exclude) => {
   return target;
 };
 const Clickable = (_a) => {
-  var _b = _a, { href, linkProps } = _b, rest = __objRest$1f(_b, ["href", "linkProps"]);
+  var _b = _a, { href, linkProps } = _b, rest = __objRest$1g(_b, ["href", "linkProps"]);
   const clickable = useClickable(rest);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, !isNil(href) && /* @__PURE__ */ React.createElement(
     Link$1,
@@ -7908,7 +8205,7 @@ var __spreadValues$1s = (a, b) => {
     }
   return a;
 };
-var __objRest$1e = (source, exclude) => {
+var __objRest$1f = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1s.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -7927,7 +8224,7 @@ const Tooltip = (_a) => {
     title = "",
     description = "",
     hasIcon = false
-  } = _b, rest = __objRest$1e(_b, [
+  } = _b, rest = __objRest$1f(_b, [
     "variant",
     "hasArrow",
     "title",
@@ -7976,6 +8273,18 @@ var __spreadValues$1r = (a, b) => {
   return a;
 };
 var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __objRest$1e = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1r.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1r)
+    for (var prop of __getOwnPropSymbols$1r(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1r.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const parseValue = (value) => {
   if (!isValidDateRange(value))
     return null;
@@ -8016,9 +8325,15 @@ const DateRangePicker = (props) => {
     onCancelChanges,
     "data-testid": dataTestId,
     defaultOpen = false,
-    onOpenChange
+    onOpenChange,
+    placeholderValue,
+    isDateUnavailable,
+    allowsNonContiguousRanges,
+    startName,
+    endName
   } = props;
   const ref = useRef();
+  const dialogRef = useRef();
   const { group } = useMultiStyleConfig("DatePicker");
   const parsedProps = {
     onChange: (date) => {
@@ -8038,9 +8353,9 @@ const DateRangePicker = (props) => {
     maxValue: parsedProps.maxValue,
     isDisabled,
     isInvalid,
-    placeholderValue: props.placeholderValue,
-    isDateUnavailable: props.isDateUnavailable,
-    allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+    placeholderValue,
+    isDateUnavailable,
+    allowsNonContiguousRanges,
     shouldCloseOnSelect: false,
     hideTimeZone: true,
     defaultOpen,
@@ -8064,22 +8379,148 @@ const DateRangePicker = (props) => {
       value: parseValue(value),
       minValue: parsedProps.minValue || parseDate("1994-03-08"),
       maxValue: parsedProps.maxValue,
-      placeholderValue: props.placeholderValue,
-      isDateUnavailable: props.isDateUnavailable,
-      allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+      placeholderValue,
+      isDateUnavailable,
+      allowsNonContiguousRanges,
       isDisabled,
       isInvalid,
-      startName: props.startName,
-      endName: props.endName,
+      startName,
+      endName,
       "aria-label": "Date range picker"
     }, !isNil(dataTestId) && { "data-testid": dataTestId }),
     state,
     ref
   );
-  const togglePopup = () => state.setOpen(!state.isOpen);
+  const {
+    id: buttonId,
+    "aria-haspopup": buttonAriaHasPopup,
+    "aria-label": buttonAriaLabel,
+    "aria-labelledby": buttonAriaLabelledBy,
+    "aria-describedby": buttonAriaDescribedBy,
+    "aria-expanded": buttonAriaExpanded
+  } = buttonProps;
+  const {
+    role: groupRole,
+    id: groupId,
+    "aria-disabled": groupAriaDisabled,
+    "aria-labelledby": groupAriaLabelledBy,
+    "aria-describedby": groupAriaDescribedBy,
+    onKeyDown: groupOnKeyDown,
+    onKeyUp: groupOnKeyUp,
+    onFocus: groupOnFocus,
+    onBlur: groupOnBlur,
+    onPointerDown: groupOnPointerDown,
+    onClick: groupOnClick
+  } = groupProps;
+  const _a = startFieldProps, {
+    id: startFieldId,
+    "aria-describedby": startFieldAriaDescribedBy,
+    "aria-labelledby": startFieldAriaLabelledBy,
+    value: startFieldValue,
+    onChange: startFieldOnChange,
+    minValue: startFieldMinValue,
+    maxValue: startFieldMaxValue,
+    placeholderValue: startFieldPlaceholderValue,
+    hideTimeZone: startFieldHideTimeZone,
+    hourCycle: startFieldHourCycle,
+    shouldForceLeadingZeros: startFieldShouldForceLeadingZeros,
+    granularity: startFieldGranularity,
+    isDisabled: startFieldIsDisabled,
+    isReadOnly: startFieldIsReadOnly,
+    isRequired: startFieldIsRequired,
+    isInvalid: startFieldIsInvalid,
+    autoFocus: startFieldAutoFocus,
+    name: startFieldName
+  } = _a, restStartFieldProps = __objRest$1e(_a, [
+    "id",
+    "aria-describedby",
+    "aria-labelledby",
+    "value",
+    "onChange",
+    "minValue",
+    "maxValue",
+    "placeholderValue",
+    "hideTimeZone",
+    "hourCycle",
+    "shouldForceLeadingZeros",
+    "granularity",
+    "isDisabled",
+    "isReadOnly",
+    "isRequired",
+    "isInvalid",
+    "autoFocus",
+    "name"
+  ]);
+  const _b = endFieldProps, {
+    id: endFieldId,
+    "aria-describedby": endFieldAriaDescribedBy,
+    "aria-labelledby": endFieldAriaLabelledBy,
+    value: endFieldValue,
+    onChange: endFieldOnChange,
+    minValue: endFieldMinValue,
+    maxValue: endFieldMaxValue,
+    placeholderValue: endFieldPlaceholderValue,
+    hideTimeZone: endFieldHideTimeZone,
+    hourCycle: endFieldHourCycle,
+    shouldForceLeadingZeros: endFieldShouldForceLeadingZeros,
+    granularity: endFieldGranularity,
+    isDisabled: endFieldIsDisabled,
+    isReadOnly: endFieldIsReadOnly,
+    isRequired: endFieldIsRequired,
+    isInvalid: endFieldIsInvalid,
+    name: endFieldName
+  } = _b, restEndFieldProps = __objRest$1e(_b, [
+    "id",
+    "aria-describedby",
+    "aria-labelledby",
+    "value",
+    "onChange",
+    "minValue",
+    "maxValue",
+    "placeholderValue",
+    "hideTimeZone",
+    "hourCycle",
+    "shouldForceLeadingZeros",
+    "granularity",
+    "isDisabled",
+    "isReadOnly",
+    "isRequired",
+    "isInvalid",
+    "name"
+  ]);
+  const {
+    id: dialogId,
+    "aria-labelledby": dialogAriaLabelledBy
+  } = dialogProps;
+  const {
+    autoFocus: calAutoFocus,
+    value: calValue,
+    onChange: calOnChange,
+    minValue: calMinValue,
+    maxValue: calMaxValue,
+    isDisabled: calIsDisabled,
+    isReadOnly: calIsReadOnly,
+    isDateUnavailable: calIsDateUnavailable,
+    allowsNonContiguousRanges: calAllowsNonContiguousRanges,
+    defaultFocusedValue: calDefaultFocusedValue,
+    isInvalid: calIsInvalid,
+    errorMessage: calErrorMessage
+  } = calendarProps;
+  const togglePopup = () => {
+    state.setOpen(!state.isOpen);
+  };
   const handleClose = () => {
     state.setOpen(false);
   };
+  useOutsideClick({
+    ref: dialogRef,
+    handler: (event) => {
+      var _a2;
+      if ((_a2 = ref.current) == null ? void 0 : _a2.contains(event.target))
+        return;
+      state.setOpen(false);
+    }
+  });
   const ResetButton = CustomResetButton || /* @__PURE__ */ React.createElement(
     IconButton,
     {
@@ -8123,23 +8564,94 @@ const DateRangePicker = (props) => {
     {
       isOpen: state.isOpen,
       onClose: handleModalClose,
+      closeOnBlur: false,
       placement: "bottom-start"
     },
-    /* @__PURE__ */ React.createElement(PopoverAnchor, null, /* @__PURE__ */ React.createElement(HStack, null, /* @__PURE__ */ React.createElement(InputGroup, __spreadProps$g(__spreadValues$1r({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
-      StyledField,
+    /* @__PURE__ */ React.createElement(PopoverAnchor, null, /* @__PURE__ */ React.createElement(HStack, null, /* @__PURE__ */ React.createElement(
+      InputGroup,
       {
-        isDisabled,
-        isInvalid,
-        variant
+        role: groupRole,
+        id: groupId,
+        "aria-disabled": groupAriaDisabled,
+        "aria-labelledby": groupAriaLabelledBy,
+        "aria-describedby": groupAriaDescribedBy,
+        onKeyDown: groupOnKeyDown,
+        onKeyUp: groupOnKeyUp,
+        onFocus: groupOnFocus,
+        onBlur: groupOnBlur,
+        onPointerDown: groupOnPointerDown,
+        onClick: groupOnClick,
+        ref,
+        __css: group
       },
-      /* @__PURE__ */ React.createElement(HStack, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(DateField, __spreadProps$g(__spreadValues$1r({}, startFieldProps), { dateFormat })), /* @__PURE__ */ React.createElement(P, null, "-"), /* @__PURE__ */ React.createElement(DateField, __spreadProps$g(__spreadValues$1r({}, endFieldProps), { dateFormat })))
-    ), /* @__PURE__ */ React.createElement(InputRightElement, { sx: { height: "100%", paddingRight: "1" } }, /* @__PURE__ */ React.createElement(
-      Trigger,
-      __spreadProps$g(__spreadValues$1r({}, buttonProps), {
-        isDisabled,
-        handleClick: togglePopup
-      })
-    ))), shouldShowResetButton && ResetButton, shouldShowSaveAndCancelButtons && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { label: clearButtonLabel }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(
+        StyledField,
+        {
+          isDisabled,
+          isInvalid,
+          variant
+        },
+        /* @__PURE__ */ React.createElement(HStack, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(
+          DateField,
+          __spreadProps$g(__spreadValues$1r({}, restStartFieldProps), {
+            id: startFieldId,
+            "aria-describedby": startFieldAriaDescribedBy,
+            "aria-labelledby": startFieldAriaLabelledBy,
+            value: startFieldValue,
+            onChange: startFieldOnChange,
+            minValue: startFieldMinValue,
+            maxValue: startFieldMaxValue,
+            placeholderValue: startFieldPlaceholderValue,
+            hideTimeZone: startFieldHideTimeZone,
+            hourCycle: startFieldHourCycle,
+            shouldForceLeadingZeros: startFieldShouldForceLeadingZeros,
+            granularity: startFieldGranularity,
+            isDisabled: startFieldIsDisabled,
+            isReadOnly: startFieldIsReadOnly,
+            isRequired: startFieldIsRequired,
+            isInvalid: startFieldIsInvalid,
+            autoFocus: startFieldAutoFocus,
+            name: startFieldName,
+            dateFormat
+          })
+        ), /* @__PURE__ */ React.createElement(P, null, "-"), /* @__PURE__ */ React.createElement(
+          DateField,
+          __spreadProps$g(__spreadValues$1r({}, restEndFieldProps), {
+            id: endFieldId,
+            "aria-describedby": endFieldAriaDescribedBy,
+            "aria-labelledby": endFieldAriaLabelledBy,
+            value: endFieldValue,
+            onChange: endFieldOnChange,
+            minValue: endFieldMinValue,
+            maxValue: endFieldMaxValue,
+            placeholderValue: endFieldPlaceholderValue,
+            hideTimeZone: endFieldHideTimeZone,
+            hourCycle: endFieldHourCycle,
+            shouldForceLeadingZeros: endFieldShouldForceLeadingZeros,
+            granularity: endFieldGranularity,
+            isDisabled: endFieldIsDisabled,
+            isReadOnly: endFieldIsReadOnly,
+            isRequired: endFieldIsRequired,
+            isInvalid: endFieldIsInvalid,
+            name: endFieldName,
+            dateFormat
+          })
+        ))
+      ),
+      /* @__PURE__ */ React.createElement(InputRightElement, { sx: { height: "100%", paddingRight: "1" } }, /* @__PURE__ */ React.createElement(
+        Trigger,
+        {
+          id: buttonId,
+          "aria-haspopup": buttonAriaHasPopup,
+          "aria-label": buttonAriaLabel,
+          "aria-labelledby": buttonAriaLabelledBy,
+          "aria-describedby": buttonAriaDescribedBy,
+          "aria-expanded": buttonAriaExpanded,
+          isDisabled,
+          handleClick: togglePopup
+        }
+      ))
+    ), shouldShowResetButton && ResetButton, shouldShowSaveAndCancelButtons && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { label: clearButtonLabel }, /* @__PURE__ */ React.createElement(
       IconButton,
       {
         "aria-label": "cancel-date-change",
@@ -8162,20 +8674,41 @@ const DateRangePicker = (props) => {
         icon: /* @__PURE__ */ React.createElement(Icon, { as: CheckSolid })
       }
     ))))),
-    /* @__PURE__ */ React.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React.createElement(PopoverContent, __spreadProps$g(__spreadValues$1r({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(
-      RangeCalendar,
-      __spreadProps$g(__spreadValues$1r({}, calendarProps), {
-        resetDate: cancelOrResetDateChange,
-        handleClose: handleModalClose,
-        fiscalStartMonth: fiscalStartMonth || 0,
-        fiscalStartDay: fiscalStartDay || 0,
-        isClearable,
-        firstDayOfWeek,
-        onSave,
-        clearButtonLabel,
-        buttonLabel
-      })
-    ))))
+    /* @__PURE__ */ React.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React.createElement(
+      PopoverContent,
+      {
+        id: dialogId,
+        "aria-labelledby": dialogAriaLabelledBy,
+        ref: dialogRef,
+        w: "max-content"
+      },
+      /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(
+        RangeCalendar,
+        {
+          autoFocus: calAutoFocus,
+          value: calValue,
+          onChange: calOnChange,
+          minValue: calMinValue,
+          maxValue: calMaxValue,
+          isDisabled: calIsDisabled,
+          isReadOnly: calIsReadOnly,
+          isDateUnavailable: calIsDateUnavailable,
+          allowsNonContiguousRanges: calAllowsNonContiguousRanges,
+          defaultFocusedValue: calDefaultFocusedValue,
+          isInvalid: calIsInvalid,
+          errorMessage: calErrorMessage,
+          resetDate: cancelOrResetDateChange,
+          handleClose: handleModalClose,
+          fiscalStartMonth: fiscalStartMonth || 0,
+          fiscalStartDay: fiscalStartDay || 0,
+          isClearable,
+          firstDayOfWeek,
+          onSave,
+          clearButtonLabel,
+          buttonLabel
+        }
+      )))
+    ))
   );
 };