@northlight/ui 2.14.2 → 2.15.1

package/dist/umd/northlight.cjs

@@ -4,6 +4,24 @@
   (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.icons, global.joi, global.checkbox$1, global.radio$1, global.utils, global.radio, global.checkbox, global.datepicker, global.datepicker$1, global.date, global.button, global.i18n, global.calendar$1, global.calendar, global.reactRouterDom, global.clickable, global.framerMotion, global.core, global.utilities, global.sortable, global.modifiers, global.reactWindow, global.AutoSizer, global.AvatarEditor, global.themeTools, global.reactNumberFormat, global.InputMask));
 })(this, (function (exports, react, React, chakraReactSelect, ramda, focus, reactHookForm, system, tokens, icons, joi, checkbox$1, radio$1, utils, radio, checkbox, datepicker, datepicker$1, date, button, i18n, calendar$1, calendar, reactRouterDom, clickable, framerMotion, core, utilities, sortable, modifiers, reactWindow, AutoSizer, AvatarEditor, themeTools, reactNumberFormat, InputMask) { 'use strict';
 
+  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;
+  };
+  const Accordion = (props) => /* @__PURE__ */ React.createElement(react.Accordion, __spreadValues$2d({}, props));
+
   var __defProp$2c = Object.defineProperty;
   var __getOwnPropSymbols$2c = Object.getOwnPropertySymbols;
   var __hasOwnProp$2c = Object.prototype.hasOwnProperty;
@@ -20,7 +38,7 @@
       }
     return a;
   };
-  const Accordion = (props) => /* @__PURE__ */ React.createElement(react.Accordion, __spreadValues$2c({}, props));
+  const AccordionButton = (props) => /* @__PURE__ */ React.createElement(react.AccordionButton, __spreadValues$2c({}, props));
 
   var __defProp$2b = Object.defineProperty;
   var __getOwnPropSymbols$2b = Object.getOwnPropertySymbols;
@@ -38,7 +56,7 @@
       }
     return a;
   };
-  const AccordionButton = (props) => /* @__PURE__ */ React.createElement(react.AccordionButton, __spreadValues$2b({}, props));
+  const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(react.AccordionPanel, __spreadValues$2b({}, props));
 
   var __defProp$2a = Object.defineProperty;
   var __getOwnPropSymbols$2a = Object.getOwnPropertySymbols;
@@ -56,25 +74,7 @@
       }
     return a;
   };
-  const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(react.AccordionPanel, __spreadValues$2a({}, props));
-
-  var __defProp$29 = Object.defineProperty;
-  var __getOwnPropSymbols$29 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$29 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$29 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$29 = (obj, key, value) => key in obj ? __defProp$29(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$29 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$29.call(b, prop))
-        __defNormalProp$29(a, prop, b[prop]);
-    if (__getOwnPropSymbols$29)
-      for (var prop of __getOwnPropSymbols$29(b)) {
-        if (__propIsEnum$29.call(b, prop))
-          __defNormalProp$29(a, prop, b[prop]);
-      }
-    return a;
-  };
-  const AccordionItem = (props) => /* @__PURE__ */ React.createElement(react.AccordionItem, __spreadValues$29({}, props));
+  const AccordionItem = (props) => /* @__PURE__ */ React.createElement(react.AccordionItem, __spreadValues$2a({}, props));
 
   const useDebounce = (value, delay) => {
     const [debouncedValue, setDebouncedValue] = React.useState(value);
@@ -390,6 +390,24 @@
     return fieldError;
   }
 
+  var __defProp$29 = Object.defineProperty;
+  var __getOwnPropSymbols$29 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$29 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$29 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$29 = (obj, key, value) => key in obj ? __defProp$29(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$29 = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$29.call(b, prop))
+        __defNormalProp$29(a, prop, b[prop]);
+    if (__getOwnPropSymbols$29)
+      for (var prop of __getOwnPropSymbols$29(b)) {
+        if (__propIsEnum$29.call(b, prop))
+          __defNormalProp$29(a, prop, b[prop]);
+      }
+    return a;
+  };
+  const passPropsToChild = (child, styles) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$29({}, styles)) : child;
+
   var __defProp$28 = Object.defineProperty;
   var __getOwnPropSymbols$28 = Object.getOwnPropertySymbols;
   var __hasOwnProp$28 = Object.prototype.hasOwnProperty;
@@ -406,27 +424,9 @@
       }
     return a;
   };
-  const passPropsToChild = (child, styles) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$28({}, styles)) : child;
-
-  var __defProp$27 = Object.defineProperty;
-  var __getOwnPropSymbols$27 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$27 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$27 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$27 = (obj, key, value) => key in obj ? __defProp$27(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$27 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$27.call(b, prop))
-        __defNormalProp$27(a, prop, b[prop]);
-    if (__getOwnPropSymbols$27)
-      for (var prop of __getOwnPropSymbols$27(b)) {
-        if (__propIsEnum$27.call(b, prop))
-          __defNormalProp$27(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$27({}, styles)) : child);
+    const childrenWithoutFocus = childrenAsArr.map((child, i) => predicate(child, i) ? passPropsToChild(child, __spreadValues$28({}, styles)) : child);
     return childrenWithoutFocus;
   };
 
@@ -453,79 +453,79 @@
     return theme;
   };
 
-  var __defProp$26 = Object.defineProperty;
+  var __defProp$27 = Object.defineProperty;
   var __defProps$y = Object.defineProperties;
   var __getOwnPropDescs$y = Object.getOwnPropertyDescriptors;
-  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) => {
+  var __getOwnPropSymbols$27 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$27 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$27 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$27 = (obj, key, value) => key in obj ? __defProp$27(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$27 = (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]);
+      if (__hasOwnProp$27.call(b, prop))
+        __defNormalProp$27(a, prop, b[prop]);
+    if (__getOwnPropSymbols$27)
+      for (var prop of __getOwnPropSymbols$27(b)) {
+        if (__propIsEnum$27.call(b, prop))
+          __defNormalProp$27(a, prop, b[prop]);
       }
     return a;
   };
   var __spreadProps$y = (a, b) => __defProps$y(a, __getOwnPropDescs$y(b));
   const customSelectStyles = {
-    container: (provided) => __spreadProps$y(__spreadValues$26({}, provided), {
+    container: (provided) => __spreadProps$y(__spreadValues$27({}, provided), {
       width: "100%",
       color: "text.default"
     }),
-    option: (provided, state) => __spreadProps$y(__spreadValues$26({}, provided), {
+    option: (provided, state) => __spreadProps$y(__spreadValues$27({}, provided), {
       background: state.isFocused && "background.select.option-focus",
       _active: {
         background: "background.select.option-active"
       }
     }),
-    valueContainer: (provided) => __spreadProps$y(__spreadValues$26({}, provided), {
+    valueContainer: (provided) => __spreadProps$y(__spreadValues$27({}, provided), {
       paddingInlineStart: "padding-inline.select.default"
     }),
-    downChevron: (provided) => __spreadProps$y(__spreadValues$26({}, provided), {
+    downChevron: (provided) => __spreadProps$y(__spreadValues$27({}, provided), {
       color: "icon.select.default"
     }),
-    placeholder: (provided) => __spreadProps$y(__spreadValues$26({}, provided), {
+    placeholder: (provided) => __spreadProps$y(__spreadValues$27({}, 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$y(__spreadValues$26({}, provided), {
+      return __spreadProps$y(__spreadValues$27({}, provided), {
         bgColor: background,
         color: getContrastColor(background)
       });
     },
-    menuList: (provided) => __spreadProps$y(__spreadValues$26({}, provided), {
+    menuList: (provided) => __spreadProps$y(__spreadValues$27({}, provided), {
       bgColor: "background.default"
     })
   };
 
-  var __defProp$25 = Object.defineProperty;
+  var __defProp$26 = Object.defineProperty;
   var __defProps$x = Object.defineProperties;
   var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$25 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$25 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$25 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$25 = (obj, key, value) => key in obj ? __defProp$25(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$25 = (a, b) => {
+  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$25.call(b, prop))
-        __defNormalProp$25(a, prop, b[prop]);
-    if (__getOwnPropSymbols$25)
-      for (var prop of __getOwnPropSymbols$25(b)) {
-        if (__propIsEnum$25.call(b, prop))
-          __defNormalProp$25(a, prop, b[prop]);
+      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;
   };
   var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
-  const tagsInputStyles = (isFocused, borderColor) => __spreadProps$x(__spreadValues$25({}, customSelectStyles), {
-    container: (provided) => __spreadProps$x(__spreadValues$25({}, provided), {
+  const tagsInputStyles = (isFocused, borderColor) => __spreadProps$x(__spreadValues$26({}, customSelectStyles), {
+    container: (provided) => __spreadProps$x(__spreadValues$26({}, provided), {
       w: "full",
       height: "100%",
       resize: "vertical",
@@ -538,45 +538,45 @@
       color: "text.default",
       boxShadow: isFocused ? `0 0 0 1px ${borderColor}` : "none"
     }),
-    control: (provided) => __spreadProps$x(__spreadValues$25({}, provided), {
+    control: (provided) => __spreadProps$x(__spreadValues$26({}, provided), {
       minHeight: "20",
       height: "100%",
       alignItems: "start"
     }),
-    valueContainer: (provided) => __spreadProps$x(__spreadValues$25({}, provided), {
+    valueContainer: (provided) => __spreadProps$x(__spreadValues$26({}, provided), {
       paddingInlineStart: "padding-inline.select.default",
       overflowY: "auto",
       maxH: "100%"
     })
   });
 
-  var __defProp$24 = Object.defineProperty;
+  var __defProp$25 = Object.defineProperty;
   var __defProps$w = Object.defineProperties;
   var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$24 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$24 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$24 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$24 = (obj, key, value) => key in obj ? __defProp$24(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$24 = (a, b) => {
+  var __getOwnPropSymbols$25 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$25 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$25 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$25 = (obj, key, value) => key in obj ? __defProp$25(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$25 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$24.call(b, prop))
-        __defNormalProp$24(a, prop, b[prop]);
-    if (__getOwnPropSymbols$24)
-      for (var prop of __getOwnPropSymbols$24(b)) {
-        if (__propIsEnum$24.call(b, prop))
-          __defNormalProp$24(a, prop, b[prop]);
+      if (__hasOwnProp$25.call(b, prop))
+        __defNormalProp$25(a, prop, b[prop]);
+    if (__getOwnPropSymbols$25)
+      for (var prop of __getOwnPropSymbols$25(b)) {
+        if (__propIsEnum$25.call(b, prop))
+          __defNormalProp$25(a, prop, b[prop]);
       }
     return a;
   };
   var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
-  var __objRest$1x = (source, exclude) => {
+  var __objRest$1y = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$24.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$25.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$24)
-      for (var prop of __getOwnPropSymbols$24(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$24.call(source, prop))
+    if (source != null && __getOwnPropSymbols$25)
+      for (var prop of __getOwnPropSymbols$25(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$25.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -589,7 +589,7 @@
       loadingList = () => null,
       "data-testid": testId,
       value = []
-    } = _b, rest = __objRest$1x(_b, [
+    } = _b, rest = __objRest$1y(_b, [
       "options",
       "onChange",
       "isLoading",
@@ -657,7 +657,7 @@
     };
     return /* @__PURE__ */ React.createElement(react.Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
       CustomSelect,
-      __spreadValues$24(__spreadProps$w(__spreadValues$24({
+      __spreadValues$25(__spreadProps$w(__spreadValues$25({
         isMulti: true,
         menuPortalTarget: document.body,
         placeholder: "Type something and press Enter or comma...",
@@ -690,30 +690,30 @@
     ));
   }
 
-  var __defProp$23 = Object.defineProperty;
-  var __getOwnPropSymbols$23 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$23 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$23 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$23 = (obj, key, value) => key in obj ? __defProp$23(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$23 = (a, b) => {
+  var __defProp$24 = Object.defineProperty;
+  var __getOwnPropSymbols$24 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$24 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$24 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$24 = (obj, key, value) => key in obj ? __defProp$24(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$24 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$23.call(b, prop))
-        __defNormalProp$23(a, prop, b[prop]);
-    if (__getOwnPropSymbols$23)
-      for (var prop of __getOwnPropSymbols$23(b)) {
-        if (__propIsEnum$23.call(b, prop))
-          __defNormalProp$23(a, prop, b[prop]);
+      if (__hasOwnProp$24.call(b, prop))
+        __defNormalProp$24(a, prop, b[prop]);
+    if (__getOwnPropSymbols$24)
+      for (var prop of __getOwnPropSymbols$24(b)) {
+        if (__propIsEnum$24.call(b, prop))
+          __defNormalProp$24(a, prop, b[prop]);
       }
     return a;
   };
-  var __objRest$1w = (source, exclude) => {
+  var __objRest$1x = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$23.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$24.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$23)
-      for (var prop of __getOwnPropSymbols$23(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$23.call(source, prop))
+    if (source != null && __getOwnPropSymbols$24)
+      for (var prop of __getOwnPropSymbols$24(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$24.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -723,7 +723,7 @@
       name,
       image,
       variant = "square"
-    } = _b, rest = __objRest$1w(_b, [
+    } = _b, rest = __objRest$1x(_b, [
       "name",
       "image",
       "variant"
@@ -732,7 +732,7 @@
     const {
       container,
       text
-    } = react.useMultiStyleConfig("Avatar", __spreadValues$23({ variant, image }, rest));
+    } = react.useMultiStyleConfig("Avatar", __spreadValues$24({ variant, image }, rest));
     return /* @__PURE__ */ React.createElement(
       react.chakra.div,
       {
@@ -749,30 +749,30 @@
     );
   };
 
-  var __defProp$22 = Object.defineProperty;
-  var __getOwnPropSymbols$22 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$22 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$22 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$22 = (obj, key, value) => key in obj ? __defProp$22(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$22 = (a, b) => {
+  var __defProp$23 = Object.defineProperty;
+  var __getOwnPropSymbols$23 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$23 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$23 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$23 = (obj, key, value) => key in obj ? __defProp$23(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$23 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$22.call(b, prop))
-        __defNormalProp$22(a, prop, b[prop]);
-    if (__getOwnPropSymbols$22)
-      for (var prop of __getOwnPropSymbols$22(b)) {
-        if (__propIsEnum$22.call(b, prop))
-          __defNormalProp$22(a, prop, b[prop]);
+      if (__hasOwnProp$23.call(b, prop))
+        __defNormalProp$23(a, prop, b[prop]);
+    if (__getOwnPropSymbols$23)
+      for (var prop of __getOwnPropSymbols$23(b)) {
+        if (__propIsEnum$23.call(b, prop))
+          __defNormalProp$23(a, prop, b[prop]);
       }
     return a;
   };
-  var __objRest$1v = (source, exclude) => {
+  var __objRest$1w = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$22.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$23.call(source, prop) && exclude.indexOf(prop) < 0)
         target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$22)
-      for (var prop of __getOwnPropSymbols$22(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$22.call(source, prop))
+    if (source != null && __getOwnPropSymbols$23)
+      for (var prop of __getOwnPropSymbols$23(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$23.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -781,13 +781,31 @@
     var _b = _a, {
       variant = "success",
       children
-    } = _b, rest = __objRest$1v(_b, [
+    } = _b, rest = __objRest$1w(_b, [
       "variant",
       "children"
     ]);
-    return /* @__PURE__ */ React.createElement(react.Alert, __spreadValues$22({ variant }, rest), children);
+    return /* @__PURE__ */ React.createElement(react.Alert, __spreadValues$23({ variant }, rest), children);
   };
 
+  var __defProp$22 = Object.defineProperty;
+  var __getOwnPropSymbols$22 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$22 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$22 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$22 = (obj, key, value) => key in obj ? __defProp$22(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$22 = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$22.call(b, prop))
+        __defNormalProp$22(a, prop, b[prop]);
+    if (__getOwnPropSymbols$22)
+      for (var prop of __getOwnPropSymbols$22(b)) {
+        if (__propIsEnum$22.call(b, prop))
+          __defNormalProp$22(a, prop, b[prop]);
+      }
+    return a;
+  };
+  const AspectRatio = (props) => /* @__PURE__ */ React.createElement(react.AspectRatio, __spreadValues$22({}, props));
+
   var __defProp$21 = Object.defineProperty;
   var __getOwnPropSymbols$21 = Object.getOwnPropertySymbols;
   var __hasOwnProp$21 = Object.prototype.hasOwnProperty;
@@ -804,32 +822,14 @@
       }
     return a;
   };
-  const AspectRatio = (props) => /* @__PURE__ */ React.createElement(react.AspectRatio, __spreadValues$21({}, props));
-
-  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;
-  };
-  var __objRest$1u = (source, exclude) => {
+  var __objRest$1v = (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;
@@ -840,7 +840,7 @@
       size,
       color,
       boxSize
-    } = _b, rest = __objRest$1u(_b, [
+    } = _b, rest = __objRest$1v(_b, [
       "as",
       "size",
       "color",
@@ -850,7 +850,7 @@
     const styles = react.useStyleConfig("Icon", { size, color, boxSize });
     return /* @__PURE__ */ React.createElement(
       react.Icon,
-      __spreadValues$20({
+      __spreadValues$21({
         ref,
         sx: styles
       }, rest),
@@ -865,30 +865,30 @@
     return /* @__PURE__ */ React.createElement(react.chakra.span, { sx: badge }, notificationCount > 999 ? "999+" : notificationCount);
   };
 
-  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) => {
+  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$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]);
+      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;
   };
-  var __objRest$1t = (source, exclude) => {
+  var __objRest$1u = (source, exclude) => {
     var target = {};
     for (var prop in source)
-      if (__hasOwnProp$1$.call(source, prop) && exclude.indexOf(prop) < 0)
+      if (__hasOwnProp$20.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$20)
+      for (var prop of __getOwnPropSymbols$20(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$20.call(source, prop))
           target[prop] = source[prop];
       }
     return target;
@@ -900,7 +900,7 @@
       name,
       image,
       size
-    } = _b, rest = __objRest$1t(_b, [
+    } = _b, rest = __objRest$1u(_b, [
       "variant",
       "notificationCount",
       "name",
@@ -913,7 +913,7 @@
       size,
       name
     });
-    return /* @__PURE__ */ React.createElement(react.Box, __spreadValues$1$({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadValues$20({ __css: container, "data-testid": "avatar-test-id" }, rest), image ? /* @__PURE__ */ React.createElement(
       react.chakra.img,
       {
         alt: name,
@@ -930,6 +930,53 @@
     ), notificationCount > 0 && /* @__PURE__ */ React.createElement(AvatarBadge, { notificationCount }));
   };
 
+  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$1t = (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 H1$1 = (_a) => {
+    var _b = _a, {
+      children,
+      sx = {}
+    } = _b, rest = __objRest$1t(_b, [
+      "children",
+      "sx"
+    ]);
+    const styles = react.useStyleConfig("H1", { sx });
+    return /* @__PURE__ */ React.createElement(
+      react.Heading,
+      __spreadValues$1$({
+        as: "h1",
+        sx: styles
+      }, rest),
+      children
+    );
+  };
+
   var __defProp$1_ = Object.defineProperty;
   var __getOwnPropSymbols$1_ = Object.getOwnPropertySymbols;
   var __hasOwnProp$1_ = Object.prototype.hasOwnProperty;
@@ -958,7 +1005,7 @@
       }
     return target;
   };
-  const H1$1 = (_a) => {
+  const H2$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
@@ -966,11 +1013,11 @@
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H1", { sx });
+    const styles = react.useStyleConfig("H2", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$1_({
-        as: "h1",
+        as: "h2",
         sx: styles
       }, rest),
       children
@@ -1005,7 +1052,7 @@
       }
     return target;
   };
-  const H2$1 = (_a) => {
+  const H3$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1013,11 +1060,11 @@
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H2", { sx });
+    const styles = react.useStyleConfig("H3", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$1Z({
-        as: "h2",
+        as: "h3",
         sx: styles
       }, rest),
       children
@@ -1052,7 +1099,7 @@
       }
     return target;
   };
-  const H3$1 = (_a) => {
+  const H4$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1060,11 +1107,11 @@
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H3", { sx });
+    const styles = react.useStyleConfig("H4", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$1Y({
-        as: "h3",
+        as: "h4",
         sx: styles
       }, rest),
       children
@@ -1099,7 +1146,7 @@
       }
     return target;
   };
-  const H4$1 = (_a) => {
+  const H5$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1107,11 +1154,11 @@
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H4", { sx });
+    const styles = react.useStyleConfig("H5", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$1X({
-        as: "h4",
+        as: "h5",
         sx: styles
       }, rest),
       children
@@ -1146,7 +1193,7 @@
       }
     return target;
   };
-  const H5$1 = (_a) => {
+  const H6$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1154,11 +1201,11 @@
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("H5", { sx });
+    const styles = react.useStyleConfig("H6", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Heading,
       __spreadValues$1W({
-        as: "h5",
+        as: "h6",
         sx: styles
       }, rest),
       children
@@ -1193,19 +1240,21 @@
       }
     return target;
   };
-  const H6$1 = (_a) => {
+  const P$1 = (_a) => {
     var _b = _a, {
       children,
+      variant = "16",
       sx = {}
     } = _b, rest = __objRest$1n(_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$1V({
-        as: "h6",
+        variant,
         sx: styles
       }, rest),
       children
@@ -1240,25 +1289,10 @@
       }
     return target;
   };
-  const P$1 = (_a) => {
-    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$1U({
-        variant,
-        sx: styles
-      }, rest),
-      children
-    );
+  const Blockquote$1 = (_a) => {
+    var _b = _a, { children, sx = {} } = _b, rest = __objRest$1m(_b, ["children", "sx"]);
+    const styles = react.useStyleConfig("Blockquote", { sx });
+    return /* @__PURE__ */ React.createElement(react.Text, __spreadValues$1U({ as: "span", sx: styles }, rest), children);
   };
 
   var __defProp$1T = Object.defineProperty;
@@ -1289,10 +1323,23 @@
       }
     return target;
   };
-  const Blockquote$1 = (_a) => {
-    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$1T({ as: "span", sx: styles }, rest), children);
+  const Capitalized$1 = (_a) => {
+    var _b = _a, {
+      children,
+      sx = {}
+    } = _b, rest = __objRest$1l(_b, [
+      "children",
+      "sx"
+    ]);
+    const styles = react.useStyleConfig("Capitalized", { sx });
+    return /* @__PURE__ */ React.createElement(
+      react.Text,
+      __spreadValues$1T({
+        as: "span",
+        sx: styles
+      }, rest),
+      children
+    );
   };
 
   var __defProp$1S = Object.defineProperty;
@@ -1323,7 +1370,7 @@
       }
     return target;
   };
-  const Capitalized$1 = (_a) => {
+  const Lead$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1331,7 +1378,7 @@
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("Capitalized", { sx });
+    const styles = react.useStyleConfig("Lead", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$1S({
@@ -1370,7 +1417,7 @@
       }
     return target;
   };
-  const Lead$1 = (_a) => {
+  const Small$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1378,11 +1425,11 @@
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("Lead", { sx });
+    const styles = react.useStyleConfig("Small", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$1R({
-        as: "span",
+        as: "small",
         sx: styles
       }, rest),
       children
@@ -1417,7 +1464,7 @@
       }
     return target;
   };
-  const Small$1 = (_a) => {
+  const Tiny$1 = (_a) => {
     var _b = _a, {
       children,
       sx = {}
@@ -1425,11 +1472,11 @@
       "children",
       "sx"
     ]);
-    const styles = react.useStyleConfig("Small", { sx });
+    const styles = react.useStyleConfig("Tiny", { sx });
     return /* @__PURE__ */ React.createElement(
       react.Text,
       __spreadValues$1Q({
-        as: "small",
+        as: "span",
         sx: styles
       }, rest),
       children
@@ -1464,24 +1511,27 @@
       }
     return target;
   };
-  const Tiny$1 = (_a) => {
+  const Label$1 = React.forwardRef((_a, ref) => {
     var _b = _a, {
       children,
+      size = "sm",
       sx = {}
     } = _b, rest = __objRest$1h(_b, [
       "children",
+      "size",
       "sx"
     ]);
-    const styles = react.useStyleConfig("Tiny", { sx });
+    const styles = react.useStyleConfig("Label", { sx, size });
     return /* @__PURE__ */ React.createElement(
-      react.Text,
+      react.FormLabel,
       __spreadValues$1P({
-        as: "span",
-        sx: styles
+        sx: styles,
+        requiredIndicator: /* @__PURE__ */ React.createElement(react.VisuallyHidden, null),
+        ref
       }, rest),
       children
     );
-  };
+  });
 
   var __defProp$1O = Object.defineProperty;
   var __getOwnPropSymbols$1O = Object.getOwnPropertySymbols;
@@ -1511,27 +1561,21 @@
       }
     return target;
   };
-  const Label$1 = 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$1O({
-        sx: styles,
-        requiredIndicator: /* @__PURE__ */ React.createElement(react.VisuallyHidden, null),
-        ref
-      }, rest),
-      children
-    );
-  });
+  const NumVal$1 = React.forwardRef(
+    (_a, ref) => {
+      var _b = _a, { children, size = "sm", sx = {} } = _b, rest = __objRest$1g(_b, ["children", "size", "sx"]);
+      const styles = react.useStyleConfig("NumVal", { sx, size });
+      return /* @__PURE__ */ React.createElement(
+        react.Text,
+        __spreadValues$1O({
+          as: "span",
+          sx: styles,
+          ref
+        }, rest),
+        children
+      );
+    }
+  );
 
   const positiveOrZero = ramda.ifElse(ramda.gt(0), ramda.always(0), ramda.identity);
   const EMPTY_RECT = {
@@ -6790,7 +6834,7 @@
           items: identifierItems,
           strategy: strategy || sortable.rectSortingStrategy
         },
-        items.map((item) => {
+        items.map((item, index) => {
           const id = createKey(item);
           return /* @__PURE__ */ React.createElement(
             SortableItem,
@@ -6801,7 +6845,7 @@
               dblClickThreshold,
               disableDrag
             },
-            (listeners, props) => typeof children === "function" ? children(item, listeners, props) : children
+            (listeners, props) => typeof children === "function" ? children(item, listeners, props, index) : children
           );
         })
       ),
@@ -10590,6 +10634,98 @@
     }
   };
 
+  const NumVal = {
+    baseStyle: ({ theme: { sizes: sizing }, sx }) => ramda.merge(
+      {
+        color: "inherit",
+        width: "100%",
+        maxWidth: "100%",
+        marginBottom: sizing[0],
+        marginInlineStart: sizing[0],
+        marginEnd: sizing[0],
+        marginInlineEnd: sizing[0]
+      },
+      sx
+    ),
+    sizes: {
+      "2xs": ({ theme, sx }) => {
+        const { tinyMono } = theme.typography.numVal;
+        return ramda.merge(
+          {
+            fontFamily: tinyMono.fontFamily,
+            fontWeight: tinyMono.fontWeight,
+            lineHeight: tinyMono.lineHeight,
+            fontSize: tinyMono.fontSize,
+            letterSpacing: tinyMono.letterSpacing,
+            textTransform: tinyMono.textCase,
+            textDecoration: tinyMono.textDecoration
+          },
+          sx
+        );
+      },
+      xs: ({ theme, sx }) => {
+        const { xsMono } = theme.typography.numVal;
+        return ramda.merge(
+          {
+            fontFamily: xsMono.fontFamily,
+            fontWeight: xsMono.fontWeight,
+            lineHeight: xsMono.lineHeight,
+            fontSize: xsMono.fontSize,
+            letterSpacing: xsMono.letterSpacing,
+            textTransform: xsMono.textCase,
+            textDecoration: xsMono.textDecoration
+          },
+          sx
+        );
+      },
+      sm: ({ theme, sx }) => {
+        const { smMono } = theme.typography.numVal;
+        return ramda.merge(
+          {
+            fontFamily: smMono.fontFamily,
+            fontWeight: smMono.fontWeight,
+            lineHeight: smMono.lineHeight,
+            fontSize: smMono.fontSize,
+            letterSpacing: smMono.letterSpacing,
+            textTransform: smMono.textCase,
+            textDecoration: smMono.textDecoration
+          },
+          sx
+        );
+      },
+      md: ({ theme, sx }) => {
+        const { mdMono } = theme.typography.numVal;
+        return ramda.merge(
+          {
+            fontFamily: mdMono.fontFamily,
+            fontWeight: mdMono.fontWeight,
+            lineHeight: mdMono.lineHeight,
+            fontSize: mdMono.fontSize,
+            letterSpacing: mdMono.letterSpacing,
+            textTransform: mdMono.textCase,
+            textDecoration: mdMono.textDecoration
+          },
+          sx
+        );
+      },
+      lg: ({ theme, sx }) => {
+        const { lgMono } = theme.typography.numVal;
+        return ramda.merge(
+          {
+            fontFamily: lgMono.fontFamily,
+            fontWeight: lgMono.fontWeight,
+            lineHeight: lgMono.lineHeight,
+            fontSize: lgMono.fontSize,
+            letterSpacing: lgMono.letterSpacing,
+            textTransform: lgMono.textCase,
+            textDecoration: lgMono.textDecoration
+          },
+          sx
+        );
+      }
+    }
+  };
+
   const SplitPane$1 = {
     baseStyle: ({ minLeftWidth, minRightWidth, initialSplit, isOpen }) => ({
       display: "grid",
@@ -10946,6 +11082,7 @@
     Link: Link,
     Modal: Modal,
     NotificationIconButton: NotificationIconButton$1,
+    NumVal: NumVal,
     NumberInput: NumberInput$1,
     P: P,
     PaneDivider: PaneDivider$1,
@@ -13743,6 +13880,7 @@
   exports.MultiFileUploader = MultiFileUploader;
   exports.MultiSort = MultiSort;
   exports.NotificationIconButton = NotificationIconButton;
+  exports.NumVal = NumVal$1;
   exports.NumberInput = NumberInput;
   exports.NumberInputField = NumberInputField;
   exports.OrganizationLogo = OrganizationLogo;