@spothero/ui 14.4.0 → 14.5.1

package/v2/index-unbundled.esm.js

@@ -1318,8 +1318,8 @@ var createCache = function createCache(options) {
   return cache;
 };
 
-function _extends$q() {
-  _extends$q = Object.assign || function (target) {
+function _extends$r() {
+  _extends$r = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1333,7 +1333,7 @@ function _extends$q() {
     return target;
   };
 
-  return _extends$q.apply(this, arguments);
+  return _extends$r.apply(this, arguments);
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2149,7 +2149,7 @@ var getTheme = function getTheme(outerTheme, theme) {
     throw new Error('[ThemeProvider] Please make your theme prop a plain object');
   }
 
-  return _extends$q({}, outerTheme, {}, theme);
+  return _extends$r({}, outerTheme, {}, theme);
 };
 
 var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
@@ -5989,7 +5989,7 @@ function useBoolean(initialState) {
   return [value, callbacks];
 }
 
-function _objectWithoutPropertiesLoose$l(source, excluded) {
+function _objectWithoutPropertiesLoose$m(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -6004,7 +6004,7 @@ function _objectWithoutPropertiesLoose$l(source, excluded) {
   return target;
 }
 
-var _excluded$u = ["timeout"];
+var _excluded$v = ["timeout"];
 
 /**
  * React hook to copy content to clipboard
@@ -6029,7 +6029,7 @@ function useClipboard(text, optionsOrTimeout) {
   } : optionsOrTimeout,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 1500 : _ref$timeout,
-      copyOptions = _objectWithoutPropertiesLoose$l(_ref, _excluded$u);
+      copyOptions = _objectWithoutPropertiesLoose$m(_ref, _excluded$v);
 
   var onCopy = useCallback(function () {
     var didCopy = copyToClipboard(text, copyOptions);
@@ -6100,8 +6100,8 @@ function useControllableState(props) {
   return [value, updateValue];
 }
 
-function _extends$p() {
-  _extends$p = Object.assign || function (target) {
+function _extends$q() {
+  _extends$q = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -6115,7 +6115,7 @@ function _extends$p() {
     return target;
   };
 
-  return _extends$p.apply(this, arguments);
+  return _extends$q.apply(this, arguments);
 }
 
 // This implementation is heavily inspired by react-aria's implementation
@@ -6234,7 +6234,7 @@ function useDisclosure(props) {
         props = {};
       }
 
-      return _extends$p({}, props, {
+      return _extends$q({}, props, {
         "aria-expanded": "true",
         "aria-controls": id,
         onClick: callAllHandlers(props.onClick, onToggle)
@@ -6245,7 +6245,7 @@ function useDisclosure(props) {
         props = {};
       }
 
-      return _extends$p({}, props, {
+      return _extends$q({}, props, {
         hidden: !isOpen,
         id: id
       });
@@ -6499,8 +6499,8 @@ if (__DEV__) {
   PortalManager.displayName = "PortalManager";
 }
 
-function _extends$o() {
-  _extends$o = Object.assign || function (target) {
+function _extends$p() {
+  _extends$p = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -6514,10 +6514,10 @@ function _extends$o() {
     return target;
   };
 
-  return _extends$o.apply(this, arguments);
+  return _extends$p.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$k(source, excluded) {
+function _objectWithoutPropertiesLoose$l(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -6532,7 +6532,7 @@ function _objectWithoutPropertiesLoose$k(source, excluded) {
   return target;
 }
 
-var _excluded$t = ["containerRef"];
+var _excluded$u = ["containerRef"];
 
 var _createContext$9 = createContext({
   strict: false,
@@ -6644,9 +6644,9 @@ var ContainerPortal = function ContainerPortal(props) {
  */
 function Portal(props) {
   var containerRef = props.containerRef,
-      rest = _objectWithoutPropertiesLoose$k(props, _excluded$t);
+      rest = _objectWithoutPropertiesLoose$l(props, _excluded$u);
 
-  return containerRef ? /*#__PURE__*/createElement(ContainerPortal, _extends$o({
+  return containerRef ? /*#__PURE__*/createElement(ContainerPortal, _extends$p({
     containerRef: containerRef
   }, rest)) : /*#__PURE__*/createElement(DefaultPortal, rest);
 }
@@ -7074,8 +7074,8 @@ if (__DEV__) {
   ColorModeProvider.displayName = "ColorModeProvider";
 }
 
-function _extends$n() {
-  _extends$n = Object.assign || function (target) {
+function _extends$o() {
+  _extends$o = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -7089,7 +7089,7 @@ function _extends$n() {
     return target;
   };
 
-  return _extends$n.apply(this, arguments);
+  return _extends$o.apply(this, arguments);
 }
 
 var tokenToCSSVar = function tokenToCSSVar(scale, value) {
@@ -7498,7 +7498,7 @@ var t = {
     };
   },
   prop: function prop(property, scale, transform) {
-    return _extends$n({
+    return _extends$o({
       property: property,
       scale: scale
     }, scale && {
@@ -8561,7 +8561,7 @@ var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position);
 var layoutPropNames = objectKeys$1(layoutSystem);
 var propNames = [].concat(objectKeys$1(systemProps), pseudoPropNames);
 
-var styleProps = _extends$n({}, systemProps, pseudoSelectors);
+var styleProps = _extends$o({}, systemProps, pseudoSelectors);
 
 var isStyleProp = function isStyleProp(prop) {
   return prop in styleProps;
@@ -9047,7 +9047,7 @@ function createThemeVars(flatTokens, options) {
   };
 }
 
-function _objectWithoutPropertiesLoose$j(source, excluded) {
+function _objectWithoutPropertiesLoose$k(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -9062,7 +9062,7 @@ function _objectWithoutPropertiesLoose$j(source, excluded) {
   return target;
 }
 
-var _excluded$s = ["__cssMap", "__cssVars", "__breakpoints"];
+var _excluded$t = ["__cssMap", "__cssVars", "__breakpoints"];
 var tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"];
 function extractTokens(theme) {
   var _tokens = tokens;
@@ -9075,7 +9075,7 @@ function omitVars(rawTheme) {
   rawTheme.__cssMap;
       rawTheme.__cssVars;
       rawTheme.__breakpoints;
-      var cleanTheme = _objectWithoutPropertiesLoose$j(rawTheme, _excluded$s);
+      var cleanTheme = _objectWithoutPropertiesLoose$k(rawTheme, _excluded$t);
 
   return cleanTheme;
 }
@@ -9140,7 +9140,7 @@ function toCSSVar(rawTheme) {
     "--chakra-space-y-reverse": "0"
   };
   Object.assign(theme, {
-    __cssVars: _extends$n({}, defaultCssVars, cssVars),
+    __cssVars: _extends$o({}, defaultCssVars, cssVars),
     __cssMap: cssMap,
     __breakpoints: analyzeBreakpoints(theme.breakpoints)
   });
@@ -9282,8 +9282,8 @@ var reactFastCompare = function isEqual(a, b) {
   }
 };
 
-function _extends$m() {
-  _extends$m = Object.assign || function (target) {
+function _extends$n() {
+  _extends$n = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -9297,7 +9297,7 @@ function _extends$m() {
     return target;
   };
 
-  return _extends$m.apply(this, arguments);
+  return _extends$n.apply(this, arguments);
 }
 
 var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
@@ -9475,7 +9475,7 @@ var createStyled = function createStyled(tag, options) {
     });
 
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, _extends$m({}, options, {}, nextOptions, {
+      return createStyled(nextTag, _extends$n({}, options, {}, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       })).apply(void 0, styles);
     };
@@ -9493,8 +9493,8 @@ tags.forEach(function (tagName) {
   newStyled[tagName] = newStyled(tagName);
 });
 
-function _extends$l() {
-  _extends$l = Object.assign || function (target) {
+function _extends$m() {
+  _extends$m = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -9508,7 +9508,7 @@ function _extends$l() {
     return target;
   };
 
-  return _extends$l.apply(this, arguments);
+  return _extends$m.apply(this, arguments);
 }
 
 var ThemeProvider$1 = function ThemeProvider(props) {
@@ -9586,7 +9586,7 @@ function omitThemingProps(props) {
 function useChakra() {
   var colorModeResult = useColorMode();
   var theme = useTheme();
-  return _extends$l({}, colorModeResult, {
+  return _extends$m({}, colorModeResult, {
     theme: theme
   });
 }
@@ -9652,7 +9652,7 @@ function useToken(scale, token, fallback) {
   return resolveTokenValue(theme, path, fallback);
 }
 
-function _objectWithoutPropertiesLoose$i(source, excluded) {
+function _objectWithoutPropertiesLoose$j(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -9685,8 +9685,8 @@ var shouldForwardProp = function shouldForwardProp(prop) {
   return validHTMLProps.has(prop) || !allPropNames.has(prop);
 };
 
-var _excluded$1$a = ["theme", "css", "__css", "sx"],
-    _excluded2$9 = ["baseStyle"];
+var _excluded$1$b = ["theme", "css", "__css", "sx"],
+    _excluded2$a = ["baseStyle"];
 
 /**
  * Style resolver function that manages how style props are merged
@@ -9708,7 +9708,7 @@ var toCSSObject = function toCSSObject(_ref) {
         var cssProp = props.css,
         __css = props.__css,
         sx = props.sx,
-        rest = _objectWithoutPropertiesLoose$i(props, _excluded$1$a);
+        rest = _objectWithoutPropertiesLoose$j(props, _excluded$1$b);
 
     var styleProps = objectFilter(rest, function (_, prop) {
       return isStyleProp(prop);
@@ -9722,7 +9722,7 @@ var toCSSObject = function toCSSObject(_ref) {
 function styled(component, options) {
   var _ref2 = options != null ? options : {},
       baseStyle = _ref2.baseStyle,
-      styledOptions = _objectWithoutPropertiesLoose$i(_ref2, _excluded2$9);
+      styledOptions = _objectWithoutPropertiesLoose$j(_ref2, _excluded2$a);
 
   if (!styledOptions.shouldForwardProp) {
     styledOptions.shouldForwardProp = shouldForwardProp;
@@ -9742,7 +9742,7 @@ function forwardRef(component) {
   return /*#__PURE__*/forwardRef$1(component);
 }
 
-var _excluded$r = ["styleConfig"];
+var _excluded$s = ["styleConfig"];
 function useStyleConfig(themeKey, props, opts) {
   var _styleConfig$defaultP;
 
@@ -9756,7 +9756,7 @@ function useStyleConfig(themeKey, props, opts) {
 
   var _props = props,
       styleConfigProp = _props.styleConfig,
-      rest = _objectWithoutPropertiesLoose$i(_props, _excluded$r);
+      rest = _objectWithoutPropertiesLoose$j(_props, _excluded$s);
 
   var _useChakra = useChakra(),
       theme = _useChakra.theme,
@@ -9899,8 +9899,8 @@ var spacing = {
   96: "24rem"
 };
 
-function _extends$k() {
-  _extends$k = Object.assign || function (target) {
+function _extends$l() {
+  _extends$l = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -9914,7 +9914,7 @@ function _extends$k() {
     return target;
   };
 
-  return _extends$k.apply(this, arguments);
+  return _extends$l.apply(this, arguments);
 }
 
 var largeSizes = {
@@ -9943,7 +9943,7 @@ var container$3 = {
   xl: "1280px"
 };
 
-var sizes$m = _extends$k({}, spacing, largeSizes, {
+var sizes$m = _extends$l({}, spacing, largeSizes, {
   container: container$3
 });
 
@@ -11470,8 +11470,8 @@ function orient(options) {
   return orientation === "vertical" ? vertical : horizontal;
 }
 
-function _extends$j() {
-  _extends$j = Object.assign || function (target) {
+function _extends$k() {
+  _extends$k = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -11485,7 +11485,7 @@ function _extends$j() {
     return target;
   };
 
-  return _extends$j.apply(this, arguments);
+  return _extends$k.apply(this, arguments);
 }
 
 var createBreakpoints = function createBreakpoints(config) {
@@ -11493,7 +11493,7 @@ var createBreakpoints = function createBreakpoints(config) {
     condition: true,
     message: ["[chakra-ui]: createBreakpoints(...) will be deprecated pretty soon", "simply pass the breakpoints as an object. Remove the createBreakpoint(..) call"].join("")
   });
-  return _extends$j({
+  return _extends$k({
     base: "0em"
   }, config);
 };
@@ -12267,7 +12267,7 @@ var variantGhost = function variantGhost(props) {
 var variantOutline$1 = function variantOutline(props) {
   var c = props.colorScheme;
   var borderColor = mode("gray.200", "whiteAlpha.300")(props);
-  return _extends$k({
+  return _extends$l({
     border: "1px solid",
     borderColor: c === "gray" ? borderColor : "currentColor"
   }, variantGhost(props));
@@ -12569,7 +12569,7 @@ var closeButton = {
   defaultProps: defaultProps$i
 };
 
-var variants$8 = Badge$1.variants,
+var variants$8$1 = Badge$1.variants,
     defaultProps$h = Badge$1.defaultProps;
 var baseStyle$v = {
   fontFamily: "mono",
@@ -12579,7 +12579,7 @@ var baseStyle$v = {
 };
 var code = {
   baseStyle: baseStyle$v,
-  variants: variants$8,
+  variants: variants$8$1,
   defaultProps: defaultProps$h
 };
 
@@ -12650,7 +12650,7 @@ var baseStyleDialogContainer$1 = {
 
 var baseStyleDialog$1 = function baseStyleDialog(props) {
   var isFullHeight = props.isFullHeight;
-  return _extends$k({}, isFullHeight && {
+  return _extends$l({}, isFullHeight && {
     height: "100vh"
   }, {
     zIndex: "modal",
@@ -13082,7 +13082,7 @@ var defaultProps$d = {
   size: "md",
   variant: "outline"
 };
-var Input = {
+var Input$2 = {
   parts: inputAnatomy.keys,
   baseStyle: baseStyle$m,
   sizes: sizes$e,
@@ -13334,13 +13334,13 @@ var modal = {
 };
 
 var _baseStyleRoot, _Input$baseStyle$fiel, _Input$baseStyle;
-var variants$5$1 = Input.variants,
-    defaultProps$b = Input.defaultProps;
+var variants$5$1 = Input$2.variants,
+    defaultProps$b = Input$2.defaultProps;
 var $stepperWidth = cssVar("number-input-stepper-width");
 var $inputPadding = cssVar("number-input-input-padding");
 var inputPaddingValue = calc($stepperWidth).add("0.5rem").toString();
 var baseStyleRoot$1 = (_baseStyleRoot = {}, _baseStyleRoot[$stepperWidth.variable] = "24px", _baseStyleRoot[$inputPadding.variable] = inputPaddingValue, _baseStyleRoot);
-var baseStyleField$1 = (_Input$baseStyle$fiel = (_Input$baseStyle = Input.baseStyle) == null ? void 0 : _Input$baseStyle.field) != null ? _Input$baseStyle$fiel : {};
+var baseStyleField$1 = (_Input$baseStyle$fiel = (_Input$baseStyle = Input$2.baseStyle) == null ? void 0 : _Input$baseStyle.field) != null ? _Input$baseStyle$fiel : {};
 var baseStyleStepperGroup = {
   width: [$stepperWidth.reference]
 };
@@ -13372,7 +13372,7 @@ var baseStyle$g = function baseStyle(props) {
 function getSize(size) {
   var _sizeStyle$field$font, _sizeStyle$field;
 
-  var sizeStyle = Input.sizes[size];
+  var sizeStyle = Input$2.sizes[size];
   var radius = {
     lg: "md",
     md: "md",
@@ -13385,7 +13385,7 @@ function getSize(size) {
   var fontSize = typography.fontSizes[_fontSize.toString()];
 
   return {
-    field: _extends$k({}, sizeStyle.field, {
+    field: _extends$l({}, sizeStyle.field, {
       paddingInlineEnd: $inputPadding.reference,
       verticalAlign: "top"
     }),
@@ -13419,7 +13419,7 @@ var numberInput = {
 
 var _Input$variants$unsty$1;
 
-var baseStyle$f = _extends$k({}, Input.baseStyle.field, {
+var baseStyle$f = _extends$l({}, Input$2.baseStyle.field, {
   textAlign: "center"
 });
 
@@ -13453,21 +13453,21 @@ var variants$4$2 = {
   outline: function outline(props) {
     var _Input$variants$outli;
 
-    return (_Input$variants$outli = Input.variants.outline(props).field) != null ? _Input$variants$outli : {};
+    return (_Input$variants$outli = Input$2.variants.outline(props).field) != null ? _Input$variants$outli : {};
   },
   flushed: function flushed(props) {
     var _Input$variants$flush;
 
-    return (_Input$variants$flush = Input.variants.flushed(props).field) != null ? _Input$variants$flush : {};
+    return (_Input$variants$flush = Input$2.variants.flushed(props).field) != null ? _Input$variants$flush : {};
   },
   filled: function filled(props) {
     var _Input$variants$fille;
 
-    return (_Input$variants$fille = Input.variants.filled(props).field) != null ? _Input$variants$fille : {};
+    return (_Input$variants$fille = Input$2.variants.filled(props).field) != null ? _Input$variants$fille : {};
   },
-  unstyled: (_Input$variants$unsty$1 = Input.variants.unstyled.field) != null ? _Input$variants$unsty$1 : {}
+  unstyled: (_Input$variants$unsty$1 = Input$2.variants.unstyled.field) != null ? _Input$variants$unsty$1 : {}
 };
-var defaultProps$a = Input.defaultProps;
+var defaultProps$a = Input$2.defaultProps;
 var pinInput = {
   baseStyle: baseStyle$f,
   sizes: sizes$b,
@@ -13541,7 +13541,7 @@ function filledStyle(props) {
   var bgColor = mode(c + ".500", c + ".200")(props);
   var gradient = "linear-gradient(\n    to right,\n    transparent 0%,\n    " + getColor(t, bgColor) + " 50%,\n    transparent 100%\n  )";
   var addStripe = !isIndeterminate && hasStripe;
-  return _extends$k({}, addStripe && stripeStyle, isIndeterminate ? {
+  return _extends$l({}, addStripe && stripeStyle, isIndeterminate ? {
     bgImage: gradient
   } : {
     bgColor: bgColor
@@ -13562,7 +13562,7 @@ var baseStyleTrack$2 = function baseStyleTrack(props) {
 };
 
 var baseStyleFilledTrack$1 = function baseStyleFilledTrack(props) {
-  return _extends$k({
+  return _extends$l({
     transitionProperty: "common",
     transitionDuration: "slow"
   }, filledStyle(props));
@@ -13614,9 +13614,9 @@ var baseStyleControl = function baseStyleControl(props) {
       _Checkbox$baseStyle$c = _Checkbox$baseStyle.control,
       control = _Checkbox$baseStyle$c === void 0 ? {} : _Checkbox$baseStyle$c;
 
-  return _extends$k({}, control, {
+  return _extends$l({}, control, {
     borderRadius: "full",
-    _checked: _extends$k({}, control["_checked"], {
+    _checked: _extends$l({}, control["_checked"], {
       _before: {
         content: "\"\"",
         display: "inline-block",
@@ -13679,7 +13679,7 @@ var radio = {
 };
 
 var baseStyleField = function baseStyleField(props) {
-  return _extends$k({}, Input.baseStyle.field, {
+  return _extends$l({}, Input$2.baseStyle.field, {
     bg: mode("white", "gray.700")(props),
     appearance: "none",
     paddingBottom: "1px",
@@ -13712,7 +13712,7 @@ var baseStyle$b = function baseStyle(props) {
 var iconSpacing = {
   paddingInlineEnd: "2rem"
 };
-var sizes$8 = lodash_mergewith({}, Input.sizes, {
+var sizes$8 = lodash_mergewith({}, Input$2.sizes, {
   lg: {
     field: iconSpacing
   },
@@ -13733,8 +13733,8 @@ var select = {
   parts: selectAnatomy.keys,
   baseStyle: baseStyle$b,
   sizes: sizes$8,
-  variants: Input.variants,
-  defaultProps: Input.defaultProps
+  variants: Input$2.variants,
+  defaultProps: Input$2.defaultProps
 };
 
 var fade = function fade(startColor, endColor) {
@@ -13815,7 +13815,7 @@ function thumbOrientation(props) {
 
 var baseStyleContainer$1 = function baseStyleContainer(props) {
   var orientation = props.orientation;
-  return _extends$k({
+  return _extends$l({
     display: "inline-block",
     position: "relative",
     cursor: "pointer",
@@ -13847,7 +13847,7 @@ var baseStyleTrack$1 = function baseStyleTrack(props) {
 };
 
 var baseStyleThumb$1 = function baseStyleThumb(props) {
-  return _extends$k({
+  return _extends$l({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -14133,12 +14133,12 @@ var numericStyles = {
 var variantSimple = function variantSimple(props) {
   var c = props.colorScheme;
   return {
-    th: _extends$k({
+    th: _extends$l({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
-    td: _extends$k({
+    td: _extends$l({
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
@@ -14160,12 +14160,12 @@ var variantSimple = function variantSimple(props) {
 var variantStripe = function variantStripe(props) {
   var c = props.colorScheme;
   return {
-    th: _extends$k({
+    th: _extends$l({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
-    td: _extends$k({
+    td: _extends$l({
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
@@ -14574,7 +14574,7 @@ var tag = {
 
 var _Input$variants$unsty, _Input$sizes$xs$field, _Input$sizes$sm$field, _Input$sizes$md$field, _Input$sizes$lg$field;
 
-var baseStyle$1$1 = _extends$k({}, Input.baseStyle.field, {
+var baseStyle$1$1 = _extends$l({}, Input$2.baseStyle.field, {
   paddingY: "8px",
   minHeight: "80px",
   lineHeight: "short",
@@ -14585,25 +14585,25 @@ var variants$c = {
   outline: function outline(props) {
     var _Input$variants$outli;
 
-    return (_Input$variants$outli = Input.variants.outline(props).field) != null ? _Input$variants$outli : {};
+    return (_Input$variants$outli = Input$2.variants.outline(props).field) != null ? _Input$variants$outli : {};
   },
   flushed: function flushed(props) {
     var _Input$variants$flush;
 
-    return (_Input$variants$flush = Input.variants.flushed(props).field) != null ? _Input$variants$flush : {};
+    return (_Input$variants$flush = Input$2.variants.flushed(props).field) != null ? _Input$variants$flush : {};
   },
   filled: function filled(props) {
     var _Input$variants$fille;
 
-    return (_Input$variants$fille = Input.variants.filled(props).field) != null ? _Input$variants$fille : {};
+    return (_Input$variants$fille = Input$2.variants.filled(props).field) != null ? _Input$variants$fille : {};
   },
-  unstyled: (_Input$variants$unsty = Input.variants.unstyled.field) != null ? _Input$variants$unsty : {}
+  unstyled: (_Input$variants$unsty = Input$2.variants.unstyled.field) != null ? _Input$variants$unsty : {}
 };
 var sizes$l = {
-  xs: (_Input$sizes$xs$field = Input.sizes.xs.field) != null ? _Input$sizes$xs$field : {},
-  sm: (_Input$sizes$sm$field = Input.sizes.sm.field) != null ? _Input$sizes$sm$field : {},
-  md: (_Input$sizes$md$field = Input.sizes.md.field) != null ? _Input$sizes$md$field : {},
-  lg: (_Input$sizes$lg$field = Input.sizes.lg.field) != null ? _Input$sizes$lg$field : {}
+  xs: (_Input$sizes$xs$field = Input$2.sizes.xs.field) != null ? _Input$sizes$xs$field : {},
+  sm: (_Input$sizes$sm$field = Input$2.sizes.sm.field) != null ? _Input$sizes$sm$field : {},
+  md: (_Input$sizes$md$field = Input$2.sizes.md.field) != null ? _Input$sizes$md$field : {},
+  lg: (_Input$sizes$lg$field = Input$2.sizes.lg.field) != null ? _Input$sizes$lg$field : {}
 };
 var defaultProps$o = {
   size: "md",
@@ -14649,7 +14649,7 @@ var components$1 = /*#__PURE__*/Object.freeze({
   FormError: formError,
   FormLabel: formLabel,
   Heading: heading,
-  Input: Input,
+  Input: Input$2,
   Kbd: kbd,
   Link: link,
   List: list,
@@ -15003,7 +15003,7 @@ var blur = {
   "3xl": "64px"
 };
 
-var foundations = _extends$k({
+var foundations = _extends$l({
   breakpoints: breakpoints$1,
   zIndices: zIndices,
   radii: radii,
@@ -15057,7 +15057,7 @@ var config = {
   initialColorMode: "light",
   cssVarPrefix: "chakra"
 };
-var theme = _extends$k({
+var theme = _extends$l({
   direction: direction
 }, foundations, {
   components: components$1,
@@ -15065,8 +15065,8 @@ var theme = _extends$k({
   config: config
 });
 
-function _extends$i() {
-  _extends$i = Object.assign || function (target) {
+function _extends$j() {
+  _extends$j = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -15080,10 +15080,10 @@ function _extends$i() {
     return target;
   };
 
-  return _extends$i.apply(this, arguments);
+  return _extends$j.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$h(source, excluded) {
+function _objectWithoutPropertiesLoose$i(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -15098,7 +15098,7 @@ function _objectWithoutPropertiesLoose$h(source, excluded) {
   return target;
 }
 
-var _excluded$q = ["as", "viewBox", "color", "focusable", "children", "className", "__css"];
+var _excluded$r = ["as", "viewBox", "color", "focusable", "children", "className", "__css"];
 var fallbackIcon = {
   path: /*#__PURE__*/createElement("g", {
     stroke: "currentColor",
@@ -15130,11 +15130,11 @@ var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
       children = props.children,
       className = props.className,
       __css = props.__css,
-      rest = _objectWithoutPropertiesLoose$h(props, _excluded$q);
+      rest = _objectWithoutPropertiesLoose$i(props, _excluded$r);
 
   var _className = cx("chakra-icon", className);
 
-  var styles = _extends$i({
+  var styles = _extends$j({
     w: "1em",
     h: "1em",
     display: "inline-block",
@@ -15158,14 +15158,14 @@ var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
 
 
   if (element && typeof element !== "string") {
-    return /*#__PURE__*/createElement(chakra.svg, _extends$i({
+    return /*#__PURE__*/createElement(chakra.svg, _extends$j({
       as: element
     }, shared, rest));
   }
 
   var _path = children != null ? children : fallbackIcon.path;
 
-  return /*#__PURE__*/createElement(chakra.svg, _extends$i({
+  return /*#__PURE__*/createElement(chakra.svg, _extends$j({
     verticalAlign: "middle",
     viewBox: _viewBox
   }, shared, rest), _path);
@@ -15186,7 +15186,7 @@ function createIcon(options) {
       defaultProps = _options$defaultProps === void 0 ? {} : _options$defaultProps;
   var path = Children.toArray(options.path);
   var Comp = /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/createElement(Icon, _extends$i({
+    return /*#__PURE__*/createElement(Icon, _extends$j({
       ref: ref,
       viewBox: viewBox
     }, defaultProps, props), path.length ? path : /*#__PURE__*/createElement("path", {
@@ -22715,7 +22715,7 @@ var AnimatePresence = function (_a) {
         : childrenToRender.map(function (child) { return cloneElement(child); })));
 };
 
-function _objectWithoutPropertiesLoose$g(source, excluded) {
+function _objectWithoutPropertiesLoose$h(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -22730,8 +22730,8 @@ function _objectWithoutPropertiesLoose$g(source, excluded) {
   return target;
 }
 
-function _extends$h() {
-  _extends$h = Object.assign || function (target) {
+function _extends$i() {
+  _extends$i = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -22745,7 +22745,7 @@ function _extends$h() {
     return target;
   };
 
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 
 var TransitionEasings = {
@@ -22902,12 +22902,12 @@ var TransitionDefaults = {
 };
 var withDelay = {
   enter: function enter(transition, delay) {
-    return _extends$h({}, transition, {
+    return _extends$i({}, transition, {
       delay: isNumber(delay) ? delay : delay == null ? void 0 : delay["enter"]
     });
   },
   exit: function exit(transition, delay) {
-    return _extends$h({}, transition, {
+    return _extends$i({}, transition, {
       delay: isNumber(delay) ? delay : delay == null ? void 0 : delay["exit"]
     });
   }
@@ -22950,7 +22950,7 @@ var variants$4$1 = {
         transition = _ref.transition,
         transitionEnd = _ref.transitionEnd,
         delay = _ref.delay;
-    return _extends$h({}, animateOpacity && {
+    return _extends$i({}, animateOpacity && {
       opacity: isNumeric(startingHeight) ? 1 : 0
     }, {
       height: startingHeight,
@@ -22966,7 +22966,7 @@ var variants$4$1 = {
         transition = _ref2.transition,
         transitionEnd = _ref2.transitionEnd,
         delay = _ref2.delay;
-    return _extends$h({}, animateOpacity && {
+    return _extends$i({}, animateOpacity && {
       opacity: 1
     }, {
       height: endingHeight,
@@ -22988,7 +22988,7 @@ var Collapse = /*#__PURE__*/forwardRef$1(function (props, ref) {
       className = props.className,
       transition = props.transition,
       transitionEnd = props.transitionEnd,
-      rest = _objectWithoutPropertiesLoose$g(props, _excluded$4$3);
+      rest = _objectWithoutPropertiesLoose$h(props, _excluded$4$3);
 
   var _React$useState = useState(false),
       mounted = _React$useState[0],
@@ -23034,11 +23034,11 @@ var Collapse = /*#__PURE__*/forwardRef$1(function (props, ref) {
   return /*#__PURE__*/createElement(AnimatePresence, {
     initial: false,
     custom: custom
-  }, show && /*#__PURE__*/createElement(motion.div, _extends$h({
+  }, show && /*#__PURE__*/createElement(motion.div, _extends$i({
     ref: ref
   }, rest, {
     className: cx("chakra-collapse", className),
-    style: _extends$h({
+    style: _extends$i({
       overflow: "hidden",
       display: "block"
     }, style),
@@ -23054,7 +23054,7 @@ if (__DEV__) {
   Collapse.displayName = "Collapse";
 }
 
-var _excluded$3$3 = ["unmountOnExit", "in", "className", "transition", "transitionEnd", "delay"];
+var _excluded$3$4 = ["unmountOnExit", "in", "className", "transition", "transitionEnd", "delay"];
 var variants$3$1 = {
   enter: function enter(_temp) {
     var _transition$enter;
@@ -23098,7 +23098,7 @@ var Fade = /*#__PURE__*/forwardRef$1(function (props, ref) {
       transition = props.transition,
       transitionEnd = props.transitionEnd,
       delay = props.delay,
-      rest = _objectWithoutPropertiesLoose$g(props, _excluded$3$3);
+      rest = _objectWithoutPropertiesLoose$h(props, _excluded$3$4);
 
   var animate = isOpen || unmountOnExit ? "enter" : "exit";
   var show = unmountOnExit ? isOpen && unmountOnExit : true;
@@ -23109,7 +23109,7 @@ var Fade = /*#__PURE__*/forwardRef$1(function (props, ref) {
   };
   return /*#__PURE__*/createElement(AnimatePresence, {
     custom: custom
-  }, show && /*#__PURE__*/createElement(motion.div, _extends$h({
+  }, show && /*#__PURE__*/createElement(motion.div, _extends$i({
     ref: ref,
     className: cx("chakra-fade", className),
     custom: custom
@@ -23122,7 +23122,7 @@ if (__DEV__) {
   Fade.displayName = "Fade";
 }
 
-var _excluded$2$5 = ["unmountOnExit", "in", "reverse", "initialScale", "className", "transition", "transitionEnd", "delay"];
+var _excluded$2$6 = ["unmountOnExit", "in", "reverse", "initialScale", "className", "transition", "transitionEnd", "delay"];
 var variants$2$1 = {
   exit: function exit(_ref) {
     var _transition$exit;
@@ -23132,13 +23132,13 @@ var variants$2$1 = {
         transition = _ref.transition,
         transitionEnd = _ref.transitionEnd,
         delay = _ref.delay;
-    return _extends$h({
+    return _extends$i({
       opacity: 0
     }, reverse ? {
       scale: initialScale,
       transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit
     } : {
-      transitionEnd: _extends$h({
+      transitionEnd: _extends$i({
         scale: initialScale
       }, transitionEnd == null ? void 0 : transitionEnd.exit)
     }, {
@@ -23176,7 +23176,7 @@ var ScaleFade = /*#__PURE__*/forwardRef$1(function (props, ref) {
       transition = props.transition,
       transitionEnd = props.transitionEnd,
       delay = props.delay,
-      rest = _objectWithoutPropertiesLoose$g(props, _excluded$2$5);
+      rest = _objectWithoutPropertiesLoose$h(props, _excluded$2$6);
 
   var show = unmountOnExit ? isOpen && unmountOnExit : true;
   var animate = isOpen || unmountOnExit ? "enter" : "exit";
@@ -23189,7 +23189,7 @@ var ScaleFade = /*#__PURE__*/forwardRef$1(function (props, ref) {
   };
   return /*#__PURE__*/createElement(AnimatePresence, {
     custom: custom
-  }, show && /*#__PURE__*/createElement(motion.div, _extends$h({
+  }, show && /*#__PURE__*/createElement(motion.div, _extends$i({
     ref: ref,
     className: cx("chakra-offset-slide", className)
   }, scaleFadeConfig, {
@@ -23202,7 +23202,7 @@ if (__DEV__) {
   ScaleFade.displayName = "ScaleFade";
 }
 
-var _excluded$1$9 = ["direction", "style", "unmountOnExit", "in", "className", "transition", "transitionEnd", "delay"];
+var _excluded$1$a = ["direction", "style", "unmountOnExit", "in", "className", "transition", "transitionEnd", "delay"];
 var defaultTransition = {
   exit: {
     duration: 0.15,
@@ -23228,7 +23228,7 @@ var variants$1$1 = {
     }),
         exitStyles = _slideTransition.exit;
 
-    return _extends$h({}, exitStyles, {
+    return _extends$i({}, exitStyles, {
       transition: (_transition$exit = transition == null ? void 0 : transition.exit) != null ? _transition$exit : withDelay.exit(defaultTransition.exit, delay),
       transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit
     });
@@ -23246,7 +23246,7 @@ var variants$1$1 = {
     }),
         enterStyles = _slideTransition2.enter;
 
-    return _extends$h({}, enterStyles, {
+    return _extends$i({}, enterStyles, {
       transition: (_transition$enter = transition == null ? void 0 : transition.enter) != null ? _transition$enter : withDelay.enter(defaultTransition.enter, delay),
       transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter
     });
@@ -23262,7 +23262,7 @@ var Slide = /*#__PURE__*/forwardRef$1(function (props, ref) {
       transition = props.transition,
       transitionEnd = props.transitionEnd,
       delay = props.delay,
-      rest = _objectWithoutPropertiesLoose$g(props, _excluded$1$9);
+      rest = _objectWithoutPropertiesLoose$h(props, _excluded$1$a);
 
   var transitionStyles = slideTransition({
     direction: direction
@@ -23280,7 +23280,7 @@ var Slide = /*#__PURE__*/forwardRef$1(function (props, ref) {
   };
   return /*#__PURE__*/createElement(AnimatePresence, {
     custom: custom
-  }, show && /*#__PURE__*/createElement(motion.div, _extends$h({}, rest, {
+  }, show && /*#__PURE__*/createElement(motion.div, _extends$i({}, rest, {
     ref: ref,
     initial: "exit",
     className: cx("chakra-slide", className),
@@ -23296,8 +23296,8 @@ if (__DEV__) {
   Slide.displayName = "Slide";
 }
 
-var _excluded$p = ["unmountOnExit", "in", "reverse", "className", "offsetX", "offsetY", "transition", "transitionEnd", "delay"];
-var variants$7 = {
+var _excluded$q = ["unmountOnExit", "in", "reverse", "className", "offsetX", "offsetY", "transition", "transitionEnd", "delay"];
+var variants$8 = {
   initial: function initial(_ref) {
     var _transition$exit;
 
@@ -23341,13 +23341,13 @@ var variants$7 = {
       x: offsetX,
       y: offsetY
     };
-    return _extends$h({
+    return _extends$i({
       opacity: 0,
       transition: (_transition$exit2 = transition == null ? void 0 : transition.exit) != null ? _transition$exit2 : withDelay.exit(TransitionDefaults.exit, delay)
-    }, reverse ? _extends$h({}, offset, {
+    }, reverse ? _extends$i({}, offset, {
       transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit
     }) : {
-      transitionEnd: _extends$h({}, offset, transitionEnd == null ? void 0 : transitionEnd.exit)
+      transitionEnd: _extends$i({}, offset, transitionEnd == null ? void 0 : transitionEnd.exit)
     });
   }
 };
@@ -23355,7 +23355,7 @@ var slideFadeConfig = {
   initial: "initial",
   animate: "enter",
   exit: "exit",
-  variants: variants$7
+  variants: variants$8
 };
 var SlideFade = /*#__PURE__*/forwardRef$1(function (props, ref) {
   var unmountOnExit = props.unmountOnExit,
@@ -23370,7 +23370,7 @@ var SlideFade = /*#__PURE__*/forwardRef$1(function (props, ref) {
       transition = props.transition,
       transitionEnd = props.transitionEnd,
       delay = props.delay,
-      rest = _objectWithoutPropertiesLoose$g(props, _excluded$p);
+      rest = _objectWithoutPropertiesLoose$h(props, _excluded$q);
 
   var show = unmountOnExit ? isOpen && unmountOnExit : true;
   var animate = isOpen || unmountOnExit ? "enter" : "exit";
@@ -23384,7 +23384,7 @@ var SlideFade = /*#__PURE__*/forwardRef$1(function (props, ref) {
   };
   return /*#__PURE__*/createElement(AnimatePresence, {
     custom: custom
-  }, show && /*#__PURE__*/createElement(motion.div, _extends$h({
+  }, show && /*#__PURE__*/createElement(motion.div, _extends$i({
     ref: ref,
     className: cx("chakra-offset-slide", className),
     custom: custom
@@ -23397,8 +23397,8 @@ if (__DEV__) {
   SlideFade.displayName = "SlideFade";
 }
 
-function _extends$g() {
-  _extends$g = Object.assign || function (target) {
+function _extends$h() {
+  _extends$h = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -23412,7 +23412,7 @@ function _extends$g() {
     return target;
   };
 
-  return _extends$g.apply(this, arguments);
+  return _extends$h.apply(this, arguments);
 }
 
 /**
@@ -23621,7 +23621,7 @@ var DescendantsManager = function DescendantsManager() {
       options.disabled = !!options.disabled;
     }
 
-    var descendant = _extends$g({
+    var descendant = _extends$h({
       node: node,
       index: -1
     }, options);
@@ -23727,8 +23727,8 @@ function createDescendantContext() {
   _useDescendant];
 }
 
-function _extends$f() {
-  _extends$f = Object.assign || function (target) {
+function _extends$g() {
+  _extends$g = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -23742,10 +23742,10 @@ function _extends$f() {
     return target;
   };
 
-  return _extends$f.apply(this, arguments);
+  return _extends$g.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$f(source, excluded) {
+function _objectWithoutPropertiesLoose$g(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -23760,7 +23760,7 @@ function _objectWithoutPropertiesLoose$f(source, excluded) {
   return target;
 }
 
-var _excluded$1$8 = ["onChange", "defaultIndex", "index", "allowMultiple", "allowToggle"],
+var _excluded$1$9 = ["onChange", "defaultIndex", "index", "allowMultiple", "allowToggle"],
     _excluded2$1$4 = ["isDisabled", "isFocusable", "id"];
 /* -------------------------------------------------------------------------------------------------
  * Create context to track descendants and their indices
@@ -23781,7 +23781,7 @@ function useAccordion(props) {
       indexProp = props.index,
       allowMultiple = props.allowMultiple,
       allowToggle = props.allowToggle,
-      htmlProps = _objectWithoutPropertiesLoose$f(props, _excluded$1$8); // validate the props and `warn` if used incorrectly
+      htmlProps = _objectWithoutPropertiesLoose$g(props, _excluded$1$9); // validate the props and `warn` if used incorrectly
 
 
   allowMultipleWarning(props);
@@ -23889,7 +23889,7 @@ function useAccordionItem(props) {
   var isDisabled = props.isDisabled,
       isFocusable = props.isFocusable,
       id = props.id,
-      htmlProps = _objectWithoutPropertiesLoose$f(props, _excluded2$1$4);
+      htmlProps = _objectWithoutPropertiesLoose$g(props, _excluded2$1$4);
 
   var _useAccordionContext = useAccordionContext(),
       getAccordionItemProps = _useAccordionContext.getAccordionItemProps,
@@ -23990,7 +23990,7 @@ function useAccordionItem(props) {
       ref = null;
     }
 
-    return _extends$f({}, props, {
+    return _extends$g({}, props, {
       type: "button",
       ref: mergeRefs(register, buttonRef, ref),
       id: buttonId,
@@ -24011,7 +24011,7 @@ function useAccordionItem(props) {
       ref = null;
     }
 
-    return _extends$f({}, props, {
+    return _extends$g({}, props, {
       ref: ref,
       role: "region",
       id: panelId,
@@ -24064,9 +24064,9 @@ function warnIfOpenAndDisabled(props) {
   });
 }
 
-var _excluded$o = ["children", "reduceMotion"],
-    _excluded2$8 = ["htmlProps", "descendants"],
-    _excluded3$4 = ["htmlProps"];
+var _excluded$p = ["children", "reduceMotion"],
+    _excluded2$9 = ["htmlProps", "descendants"],
+    _excluded3$5 = ["htmlProps"];
 /* -------------------------------------------------------------------------------------------------
  * Accordion - The wrapper that provides context for all accordion items
  * -----------------------------------------------------------------------------------------------*/
@@ -24081,7 +24081,7 @@ var _excluded$o = ["children", "reduceMotion"],
 var Accordion = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       reduceMotion = _ref.reduceMotion,
-      props = _objectWithoutPropertiesLoose$f(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose$g(_ref, _excluded$p);
 
   var styles = useMultiStyleConfig("Accordion", props);
   var ownProps = omitThemingProps(props);
@@ -24089,10 +24089,10 @@ var Accordion = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useAccordion = useAccordion(ownProps),
       htmlProps = _useAccordion.htmlProps,
       descendants = _useAccordion.descendants,
-      context = _objectWithoutPropertiesLoose$f(_useAccordion, _excluded2$8);
+      context = _objectWithoutPropertiesLoose$g(_useAccordion, _excluded2$9);
 
   var ctx = useMemo(function () {
-    return _extends$f({}, context, {
+    return _extends$g({}, context, {
       reduceMotion: !!reduceMotion
     });
   }, [context, reduceMotion]);
@@ -24102,7 +24102,7 @@ var Accordion = /*#__PURE__*/forwardRef(function (_ref, ref) {
     value: ctx
   }, /*#__PURE__*/createElement(StylesProvider$1, {
     value: styles
-  }, /*#__PURE__*/createElement(chakra.div, _extends$f({
+  }, /*#__PURE__*/createElement(chakra.div, _extends$g({
     ref: ref
   }, htmlProps, {
     className: cx("chakra-accordion", props.className),
@@ -24137,11 +24137,11 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useAccordionItem = useAccordionItem(props),
       htmlProps = _useAccordionItem.htmlProps,
-      context = _objectWithoutPropertiesLoose$f(_useAccordionItem, _excluded3$4);
+      context = _objectWithoutPropertiesLoose$g(_useAccordionItem, _excluded3$5);
 
   var styles = useStyles$1();
 
-  var containerStyles = _extends$f({}, styles.container, {
+  var containerStyles = _extends$g({}, styles.container, {
     overflowAnchor: "none"
   });
 
@@ -24150,7 +24150,7 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [context]);
   return /*#__PURE__*/createElement(AccordionItemProvider, {
     value: ctx
-  }, /*#__PURE__*/createElement(chakra.div, _extends$f({
+  }, /*#__PURE__*/createElement(chakra.div, _extends$g({
     ref: ref
   }, htmlProps, {
     className: cx("chakra-accordion__item", className),
@@ -24182,14 +24182,14 @@ var AccordionButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var buttonProps = getButtonProps(props, ref);
   var styles = useStyles$1();
 
-  var buttonStyles = _extends$f({
+  var buttonStyles = _extends$g({
     display: "flex",
     alignItems: "center",
     width: "100%",
     outline: 0
   }, styles.button);
 
-  return /*#__PURE__*/createElement(chakra.button, _extends$f({}, buttonProps, {
+  return /*#__PURE__*/createElement(chakra.button, _extends$g({}, buttonProps, {
     className: cx("chakra-accordion__button", props.className),
     __css: buttonStyles
   }));
@@ -24228,7 +24228,7 @@ var AccordionPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     delete panelProps.hidden;
   }
 
-  var child = /*#__PURE__*/createElement(chakra.div, _extends$f({}, panelProps, {
+  var child = /*#__PURE__*/createElement(chakra.div, _extends$g({}, panelProps, {
     __css: styles.panel,
     className: _className
   }));
@@ -24267,14 +24267,14 @@ var AccordionIcon = function AccordionIcon(props) {
 
   var styles = useStyles$1();
 
-  var iconStyles = _extends$f({
+  var iconStyles = _extends$g({
     opacity: isDisabled ? 0.4 : 1,
     transform: isOpen ? "rotate(-180deg)" : undefined,
     transition: reduceMotion ? undefined : "transform 0.2s",
     transformOrigin: "center"
   }, styles.icon);
 
-  return /*#__PURE__*/createElement(Icon, _extends$f({
+  return /*#__PURE__*/createElement(Icon, _extends$g({
     viewBox: "0 0 24 24",
     "aria-hidden": true,
     className: _className,
@@ -24289,8 +24289,8 @@ if (__DEV__) {
   AccordionIcon.displayName = "AccordionIcon";
 }
 
-function _extends$e() {
-  _extends$e = Object.assign || function (target) {
+function _extends$f() {
+  _extends$f = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -24304,10 +24304,10 @@ function _extends$e() {
     return target;
   };
 
-  return _extends$e.apply(this, arguments);
+  return _extends$f.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$e(source, excluded) {
+function _objectWithoutPropertiesLoose$f(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -24412,15 +24412,15 @@ function useImage(props) {
   return ignoreFallback ? "loaded" : status;
 }
 
-var _excluded$n = ["htmlWidth", "htmlHeight", "alt"],
-    _excluded2$7 = ["fallbackSrc", "fallback", "src", "srcSet", "align", "fit", "loading", "ignoreFallback", "crossOrigin"];
+var _excluded$o = ["htmlWidth", "htmlHeight", "alt"],
+    _excluded2$8 = ["fallbackSrc", "fallback", "src", "srcSet", "align", "fit", "loading", "ignoreFallback", "crossOrigin"];
 var NativeImage = /*#__PURE__*/forwardRef$1(function (props, ref) {
   var htmlWidth = props.htmlWidth,
       htmlHeight = props.htmlHeight,
       alt = props.alt,
-      rest = _objectWithoutPropertiesLoose$e(props, _excluded$n);
+      rest = _objectWithoutPropertiesLoose$f(props, _excluded$o);
 
-  return /*#__PURE__*/createElement("img", _extends$e({
+  return /*#__PURE__*/createElement("img", _extends$f({
     width: htmlWidth,
     height: htmlHeight,
     ref: ref,
@@ -24444,7 +24444,7 @@ var Image$1$1 = /*#__PURE__*/forwardRef(function (props, ref) {
       loading = props.loading,
       ignoreFallback = props.ignoreFallback,
       crossOrigin = props.crossOrigin,
-      rest = _objectWithoutPropertiesLoose$e(props, _excluded2$7);
+      rest = _objectWithoutPropertiesLoose$f(props, _excluded2$8);
   /**
    * Defer to native `img` tag if `loading` prop is passed
    * @see https://github.com/chakra-ui/chakra-ui/issues/1027
@@ -24453,11 +24453,11 @@ var Image$1$1 = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var shouldIgnore = loading != null || ignoreFallback || fallbackSrc === undefined && fallback === undefined; // if the user doesn't provide any kind of fallback we should ignore it
 
-  var status = useImage(_extends$e({}, props, {
+  var status = useImage(_extends$f({}, props, {
     ignoreFallback: shouldIgnore
   }));
 
-  var shared = _extends$e({
+  var shared = _extends$f({
     ref: ref,
     objectFit: fit,
     objectPosition: align
@@ -24469,14 +24469,14 @@ var Image$1$1 = /*#__PURE__*/forwardRef(function (props, ref) {
      * let's render it here.
      */
     if (fallback) return fallback;
-    return /*#__PURE__*/createElement(chakra.img, _extends$e({
+    return /*#__PURE__*/createElement(chakra.img, _extends$f({
       as: NativeImage,
       className: "chakra-image__placeholder",
       src: fallbackSrc
     }, shared));
   }
 
-  return /*#__PURE__*/createElement(chakra.img, _extends$e({
+  return /*#__PURE__*/createElement(chakra.img, _extends$f({
     as: NativeImage,
     src: src,
     srcSet: srcSet,
@@ -24491,7 +24491,7 @@ var Image$1$1 = /*#__PURE__*/forwardRef(function (props, ref) {
  * support for chakra props
  */
 var Img = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/createElement(chakra.img, _extends$e({
+  return /*#__PURE__*/createElement(chakra.img, _extends$f({
     ref: ref,
     as: NativeImage,
     className: "chakra-image"
@@ -24544,8 +24544,8 @@ if (__DEV__) {
   VisuallyHiddenInput.displayName = "VisuallyHiddenInput";
 }
 
-function _extends$d() {
-  _extends$d = Object.assign || function (target) {
+function _extends$e() {
+  _extends$e = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -24559,10 +24559,10 @@ function _extends$d() {
     return target;
   };
 
-  return _extends$d.apply(this, arguments);
+  return _extends$e.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$d(source, excluded) {
+function _objectWithoutPropertiesLoose$e(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -24577,7 +24577,7 @@ function _objectWithoutPropertiesLoose$d(source, excluded) {
   return target;
 }
 
-var _excluded$m = ["label", "thickness", "speed", "emptyColor", "className"];
+var _excluded$n = ["label", "thickness", "speed", "emptyColor", "className"];
 var spin$1 = keyframes$2({
   "0%": {
     transform: "rotate(0deg)"
@@ -24606,11 +24606,11 @@ var Spinner$1 = /*#__PURE__*/forwardRef(function (props, ref) {
       _omitThemingProps$emp = _omitThemingProps.emptyColor,
       emptyColor = _omitThemingProps$emp === void 0 ? "transparent" : _omitThemingProps$emp,
       className = _omitThemingProps.className,
-      rest = _objectWithoutPropertiesLoose$d(_omitThemingProps, _excluded$m);
+      rest = _objectWithoutPropertiesLoose$e(_omitThemingProps, _excluded$n);
 
   var _className = cx("chakra-spinner", className);
 
-  var spinnerStyles = _extends$d({
+  var spinnerStyles = _extends$e({
     display: "inline-block",
     borderColor: "currentColor",
     borderStyle: "solid",
@@ -24621,7 +24621,7 @@ var Spinner$1 = /*#__PURE__*/forwardRef(function (props, ref) {
     animation: spin$1 + " " + speed + " linear infinite"
   }, styles);
 
-  return /*#__PURE__*/createElement(chakra.div, _extends$d({
+  return /*#__PURE__*/createElement(chakra.div, _extends$e({
     ref: ref,
     __css: spinnerStyles,
     className: _className
@@ -24632,7 +24632,7 @@ if (__DEV__) {
   Spinner$1.displayName = "Spinner";
 }
 
-function _objectWithoutPropertiesLoose$c(source, excluded) {
+function _objectWithoutPropertiesLoose$d(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -24647,8 +24647,8 @@ function _objectWithoutPropertiesLoose$c(source, excluded) {
   return target;
 }
 
-function _extends$c() {
-  _extends$c = Object.assign || function (target) {
+function _extends$d() {
+  _extends$d = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -24662,7 +24662,7 @@ function _extends$c() {
     return target;
   };
 
-  return _extends$c.apply(this, arguments);
+  return _extends$d.apply(this, arguments);
 }
 
 var _excluded$4$2 = ["size", "colorScheme", "variant", "className", "spacing", "isAttached", "isDisabled"];
@@ -24682,7 +24682,7 @@ var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       spacing = _props$spacing === void 0 ? "0.5rem" : _props$spacing,
       isAttached = props.isAttached,
       isDisabled = props.isDisabled,
-      rest = _objectWithoutPropertiesLoose$c(props, _excluded$4$2);
+      rest = _objectWithoutPropertiesLoose$d(props, _excluded$4$2);
 
   var _className = cx("chakra-button__group", className);
 
@@ -24699,7 +24699,7 @@ var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   if (isAttached) {
-    groupStyles = _extends$c({}, groupStyles, {
+    groupStyles = _extends$d({}, groupStyles, {
       "> *:first-of-type:not(:last-of-type)": {
         borderEndRadius: 0
       },
@@ -24711,7 +24711,7 @@ var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     });
   } else {
-    groupStyles = _extends$c({}, groupStyles, {
+    groupStyles = _extends$d({}, groupStyles, {
       "& > *:not(style) ~ *:not(style)": {
         marginStart: spacing
       }
@@ -24720,7 +24720,7 @@ var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return /*#__PURE__*/createElement(ButtonGroupProvider, {
     value: context
-  }, /*#__PURE__*/createElement(chakra.div, _extends$c({
+  }, /*#__PURE__*/createElement(chakra.div, _extends$d({
     ref: ref,
     role: "group",
     __css: groupStyles,
@@ -24732,7 +24732,7 @@ if (__DEV__) {
   ButtonGroup.displayName = "ButtonGroup";
 }
 
-var _excluded$3$2 = ["label", "placement", "spacing", "children", "className", "__css"];
+var _excluded$3$3 = ["label", "placement", "spacing", "children", "className", "__css"];
 var ButtonSpinner = function ButtonSpinner(props) {
   var label = props.label,
       placement = props.placement,
@@ -24746,7 +24746,7 @@ var ButtonSpinner = function ButtonSpinner(props) {
   }) : _props$children,
       className = props.className,
       __css = props.__css,
-      rest = _objectWithoutPropertiesLoose$c(props, _excluded$3$2);
+      rest = _objectWithoutPropertiesLoose$d(props, _excluded$3$3);
 
   var _className = cx("chakra-button__spinner", className);
 
@@ -24754,13 +24754,13 @@ var ButtonSpinner = function ButtonSpinner(props) {
   var spinnerStyles = useMemo(function () {
     var _extends2;
 
-    return _extends$c((_extends2 = {
+    return _extends$d((_extends2 = {
       display: "flex",
       alignItems: "center",
       position: label ? "relative" : "absolute"
     }, _extends2[marginProp] = label ? spacing : 0, _extends2.fontSize = "1em", _extends2.lineHeight = "normal", _extends2), __css);
   }, [__css, label, marginProp, spacing]);
-  return /*#__PURE__*/createElement(chakra.div, _extends$c({
+  return /*#__PURE__*/createElement(chakra.div, _extends$d({
     className: _className
   }, rest, {
     __css: spinnerStyles
@@ -24771,11 +24771,11 @@ if (__DEV__) {
   ButtonSpinner.displayName = "ButtonSpinner";
 }
 
-var _excluded$2$4 = ["children", "className"];
+var _excluded$2$5 = ["children", "className"];
 var ButtonIcon = function ButtonIcon(props) {
   var children = props.children,
       className = props.className,
-      rest = _objectWithoutPropertiesLoose$c(props, _excluded$2$4);
+      rest = _objectWithoutPropertiesLoose$d(props, _excluded$2$5);
 
   var _children = /*#__PURE__*/isValidElement$1(children) ? /*#__PURE__*/cloneElement(children, {
     "aria-hidden": true,
@@ -24784,7 +24784,7 @@ var ButtonIcon = function ButtonIcon(props) {
 
   var _className = cx("chakra-button__icon", className);
 
-  return /*#__PURE__*/createElement(chakra.span, _extends$c({
+  return /*#__PURE__*/createElement(chakra.span, _extends$d({
     display: "inline-flex",
     alignSelf: "center",
     flexShrink: 0
@@ -24813,10 +24813,10 @@ function useButtonType(value) {
   };
 }
 
-var _excluded$1$7 = ["isDisabled", "isLoading", "isActive", "isFullWidth", "children", "leftIcon", "rightIcon", "loadingText", "iconSpacing", "type", "spinner", "spinnerPlacement", "className", "as"];
+var _excluded$1$8 = ["isDisabled", "isLoading", "isActive", "isFullWidth", "children", "leftIcon", "rightIcon", "loadingText", "iconSpacing", "type", "spinner", "spinnerPlacement", "className", "as"];
 var Button$1 = /*#__PURE__*/forwardRef(function (props, ref) {
   var group = useButtonGroup();
-  var styles = useStyleConfig("Button", _extends$c({}, group, props));
+  var styles = useStyleConfig("Button", _extends$d({}, group, props));
 
   var _omitThemingProps = omitThemingProps(props),
       _omitThemingProps$isD = _omitThemingProps.isDisabled,
@@ -24836,7 +24836,7 @@ var Button$1 = /*#__PURE__*/forwardRef(function (props, ref) {
       spinnerPlacement = _omitThemingProps$spi === void 0 ? "start" : _omitThemingProps$spi,
       className = _omitThemingProps.className,
       as = _omitThemingProps.as,
-      rest = _objectWithoutPropertiesLoose$c(_omitThemingProps, _excluded$1$7);
+      rest = _objectWithoutPropertiesLoose$d(_omitThemingProps, _excluded$1$8);
   /**
    * When button is used within ButtonGroup (i.e. flushed with sibling buttons),
    * it is important to add a `zIndex` on focus.
@@ -24852,7 +24852,7 @@ var Button$1 = /*#__PURE__*/forwardRef(function (props, ref) {
       zIndex: 1
     });
 
-    return _extends$c({
+    return _extends$d({
       display: "inline-flex",
       appearance: "none",
       alignItems: "center",
@@ -24878,7 +24878,7 @@ var Button$1 = /*#__PURE__*/forwardRef(function (props, ref) {
     iconSpacing: iconSpacing,
     children: children
   };
-  return /*#__PURE__*/createElement(chakra.button, _extends$c({
+  return /*#__PURE__*/createElement(chakra.button, _extends$d({
     disabled: isDisabled || isLoading,
     ref: useMergeRefs(ref, _ref),
     as: as,
@@ -24918,13 +24918,13 @@ function ButtonContent(props) {
   }, rightIcon));
 }
 
-var _excluded$l = ["icon", "children", "isRound", "aria-label"];
+var _excluded$m = ["icon", "children", "isRound", "aria-label"];
 var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var icon = props.icon,
       children = props.children,
       isRound = props.isRound,
       ariaLabel = props["aria-label"],
-      rest = _objectWithoutPropertiesLoose$c(props, _excluded$l);
+      rest = _objectWithoutPropertiesLoose$d(props, _excluded$m);
   /**
    * Passing the icon as prop or children should work
    */
@@ -24937,7 +24937,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     focusable: false
   }) : null;
 
-  return /*#__PURE__*/createElement(Button$1, _extends$c({
+  return /*#__PURE__*/createElement(Button$1, _extends$d({
     padding: "0",
     borderRadius: isRound ? "full" : undefined,
     ref: ref,
@@ -24949,8 +24949,8 @@ if (__DEV__) {
   IconButton.displayName = "IconButton";
 }
 
-function _extends$b() {
-  _extends$b = Object.assign || function (target) {
+function _extends$c() {
+  _extends$c = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -24964,10 +24964,10 @@ function _extends$b() {
     return target;
   };
 
-  return _extends$b.apply(this, arguments);
+  return _extends$c.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$b(source, excluded) {
+function _objectWithoutPropertiesLoose$c(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -24982,7 +24982,7 @@ function _objectWithoutPropertiesLoose$b(source, excluded) {
   return target;
 }
 
-var _excluded$2$3 = ["id", "isRequired", "isInvalid", "isDisabled", "isReadOnly"],
+var _excluded$2$4 = ["id", "isRequired", "isInvalid", "isDisabled", "isReadOnly"],
     _excluded2$1$3 = ["getRootProps", "htmlProps"];
 
 var _createContext$4 = createContext({
@@ -24998,7 +24998,7 @@ function useFormControlProvider(props) {
       isInvalid = props.isInvalid,
       isDisabled = props.isDisabled,
       isReadOnly = props.isReadOnly,
-      htmlProps = _objectWithoutPropertiesLoose$b(props, _excluded$2$3); // Generate all the required ids
+      htmlProps = _objectWithoutPropertiesLoose$c(props, _excluded$2$4); // Generate all the required ids
 
 
   var uuid = useId();
@@ -25038,7 +25038,7 @@ function useFormControlProvider(props) {
       forwardedRef = null;
     }
 
-    return _extends$b({
+    return _extends$c({
       id: helpTextId
     }, props, {
       /**
@@ -25062,7 +25062,7 @@ function useFormControlProvider(props) {
       forwardedRef = null;
     }
 
-    return _extends$b({}, props, {
+    return _extends$c({}, props, {
       ref: forwardedRef,
       "data-focus": dataAttr(isFocused),
       "data-disabled": dataAttr(isDisabled),
@@ -25081,7 +25081,7 @@ function useFormControlProvider(props) {
       forwardedRef = null;
     }
 
-    return _extends$b({
+    return _extends$c({
       id: feedbackId
     }, props, {
       /**
@@ -25104,7 +25104,7 @@ function useFormControlProvider(props) {
       forwardedRef = null;
     }
 
-    return _extends$b({}, props, htmlProps, {
+    return _extends$c({}, props, htmlProps, {
       ref: forwardedRef,
       role: "group"
     });
@@ -25118,7 +25118,7 @@ function useFormControlProvider(props) {
       forwardedRef = null;
     }
 
-    return _extends$b({}, props, {
+    return _extends$c({}, props, {
       ref: forwardedRef,
       role: "presentation",
       "aria-hidden": true,
@@ -25157,27 +25157,27 @@ function useFormControlProvider(props) {
  * This is commonly used in form elements such as `input`,
  * `select`, `textarea`, etc.
  */
-var FormControl = /*#__PURE__*/forwardRef(function (props, ref) {
+var FormControl$1 = /*#__PURE__*/forwardRef(function (props, ref) {
   var styles = useMultiStyleConfig("Form", props);
   var ownProps = omitThemingProps(props);
 
   var _useFormControlProvid = useFormControlProvider(ownProps),
       getRootProps = _useFormControlProvid.getRootProps;
-      var context = _objectWithoutPropertiesLoose$b(_useFormControlProvid, _excluded2$1$3);
+      var context = _objectWithoutPropertiesLoose$c(_useFormControlProvid, _excluded2$1$3);
 
   var className = cx("chakra-form-control", props.className);
   return /*#__PURE__*/createElement(FormControlProvider, {
     value: context
   }, /*#__PURE__*/createElement(StylesProvider$1, {
     value: styles
-  }, /*#__PURE__*/createElement(chakra.div, _extends$b({}, getRootProps({}, ref), {
+  }, /*#__PURE__*/createElement(chakra.div, _extends$c({}, getRootProps({}, ref), {
     className: className,
     __css: styles["container"]
   }))));
 });
 
 if (__DEV__) {
-  FormControl.displayName = "FormControl";
+  FormControl$1.displayName = "FormControl";
 }
 
 /**
@@ -25191,7 +25191,7 @@ var FormHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
   var field = useFormControlContext();
   var styles = useStyles$1();
   var className = cx("chakra-form__helper-text", props.className);
-  return /*#__PURE__*/createElement(chakra.div, _extends$b({}, field == null ? void 0 : field.getHelpTextProps(props, ref), {
+  return /*#__PURE__*/createElement(chakra.div, _extends$c({}, field == null ? void 0 : field.getHelpTextProps(props, ref), {
     __css: styles.helperText,
     className: className
   }));
@@ -25201,8 +25201,8 @@ if (__DEV__) {
   FormHelperText.displayName = "FormHelperText";
 }
 
-var _excluded$1$6 = ["isDisabled", "isInvalid", "isReadOnly", "isRequired"],
-    _excluded2$6 = ["id", "disabled", "readOnly", "required", "isRequired", "isInvalid", "isReadOnly", "isDisabled", "onFocus", "onBlur"];
+var _excluded$1$7 = ["isDisabled", "isInvalid", "isReadOnly", "isRequired"],
+    _excluded2$7 = ["id", "disabled", "readOnly", "required", "isRequired", "isInvalid", "isReadOnly", "isDisabled", "onFocus", "onBlur"];
 
 /**
  * React hook that provides the props that should be spread on to
@@ -25219,9 +25219,9 @@ function useFormControl(props) {
       isInvalid = _useFormControlProps.isInvalid,
       isReadOnly = _useFormControlProps.isReadOnly,
       isRequired = _useFormControlProps.isRequired,
-      rest = _objectWithoutPropertiesLoose$b(_useFormControlProps, _excluded$1$6);
+      rest = _objectWithoutPropertiesLoose$c(_useFormControlProps, _excluded$1$7);
 
-  return _extends$b({}, rest, {
+  return _extends$c({}, rest, {
     disabled: isDisabled,
     readOnly: isReadOnly,
     required: isRequired,
@@ -25249,7 +25249,7 @@ function useFormControlProps(props) {
       isDisabled = props.isDisabled,
       onFocus = props.onFocus,
       onBlur = props.onBlur,
-      rest = _objectWithoutPropertiesLoose$b(props, _excluded2$6);
+      rest = _objectWithoutPropertiesLoose$c(props, _excluded2$7);
 
   var labelIds = props["aria-describedby"] ? [props["aria-describedby"]] : []; // Error message must be described first in all scenarios.
 
@@ -25261,7 +25261,7 @@ function useFormControlProps(props) {
     labelIds.push(field.helpTextId);
   }
 
-  return _extends$b({}, rest, {
+  return _extends$c({}, rest, {
     "aria-describedby": labelIds.join(" ") || undefined,
     id: id != null ? id : field == null ? void 0 : field.id,
     isDisabled: (_ref = disabled != null ? disabled : isDisabled) != null ? _ref : field == null ? void 0 : field.isDisabled,
@@ -25284,9 +25284,9 @@ var FormErrorMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   if (!(field != null && field.isInvalid)) return null;
   return /*#__PURE__*/createElement(StylesProvider$1, {
     value: styles
-  }, /*#__PURE__*/createElement(chakra.div, _extends$b({}, field == null ? void 0 : field.getErrorMessageProps(ownProps, ref), {
+  }, /*#__PURE__*/createElement(chakra.div, _extends$c({}, field == null ? void 0 : field.getErrorMessageProps(ownProps, ref), {
     className: cx("chakra-form__error-message", props.className),
-    __css: _extends$b({
+    __css: _extends$c({
       display: "flex",
       alignItems: "center"
     }, styles.text)
@@ -25309,7 +25309,7 @@ var FormErrorIcon = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _className = cx("chakra-form__error-icon", props.className);
 
-  return /*#__PURE__*/createElement(Icon$1, _extends$b({
+  return /*#__PURE__*/createElement(Icon$1, _extends$c({
     ref: ref,
     "aria-hidden": true
   }, props, {
@@ -25325,7 +25325,7 @@ if (__DEV__) {
   FormErrorIcon.displayName = "FormErrorIcon";
 }
 
-var _excluded$k = ["className", "children", "requiredIndicator", "optionalIndicator"];
+var _excluded$l = ["className", "children", "requiredIndicator", "optionalIndicator"];
 
 /**
  * Used to enhance the usability of form controls.
@@ -25345,15 +25345,15 @@ var FormLabel = /*#__PURE__*/forwardRef(function (passedProps, ref) {
       requiredIndicator = _props$requiredIndica === void 0 ? /*#__PURE__*/createElement(RequiredIndicator, null) : _props$requiredIndica,
       _props$optionalIndica = props.optionalIndicator,
       optionalIndicator = _props$optionalIndica === void 0 ? null : _props$optionalIndica,
-      rest = _objectWithoutPropertiesLoose$b(props, _excluded$k);
+      rest = _objectWithoutPropertiesLoose$c(props, _excluded$l);
 
   var field = useFormControlContext();
-  var ownProps = (_field$getLabelProps = field == null ? void 0 : field.getLabelProps(rest, ref)) != null ? _field$getLabelProps : _extends$b({
+  var ownProps = (_field$getLabelProps = field == null ? void 0 : field.getLabelProps(rest, ref)) != null ? _field$getLabelProps : _extends$c({
     ref: ref
   }, rest);
-  return /*#__PURE__*/createElement(chakra.label, _extends$b({}, ownProps, {
+  return /*#__PURE__*/createElement(chakra.label, _extends$c({}, ownProps, {
     className: cx("chakra-form__label", props.className),
-    __css: _extends$b({
+    __css: _extends$c({
       display: "block",
       textAlign: "start"
     }, styles)
@@ -25373,7 +25373,7 @@ var RequiredIndicator = /*#__PURE__*/forwardRef(function (props, ref) {
   var styles = useStyles$1();
   if (!(field != null && field.isRequired)) return null;
   var className = cx("chakra-form__required-indicator", props.className);
-  return /*#__PURE__*/createElement(chakra.span, _extends$b({}, field == null ? void 0 : field.getRequiredIndicatorProps(props, ref), {
+  return /*#__PURE__*/createElement(chakra.span, _extends$c({}, field == null ? void 0 : field.getRequiredIndicatorProps(props, ref), {
     __css: styles.requiredIndicator,
     className: className
   }));
@@ -25383,8 +25383,8 @@ if (__DEV__) {
   RequiredIndicator.displayName = "RequiredIndicator";
 }
 
-function _extends$a() {
-  _extends$a = Object.assign || function (target) {
+function _extends$b() {
+  _extends$b = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -25398,7 +25398,7 @@ function _extends$a() {
     return target;
   };
 
-  return _extends$a.apply(this, arguments);
+  return _extends$b.apply(this, arguments);
 }
 
 var _createContext$3 = createContext({
@@ -25407,7 +25407,7 @@ var _createContext$3 = createContext({
 }),
     useCheckboxGroupContext = _createContext$3[1];
 
-function _objectWithoutPropertiesLoose$a(source, excluded) {
+function _objectWithoutPropertiesLoose$b(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -25422,7 +25422,7 @@ function _objectWithoutPropertiesLoose$a(source, excluded) {
   return target;
 }
 
-var _excluded$2$2 = ["isIndeterminate", "isChecked"];
+var _excluded$2$3 = ["isIndeterminate", "isChecked"];
 
 function __motion(el) {
   var m = motion;
@@ -25438,7 +25438,7 @@ function __motion(el) {
 var MotionSvg = __motion(chakra.svg);
 
 var CheckIcon = function CheckIcon(props) {
-  return /*#__PURE__*/createElement(MotionSvg, _extends$a({
+  return /*#__PURE__*/createElement(MotionSvg, _extends$b({
     width: "1.2em",
     viewBox: "0 0 12 10",
     variants: {
@@ -25466,7 +25466,7 @@ var CheckIcon = function CheckIcon(props) {
 };
 
 var IndeterminateIcon = function IndeterminateIcon(props) {
-  return /*#__PURE__*/createElement(MotionSvg, _extends$a({
+  return /*#__PURE__*/createElement(MotionSvg, _extends$b({
     width: "1.2em",
     viewBox: "0 0 24 24",
     variants: {
@@ -25534,7 +25534,7 @@ var CheckboxTransition = function CheckboxTransition(_ref) {
 var CheckboxIcon = function CheckboxIcon(props) {
   var isIndeterminate = props.isIndeterminate,
       isChecked = props.isChecked,
-      rest = _objectWithoutPropertiesLoose$a(props, _excluded$2$2);
+      rest = _objectWithoutPropertiesLoose$b(props, _excluded$2$3);
 
   var IconEl = isIndeterminate ? IndeterminateIcon : CheckIcon;
   return /*#__PURE__*/createElement(CheckboxTransition, {
@@ -25542,7 +25542,7 @@ var CheckboxIcon = function CheckboxIcon(props) {
   }, /*#__PURE__*/createElement(IconEl, rest));
 };
 
-var _excluded$1$5 = ["defaultIsChecked", "defaultChecked", "isChecked", "isFocusable", "onChange", "isIndeterminate", "name", "value", "tabIndex", "aria-label", "aria-labelledby", "aria-invalid"];
+var _excluded$1$6 = ["defaultIsChecked", "defaultChecked", "isChecked", "isFocusable", "onChange", "isIndeterminate", "name", "value", "tabIndex", "aria-label", "aria-labelledby", "aria-invalid"];
 
 /**
  * useCheckbox that provides all the state and focus management logic
@@ -25580,7 +25580,7 @@ function useCheckbox(props) {
       ariaLabel = _props["aria-label"],
       ariaLabelledBy = _props["aria-labelledby"],
       ariaInvalid = _props["aria-invalid"],
-      rest = _objectWithoutPropertiesLoose$a(_props, _excluded$1$5);
+      rest = _objectWithoutPropertiesLoose$b(_props, _excluded$1$6);
 
   var htmlProps = omit(rest, ["isDisabled", "isReadOnly", "isRequired", "isInvalid", "id", "onBlur", "onFocus", "aria-describedby"]);
   var onChangeProp = useCallbackRef(onChange);
@@ -25690,7 +25690,7 @@ function useCheckbox(props) {
       setActive.on();
     };
 
-    return _extends$a({}, props, {
+    return _extends$b({}, props, {
       ref: forwardedRef,
       "data-active": dataAttr(isActive),
       "data-hover": dataAttr(isHovered),
@@ -25716,7 +25716,7 @@ function useCheckbox(props) {
       forwardedRef = null;
     }
 
-    return _extends$a({}, htmlProps, props, {
+    return _extends$b({}, htmlProps, props, {
       ref: mergeRefs(forwardedRef, function (node) {
         if (!node) return;
         setRootIsLabelElement(node.tagName === "LABEL");
@@ -25755,7 +25755,7 @@ function useCheckbox(props) {
       forwardedRef = null;
     }
 
-    return _extends$a({}, props, {
+    return _extends$b({}, props, {
       ref: mergeRefs(inputRef, forwardedRef),
       type: "checkbox",
       name: name,
@@ -25788,7 +25788,7 @@ function useCheckbox(props) {
       forwardedRef = null;
     }
 
-    return _extends$a({}, props, {
+    return _extends$b({}, props, {
       ref: forwardedRef,
       onMouseDown: callAllHandlers(props.onMouseDown, stopEvent),
       onTouchStart: callAllHandlers(props.onTouchStart, stopEvent),
@@ -25826,7 +25826,7 @@ function stopEvent(event) {
   event.stopPropagation();
 }
 
-var _excluded$j = ["spacing", "className", "children", "iconColor", "iconSize", "icon", "isChecked", "isDisabled", "onChange", "inputProps"];
+var _excluded$k = ["spacing", "className", "children", "iconColor", "iconSize", "icon", "isChecked", "isDisabled", "onChange", "inputProps"];
 var CheckboxControl = chakra("span", {
   baseStyle: {
     display: "inline-flex",
@@ -25858,7 +25858,7 @@ var Label = chakra("label", {
 var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
   var group = useCheckboxGroupContext();
 
-  var mergedProps = _extends$a({}, group, props);
+  var mergedProps = _extends$b({}, group, props);
 
   var styles = useMultiStyleConfig("Checkbox", mergedProps);
   var ownProps = omitThemingProps(props);
@@ -25876,7 +25876,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
       isDisabled = _ownProps$isDisabled === void 0 ? group == null ? void 0 : group.isDisabled : _ownProps$isDisabled,
       onChangeProp = ownProps.onChange,
       inputProps = ownProps.inputProps,
-      rest = _objectWithoutPropertiesLoose$a(ownProps, _excluded$j);
+      rest = _objectWithoutPropertiesLoose$b(ownProps, _excluded$k);
 
   var isChecked = isCheckedProp;
 
@@ -25890,7 +25890,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange = callAll(group.onChange, onChangeProp);
   }
 
-  var _useCheckbox = useCheckbox(_extends$a({}, rest, {
+  var _useCheckbox = useCheckbox(_extends$b({}, rest, {
     isDisabled: isDisabled,
     isChecked: isChecked,
     onChange: onChange
@@ -25902,7 +25902,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
       getRootProps = _useCheckbox.getRootProps;
 
   var iconStyles = useMemo(function () {
-    return _extends$a({
+    return _extends$b({
       opacity: state.isChecked || state.isIndeterminate ? 1 : 0,
       transform: state.isChecked || state.isIndeterminate ? "scale(1)" : "scale(0.95)",
       fontSize: iconSize,
@@ -25914,18 +25914,18 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
     isIndeterminate: state.isIndeterminate,
     isChecked: state.isChecked
   });
-  return /*#__PURE__*/createElement(Label, _extends$a({
+  return /*#__PURE__*/createElement(Label, _extends$b({
     __css: styles.container,
     className: cx("chakra-checkbox", className)
-  }, getRootProps()), /*#__PURE__*/createElement("input", _extends$a({
+  }, getRootProps()), /*#__PURE__*/createElement("input", _extends$b({
     className: "chakra-checkbox__input"
-  }, getInputProps(inputProps, ref))), /*#__PURE__*/createElement(CheckboxControl, _extends$a({
+  }, getInputProps(inputProps, ref))), /*#__PURE__*/createElement(CheckboxControl, _extends$b({
     __css: styles.control,
     className: "chakra-checkbox__control"
-  }, getCheckboxProps()), clonedIcon), children && /*#__PURE__*/createElement(chakra.span, _extends$a({
+  }, getCheckboxProps()), clonedIcon), children && /*#__PURE__*/createElement(chakra.span, _extends$b({
     className: "chakra-checkbox__label"
   }, getLabelProps(), {
-    __css: _extends$a({
+    __css: _extends$b({
       marginStart: spacing
     }, styles.label)
   }), children));
@@ -25935,7 +25935,7 @@ if (__DEV__) {
   Checkbox.displayName = "Checkbox";
 }
 
-function _objectWithoutPropertiesLoose$9(source, excluded) {
+function _objectWithoutPropertiesLoose$a(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -25950,8 +25950,8 @@ function _objectWithoutPropertiesLoose$9(source, excluded) {
   return target;
 }
 
-function _extends$9() {
-  _extends$9 = Object.assign || function (target) {
+function _extends$a() {
+  _extends$a = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -25965,13 +25965,13 @@ function _extends$9() {
     return target;
   };
 
-  return _extends$9.apply(this, arguments);
+  return _extends$a.apply(this, arguments);
 }
 
-var _excluded$i = ["children", "isDisabled", "__css"];
+var _excluded$j = ["children", "isDisabled", "__css"];
 
 var CloseIcon = function CloseIcon(props) {
-  return /*#__PURE__*/createElement(Icon, _extends$9({
+  return /*#__PURE__*/createElement(Icon, _extends$a({
     focusable: "false",
     "aria-hidden": true
   }, props), /*#__PURE__*/createElement("path", {
@@ -25993,7 +25993,7 @@ var CloseButton = /*#__PURE__*/forwardRef(function (props, ref) {
       children = _omitThemingProps.children,
       isDisabled = _omitThemingProps.isDisabled,
       __css = _omitThemingProps.__css,
-      rest = _objectWithoutPropertiesLoose$9(_omitThemingProps, _excluded$i);
+      rest = _objectWithoutPropertiesLoose$a(_omitThemingProps, _excluded$j);
 
   var baseStyle = {
     outline: 0,
@@ -26002,12 +26002,12 @@ var CloseButton = /*#__PURE__*/forwardRef(function (props, ref) {
     justifyContent: "center",
     flexShrink: 0
   };
-  return /*#__PURE__*/createElement(chakra.button, _extends$9({
+  return /*#__PURE__*/createElement(chakra.button, _extends$a({
     type: "button",
     "aria-label": "Close",
     ref: ref,
     disabled: isDisabled,
-    __css: _extends$9({}, baseStyle, styles, __css)
+    __css: _extends$a({}, baseStyle, styles, __css)
   }, rest), children || /*#__PURE__*/createElement(CloseIcon, {
     width: "1em",
     height: "1em"
@@ -26018,6 +26018,305 @@ if (__DEV__) {
   CloseButton.displayName = "CloseButton";
 }
 
+function _extends$9() {
+  _extends$9 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$9.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose$9(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var _excluded$3$2 = ["htmlSize"];
+
+/**
+ * Input
+ *
+ * Element that allows users enter single valued data.
+ */
+var Input$1 = /*#__PURE__*/forwardRef(function (props, ref) {
+  var htmlSize = props.htmlSize,
+      rest = _objectWithoutPropertiesLoose$9(props, _excluded$3$2);
+
+  var styles = useMultiStyleConfig("Input", rest);
+  var ownProps = omitThemingProps(rest);
+  var input = useFormControl(ownProps);
+
+  var _className = cx("chakra-input", props.className);
+
+  return /*#__PURE__*/createElement(chakra.input, _extends$9({
+    size: htmlSize
+  }, input, {
+    __css: styles.field,
+    ref: ref,
+    className: _className
+  }));
+});
+
+if (__DEV__) {
+  Input$1.displayName = "Input";
+} // This is used in `input-group.tsx`
+
+
+Input$1.id = "Input";
+
+var _excluded$2$2 = ["placement"];
+var placements$1 = {
+  left: {
+    marginEnd: "-1px",
+    borderEndRadius: 0,
+    borderEndColor: "transparent"
+  },
+  right: {
+    marginStart: "-1px",
+    borderStartRadius: 0,
+    borderStartColor: "transparent"
+  }
+};
+var StyledAddon = chakra("div", {
+  baseStyle: {
+    flex: "0 0 auto",
+    width: "auto",
+    display: "flex",
+    alignItems: "center",
+    whiteSpace: "nowrap"
+  }
+});
+
+/**
+ * InputAddon
+ *
+ * Element to append or prepend to an input
+ */
+var InputAddon = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _placements$placement;
+
+  var _props$placement = props.placement,
+      placement = _props$placement === void 0 ? "left" : _props$placement,
+      rest = _objectWithoutPropertiesLoose$9(props, _excluded$2$2);
+
+  var placementStyles = (_placements$placement = placements$1[placement]) != null ? _placements$placement : {};
+  var styles = useStyles$1();
+  return /*#__PURE__*/createElement(StyledAddon, _extends$9({
+    ref: ref
+  }, rest, {
+    __css: _extends$9({}, styles.addon, placementStyles)
+  }));
+});
+
+if (__DEV__) {
+  InputAddon.displayName = "InputAddon";
+}
+/**
+ * InputLeftAddon
+ *
+ * Element to append to the left of an input
+ */
+
+
+var InputLeftAddon = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/createElement(InputAddon, _extends$9({
+    ref: ref,
+    placement: "left"
+  }, props, {
+    className: cx("chakra-input__left-addon", props.className)
+  }));
+});
+
+if (__DEV__) {
+  InputLeftAddon.displayName = "InputLeftAddon";
+} // This is used in `input-group.tsx`
+
+
+InputLeftAddon.id = "InputLeftAddon";
+/**
+ * InputRightAddon
+ *
+ * Element to append to the right of an input
+ */
+
+var InputRightAddon = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/createElement(InputAddon, _extends$9({
+    ref: ref,
+    placement: "right"
+  }, props, {
+    className: cx("chakra-input__right-addon", props.className)
+  }));
+});
+
+if (__DEV__) {
+  InputRightAddon.displayName = "InputRightAddon";
+} // This is used in `input-group.tsx`
+
+
+InputRightAddon.id = "InputRightAddon";
+
+var _excluded$1$5 = ["children", "className"];
+var InputGroup = /*#__PURE__*/forwardRef(function (props, ref) {
+  var styles = useMultiStyleConfig("Input", props);
+
+  var _omitThemingProps = omitThemingProps(props),
+      children = _omitThemingProps.children,
+      className = _omitThemingProps.className,
+      rest = _objectWithoutPropertiesLoose$9(_omitThemingProps, _excluded$1$5);
+
+  var _className = cx("chakra-input__group", className);
+
+  var groupStyles = {};
+  var validChildren = getValidChildren(children);
+  var input = styles.field;
+  validChildren.forEach(function (child) {
+    if (!styles) return;
+
+    if (input && child.type.id === "InputLeftElement") {
+      var _input$height;
+
+      groupStyles.paddingStart = (_input$height = input.height) != null ? _input$height : input.h;
+    }
+
+    if (input && child.type.id === "InputRightElement") {
+      var _input$height2;
+
+      groupStyles.paddingEnd = (_input$height2 = input.height) != null ? _input$height2 : input.h;
+    }
+
+    if (child.type.id === "InputRightAddon") {
+      groupStyles.borderEndRadius = 0;
+    }
+
+    if (child.type.id === "InputLeftAddon") {
+      groupStyles.borderStartRadius = 0;
+    }
+  });
+  var clones = validChildren.map(function (child) {
+    var _child$props, _child$props2;
+
+    /**
+     * Make it possible to override the size and variant from `Input`
+     */
+    var theming = filterUndefined({
+      size: ((_child$props = child.props) == null ? void 0 : _child$props.size) || props.size,
+      variant: ((_child$props2 = child.props) == null ? void 0 : _child$props2.variant) || props.variant
+    });
+    return child.type.id !== "Input" ? /*#__PURE__*/cloneElement(child, theming) : /*#__PURE__*/cloneElement(child, Object.assign(theming, groupStyles, child.props));
+  });
+  return /*#__PURE__*/createElement(chakra.div, _extends$9({
+    className: _className,
+    ref: ref,
+    __css: {
+      width: "100%",
+      display: "flex",
+      position: "relative"
+    }
+  }, rest), /*#__PURE__*/createElement(StylesProvider$1, {
+    value: styles
+  }, clones));
+});
+
+if (__DEV__) {
+  InputGroup.displayName = "InputGroup";
+}
+
+var _excluded$i = ["placement"],
+    _excluded2$6 = ["className"],
+    _excluded3$4 = ["className"];
+var StyledElement = chakra("div", {
+  baseStyle: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
+    top: "0",
+    zIndex: 2
+  }
+});
+var InputElement = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _input$height, _input$height2, _extends2;
+
+  var _props$placement = props.placement,
+      placement = _props$placement === void 0 ? "left" : _props$placement,
+      rest = _objectWithoutPropertiesLoose$9(props, _excluded$i);
+
+  var styles = useStyles$1();
+  var input = styles.field;
+  var attr = placement === "left" ? "insetStart" : "insetEnd";
+
+  var elementStyles = _extends$9((_extends2 = {}, _extends2[attr] = "0", _extends2.width = (_input$height = input == null ? void 0 : input.height) != null ? _input$height : input == null ? void 0 : input.h, _extends2.height = (_input$height2 = input == null ? void 0 : input.height) != null ? _input$height2 : input == null ? void 0 : input.h, _extends2.fontSize = input == null ? void 0 : input.fontSize, _extends2), styles.element);
+
+  return /*#__PURE__*/createElement(StyledElement, _extends$9({
+    ref: ref,
+    __css: elementStyles
+  }, rest));
+}); // This is used in `input-group.tsx`
+
+InputElement.id = "InputElement";
+
+if (__DEV__) {
+  InputElement.displayName = "InputElement";
+}
+
+var InputLeftElement = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+      rest = _objectWithoutPropertiesLoose$9(props, _excluded2$6);
+
+  var _className = cx("chakra-input__left-element", className);
+
+  return /*#__PURE__*/createElement(InputElement, _extends$9({
+    ref: ref,
+    placement: "left",
+    className: _className
+  }, rest));
+}); // This is used in `input-group.tsx`
+
+InputLeftElement.id = "InputLeftElement";
+
+if (__DEV__) {
+  InputLeftElement.displayName = "InputLeftElement";
+}
+
+var InputRightElement = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+      rest = _objectWithoutPropertiesLoose$9(props, _excluded3$4);
+
+  var _className = cx("chakra-input__right-element", className);
+
+  return /*#__PURE__*/createElement(InputElement, _extends$9({
+    ref: ref,
+    placement: "right",
+    className: _className
+  }, rest));
+}); // This is used in `input-group.tsx`
+
+InputRightElement.id = "InputRightElement";
+
+if (__DEV__) {
+  InputRightElement.displayName = "InputRightElement";
+}
+
 function _extends$8() {
   _extends$8 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -26108,7 +26407,7 @@ if (__DEV__) {
   AspectRatio.displayName = "AspectRatio";
 }
 
-var _excluded$g = ["className"];
+var _excluded$g$1 = ["className"];
 
 /**
  * React component used to display notifications, messages, or
@@ -26120,7 +26419,7 @@ var Badge = /*#__PURE__*/forwardRef(function (props, ref) {
   var styles = useStyleConfig("Badge", props);
 
   var _omitThemingProps = omitThemingProps(props);
-      var rest = _objectWithoutPropertiesLoose$8(_omitThemingProps, _excluded$g);
+      var rest = _objectWithoutPropertiesLoose$8(_omitThemingProps, _excluded$g$1);
 
   return /*#__PURE__*/createElement(chakra.span, _extends$8({
     ref: ref,
@@ -26138,7 +26437,7 @@ if (__DEV__) {
   Badge.displayName = "Badge";
 }
 
-var _excluded$f = ["size", "centerContent"],
+var _excluded$f$1 = ["size", "centerContent"],
     _excluded2$5 = ["size"];
 
 /**
@@ -26162,7 +26461,7 @@ var Square = /*#__PURE__*/forwardRef(function (props, ref) {
   var size = props.size,
       _props$centerContent = props.centerContent,
       centerContent = _props$centerContent === void 0 ? true : _props$centerContent,
-      rest = _objectWithoutPropertiesLoose$8(props, _excluded$f);
+      rest = _objectWithoutPropertiesLoose$8(props, _excluded$f$1);
 
   var styles = centerContent ? {
     display: "flex",
@@ -27518,7 +27817,7 @@ function useEventListeners() {
   };
 }
 
-var _excluded$e = ["ref", "isDisabled", "isFocusable", "clickOnEnter", "clickOnSpace", "onMouseDown", "onMouseUp", "onClick", "onKeyDown", "onKeyUp", "tabIndex", "onMouseOver", "onMouseLeave"];
+var _excluded$g = ["ref", "isDisabled", "isFocusable", "clickOnEnter", "clickOnSpace", "onMouseDown", "onMouseUp", "onClick", "onKeyDown", "onKeyUp", "tabIndex", "onMouseOver", "onMouseLeave"];
 
 function isValidElement(event) {
   var element = event.target;
@@ -27555,7 +27854,7 @@ function useClickable(props) {
       tabIndexProp = _props.tabIndex,
       onMouseOver = _props.onMouseOver,
       onMouseLeave = _props.onMouseLeave,
-      htmlProps = _objectWithoutPropertiesLoose$6(_props, _excluded$e);
+      htmlProps = _objectWithoutPropertiesLoose$6(_props, _excluded$g);
   /**
    * We'll use this to track if the element is a button element
    */
@@ -29983,7 +30282,7 @@ function getPopperPlacement(placement, dir) {
   return (_opposites$placement = opposites[placement]) != null ? _opposites$placement : value;
 }
 
-var _excluded$d = ["size", "shadowColor", "bg", "style"];
+var _excluded$f = ["size", "shadowColor", "bg", "style"];
 function usePopper(props) {
   if (props === void 0) {
     props = {};
@@ -30124,7 +30423,7 @@ function usePopper(props) {
         _props2.shadowColor;
         _props2.bg;
         _props2.style;
-        var rest = _objectWithoutPropertiesLoose$5(_props2, _excluded$d);
+        var rest = _objectWithoutPropertiesLoose$5(_props2, _excluded$f);
 
     return _extends$5({}, rest, {
       ref: ref,
@@ -30598,7 +30897,7 @@ function usePopover(props) {
   };
 }
 
-var _excluded$c = ["children"],
+var _excluded$e = ["children"],
     _excluded2$3 = ["rootProps"];
 
 /**
@@ -30610,7 +30909,7 @@ var Popover$1 = function Popover(props) {
 
   var _omitThemingProps = omitThemingProps(props),
       children = _omitThemingProps.children,
-      rest = _objectWithoutPropertiesLoose$4(_omitThemingProps, _excluded$c);
+      rest = _objectWithoutPropertiesLoose$4(_omitThemingProps, _excluded$e);
 
   var theme = useTheme();
   var context = usePopover(_extends$4({}, rest, {
@@ -31045,14 +31344,14 @@ function _objectWithoutPropertiesLoose$2(source, excluded) {
   return target;
 }
 
-var _excluded$b = ["children", "placeholder", "className"],
+var _excluded$d = ["children", "placeholder", "className"],
     _excluded2$2 = ["rootProps", "placeholder", "icon", "color", "height", "h", "minH", "minHeight", "iconColor", "iconSize", "isFullWidth"],
     _excluded3$1 = ["children"];
 var SelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       placeholder = props.placeholder,
       className = props.className,
-      rest = _objectWithoutPropertiesLoose$2(props, _excluded$b);
+      rest = _objectWithoutPropertiesLoose$2(props, _excluded$d);
 
   return /*#__PURE__*/createElement(chakra.select, _extends$2({}, rest, {
     ref: ref,
@@ -31580,7 +31879,7 @@ function makeTabPanelId(id, index) {
   return id + "--tabpanel-" + index;
 }
 
-var _excluded$a = ["children", "className"],
+var _excluded$c = ["children", "className"],
     _excluded2 = ["htmlProps", "descendants"];
 
 /**
@@ -31594,7 +31893,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   var _omitThemingProps = omitThemingProps(props),
       children = _omitThemingProps.children,
       className = _omitThemingProps.className,
-      rest = _objectWithoutPropertiesLoose$1(_omitThemingProps, _excluded$a);
+      rest = _objectWithoutPropertiesLoose$1(_omitThemingProps, _excluded$c);
 
   var _useTabs = useTabs(rest),
       htmlProps = _useTabs.htmlProps,
@@ -34050,7 +34349,16 @@ var disabledButtonHoverStyle = {
     color: 'gray.dark'
   }
 };
-var variants$6 = {
+var destructiveButtonStyles = {
+  bg: 'white',
+  borderColor: 'red.default',
+  color: 'red.default',
+  _hover: _objectSpread$8({
+    borderColor: 'red.800',
+    color: 'red.800'
+  }, disabledButtonHoverStyle)
+};
+var variants$7 = {
   primary: {
     bg: 'primary.default',
     borderColor: 'primary.default',
@@ -34079,7 +34387,7 @@ var variants$6 = {
     borderColor: 'gray.medium',
     color: 'primary.default',
     _hover: _objectSpread$8({
-      borderColor: 'primary.default',
+      borderColor: 'primary.600',
       color: 'primary.600'
     }, disabledButtonHoverStyle)
   },
@@ -34138,14 +34446,61 @@ var variants$6 = {
         opacity: '.7'
       }
     }
-  }
+  },
+  tertiary: {
+    bg: 'none',
+    borderWidth: 'none',
+    borderRadius: 'unset',
+    color: 'primary.default',
+    textDecoration: 'underline',
+    h: 'unset',
+    m: 'unset',
+    minW: 'unset',
+    p: 'unset',
+    lineHeight: 1,
+    _disabled: {
+      bg: 'none',
+      color: 'gray.dark'
+    },
+    _hover: {
+      color: 'primary.600',
+      _disabled: {
+        color: 'gray.dark'
+      }
+    }
+  },
+  tertiaryOnDark: {
+    bg: 'none',
+    borderRadius: 'unset',
+    borderWidth: 'none',
+    color: 'white',
+    textDecoration: 'underline',
+    h: 'unset',
+    m: 'unset',
+    minW: 'unset',
+    p: 'unset',
+    _disabled: {
+      bg: 'none',
+      color: 'white',
+      opacity: '.7'
+    },
+    _hover: {
+      color: 'white',
+      opacity: '.8',
+      _disabled: {
+        opacity: '.7'
+      }
+    }
+  },
+  destructive: _objectSpread$8({}, destructiveButtonStyles),
+  destructiveOnDark: _objectSpread$8({}, destructiveButtonStyles)
 };
 var defaultProps$5 = {
   size: null
 };
 
-var _default$M = merge$2(theme.components.Button, {
-  variants: variants$6,
+var _default$P = merge$2(theme.components.Button, {
+  variants: variants$7,
   baseStyle: baseStyle$8,
   defaultProps: defaultProps$5
 });
@@ -34159,9 +34514,10 @@ var _default$M = merge$2(theme.components.Button, {
 
   reactHotLoader.register(baseStyle$8, "baseStyle", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.styles.js");
   reactHotLoader.register(disabledButtonHoverStyle, "disabledButtonHoverStyle", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.styles.js");
-  reactHotLoader.register(variants$6, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.styles.js");
+  reactHotLoader.register(destructiveButtonStyles, "destructiveButtonStyles", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.styles.js");
+  reactHotLoader.register(variants$7, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.styles.js");
   reactHotLoader.register(defaultProps$5, "defaultProps", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.styles.js");
-  reactHotLoader.register(_default$M, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.styles.js");
+  reactHotLoader.register(_default$P, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.styles.js");
 })();
 
 (function () {
@@ -34248,9 +34604,9 @@ var props = {
    * @type PropTypes.node
    */
   spinner: PropTypes.node,
-  variant: PropTypes.oneOf(keys$4(variants$6))
+  variant: PropTypes.oneOf(keys$4(variants$7))
 };
-var _default$L = props;
+var _default$O = props;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -34260,7 +34616,7 @@ var _default$L = props;
   }
 
   reactHotLoader.register(props, "props", "/tmp/build/44cb8d9a/src/src/v2/components/Button/button-props.js");
-  reactHotLoader.register(_default$L, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Button/button-props.js");
+  reactHotLoader.register(_default$O, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Button/button-props.js");
 })();
 
 (function () {
@@ -34268,7 +34624,7 @@ var _default$L = props;
   leaveModule && leaveModule(module);
 })();
 
-var _excluded$9 = ["asAnchor", "isExternal"];
+var _excluded$b = ["asAnchor", "isExternal"];
 
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -34297,20 +34653,23 @@ var anchorProps = function anchorProps() {
 var Button = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
   var asAnchor = _ref.asAnchor,
       isExternal = _ref.isExternal,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   return /*#__PURE__*/React.createElement(Button$1, _extends({
-    iconSpacing: 2
+    iconSpacing: 2,
+    sx: {
+      'text-underline-offset': '1px'
+    }
   }, props, (asAnchor || props.as === 'a') && anchorProps(isExternal), {
     ref: ref
   }));
 });
-Button.propTypes = _default$L;
+Button.propTypes = _default$O;
 Button.defaultProps = {
   variant: 'primary',
   type: 'button'
 };
-var _default$K = Button;
+var _default$N = Button;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -34321,7 +34680,7 @@ var _default$K = Button;
 
   reactHotLoader.register(anchorProps, "anchorProps", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.jsx");
   reactHotLoader.register(Button, "Button", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.jsx");
-  reactHotLoader.register(_default$K, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.jsx");
+  reactHotLoader.register(_default$N, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Button/Button.jsx");
 })();
 
 (function () {
@@ -34371,7 +34730,7 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
 };
 
 var options = ['a', 'abbr', 'address', 'article', 'aside', 'b', 'bdi', 'bdo', 'blockquote', 'button', 'caption', 'cite', 'code', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'fieldset', 'figure', 'footer', 'form', 'header', 'hgroup', 'i', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'pre', 'progress', 'q', 'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video'];
-var _default$J = options;
+var _default$M = options;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -34381,7 +34740,7 @@ var _default$J = options;
   }
 
   reactHotLoader.register(options, "options", "/tmp/build/44cb8d9a/src/src/v2/components/Text/options.js");
-  reactHotLoader.register(_default$J, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Text/options.js");
+  reactHotLoader.register(_default$M, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Text/options.js");
 })();
 
 (function () {
@@ -34464,7 +34823,7 @@ var baseStyle$7 = {
   lineHeight: 1.5,
   fontWeight: fontWeights.normal
 };
-var variants$5 = {
+var variants$6 = {
   body: _objectSpread$6(_objectSpread$6({}, baseStyle$7), {}, {
     fontSize: {
       base: fontSizes.base,
@@ -34485,11 +34844,11 @@ var variants$5 = {
   })
 };
 var defaultProps$4 = {
-  variant: variants$5.body
+  variant: variants$6.body
 };
 
-var _default$I = merge$2(theme.components.Text, {
-  variants: variants$5,
+var _default$L = merge$2(theme.components.Text, {
+  variants: variants$6,
   baseStyle: baseStyle$7,
   defaultProps: defaultProps$4
 });
@@ -34502,9 +34861,9 @@ var _default$I = merge$2(theme.components.Text, {
   }
 
   reactHotLoader.register(baseStyle$7, "baseStyle", "/tmp/build/44cb8d9a/src/src/v2/components/Text/Text.styles.js");
-  reactHotLoader.register(variants$5, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Text/Text.styles.js");
+  reactHotLoader.register(variants$6, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Text/Text.styles.js");
   reactHotLoader.register(defaultProps$4, "defaultProps", "/tmp/build/44cb8d9a/src/src/v2/components/Text/Text.styles.js");
-  reactHotLoader.register(_default$I, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Text/Text.styles.js");
+  reactHotLoader.register(_default$L, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Text/Text.styles.js");
 })();
 
 (function () {
@@ -34696,49 +35055,49 @@ var asOptions = freeze({
 var combineAsWithVariant = function combineAsWithVariant(_ref) {
   var as = _ref.as,
       variant = _ref.variant;
-  var variantFontSizeBase = Number(variants$5["".concat(variant)].fontSize.base.replace('rem', ''));
-  var variantFontSizeDesktop = Number(variants$5["".concat(variant)].fontSize.desktop.replace('rem', ''));
+  var variantFontSizeBase = Number(variants$6["".concat(variant)].fontSize.base.replace('rem', ''));
+  var variantFontSizeDesktop = Number(variants$6["".concat(variant)].fontSize.desktop.replace('rem', ''));
   var styleProps;
 
   switch (as) {
     case asOptions.bold:
-      styleProps = _objectSpread$5(_objectSpread$5({}, variants$5["".concat(variant)]), {}, {
+      styleProps = _objectSpread$5(_objectSpread$5({}, variants$6["".concat(variant)]), {}, {
         fontWeight: fontWeights.semibold
       });
       break;
 
     case asOptions.strong:
-      styleProps = _objectSpread$5(_objectSpread$5({}, variants$5["".concat(variant)]), {}, {
+      styleProps = _objectSpread$5(_objectSpread$5({}, variants$6["".concat(variant)]), {}, {
         fontWeight: fontWeights.semibold
       });
       break;
 
     case asOptions.italic:
-      styleProps = _objectSpread$5(_objectSpread$5({}, variants$5["".concat(variant)]), {}, {
+      styleProps = _objectSpread$5(_objectSpread$5({}, variants$6["".concat(variant)]), {}, {
         fontStyle: 'italic'
       });
       break;
 
     case asOptions.emphasis:
-      styleProps = _objectSpread$5(_objectSpread$5({}, variants$5["".concat(variant)]), {}, {
+      styleProps = _objectSpread$5(_objectSpread$5({}, variants$6["".concat(variant)]), {}, {
         fontStyle: 'italic'
       });
       break;
 
     case asOptions.underline:
-      styleProps = _objectSpread$5(_objectSpread$5({}, variants$5["".concat(variant)]), {}, {
+      styleProps = _objectSpread$5(_objectSpread$5({}, variants$6["".concat(variant)]), {}, {
         textDecoration: 'underline'
       });
       break;
 
     case asOptions.strikethrough:
-      styleProps = _objectSpread$5(_objectSpread$5({}, variants$5["".concat(variant)]), {}, {
+      styleProps = _objectSpread$5(_objectSpread$5({}, variants$6["".concat(variant)]), {}, {
         textDecoration: 'line-through'
       });
       break;
 
     case asOptions.small:
-      styleProps = _objectSpread$5(_objectSpread$5({}, variants$5["".concat(variant)]), {}, {
+      styleProps = _objectSpread$5(_objectSpread$5({}, variants$6["".concat(variant)]), {}, {
         fontSize: {
           base: "".concat(variantFontSizeBase * 0.8, "rem"),
           desktop: "".concat(variantFontSizeDesktop * 0.8, "rem")
@@ -34747,14 +35106,14 @@ var combineAsWithVariant = function combineAsWithVariant(_ref) {
       break;
 
     default:
-      styleProps = _objectSpread$5({}, variants$5["".concat(variant)]);
+      styleProps = _objectSpread$5({}, variants$6["".concat(variant)]);
       break;
   }
 
   return styleProps;
 };
 
-var _default$H = combineAsWithVariant;
+var _default$K = combineAsWithVariant;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -34765,7 +35124,7 @@ var _default$H = combineAsWithVariant;
 
   reactHotLoader.register(asOptions, "asOptions", "/tmp/build/44cb8d9a/src/src/v2/components/Text/combineAsWithVariant.js");
   reactHotLoader.register(combineAsWithVariant, "combineAsWithVariant", "/tmp/build/44cb8d9a/src/src/v2/components/Text/combineAsWithVariant.js");
-  reactHotLoader.register(_default$H, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Text/combineAsWithVariant.js");
+  reactHotLoader.register(_default$K, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Text/combineAsWithVariant.js");
 })();
 
 (function () {
@@ -34773,7 +35132,7 @@ var _default$H = combineAsWithVariant;
   leaveModule && leaveModule(module);
 })();
 
-var _excluded$8 = ["as", "variant"];
+var _excluded$a = ["as", "variant"];
 
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -34786,12 +35145,12 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
 var Text = forwardRef(function (_ref, ref) {
   var as = _ref.as,
       variant = _ref.variant,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   return /*#__PURE__*/React.createElement(Text$1, _extends({
     variant: variant,
     as: as
-  }, _default$H({
+  }, _default$K({
     as: as,
     variant: variant
   }), props, {
@@ -34807,12 +35166,12 @@ Text.propTypes = {
   children: PropTypes.node,
 
   /** Controls the underlying styling of the html heading tag */
-  as: PropTypes.oneOf(_default$J),
+  as: PropTypes.oneOf(_default$M),
 
   /** The styling that will be applied to the component regardless of the underlying html */
-  variant: PropTypes.oneOf(keys$4(variants$5))
+  variant: PropTypes.oneOf(keys$4(variants$6))
 };
-var _default$G = Text;
+var _default$J = Text;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -34822,7 +35181,7 @@ var _default$G = Text;
   }
 
   reactHotLoader.register(Text, "Text", "/tmp/build/44cb8d9a/src/src/v2/components/Text/Text.jsx");
-  reactHotLoader.register(_default$G, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Text/Text.jsx");
+  reactHotLoader.register(_default$J, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Text/Text.jsx");
 })();
 
 (function () {
@@ -34867,7 +35226,7 @@ var compactStyles = {
   leaveModule && leaveModule(module);
 })();
 
-var _excluded$7 = ["isCompact"];
+var _excluded$9 = ["isCompact"];
 
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -34879,7 +35238,7 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
 };
 var Grid = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
   var isCompact = _ref.isCompact,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
   return /*#__PURE__*/React.createElement(Grid$1, _extends({}, baseStyles, isCompact && compactStyles, props, {
     ref: ref
@@ -34892,7 +35251,7 @@ Grid.propTypes = {
 Grid.defaultProps = {
   isCompact: false
 };
-var _default$F = Grid;
+var _default$I = Grid;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -34902,7 +35261,7 @@ var _default$F = Grid;
   }
 
   reactHotLoader.register(Grid, "Grid", "/tmp/build/44cb8d9a/src/src/v2/components/Grid/Grid.jsx");
-  reactHotLoader.register(_default$F, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Grid/Grid.jsx");
+  reactHotLoader.register(_default$I, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Grid/Grid.jsx");
 })();
 
 (function () {
@@ -34924,7 +35283,7 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
 var styles$1 = {
   colSpan: 12
 };
-var _default$E = styles$1;
+var _default$H = styles$1;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -34934,7 +35293,7 @@ var _default$E = styles$1;
   }
 
   reactHotLoader.register(styles$1, "styles", "/tmp/build/44cb8d9a/src/src/v2/components/Grid/GridItem.styles.js");
-  reactHotLoader.register(_default$E, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Grid/GridItem.styles.js");
+  reactHotLoader.register(_default$H, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Grid/GridItem.styles.js");
 })();
 
 (function () {
@@ -34951,11 +35310,11 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
 var GridItem = /*#__PURE__*/forwardRef$1(function (props, ref) {
-  return /*#__PURE__*/React.createElement(GridItem$1, _extends({}, _default$E, props, {
+  return /*#__PURE__*/React.createElement(GridItem$1, _extends({}, _default$H, props, {
     ref: ref
   }));
 });
-var _default$D = GridItem;
+var _default$G = GridItem;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -34965,7 +35324,7 @@ var _default$D = GridItem;
   }
 
   reactHotLoader.register(GridItem, "GridItem", "/tmp/build/44cb8d9a/src/src/v2/components/Grid/GridItem.jsx");
-  reactHotLoader.register(_default$D, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Grid/GridItem.jsx");
+  reactHotLoader.register(_default$G, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Grid/GridItem.jsx");
 })();
 
 (function () {
@@ -34977,7 +35336,7 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
 
-var _excluded$6 = ["type"];
+var _excluded$8 = ["type"];
 
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -35024,7 +35383,7 @@ var getListProps = function getListProps(type) {
 
 var List = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
   var type = _ref.type,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   return /*#__PURE__*/React.createElement(List$1, _extends({}, getListProps(type), props, {
     ref: ref
@@ -35041,7 +35400,7 @@ List.propTypes = {
   /** Changes the underlying markdown to be an ordered or unorderd list, (unstyled will render a ul by default) */
   type: PropTypes.oneOf(keys$4(TYPES))
 };
-var _default$C = List;
+var _default$F = List;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35056,7 +35415,7 @@ var _default$C = List;
   reactHotLoader.register(TYPES, "TYPES", "/tmp/build/44cb8d9a/src/src/v2/components/List/List.jsx");
   reactHotLoader.register(getListProps, "getListProps", "/tmp/build/44cb8d9a/src/src/v2/components/List/List.jsx");
   reactHotLoader.register(List, "List", "/tmp/build/44cb8d9a/src/src/v2/components/List/List.jsx");
-  reactHotLoader.register(_default$C, "default", "/tmp/build/44cb8d9a/src/src/v2/components/List/List.jsx");
+  reactHotLoader.register(_default$F, "default", "/tmp/build/44cb8d9a/src/src/v2/components/List/List.jsx");
 })();
 
 (function () {
@@ -35129,7 +35488,7 @@ var defaultProps$3 = {
   size: SIZE_MAP['2xl'],
   thickness: thicknesses[SIZE_MAP['2xl']]
 };
-var _default$B = {
+var _default$E = {
   sizes: sizes$1,
   defaultProps: defaultProps$3
 };
@@ -35146,7 +35505,7 @@ var _default$B = {
   reactHotLoader.register(sizes$1, "sizes", "/tmp/build/44cb8d9a/src/src/v2/components/Spinner/Spinner.styles.js");
   reactHotLoader.register(thicknesses, "thicknesses", "/tmp/build/44cb8d9a/src/src/v2/components/Spinner/Spinner.styles.js");
   reactHotLoader.register(defaultProps$3, "defaultProps", "/tmp/build/44cb8d9a/src/src/v2/components/Spinner/Spinner.styles.js");
-  reactHotLoader.register(_default$B, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Spinner/Spinner.styles.js");
+  reactHotLoader.register(_default$E, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Spinner/Spinner.styles.js");
 })();
 
 (function () {
@@ -35154,7 +35513,7 @@ var _default$B = {
   leaveModule && leaveModule(module);
 })();
 
-var _excluded$5 = ["size", "thickness"];
+var _excluded$7 = ["size", "thickness"];
 
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -35167,7 +35526,7 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
 var Spinner = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
   var size = _ref.size,
       thickness = _ref.thickness,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
   var thicknessString = thickness ? "".concat(thickness, "px") : thicknesses[size] ? "".concat(thicknesses[size], "px") : '2px';
   return /*#__PURE__*/React.createElement(Spinner$1, _extends({
@@ -35195,7 +35554,7 @@ Spinner.propTypes = {
   /** The speed of the spinner, ex: 10s, 0.1s, 250ms */
   speed: PropTypes.string
 };
-var _default$A = Spinner;
+var _default$D = Spinner;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35205,7 +35564,7 @@ var _default$A = Spinner;
   }
 
   reactHotLoader.register(Spinner, "Spinner", "/tmp/build/44cb8d9a/src/src/v2/components/Spinner/Spinner.jsx");
-  reactHotLoader.register(_default$A, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Spinner/Spinner.jsx");
+  reactHotLoader.register(_default$D, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Spinner/Spinner.jsx");
 })();
 
 (function () {
@@ -35229,7 +35588,7 @@ var baseStyle$6 = {
   lineHeight: 1.5,
   fontWeight: fontWeights.semibold
 };
-var variants$4 = {
+var variants$5 = {
   h1: _objectSpread$4(_objectSpread$4({}, baseStyle$6), {}, {
     fontSize: {
       base: fontSizes['2xl'],
@@ -35268,10 +35627,10 @@ var variants$4 = {
   })
 };
 var defaultProps$2 = {
-  variant: variants$4.h2
+  variant: variants$5.h2
 };
-var _default$z = {
-  variants: variants$4,
+var _default$C = {
+  variants: variants$5,
   baseStyle: baseStyle$6,
   defaultProps: defaultProps$2
 };
@@ -35284,9 +35643,9 @@ var _default$z = {
   }
 
   reactHotLoader.register(baseStyle$6, "baseStyle", "/tmp/build/44cb8d9a/src/src/v2/components/Heading/Heading.styles.js");
-  reactHotLoader.register(variants$4, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Heading/Heading.styles.js");
+  reactHotLoader.register(variants$5, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Heading/Heading.styles.js");
   reactHotLoader.register(defaultProps$2, "defaultProps", "/tmp/build/44cb8d9a/src/src/v2/components/Heading/Heading.styles.js");
-  reactHotLoader.register(_default$z, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Heading/Heading.styles.js");
+  reactHotLoader.register(_default$C, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Heading/Heading.styles.js");
 })();
 
 (function () {
@@ -35313,12 +35672,12 @@ Heading.propTypes = {
   children: PropTypes.node,
 
   /** Controls the underlying level of the html heading tag */
-  as: PropTypes.oneOf(keys$4(variants$4)),
+  as: PropTypes.oneOf(keys$4(variants$5)),
 
   /** The styling that will be applied to the component regardless of the underlying html */
-  variant: PropTypes.oneOf(keys$4(variants$4))
+  variant: PropTypes.oneOf(keys$4(variants$5))
 };
-var _default$y = Heading;
+var _default$B = Heading;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35328,7 +35687,7 @@ var _default$y = Heading;
   }
 
   reactHotLoader.register(Heading, "Heading", "/tmp/build/44cb8d9a/src/src/v2/components/Heading/Heading.jsx");
-  reactHotLoader.register(_default$y, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Heading/Heading.jsx");
+  reactHotLoader.register(_default$B, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Heading/Heading.jsx");
 })();
 
 (function () {
@@ -35354,7 +35713,7 @@ var styles = {
     desktop: 'container.desktop'
   }
 };
-var _default$x = styles;
+var _default$A = styles;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35364,7 +35723,7 @@ var _default$x = styles;
   }
 
   reactHotLoader.register(styles, "styles", "/tmp/build/44cb8d9a/src/src/v2/components/Container/Container.styles.js");
-  reactHotLoader.register(_default$x, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Container/Container.styles.js");
+  reactHotLoader.register(_default$A, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Container/Container.styles.js");
 })();
 
 (function () {
@@ -35381,11 +35740,11 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
 var Container = /*#__PURE__*/forwardRef$1(function (props, ref) {
-  return /*#__PURE__*/React.createElement(Container$1, _extends({}, _default$x, props, {
+  return /*#__PURE__*/React.createElement(Container$1, _extends({}, _default$A, props, {
     ref: ref
   }));
 });
-var _default$w = Container;
+var _default$z = Container;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35395,7 +35754,7 @@ var _default$w = Container;
   }
 
   reactHotLoader.register(Container, "Container", "/tmp/build/44cb8d9a/src/src/v2/components/Container/Container.jsx");
-  reactHotLoader.register(_default$w, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Container/Container.jsx");
+  reactHotLoader.register(_default$z, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Container/Container.jsx");
 })();
 
 (function () {
@@ -35555,7 +35914,7 @@ var sizes = {
   max: 'max-content',
   min: 'min-content'
 };
-var _default$v = sizes;
+var _default$y = sizes;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35566,7 +35925,7 @@ var _default$v = sizes;
 
   reactHotLoader.register(container$1, "container", "/tmp/build/44cb8d9a/src/src/v2/theme/base/sizes.js");
   reactHotLoader.register(sizes, "sizes", "/tmp/build/44cb8d9a/src/src/v2/theme/base/sizes.js");
-  reactHotLoader.register(_default$v, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/base/sizes.js");
+  reactHotLoader.register(_default$y, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/base/sizes.js");
 })();
 
 (function () {
@@ -35708,7 +36067,7 @@ var colors = {
   black: black,
   brandBlue: brandBlue
 };
-var _default$u = colors;
+var _default$x = colors;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35727,7 +36086,7 @@ var _default$u = colors;
   reactHotLoader.register(yellow, "yellow", "/tmp/build/44cb8d9a/src/src/v2/theme/base/colors.js");
   reactHotLoader.register(red, "red", "/tmp/build/44cb8d9a/src/src/v2/theme/base/colors.js");
   reactHotLoader.register(colors, "colors", "/tmp/build/44cb8d9a/src/src/v2/theme/base/colors.js");
-  reactHotLoader.register(_default$u, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/base/colors.js");
+  reactHotLoader.register(_default$x, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/base/colors.js");
 })();
 
 (function () {
@@ -35771,7 +36130,7 @@ var indices = {
   layer10: 1000 // equivalent to $z-index-top in fe-core
 
 };
-var _default$t = indices;
+var _default$w = indices;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35781,7 +36140,7 @@ var _default$t = indices;
   }
 
   reactHotLoader.register(indices, "indices", "/tmp/build/44cb8d9a/src/src/v2/theme/base/zindices.js");
-  reactHotLoader.register(_default$t, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/base/zindices.js");
+  reactHotLoader.register(_default$w, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/base/zindices.js");
 })();
 
 (function () {
@@ -35814,7 +36173,7 @@ var breakpoints = createBreakpoints({
   desktopXL: '90rem' // 1440px
 
 });
-var _default$s = breakpoints;
+var _default$v = breakpoints;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35824,7 +36183,7 @@ var _default$s = breakpoints;
   }
 
   reactHotLoader.register(breakpoints, "breakpoints", "/tmp/build/44cb8d9a/src/src/v2/theme/base/breakpoints.js");
-  reactHotLoader.register(_default$s, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/base/breakpoints.js");
+  reactHotLoader.register(_default$v, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/base/breakpoints.js");
 })();
 
 (function () {
@@ -35838,10 +36197,10 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
 
 var base = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  sizes: _default$v,
-  colors: _default$u,
-  zIndices: _default$t,
-  breakpoints: _default$s,
+  sizes: _default$y,
+  colors: _default$x,
+  zIndices: _default$w,
+  breakpoints: _default$v,
   fonts: fonts,
   fontSizes: fontSizes,
   fontWeights: fontWeights
@@ -35869,7 +36228,7 @@ var global$1 = {
     display: 'inline-block'
   }
 };
-var _default$r = global$1;
+var _default$u = global$1;
 var Fonts = function Fonts() {
   return /*#__PURE__*/React.createElement(Global, {
     styles: "\n            @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');\n            /* Copied from https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap */\n            /* latin-ext */\n            @font-face {\n                font-family: 'Open Sans';\n                font-style: normal;\n                font-weight: 700;\n                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOXOhpKKSTj5PW.woff2) format('woff2');\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n            /* latin-ext */\n            @font-face {\n                font-family: 'Open Sans';\n                font-style: normal;\n                font-weight: 600;\n                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format('woff2');\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n            /* latin-ext */\n            @font-face {\n                font-family: 'Open Sans';\n                font-style: normal;\n                font-weight: 400;\n                src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format('woff2');\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n            /* latin-ext */\n            @font-face {\n                font-family: 'Open Sans';\n                font-style: normal;\n                font-weight: 300;\n                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OXOhpKKSTj5PW.woff2) format('woff2');\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n        "
@@ -35880,7 +36239,7 @@ var LegacyOverrides = function LegacyOverrides(_ref) {
 
   var useLegacyOverrides = _ref.useLegacyOverrides;
   return useLegacyOverrides ? /*#__PURE__*/React.createElement(Global, {
-    styles: concat(_context = concat(_context2 = concat(_context3 = concat(_context4 = concat(_context5 = concat(_context6 = "\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n            margin-top: 0;\n            font-weight: ".concat(fontWeights.semibold, ";\n        }\n\n        .heading-sm {\n            font-size: ")).call(_context6, fontSizes.base, ";\n        }\n        .heading-md {\n            font-size: ")).call(_context5, fontSizes.md, ";\n        }\n        .heading-lg {\n            font-size: ")).call(_context4, fontSizes['5xl'], ";\n        }\n\n        p {\n            line-height: 1.5;\n        }\n\n        a {\n            outline: none;\n            text-align: left;\n            color: ")).call(_context3, _default$u.primary.default, ";\n            text-decoration: none;\n\n            &:active,\n            &:focus {\n                outline: none;\n            }\n\n            &:hover {\n                color: ")).call(_context2, _default$u.primary['700'], ";\n            }\n        }\n\n        small {\n            font-size: ")).call(_context, fontSizes.xs, ";\n        }\n\n        ")
+    styles: concat(_context = concat(_context2 = concat(_context3 = concat(_context4 = concat(_context5 = concat(_context6 = "\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n            margin-top: 0;\n            font-weight: ".concat(fontWeights.semibold, ";\n        }\n\n        .heading-sm {\n            font-size: ")).call(_context6, fontSizes.base, ";\n        }\n        .heading-md {\n            font-size: ")).call(_context5, fontSizes.md, ";\n        }\n        .heading-lg {\n            font-size: ")).call(_context4, fontSizes['5xl'], ";\n        }\n\n        p {\n            line-height: 1.5;\n        }\n\n        a {\n            outline: none;\n            text-align: left;\n            color: ")).call(_context3, _default$x.primary.default, ";\n            text-decoration: none;\n\n            &:active,\n            &:focus {\n                outline: none;\n            }\n\n            &:hover {\n                color: ")).call(_context2, _default$x.primary['700'], ";\n            }\n        }\n\n        small {\n            font-size: ")).call(_context, fontSizes.xs, ";\n        }\n\n        ")
   }) : null;
 };
 LegacyOverrides.propTypes = {
@@ -35898,7 +36257,7 @@ LegacyOverrides.propTypes = {
   reactHotLoader.register(global$1, "global", "/tmp/build/44cb8d9a/src/src/v2/theme/global.js");
   reactHotLoader.register(Fonts, "Fonts", "/tmp/build/44cb8d9a/src/src/v2/theme/global.js");
   reactHotLoader.register(LegacyOverrides, "LegacyOverrides", "/tmp/build/44cb8d9a/src/src/v2/theme/global.js");
-  reactHotLoader.register(_default$r, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/global.js");
+  reactHotLoader.register(_default$u, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/global.js");
 })();
 
 (function () {
@@ -35918,7 +36277,7 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
 var item = {
   mb: 2
 };
-var _default$q = item;
+var _default$t = item;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35928,7 +36287,7 @@ var _default$q = item;
   }
 
   reactHotLoader.register(item, "item", "/tmp/build/44cb8d9a/src/src/v2/components/List/styles/item.styles.js");
-  reactHotLoader.register(_default$q, "default", "/tmp/build/44cb8d9a/src/src/v2/components/List/styles/item.styles.js");
+  reactHotLoader.register(_default$t, "default", "/tmp/build/44cb8d9a/src/src/v2/components/List/styles/item.styles.js");
 })();
 
 (function () {
@@ -35945,10 +36304,10 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
 var baseStyle$5 = {
-  item: _default$q
+  item: _default$t
 };
 
-var _default$p = merge$2(theme.components.List, {
+var _default$s = merge$2(theme.components.List, {
   baseStyle: baseStyle$5
 });
 
@@ -35960,7 +36319,7 @@ var _default$p = merge$2(theme.components.List, {
   }
 
   reactHotLoader.register(baseStyle$5, "baseStyle", "/tmp/build/44cb8d9a/src/src/v2/components/List/styles/index.js");
-  reactHotLoader.register(_default$p, "default", "/tmp/build/44cb8d9a/src/src/v2/components/List/styles/index.js");
+  reactHotLoader.register(_default$s, "default", "/tmp/build/44cb8d9a/src/src/v2/components/List/styles/index.js");
 })();
 
 (function () {
@@ -35993,7 +36352,7 @@ var baseStyle$4 = {
   },
   th: {
     fontFamily: 'heading',
-    fontSize: variants$4.h4.fontSize,
+    fontSize: variants$5.h4.fontSize,
     fontWeight: 'semibold',
     letterSpacing: 'unset',
     padding: 4,
@@ -36025,16 +36384,16 @@ var roundedGrayVariant = {
     backgroundColor: 'background.gray'
   })
 };
-var variants$3 = {
+var variants$4 = {
   rounded: roundedWhiteVariant,
   roundedGray: roundedGrayVariant
 };
 var defaultProps$1 = {
   variant: 'rounded'
 };
-var _default$o = {
+var _default$r = {
   parts: parts$2,
-  variants: variants$3,
+  variants: variants$4,
   baseStyle: baseStyle$4,
   defaultProps: defaultProps$1
 };
@@ -36050,9 +36409,9 @@ var _default$o = {
   reactHotLoader.register(baseStyle$4, "baseStyle", "/tmp/build/44cb8d9a/src/src/v2/components/Table/Table.styles.js");
   reactHotLoader.register(roundedWhiteVariant, "roundedWhiteVariant", "/tmp/build/44cb8d9a/src/src/v2/components/Table/Table.styles.js");
   reactHotLoader.register(roundedGrayVariant, "roundedGrayVariant", "/tmp/build/44cb8d9a/src/src/v2/components/Table/Table.styles.js");
-  reactHotLoader.register(variants$3, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Table/Table.styles.js");
+  reactHotLoader.register(variants$4, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Table/Table.styles.js");
   reactHotLoader.register(defaultProps$1, "defaultProps", "/tmp/build/44cb8d9a/src/src/v2/components/Table/Table.styles.js");
-  reactHotLoader.register(_default$o, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Table/Table.styles.js");
+  reactHotLoader.register(_default$r, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Table/Table.styles.js");
 })();
 
 (function () {
@@ -36091,16 +36450,16 @@ var linkOnDark = {
     opacity: '.8'
   }
 };
-var variants$2 = {
+var variants$3 = {
   standard: baseStyle$3,
   onDark: linkOnDark
 };
 var defaultProps = {
   variant: 'standard'
 };
-var _default$n = {
+var _default$q = {
   baseStyle: baseStyle$3,
-  variants: variants$2,
+  variants: variants$3,
   defaultProps: defaultProps
 };
 
@@ -36113,9 +36472,9 @@ var _default$n = {
 
   reactHotLoader.register(baseStyle$3, "baseStyle", "/tmp/build/44cb8d9a/src/src/v2/components/Link/Link.styles.js");
   reactHotLoader.register(linkOnDark, "linkOnDark", "/tmp/build/44cb8d9a/src/src/v2/components/Link/Link.styles.js");
-  reactHotLoader.register(variants$2, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Link/Link.styles.js");
+  reactHotLoader.register(variants$3, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Link/Link.styles.js");
   reactHotLoader.register(defaultProps, "defaultProps", "/tmp/build/44cb8d9a/src/src/v2/components/Link/Link.styles.js");
-  reactHotLoader.register(_default$n, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Link/Link.styles.js");
+  reactHotLoader.register(_default$q, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Link/Link.styles.js");
 })();
 
 (function () {
@@ -36137,7 +36496,7 @@ var panel = {
   px: 0,
   pb: 6
 };
-var _default$m = panel;
+var _default$p = panel;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36147,7 +36506,7 @@ var _default$m = panel;
   }
 
   reactHotLoader.register(panel, "panel", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/panel.js");
-  reactHotLoader.register(_default$m, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/panel.js");
+  reactHotLoader.register(_default$p, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/panel.js");
 })();
 
 (function () {
@@ -36164,7 +36523,7 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
 var button = {
-  fontSize: variants$4.h4.fontSize,
+  fontSize: variants$5.h4.fontSize,
   fontWeight: 'semibold',
   px: 0,
   py: {
@@ -36175,7 +36534,7 @@ var button = {
     color: 'primary.default'
   }
 };
-var _default$l = button;
+var _default$o = button;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36185,7 +36544,7 @@ var _default$l = button;
   }
 
   reactHotLoader.register(button, "button", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/button.js");
-  reactHotLoader.register(_default$l, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/button.js");
+  reactHotLoader.register(_default$o, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/button.js");
 })();
 
 (function () {
@@ -36209,7 +36568,7 @@ var container = {
     borderBottomWidth: '1px'
   }
 };
-var _default$k = container;
+var _default$n = container;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36219,7 +36578,7 @@ var _default$k = container;
   }
 
   reactHotLoader.register(container, "container", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/container.js");
-  reactHotLoader.register(_default$k, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/container.js");
+  reactHotLoader.register(_default$n, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/container.js");
 })();
 
 (function () {
@@ -36237,12 +36596,12 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
 };
 var parts$1 = ['container', 'button', 'panel'];
 var baseStyle$2 = {
-  panel: _default$m,
-  button: _default$l,
-  container: _default$k
+  panel: _default$p,
+  button: _default$o,
+  container: _default$n
 };
 
-var _default$j = merge$2(theme.components.Accordion, {
+var _default$m = merge$2(theme.components.Accordion, {
   parts: parts$1,
   baseStyle: baseStyle$2
 });
@@ -36256,7 +36615,7 @@ var _default$j = merge$2(theme.components.Accordion, {
 
   reactHotLoader.register(parts$1, "parts", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/index.js");
   reactHotLoader.register(baseStyle$2, "baseStyle", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/index.js");
-  reactHotLoader.register(_default$j, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/index.js");
+  reactHotLoader.register(_default$m, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Accordion/styles/index.js");
 })();
 
 (function () {
@@ -36272,7 +36631,7 @@ var _default$j = merge$2(theme.components.Accordion, {
 typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var variants$1 = {
+var variants$2 = {
   line: {
     tablist: {
       borderBottom: '2px solid',
@@ -36303,8 +36662,8 @@ var variants$1 = {
   }
 };
 
-var _default$i = merge$2(theme.components.Tabs, {
-  variants: variants$1
+var _default$l = merge$2(theme.components.Tabs, {
+  variants: variants$2
 });
 
 (function () {
@@ -36314,8 +36673,8 @@ var _default$i = merge$2(theme.components.Tabs, {
     return;
   }
 
-  reactHotLoader.register(variants$1, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Tabs/styles/index.js");
-  reactHotLoader.register(_default$i, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Tabs/styles/index.js");
+  reactHotLoader.register(variants$2, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Tabs/styles/index.js");
+  reactHotLoader.register(_default$l, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Tabs/styles/index.js");
 })();
 
 (function () {
@@ -36331,7 +36690,7 @@ var _default$i = merge$2(theme.components.Tabs, {
 typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var variants = {
+var variants$1 = {
   outline: {
     field: {
       border: '1px solid',
@@ -36370,8 +36729,8 @@ var variants = {
   }
 };
 
-var _default$h = merge$2(theme.components.Select, {
-  variants: variants
+var _default$k = merge$2(theme.components.Select, {
+  variants: variants$1
 });
 
 (function () {
@@ -36381,8 +36740,8 @@ var _default$h = merge$2(theme.components.Select, {
     return;
   }
 
-  reactHotLoader.register(variants, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Select/styles/index.js");
-  reactHotLoader.register(_default$h, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Select/styles/index.js");
+  reactHotLoader.register(variants$1, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Select/styles/index.js");
+  reactHotLoader.register(_default$k, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Select/styles/index.js");
 })();
 
 (function () {
@@ -36426,7 +36785,7 @@ var baseStyle$1 = {
   }
 };
 
-var _default$g = merge$2(theme.components.Checkbox, {
+var _default$j = merge$2(theme.components.Checkbox, {
   baseStyle: baseStyle$1
 });
 
@@ -36438,7 +36797,7 @@ var _default$g = merge$2(theme.components.Checkbox, {
   }
 
   reactHotLoader.register(baseStyle$1, "baseStyle", "/tmp/build/44cb8d9a/src/src/v2/components/Checkbox/styles/index.js");
-  reactHotLoader.register(_default$g, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Checkbox/styles/index.js");
+  reactHotLoader.register(_default$j, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Checkbox/styles/index.js");
 })();
 
 (function () {
@@ -36471,7 +36830,7 @@ var popperStyles = function popperStyles(_ref) {
   };
 };
 
-var _default$f = popperStyles;
+var _default$i = popperStyles;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36481,7 +36840,7 @@ var _default$f = popperStyles;
   }
 
   reactHotLoader.register(popperStyles, "popperStyles", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/popper.js");
-  reactHotLoader.register(_default$f, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/popper.js");
+  reactHotLoader.register(_default$i, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/popper.js");
 })();
 
 (function () {
@@ -36504,7 +36863,7 @@ var body = function body(props) {
   };
 };
 
-var _default$e = body;
+var _default$h = body;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36514,7 +36873,7 @@ var _default$e = body;
   }
 
   reactHotLoader.register(body, "body", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/popover-body.js");
-  reactHotLoader.register(_default$e, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/popover-body.js");
+  reactHotLoader.register(_default$h, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/popover-body.js");
 })();
 
 (function () {
@@ -36535,7 +36894,7 @@ var headerStyles = {
   marginBottom: 2,
   fontWeight: 'semibold'
 };
-var _default$d = headerStyles;
+var _default$g = headerStyles;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36545,7 +36904,7 @@ var _default$d = headerStyles;
   }
 
   reactHotLoader.register(headerStyles, "headerStyles", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/popover-header.js");
-  reactHotLoader.register(_default$d, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/popover-header.js");
+  reactHotLoader.register(_default$g, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/popover-header.js");
 })();
 
 (function () {
@@ -36562,7 +36921,7 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
 
-var _default$c = {
+var _default$f = {
   padding: 4,
   marginBottom: 0,
   maxWidth: '20rem'
@@ -36575,7 +36934,7 @@ var _default$c = {
     return;
   }
 
-  reactHotLoader.register(_default$c, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/popover-content.js");
+  reactHotLoader.register(_default$f, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/popover-content.js");
 })();
 
 (function () {
@@ -36595,14 +36954,14 @@ var parts = ['popper', 'content', 'header', 'body'];
 
 var baseStyle = function baseStyle(props) {
   return {
-    header: _default$d,
-    content: _default$c,
-    body: _default$e(),
-    popper: _default$f(props)
+    header: _default$g,
+    content: _default$f,
+    body: _default$h(),
+    popper: _default$i(props)
   };
 };
 
-var _default$b = merge$2(theme.components.Popover, {
+var _default$e = merge$2(theme.components.Popover, {
   parts: parts,
   baseStyle: baseStyle
 });
@@ -36616,7 +36975,72 @@ var _default$b = merge$2(theme.components.Popover, {
 
   reactHotLoader.register(parts, "parts", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/index.js");
   reactHotLoader.register(baseStyle, "baseStyle", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/index.js");
-  reactHotLoader.register(_default$b, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/index.js");
+  reactHotLoader.register(_default$e, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Popover/styles/index.js");
+})();
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var variants = {
+  outline: {
+    field: {
+      border: '1px solid',
+      borderColor: 'gray.200',
+      fontSize: 'base',
+      paddingLeft: 3,
+      paddingRight: 3,
+      bg: 'inherit',
+      fontWeight: 'semibold',
+      boxShadow: 'none !important',
+      _placeholder: {
+        color: 'gray.600',
+        fontWeight: 'normal'
+      },
+      _focus: {
+        borderColor: 'brandBlue'
+      },
+      _hover: {
+        borderColor: 'gray.300'
+      },
+      _readOnly: {
+        boxShadow: 'none !important',
+        userSelect: 'all'
+      },
+      _disabled: {
+        backgroundColor: 'gray.50',
+        opacity: 0.4,
+        cursor: 'not-allowed'
+      },
+      _invalid: {
+        borderColor: 'error'
+      }
+    }
+  }
+};
+
+var _default$d = merge$2(theme.components.Input, {
+  variants: variants
+});
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(variants, "variants", "/tmp/build/44cb8d9a/src/src/v2/components/Input/styles/index.js");
+  reactHotLoader.register(_default$d, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Input/styles/index.js");
 })();
 
 (function () {
@@ -36630,19 +37054,20 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
 
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  List: _default$p,
-  Table: _default$o,
-  Text: _default$I,
-  Link: _default$n,
-  Accordion: _default$j,
-  Button: _default$M,
-  GridItem: _default$E,
-  Spinner: _default$B,
-  Heading: _default$z,
-  Tabs: _default$i,
-  Select: _default$h,
-  Checkbox: _default$g,
-  Popover: _default$b
+  List: _default$s,
+  Table: _default$r,
+  Text: _default$L,
+  Link: _default$q,
+  Accordion: _default$m,
+  Button: _default$P,
+  GridItem: _default$H,
+  Spinner: _default$E,
+  Heading: _default$C,
+  Tabs: _default$l,
+  Select: _default$k,
+  Checkbox: _default$j,
+  Popover: _default$e,
+  Input: _default$d
 });
 
 (function () {
@@ -36662,7 +37087,7 @@ var extendedTheme = {
   initialColorMode: 'light',
   useSystemColorMode: false,
   styles: {
-    global: _default$r
+    global: _default$u
   },
   remToPixels: function remToPixels(rem) {
     var baseSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
@@ -36674,7 +37099,7 @@ var baseConfig = _objectSpread$1(_objectSpread$1(_objectSpread$1({}, theme), bas
   components: components
 });
 
-var _default$a = extendTheme(extendedTheme, baseConfig);
+var _default$c = extendTheme(extendedTheme, baseConfig);
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36685,7 +37110,7 @@ var _default$a = extendTheme(extendedTheme, baseConfig);
 
   reactHotLoader.register(extendedTheme, "extendedTheme", "/tmp/build/44cb8d9a/src/src/v2/theme/index.js");
   reactHotLoader.register(baseConfig, "baseConfig", "/tmp/build/44cb8d9a/src/src/v2/theme/index.js");
-  reactHotLoader.register(_default$a, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/index.js");
+  reactHotLoader.register(_default$c, "default", "/tmp/build/44cb8d9a/src/src/v2/theme/index.js");
 })();
 
 (function () {
@@ -36693,7 +37118,7 @@ var _default$a = extendTheme(extendedTheme, baseConfig);
   leaveModule && leaveModule(module);
 })();
 
-var _excluded$4 = ["theme", "useLegacyOverrides", "children"];
+var _excluded$6 = ["theme", "useLegacyOverrides", "children"];
 
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -36707,11 +37132,11 @@ var ThemeProvider = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
   var theme = _ref.theme,
       useLegacyOverrides = _ref.useLegacyOverrides,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+      props = _objectWithoutProperties(_ref, _excluded$6);
 
   return /*#__PURE__*/React.createElement(ChakraProvider, _extends({}, props, {
     ref: ref,
-    theme: merge$2(_default$a, theme)
+    theme: merge$2(_default$c, theme)
   }), /*#__PURE__*/React.createElement(Fonts, null), /*#__PURE__*/React.createElement(LegacyOverrides, {
     useLegacyOverrides: useLegacyOverrides
   }), children);
@@ -36726,7 +37151,7 @@ ThemeProvider.propTypes = {
   /** Adds additional themeing on top of SpotHero's default configuration */
   theme: PropTypes.object
 };
-var _default$9 = ThemeProvider;
+var _default$b = ThemeProvider;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36736,7 +37161,7 @@ var _default$9 = ThemeProvider;
   }
 
   reactHotLoader.register(ThemeProvider, "ThemeProvider", "/tmp/build/44cb8d9a/src/src/v2/components/ThemeProvider/ThemeProvider.jsx");
-  reactHotLoader.register(_default$9, "default", "/tmp/build/44cb8d9a/src/src/v2/components/ThemeProvider/ThemeProvider.jsx");
+  reactHotLoader.register(_default$b, "default", "/tmp/build/44cb8d9a/src/src/v2/components/ThemeProvider/ThemeProvider.jsx");
 })();
 
 (function () {
@@ -36763,7 +37188,7 @@ var Card = /*#__PURE__*/forwardRef$1(function (props, ref) {
     ref: ref
   }));
 });
-var _default$8 = Card;
+var _default$a = Card;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36773,7 +37198,7 @@ var _default$8 = Card;
   }
 
   reactHotLoader.register(Card, "Card", "/tmp/build/44cb8d9a/src/src/v2/components/Card/Card.jsx");
-  reactHotLoader.register(_default$8, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Card/Card.jsx");
+  reactHotLoader.register(_default$a, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Card/Card.jsx");
 })();
 
 (function () {
@@ -37324,7 +37749,7 @@ unwrapExports(environment$1);
 
 var environment = environment$1;
 
-var _excluded$3 = ["isSSR", "cloudinaryImageId", "cloudinaryTemplate", "cloudinaryCloudName", "htmlWidth", "htmlHeight", "quality", "lazyLoad"];
+var _excluded$5 = ["isSSR", "cloudinaryImageId", "cloudinaryTemplate", "cloudinaryCloudName", "htmlWidth", "htmlHeight", "quality", "lazyLoad"];
 
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -37371,7 +37796,7 @@ var Image$1 = function Image(_ref2) {
       htmlHeight = _ref2.htmlHeight,
       quality = _ref2.quality,
       lazyLoad = _ref2.lazyLoad,
-      otherProps = _objectWithoutProperties(_ref2, _excluded$3);
+      otherProps = _objectWithoutProperties(_ref2, _excluded$5);
 
   var hasValidCloudinarySrc = (cloudinaryImageId || cloudinaryTemplate) && Boolean(htmlWidth) && Boolean(htmlHeight);
   var cloudinarySrc;
@@ -37432,7 +37857,7 @@ Image$1.defaultProps = {
   quality: 50,
   cloudinaryCloudName: 'spothero'
 };
-var _default$7 = Image$1;
+var _default$9 = Image$1;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -37443,7 +37868,7 @@ var _default$7 = Image$1;
 
   reactHotLoader.register(buildCloudinarySrc, "buildCloudinarySrc", "/tmp/build/44cb8d9a/src/src/v2/components/Image/Image.jsx");
   reactHotLoader.register(Image$1, "Image", "/tmp/build/44cb8d9a/src/src/v2/components/Image/Image.jsx");
-  reactHotLoader.register(_default$7, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Image/Image.jsx");
+  reactHotLoader.register(_default$9, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Image/Image.jsx");
 })();
 
 (function () {
@@ -37451,7 +37876,7 @@ var _default$7 = Image$1;
   leaveModule && leaveModule(module);
 })();
 
-var _excluded$2 = ["color", "loaderBackgroundColor", "isInfinite", "size", "thickness", "trackColor", "value"];
+var _excluded$4 = ["color", "loaderBackgroundColor", "isInfinite", "size", "thickness", "trackColor", "value"];
 
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -37477,7 +37902,7 @@ var Loader = function Loader(_ref) {
       trackColor = _ref$trackColor === void 0 ? 'gray.medium' : _ref$trackColor,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? 0 : _ref$value,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+      props = _objectWithoutProperties(_ref, _excluded$4);
 
   /* -------------------------------------------------------------------- *\
       Note: Since most of the props for this component control multiple
@@ -37539,7 +37964,7 @@ Loader.propTypes = {
    */
   value: PropTypes.number
 };
-var _default$6 = Loader;
+var _default$8 = Loader;
 
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -37549,7 +37974,7 @@ var _default$6 = Loader;
   }
 
   reactHotLoader.register(Loader, "Loader", "/tmp/build/44cb8d9a/src/src/v2/components/Loader/Loader.jsx");
-  reactHotLoader.register(_default$6, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Loader/Loader.jsx");
+  reactHotLoader.register(_default$8, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Loader/Loader.jsx");
 })();
 
 (function () {
@@ -37565,6 +37990,124 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
 
+var _excluded$3 = ["children", "label", "helperText", "errorMessage"];
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var FormControl = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
+  var children = _ref.children,
+      label = _ref.label,
+      helperText = _ref.helperText,
+      errorMessage = _ref.errorMessage,
+      props = _objectWithoutProperties(_ref, _excluded$3);
+
+  return /*#__PURE__*/React.createElement(FormControl$1, _extends({}, props, {
+    ref: ref
+  }), label && /*#__PURE__*/React.createElement(FormLabel, {
+    color: "gray.600",
+    fontWeight: "semibold",
+    mb: 2,
+    fontSize: "sm"
+  }, label), children, helperText && /*#__PURE__*/React.createElement(FormHelperText, {
+    color: "gray.600",
+    mt: 1,
+    fontSize: "xs"
+  }, helperText), /*#__PURE__*/React.createElement(FormErrorMessage, {
+    color: "error",
+    mt: 1,
+    fontSize: "xs"
+  }, errorMessage));
+});
+FormControl.propTypes = {
+  label: PropTypes.string,
+  helperText: PropTypes.string,
+  errorMessage: PropTypes.string,
+  children: PropTypes.node
+};
+var _default$7 = FormControl;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(FormControl, "FormControl", "/tmp/build/44cb8d9a/src/src/v2/components/FormControl/FormControl.jsx");
+  reactHotLoader.register(_default$7, "default", "/tmp/build/44cb8d9a/src/src/v2/components/FormControl/FormControl.jsx");
+})();
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();
+
+var _excluded$2 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired"];
+
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+
+typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var Input = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
+  var label = _ref.label,
+      helperText = _ref.helperText,
+      errorMessage = _ref.errorMessage,
+      isInvalid = _ref.isInvalid,
+      isDisabled = _ref.isDisabled,
+      isRequired = _ref.isRequired,
+      props = _objectWithoutProperties(_ref, _excluded$2);
+
+  return /*#__PURE__*/React.createElement(_default$7, {
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    errorMessage: errorMessage,
+    helperText: helperText,
+    label: label
+  }, /*#__PURE__*/React.createElement(Input$1, _extends({
+    ref: ref
+  }, props)));
+});
+Input.propTypes = {
+  label: PropTypes.string,
+  helperText: PropTypes.string,
+  errorMessage: PropTypes.string,
+  isInvalid: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool
+};
+var _default$6 = Input;
+
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+
+  if (!reactHotLoader) {
+    return;
+  }
+
+  reactHotLoader.register(Input, "Input", "/tmp/build/44cb8d9a/src/src/v2/components/Input/Input.jsx");
+  reactHotLoader.register(_default$6, "default", "/tmp/build/44cb8d9a/src/src/v2/components/Input/Input.jsx");
+})();
+
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();
+
+typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+
 var $map = arrayIteration.map;
 
 
@@ -37856,5 +38399,5 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
 
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, _default$K as Button, ButtonGroup, _default$8 as Card, Checkbox, _default$w as Container, Fade, Flex, _default$F as Grid, _default$D as GridItem, HStack, _default$y as Heading, Icon, _default$7 as Image, Link, _default$C as List, ListItem, _default$6 as Loader, _default$5 as Popover, _default as PopoverContent, PopoverTrigger, Portal, ScaleFade, Select, Slide, SlideFade, _default$A as Spinner, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, _default$G as Text, Tfoot, Th, Thead, _default$9 as ThemeProvider, Tr, createIcon, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useMediaQuery, usePrefersReducedMotion, useTheme, useToken };
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, _default$N as Button, ButtonGroup, _default$a as Card, Checkbox, _default$z as Container, Fade, Flex, _default$I as Grid, _default$G as GridItem, HStack, _default$B as Heading, Icon, _default$9 as Image, _default$6 as Input, Link, _default$F as List, ListItem, _default$8 as Loader, _default$5 as Popover, _default as PopoverContent, PopoverTrigger, Portal, ScaleFade, Select, Slide, SlideFade, _default$D as Spinner, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, _default$J as Text, Tfoot, Th, Thead, _default$b as ThemeProvider, Tr, createIcon, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useMediaQuery, usePrefersReducedMotion, useTheme, useToken };
 //# sourceMappingURL=index-unbundled.esm.js.map