npm - @spothero/ui - Versions diffs - 14.4.0 → 14.5.0 - Mend

@spothero/ui 14.4.0 → 14.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/CHANGELOG.md +23 -0
package/CHANGELOG.tmp +21 -3
package/package.json +1 -1
package/styles/v2/components/FormControl/FormControl.jsx +43 -0
package/styles/v2/components/Input/Input.jsx +41 -0
package/styles/v2/components/Input/Input.stories.js +53 -0
package/styles/v2/components/Input/index.js +1 -0
package/styles/v2/components/Input/styles/index.js +35 -0
package/styles/v2/components/index.js +1 -0
package/styles/v2/components/styles.js +1 -0
package/v2/index-bundled.cjs.js +3 -3
package/v2/index-bundled.cjs.js.map +1 -1
package/v2/index-bundled.esm.js +3 -3
package/v2/index-bundled.esm.js.map +1 -1
package/v2/index-unbundled.cjs.js +956 -472
package/v2/index-unbundled.cjs.js.map +1 -1
package/v2/index-unbundled.esm.js +944 -461
package/v2/index-unbundled.esm.js.map +1 -1

package/v2/index-unbundled.cjs.js CHANGED Viewed

@@ -1329,8 +1329,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];
@@ -1344,7 +1344,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 : {};
@@ -2160,7 +2160,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) {
@@ -6000,7 +6000,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);
@@ -6015,7 +6015,7 @@ function _objectWithoutPropertiesLoose$l(source, excluded) {
   return target;
 }
-var _excluded$u = ["timeout"];
+var _excluded$v = ["timeout"];
 /**
  * React hook to copy content to clipboard
@@ -6040,7 +6040,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 = React.useCallback(function () {
     var didCopy = copyToClipboard(text, copyOptions);
@@ -6111,8 +6111,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];
@@ -6126,7 +6126,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
@@ -6245,7 +6245,7 @@ function useDisclosure(props) {
         props = {};
       }
-      return _extends$p({}, props, {
+      return _extends$q({}, props, {
         "aria-expanded": "true",
         "aria-controls": id,
         onClick: callAllHandlers(props.onClick, onToggle)
@@ -6256,7 +6256,7 @@ function useDisclosure(props) {
         props = {};
       }
-      return _extends$p({}, props, {
+      return _extends$q({}, props, {
         hidden: !isOpen,
         id: id
       });
@@ -6510,8 +6510,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];
@@ -6525,10 +6525,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);
@@ -6543,7 +6543,7 @@ function _objectWithoutPropertiesLoose$k(source, excluded) {
   return target;
 }
-var _excluded$t = ["containerRef"];
+var _excluded$u = ["containerRef"];
 var _createContext$9 = createContext({
   strict: false,
@@ -6655,9 +6655,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__*/React.createElement(ContainerPortal, _extends$o({
+  return containerRef ? /*#__PURE__*/React.createElement(ContainerPortal, _extends$p({
     containerRef: containerRef
   }, rest)) : /*#__PURE__*/React.createElement(DefaultPortal, rest);
 }
@@ -7085,8 +7085,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];
@@ -7100,7 +7100,7 @@ function _extends$n() {
     return target;
   };
-  return _extends$n.apply(this, arguments);
+  return _extends$o.apply(this, arguments);
 }
 var tokenToCSSVar = function tokenToCSSVar(scale, value) {
@@ -7509,7 +7509,7 @@ var t = {
     };
   },
   prop: function prop(property, scale, transform) {
-    return _extends$n({
+    return _extends$o({
       property: property,
       scale: scale
     }, scale && {
@@ -8572,7 +8572,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;
@@ -9058,7 +9058,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);
@@ -9073,7 +9073,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;
@@ -9086,7 +9086,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;
 }
@@ -9151,7 +9151,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)
   });
@@ -9293,8 +9293,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];
@@ -9308,7 +9308,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
@@ -9486,7 +9486,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);
     };
@@ -9504,8 +9504,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];
@@ -9519,7 +9519,7 @@ function _extends$l() {
     return target;
   };
-  return _extends$l.apply(this, arguments);
+  return _extends$m.apply(this, arguments);
 }
 var ThemeProvider$1 = function ThemeProvider(props) {
@@ -9597,7 +9597,7 @@ function omitThemingProps(props) {
 function useChakra() {
   var colorModeResult = useColorMode();
   var theme = useTheme();
-  return _extends$l({}, colorModeResult, {
+  return _extends$m({}, colorModeResult, {
     theme: theme
   });
 }
@@ -9663,7 +9663,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);
@@ -9696,8 +9696,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
@@ -9719,7 +9719,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);
@@ -9733,7 +9733,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;
@@ -9753,7 +9753,7 @@ function forwardRef(component) {
   return /*#__PURE__*/React.forwardRef(component);
 }
-var _excluded$r = ["styleConfig"];
+var _excluded$s = ["styleConfig"];
 function useStyleConfig(themeKey, props, opts) {
   var _styleConfig$defaultP;
@@ -9767,7 +9767,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,
@@ -9910,8 +9910,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];
@@ -9925,7 +9925,7 @@ function _extends$k() {
     return target;
   };
-  return _extends$k.apply(this, arguments);
+  return _extends$l.apply(this, arguments);
 }
 var largeSizes = {
@@ -9954,7 +9954,7 @@ var container$3 = {
   xl: "1280px"
 };
-var sizes$m = _extends$k({}, spacing, largeSizes, {
+var sizes$m = _extends$l({}, spacing, largeSizes, {
   container: container$3
 });
@@ -11481,8 +11481,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];
@@ -11496,7 +11496,7 @@ function _extends$j() {
     return target;
   };
-  return _extends$j.apply(this, arguments);
+  return _extends$k.apply(this, arguments);
 }
 var createBreakpoints = function createBreakpoints(config) {
@@ -11504,7 +11504,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);
 };
@@ -12278,7 +12278,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));
@@ -12580,7 +12580,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",
@@ -12590,7 +12590,7 @@ var baseStyle$v = {
 };
 var code = {
   baseStyle: baseStyle$v,
-  variants: variants$8,
+  variants: variants$8$1,
   defaultProps: defaultProps$h
 };
@@ -12661,7 +12661,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",
@@ -13093,7 +13093,7 @@ var defaultProps$d = {
   size: "md",
   variant: "outline"
 };
-var Input = {
+var Input$2 = {
   parts: inputAnatomy.keys,
   baseStyle: baseStyle$m,
   sizes: sizes$e,
@@ -13345,13 +13345,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]
 };
@@ -13383,7 +13383,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",
@@ -13396,7 +13396,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"
     }),
@@ -13430,7 +13430,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"
 });
@@ -13464,21 +13464,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,
@@ -13552,7 +13552,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
@@ -13573,7 +13573,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));
@@ -13625,9 +13625,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",
@@ -13690,7 +13690,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",
@@ -13723,7 +13723,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
   },
@@ -13744,8 +13744,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) {
@@ -13826,7 +13826,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",
@@ -13858,7 +13858,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",
@@ -14144,12 +14144,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),
@@ -14171,12 +14171,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),
@@ -14585,7 +14585,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",
@@ -14596,25 +14596,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",
@@ -14660,7 +14660,7 @@ var components$1 = /*#__PURE__*/Object.freeze({
   FormError: formError,
   FormLabel: formLabel,
   Heading: heading,
-  Input: Input,
+  Input: Input$2,
   Kbd: kbd,
   Link: link,
   List: list,
@@ -15014,7 +15014,7 @@ var blur = {
   "3xl": "64px"
 };
-var foundations = _extends$k({
+var foundations = _extends$l({
   breakpoints: breakpoints$1,
   zIndices: zIndices,
   radii: radii,
@@ -15068,7 +15068,7 @@ var config = {
   initialColorMode: "light",
   cssVarPrefix: "chakra"
 };
-var theme = _extends$k({
+var theme = _extends$l({
   direction: direction
 }, foundations, {
   components: components$1,
@@ -15076,8 +15076,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];
@@ -15091,10 +15091,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);
@@ -15109,7 +15109,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__*/React.createElement("g", {
     stroke: "currentColor",
@@ -15141,11 +15141,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",
@@ -15169,14 +15169,14 @@ var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
   if (element && typeof element !== "string") {
-    return /*#__PURE__*/React.createElement(chakra.svg, _extends$i({
+    return /*#__PURE__*/React.createElement(chakra.svg, _extends$j({
       as: element
     }, shared, rest));
   }
   var _path = children != null ? children : fallbackIcon.path;
-  return /*#__PURE__*/React.createElement(chakra.svg, _extends$i({
+  return /*#__PURE__*/React.createElement(chakra.svg, _extends$j({
     verticalAlign: "middle",
     viewBox: _viewBox
   }, shared, rest), _path);
@@ -15197,7 +15197,7 @@ function createIcon(options) {
       defaultProps = _options$defaultProps === void 0 ? {} : _options$defaultProps;
   var path = React.Children.toArray(options.path);
   var Comp = /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(Icon, _extends$i({
+    return /*#__PURE__*/React.createElement(Icon, _extends$j({
       ref: ref,
       viewBox: viewBox
     }, defaultProps, props), path.length ? path : /*#__PURE__*/React.createElement("path", {
@@ -22726,7 +22726,7 @@ var AnimatePresence = function (_a) {
         : childrenToRender.map(function (child) { return React.cloneElement(child); })));
 };
-function _objectWithoutPropertiesLoose$g(source, excluded) {
+function _objectWithoutPropertiesLoose$h(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -22741,8 +22741,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];
@@ -22756,7 +22756,7 @@ function _extends$h() {
     return target;
   };
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 var TransitionEasings = {
@@ -22913,12 +22913,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"]
     });
   }
@@ -22961,7 +22961,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,
@@ -22977,7 +22977,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,
@@ -22999,7 +22999,7 @@ var Collapse = /*#__PURE__*/React.forwardRef(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 = React.useState(false),
       mounted = _React$useState[0],
@@ -23045,11 +23045,11 @@ var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false,
     custom: custom
-  }, show && /*#__PURE__*/React.createElement(motion.div, _extends$h({
+  }, show && /*#__PURE__*/React.createElement(motion.div, _extends$i({
     ref: ref
   }, rest, {
     className: cx("chakra-collapse", className),
-    style: _extends$h({
+    style: _extends$i({
       overflow: "hidden",
       display: "block"
     }, style),
@@ -23065,7 +23065,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;
@@ -23109,7 +23109,7 @@ var Fade = /*#__PURE__*/React.forwardRef(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;
@@ -23120,7 +23120,7 @@ var Fade = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   return /*#__PURE__*/React.createElement(AnimatePresence, {
     custom: custom
-  }, show && /*#__PURE__*/React.createElement(motion.div, _extends$h({
+  }, show && /*#__PURE__*/React.createElement(motion.div, _extends$i({
     ref: ref,
     className: cx("chakra-fade", className),
     custom: custom
@@ -23133,7 +23133,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;
@@ -23143,13 +23143,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)
     }, {
@@ -23187,7 +23187,7 @@ var ScaleFade = /*#__PURE__*/React.forwardRef(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";
@@ -23200,7 +23200,7 @@ var ScaleFade = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   return /*#__PURE__*/React.createElement(AnimatePresence, {
     custom: custom
-  }, show && /*#__PURE__*/React.createElement(motion.div, _extends$h({
+  }, show && /*#__PURE__*/React.createElement(motion.div, _extends$i({
     ref: ref,
     className: cx("chakra-offset-slide", className)
   }, scaleFadeConfig, {
@@ -23213,7 +23213,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,
@@ -23239,7 +23239,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
     });
@@ -23257,7 +23257,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
     });
@@ -23273,7 +23273,7 @@ var Slide = /*#__PURE__*/React.forwardRef(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
@@ -23291,7 +23291,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   return /*#__PURE__*/React.createElement(AnimatePresence, {
     custom: custom
-  }, show && /*#__PURE__*/React.createElement(motion.div, _extends$h({}, rest, {
+  }, show && /*#__PURE__*/React.createElement(motion.div, _extends$i({}, rest, {
     ref: ref,
     initial: "exit",
     className: cx("chakra-slide", className),
@@ -23307,8 +23307,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;
@@ -23352,13 +23352,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)
     });
   }
 };
@@ -23366,7 +23366,7 @@ var slideFadeConfig = {
   initial: "initial",
   animate: "enter",
   exit: "exit",
-  variants: variants$7
+  variants: variants$8
 };
 var SlideFade = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var unmountOnExit = props.unmountOnExit,
@@ -23381,7 +23381,7 @@ var SlideFade = /*#__PURE__*/React.forwardRef(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";
@@ -23395,7 +23395,7 @@ var SlideFade = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   return /*#__PURE__*/React.createElement(AnimatePresence, {
     custom: custom
-  }, show && /*#__PURE__*/React.createElement(motion.div, _extends$h({
+  }, show && /*#__PURE__*/React.createElement(motion.div, _extends$i({
     ref: ref,
     className: cx("chakra-offset-slide", className),
     custom: custom
@@ -23408,8 +23408,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];
@@ -23423,7 +23423,7 @@ function _extends$g() {
     return target;
   };
-  return _extends$g.apply(this, arguments);
+  return _extends$h.apply(this, arguments);
 }
 /**
@@ -23632,7 +23632,7 @@ var DescendantsManager = function DescendantsManager() {
       options.disabled = !!options.disabled;
     }
-    var descendant = _extends$g({
+    var descendant = _extends$h({
       node: node,
       index: -1
     }, options);
@@ -23738,8 +23738,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];
@@ -23753,10 +23753,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);
@@ -23771,7 +23771,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
@@ -23792,7 +23792,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);
@@ -23900,7 +23900,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,
@@ -24001,7 +24001,7 @@ function useAccordionItem(props) {
       ref = null;
     }
-    return _extends$f({}, props, {
+    return _extends$g({}, props, {
       type: "button",
       ref: mergeRefs(register, buttonRef, ref),
       id: buttonId,
@@ -24022,7 +24022,7 @@ function useAccordionItem(props) {
       ref = null;
     }
-    return _extends$f({}, props, {
+    return _extends$g({}, props, {
       ref: ref,
       role: "region",
       id: panelId,
@@ -24075,9 +24075,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
  * -----------------------------------------------------------------------------------------------*/
@@ -24092,7 +24092,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);
@@ -24100,10 +24100,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 = React.useMemo(function () {
-    return _extends$f({}, context, {
+    return _extends$g({}, context, {
       reduceMotion: !!reduceMotion
     });
   }, [context, reduceMotion]);
@@ -24113,7 +24113,7 @@ var Accordion = /*#__PURE__*/forwardRef(function (_ref, ref) {
     value: ctx
   }, /*#__PURE__*/React.createElement(StylesProvider$1, {
     value: styles
-  }, /*#__PURE__*/React.createElement(chakra.div, _extends$f({
+  }, /*#__PURE__*/React.createElement(chakra.div, _extends$g({
     ref: ref
   }, htmlProps, {
     className: cx("chakra-accordion", props.className),
@@ -24148,11 +24148,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"
   });
@@ -24161,7 +24161,7 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [context]);
   return /*#__PURE__*/React.createElement(AccordionItemProvider, {
     value: ctx
-  }, /*#__PURE__*/React.createElement(chakra.div, _extends$f({
+  }, /*#__PURE__*/React.createElement(chakra.div, _extends$g({
     ref: ref
   }, htmlProps, {
     className: cx("chakra-accordion__item", className),
@@ -24193,14 +24193,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__*/React.createElement(chakra.button, _extends$f({}, buttonProps, {
+  return /*#__PURE__*/React.createElement(chakra.button, _extends$g({}, buttonProps, {
     className: cx("chakra-accordion__button", props.className),
     __css: buttonStyles
   }));
@@ -24239,7 +24239,7 @@ var AccordionPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     delete panelProps.hidden;
   }
-  var child = /*#__PURE__*/React.createElement(chakra.div, _extends$f({}, panelProps, {
+  var child = /*#__PURE__*/React.createElement(chakra.div, _extends$g({}, panelProps, {
     __css: styles.panel,
     className: _className
   }));
@@ -24278,14 +24278,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__*/React.createElement(Icon, _extends$f({
+  return /*#__PURE__*/React.createElement(Icon, _extends$g({
     viewBox: "0 0 24 24",
     "aria-hidden": true,
     className: _className,
@@ -24300,8 +24300,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];
@@ -24315,10 +24315,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);
@@ -24423,15 +24423,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__*/React.forwardRef(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__*/React.createElement("img", _extends$e({
+  return /*#__PURE__*/React.createElement("img", _extends$f({
     width: htmlWidth,
     height: htmlHeight,
     ref: ref,
@@ -24455,7 +24455,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
@@ -24464,11 +24464,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
@@ -24480,14 +24480,14 @@ var Image$1$1 = /*#__PURE__*/forwardRef(function (props, ref) {
      * let's render it here.
      */
     if (fallback) return fallback;
-    return /*#__PURE__*/React.createElement(chakra.img, _extends$e({
+    return /*#__PURE__*/React.createElement(chakra.img, _extends$f({
       as: NativeImage,
       className: "chakra-image__placeholder",
       src: fallbackSrc
     }, shared));
   }
-  return /*#__PURE__*/React.createElement(chakra.img, _extends$e({
+  return /*#__PURE__*/React.createElement(chakra.img, _extends$f({
     as: NativeImage,
     src: src,
     srcSet: srcSet,
@@ -24502,7 +24502,7 @@ var Image$1$1 = /*#__PURE__*/forwardRef(function (props, ref) {
  * support for chakra props
  */
 var Img = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(chakra.img, _extends$e({
+  return /*#__PURE__*/React.createElement(chakra.img, _extends$f({
     ref: ref,
     as: NativeImage,
     className: "chakra-image"
@@ -24555,8 +24555,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];
@@ -24570,10 +24570,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);
@@ -24588,7 +24588,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)"
@@ -24617,11 +24617,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",
@@ -24632,7 +24632,7 @@ var Spinner$1 = /*#__PURE__*/forwardRef(function (props, ref) {
     animation: spin$1 + " " + speed + " linear infinite"
   }, styles);
-  return /*#__PURE__*/React.createElement(chakra.div, _extends$d({
+  return /*#__PURE__*/React.createElement(chakra.div, _extends$e({
     ref: ref,
     __css: spinnerStyles,
     className: _className
@@ -24643,7 +24643,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);
@@ -24658,8 +24658,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];
@@ -24673,7 +24673,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"];
@@ -24693,7 +24693,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);
@@ -24710,7 +24710,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
       },
@@ -24722,7 +24722,7 @@ var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     });
   } else {
-    groupStyles = _extends$c({}, groupStyles, {
+    groupStyles = _extends$d({}, groupStyles, {
       "& > *:not(style) ~ *:not(style)": {
         marginStart: spacing
       }
@@ -24731,7 +24731,7 @@ var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(ButtonGroupProvider, {
     value: context
-  }, /*#__PURE__*/React.createElement(chakra.div, _extends$c({
+  }, /*#__PURE__*/React.createElement(chakra.div, _extends$d({
     ref: ref,
     role: "group",
     __css: groupStyles,
@@ -24743,7 +24743,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,
@@ -24757,7 +24757,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);
@@ -24765,13 +24765,13 @@ var ButtonSpinner = function ButtonSpinner(props) {
   var spinnerStyles = React.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__*/React.createElement(chakra.div, _extends$c({
+  return /*#__PURE__*/React.createElement(chakra.div, _extends$d({
     className: _className
   }, rest, {
     __css: spinnerStyles
@@ -24782,11 +24782,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__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
     "aria-hidden": true,
@@ -24795,7 +24795,7 @@ var ButtonIcon = function ButtonIcon(props) {
   var _className = cx("chakra-button__icon", className);
-  return /*#__PURE__*/React.createElement(chakra.span, _extends$c({
+  return /*#__PURE__*/React.createElement(chakra.span, _extends$d({
     display: "inline-flex",
     alignSelf: "center",
     flexShrink: 0
@@ -24824,10 +24824,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,
@@ -24847,7 +24847,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.
@@ -24863,7 +24863,7 @@ var Button$1 = /*#__PURE__*/forwardRef(function (props, ref) {
       zIndex: 1
     });
-    return _extends$c({
+    return _extends$d({
       display: "inline-flex",
       appearance: "none",
       alignItems: "center",
@@ -24889,7 +24889,7 @@ var Button$1 = /*#__PURE__*/forwardRef(function (props, ref) {
     iconSpacing: iconSpacing,
     children: children
   };
-  return /*#__PURE__*/React.createElement(chakra.button, _extends$c({
+  return /*#__PURE__*/React.createElement(chakra.button, _extends$d({
     disabled: isDisabled || isLoading,
     ref: useMergeRefs(ref, _ref),
     as: as,
@@ -24929,13 +24929,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
    */
@@ -24948,7 +24948,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     focusable: false
   }) : null;
-  return /*#__PURE__*/React.createElement(Button$1, _extends$c({
+  return /*#__PURE__*/React.createElement(Button$1, _extends$d({
     padding: "0",
     borderRadius: isRound ? "full" : undefined,
     ref: ref,
@@ -24960,8 +24960,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];
@@ -24975,10 +24975,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);
@@ -24993,7 +24993,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({
@@ -25009,7 +25009,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();
@@ -25049,7 +25049,7 @@ function useFormControlProvider(props) {
       forwardedRef = null;
     }
-    return _extends$b({
+    return _extends$c({
       id: helpTextId
     }, props, {
       /**
@@ -25073,7 +25073,7 @@ function useFormControlProvider(props) {
       forwardedRef = null;
     }
-    return _extends$b({}, props, {
+    return _extends$c({}, props, {
       ref: forwardedRef,
       "data-focus": dataAttr(isFocused),
       "data-disabled": dataAttr(isDisabled),
@@ -25092,7 +25092,7 @@ function useFormControlProvider(props) {
       forwardedRef = null;
     }
-    return _extends$b({
+    return _extends$c({
       id: feedbackId
     }, props, {
       /**
@@ -25115,7 +25115,7 @@ function useFormControlProvider(props) {
       forwardedRef = null;
     }
-    return _extends$b({}, props, htmlProps, {
+    return _extends$c({}, props, htmlProps, {
       ref: forwardedRef,
       role: "group"
     });
@@ -25129,7 +25129,7 @@ function useFormControlProvider(props) {
       forwardedRef = null;
     }
-    return _extends$b({}, props, {
+    return _extends$c({}, props, {
       ref: forwardedRef,
       role: "presentation",
       "aria-hidden": true,
@@ -25168,27 +25168,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__*/React.createElement(FormControlProvider, {
     value: context
   }, /*#__PURE__*/React.createElement(StylesProvider$1, {
     value: styles
-  }, /*#__PURE__*/React.createElement(chakra.div, _extends$b({}, getRootProps({}, ref), {
+  }, /*#__PURE__*/React.createElement(chakra.div, _extends$c({}, getRootProps({}, ref), {
     className: className,
     __css: styles["container"]
   }))));
 });
 if (__DEV__) {
-  FormControl.displayName = "FormControl";
+  FormControl$1.displayName = "FormControl";
 }
 /**
@@ -25202,7 +25202,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__*/React.createElement(chakra.div, _extends$b({}, field == null ? void 0 : field.getHelpTextProps(props, ref), {
+  return /*#__PURE__*/React.createElement(chakra.div, _extends$c({}, field == null ? void 0 : field.getHelpTextProps(props, ref), {
     __css: styles.helperText,
     className: className
   }));
@@ -25212,8 +25212,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
@@ -25230,9 +25230,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,
@@ -25260,7 +25260,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.
@@ -25272,7 +25272,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,
@@ -25295,9 +25295,9 @@ var FormErrorMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   if (!(field != null && field.isInvalid)) return null;
   return /*#__PURE__*/React.createElement(StylesProvider$1, {
     value: styles
-  }, /*#__PURE__*/React.createElement(chakra.div, _extends$b({}, field == null ? void 0 : field.getErrorMessageProps(ownProps, ref), {
+  }, /*#__PURE__*/React.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)
@@ -25320,7 +25320,7 @@ var FormErrorIcon = /*#__PURE__*/forwardRef(function (props, ref) {
   var _className = cx("chakra-form__error-icon", props.className);
-  return /*#__PURE__*/React.createElement(Icon$1, _extends$b({
+  return /*#__PURE__*/React.createElement(Icon$1, _extends$c({
     ref: ref,
     "aria-hidden": true
   }, props, {
@@ -25336,7 +25336,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.
@@ -25356,15 +25356,15 @@ var FormLabel = /*#__PURE__*/forwardRef(function (passedProps, ref) {
       requiredIndicator = _props$requiredIndica === void 0 ? /*#__PURE__*/React.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__*/React.createElement(chakra.label, _extends$b({}, ownProps, {
+  return /*#__PURE__*/React.createElement(chakra.label, _extends$c({}, ownProps, {
     className: cx("chakra-form__label", props.className),
-    __css: _extends$b({
+    __css: _extends$c({
       display: "block",
       textAlign: "start"
     }, styles)
@@ -25384,7 +25384,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__*/React.createElement(chakra.span, _extends$b({}, field == null ? void 0 : field.getRequiredIndicatorProps(props, ref), {
+  return /*#__PURE__*/React.createElement(chakra.span, _extends$c({}, field == null ? void 0 : field.getRequiredIndicatorProps(props, ref), {
     __css: styles.requiredIndicator,
     className: className
   }));
@@ -25394,8 +25394,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];
@@ -25409,7 +25409,7 @@ function _extends$a() {
     return target;
   };
-  return _extends$a.apply(this, arguments);
+  return _extends$b.apply(this, arguments);
 }
 var _createContext$3 = createContext({
@@ -25418,7 +25418,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);
@@ -25433,7 +25433,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;
@@ -25449,7 +25449,7 @@ function __motion(el) {
 var MotionSvg = __motion(chakra.svg);
 var CheckIcon = function CheckIcon(props) {
-  return /*#__PURE__*/React.createElement(MotionSvg, _extends$a({
+  return /*#__PURE__*/React.createElement(MotionSvg, _extends$b({
     width: "1.2em",
     viewBox: "0 0 12 10",
     variants: {
@@ -25477,7 +25477,7 @@ var CheckIcon = function CheckIcon(props) {
 };
 var IndeterminateIcon = function IndeterminateIcon(props) {
-  return /*#__PURE__*/React.createElement(MotionSvg, _extends$a({
+  return /*#__PURE__*/React.createElement(MotionSvg, _extends$b({
     width: "1.2em",
     viewBox: "0 0 24 24",
     variants: {
@@ -25545,7 +25545,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__*/React.createElement(CheckboxTransition, {
@@ -25553,7 +25553,7 @@ var CheckboxIcon = function CheckboxIcon(props) {
   }, /*#__PURE__*/React.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
@@ -25591,7 +25591,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);
@@ -25701,7 +25701,7 @@ function useCheckbox(props) {
       setActive.on();
     };
-    return _extends$a({}, props, {
+    return _extends$b({}, props, {
       ref: forwardedRef,
       "data-active": dataAttr(isActive),
       "data-hover": dataAttr(isHovered),
@@ -25727,7 +25727,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");
@@ -25766,7 +25766,7 @@ function useCheckbox(props) {
       forwardedRef = null;
     }
-    return _extends$a({}, props, {
+    return _extends$b({}, props, {
       ref: mergeRefs(inputRef, forwardedRef),
       type: "checkbox",
       name: name,
@@ -25799,7 +25799,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),
@@ -25837,7 +25837,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",
@@ -25869,7 +25869,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);
@@ -25887,7 +25887,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;
@@ -25901,7 +25901,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
@@ -25913,7 +25913,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
       getRootProps = _useCheckbox.getRootProps;
   var iconStyles = React.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,
@@ -25925,18 +25925,18 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
     isIndeterminate: state.isIndeterminate,
     isChecked: state.isChecked
   });
-  return /*#__PURE__*/React.createElement(Label, _extends$a({
+  return /*#__PURE__*/React.createElement(Label, _extends$b({
     __css: styles.container,
     className: cx("chakra-checkbox", className)
-  }, getRootProps()), /*#__PURE__*/React.createElement("input", _extends$a({
+  }, getRootProps()), /*#__PURE__*/React.createElement("input", _extends$b({
     className: "chakra-checkbox__input"
-  }, getInputProps(inputProps, ref))), /*#__PURE__*/React.createElement(CheckboxControl, _extends$a({
+  }, getInputProps(inputProps, ref))), /*#__PURE__*/React.createElement(CheckboxControl, _extends$b({
     __css: styles.control,
     className: "chakra-checkbox__control"
-  }, getCheckboxProps()), clonedIcon), children && /*#__PURE__*/React.createElement(chakra.span, _extends$a({
+  }, getCheckboxProps()), clonedIcon), children && /*#__PURE__*/React.createElement(chakra.span, _extends$b({
     className: "chakra-checkbox__label"
   }, getLabelProps(), {
-    __css: _extends$a({
+    __css: _extends$b({
       marginStart: spacing
     }, styles.label)
   }), children));
@@ -25946,7 +25946,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);
@@ -25961,8 +25961,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];
@@ -25976,13 +25976,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__*/React.createElement(Icon, _extends$9({
+  return /*#__PURE__*/React.createElement(Icon, _extends$a({
     focusable: "false",
     "aria-hidden": true
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -26004,7 +26004,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,
@@ -26013,12 +26013,12 @@ var CloseButton = /*#__PURE__*/forwardRef(function (props, ref) {
     justifyContent: "center",
     flexShrink: 0
   };
-  return /*#__PURE__*/React.createElement(chakra.button, _extends$9({
+  return /*#__PURE__*/React.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__*/React.createElement(CloseIcon, {
     width: "1em",
     height: "1em"
@@ -26029,6 +26029,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__*/React.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__*/React.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__*/React.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__*/React.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__*/React.cloneElement(child, theming) : /*#__PURE__*/React.cloneElement(child, Object.assign(theming, groupStyles, child.props));
+  });
+  return /*#__PURE__*/React.createElement(chakra.div, _extends$9({
+    className: _className,
+    ref: ref,
+    __css: {
+      width: "100%",
+      display: "flex",
+      position: "relative"
+    }
+  }, rest), /*#__PURE__*/React.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__*/React.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__*/React.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__*/React.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++) {
@@ -26119,7 +26418,7 @@ if (__DEV__) {
   AspectRatio.displayName = "AspectRatio";
 }
-var _excluded$g = ["className"];
+var _excluded$g$1 = ["className"];
 /**
  * React component used to display notifications, messages, or
@@ -26131,7 +26430,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__*/React.createElement(chakra.span, _extends$8({
     ref: ref,
@@ -26149,7 +26448,7 @@ if (__DEV__) {
   Badge.displayName = "Badge";
 }
-var _excluded$f = ["size", "centerContent"],
+var _excluded$f$1 = ["size", "centerContent"],
     _excluded2$5 = ["size"];
 /**
@@ -26173,7 +26472,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",
@@ -27529,7 +27828,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;
@@ -27566,7 +27865,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
    */
@@ -29994,7 +30293,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 = {};
@@ -30135,7 +30434,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,
@@ -30609,7 +30908,7 @@ function usePopover(props) {
   };
 }
-var _excluded$c = ["children"],
+var _excluded$e = ["children"],
     _excluded2$3 = ["rootProps"];
 /**
@@ -30621,7 +30920,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, {
@@ -31056,14 +31355,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__*/React.createElement(chakra.select, _extends$2({}, rest, {
     ref: ref,
@@ -31591,7 +31890,7 @@ function makeTabPanelId(id, index) {
   return id + "--tabpanel-" + index;
 }
-var _excluded$a = ["children", "className"],
+var _excluded$c = ["children", "className"],
     _excluded2 = ["htmlProps", "descendants"];
 /**
@@ -31605,7 +31904,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,
@@ -34061,7 +34360,7 @@ var disabledButtonHoverStyle = {
     color: 'gray.dark'
   }
 };
-var variants$6 = {
+var variants$7 = {
   primary: {
     bg: 'primary.default',
     borderColor: 'primary.default',
@@ -34155,8 +34454,8 @@ var defaultProps$5 = {
   size: null
 };
-var _default$M = merge__default['default'](theme.components.Button, {
-  variants: variants$6,
+var _default$P = merge__default['default'](theme.components.Button, {
+  variants: variants$7,
   baseStyle: baseStyle$8,
   defaultProps: defaultProps$5
 });
@@ -34170,9 +34469,9 @@ var _default$M = merge__default['default'](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(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 () {
@@ -34259,9 +34558,9 @@ var props = {
    * @type PropTypes.node
    */
   spinner: PropTypes__default['default'].node,
-  variant: PropTypes__default['default'].oneOf(keys$4(variants$6))
+  variant: PropTypes__default['default'].oneOf(keys$4(variants$7))
 };
-var _default$L = props;
+var _default$O = props;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -34271,7 +34570,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 () {
@@ -34279,7 +34578,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;
@@ -34308,7 +34607,7 @@ var anchorProps = function anchorProps() {
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var asAnchor = _ref.asAnchor,
       isExternal = _ref.isExternal,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$b);
   return /*#__PURE__*/React__default['default'].createElement(Button$1, _extends({
     iconSpacing: 2
@@ -34316,12 +34615,12 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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;
@@ -34332,7 +34631,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 () {
@@ -34382,7 +34681,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;
@@ -34392,7 +34691,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 () {
@@ -34475,7 +34774,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,
@@ -34496,11 +34795,11 @@ var variants$5 = {
   })
 };
 var defaultProps$4 = {
-  variant: variants$5.body
+  variant: variants$6.body
 };
-var _default$I = merge__default['default'](theme.components.Text, {
-  variants: variants$5,
+var _default$L = merge__default['default'](theme.components.Text, {
+  variants: variants$6,
   baseStyle: baseStyle$7,
   defaultProps: defaultProps$4
 });
@@ -34513,9 +34812,9 @@ var _default$I = merge__default['default'](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 () {
@@ -34707,49 +35006,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")
@@ -34758,14 +35057,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;
@@ -34776,7 +35075,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 () {
@@ -34784,7 +35083,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;
@@ -34797,12 +35096,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__default['default'].createElement(Text$1, _extends({
     variant: variant,
     as: as
-  }, _default$H({
+  }, _default$K({
     as: as,
     variant: variant
   }), props, {
@@ -34818,12 +35117,12 @@ Text.propTypes = {
   children: PropTypes__default['default'].node,
   /** Controls the underlying styling of the html heading tag */
-  as: PropTypes__default['default'].oneOf(_default$J),
+  as: PropTypes__default['default'].oneOf(_default$M),
   /** The styling that will be applied to the component regardless of the underlying html */
-  variant: PropTypes__default['default'].oneOf(keys$4(variants$5))
+  variant: PropTypes__default['default'].oneOf(keys$4(variants$6))
 };
-var _default$G = Text;
+var _default$J = Text;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -34833,7 +35132,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 () {
@@ -34878,7 +35177,7 @@ var compactStyles = {
   leaveModule && leaveModule(module);
 })();
-var _excluded$7 = ["isCompact"];
+var _excluded$9 = ["isCompact"];
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -34890,7 +35189,7 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
 };
 var Grid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var isCompact = _ref.isCompact,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/React__default['default'].createElement(Grid$1, _extends({}, baseStyles, isCompact && compactStyles, props, {
     ref: ref
@@ -34903,7 +35202,7 @@ Grid.propTypes = {
 Grid.defaultProps = {
   isCompact: false
 };
-var _default$F = Grid;
+var _default$I = Grid;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -34913,7 +35212,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 () {
@@ -34935,7 +35234,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;
@@ -34945,7 +35244,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 () {
@@ -34962,11 +35261,11 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
 var GridItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default['default'].createElement(GridItem$1, _extends({}, _default$E, props, {
+  return /*#__PURE__*/React__default['default'].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;
@@ -34976,7 +35275,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 () {
@@ -34988,7 +35287,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;
@@ -35035,7 +35334,7 @@ var getListProps = function getListProps(type) {
 var List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var type = _ref.type,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$8);
   return /*#__PURE__*/React__default['default'].createElement(List$1, _extends({}, getListProps(type), props, {
     ref: ref
@@ -35052,7 +35351,7 @@ List.propTypes = {
   /** Changes the underlying markdown to be an ordered or unorderd list, (unstyled will render a ul by default) */
   type: PropTypes__default['default'].oneOf(keys$4(TYPES))
 };
-var _default$C = List;
+var _default$F = List;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35067,7 +35366,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 () {
@@ -35140,7 +35439,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
 };
@@ -35157,7 +35456,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 () {
@@ -35165,7 +35464,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;
@@ -35178,7 +35477,7 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
 var Spinner = /*#__PURE__*/React.forwardRef(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__default['default'].createElement(Spinner$1, _extends({
@@ -35206,7 +35505,7 @@ Spinner.propTypes = {
   /** The speed of the spinner, ex: 10s, 0.1s, 250ms */
   speed: PropTypes__default['default'].string
 };
-var _default$A = Spinner;
+var _default$D = Spinner;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35216,7 +35515,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 () {
@@ -35240,7 +35539,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'],
@@ -35279,10 +35578,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
 };
@@ -35295,9 +35594,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 () {
@@ -35324,12 +35623,12 @@ Heading.propTypes = {
   children: PropTypes__default['default'].node,
   /** Controls the underlying level of the html heading tag */
-  as: PropTypes__default['default'].oneOf(keys$4(variants$4)),
+  as: PropTypes__default['default'].oneOf(keys$4(variants$5)),
   /** The styling that will be applied to the component regardless of the underlying html */
-  variant: PropTypes__default['default'].oneOf(keys$4(variants$4))
+  variant: PropTypes__default['default'].oneOf(keys$4(variants$5))
 };
-var _default$y = Heading;
+var _default$B = Heading;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35339,7 +35638,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 () {
@@ -35365,7 +35664,7 @@ var styles = {
     desktop: 'container.desktop'
   }
 };
-var _default$x = styles;
+var _default$A = styles;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35375,7 +35674,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 () {
@@ -35392,11 +35691,11 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
 var Container = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default['default'].createElement(Container$1, _extends({}, _default$x, props, {
+  return /*#__PURE__*/React__default['default'].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;
@@ -35406,7 +35705,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 () {
@@ -35566,7 +35865,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;
@@ -35577,7 +35876,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 () {
@@ -35719,7 +36018,7 @@ var colors = {
   black: black,
   brandBlue: brandBlue
 };
-var _default$u = colors;
+var _default$x = colors;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35738,7 +36037,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 () {
@@ -35782,7 +36081,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;
@@ -35792,7 +36091,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 () {
@@ -35825,7 +36124,7 @@ var breakpoints = createBreakpoints({
   desktopXL: '90rem' // 1440px
 });
-var _default$s = breakpoints;
+var _default$v = breakpoints;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -35835,7 +36134,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 () {
@@ -35849,10 +36148,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
@@ -35880,7 +36179,7 @@ var global$1 = {
     display: 'inline-block'
   }
 };
-var _default$r = global$1;
+var _default$u = global$1;
 var Fonts = function Fonts() {
   return /*#__PURE__*/React__default['default'].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        "
@@ -35891,7 +36190,7 @@ var LegacyOverrides = function LegacyOverrides(_ref) {
   var useLegacyOverrides = _ref.useLegacyOverrides;
   return useLegacyOverrides ? /*#__PURE__*/React__default['default'].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 = {
@@ -35909,7 +36208,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 () {
@@ -35929,7 +36228,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;
@@ -35939,7 +36238,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 () {
@@ -35956,10 +36255,10 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
 var baseStyle$5 = {
-  item: _default$q
+  item: _default$t
 };
-var _default$p = merge__default['default'](theme.components.List, {
+var _default$s = merge__default['default'](theme.components.List, {
   baseStyle: baseStyle$5
 });
@@ -35971,7 +36270,7 @@ var _default$p = merge__default['default'](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 () {
@@ -36004,7 +36303,7 @@ var baseStyle$4 = {
   },
   th: {
     fontFamily: 'heading',
-    fontSize: variants$4.h4.fontSize,
+    fontSize: variants$5.h4.fontSize,
     fontWeight: 'semibold',
     letterSpacing: 'unset',
     padding: 4,
@@ -36036,16 +36335,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
 };
@@ -36061,9 +36360,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 () {
@@ -36102,16 +36401,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
 };
@@ -36124,9 +36423,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 () {
@@ -36148,7 +36447,7 @@ var panel = {
   px: 0,
   pb: 6
 };
-var _default$m = panel;
+var _default$p = panel;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36158,7 +36457,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 () {
@@ -36175,7 +36474,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: {
@@ -36186,7 +36485,7 @@ var button = {
     color: 'primary.default'
   }
 };
-var _default$l = button;
+var _default$o = button;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36196,7 +36495,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 () {
@@ -36220,7 +36519,7 @@ var container = {
     borderBottomWidth: '1px'
   }
 };
-var _default$k = container;
+var _default$n = container;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36230,7 +36529,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 () {
@@ -36248,12 +36547,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__default['default'](theme.components.Accordion, {
+var _default$m = merge__default['default'](theme.components.Accordion, {
   parts: parts$1,
   baseStyle: baseStyle$2
 });
@@ -36267,7 +36566,7 @@ var _default$j = merge__default['default'](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 () {
@@ -36283,7 +36582,7 @@ var _default$j = merge__default['default'](theme.components.Accordion, {
 typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var variants$1 = {
+var variants$2 = {
   line: {
     tablist: {
       borderBottom: '2px solid',
@@ -36314,8 +36613,8 @@ var variants$1 = {
   }
 };
-var _default$i = merge__default['default'](theme.components.Tabs, {
-  variants: variants$1
+var _default$l = merge__default['default'](theme.components.Tabs, {
+  variants: variants$2
 });
 (function () {
@@ -36325,8 +36624,8 @@ var _default$i = merge__default['default'](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 () {
@@ -36342,7 +36641,7 @@ var _default$i = merge__default['default'](theme.components.Tabs, {
 typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var variants = {
+var variants$1 = {
   outline: {
     field: {
       border: '1px solid',
@@ -36381,8 +36680,8 @@ var variants = {
   }
 };
-var _default$h = merge__default['default'](theme.components.Select, {
-  variants: variants
+var _default$k = merge__default['default'](theme.components.Select, {
+  variants: variants$1
 });
 (function () {
@@ -36392,8 +36691,8 @@ var _default$h = merge__default['default'](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 () {
@@ -36437,7 +36736,7 @@ var baseStyle$1 = {
   }
 };
-var _default$g = merge__default['default'](theme.components.Checkbox, {
+var _default$j = merge__default['default'](theme.components.Checkbox, {
   baseStyle: baseStyle$1
 });
@@ -36449,7 +36748,7 @@ var _default$g = merge__default['default'](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 () {
@@ -36482,7 +36781,7 @@ var popperStyles = function popperStyles(_ref) {
   };
 };
-var _default$f = popperStyles;
+var _default$i = popperStyles;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36492,7 +36791,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 () {
@@ -36515,7 +36814,7 @@ var body = function body(props) {
   };
 };
-var _default$e = body;
+var _default$h = body;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36525,7 +36824,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 () {
@@ -36546,7 +36845,7 @@ var headerStyles = {
   marginBottom: 2,
   fontWeight: 'semibold'
 };
-var _default$d = headerStyles;
+var _default$g = headerStyles;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36556,7 +36855,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 () {
@@ -36573,7 +36872,7 @@ typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signa
   return a;
 };
-var _default$c = {
+var _default$f = {
   padding: 4,
   marginBottom: 0,
   maxWidth: '20rem'
@@ -36586,7 +36885,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 () {
@@ -36606,14 +36905,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__default['default'](theme.components.Popover, {
+var _default$e = merge__default['default'](theme.components.Popover, {
   parts: parts,
   baseStyle: baseStyle
 });
@@ -36627,7 +36926,72 @@ var _default$b = merge__default['default'](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__default['default'](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 () {
@@ -36641,19 +37005,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 () {
@@ -36673,7 +37038,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;
@@ -36685,7 +37050,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;
@@ -36696,7 +37061,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 () {
@@ -36704,7 +37069,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;
@@ -36718,11 +37083,11 @@ var ThemeProvider = /*#__PURE__*/React.forwardRef(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__default['default'].createElement(ChakraProvider, _extends({}, props, {
     ref: ref,
-    theme: merge__default['default'](_default$a, theme)
+    theme: merge__default['default'](_default$c, theme)
   }), /*#__PURE__*/React__default['default'].createElement(Fonts, null), /*#__PURE__*/React__default['default'].createElement(LegacyOverrides, {
     useLegacyOverrides: useLegacyOverrides
   }), children);
@@ -36737,7 +37102,7 @@ ThemeProvider.propTypes = {
   /** Adds additional themeing on top of SpotHero's default configuration */
   theme: PropTypes__default['default'].object
 };
-var _default$9 = ThemeProvider;
+var _default$b = ThemeProvider;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36747,7 +37112,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 () {
@@ -36774,7 +37139,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref
   }));
 });
-var _default$8 = Card;
+var _default$a = Card;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -36784,7 +37149,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 () {
@@ -37335,7 +37700,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;
@@ -37382,7 +37747,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;
@@ -37443,7 +37808,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;
@@ -37454,7 +37819,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 () {
@@ -37462,7 +37827,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;
@@ -37488,7 +37853,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
@@ -37550,7 +37915,7 @@ Loader.propTypes = {
    */
   value: PropTypes__default['default'].number
 };
-var _default$6 = Loader;
+var _default$8 = Loader;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -37560,7 +37925,73 @@ 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 () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();
+typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  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__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      label = _ref.label,
+      helperText = _ref.helperText,
+      errorMessage = _ref.errorMessage,
+      props = _objectWithoutProperties(_ref, _excluded$3);
+  return /*#__PURE__*/React__default['default'].createElement(FormControl$1, _extends({}, props, {
+    ref: ref
+  }), label && /*#__PURE__*/React__default['default'].createElement(FormLabel, {
+    color: "gray.600",
+    fontWeight: "semibold",
+    mb: 2,
+    fontSize: "sm"
+  }, label), children, helperText && /*#__PURE__*/React__default['default'].createElement(FormHelperText, {
+    color: "gray.600",
+    mt: 1,
+    fontSize: "xs"
+  }, helperText), /*#__PURE__*/React__default['default'].createElement(FormErrorMessage, {
+    color: "error",
+    mt: 1,
+    fontSize: "xs"
+  }, errorMessage));
+});
+FormControl.propTypes = {
+  label: PropTypes__default['default'].string,
+  helperText: PropTypes__default['default'].string,
+  errorMessage: PropTypes__default['default'].string,
+  children: PropTypes__default['default'].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 () {
@@ -37568,9 +37999,61 @@ var _default$6 = Loader;
   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__*/React.forwardRef(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__default['default'].createElement(_default$7, {
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    errorMessage: errorMessage,
+    helperText: helperText,
+    label: label
+  }, /*#__PURE__*/React__default['default'].createElement(Input$1, _extends({
+    ref: ref
+  }, props)));
+});
+Input.propTypes = {
+  label: PropTypes__default['default'].string,
+  helperText: PropTypes__default['default'].string,
+  errorMessage: PropTypes__default['default'].string,
+  isInvalid: PropTypes__default['default'].bool,
+  isDisabled: PropTypes__default['default'].bool,
+  isRequired: PropTypes__default['default'].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;
@@ -37873,23 +38356,24 @@ exports.AccordionIcon = AccordionIcon;
 exports.AccordionItem = AccordionItem;
 exports.AccordionPanel = AccordionPanel;
 exports.Box = Box;
-exports.Button = _default$K;
+exports.Button = _default$N;
 exports.ButtonGroup = ButtonGroup;
-exports.Card = _default$8;
+exports.Card = _default$a;
 exports.Checkbox = Checkbox;
-exports.Container = _default$w;
+exports.Container = _default$z;
 exports.Fade = Fade;
 exports.Flex = Flex;
-exports.Grid = _default$F;
-exports.GridItem = _default$D;
+exports.Grid = _default$I;
+exports.GridItem = _default$G;
 exports.HStack = HStack;
-exports.Heading = _default$y;
+exports.Heading = _default$B;
 exports.Icon = Icon;
-exports.Image = _default$7;
+exports.Image = _default$9;
+exports.Input = _default$6;
 exports.Link = Link;
-exports.List = _default$C;
+exports.List = _default$F;
 exports.ListItem = ListItem;
-exports.Loader = _default$6;
+exports.Loader = _default$8;
 exports.Popover = _default$5;
 exports.PopoverContent = _default;
 exports.PopoverTrigger = PopoverTrigger;
@@ -37898,7 +38382,7 @@ exports.ScaleFade = ScaleFade;
 exports.Select = Select;
 exports.Slide = Slide;
 exports.SlideFade = SlideFade;
-exports.Spinner = _default$A;
+exports.Spinner = _default$D;
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
@@ -37908,11 +38392,11 @@ exports.TableCaption = TableCaption;
 exports.Tabs = Tabs;
 exports.Tbody = Tbody;
 exports.Td = Td;
-exports.Text = _default$G;
+exports.Text = _default$J;
 exports.Tfoot = Tfoot;
 exports.Th = Th;
 exports.Thead = Thead;
-exports.ThemeProvider = _default$9;
+exports.ThemeProvider = _default$b;
 exports.Tr = Tr;
 exports.createIcon = createIcon;
 exports.useBreakpointValue = useBreakpointValue;