@northlight/ui 2.9.2 → 2.10.0

package/dist/umd/northlight.js

@@ -4,6 +4,24 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.northlight = {}, global.react, global.React, global.icons, global.system, global.tokens, global.ramda, global.reactHookForm, global.focus, 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.chakraReactSelect, global.core, global.utilities, global.sortable, global.modifiers, global.reactWindow, global.AutoSizer, global.AvatarEditor, global.themeTools, global.InputMask));
 })(this, (function (exports, react, React, icons, system, tokens, ramda, reactHookForm, focus, checkbox$1, radio$1, utils, radio, checkbox, datepicker, datepicker$1, date, button, i18n, calendar$1, calendar, reactRouterDom, clickable, framerMotion, chakraReactSelect, core, utilities, sortable, modifiers, reactWindow, AutoSizer, AvatarEditor, themeTools, InputMask) { 'use strict';
 
+  var __defProp$26 = Object.defineProperty;
+  var __getOwnPropSymbols$26 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$26 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$26 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$26 = (obj, key, value) => key in obj ? __defProp$26(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$26 = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$26.call(b, prop))
+        __defNormalProp$26(a, prop, b[prop]);
+    if (__getOwnPropSymbols$26)
+      for (var prop of __getOwnPropSymbols$26(b)) {
+        if (__propIsEnum$26.call(b, prop))
+          __defNormalProp$26(a, prop, b[prop]);
+      }
+    return a;
+  };
+  const Accordion = (props) => /* @__PURE__ */ React.createElement(react.Accordion, __spreadValues$26({}, props));
+
   var __defProp$25 = Object.defineProperty;
   var __getOwnPropSymbols$25 = Object.getOwnPropertySymbols;
   var __hasOwnProp$25 = Object.prototype.hasOwnProperty;
@@ -20,7 +38,7 @@
       }
     return a;
   };
-  const Accordion = (props) => /* @__PURE__ */ React.createElement(react.Accordion, __spreadValues$25({}, props));
+  const AccordionButton = (props) => /* @__PURE__ */ React.createElement(react.AccordionButton, __spreadValues$25({}, props));
 
   var __defProp$24 = Object.defineProperty;
   var __getOwnPropSymbols$24 = Object.getOwnPropertySymbols;
@@ -38,7 +56,7 @@
       }
     return a;
   };
-  const AccordionButton = (props) => /* @__PURE__ */ React.createElement(react.AccordionButton, __spreadValues$24({}, props));
+  const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(react.AccordionPanel, __spreadValues$24({}, props));
 
   var __defProp$23 = Object.defineProperty;
   var __getOwnPropSymbols$23 = Object.getOwnPropertySymbols;
@@ -56,7 +74,7 @@
       }
     return a;
   };
-  const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(react.AccordionPanel, __spreadValues$23({}, props));
+  const AccordionItem = (props) => /* @__PURE__ */ React.createElement(react.AccordionItem, __spreadValues$23({}, props));
 
   var __defProp$22 = Object.defineProperty;
   var __getOwnPropSymbols$22 = Object.getOwnPropertySymbols;
@@ -74,32 +92,14 @@
       }
     return a;
   };
-  const AccordionItem = (props) => /* @__PURE__ */ React.createElement(react.AccordionItem, __spreadValues$22({}, props));
-
-  var __defProp$21 = Object.defineProperty;
-  var __getOwnPropSymbols$21 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$21 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$21 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$21 = (obj, key, value) => key in obj ? __defProp$21(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$21 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$21.call(b, prop))
-        __defNormalProp$21(a, prop, b[prop]);
-    if (__getOwnPropSymbols$21)
-      for (var prop of __getOwnPropSymbols$21(b)) {
-        if (__propIsEnum$21.call(b, prop))
-          __defNormalProp$21(a, prop, b[prop]);
-      }
-    return a;
-  };
   var __objRest$1u = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$21.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$22.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$21)
-      for (var prop of __getOwnPropSymbols$21(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$21.call(source, prop))
+    if (source != null && __getOwnPropSymbols$22)
+      for (var prop of __getOwnPropSymbols$22(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$22.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -118,7 +118,7 @@
     const {
       container,
       text
-    } = react.useMultiStyleConfig("Avatar", __spreadValues$21({ variant, image }, rest));
+    } = react.useMultiStyleConfig("Avatar", __spreadValues$22({ variant, image }, rest));
     return /* @__PURE__ */ React.createElement(
       react.chakra.div,
       {
@@ -135,30 +135,30 @@
     );
   };
 
-  var __defProp$20 = Object.defineProperty;
-  var __getOwnPropSymbols$20 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$20 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$20 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$20 = (obj, key, value) => key in obj ? __defProp$20(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$20 = (a, b) => {
+  var __defProp$21 = Object.defineProperty;
+  var __getOwnPropSymbols$21 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$21 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$21 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$21 = (obj, key, value) => key in obj ? __defProp$21(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$21 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$20.call(b, prop))
-        __defNormalProp$20(a, prop, b[prop]);
-    if (__getOwnPropSymbols$20)
-      for (var prop of __getOwnPropSymbols$20(b)) {
-        if (__propIsEnum$20.call(b, prop))
-          __defNormalProp$20(a, prop, b[prop]);
+      if (__hasOwnProp$21.call(b, prop))
+        __defNormalProp$21(a, prop, b[prop]);
+    if (__getOwnPropSymbols$21)
+      for (var prop of __getOwnPropSymbols$21(b)) {
+        if (__propIsEnum$21.call(b, prop))
+          __defNormalProp$21(a, prop, b[prop]);
       }
     return a;
   };
   var __objRest$1t = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$20.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$21.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$20)
-      for (var prop of __getOwnPropSymbols$20(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$20.call(source, prop))
+    if (source != null && __getOwnPropSymbols$21)
+      for (var prop of __getOwnPropSymbols$21(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$21.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -171,9 +171,27 @@
       "variant",
       "children"
     ]);
-    return /* @__PURE__ */ React.createElement(react.Alert, __spreadValues$20({ variant }, rest), children);
+    return /* @__PURE__ */ React.createElement(react.Alert, __spreadValues$21({ variant }, rest), children);
   };
 
+  var __defProp$20 = Object.defineProperty;
+  var __getOwnPropSymbols$20 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$20 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$20 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$20 = (obj, key, value) => key in obj ? __defProp$20(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$20 = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$20.call(b, prop))
+        __defNormalProp$20(a, prop, b[prop]);
+    if (__getOwnPropSymbols$20)
+      for (var prop of __getOwnPropSymbols$20(b)) {
+        if (__propIsEnum$20.call(b, prop))
+          __defNormalProp$20(a, prop, b[prop]);
+      }
+    return a;
+  };
+  const AspectRatio = (props) => /* @__PURE__ */ React.createElement(react.AspectRatio, __spreadValues$20({}, props));
+
   var __defProp$1$ = Object.defineProperty;
   var __getOwnPropSymbols$1$ = Object.getOwnPropertySymbols;
   var __hasOwnProp$1$ = Object.prototype.hasOwnProperty;
@@ -190,32 +208,14 @@
       }
     return a;
   };
-  const AspectRatio = (props) => /* @__PURE__ */ React.createElement(react.AspectRatio, __spreadValues$1$({}, props));
-
-  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$1s = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1_.call(source, prop) && exclude.indexOf(prop) < 0)
+      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))
+    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;
@@ -236,7 +236,7 @@
     const styles = react.useStyleConfig("Icon", { size, color, boxSize });
     return /* @__PURE__ */ React.createElement(
       react.Icon,
-      __spreadValues$1_({
+      __spreadValues$1$({
         ref,
         sx: styles
       }, rest),
@@ -325,6 +325,24 @@
     return fieldError;
   }
 
+  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;
+  };
+  const passPropsToChild = (child, styles) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$1_({}, styles)) : child;
+
   var __defProp$1Z = Object.defineProperty;
   var __getOwnPropSymbols$1Z = Object.getOwnPropertySymbols;
   var __hasOwnProp$1Z = Object.prototype.hasOwnProperty;
@@ -341,27 +359,9 @@
       }
     return a;
   };
-  const passPropsToChild = (child, styles) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$1Z({}, styles)) : child;
-
-  var __defProp$1Y = Object.defineProperty;
-  var __getOwnPropSymbols$1Y = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1Y = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1Y = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1Y = (obj, key, value) => key in obj ? __defProp$1Y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1Y = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$1Y.call(b, prop))
-        __defNormalProp$1Y(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1Y)
-      for (var prop of __getOwnPropSymbols$1Y(b)) {
-        if (__propIsEnum$1Y.call(b, prop))
-          __defNormalProp$1Y(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$1Y({}, styles)) : child);
+    const childrenWithoutFocus = childrenAsArr.map((child, i) => predicate(child, i) ? passPropsToChild(child, __spreadValues$1Z({}, styles)) : child);
     return childrenWithoutFocus;
   };
 
@@ -395,30 +395,30 @@
     return /* @__PURE__ */ React.createElement(react.chakra.span, { sx: badge }, notificationCount > 999 ? "999+" : notificationCount);
   };
 
-  var __defProp$1X = Object.defineProperty;
-  var __getOwnPropSymbols$1X = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1X = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1X = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1X = (obj, key, value) => key in obj ? __defProp$1X(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1X = (a, b) => {
+  var __defProp$1Y = Object.defineProperty;
+  var __getOwnPropSymbols$1Y = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1Y = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1Y = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1Y = (obj, key, value) => key in obj ? __defProp$1Y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1Y = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$1X.call(b, prop))
-        __defNormalProp$1X(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1X)
-      for (var prop of __getOwnPropSymbols$1X(b)) {
-        if (__propIsEnum$1X.call(b, prop))
-          __defNormalProp$1X(a, prop, b[prop]);
+      if (__hasOwnProp$1Y.call(b, prop))
+        __defNormalProp$1Y(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1Y)
+      for (var prop of __getOwnPropSymbols$1Y(b)) {
+        if (__propIsEnum$1Y.call(b, prop))
+          __defNormalProp$1Y(a, prop, b[prop]);
       }
     return a;
   };
   var __objRest$1r = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1X.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$1Y.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$1Y)
+      for (var prop of __getOwnPropSymbols$1Y(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$1Y.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -443,7 +443,7 @@
       size,
       name
     });
-    return /* @__PURE__ */ React.createElement(react.Box, __spreadValues$1X({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadValues$1Y({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React.createElement(
       react.chakra.img,
       {
         alt: name,
@@ -460,6 +460,53 @@
     ), notificationCount > 0 && /* @__PURE__ */ React.createElement(AvatarBadge, { notificationCount }));
   };
 
+  var __defProp$1X = Object.defineProperty;
+  var __getOwnPropSymbols$1X = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1X = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1X = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1X = (obj, key, value) => key in obj ? __defProp$1X(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1X = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$1X.call(b, prop))
+        __defNormalProp$1X(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1X)
+      for (var prop of __getOwnPropSymbols$1X(b)) {
+        if (__propIsEnum$1X.call(b, prop))
+          __defNormalProp$1X(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __objRest$1q = (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 H1$1 = (_a) => {
+    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$1X({
+        as: "h1",
+        sx: styles
+      }, rest),
+      children
+    );
+  };
+
   var __defProp$1W = Object.defineProperty;
   var __getOwnPropSymbols$1W = Object.getOwnPropertySymbols;
   var __hasOwnProp$1W = Object.prototype.hasOwnProperty;
@@ -476,7 +523,7 @@
       }
     return a;
   };
-  var __objRest$1q = (source, exclude) => {
+  var __objRest$1p = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1W.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -488,19 +535,19 @@
       }
     return target;
   };
-  const H1$1 = (_a) => {
+  const H2$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1q(_b, [
+    } = _b, rest = __objRest$1p(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H1", { sx });
+    const styles = react.useStyleConfig("H2", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$1W({
-        as: "h1",
+        as: "h2",
         sx: styles
       }, rest),
       children
@@ -523,7 +570,7 @@
       }
     return a;
   };
-  var __objRest$1p = (source, exclude) => {
+  var __objRest$1o = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1V.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -535,19 +582,19 @@
       }
     return target;
   };
-  const H2$1 = (_a) => {
+  const H3$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1p(_b, [
+    } = _b, rest = __objRest$1o(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H2", { sx });
+    const styles = react.useStyleConfig("H3", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$1V({
-        as: "h2",
+        as: "h3",
         sx: styles
       }, rest),
       children
@@ -570,7 +617,7 @@
       }
     return a;
   };
-  var __objRest$1o = (source, exclude) => {
+  var __objRest$1n = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1U.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -582,19 +629,19 @@
       }
     return target;
   };
-  const H3$1 = (_a) => {
+  const H4$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1o(_b, [
+    } = _b, rest = __objRest$1n(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H3", { sx });
+    const styles = react.useStyleConfig("H4", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$1U({
-        as: "h3",
+        as: "h4",
         sx: styles
       }, rest),
       children
@@ -617,7 +664,7 @@
       }
     return a;
   };
-  var __objRest$1n = (source, exclude) => {
+  var __objRest$1m = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1T.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -629,19 +676,19 @@
       }
     return target;
   };
-  const H4$1 = (_a) => {
+  const H5$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1n(_b, [
+    } = _b, rest = __objRest$1m(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H4", { sx });
+    const styles = react.useStyleConfig("H5", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$1T({
-        as: "h4",
+        as: "h5",
         sx: styles
       }, rest),
       children
@@ -664,7 +711,7 @@
       }
     return a;
   };
-  var __objRest$1m = (source, exclude) => {
+  var __objRest$1l = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1S.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -676,19 +723,19 @@
       }
     return target;
   };
-  const H5$1 = (_a) => {
+  const H6$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1m(_b, [
+    } = _b, rest = __objRest$1l(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H5", { sx });
+    const styles = react.useStyleConfig("H6", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$1S({
-        as: "h5",
+        as: "h6",
         sx: styles
       }, rest),
       children
@@ -711,7 +758,7 @@
       }
     return a;
   };
-  var __objRest$1l = (source, exclude) => {
+  var __objRest$1k = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1R.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -723,19 +770,21 @@
       }
     return target;
   };
-  const H6$1 = (_a) => {
+  const P$1 = (_a) => {
     var _b = _a, {
       children,
+      variant = "16",
       sx = {}
-    } = _b, rest = __objRest$1l(_b, [
+    } = _b, rest = __objRest$1k(_b, [
       "children",
+      "variant",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H6", { sx });
+    const styles = react.useStyleConfig("P", { variant, sx });
     return /* @__PURE__ */ React.createElement(
-      react.Heading,
+      react.Text,
       __spreadValues$1R({
-        as: "h6",
+        variant,
         sx: styles
       }, rest),
       children
@@ -758,7 +807,7 @@
       }
     return a;
   };
-  var __objRest$1k = (source, exclude) => {
+  var __objRest$1j = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1Q.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -770,25 +819,10 @@
       }
     return target;
   };
-  const P$1 = (_a) => {
-    var _b = _a, {
-      children,
-      variant = "16",
-      sx = {}
-    } = _b, rest = __objRest$1k(_b, [
-      "children",
-      "variant",
-      "sx"
-    ]);
-    const styles = react.useStyleConfig("P", { variant, sx });
-    return /* @__PURE__ */ React.createElement(
-      react.Text,
-      __spreadValues$1Q({
-        variant,
-        sx: styles
-      }, rest),
-      children
-    );
+  const Blockquote$1 = (_a) => {
+    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$1Q({ as: "span", sx: styles }, rest), children);
   };
 
   var __defProp$1P = Object.defineProperty;
@@ -807,7 +841,7 @@
       }
     return a;
   };
-  var __objRest$1j = (source, exclude) => {
+  var __objRest$1i = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1P.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -819,10 +853,23 @@
       }
     return target;
   };
-  const Blockquote$1 = (_a) => {
-    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$1P({ as: "span", sx: styles }, rest), children);
+  const Capitalized$1 = (_a) => {
+    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$1P({
+        as: "span",
+        sx: styles
+      }, rest),
+      children
+    );
   };
 
   var __defProp$1O = Object.defineProperty;
@@ -841,7 +888,7 @@
       }
     return a;
   };
-  var __objRest$1i = (source, exclude) => {
+  var __objRest$1h = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1O.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -853,15 +900,15 @@
       }
     return target;
   };
-  const Capitalized$1 = (_a) => {
+  const Lead$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1i(_b, [
+    } = _b, rest = __objRest$1h(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("Capitalized", { sx });
+    const styles = react.useStyleConfig("Lead", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$1O({
@@ -888,7 +935,7 @@
       }
     return a;
   };
-  var __objRest$1h = (source, exclude) => {
+  var __objRest$1g = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1N.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -900,19 +947,19 @@
       }
     return target;
   };
-  const Lead$1 = (_a) => {
+  const Small$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1h(_b, [
+    } = _b, rest = __objRest$1g(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("Lead", { sx });
+    const styles = react.useStyleConfig("Small", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$1N({
-        as: "span",
+        as: "small",
         sx: styles
       }, rest),
       children
@@ -935,7 +982,7 @@
       }
     return a;
   };
-  var __objRest$1g = (source, exclude) => {
+  var __objRest$1f = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1M.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -947,19 +994,19 @@
       }
     return target;
   };
-  const Small$1 = (_a) => {
+  const Tiny$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1g(_b, [
+    } = _b, rest = __objRest$1f(_b, [
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("Small", { sx });
+    const styles = react.useStyleConfig("Tiny", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$1M({
-        as: "small",
+        as: "span",
         sx: styles
       }, rest),
       children
@@ -982,7 +1029,7 @@
       }
     return a;
   };
-  var __objRest$1f = (source, exclude) => {
+  var __objRest$1e = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1L.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -994,53 +1041,6 @@
       }
     return target;
   };
-  const Tiny$1 = (_a) => {
-    var _b = _a, {
-      children,
-      sx = {}
-    } = _b, rest = __objRest$1f(_b, [
-      "children",
-      "sx"
-    ]);
-    const styles = react.useStyleConfig("Tiny", { sx });
-    return /* @__PURE__ */ React.createElement(
-      react.Text,
-      __spreadValues$1L({
-        as: "span",
-        sx: styles
-      }, rest),
-      children
-    );
-  };
-
-  var __defProp$1K = Object.defineProperty;
-  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$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 __objRest$1e = (source, exclude) => {
-    var target = {};
-    for (var prop in source)
-      if (__hasOwnProp$1K.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))
-          target[prop] = source[prop];
-      }
-    return target;
-  };
   const Label$1 = (_a) => {
     var _b = _a, {
       children,
@@ -1054,7 +1054,7 @@
     const styles = react.useStyleConfig("Label", { sx, size });
     return /* @__PURE__ */ React.createElement(
       react.FormLabel,
-      __spreadValues$1K({
+      __spreadValues$1L({
         sx: styles,
         requiredIndicator: /* @__PURE__ */ React.createElement(react.VisuallyHidden, null)
       }, rest),
@@ -1142,30 +1142,30 @@
     return { rect, containerRef };
   };
 
-  var __defProp$1J = Object.defineProperty;
-  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$1K = Object.defineProperty;
+  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$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$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 __objRest$1d = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1J.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$1K.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$1K)
+      for (var prop of __getOwnPropSymbols$1K(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$1K.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -1181,9 +1181,27 @@
       "spacing"
     ]);
     const [nbrRemainingAvatars, setNbrRemainingAvatars] = React.useState(0);
-    return /* @__PURE__ */ React.createElement(react.HStack, __spreadValues$1J({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(react.HStack, { spacing }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, children)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small$1, { sx: { color: "blue.500" } }, "+", nbrRemainingAvatars));
+    return /* @__PURE__ */ React.createElement(react.HStack, __spreadValues$1K({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(react.HStack, { spacing }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, children)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small$1, { sx: { color: "blue.500" } }, "+", nbrRemainingAvatars));
   };
 
+  var __defProp$1J = Object.defineProperty;
+  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$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;
+  };
+  const Badge = (props) => /* @__PURE__ */ React.createElement(react.Badge, __spreadValues$1J({}, props));
+
   var __defProp$1I = Object.defineProperty;
   var __getOwnPropSymbols$1I = Object.getOwnPropertySymbols;
   var __hasOwnProp$1I = Object.prototype.hasOwnProperty;
@@ -1200,7 +1218,31 @@
       }
     return a;
   };
-  const Badge = (props) => /* @__PURE__ */ React.createElement(react.Badge, __spreadValues$1I({}, props));
+  var __objRest$1c = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+      if (__hasOwnProp$1I.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))
+          target[prop] = source[prop];
+      }
+    return target;
+  };
+  const Blinker$1 = (_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$1I({ sx: styles, "data-testid": "blinker-test-id" }, rest));
+  };
 
   var __defProp$1H = Object.defineProperty;
   var __getOwnPropSymbols$1H = Object.getOwnPropertySymbols;
@@ -1218,7 +1260,7 @@
       }
     return a;
   };
-  var __objRest$1c = (source, exclude) => {
+  var __objRest$1b = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1H.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1230,19 +1272,12 @@
       }
     return target;
   };
-  const Blinker$1 = (_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$1H({ sx: styles, "data-testid": "blinker-test-id" }, rest));
-  };
+  const Button$1 = React.forwardRef(
+    (_a, ref) => {
+      var _b = _a, { variant = "default", children } = _b, rest = __objRest$1b(_b, ["variant", "children"]);
+      return /* @__PURE__ */ React.createElement(react.Button, __spreadValues$1H({ variant, ref }, rest), children);
+    }
+  );
 
   var __defProp$1G = Object.defineProperty;
   var __getOwnPropSymbols$1G = Object.getOwnPropertySymbols;
@@ -1260,7 +1295,7 @@
       }
     return a;
   };
-  var __objRest$1b = (source, exclude) => {
+  var __objRest$1a = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1G.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1272,41 +1307,6 @@
       }
     return target;
   };
-  const Button$1 = React.forwardRef(
-    (_a, ref) => {
-      var _b = _a, { variant = "default", children } = _b, rest = __objRest$1b(_b, ["variant", "children"]);
-      return /* @__PURE__ */ React.createElement(react.Button, __spreadValues$1G({ variant, ref }, rest), children);
-    }
-  );
-
-  var __defProp$1F = Object.defineProperty;
-  var __getOwnPropSymbols$1F = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1F = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1F = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1F = (obj, key, value) => key in obj ? __defProp$1F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1F = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$1F.call(b, prop))
-        __defNormalProp$1F(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1F)
-      for (var prop of __getOwnPropSymbols$1F(b)) {
-        if (__propIsEnum$1F.call(b, prop))
-          __defNormalProp$1F(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __objRest$1a = (source, exclude) => {
-    var target = {};
-    for (var prop in source)
-      if (__hasOwnProp$1F.call(source, prop) && exclude.indexOf(prop) < 0)
-        target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$1F)
-      for (var prop of __getOwnPropSymbols$1F(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$1F.call(source, prop))
-          target[prop] = source[prop];
-      }
-    return target;
-  };
   const Checkbox$1 = (_a) => {
     var _b = _a, {
       value,
@@ -1323,7 +1323,7 @@
     ]);
     return /* @__PURE__ */ React.createElement(
       react.Checkbox,
-      __spreadValues$1F({
+      __spreadValues$1G({
         size,
         id: name,
         onChange,
@@ -1349,30 +1349,30 @@
     return newObj;
   };
 
-  var __defProp$1E = Object.defineProperty;
-  var __getOwnPropSymbols$1E = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1E = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1E = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1E = (obj, key, value) => key in obj ? __defProp$1E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1E = (a, b) => {
+  var __defProp$1F = Object.defineProperty;
+  var __getOwnPropSymbols$1F = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1F = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1F = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1F = (obj, key, value) => key in obj ? __defProp$1F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1F = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$1E.call(b, prop))
-        __defNormalProp$1E(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1E)
-      for (var prop of __getOwnPropSymbols$1E(b)) {
-        if (__propIsEnum$1E.call(b, prop))
-          __defNormalProp$1E(a, prop, b[prop]);
+      if (__hasOwnProp$1F.call(b, prop))
+        __defNormalProp$1F(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1F)
+      for (var prop of __getOwnPropSymbols$1F(b)) {
+        if (__propIsEnum$1F.call(b, prop))
+          __defNormalProp$1F(a, prop, b[prop]);
       }
     return a;
   };
   var __objRest$19 = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1E.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$1F.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$1E)
-      for (var prop of __getOwnPropSymbols$1E(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$1E.call(source, prop))
+    if (source != null && __getOwnPropSymbols$1F)
+      for (var prop of __getOwnPropSymbols$1F(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$1F.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -1403,7 +1403,7 @@
       values,
       errors: validate(values)
     });
-    const newMethods = methods || reactHookForm.useForm(__spreadValues$1E({
+    const newMethods = methods || reactHookForm.useForm(__spreadValues$1F({
       defaultValues: initialValues,
       resolver: validate ? customResolver : void 0
     }, formSettings));
@@ -1429,33 +1429,33 @@
       newMethods.trigger();
       e.preventDefault();
     };
-    return /* @__PURE__ */ React.createElement(reactHookForm.FormProvider, __spreadValues$1E(__spreadValues$1E({}, newMethods), rest), /* @__PURE__ */ React.createElement("form", { style: __spreadValues$1E({ width: "100%" }, innerFormStyle), onSubmit: handleSubmit }, typeof children === "function" ? children(newMethods) : children));
+    return /* @__PURE__ */ React.createElement(reactHookForm.FormProvider, __spreadValues$1F(__spreadValues$1F({}, newMethods), rest), /* @__PURE__ */ React.createElement("form", { style: __spreadValues$1F({ width: "100%" }, innerFormStyle), onSubmit: handleSubmit }, typeof children === "function" ? children(newMethods) : children));
   });
 
-  var __defProp$1D = Object.defineProperty;
-  var __getOwnPropSymbols$1D = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1D = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1D = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1D = (obj, key, value) => key in obj ? __defProp$1D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1D = (a, b) => {
+  var __defProp$1E = Object.defineProperty;
+  var __getOwnPropSymbols$1E = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1E = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1E = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1E = (obj, key, value) => key in obj ? __defProp$1E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1E = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$1D.call(b, prop))
-        __defNormalProp$1D(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1D)
-      for (var prop of __getOwnPropSymbols$1D(b)) {
-        if (__propIsEnum$1D.call(b, prop))
-          __defNormalProp$1D(a, prop, b[prop]);
+      if (__hasOwnProp$1E.call(b, prop))
+        __defNormalProp$1E(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1E)
+      for (var prop of __getOwnPropSymbols$1E(b)) {
+        if (__propIsEnum$1E.call(b, prop))
+          __defNormalProp$1E(a, prop, b[prop]);
       }
     return a;
   };
   var __objRest$18 = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1D.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$1E.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$1D)
-      for (var prop of __getOwnPropSymbols$1D(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$1D.call(source, prop))
+    if (source != null && __getOwnPropSymbols$1E)
+      for (var prop of __getOwnPropSymbols$1E(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$1E.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -1468,7 +1468,7 @@
     ]);
     return /* @__PURE__ */ React.createElement(
       Label$1,
-      __spreadValues$1D({
+      __spreadValues$1E({
         size: "sm",
         sx: {
           width: "80%",
@@ -1705,30 +1705,40 @@
     return "sm";
   };
 
-  var __defProp$1C = Object.defineProperty;
-  var __getOwnPropSymbols$1C = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1C = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1C = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1C = (obj, key, value) => key in obj ? __defProp$1C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1C = (a, b) => {
+  const useDidUpdateEffect = (effect, dependencies) => {
+    const didMountRef = React.useRef(false);
+    React.useEffect(() => {
+      if (didMountRef.current) {
+        effect();
+      }
+      didMountRef.current = true;
+    }, dependencies);
+  };
+
+  var __defProp$1D = Object.defineProperty;
+  var __getOwnPropSymbols$1D = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1D = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1D = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1D = (obj, key, value) => key in obj ? __defProp$1D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1D = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$1C.call(b, prop))
-        __defNormalProp$1C(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1C)
-      for (var prop of __getOwnPropSymbols$1C(b)) {
-        if (__propIsEnum$1C.call(b, prop))
-          __defNormalProp$1C(a, prop, b[prop]);
+      if (__hasOwnProp$1D.call(b, prop))
+        __defNormalProp$1D(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1D)
+      for (var prop of __getOwnPropSymbols$1D(b)) {
+        if (__propIsEnum$1D.call(b, prop))
+          __defNormalProp$1D(a, prop, b[prop]);
       }
     return a;
   };
   var __objRest$17 = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1C.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$1D.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$1C)
-      for (var prop of __getOwnPropSymbols$1C(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$1C.call(source, prop))
+    if (source != null && __getOwnPropSymbols$1D)
+      for (var prop of __getOwnPropSymbols$1D(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$1D.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -1759,7 +1769,7 @@
     const fieldError = getFieldError(name, errors);
     return /* @__PURE__ */ React.createElement(react.FormControl, { isInvalid: !!fieldError, isRequired }, /* @__PURE__ */ React.createElement(
       react.Stack,
-      __spreadValues$1C({
+      __spreadValues$1D({
         spacing: "auto",
         direction,
         alignItems: direction === "column" ? "stretch" : "center"
@@ -1786,30 +1796,30 @@
     return setValueRefreshed;
   };
 
-  var __defProp$1B = Object.defineProperty;
-  var __getOwnPropSymbols$1B = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1B = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1B = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1B = (obj, key, value) => key in obj ? __defProp$1B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1B = (a, b) => {
+  var __defProp$1C = Object.defineProperty;
+  var __getOwnPropSymbols$1C = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1C = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1C = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1C = (obj, key, value) => key in obj ? __defProp$1C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1C = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$1B.call(b, prop))
-        __defNormalProp$1B(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1B)
-      for (var prop of __getOwnPropSymbols$1B(b)) {
-        if (__propIsEnum$1B.call(b, prop))
-          __defNormalProp$1B(a, prop, b[prop]);
+      if (__hasOwnProp$1C.call(b, prop))
+        __defNormalProp$1C(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1C)
+      for (var prop of __getOwnPropSymbols$1C(b)) {
+        if (__propIsEnum$1C.call(b, prop))
+          __defNormalProp$1C(a, prop, b[prop]);
       }
     return a;
   };
   var __objRest$16 = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1B.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$1C.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$1B)
-      for (var prop of __getOwnPropSymbols$1B(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$1B.call(source, prop))
+    if (source != null && __getOwnPropSymbols$1C)
+      for (var prop of __getOwnPropSymbols$1C(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$1C.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -1859,7 +1869,7 @@
           },
           /* @__PURE__ */ React.createElement(
             Checkbox$1,
-            __spreadValues$1B({
+            __spreadValues$1C({
               name,
               onChange: (e) => {
                 onChange(e);
@@ -1876,30 +1886,30 @@
     );
   };
 
-  var __defProp$1A = Object.defineProperty;
-  var __getOwnPropSymbols$1A = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1A = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1A = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1A = (obj, key, value) => key in obj ? __defProp$1A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1A = (a, b) => {
+  var __defProp$1B = Object.defineProperty;
+  var __getOwnPropSymbols$1B = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1B = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1B = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1B = (obj, key, value) => key in obj ? __defProp$1B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1B = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$1A.call(b, prop))
-        __defNormalProp$1A(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1A)
-      for (var prop of __getOwnPropSymbols$1A(b)) {
-        if (__propIsEnum$1A.call(b, prop))
-          __defNormalProp$1A(a, prop, b[prop]);
+      if (__hasOwnProp$1B.call(b, prop))
+        __defNormalProp$1B(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1B)
+      for (var prop of __getOwnPropSymbols$1B(b)) {
+        if (__propIsEnum$1B.call(b, prop))
+          __defNormalProp$1B(a, prop, b[prop]);
       }
     return a;
   };
   var __objRest$15 = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1A.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$1B.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$1A)
-      for (var prop of __getOwnPropSymbols$1A(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$1A.call(source, prop))
+    if (source != null && __getOwnPropSymbols$1B)
+      for (var prop of __getOwnPropSymbols$1B(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$1B.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -1920,7 +1930,7 @@
     const IconWithSize = React.cloneElement(IconComponent, { size: rest.size });
     return /* @__PURE__ */ React.createElement(
       react.IconButton,
-      __spreadValues$1A({
+      __spreadValues$1B({
         variant,
         icon: IconWithSize,
         "aria-label": ariaLabel,
@@ -2011,30 +2021,30 @@
     );
   };
 
-  var __defProp$1z = Object.defineProperty;
-  var __getOwnPropSymbols$1z = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1z = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1z = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1z = (obj, key, value) => key in obj ? __defProp$1z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1z = (a, b) => {
+  var __defProp$1A = Object.defineProperty;
+  var __getOwnPropSymbols$1A = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1A = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1A = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1A = (obj, key, value) => key in obj ? __defProp$1A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1A = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$1z.call(b, prop))
-        __defNormalProp$1z(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1z)
-      for (var prop of __getOwnPropSymbols$1z(b)) {
-        if (__propIsEnum$1z.call(b, prop))
-          __defNormalProp$1z(a, prop, b[prop]);
+      if (__hasOwnProp$1A.call(b, prop))
+        __defNormalProp$1A(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1A)
+      for (var prop of __getOwnPropSymbols$1A(b)) {
+        if (__propIsEnum$1A.call(b, prop))
+          __defNormalProp$1A(a, prop, b[prop]);
       }
     return a;
   };
   var __objRest$14 = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1z.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$1A.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$1z)
-      for (var prop of __getOwnPropSymbols$1z(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$1z.call(source, prop))
+    if (source != null && __getOwnPropSymbols$1A)
+      for (var prop of __getOwnPropSymbols$1A(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$1A.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -2113,7 +2123,7 @@
       },
       /* @__PURE__ */ React.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React.createElement(
         IconButton,
-        __spreadValues$1z({
+        __spreadValues$1A({
           onClick: onToggle,
           "aria-label": name || "color picker",
           name,
@@ -2162,30 +2172,30 @@
     ));
   };
 
-  var __defProp$1y = Object.defineProperty;
-  var __getOwnPropSymbols$1y = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1y = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1y = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1y = (obj, key, value) => key in obj ? __defProp$1y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1y = (a, b) => {
+  var __defProp$1z = Object.defineProperty;
+  var __getOwnPropSymbols$1z = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1z = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1z = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1z = (obj, key, value) => key in obj ? __defProp$1z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1z = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$1y.call(b, prop))
-        __defNormalProp$1y(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1y)
-      for (var prop of __getOwnPropSymbols$1y(b)) {
-        if (__propIsEnum$1y.call(b, prop))
-          __defNormalProp$1y(a, prop, b[prop]);
+      if (__hasOwnProp$1z.call(b, prop))
+        __defNormalProp$1z(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1z)
+      for (var prop of __getOwnPropSymbols$1z(b)) {
+        if (__propIsEnum$1z.call(b, prop))
+          __defNormalProp$1z(a, prop, b[prop]);
       }
     return a;
   };
   var __objRest$13 = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1y.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$1z.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$1y)
-      for (var prop of __getOwnPropSymbols$1y(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$1y.call(source, prop))
+    if (source != null && __getOwnPropSymbols$1z)
+      for (var prop of __getOwnPropSymbols$1z(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$1z.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -2215,7 +2225,7 @@
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         ColorPicker$1,
-        __spreadValues$1y({
+        __spreadValues$1z({
           name,
           onChange,
           value
@@ -2224,21 +2234,21 @@
     );
   };
 
-  var __defProp$1x = Object.defineProperty;
+  var __defProp$1y = Object.defineProperty;
   var __defProps$u = Object.defineProperties;
   var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$1x = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1x = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1x = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1x = (obj, key, value) => key in obj ? __defProp$1x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1x = (a, b) => {
+  var __getOwnPropSymbols$1y = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1y = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1y = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1y = (obj, key, value) => key in obj ? __defProp$1y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1y = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$1x.call(b, prop))
-        __defNormalProp$1x(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1x)
-      for (var prop of __getOwnPropSymbols$1x(b)) {
-        if (__propIsEnum$1x.call(b, prop))
-          __defNormalProp$1x(a, prop, b[prop]);
+      if (__hasOwnProp$1y.call(b, prop))
+        __defNormalProp$1y(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1y)
+      for (var prop of __getOwnPropSymbols$1y(b)) {
+        if (__propIsEnum$1y.call(b, prop))
+          __defNormalProp$1y(a, prop, b[prop]);
       }
     return a;
   };
@@ -2246,7 +2256,7 @@
   const FlipButtonContext = React.createContext(null);
   const useFlipButtonState = (props, isMulti) => isMulti ? checkbox.useCheckboxGroupState(props) : radio.useRadioGroupState(props);
   const useFlipButtonGroup = (props, state, isMulti) => {
-    const propsWithLabel = __spreadProps$u(__spreadValues$1x({}, props), {
+    const propsWithLabel = __spreadProps$u(__spreadValues$1y({}, props), {
       "aria-label": `${isMulti ? "Checkbox" : "Radio"}-button-group`
     });
     return isMulti ? checkbox$1.useCheckboxGroup(
@@ -2263,21 +2273,21 @@
     return { state, flipButtonGroupProps };
   };
 
-  var __defProp$1w = Object.defineProperty;
+  var __defProp$1x = Object.defineProperty;
   var __defProps$t = Object.defineProperties;
   var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
-  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 __getOwnPropSymbols$1x = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1x = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1x = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1x = (obj, key, value) => key in obj ? __defProp$1x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1x = (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$1x.call(b, prop))
+        __defNormalProp$1x(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1x)
+      for (var prop of __getOwnPropSymbols$1x(b)) {
+        if (__propIsEnum$1x.call(b, prop))
+          __defNormalProp$1x(a, prop, b[prop]);
       }
     return a;
   };
@@ -2285,11 +2295,11 @@
   var __objRest$12 = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1w.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$1x.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$1x)
+      for (var prop of __getOwnPropSymbols$1x(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$1x.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -2328,7 +2338,7 @@
     };
     const focusRing = isFocused ? focusStyles : {};
     const isSelected = isMulti ? state.isSelected(value) : state.selectedValue === value;
-    const flipButtonProps = __spreadProps$t(__spreadValues$1w({}, utils.mergeProps(inputProps, focusProps)), {
+    const flipButtonProps = __spreadProps$t(__spreadValues$1x({}, utils.mergeProps(inputProps, focusProps)), {
       ref,
       style: { opacity: "0", width: "0", height: "0" },
       "aria-label": isMulti ? "Checkbox-input" : "Radio-input"
@@ -2340,7 +2350,7 @@
       as: "label",
       cursor: "pointer"
     };
-    return typeof children === "function" ? children(__spreadValues$1w({
+    return typeof children === "function" ? children(__spreadValues$1x({
       state,
       containerProps,
       flipButtonProps,
@@ -2359,27 +2369,27 @@
         "aria-disabled": isDisabled,
         as: "label"
       },
-      /* @__PURE__ */ React.createElement("input", __spreadValues$1w({}, flipButtonProps)),
+      /* @__PURE__ */ React.createElement("input", __spreadValues$1x({}, flipButtonProps)),
       icon && iconPlacement !== "none" ? /* @__PURE__ */ React.createElement(Icon$1, { as: icon || icons.CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React.createElement(react.SlideFade, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon$1, { as: icon || icons.CheckSolid, sx: buttonIcon })),
       /* @__PURE__ */ React.createElement(react.Text, { textAlign: "center" }, children)
     );
   };
 
-  var __defProp$1v = Object.defineProperty;
+  var __defProp$1w = Object.defineProperty;
   var __defProps$s = Object.defineProperties;
   var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
-  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 __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$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$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;
   };
@@ -2387,11 +2397,11 @@
   var __objRest$11 = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1v.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$1v)
-      for (var prop of __getOwnPropSymbols$1v(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$1v.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;
@@ -2423,7 +2433,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$1v({
+      (child) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$1w({
         key: child.props.value,
         isMulti,
         variant,
@@ -2442,7 +2452,7 @@
     const restWithoutOnChange = ramda.omit(["onChange"], rest);
     return /* @__PURE__ */ React.createElement(
       react.Stack,
-      __spreadValues$1v(__spreadProps$s(__spreadValues$1v({}, flipButtonGroupProps), {
+      __spreadValues$1w(__spreadProps$s(__spreadValues$1w({}, flipButtonGroupProps), {
         direction,
         id: name,
         spacing: 0,
@@ -2452,30 +2462,30 @@
     );
   };
 
-  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) => {
+  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$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$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$10 = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1u.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$1u)
-      for (var prop of __getOwnPropSymbols$1u(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$1u.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;
@@ -2511,7 +2521,7 @@
       },
       ({ onChange, value }) => /* @__PURE__ */ React.createElement(
         FlipButtonGroup,
-        __spreadValues$1u({
+        __spreadValues$1v({
           name,
           onChange: (e) => {
             onChange(e);
@@ -2526,21 +2536,21 @@
     );
   };
 
-  var __defProp$1t = Object.defineProperty;
+  var __defProp$1u = Object.defineProperty;
   var __defProps$r = Object.defineProperties;
   var __getOwnPropDescs$r = 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) => {
+  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$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$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;
   };
@@ -2551,7 +2561,7 @@
     const { buttonProps } = button.useButton(props, ref);
     return /* @__PURE__ */ React.createElement(
       Button$1,
-      __spreadProps$r(__spreadValues$1t({}, buttonProps), {
+      __spreadProps$r(__spreadValues$1u({}, buttonProps), {
         ref,
         size: "sm",
         boxSize: 8,
@@ -2564,21 +2574,21 @@
     );
   };
 
-  var __defProp$1s = Object.defineProperty;
+  var __defProp$1t = Object.defineProperty;
   var __defProps$q = Object.defineProperties;
   var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
-  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 __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$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$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;
   };
@@ -2591,7 +2601,7 @@
     const minWidth = `${String(segment.maxValue).length}ch`;
     return /* @__PURE__ */ React.createElement(
       react.Box,
-      __spreadProps$q(__spreadValues$1s({}, segmentProps), {
+      __spreadProps$q(__spreadValues$1t({}, segmentProps), {
         ref,
         __css: dateSegment,
         minWidth: isDivider ? 0 : minWidth,
@@ -2611,28 +2621,28 @@
   const formatQuery = (query) => mapFormat[ramda.toLower(query)[0]];
   const delimeterIncluded = /([.,:;|\-/\\])/;
 
-  var __defProp$1r = Object.defineProperty;
+  var __defProp$1s = Object.defineProperty;
   var __defProps$p = Object.defineProperties;
   var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
-  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 __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$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$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 __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
   const DateField = (props) => {
     const ref = React.useRef(null);
-    const state = datepicker$1.useDateFieldState(__spreadProps$p(__spreadValues$1r({}, props), {
+    const state = datepicker$1.useDateFieldState(__spreadProps$p(__spreadValues$1s({}, props), {
       /* Hard coding the United Kingdom locale,
        this enforces using english characters e.g.
         yyyy and not other such as åååå or chinese, which prevents hard to predict bugs */
@@ -2645,13 +2655,13 @@
     const { dateFormat = "dd/mm/yyyy" } = props;
     const getMatchingSegment = (query, index) => ramda.find(
       (segment) => segment.placeholder === formatQuery(query)
-    )(segments) || __spreadProps$p(__spreadValues$1r({}, segments[index]), { text: query });
+    )(segments) || __spreadProps$p(__spreadValues$1s({}, segments[index]), { text: query });
     const sortedSegments = ramda.split(delimeterIncluded, dateFormat).map(
       (query, index) => getMatchingSegment(query, index)
     );
     return /* @__PURE__ */ React.createElement(
       react.Box,
-      __spreadProps$p(__spreadValues$1r({}, fieldProps), {
+      __spreadProps$p(__spreadValues$1s({}, fieldProps), {
         ref,
         display: "flex",
         __css: dateField,
@@ -2664,21 +2674,21 @@
     );
   };
 
-  var __defProp$1q = Object.defineProperty;
+  var __defProp$1r = Object.defineProperty;
   var __defProps$o = Object.defineProperties;
   var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
-  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 __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$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$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;
   };
@@ -2686,11 +2696,11 @@
   var __objRest$$ = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1q.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$1q)
-      for (var prop of __getOwnPropSymbols$1q(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$1q.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;
@@ -2701,7 +2711,7 @@
       const { styledField } = react.useMultiStyleConfig("DatePicker", { variant });
       return /* @__PURE__ */ React.createElement(
         react.Box,
-        __spreadProps$o(__spreadValues$1q({}, rest), {
+        __spreadProps$o(__spreadValues$1r({}, rest), {
           ref,
           "aria-invalid": isInvalid,
           "aria-disabled": isDisabled,
@@ -2715,6 +2725,24 @@
     }
   );
 
+  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$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;
+  };
+  const Table$1 = (props) => /* @__PURE__ */ React.createElement(react.Table, __spreadValues$1q({}, props));
+
   var __defProp$1p = Object.defineProperty;
   var __defProps$n = Object.defineProperties;
   var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
@@ -2806,7 +2834,7 @@
       const startDate = state.visibleRange.start;
       const { gridProps, headerProps, weekDays } = calendar.useCalendarGrid(rest, state);
       const weeksInMonth = date.getWeeksInMonth(startDate, locale);
-      return /* @__PURE__ */ React.createElement(react.Table, __spreadValues$1o({ variant: "unstyled" }, gridProps), /* @__PURE__ */ React.createElement(react.Thead, __spreadValues$1o({}, headerProps), /* @__PURE__ */ React.createElement(DayLabels, { weekDays })), /* @__PURE__ */ React.createElement(react.Tbody, null, ramda.times((weekIndex) => /* @__PURE__ */ React.createElement(react.Tr, { key: weekIndex }, state.getDatesInWeek(weekIndex, startDate).map(
+      return /* @__PURE__ */ React.createElement(Table$1, __spreadValues$1o({ variant: "unstyled" }, gridProps), /* @__PURE__ */ React.createElement(react.Thead, __spreadValues$1o({}, headerProps), /* @__PURE__ */ React.createElement(DayLabels, { weekDays })), /* @__PURE__ */ React.createElement(react.Tbody, null, ramda.times((weekIndex) => /* @__PURE__ */ React.createElement(react.Tr, { key: weekIndex }, state.getDatesInWeek(weekIndex, startDate).map(
         (date) => date ? /* @__PURE__ */ React.createElement(
           CalendarCell,
           {
@@ -5336,10 +5364,11 @@
       }
     return target;
   };
-  function getComponents({
-    defaultControl = true
-  }) {
-    const control = defaultControl ? {} : {
+  function getComponents() {
+    return {
+      DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$W({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$W({}, props)),
+      Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$W({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$W({}, props)),
+      MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$W({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$W({}, props)),
       Control: (_a) => {
         var _b = _a, {
           children
@@ -5349,11 +5378,6 @@
         return props.selectProps.leftIcon ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$W({}, props), /* @__PURE__ */ React.createElement(react.HStack, { w: "full", pl: "2" }, /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.leftIcon }), /* @__PURE__ */ React.createElement(react.HStack, { w: "full", justify: "space-between" }, children))) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Control, __spreadValues$W({}, props), children);
       }
     };
-    return __spreadValues$W({
-      DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$W({}, props), /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.DropdownIndicator, __spreadValues$W({}, props)),
-      Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$W({}, props), props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$W({}, props)),
-      MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$W({}, props), props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.MultiValueContainer, __spreadValues$W({}, props))
-    }, control);
   }
 
   var __defProp$V = Object.defineProperty;
@@ -5434,7 +5458,10 @@
         isMulti,
         value: ramda.is(Array, value) ? value : []
       });
-      const customComponents = getComponents({ defaultControl: true });
+      const customComponents = React.useMemo(
+        () => getComponents(),
+        []
+      );
       const simpleFilter = (query) => ramda.filter(
         (option) => ramda.test(new RegExp(ramda.toLower(query), "g"), ramda.toLower(option.label)),
         defaultOptions
@@ -9393,7 +9420,8 @@
           height: sizing.avatar["2xs"]
         },
         text: {
-          lineHeight: sizing.avatar["2xs"]
+          lineHeight: sizing.avatar["2xs"],
+          fontSize: "3xs"
         }
       }),
       xs: ({ theme: { sizes: sizing } }) => ({
@@ -9402,7 +9430,8 @@
           height: sizing.avatar.xs
         },
         text: {
-          lineHeight: sizing.avatar.xs
+          lineHeight: sizing.avatar.xs,
+          fontSize: "xs"
         }
       }),
       sm: ({ theme: { sizes: sizing } }) => ({
@@ -9411,7 +9440,8 @@
           height: sizing.avatar.sm
         },
         text: {
-          lineHeight: sizing.avatar.sm
+          lineHeight: sizing.avatar.sm,
+          fontSize: "sm"
         },
         icon: {
           boxSize: sizing.avatar.sm
@@ -9423,7 +9453,8 @@
           height: sizing.avatar.md
         },
         text: {
-          lineHeight: sizing.avatar.md
+          lineHeight: sizing.avatar.md,
+          fontSize: "md"
         },
         icon: {
           boxSize: sizing.avatar.md
@@ -9435,7 +9466,8 @@
           height: sizing.avatar.lg
         },
         text: {
-          lineHeight: sizing.avatar.lg
+          lineHeight: sizing.avatar.lg,
+          fontSize: "lg"
         },
         icon: {
           boxSize: sizing.avatar.lg
@@ -9447,7 +9479,8 @@
           height: sizing.avatar.xl
         },
         text: {
-          lineHeight: sizing.avatar.xl
+          lineHeight: sizing.avatar.xl,
+          fontSize: "2xl"
         }
       }),
       "2xl": ({ theme: { sizes: sizing } }) => ({
@@ -9456,7 +9489,8 @@
           height: sizing.avatar["2xl"]
         },
         text: {
-          lineHeight: sizing.avatar["2xl"]
+          lineHeight: sizing.avatar["2xl"],
+          fontSize: "4xl"
         }
       })
     },
@@ -10363,6 +10397,32 @@
     })
   };
 
+  const Table = {
+    parts: ["table", "th", "td"],
+    variants: {
+      rounded: () => ({
+        table: {
+          borderSpacing: "0",
+          borderCollapse: "separate",
+          borderRadius: "st.border.radius.md",
+          borderColor: "border.default",
+          borderWidth: "st.border.width.xs",
+          px: "3"
+        },
+        th: {
+          color: "text.subdued",
+          fontWeight: "bold",
+          textTransform: "none",
+          fontSize: "sm"
+        },
+        td: {
+          borderColor: "border.default",
+          borderTopWidth: "st.border.width.xs"
+        }
+      })
+    }
+  };
+
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Alert: Alert,
@@ -10408,6 +10468,7 @@
     Step: Step$1,
     StepList: StepList$1,
     Switch: Switch$1,
+    Table: Table,
     Tabs: Tabs$1,
     Tag: Tag,
     Textarea: Textarea$1,
@@ -10578,6 +10639,7 @@
       size = "md",
       onChange = ramda.identity,
       onInputChange = ramda.identity,
+      enableStepperArrows = false,
       name,
       onlyAcceptPercentage = false
     } = _b, rest = __objRest$k(_b, [
@@ -10585,6 +10647,7 @@
       "size",
       "onChange",
       "onInputChange",
+      "enableStepperArrows",
       "name",
       "onlyAcceptPercentage"
     ]);
@@ -10608,7 +10671,7 @@
         id: name
       }, percentageProps), rest),
       /* @__PURE__ */ React.createElement(react.NumberInputField, { onChange: handleChange }),
-      /* @__PURE__ */ React.createElement(NumberInputStepper, { includePercentage: onlyAcceptPercentage })
+      enableStepperArrows && /* @__PURE__ */ React.createElement(NumberInputStepper, { includePercentage: onlyAcceptPercentage })
     );
   };
 
@@ -10895,7 +10958,7 @@
       }
     return target;
   };
-  function Select(_a) {
+  const Select = React.forwardRef((_a, ref) => {
     var _b = _a, {
       options,
       isMulti,
@@ -10931,7 +10994,10 @@
       isMulti,
       value: ramda.is(Array, value) ? value : []
     });
-    const customComponents = getComponents({ defaultControl: false });
+    const customComponents = React.useMemo(
+      () => getComponents(),
+      []
+    );
     const prevOptions = React.useRef(
       options
     );
@@ -10959,10 +11025,11 @@
         customOption,
         customTag,
         icon,
-        components: customComponents
+        components: customComponents,
+        ref
       }), rest)
     ));
-  }
+  });
 
   var __defProp$k = Object.defineProperty;
   var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
@@ -12699,10 +12766,6 @@
     enumerable: true,
     get: function () { return react.TabPanels; }
   });
-  Object.defineProperty(exports, 'Table', {
-    enumerable: true,
-    get: function () { return react.Table; }
-  });
   Object.defineProperty(exports, 'TableCaption', {
     enumerable: true,
     get: function () { return react.TableCaption; }
@@ -13017,6 +13080,7 @@
   exports.Switch = Switch;
   exports.SwitchField = SwitchField;
   exports.TabPanel = TabPanel;
+  exports.Table = Table$1;
   exports.Tabs = Tabs;
   exports.Tag = Tag$1;
   exports.TagGroup = TagGroup;
@@ -13047,6 +13111,7 @@
   exports.useArrowFocus = useArrowFocus;
   exports.useCurrentTheme = useCurrentTheme;
   exports.useDebounce = useDebounce;
+  exports.useDidUpdateEffect = useDidUpdateEffect;
   exports.useLoadingMessage = useLoadingMessage;
   exports.useOutsideRectClick = useOutsideRectClick;
   exports.useOverflowGroup = useOverflowGroup;