@northlight/ui 2.43.0 → 2.43.2

package/dist/umd/northlight.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@chakra-ui/react'), require('react'), require('chakra-react-select'), require('ramda'), require('@react-aria/focus'), require('react-hook-form'), require('@chakra-ui/system'), require('@northlight/tokens'), require('@emotion/react'), require('@chakra-ui/theme-tools'), require('@northlight/icons'), require('@hookform/resolvers/joi'), require('@react-aria/checkbox'), require('@react-aria/radio'), require('@react-aria/utils'), require('@react-stately/radio'), require('@react-stately/checkbox'), require('@react-aria/datepicker'), require('@react-stately/datepicker'), require('@internationalized/date'), require('@react-aria/button'), require('@react-aria/i18n'), require('@react-stately/calendar'), require('@react-aria/calendar'), require('react-router-dom'), require('@chakra-ui/clickable'), require('framer-motion'), require('@dnd-kit/core'), require('@dnd-kit/utilities'), require('@dnd-kit/sortable'), require('@dnd-kit/modifiers'), require('react-window'), require('react-virtualized-auto-sizer'), require('react-avatar-editor'), require('react-number-format'), require('react-input-mask'), require('yafu')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@chakra-ui/react', 'react', 'chakra-react-select', 'ramda', '@react-aria/focus', 'react-hook-form', '@chakra-ui/system', '@northlight/tokens', '@emotion/react', '@chakra-ui/theme-tools', '@northlight/icons', '@hookform/resolvers/joi', '@react-aria/checkbox', '@react-aria/radio', '@react-aria/utils', '@react-stately/radio', '@react-stately/checkbox', '@react-aria/datepicker', '@react-stately/datepicker', '@internationalized/date', '@react-aria/button', '@react-aria/i18n', '@react-stately/calendar', '@react-aria/calendar', 'react-router-dom', '@chakra-ui/clickable', 'framer-motion', '@dnd-kit/core', '@dnd-kit/utilities', '@dnd-kit/sortable', '@dnd-kit/modifiers', 'react-window', 'react-virtualized-auto-sizer', 'react-avatar-editor', 'react-number-format', 'react-input-mask', 'yafu'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.northlight = {}, global.react, global.React, global.chakraReactSelect, global.ramda, global.focus, global.reactHookForm, global.system, global.tokens, global.react$1, global.themeTools, global.NorthlightIcons, global.joi, global.checkbox$1, global.radio$1, global.utils, global.radio, global.checkbox, global.datepicker, global.datepicker$1, global.date, global.button, global.i18n, global.calendar$1, global.calendar, global.reactRouterDom, global.clickable, global.framerMotion, global.core, global.utilities, global.sortable, global.modifiers, global.reactWindow, global.AutoSizer, global.AvatarEditor, global.reactNumberFormat, global.InputMask, global.yafu));
-})(this, (function (exports, react, React, chakraReactSelect, ramda, focus, reactHookForm, system, tokens, react$1, themeTools, NorthlightIcons, joi, checkbox$1, radio$1, utils, radio, checkbox, datepicker, datepicker$1, date, button, i18n, calendar$1, calendar, reactRouterDom, clickable, framerMotion, core, utilities, sortable, modifiers, reactWindow, AutoSizer, AvatarEditor, reactNumberFormat, InputMask, yafu) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@chakra-ui/react'), require('react'), require('chakra-react-select'), require('ramda'), require('@react-aria/focus'), require('react-hook-form'), require('@chakra-ui/system'), require('@northlight/tokens'), require('@emotion/react'), require('@chakra-ui/theme-tools'), require('@northlight/icons'), require('@hookform/resolvers/joi'), require('@react-aria/checkbox'), require('@react-aria/radio'), require('@react-aria/utils'), require('@react-stately/radio'), require('@react-stately/checkbox'), require('@react-aria/datepicker'), require('@react-stately/datepicker'), require('@internationalized/date'), require('@react-aria/i18n'), require('@react-stately/calendar'), require('@react-aria/calendar'), require('@react-aria/button'), require('react-router-dom'), require('@chakra-ui/clickable'), require('framer-motion'), require('@dnd-kit/core'), require('@dnd-kit/utilities'), require('@dnd-kit/sortable'), require('@dnd-kit/modifiers'), require('react-window'), require('react-virtualized-auto-sizer'), require('react-avatar-editor'), require('react-number-format'), require('react-input-mask'), require('yafu')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@chakra-ui/react', 'react', 'chakra-react-select', 'ramda', '@react-aria/focus', 'react-hook-form', '@chakra-ui/system', '@northlight/tokens', '@emotion/react', '@chakra-ui/theme-tools', '@northlight/icons', '@hookform/resolvers/joi', '@react-aria/checkbox', '@react-aria/radio', '@react-aria/utils', '@react-stately/radio', '@react-stately/checkbox', '@react-aria/datepicker', '@react-stately/datepicker', '@internationalized/date', '@react-aria/i18n', '@react-stately/calendar', '@react-aria/calendar', '@react-aria/button', 'react-router-dom', '@chakra-ui/clickable', 'framer-motion', '@dnd-kit/core', '@dnd-kit/utilities', '@dnd-kit/sortable', '@dnd-kit/modifiers', 'react-window', 'react-virtualized-auto-sizer', 'react-avatar-editor', 'react-number-format', 'react-input-mask', 'yafu'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.northlight = {}, global.react, global.React, global.chakraReactSelect, global.ramda, global.focus, global.reactHookForm, global.system, global.tokens, global.react$1, global.themeTools, global.NorthlightIcons, global.joi, global.checkbox$1, global.radio$1, global.utils, global.radio, global.checkbox, global.datepicker, global.datepicker$1, global.date, global.i18n, global.calendar$1, global.calendar, global.button, global.reactRouterDom, global.clickable, global.framerMotion, global.core, global.utilities, global.sortable, global.modifiers, global.reactWindow, global.AutoSizer, global.AvatarEditor, global.reactNumberFormat, global.InputMask, global.yafu));
+})(this, (function (exports, react, React, chakraReactSelect, ramda, focus, reactHookForm, system, tokens, react$1, themeTools, NorthlightIcons, joi, checkbox$1, radio$1, utils, radio, checkbox, datepicker, datepicker$1, date, i18n, calendar$1, calendar, button, reactRouterDom, clickable, framerMotion, core, utilities, sortable, modifiers, reactWindow, AutoSizer, AvatarEditor, reactNumberFormat, InputMask, yafu) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -23,24 +23,6 @@
 
   var NorthlightIcons__namespace = /*#__PURE__*/_interopNamespaceDefault(NorthlightIcons);
 
-  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(react.Accordion, __spreadValues$2x({}, props));
-
   var __defProp$2w = Object.defineProperty;
   var __getOwnPropSymbols$2w = Object.getOwnPropertySymbols;
   var __hasOwnProp$2w = Object.prototype.hasOwnProperty;
@@ -57,7 +39,7 @@
       }
     return a;
   };
-  const AccordionButton = (props) => /* @__PURE__ */ React.createElement(react.AccordionButton, __spreadValues$2w({}, props));
+  const Accordion = (props) => /* @__PURE__ */ React.createElement(react.Accordion, __spreadValues$2w({}, props));
 
   var __defProp$2v = Object.defineProperty;
   var __getOwnPropSymbols$2v = Object.getOwnPropertySymbols;
@@ -75,7 +57,7 @@
       }
     return a;
   };
-  const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(react.AccordionPanel, __spreadValues$2v({}, props));
+  const AccordionButton = (props) => /* @__PURE__ */ React.createElement(react.AccordionButton, __spreadValues$2v({}, props));
 
   var __defProp$2u = Object.defineProperty;
   var __getOwnPropSymbols$2u = Object.getOwnPropertySymbols;
@@ -93,7 +75,25 @@
       }
     return a;
   };
-  const AccordionItem = (props) => /* @__PURE__ */ React.createElement(react.AccordionItem, __spreadValues$2u({}, props));
+  const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(react.AccordionPanel, __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(react.AccordionItem, __spreadValues$2t({}, props));
 
   const useDebounce = (value, delay) => {
     const [debouncedValue, setDebouncedValue] = React.useState(value);
@@ -438,24 +438,6 @@
     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) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$2t({}, styles)) : child;
-
   var __defProp$2s = Object.defineProperty;
   var __getOwnPropSymbols$2s = Object.getOwnPropertySymbols;
   var __hasOwnProp$2s = Object.prototype.hasOwnProperty;
@@ -472,9 +454,27 @@
       }
     return a;
   };
+  const passPropsToChild = (child, styles) => React.isValidElement(child) ? React.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 = ramda.T) => {
     const childrenAsArr = React.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;
   };
 
@@ -548,80 +548,80 @@
     };
   };
 
-  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",
@@ -634,12 +634,12 @@
       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%"
@@ -1568,58 +1568,99 @@
 
   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
           }
         }
       })
@@ -2004,19 +2045,19 @@
     })
   };
 
-  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;
   };
@@ -2041,7 +2082,7 @@
         bgColor: "background.default",
         borderRadius: "input.outline"
       },
-      dateSelect: __spreadValues$2p({
+      dateSelect: __spreadValues$2o({
         fontWeight: "semibold",
         border: "none",
         padding: "1",
@@ -3390,19 +3431,19 @@
     }
   };
 
-  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;
   };
@@ -3458,7 +3499,7 @@
   const FilePicker$1 = {
     parts: ["filePicker", "fileItem", "multiFilePicker"],
     baseStyle: ({ theme: { sizes, colors }, hasLoaded, isImage, isInvalid, currentTheme, sx }) => ({
-      filePicker: ramda.merge(__spreadValues$2o(__spreadValues$2o({
+      filePicker: ramda.merge(__spreadValues$2n(__spreadValues$2n({
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -3471,7 +3512,7 @@
         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",
@@ -3496,8 +3537,8 @@
     }),
     variants: {
       ai: ({ isInvalid }) => ({
-        filePicker: __spreadValues$2o({}, getAiColorStyles(isInvalid)),
-        multiFilePicker: __spreadValues$2o({}, getAiColorStyles(isInvalid))
+        filePicker: __spreadValues$2n({}, getAiColorStyles(isInvalid)),
+        multiFilePicker: __spreadValues$2n({}, getAiColorStyles(isInvalid))
       })
     }
   };
@@ -3763,39 +3804,6 @@
     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({}, tokens.WebappSystemTokensSet.st.color), tokens.WebappComponentsTokensSet.color), {
-      text: __spreadValues$2n(__spreadValues$2n({}, tokens.WebappSystemTokensSet.st.color.text), tokens.WebappComponentsTokensSet.color.text),
-      border: __spreadValues$2n(__spreadValues$2n({}, tokens.WebappSystemTokensSet.st.color.border), tokens.WebappComponentsTokensSet.color.border)
-    }),
-    sizes: tokens.WebappComponentsTokensSet.sizing,
-    space: tokens.WebappComponentsTokensSet.spacing,
-    radii: __spreadValues$2n(__spreadValues$2n({}, tokens.WebappSystemTokensSet.st.borderRadius), tokens.WebappComponentsTokensSet.borderRadius),
-    borders: __spreadValues$2n(__spreadValues$2n({}, tokens.WebappSystemTokensSet.st.borderWidth), tokens.WebappComponentsTokensSet.borderWidth),
-    opacity: tokens.WebappComponentsTokensSet.opacity,
-    typography: tokens.typography,
-    shadows: __spreadValues$2n({}, tokens.WebappSystemTokensSet.st.boxShadow)
-  };
-
   var __defProp$2m = Object.defineProperty;
   var __defProps$x = Object.defineProperties;
   var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
@@ -3815,17 +3823,18 @@
     return a;
   };
   var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
-  const TottSkin = {
-    colors: __spreadProps$x(__spreadValues$2m(__spreadValues$2m({}, tokens.TottSystemTokensSet.st.color), tokens.TottComponentsTokensSet.color), {
-      border: __spreadValues$2m(__spreadValues$2m({}, tokens.TottSystemTokensSet.st.color.border), tokens.TottComponentsTokensSet.color.border)
+  const WebappSkin = {
+    colors: __spreadProps$x(__spreadValues$2m(__spreadValues$2m({}, tokens.WebappSystemTokensSet.st.color), tokens.WebappComponentsTokensSet.color), {
+      text: __spreadValues$2m(__spreadValues$2m({}, tokens.WebappSystemTokensSet.st.color.text), tokens.WebappComponentsTokensSet.color.text),
+      border: __spreadValues$2m(__spreadValues$2m({}, tokens.WebappSystemTokensSet.st.color.border), tokens.WebappComponentsTokensSet.color.border)
     }),
-    sizes: tokens.TottComponentsTokensSet.sizing,
-    space: tokens.TottComponentsTokensSet.spacing,
-    radii: __spreadValues$2m(__spreadValues$2m({}, tokens.TottSystemTokensSet.st.borderRadius), tokens.TottComponentsTokensSet.borderRadius),
-    borders: __spreadValues$2m(__spreadValues$2m({}, tokens.TottSystemTokensSet.st.borderWidth), tokens.TottComponentsTokensSet.borderWidth),
-    opacity: tokens.TottComponentsTokensSet.opacity,
+    sizes: tokens.WebappComponentsTokensSet.sizing,
+    space: tokens.WebappComponentsTokensSet.spacing,
+    radii: __spreadValues$2m(__spreadValues$2m({}, tokens.WebappSystemTokensSet.st.borderRadius), tokens.WebappComponentsTokensSet.borderRadius),
+    borders: __spreadValues$2m(__spreadValues$2m({}, tokens.WebappSystemTokensSet.st.borderWidth), tokens.WebappComponentsTokensSet.borderWidth),
+    opacity: tokens.WebappComponentsTokensSet.opacity,
     typography: tokens.typography,
-    shadows: __spreadValues$2m({}, tokens.TottSystemTokensSet.st.boxShadow)
+    shadows: __spreadValues$2m({}, tokens.WebappSystemTokensSet.st.boxShadow)
   };
 
   var __defProp$2l = Object.defineProperty;
@@ -3847,21 +3856,22 @@
     return a;
   };
   var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
-  const CamphouseLightSkin = {
-    colors: __spreadProps$w(__spreadValues$2l(__spreadValues$2l({}, tokens.CamphouseLightSystemTokensSet.st.color), tokens.CamphouseLightComponentsTokensSet.color), {
-      text: __spreadValues$2l(__spreadValues$2l({}, tokens.CamphouseLightSystemTokensSet.st.color.text), tokens.CamphouseLightComponentsTokensSet.color.text),
-      border: __spreadValues$2l(__spreadValues$2l({}, tokens.CamphouseLightSystemTokensSet.st.color.border), tokens.CamphouseLightComponentsTokensSet.color.border)
+  const TottSkin = {
+    colors: __spreadProps$w(__spreadValues$2l(__spreadValues$2l({}, tokens.TottSystemTokensSet.st.color), tokens.TottComponentsTokensSet.color), {
+      border: __spreadValues$2l(__spreadValues$2l({}, tokens.TottSystemTokensSet.st.color.border), tokens.TottComponentsTokensSet.color.border)
     }),
-    sizes: tokens.CamphouseLightComponentsTokensSet.sizing,
-    space: tokens.CamphouseLightComponentsTokensSet.spacing,
-    radii: __spreadValues$2l(__spreadValues$2l({}, tokens.CamphouseLightSystemTokensSet.st.borderRadius), tokens.CamphouseLightComponentsTokensSet.borderRadius),
-    borders: __spreadValues$2l(__spreadValues$2l({}, tokens.CamphouseLightSystemTokensSet.st.borderWidth), tokens.CamphouseLightComponentsTokensSet.borderWidth),
-    opacity: tokens.CamphouseLightComponentsTokensSet.opacity,
+    sizes: tokens.TottComponentsTokensSet.sizing,
+    space: tokens.TottComponentsTokensSet.spacing,
+    radii: __spreadValues$2l(__spreadValues$2l({}, tokens.TottSystemTokensSet.st.borderRadius), tokens.TottComponentsTokensSet.borderRadius),
+    borders: __spreadValues$2l(__spreadValues$2l({}, tokens.TottSystemTokensSet.st.borderWidth), tokens.TottComponentsTokensSet.borderWidth),
+    opacity: tokens.TottComponentsTokensSet.opacity,
     typography: tokens.typography,
-    shadows: __spreadValues$2l({}, tokens.CamphouseLightSystemTokensSet.st.boxShadow)
+    shadows: __spreadValues$2l({}, tokens.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;
@@ -3877,6 +3887,37 @@
       }
     return a;
   };
+  var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
+  const CamphouseLightSkin = {
+    colors: __spreadProps$v(__spreadValues$2k(__spreadValues$2k({}, tokens.CamphouseLightSystemTokensSet.st.color), tokens.CamphouseLightComponentsTokensSet.color), {
+      text: __spreadValues$2k(__spreadValues$2k({}, tokens.CamphouseLightSystemTokensSet.st.color.text), tokens.CamphouseLightComponentsTokensSet.color.text),
+      border: __spreadValues$2k(__spreadValues$2k({}, tokens.CamphouseLightSystemTokensSet.st.color.border), tokens.CamphouseLightComponentsTokensSet.color.border)
+    }),
+    sizes: tokens.CamphouseLightComponentsTokensSet.sizing,
+    space: tokens.CamphouseLightComponentsTokensSet.spacing,
+    radii: __spreadValues$2k(__spreadValues$2k({}, tokens.CamphouseLightSystemTokensSet.st.borderRadius), tokens.CamphouseLightComponentsTokensSet.borderRadius),
+    borders: __spreadValues$2k(__spreadValues$2k({}, tokens.CamphouseLightSystemTokensSet.st.borderWidth), tokens.CamphouseLightComponentsTokensSet.borderWidth),
+    opacity: tokens.CamphouseLightComponentsTokensSet.opacity,
+    typography: tokens.typography,
+    shadows: __spreadValues$2k({}, tokens.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: ""
@@ -3890,7 +3931,7 @@
       }
     },
     styles: {
-      global: __spreadValues$2k({
+      global: __spreadValues$2j({
         html: {
           scrollBehavior: "smooth"
         },
@@ -3906,7 +3947,7 @@
       heading: "Inter, sans-serif",
       body: "Inter, sans-serif"
     },
-    components: __spreadValues$2k({}, components),
+    components: __spreadValues$2j({}, components),
     colors: tokens.palette,
     zIndices: tokens.coreZIndex,
     sizes: tokens.coreSizing,
@@ -3922,33 +3963,33 @@
   const tottTheme = react.extendTheme(overrides, TottSkin);
   const camphouseLightTheme = react.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;
@@ -3962,7 +4003,7 @@
       "data-testid": testId,
       value = [],
       onError
-    } = _b, rest = __objRest$1V(_b, [
+    } = _b, rest = __objRest$1X(_b, [
       "options",
       "onChange",
       "isLoading",
@@ -4022,7 +4063,7 @@
     };
     return /* @__PURE__ */ React.createElement(react.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...",
@@ -4050,36 +4091,36 @@
         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;
@@ -4089,7 +4130,7 @@
       name,
       image,
       variant = "square"
-    } = _b, rest = __objRest$1U(_b, [
+    } = _b, rest = __objRest$1W(_b, [
       "name",
       "image",
       "variant"
@@ -4098,10 +4139,10 @@
     const {
       container,
       text
-    } = react.useMultiStyleConfig("Avatar", __spreadValues$2i({ variant, image }, rest));
+    } = react.useMultiStyleConfig("Avatar", __spreadValues$2h({ variant, image }, rest));
     return /* @__PURE__ */ React.createElement(
       react.chakra.div,
-      __spreadValues$2i({
+      __spreadValues$2h({
         __css: container,
         "data-testid": "organization-logo-test-id"
       }, rest),
@@ -4115,30 +4156,30 @@
     );
   };
 
-  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;
@@ -4147,30 +4188,12 @@
     var _b = _a, {
       variant = "success",
       children
-    } = _b, rest = __objRest$1T(_b, [
+    } = _b, rest = __objRest$1V(_b, [
       "variant",
       "children"
     ]);
-    return /* @__PURE__ */ React.createElement(react.Alert, __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(react.Alert, __spreadValues$2g({ variant }, rest), children);
   };
-  const AspectRatio = (props) => /* @__PURE__ */ React.createElement(react.AspectRatio, __spreadValues$2g({}, props));
 
   var __defProp$2f = Object.defineProperty;
   var __getOwnPropSymbols$2f = Object.getOwnPropertySymbols;
@@ -4188,14 +4211,32 @@
       }
     return a;
   };
-  var __objRest$1S = (source, exclude) => {
+  const AspectRatio = (props) => /* @__PURE__ */ React.createElement(react.AspectRatio, __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;
@@ -4206,7 +4247,7 @@
       size,
       color,
       boxSize
-    } = _b, rest = __objRest$1S(_b, [
+    } = _b, rest = __objRest$1U(_b, [
       "as",
       "size",
       "color",
@@ -4216,7 +4257,7 @@
     const styles = react.useStyleConfig("Icon", { size, color, boxSize });
     return /* @__PURE__ */ React.createElement(
       react.Icon,
-      __spreadValues$2f({
+      __spreadValues$2e({
         ref,
         sx: styles
       }, rest),
@@ -4231,30 +4272,30 @@
     return /* @__PURE__ */ React.createElement(react.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;
@@ -4267,7 +4308,7 @@
       image,
       size,
       bgColor
-    } = _b, rest = __objRest$1R(_b, [
+    } = _b, rest = __objRest$1T(_b, [
       "variant",
       "notificationCount",
       "name",
@@ -4282,7 +4323,7 @@
       name,
       bgColor
     });
-    return /* @__PURE__ */ React.createElement(react.Box, __spreadValues$2e({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadValues$2d({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React.createElement(
       react.chakra.img,
       {
         alt: name,
@@ -4299,54 +4340,6 @@
     ), 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 = React.forwardRef((_a, ref) => {
-    var _b = _a, {
-      children,
-      sx = {}
-    } = _b, rest = __objRest$1Q(_b, [
-      "children",
-      "sx"
-    ]);
-    const styles = react.useStyleConfig("H1", { sx });
-    return /* @__PURE__ */ React.createElement(
-      react.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;
@@ -4363,7 +4356,7 @@
       }
     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)
@@ -4375,19 +4368,19 @@
       }
     return target;
   };
-  const H2 = React.forwardRef((_a, ref) => {
+  const H1 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1P(_b, [
+    } = _b, rest = __objRest$1S(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H2", { sx });
+    const styles = react.useStyleConfig("H1", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$2c({
-        as: "h2",
+        as: "h1",
         sx: styles,
         ref
       }, rest),
@@ -4411,7 +4404,7 @@
       }
     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)
@@ -4423,19 +4416,19 @@
       }
     return target;
   };
-  const H3 = React.forwardRef((_a, ref) => {
+  const H2 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1O(_b, [
+    } = _b, rest = __objRest$1R(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H3", { sx });
+    const styles = react.useStyleConfig("H2", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$2b({
-        as: "h3",
+        as: "h2",
         sx: styles,
         ref
       }, rest),
@@ -4459,7 +4452,7 @@
       }
     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)
@@ -4471,19 +4464,19 @@
       }
     return target;
   };
-  const H4 = React.forwardRef((_a, ref) => {
+  const H3 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1N(_b, [
+    } = _b, rest = __objRest$1Q(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H4", { sx });
+    const styles = react.useStyleConfig("H3", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$2a({
-        as: "h4",
+        as: "h3",
         sx: styles,
         ref
       }, rest),
@@ -4507,7 +4500,7 @@
       }
     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)
@@ -4519,19 +4512,19 @@
       }
     return target;
   };
-  const H5 = React.forwardRef((_a, ref) => {
+  const H4 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1M(_b, [
+    } = _b, rest = __objRest$1P(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H5", { sx });
+    const styles = react.useStyleConfig("H4", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$29({
-        as: "h5",
+        as: "h4",
         sx: styles,
         ref
       }, rest),
@@ -4555,7 +4548,7 @@
       }
     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)
@@ -4567,19 +4560,19 @@
       }
     return target;
   };
-  const H6 = React.forwardRef((_a, ref) => {
+  const H5 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1L(_b, [
+    } = _b, rest = __objRest$1O(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H6", { sx });
+    const styles = react.useStyleConfig("H5", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$28({
-        as: "h6",
+        as: "h5",
         sx: styles,
         ref
       }, rest),
@@ -4603,7 +4596,7 @@
       }
     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)
@@ -4615,21 +4608,19 @@
       }
     return target;
   };
-  const P = React.forwardRef((_a, ref) => {
+  const H6 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
-      variant = "16",
       sx = {}
-    } = _b, rest = __objRest$1K(_b, [
+    } = _b, rest = __objRest$1N(_b, [
       "children",
-      "variant",
       "sx"
     ]);
-    const styles = react.useStyleConfig("P", { variant, sx });
+    const styles = react.useStyleConfig("H6", { sx });
     return /* @__PURE__ */ React.createElement(
-      react.Text,
+      react.Heading,
       __spreadValues$27({
-        variant,
+        as: "h6",
         sx: styles,
         ref
       }, rest),
@@ -4653,7 +4644,7 @@
       }
     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)
@@ -4665,13 +4656,27 @@
       }
     return target;
   };
-  const Blockquote = React.forwardRef(
-    (_a, ref) => {
-      var _b = _a, { children, sx = {} } = _b, rest = __objRest$1J(_b, ["children", "sx"]);
-      const styles = react.useStyleConfig("Blockquote", { sx });
-      return /* @__PURE__ */ React.createElement(react.Text, __spreadValues$26({ as: "span", sx: styles, ref }, rest), children);
-    }
-  );
+  const P = React.forwardRef((_a, ref) => {
+    var _b = _a, {
+      children,
+      variant = "16",
+      sx = {}
+    } = _b, rest = __objRest$1M(_b, [
+      "children",
+      "variant",
+      "sx"
+    ]);
+    const styles = react.useStyleConfig("P", { variant, sx });
+    return /* @__PURE__ */ React.createElement(
+      react.Text,
+      __spreadValues$26({
+        variant,
+        sx: styles,
+        ref
+      }, rest),
+      children
+    );
+  });
 
   var __defProp$25 = Object.defineProperty;
   var __getOwnPropSymbols$25 = Object.getOwnPropertySymbols;
@@ -4689,7 +4694,7 @@
       }
     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)
@@ -4701,25 +4706,13 @@
       }
     return target;
   };
-  const Capitalized = React.forwardRef((_a, ref) => {
-    var _b = _a, {
-      children,
-      sx = {}
-    } = _b, rest = __objRest$1I(_b, [
-      "children",
-      "sx"
-    ]);
-    const styles = react.useStyleConfig("Capitalized", { sx });
-    return /* @__PURE__ */ React.createElement(
-      react.Text,
-      __spreadValues$25({
-        as: "span",
-        sx: styles,
-        ref
-      }, rest),
-      children
-    );
-  });
+  const Blockquote = React.forwardRef(
+    (_a, ref) => {
+      var _b = _a, { children, sx = {} } = _b, rest = __objRest$1L(_b, ["children", "sx"]);
+      const styles = react.useStyleConfig("Blockquote", { sx });
+      return /* @__PURE__ */ React.createElement(react.Text, __spreadValues$25({ as: "span", sx: styles, ref }, rest), children);
+    }
+  );
 
   var __defProp$24 = Object.defineProperty;
   var __getOwnPropSymbols$24 = Object.getOwnPropertySymbols;
@@ -4737,7 +4730,7 @@
       }
     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)
@@ -4749,15 +4742,15 @@
       }
     return target;
   };
-  const Lead = React.forwardRef((_a, ref) => {
+  const Capitalized = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1H(_b, [
+    } = _b, rest = __objRest$1K(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("Lead", { sx });
+    const styles = react.useStyleConfig("Capitalized", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$24({
@@ -4785,7 +4778,7 @@
       }
     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)
@@ -4797,19 +4790,19 @@
       }
     return target;
   };
-  const Small = React.forwardRef((_a, ref) => {
+  const Lead = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1G(_b, [
+    } = _b, rest = __objRest$1J(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("Small", { sx });
+    const styles = react.useStyleConfig("Lead", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$23({
-        as: "small",
+        as: "span",
         sx: styles,
         ref
       }, rest),
@@ -4833,7 +4826,7 @@
       }
     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)
@@ -4845,19 +4838,19 @@
       }
     return target;
   };
-  const Tiny = React.forwardRef((_a, ref) => {
+  const Small = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1F(_b, [
+    } = _b, rest = __objRest$1I(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("Tiny", { sx });
+    const styles = react.useStyleConfig("Small", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$22({
-        as: "span",
+        as: "small",
         sx: styles,
         ref
       }, rest),
@@ -4881,7 +4874,7 @@
       }
     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)
@@ -4893,22 +4886,20 @@
       }
     return target;
   };
-  const Label = React.forwardRef((_a, ref) => {
+  const Tiny = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
-      size = "sm",
       sx = {}
-    } = _b, rest = __objRest$1E(_b, [
+    } = _b, rest = __objRest$1H(_b, [
       "children",
-      "size",
       "sx"
     ]);
-    const styles = react.useStyleConfig("Label", { sx, size });
+    const styles = react.useStyleConfig("Tiny", { sx });
     return /* @__PURE__ */ React.createElement(
-      react.FormLabel,
+      react.Text,
       __spreadValues$21({
+        as: "span",
         sx: styles,
-        requiredIndicator: /* @__PURE__ */ React.createElement(react.VisuallyHidden, null),
         ref
       }, rest),
       children
@@ -4931,7 +4922,7 @@
       }
     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)
@@ -4943,13 +4934,63 @@
       }
     return target;
   };
+  const Label = React.forwardRef((_a, ref) => {
+    var _b = _a, {
+      children,
+      size = "sm",
+      sx = {}
+    } = _b, rest = __objRest$1G(_b, [
+      "children",
+      "size",
+      "sx"
+    ]);
+    const styles = react.useStyleConfig("Label", { sx, size });
+    return /* @__PURE__ */ React.createElement(
+      react.FormLabel,
+      __spreadValues$20({
+        sx: styles,
+        requiredIndicator: /* @__PURE__ */ React.createElement(react.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 = React.forwardRef(
     (_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 = react.useStyleConfig("NumVal", { sx, size });
       return /* @__PURE__ */ React.createElement(
         react.Text,
-        __spreadValues$20({
+        __spreadValues$1$({
           as: "span",
           sx: styles,
           ref
@@ -5039,53 +5080,6 @@
     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] = React.useState(0);
-    const childrenWithMargin = getChildrenWithProps(
-      children,
-      { ml: spacing },
-      (_child, idx) => idx > 0
-    );
-    return /* @__PURE__ */ React.createElement(react.HStack, __spreadValues$1$({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(react.HStack, { spacing: 0 }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, childrenWithMargin)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small, { sx: { color: "brand" } }, "+", nbrRemainingAvatars));
-  };
-
   var __defProp$1_ = Object.defineProperty;
   var __getOwnPropSymbols$1_ = Object.getOwnPropertySymbols;
   var __hasOwnProp$1_ = Object.prototype.hasOwnProperty;
@@ -5102,7 +5096,7 @@
       }
     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)
@@ -5114,22 +5108,24 @@
       }
     return target;
   };
-  const Badge = React.forwardRef((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__namespace[iconAs] : NorthlightIcons.MediatoolLogoSolid;
-    const currentTheme = useCurrentTheme();
-    return /* @__PURE__ */ React.createElement(react.Badge, __spreadValues$1_({ ref, currentTheme }, rest), /* @__PURE__ */ React.createElement(react.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] = React.useState(0);
+    const childrenWithMargin = getChildrenWithProps(
+      children,
+      { ml: spacing },
+      (_child, idx) => idx > 0
+    );
+    return /* @__PURE__ */ React.createElement(react.HStack, __spreadValues$1_({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(react.HStack, { spacing: 0 }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, childrenWithMargin)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small, { sx: { color: "brand" } }, "+", nbrRemainingAvatars));
+  };
 
   var __defProp$1Z = Object.defineProperty;
   var __getOwnPropSymbols$1Z = Object.getOwnPropertySymbols;
@@ -5147,7 +5143,7 @@
       }
     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)
@@ -5159,19 +5155,22 @@
       }
     return target;
   };
-  const Blinker = (_a) => {
-    var _b = _a, {
-      color = "",
-      size,
-      isBlinking = true
-    } = _b, rest = __objRest$1A(_b, [
-      "color",
-      "size",
-      "isBlinking"
+  const Badge = React.forwardRef((props, ref) => {
+    const _a = props, {
+      children,
+      withIcon,
+      iconPosition = "left",
+      iconAs
+    } = _a, rest = __objRest$1D(_a, [
+      "children",
+      "withIcon",
+      "iconPosition",
+      "iconAs"
     ]);
-    const styles = react.useStyleConfig("Blinker", { color, size, isBlinking });
-    return /* @__PURE__ */ React.createElement(react.Box, __spreadValues$1Z({ sx: styles, "data-testid": "blinker-test-id" }, rest));
-  };
+    const IconComponent = iconAs ? NorthlightIcons__namespace[iconAs] : NorthlightIcons.MediatoolLogoSolid;
+    const currentTheme = useCurrentTheme();
+    return /* @__PURE__ */ React.createElement(react.Badge, __spreadValues$1Z({ ref, currentTheme }, rest), /* @__PURE__ */ React.createElement(react.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;
@@ -5189,7 +5188,7 @@
       }
     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)
@@ -5201,9 +5200,18 @@
       }
     return target;
   };
-  const Spinner = (_a) => {
-    var rest = __objRest$1z(_a, []);
-    return /* @__PURE__ */ React.createElement(react.Spinner, __spreadValues$1Y({}, rest));
+  const Blinker = (_a) => {
+    var _b = _a, {
+      color = "",
+      size,
+      isBlinking = true
+    } = _b, rest = __objRest$1C(_b, [
+      "color",
+      "size",
+      "isBlinking"
+    ]);
+    const styles = react.useStyleConfig("Blinker", { color, size, isBlinking });
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadValues$1Y({ sx: styles, "data-testid": "blinker-test-id" }, rest));
   };
 
   var __defProp$1X = Object.defineProperty;
@@ -5222,14 +5230,47 @@
       }
     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(react.Spinner, __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;
@@ -5242,10 +5283,10 @@
   };
   const Button = React.forwardRef(
     (_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(
         react.Button,
-        __spreadValues$1X({
+        __spreadValues$1W({
           variant,
           ref,
           size,
@@ -5261,30 +5302,30 @@
     }
   );
 
-  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;
@@ -5296,7 +5337,7 @@
       name,
       size = "md",
       variant = "default"
-    } = _b, rest = __objRest$1x(_b, [
+    } = _b, rest = __objRest$1z(_b, [
       "value",
       "onChange",
       "name",
@@ -5306,7 +5347,7 @@
     const controlledValue = typeof value === "boolean" ? { isChecked: value } : { value };
     return /* @__PURE__ */ React.createElement(
       react.Checkbox,
-      __spreadValues$1W(__spreadValues$1W({
+      __spreadValues$1V(__spreadValues$1V({
         size,
         id: name,
         onChange,
@@ -5331,30 +5372,30 @@
     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;
@@ -5371,7 +5412,7 @@
       shouldTrim = true,
       innerFormStyle = {},
       joiSchema
-    } = _b, rest = __objRest$1w(_b, [
+    } = _b, rest = __objRest$1y(_b, [
       "initialValues",
       "onSubmit",
       "children",
@@ -5394,7 +5435,7 @@
         return joi.joiResolver(joiSchema);
       return void 0;
     };
-    const newMethods = methods || reactHookForm.useForm(__spreadValues$1V({
+    const newMethods = methods || reactHookForm.useForm(__spreadValues$1U({
       defaultValues: initialValues,
       resolver: getResolver()
     }, formSettings));
@@ -5420,36 +5461,36 @@
       newMethods.trigger();
       e.preventDefault();
     };
-    return /* @__PURE__ */ React.createElement(reactHookForm.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(reactHookForm.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;
@@ -5457,12 +5498,12 @@
   const FormLabel = React.forwardRef((_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%",
@@ -5478,30 +5519,30 @@
     );
   });
 
-  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;
@@ -5516,7 +5557,7 @@
       noLabelConnection = false,
       validate,
       control: passedControl
-    } = _b, rest = __objRest$1u(_b, [
+    } = _b, rest = __objRest$1w(_b, [
       "name",
       "label",
       "children",
@@ -5532,7 +5573,7 @@
     const fieldError = getFieldError(name, errors);
     return /* @__PURE__ */ React.createElement(react.FormControl, { isInvalid: !!fieldError, isRequired, ref }, /* @__PURE__ */ React.createElement(
       react.Stack,
-      __spreadValues$1T({
+      __spreadValues$1S({
         spacing: "auto",
         direction,
         alignItems: direction === "column" ? "stretch" : "center"
@@ -5560,30 +5601,30 @@
     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;
@@ -5599,7 +5640,7 @@
       direction = "row",
       labelPlacement = "left",
       labelSize = "md"
-    } = _b, rest = __objRest$1t(_b, [
+    } = _b, rest = __objRest$1v(_b, [
       "name",
       "label",
       "variant",
@@ -5634,7 +5675,7 @@
           },
           /* @__PURE__ */ React.createElement(
             Checkbox,
-            __spreadValues$1S({
+            __spreadValues$1R({
               name,
               onChange: (e) => {
                 onChange(e);
@@ -5651,30 +5692,30 @@
     );
   });
 
-  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;
@@ -5688,7 +5729,7 @@
       direction,
       validate,
       onChange: onChangeCallback = ramda.identity
-    } = _b, rest = __objRest$1s(_b, [
+    } = _b, rest = __objRest$1u(_b, [
       "name",
       "label",
       "children",
@@ -5709,7 +5750,7 @@
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         react.CheckboxGroup,
-        __spreadValues$1R({
+        __spreadValues$1Q({
           onChange: (e) => {
             onChange(e);
             onChangeCallback(e);
@@ -5722,30 +5763,30 @@
     ));
   });
 
-  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;
@@ -5756,7 +5797,7 @@
       icon,
       "aria-label": ariaLabel,
       children
-    } = _b, rest = __objRest$1r(_b, [
+    } = _b, rest = __objRest$1t(_b, [
       "variant",
       "icon",
       "aria-label",
@@ -5767,7 +5808,7 @@
     const IconWithSize = React.cloneElement(IconComponent, { size: (_a2 = IconComponent.props.size) != null ? _a2 : rest.size });
     return /* @__PURE__ */ React.createElement(
       react.IconButton,
-      __spreadValues$1Q({
+      __spreadValues$1P({
         variant,
         icon: IconWithSize,
         "aria-label": ariaLabel,
@@ -5820,23 +5861,23 @@
     );
   });
 
-  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(react.Popover, __spreadValues$1P({ isLazy: true }, props));
+  const Popover = (props) => /* @__PURE__ */ React.createElement(react.Popover, __spreadValues$1O({ isLazy: true }, props));
 
   const ColorsExpandButton = ({
     onClick,
@@ -5876,41 +5917,6 @@
     );
   };
 
-  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(react.Portal, __spreadValues$1O({}, rest), children);
-  };
-
   var __defProp$1N = Object.defineProperty;
   var __getOwnPropSymbols$1N = Object.getOwnPropertySymbols;
   var __hasOwnProp$1N = Object.prototype.hasOwnProperty;
@@ -5927,7 +5933,7 @@
       }
     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)
@@ -5939,6 +5945,41 @@
       }
     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(react.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 = () => {
@@ -5951,7 +5992,7 @@
       size = "md",
       shouldRenderInPortal = false,
       popoverProps
-    } = _b, rest = __objRest$1p(_b, [
+    } = _b, rest = __objRest$1r(_b, [
       "onChange",
       "clearable",
       "colors",
@@ -6016,14 +6057,14 @@
     };
     return /* @__PURE__ */ React.createElement(react.Box, { "data-testid": "color-picker-test-id" }, /* @__PURE__ */ React.createElement(
       Popover,
-      __spreadValues$1N({
+      __spreadValues$1M({
         isOpen,
         onClose,
         initialFocusRef
       }, popoverProps),
       /* @__PURE__ */ React.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React.createElement(
         IconButton,
-        __spreadValues$1N({
+        __spreadValues$1M({
           onClick: onToggle,
           "aria-label": name || "color picker",
           name,
@@ -6086,30 +6127,30 @@
     ));
   };
 
-  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;
@@ -6121,7 +6162,7 @@
       direction,
       isRequired,
       validate
-    } = _b, rest = __objRest$1o(_b, [
+    } = _b, rest = __objRest$1q(_b, [
       "name",
       "label",
       "direction",
@@ -6139,7 +6180,7 @@
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         ColorPicker,
-        __spreadValues$1M({
+        __spreadValues$1L({
           name,
           onChange,
           value
@@ -6148,29 +6189,29 @@
     );
   };
 
-  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 = React.createContext(null);
   const useFlipButtonState = (props, isMulti) => isMulti ? checkbox.useCheckboxGroupState(props) : radio.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 ? checkbox$1.useCheckboxGroup(
@@ -6187,33 +6228,33 @@
     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;
@@ -6228,7 +6269,7 @@
       icon,
       value,
       iconPlacement = "left"
-    } = _a, rest = __objRest$1n(_a, [
+    } = _a, rest = __objRest$1p(_a, [
       "children",
       "size",
       "variant",
@@ -6240,7 +6281,7 @@
     ]);
     const state = React.useContext(FlipButtonContext);
     const ref = React.useRef(null);
-    const propsWithoutChildren = ramda.omit(["children"], __spreadProps$s(__spreadValues$1K({}, props), { "aria-label": `${isMulti ? "Checkbox" : "Radio"}-input for ${value}` }));
+    const propsWithoutChildren = ramda.omit(["children"], __spreadProps$r(__spreadValues$1J({}, props), { "aria-label": `${isMulti ? "Checkbox" : "Radio"}-input for ${value}` }));
     const { inputProps } = isMulti ? checkbox$1.useCheckboxGroupItem(propsWithoutChildren, state, ref) : radio$1.useRadio(propsWithoutChildren, state, ref);
     const { button, buttonIcon } = react.useMultiStyleConfig("FlipButton", { size, variant });
     const { focusProps, isFocusVisible: isFocused } = focus.useFocusRing();
@@ -6252,7 +6293,7 @@
     };
     const focusRing = isFocused ? focusStyles : {};
     const isSelected = isMulti ? state.isSelected(value) : state.selectedValue === value;
-    const flipButtonProps = __spreadProps$s(__spreadValues$1K({}, utils.mergeProps(inputProps, focusProps)), {
+    const flipButtonProps = __spreadProps$r(__spreadValues$1J({}, utils.mergeProps(inputProps, focusProps)), {
       ref,
       style: { opacity: "0", width: "0", height: "0" },
       "aria-label": isMulti ? "Checkbox-input" : "Radio-input"
@@ -6264,7 +6305,7 @@
       as: "label",
       cursor: "pointer"
     };
-    return typeof children === "function" ? children(__spreadValues$1K({
+    return typeof children === "function" ? children(__spreadValues$1J({
       state,
       containerProps,
       flipButtonProps,
@@ -6284,39 +6325,39 @@
         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 || NorthlightIcons.CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React.createElement(react.SlideFade, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon, { as: icon || NorthlightIcons.CheckSolid, sx: buttonIcon })),
       /* @__PURE__ */ React.createElement(react.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;
@@ -6333,7 +6374,7 @@
       variant,
       icon,
       sx = {}
-    } = _a, rest = __objRest$1m(_a, [
+    } = _a, rest = __objRest$1o(_a, [
       "isMulti",
       "name",
       "children",
@@ -6348,7 +6389,7 @@
     const { state, flipButtonGroupProps } = useFlipButton(props, isMulti);
     const numberOfButtons = React.Children.count(children);
     const childrenWithProps = React.Children.toArray(children).map(
-      (child) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$1J({
+      (child) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$1I({
         key: child.props.value,
         isMulti,
         variant,
@@ -6367,7 +6408,7 @@
     const restWithoutOnChange = ramda.omit(["onChange"], rest);
     return /* @__PURE__ */ React.createElement(
       react.Stack,
-      __spreadValues$1J(__spreadProps$r(__spreadValues$1J({}, flipButtonGroupProps), {
+      __spreadValues$1I(__spreadProps$q(__spreadValues$1I({}, flipButtonGroupProps), {
         direction,
         id: name,
         spacing: 0,
@@ -6377,30 +6418,30 @@
     );
   };
 
-  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;
@@ -6415,7 +6456,7 @@
       iconPlacement = "left",
       onChange: onChangeCallback = ramda.identity,
       validate
-    } = _b, rest = __objRest$1l(_b, [
+    } = _b, rest = __objRest$1n(_b, [
       "name",
       "label",
       "children",
@@ -6437,7 +6478,7 @@
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         FlipButtonGroup,
-        __spreadValues$1I({
+        __spreadValues$1H({
           name,
           onChange: (e) => {
             onChange(e);
@@ -6452,30 +6493,30 @@
     );
   });
 
-  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;
@@ -6485,10 +6526,10 @@
   };
   const ResizeHandle = React.forwardRef(
     (_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(
         react.Box,
-        __spreadValues$1H({
+        __spreadValues$1G({
           ref,
           cursor: "col-resize",
           _hover: hoverAndActiveStyles,
@@ -6505,40 +6546,42 @@
     }
   );
 
-  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 = React.useRef(null);
-    const { buttonProps } = button.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: NorthlightIcons.CalendarDuo })
     );
   };
@@ -6662,7 +6705,7 @@
     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)
@@ -6676,7 +6719,7 @@
   };
   const StyledField = React.forwardRef(
     (_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 } = react.useMultiStyleConfig("DatePicker", { variant });
       return /* @__PURE__ */ React.createElement(
         react.Box,
@@ -6787,7 +6830,7 @@
       }
     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)
@@ -6801,7 +6844,7 @@
   };
   const CalendarGrid = React.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 } = calendar.useCalendarGrid(rest, state);
       const weeksInMonth = date.getWeeksInMonth(startDate, locale);
@@ -6842,7 +6885,7 @@
     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)
@@ -6855,7 +6898,7 @@
     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 = React.useRef(null);
     const { buttonProps } = button.useButton(rest, ref);
     return /* @__PURE__ */ React.createElement(
@@ -7123,7 +7166,7 @@
     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)
@@ -7140,7 +7183,7 @@
       state,
       range,
       firstDayOfWeek
-    } = _b, rest = __objRest$1g(_b, [
+    } = _b, rest = __objRest$1i(_b, [
       "state",
       "range",
       "firstDayOfWeek"
@@ -7248,6 +7291,18 @@
     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,
@@ -7257,49 +7312,265 @@
       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 = React.useRef();
+    const dialogRef = React.useRef();
     const { group } = react.useMultiStyleConfig("DatePicker");
-    const state = datepicker$1.useDatePickerState(__spreadProps$h(__spreadValues$1v({}, props), {
+    const state = datepicker$1.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 } = datepicker.useDatePicker(
-      __spreadProps$h(__spreadValues$1v({}, props), { minValue: minValue || date.parseDate("1994-03-08") }),
+      {
+        value,
+        defaultValue,
+        onChange,
+        minValue: minValue || date.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);
+    };
+    react.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(react.PopoverAnchor, null, /* @__PURE__ */ React.createElement(react.HStack, { minW: 56 }, /* @__PURE__ */ React.createElement(react.InputGroup, __spreadProps$h(__spreadValues$1v({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
-        StyledField,
-        {
-          isDisabled,
-          isInvalid,
-          variant
-        },
-        /* @__PURE__ */ React.createElement(react.Box, { paddingInlineStart: "1a", paddingInlineEnd: 10 }, /* @__PURE__ */ React.createElement(DateField, __spreadProps$h(__spreadValues$1v({}, fieldProps), { dateFormat })))
-      ), /* @__PURE__ */ React.createElement(
-        react.InputRightElement,
+      /* @__PURE__ */ React.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React.createElement(react.HStack, { minW: 56 }, /* @__PURE__ */ React.createElement(
+        react.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(react.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(
+          react.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",
@@ -7312,7 +7583,33 @@
           icon: /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.XCloseSolid })
         }
       ))),
-      state.isOpen && /* @__PURE__ */ React.createElement(react.PopoverContent, __spreadProps$h(__spreadValues$1v({}, dialogProps), { ref, w: 64, border: "none" }), /* @__PURE__ */ React.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(Calendar, __spreadProps$h(__spreadValues$1v({}, calendarProps), { firstDayOfWeek })))))
+      state.isOpen && /* @__PURE__ */ React.createElement(
+        react.PopoverContent,
+        {
+          id: dialogId,
+          "aria-labelledby": dialogAriaLabelledBy,
+          ref: dialogRef,
+          w: 64,
+          border: "none"
+        },
+        /* @__PURE__ */ React.createElement(focus.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
+          }
+        )))
+      )
     );
   };
 
@@ -7332,7 +7629,7 @@
       }
     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)
@@ -7345,7 +7642,7 @@
     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$1 = clickable.useClickable(rest);
     return /* @__PURE__ */ React.createElement(React.Fragment, null, !ramda.isNil(href) && /* @__PURE__ */ React.createElement(
       react.Link,
@@ -7885,7 +8182,7 @@
       }
     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)
@@ -7904,7 +8201,7 @@
       title = "",
       description = "",
       hasIcon = false
-    } = _b, rest = __objRest$1e(_b, [
+    } = _b, rest = __objRest$1f(_b, [
       "variant",
       "hasArrow",
       "title",
@@ -7953,6 +8250,18 @@
     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;
@@ -7993,9 +8302,15 @@
       onCancelChanges,
       "data-testid": dataTestId,
       defaultOpen = false,
-      onOpenChange
+      onOpenChange,
+      placeholderValue,
+      isDateUnavailable,
+      allowsNonContiguousRanges,
+      startName,
+      endName
     } = props;
     const ref = React.useRef();
+    const dialogRef = React.useRef();
     const { group } = react.useMultiStyleConfig("DatePicker");
     const parsedProps = {
       onChange: (date) => {
@@ -8015,9 +8330,9 @@
       maxValue: parsedProps.maxValue,
       isDisabled,
       isInvalid,
-      placeholderValue: props.placeholderValue,
-      isDateUnavailable: props.isDateUnavailable,
-      allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+      placeholderValue,
+      isDateUnavailable,
+      allowsNonContiguousRanges,
       shouldCloseOnSelect: false,
       hideTimeZone: true,
       defaultOpen,
@@ -8041,22 +8356,148 @@
         value: parseValue(value),
         minValue: parsedProps.minValue || date.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"
       }, !ramda.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);
     };
+    react.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,
       {
@@ -8100,23 +8541,94 @@
       {
         isOpen: state.isOpen,
         onClose: handleModalClose,
+        closeOnBlur: false,
         placement: "bottom-start"
       },
-      /* @__PURE__ */ React.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React.createElement(react.HStack, null, /* @__PURE__ */ React.createElement(react.InputGroup, __spreadProps$g(__spreadValues$1r({}, groupProps), { ref, __css: group }), /* @__PURE__ */ React.createElement(
-        StyledField,
+      /* @__PURE__ */ React.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React.createElement(react.HStack, null, /* @__PURE__ */ React.createElement(
+        react.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(react.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(react.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(react.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(react.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",
@@ -8139,20 +8651,41 @@
           icon: /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.CheckSolid })
         }
       ))))),
-      /* @__PURE__ */ React.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React.createElement(react.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(
+        react.PopoverContent,
+        {
+          id: dialogId,
+          "aria-labelledby": dialogAriaLabelledBy,
+          ref: dialogRef,
+          w: "max-content"
+        },
+        /* @__PURE__ */ React.createElement(focus.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
+          }
+        )))
+      ))
     );
   };