@hyphen/hyphen-components 2.12.3 → 2.13.0

package/dist/hyphen-components.cjs.development.js

@@ -243,9 +243,9 @@ Component, props, getDefault) {
   return defaultProps.as || 'div';
 }
 
-var styles$v = {"box-transition":"Box-module_box-transition__eQx8C"};
+var styles$w = {"box-transition":"Box-module_box-transition__eQx8C"};
 
-var _excluded$I = ["as", "alignItems", "alignContent", "alignSelf", "background", "borderColor", "borderWidth", "children", "childGap", "className", "color", "columnGap", "cursor", "display", "direction", "flex", "fontFamily", "fontSize", "focus", "fontWeight", "gap", "height", "hover", "justifyContent", "margin", "maxHeight", "minHeight", "maxWidth", "minWidth", "overflow", "padding", "position", "radius", "rowGap", "shadow", "style", "textAlign", "wrap", "width", "zIndex"];
+var _excluded$J = ["as", "alignItems", "alignContent", "alignSelf", "background", "borderColor", "borderWidth", "children", "childGap", "className", "color", "columnGap", "cursor", "display", "direction", "flex", "fontFamily", "fontSize", "focus", "fontWeight", "gap", "height", "hover", "justifyContent", "margin", "maxHeight", "minHeight", "maxWidth", "minWidth", "overflow", "padding", "position", "radius", "rowGap", "shadow", "style", "textAlign", "wrap", "width", "zIndex"];
 /**
  * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
  * elements.
@@ -332,7 +332,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     width = _ref$width === void 0 ? undefined : _ref$width,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? undefined : _ref$zIndex,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var heightCss = getDimensionCss('h', height);
   var widthCss = getDimensionCss('w', width);
   var maxHeightCss = getDimensionCss('mh', maxHeight);
@@ -381,7 +381,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var boxClasses = classNames.apply(void 0, [className, cssShorthandToClasses('m', margin), cssShorthandToClasses('p', padding), cssShorthandToClasses('br', radius), cssShorthandToClasses('g', gap), cssShorthandToClasses('cg', columnGap), cssShorthandToClasses('rg', rowGap), heightCss.classes, maxHeightCss.classes, minHeightCss.classes, maxWidthCss.classes, minWidthCss.classes, widthCss.classes, flexDirectionClasses, generateResponsiveClasses('display', display), generateResponsiveClasses('justify-content', justifyContent), generateResponsiveClasses('align-items', alignItems), generateResponsiveClasses('align-content', alignContent), generateResponsiveClasses('align-self', alignSelf), generateResponsiveClasses('font-family', fontFamily), generateResponsiveClasses('font-size', fontSize), generateResponsiveClasses('overflow', overflow), generateResponsiveClasses('shadow', shadow), generateResponsiveClasses('flex', flex), cssShorthandToClasses('bw', borderWidth), generateResponsiveClasses('font-weight', fontWeight), generateResponsiveClasses('text-align', textAlign), generateResponsiveClasses('position', position), generateResponsiveClasses('z-index', zIndex)].concat(hoverClasses != null ? hoverClasses : [], focusClasses != null ? focusClasses : [], [(_ref3 = {
     'flex-wrap': isFlexBox && wrap,
     'flex-nowrap': isFlexBox && wrap === false
-  }, _ref3["background-color-" + background] = background, _ref3["font-color-" + color] = color, _ref3["border-color-" + borderColor] = borderColor, _ref3["cursor-" + cursor] = cursor, _ref3[styles$v['box-transition']] = hover || focus, _ref3)]));
+  }, _ref3["background-color-" + background] = background, _ref3["font-color-" + color] = color, _ref3["border-color-" + borderColor] = borderColor, _ref3["cursor-" + cursor] = cursor, _ref3[styles$w['box-transition']] = hover || focus, _ref3)]));
   var boxStyles = _extends({}, style, heightCss.styles, maxHeightCss.styles, maxWidthCss.styles, widthCss.styles, minHeightCss.styles, minWidthCss.styles);
   /**
    * Creates an object that maps the flex direction to either `right` or `bottom`
@@ -483,14 +483,14 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 var boxPropsKeys = ['as', 'alignItems', 'alignContent', 'alignSelf', 'background', 'borderColor', 'borderWidth', 'className', 'childGap', 'children', 'color', 'columnGap', 'cursor', 'direction', 'display', 'flex', 'focus', 'fontFamily', 'fontSize', 'fontWeight', 'gap', 'height', 'hover', 'justifyContent', 'margin', 'maxHeight', 'minHeight', 'maxWidth', 'minWidth', 'overflow', 'padding', 'position', 'radius', 'rowGap', 'shadow', 'style', 'textAlign', 'wrap', 'width', 'zIndex'];
 
-var _excluded$H = ["className", "name", "color", "size"];
+var _excluded$I = ["className", "name", "color", "size"];
 var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className,
     name = _ref.name,
     color = _ref.color,
     size = _ref.size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   var IconComponent = icons[name];
   if (!IconComponent) console.error("Icon '" + name + "' not found"); // eslint-disable-line no-console
   var iconClasses = classNames(className, generateResponsiveClasses('font-color', color), generateResponsiveClasses('font-size', size));
@@ -508,7 +508,7 @@ var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, "???");
 });
 
-var styles$u = {"alert":"Alert-module_alert__zP4AL","close-icon":"Alert-module_close-icon__zs4Xk","alert-heading":"Alert-module_alert-heading__VguTk","alert__default":"Alert-module_alert__default__-pcBw","alert__info":"Alert-module_alert__info__UZeOd","alert__success":"Alert-module_alert__success__o2IHF","alert__warning":"Alert-module_alert__warning__lzTY-","alert__danger":"Alert-module_alert__danger__M-XFh","alert__icon__default":"Alert-module_alert__icon__default__cCx9C","alert__icon__info":"Alert-module_alert__icon__info__2W0Bi","alert__icon__success":"Alert-module_alert__icon__success__NBCDO","alert__icon__warning":"Alert-module_alert__icon__warning__nY4hy","alert__icon__danger":"Alert-module_alert__icon__danger__NcOrf"};
+var styles$v = {"alert":"Alert-module_alert__zP4AL","close-icon":"Alert-module_close-icon__zs4Xk","alert-heading":"Alert-module_alert-heading__VguTk","alert__default":"Alert-module_alert__default__-pcBw","alert__info":"Alert-module_alert__info__UZeOd","alert__success":"Alert-module_alert__success__o2IHF","alert__warning":"Alert-module_alert__warning__lzTY-","alert__danger":"Alert-module_alert__danger__M-XFh","alert__icon__default":"Alert-module_alert__icon__default__cCx9C","alert__icon__info":"Alert-module_alert__icon__info__2W0Bi","alert__icon__success":"Alert-module_alert__icon__success__NBCDO","alert__icon__warning":"Alert-module_alert__icon__warning__nY4hy","alert__icon__danger":"Alert-module_alert__icon__danger__NcOrf"};
 
 // eslint-disable-next-line import/prefer-default-export
 var ALERT_ICONS_MAP = {
@@ -529,7 +529,7 @@ var ALERT_ICONS_MAP = {
   }
 };
 
-var _excluded$G = ["className", "closeText", "hasIcon", "isCompact", "isClosable", "message", "onClose", "render", "title", "variant"];
+var _excluded$H = ["className", "closeText", "hasIcon", "isCompact", "isClosable", "message", "onClose", "render", "title", "variant"];
 var Alert = function Alert(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -551,7 +551,7 @@ var Alert = function Alert(_ref) {
     title = _ref$title === void 0 ? '' : _ref$title,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var handleClose = function handleClose(event) {
     if (!onClose) return;
     onClose(event);
@@ -559,7 +559,7 @@ var Alert = function Alert(_ref) {
   var renderAlertIcon = function renderAlertIcon() {
     return React.createElement(Box, {
       fontSize: "md",
-      className: styles$u["alert__icon__" + variant]
+      className: styles$v["alert__icon__" + variant]
     }, React.createElement(Icon, {
       name: ALERT_ICONS_MAP[variant].icon,
       "data-testid": "alert-icon-" + variant + "-test-id"
@@ -572,7 +572,7 @@ var Alert = function Alert(_ref) {
     return React.createElement(Box, {
       margin: "0 0 0 auto",
       color: "secondary",
-      className: styles$u['close-icon']
+      className: styles$v['close-icon']
     }, React.createElement("button", {
       type: "button",
       onClick: handleClose,
@@ -582,7 +582,7 @@ var Alert = function Alert(_ref) {
       "data-testid": "alert-close-icon-test-id"
     })));
   };
-  var alertContainerClasses = classNames(styles$u["alert__" + variant], styles$u.alert, className);
+  var alertContainerClasses = classNames(styles$v["alert__" + variant], styles$v.alert, className);
   return React.createElement(Box, _extends({
     alignItems: "flex-start",
     gap: "md",
@@ -599,13 +599,13 @@ var Alert = function Alert(_ref) {
     as: "h4",
     fontSize: "sm",
     fontWeight: "semibold",
-    className: styles$u['alert-heading']
+    className: styles$v['alert-heading']
   }, title), message && (typeof message === 'string' ? React.createElement("p", null, message) : message))), isClosable && renderCloseIcon());
 };
 
-var styles$t = {"badge":"Badge-module_badge__ZbEBU","size-sm":"Badge-module_size-sm__rL8a6","size-md":"Badge-module_size-md__kf6IH","size-lg":"Badge-module_size-lg__of6XJ","inverse":"Badge-module_inverse__qZCFA","purple":"Badge-module_purple__rX-xW","green":"Badge-module_green__W03uU","red":"Badge-module_red__fl2jg","blue":"Badge-module_blue__C7kyV","yellow":"Badge-module_yellow__gGZ6R","light-grey":"Badge-module_light-grey__Wtrhx","dark-grey":"Badge-module_dark-grey__X-807","hyphen":"Badge-module_hyphen__9pe7x","size-sm-tablet":"Badge-module_size-sm-tablet__6xMVk","size-md-tablet":"Badge-module_size-md-tablet__4w-7I","size-lg-tablet":"Badge-module_size-lg-tablet__8xyRF","size-sm-desktop":"Badge-module_size-sm-desktop__Ayf5L","size-md-desktop":"Badge-module_size-md-desktop__XSq7m","size-lg-desktop":"Badge-module_size-lg-desktop__Baw3S","size-sm-hd":"Badge-module_size-sm-hd__Da6Au","size-md-hd":"Badge-module_size-md-hd__-VNMk","size-lg-hd":"Badge-module_size-lg-hd__6MOwL"};
+var styles$u = {"badge":"Badge-module_badge__ZbEBU","size-sm":"Badge-module_size-sm__rL8a6","size-md":"Badge-module_size-md__kf6IH","size-lg":"Badge-module_size-lg__of6XJ","inverse":"Badge-module_inverse__qZCFA","purple":"Badge-module_purple__rX-xW","green":"Badge-module_green__W03uU","red":"Badge-module_red__fl2jg","blue":"Badge-module_blue__C7kyV","yellow":"Badge-module_yellow__gGZ6R","light-grey":"Badge-module_light-grey__Wtrhx","dark-grey":"Badge-module_dark-grey__X-807","hyphen":"Badge-module_hyphen__9pe7x","size-sm-tablet":"Badge-module_size-sm-tablet__6xMVk","size-md-tablet":"Badge-module_size-md-tablet__4w-7I","size-lg-tablet":"Badge-module_size-lg-tablet__8xyRF","size-sm-desktop":"Badge-module_size-sm-desktop__Ayf5L","size-md-desktop":"Badge-module_size-md-desktop__XSq7m","size-lg-desktop":"Badge-module_size-lg-desktop__Baw3S","size-sm-hd":"Badge-module_size-sm-hd__Da6Au","size-md-hd":"Badge-module_size-md-hd__-VNMk","size-lg-hd":"Badge-module_size-lg-hd__6MOwL"};
 
-var _excluded$F = ["className", "message", "variant", "size"];
+var _excluded$G = ["className", "message", "variant", "size"];
 var Badge = function Badge(_ref) {
   var _classNames;
   var _ref$className = _ref.className,
@@ -616,24 +616,24 @@ var Badge = function Badge(_ref) {
     variant = _ref$variant === void 0 ? 'light-grey' : _ref$variant,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
-    return styles$t[c];
+    return styles$u[c];
   });
-  var badgeClasses = classNames(styles$t.badge, className, responsiveClasses, (_classNames = {}, _classNames[styles$t[variant]] = variant, _classNames));
+  var badgeClasses = classNames(styles$u.badge, className, responsiveClasses, (_classNames = {}, _classNames[styles$u[variant]] = variant, _classNames));
   return React.createElement(Box, _extends({
     className: badgeClasses,
     display: "inline-block"
   }, restProps), message);
 };
 
-var styles$s = {"spinner":"Spinner-module_spinner__SZoUP","spin":"Spinner-module_spin__Yk0wm"};
+var styles$t = {"spinner":"Spinner-module_spinner__SZoUP","spin":"Spinner-module_spin__Yk0wm"};
 
 var Spinner = function Spinner(_ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size;
-  var classes = classNames(className, styles$s.spinner);
+  var classes = classNames(className, styles$t.spinner);
   var sizeInPixels = function sizeInPixels() {
     var pixels;
     if (size === 'sm') pixels = '12';
@@ -749,9 +749,9 @@ var handleReactRouterClick = function handleReactRouterClick(event, onClick, tar
   }
 };
 
-var styles$r = {"button":"Button-module_button__18Bed","size-sm":"Button-module_size-sm__6Xrjw","size-md":"Button-module_size-md__BkuGu","size-lg":"Button-module_size-lg__JVYWV","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","tertiary":"Button-module_tertiary__Nd7xM","danger":"Button-module_danger__Hxs5n","size-sm-tablet":"Button-module_size-sm-tablet__9XaSx","size-md-tablet":"Button-module_size-md-tablet__YQxaI","size-lg-tablet":"Button-module_size-lg-tablet__h3l97","size-sm-desktop":"Button-module_size-sm-desktop__8tTsg","size-md-desktop":"Button-module_size-md-desktop__OCdDi","size-lg-desktop":"Button-module_size-lg-desktop__uFc4f","size-sm-hd":"Button-module_size-sm-hd__INFfD","size-md-hd":"Button-module_size-md-hd__8e2mW","size-lg-hd":"Button-module_size-lg-hd__DH60l","loading":"Button-module_loading__QfItr","label":"Button-module_label__1PsXG","full-width":"Button-module_full-width__qDri6","spinner-wrapper":"Button-module_spinner-wrapper__rALNw"};
+var styles$s = {"button":"Button-module_button__18Bed","size-sm":"Button-module_size-sm__6Xrjw","size-md":"Button-module_size-md__BkuGu","size-lg":"Button-module_size-lg__JVYWV","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","tertiary":"Button-module_tertiary__Nd7xM","danger":"Button-module_danger__Hxs5n","size-sm-tablet":"Button-module_size-sm-tablet__9XaSx","size-md-tablet":"Button-module_size-md-tablet__YQxaI","size-lg-tablet":"Button-module_size-lg-tablet__h3l97","size-sm-desktop":"Button-module_size-sm-desktop__8tTsg","size-md-desktop":"Button-module_size-md-desktop__OCdDi","size-lg-desktop":"Button-module_size-lg-desktop__uFc4f","size-sm-hd":"Button-module_size-sm-hd__INFfD","size-md-hd":"Button-module_size-md-hd__8e2mW","size-lg-hd":"Button-module_size-lg-hd__DH60l","loading":"Button-module_loading__QfItr","label":"Button-module_label__1PsXG","full-width":"Button-module_full-width__qDri6","spinner-wrapper":"Button-module_spinner-wrapper__rALNw"};
 
-var _excluded$E = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "tabIndex", "target", "type", "size", "variant"];
+var _excluded$F = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "tabIndex", "target", "type", "size", "variant"];
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames;
   var _ref$children = _ref.children,
@@ -792,12 +792,12 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   var disabled = isLoading || isDisabled;
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
-    return styles$r[c];
+    return styles$s[c];
   });
-  var buttonClasses = classNames('hyphen-components__variables__form-control', styles$r.button, className, responsiveClasses, (_classNames = {}, _classNames[styles$r.loading] = isLoading, _classNames[styles$r[variant]] = variant, _classNames[styles$r['full-width']] = fullWidth, _classNames));
+  var buttonClasses = classNames('hyphen-components__variables__form-control', styles$s.button, className, responsiveClasses, (_classNames = {}, _classNames[styles$s.loading] = isLoading, _classNames[styles$s[variant]] = variant, _classNames[styles$s['full-width']] = fullWidth, _classNames));
   var handleClick = handleReactRouterClick;
   var handleFocus = function handleFocus(event) {
     if (onFocus) onFocus(event);
@@ -811,29 +811,29 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     alignItems: "center",
     gap: "md"
   }, isLoading && React.createElement(Spinner, {
-    className: styles$r['spinner-wrapper']
+    className: styles$s['spinner-wrapper']
   }), iconPrefix && React.createElement(Icon, {
-    className: styles$r.label,
+    className: styles$s.label,
     name: iconPrefix,
     "aria-hidden": "true",
     focusable: "false",
     "data-testid": "prefixIcon",
     size: size === 'md' ? 'sm' : size
   }), children && React.createElement("span", {
-    className: styles$r.label
+    className: styles$s.label
   }, children), iconSuffix && React.createElement(Icon, {
-    className: styles$r.label,
+    className: styles$s.label,
     name: iconSuffix,
     "aria-hidden": "true",
     focusable: "false",
     "data-testid": "suffixIcon",
     size: size === 'md' ? 'sm' : size
   })) : React.createElement(React.Fragment, null, isLoading && React.createElement(Spinner, {
-    className: styles$r['spinner-wrapper']
+    className: styles$s['spinner-wrapper']
   }), function () {
     if (children) {
       return React.createElement("span", {
-        className: styles$r.label
+        className: styles$s.label
       }, children);
     }
     return null;
@@ -858,7 +858,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, restProps), buttonContent);
 });
 
-var _excluded$D = ["background", "borderColor", "borderWidth", "children", "display", "padding"];
+var _excluded$E = ["background", "borderColor", "borderWidth", "children", "display", "padding"];
 var CardFooter = function CardFooter(_ref) {
   var _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'secondary' : _ref$background,
@@ -872,7 +872,7 @@ var CardFooter = function CardFooter(_ref) {
     display = _ref$display === void 0 ? 'block' : _ref$display,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? '2xl' : _ref$padding,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   return React.createElement(Box, _extends({
     display: display,
     padding: padding,
@@ -891,9 +891,9 @@ var HEADING_DEFAULT_SIZE_MAP = {
   h6: 'sm'
 };
 
-var styles$q = {"heading":"Heading-module_heading__zKyv7"};
+var styles$r = {"heading":"Heading-module_heading__zKyv7"};
 
-var _excluded$C = ["as", "children", "className", "color", "size"];
+var _excluded$D = ["as", "children", "className", "color", "size"];
 var Heading = function Heading(_ref) {
   var _classNames;
   var _ref$as = _ref.as,
@@ -902,18 +902,18 @@ var Heading = function Heading(_ref) {
     className = _ref.className,
     color = _ref.color,
     size = _ref.size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   var element = getElementType(Heading, {
     as: as
   });
   var headingSize = size || HEADING_DEFAULT_SIZE_MAP[as];
-  var classes = classNames(styles$q.heading, className, generateResponsiveClasses('heading', headingSize), (_classNames = {}, _classNames["font-color-" + color] = color, _classNames));
+  var classes = classNames(styles$r.heading, className, generateResponsiveClasses('heading', headingSize), (_classNames = {}, _classNames["font-color-" + color] = color, _classNames));
   return React.createElement(element, _extends({
     className: classes
   }, restProps), children);
 };
 
-var _excluded$B = ["childGap", "children", "className", "display", "padding", "title"];
+var _excluded$C = ["childGap", "children", "className", "display", "padding", "title"];
 var CardHeader = function CardHeader(_ref) {
   var _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? '2xs' : _ref$childGap,
@@ -927,7 +927,7 @@ var CardHeader = function CardHeader(_ref) {
     padding = _ref$padding === void 0 ? '2xl' : _ref$padding,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? null : _ref$title,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   var renderTitle = function renderTitle() {
     return typeof title === 'string' ? React.createElement(Heading, {
       size: "sm",
@@ -942,9 +942,9 @@ var CardHeader = function CardHeader(_ref) {
   }, restProps), title && renderTitle(), children);
 };
 
-var styles$p = {"card-section-border":"Card-module_card-section-border__OefDX"};
+var styles$q = {"card-section-border":"Card-module_card-section-border__OefDX"};
 
-var _excluded$A = ["background", "borderColor", "borderWidth", "children", "childGap", "gap", "className", "display", "padding", "subdued", "title"];
+var _excluded$B = ["background", "borderColor", "borderWidth", "children", "childGap", "gap", "className", "display", "padding", "subdued", "title"];
 var CardSection = function CardSection(_ref) {
   var _classNames;
   var _ref$background = _ref.background,
@@ -969,7 +969,7 @@ var CardSection = function CardSection(_ref) {
     subdued = _ref$subdued === void 0 ? undefined : _ref$subdued,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? undefined : _ref$title,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   var renderTitle = typeof title === 'string' ? React.createElement(Box, {
     className: "m-bottom-md"
   }, React.createElement(Box, {
@@ -978,7 +978,7 @@ var CardSection = function CardSection(_ref) {
     fontSize: "sm",
     color: "base"
   }, title)) : title;
-  var sectionClasses = classNames((_classNames = {}, _classNames[styles$p['card-section-border']] = borderColor === undefined && borderWidth === undefined, _classNames[styles$p['card-subdued']] = subdued, _classNames), className);
+  var sectionClasses = classNames((_classNames = {}, _classNames[styles$q['card-section-border']] = borderColor === undefined && borderWidth === undefined, _classNames[styles$q['card-subdued']] = subdued, _classNames), className);
   return React.createElement(Box, _extends({
     background: background,
     borderColor: borderColor,
@@ -992,7 +992,7 @@ var CardSection = function CardSection(_ref) {
   }, children));
 };
 
-var _excluded$z = ["children", "subdued", "overflow", "display", "width"];
+var _excluded$A = ["children", "subdued", "overflow", "display", "width"];
 var CardBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     subdued = _ref.subdued,
@@ -1002,7 +1002,7 @@ var CardBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     display = _ref$display === void 0 ? 'block' : _ref$display,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100' : _ref$width,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return React.createElement(Box, _extends({
     background: subdued ? 'secondary' : 'primary',
     borderWidth: "sm",
@@ -1025,7 +1025,7 @@ var Card = /*#__PURE__*/function () {
   return Card;
 }();
 
-var _excluded$y = ["className", "error", "isChecked", "isDisabled", "isIndeterminate"];
+var _excluded$z = ["className", "error", "isChecked", "isDisabled", "isIndeterminate"];
 var CheckboxIcon = function CheckboxIcon(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className,
@@ -1037,7 +1037,7 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isIndeterminate = _ref.isIndeterminate,
     isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var color = 'base';
   var name = 'checkbox-btn';
   if (isChecked) name = 'checkbox-btn-checked';else name = 'checkbox-btn';
@@ -1060,9 +1060,9 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
   }));
 };
 
-var styles$o = {"checkbox":"Checkbox-module_checkbox__dY-7P","size-sm":"Checkbox-module_size-sm__mJkMQ","size-md":"Checkbox-module_size-md__I2s8g","size-lg":"Checkbox-module_size-lg__rFFnb","hidden":"Checkbox-module_hidden__2y7Zr","size-sm-tablet":"Checkbox-module_size-sm-tablet__GhQUW","size-md-tablet":"Checkbox-module_size-md-tablet__XRHf4","size-lg-tablet":"Checkbox-module_size-lg-tablet__quoAJ","size-sm-desktop":"Checkbox-module_size-sm-desktop__fqeEc","size-md-desktop":"Checkbox-module_size-md-desktop__9a278","size-lg-desktop":"Checkbox-module_size-lg-desktop__WQnv0","size-sm-hd":"Checkbox-module_size-sm-hd__X3yIF","size-md-hd":"Checkbox-module_size-md-hd__6T0dF","size-lg-hd":"Checkbox-module_size-lg-hd__UXCt1"};
+var styles$p = {"checkbox":"Checkbox-module_checkbox__dY-7P","size-sm":"Checkbox-module_size-sm__mJkMQ","size-md":"Checkbox-module_size-md__I2s8g","size-lg":"Checkbox-module_size-lg__rFFnb","hidden":"Checkbox-module_hidden__2y7Zr","size-sm-tablet":"Checkbox-module_size-sm-tablet__GhQUW","size-md-tablet":"Checkbox-module_size-md-tablet__XRHf4","size-lg-tablet":"Checkbox-module_size-lg-tablet__quoAJ","size-sm-desktop":"Checkbox-module_size-sm-desktop__fqeEc","size-md-desktop":"Checkbox-module_size-md-desktop__9a278","size-lg-desktop":"Checkbox-module_size-lg-desktop__WQnv0","size-sm-hd":"Checkbox-module_size-sm-hd__X3yIF","size-md-hd":"Checkbox-module_size-md-hd__6T0dF","size-lg-hd":"Checkbox-module_size-lg-hd__UXCt1"};
 
-var _excluded$x = ["className", "display", "id", "isChecked", "label", "labelledby", "onChange", "error", "isDisabled", "isHidden", "isIndeterminate", "isRequired", "onBlur", "onFocus", "size", "value"];
+var _excluded$y = ["className", "display", "id", "isChecked", "label", "labelledby", "onChange", "error", "isDisabled", "isHidden", "isIndeterminate", "isRequired", "onBlur", "onFocus", "size", "value"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref2;
   var _ref$className = _ref.className,
@@ -1092,7 +1092,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? undefined : _ref$value,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var inputRef = React.useRef(null);
   React.useEffect(function () {
     if (inputRef != null && inputRef.current) {
@@ -1126,11 +1126,11 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     value: value
   });
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var containerClasses = classNames.apply(void 0, [styles$o.checkbox, className].concat(responsiveClasses.map(function (c) {
-    return styles$o[c];
-  }), [(_ref2 = {}, _ref2[styles$o.hidden] = isHidden, _ref2)]));
+  var containerClasses = classNames.apply(void 0, [styles$p.checkbox, className].concat(responsiveClasses.map(function (c) {
+    return styles$p[c];
+  }), [(_ref2 = {}, _ref2[styles$p.hidden] = isHidden, _ref2)]));
   var iconClasses = classNames.apply(void 0, responsiveClasses.map(function (c) {
-    return styles$o[c];
+    return styles$p[c];
   }));
   return React.createElement(Box, _extends({
     display: display,
@@ -1153,35 +1153,35 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 
-var styles$n = {"input-validation-message":"InputValidationMessage-module_input-validation-message__4MMMK"};
+var styles$o = {"input-validation-message":"InputValidationMessage-module_input-validation-message__4MMMK"};
 
 var InputValidationMessage = function InputValidationMessage(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size;
-  var classes = classNames('hyphen-components__variables__form-control', styles$n['input-validation-message'], 'font-color-danger', "font-size-" + size, 'm-top-sm');
+  var classes = classNames('hyphen-components__variables__form-control', styles$o['input-validation-message'], 'font-color-danger', "font-size-" + size, 'm-top-sm');
   return React.createElement("div", {
     className: classes
   }, children);
 };
 
-var styles$m = {"label":"FormLabel-module_label__qTUB9","radio-input-label":"FormLabel-module_radio-input-label__IpAiN","disabled":"FormLabel-module_disabled__83oiH"};
+var styles$n = {"label":"FormLabel-module_label__qTUB9","radio-input-label":"FormLabel-module_radio-input-label__IpAiN","disabled":"FormLabel-module_disabled__83oiH"};
 
-var styles$l = {"help-text":"HelpText-module_help-text__8WodW"};
+var styles$m = {"help-text":"HelpText-module_help-text__8WodW"};
 
 var HelpText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className;
   return React.createElement(Box, {
     ref: ref,
-    className: classNames('hyphen-components__variables__form-control', styles$l['help-text'], className),
+    className: classNames('hyphen-components__variables__form-control', styles$m['help-text'], className),
     display: "block",
     color: "secondary",
     fontSize: "sm"
   }, children);
 });
 
-var _excluded$w = ["children", "inputId", "className", "display", "helpText", "isDisabled", "isFieldRequired", "isRadioInputLabel", "requiredIndicator", "margin", "padding"];
+var _excluded$x = ["children", "inputId", "className", "display", "helpText", "isDisabled", "isFieldRequired", "isRadioInputLabel", "requiredIndicator", "margin", "padding"];
 var FormLabel = function FormLabel(_ref) {
   var _classNames;
   var children = _ref.children,
@@ -1203,8 +1203,8 @@ var FormLabel = function FormLabel(_ref) {
     margin = _ref$margin === void 0 ? '0' : _ref$margin,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? '0' : _ref$padding,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$w);
-  var labelClasses = classNames('hyphen-components__variables__form-control', styles$m.label, className, (_classNames = {}, _classNames[styles$m.disabled] = isDisabled, _classNames[styles$m.disabled] = isDisabled, _classNames[styles$m['radio-input-label']] = isRadioInputLabel, _classNames));
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+  var labelClasses = classNames('hyphen-components__variables__form-control', styles$n.label, className, (_classNames = {}, _classNames[styles$n.disabled] = isDisabled, _classNames[styles$n.disabled] = isDisabled, _classNames[styles$n['radio-input-label']] = isRadioInputLabel, _classNames));
   return React.createElement(Box, _extends({
     as: "label",
     id: inputId + "Label",
@@ -1216,7 +1216,7 @@ var FormLabel = function FormLabel(_ref) {
   }, restProps), children, isFieldRequired && requiredIndicator && React.createElement("span", null, requiredIndicator), helpText && React.createElement(HelpText, null, helpText));
 };
 
-var _excluded$v = ["id", "isChecked", "label", "onChange", "className", "error", "hideLabel", "helpText", "isDisabled", "isIndeterminate", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size"];
+var _excluded$w = ["id", "isChecked", "label", "onChange", "className", "error", "hideLabel", "helpText", "isDisabled", "isIndeterminate", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size"];
 var labelMarginSizeMap = {
   sm: '2xs 0 0 0',
   md: 'xs 0 0 0',
@@ -1261,7 +1261,7 @@ var CheckboxInput = function CheckboxInput(_ref2) {
     requiredIndicator = _ref2$requiredIndicat === void 0 ? ' *' : _ref2$requiredIndicat,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'md' : _ref2$size,
-    restProps = _objectWithoutPropertiesLoose(_ref2, _excluded$v);
+    restProps = _objectWithoutPropertiesLoose(_ref2, _excluded$w);
   var handleBlur = function handleBlur(event) {
     if (onBlur) onBlur(event);
   };
@@ -1303,9 +1303,9 @@ var CheckboxInput = function CheckboxInput(_ref2) {
   })), label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label)), error && error !== true && React.createElement(InputValidationMessage, null, error));
 };
 
-var styles$k = {};
+var styles$l = {};
 
-var _excluded$u = ["children", "dayClassName", "maxDate", "minDate", "monthsShown", "openToDate", "startDate", "selected", "selectsRange", "showTwoColumnMonthYearPicker", "showFullMonthYearPicker", "showMonthYearPicker", "className", "formatWeekDay"];
+var _excluded$v = ["children", "dayClassName", "maxDate", "minDate", "monthsShown", "openToDate", "startDate", "selected", "selectsRange", "showTwoColumnMonthYearPicker", "showFullMonthYearPicker", "showMonthYearPicker", "className", "formatWeekDay"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children,
@@ -1337,8 +1337,8 @@ var DatePicker = function DatePicker(_ref) {
     formatWeekDay = _ref$formatWeekDay === void 0 ? function (formattedDate) {
       return formattedDate[0];
     } : _ref$formatWeekDay,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
-  var datePickerClasses = classNames(styles$k['react-datepicker'], className);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+  var datePickerClasses = classNames(styles$l['react-datepicker'], className);
   return React.createElement(ReactDatePicker, _extends({
     inline: true,
     calendarClassName: datePickerClasses,
@@ -1357,7 +1357,7 @@ var DatePicker = function DatePicker(_ref) {
   }, restProps), children);
 };
 
-var _excluded$t = ["label", "hideLabel", "children", "error", "id", "isRequired", "helpText", "isDisabled", "requiredIndicator", "width"];
+var _excluded$u = ["label", "hideLabel", "children", "error", "id", "isRequired", "helpText", "isDisabled", "requiredIndicator", "width"];
 var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var label = _ref.label,
     hideLabel = _ref.hideLabel,
@@ -1370,7 +1370,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     requiredIndicator = _ref.requiredIndicator,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100' : _ref$width,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var labelProps = {
     inputId: id,
     helpText: helpText,
@@ -1396,9 +1396,9 @@ function getAutoCompleteValue(value) {
   return value;
 }
 
-var styles$j = {"text-input-wrapper":"TextInput-module_text-input-wrapper__HCnQD","size-sm":"TextInput-module_size-sm__qWJn7","prefix":"TextInput-module_prefix__-wFO9","suffix":"TextInput-module_suffix__327yL","clear-button":"TextInput-module_clear-button__LUJpO","is-clearable":"TextInput-module_is-clearable__ExAY3","size-md":"TextInput-module_size-md__UFPtt","size-lg":"TextInput-module_size-lg__Hjfez","disabled":"TextInput-module_disabled__lrifj","size-sm-tablet":"TextInput-module_size-sm-tablet__neC5C","size-md-tablet":"TextInput-module_size-md-tablet__u29oc","size-lg-tablet":"TextInput-module_size-lg-tablet__3PUB3","size-sm-desktop":"TextInput-module_size-sm-desktop__kA12V","size-md-desktop":"TextInput-module_size-md-desktop__yLJGr","size-lg-desktop":"TextInput-module_size-lg-desktop__A1pcS","size-sm-hd":"TextInput-module_size-sm-hd__f7Thr","size-md-hd":"TextInput-module_size-md-hd__Tsnqc","size-lg-hd":"TextInput-module_size-lg-hd__XLMos","error":"TextInput-module_error__p6zZq","text-input-label":"TextInput-module_text-input-label__3PlSG"};
+var styles$k = {"text-input-wrapper":"TextInput-module_text-input-wrapper__HCnQD","size-sm":"TextInput-module_size-sm__qWJn7","prefix":"TextInput-module_prefix__-wFO9","suffix":"TextInput-module_suffix__327yL","clear-button":"TextInput-module_clear-button__LUJpO","is-clearable":"TextInput-module_is-clearable__ExAY3","size-md":"TextInput-module_size-md__UFPtt","size-lg":"TextInput-module_size-lg__Hjfez","disabled":"TextInput-module_disabled__lrifj","size-sm-tablet":"TextInput-module_size-sm-tablet__neC5C","size-md-tablet":"TextInput-module_size-md-tablet__u29oc","size-lg-tablet":"TextInput-module_size-lg-tablet__3PUB3","size-sm-desktop":"TextInput-module_size-sm-desktop__kA12V","size-md-desktop":"TextInput-module_size-md-desktop__yLJGr","size-lg-desktop":"TextInput-module_size-lg-desktop__A1pcS","size-sm-hd":"TextInput-module_size-sm-hd__f7Thr","size-md-hd":"TextInput-module_size-md-hd__Tsnqc","size-lg-hd":"TextInput-module_size-lg-hd__XLMos","error":"TextInput-module_error__p6zZq","text-input-label":"TextInput-module_text-input-label__3PlSG"};
 
-var _excluded$s = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "error", "helpText", "hideLabel", "inputProps", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onClear", "onFocus", "prefix", "placeholder", "requiredIndicator", "suffix", "size", "type"];
+var _excluded$t = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "error", "helpText", "hideLabel", "inputProps", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onClear", "onFocus", "prefix", "placeholder", "requiredIndicator", "suffix", "size", "type"];
 var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref2;
   var id = _ref.id,
@@ -1442,12 +1442,12 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$j['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
-    return styles$j[c];
-  }), [(_ref2 = {}, _ref2[styles$j.error] = error, _ref2[styles$j.disabled] = isDisabled, _ref2[styles$j['is-clearable']] = onClear, _ref2)]));
-  var clearBtnClasses = classNames(styles$j['clear-button'], styles$j.md);
+  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$k['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
+    return styles$k[c];
+  }), [(_ref2 = {}, _ref2[styles$k.error] = error, _ref2[styles$k.disabled] = isDisabled, _ref2[styles$k['is-clearable']] = onClear, _ref2)]));
+  var clearBtnClasses = classNames(styles$k['clear-button'], styles$k.md);
   var renderClearIcon = function renderClearIcon() {
     var handleKeyPress = function handleKeyPress(event) {
       if (event.keyCode === 13 && onClear) onClear(event);
@@ -1506,17 +1506,17 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, prefix && React.createElement(Box, {
     color: "secondary",
     background: "secondary",
-    className: classNames(styles$j.prefix, 'ws-nowrap')
+    className: classNames(styles$k.prefix, 'ws-nowrap')
   }, prefix), React.createElement(Box, _extends({
     as: "input"
   }, computedInputProps)), !!onClear && !!value && renderClearIcon(), suffix && React.createElement(Box, {
     color: "secondary",
     background: "secondary",
-    className: classNames(styles$j.suffix, 'ws-nowrap')
+    className: classNames(styles$k.suffix, 'ws-nowrap')
   }, suffix)));
 });
 
-var styles$i = {"popover":"Popover-module_popover__rvS3X","fadeIn":"Popover-module_fadeIn__0btE5","popover-arrow":"Popover-module_popover-arrow__SLtPW"};
+var styles$j = {"popover":"Popover-module_popover__rvS3X","fadeIn":"Popover-module_fadeIn__0btE5","popover-arrow":"Popover-module_popover-arrow__SLtPW"};
 
 // eslint-disable-next-line import/prefer-default-export
 var getColumnKeys = function getColumnKeys(columns) {
@@ -1591,7 +1591,7 @@ var BREAKPOINTS = /*#__PURE__*/[].concat(Object.entries(designTokens.size.breakp
 var Z_INDEX_VALUES = designTokens.size['z-index'];
 // export const BOX_SHADOW_VALUES = designTokens.size['box-shadow'];
 
-var _excluded$r = ["className", "isOpen", "children", "content", "arrowColor", "contentContainerProps", "hasArrow", "offsetFromTarget", "onClickOutside", "placement", "withPortal", "portalTarget", "trapFocus"];
+var _excluded$s = ["className", "isOpen", "children", "content", "arrowColor", "contentContainerProps", "hasArrow", "offsetFromTarget", "onClickOutside", "placement", "withPortal", "portalTarget", "trapFocus"];
 var contentContainerDefaults = {
   background: 'primary',
   padding: 'sm',
@@ -1620,7 +1620,7 @@ var Popover = function Popover(_ref) {
     portalTarget = _ref.portalTarget,
     _ref$trapFocus = _ref.trapFocus,
     trapFocus = _ref$trapFocus === void 0 ? false : _ref$trapFocus,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var triggerRef = React.useRef(null);
   var popperRef = React.useRef(null);
   var _useState = React.useState(null),
@@ -1674,14 +1674,14 @@ var Popover = function Popover(_ref) {
     attributes = _usePopper.attributes;
   var containerBoxProps = _extends({}, contentContainerDefaults, contentContainerProps);
   var computedArrowColor = arrowColor || containerBoxProps.background;
-  var arrowClasses = classNames(styles$i['popover-arrow'], "background-color-" + computedArrowColor, {
+  var arrowClasses = classNames(styles$j['popover-arrow'], "background-color-" + computedArrowColor, {
     'display-none': !hasArrow
   });
   var renderPopperContent = function renderPopperContent() {
     var renderPopperBox = function renderPopperBox() {
       return React.createElement(Box, _extends({
         ref: popperRef,
-        className: classNames(styles$i.popover, className),
+        className: classNames(styles$j.popover, className),
         style: popperStyles.popper,
         role: "dialog",
         "aria-label": "Popover",
@@ -1726,7 +1726,7 @@ var Popover = function Popover(_ref) {
   withPortal && portalTarget ? reactDom.createPortal(renderPopperContent(), portalTarget) : renderPopperContent()));
 };
 
-var _excluded$q = ["datePickerProps", "textInputProps", "dateFormat", "dateOptions", "popoverProps"];
+var _excluded$r = ["datePickerProps", "textInputProps", "dateFormat", "dateOptions", "popoverProps"];
 var defaultDatePickerProps = {
   selected: null,
   selectsRange: false
@@ -1746,7 +1746,7 @@ var DateInput = function DateInput(_ref) {
     dateOptions = _ref$dateOptions === void 0 ? undefined : _ref$dateOptions,
     _ref$popoverProps = _ref.popoverProps,
     popoverProps = _ref$popoverProps === void 0 ? _extends({}, defaultPopoverProps) : _ref$popoverProps,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var mergedDatePickerProps = _extends({}, defaultDatePickerProps, datePickerProps);
   var mergedPopoverProps = _extends({}, defaultPopoverProps, popoverProps);
   var mergedTextInputProps = _extends({}, defaultTextInputProps, textInputProps);
@@ -1823,14 +1823,14 @@ var DateInput = function DateInput(_ref) {
 var ENTER = 13;
 var SPACE = 32;
 
-var _excluded$p = ["children", "display", "isDetailsOpen", "onToggle"];
+var _excluded$q = ["children", "display", "isDetailsOpen", "onToggle"];
 var DetailsSummary = function DetailsSummary(_ref) {
   var children = _ref.children,
     _ref$display = _ref.display,
     display = _ref$display === void 0 ? 'block' : _ref$display,
     isDetailsOpen = _ref.isDetailsOpen,
     onToggle = _ref.onToggle,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var handleClick = function handleClick(event) {
     // Needed to avoid default `details` behavior on a click event and keep this as controlled component.
     event.preventDefault();
@@ -1866,17 +1866,17 @@ var DetailsSummary = function DetailsSummary(_ref) {
   }), children);
 };
 
-var styles$h = {"details-reset":"Details-module_details-reset__HWtSD"};
+var styles$i = {"details-reset":"Details-module_details-reset__HWtSD"};
 
-var _excluded$o = ["children", "className", "display", "isOpen"];
+var _excluded$p = ["children", "className", "display", "isOpen"];
 var DetailsBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$display = _ref.display,
     display = _ref$display === void 0 ? 'block' : _ref$display,
     isOpen = _ref.isOpen,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
-  var detailsClasses = classNames(className, styles$h['details-reset'], styles$h.details);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+  var detailsClasses = classNames(className, styles$i['details-reset'], styles$i.details);
   return React.createElement(Box, _extends({
     as: "details",
     className: detailsClasses,
@@ -1893,7 +1893,7 @@ var Details = /*#__PURE__*/function () {
   return Details;
 }();
 
-var styles$g = {"drawer":"Drawer-module_drawer__IKoOm","hide-overlay-right":"Drawer-module_hide-overlay-right__FANA9","hide-overlay-left":"Drawer-module_hide-overlay-left__xZFa3","hide-overlay-bottom":"Drawer-module_hide-overlay-bottom__11EB1","hide-overlay-top":"Drawer-module_hide-overlay-top__kEsV5","drawer-content":"Drawer-module_drawer-content__zZ9xR","left":"Drawer-module_left__pwTcW","right":"Drawer-module_right__EzGpI","bottom":"Drawer-module_bottom__r3Q5Z","top":"Drawer-module_top__xQejO"};
+var styles$h = {"drawer":"Drawer-module_drawer__IKoOm","hide-overlay-right":"Drawer-module_hide-overlay-right__FANA9","hide-overlay-left":"Drawer-module_hide-overlay-left__xZFa3","hide-overlay-bottom":"Drawer-module_hide-overlay-bottom__11EB1","hide-overlay-top":"Drawer-module_hide-overlay-top__kEsV5","drawer-content":"Drawer-module_drawer-content__zZ9xR","left":"Drawer-module_left__pwTcW","right":"Drawer-module_right__EzGpI","bottom":"Drawer-module_bottom__r3Q5Z","top":"Drawer-module_top__xQejO"};
 
 var Drawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _dynamicStyle, _classNames, _classNames2;
@@ -1939,8 +1939,8 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [initialFocusRef]);
   var dynamicWidth = width;
   var dynamicStyle = (_dynamicStyle = {}, _dynamicStyle['--w'] = dynamicWidth, _dynamicStyle);
-  var overlayClassnames = classNames(styles$g.overlay, styles$g.drawer, (_classNames = {}, _classNames[styles$g['hide-overlay']] = hideOverlay, _classNames[styles$g["hide-overlay-" + placement]] = hideOverlay, _classNames['position-fixed'] = containerRef === undefined, _classNames['position-absolute'] = containerRef !== undefined, _classNames));
-  var contentClassnames = classNames(styles$g['drawer-content'], styles$g[placement], (_classNames2 = {}, _classNames2[styles$g['hide-overlay']] = hideOverlay, _classNames2['overflow-auto'] = !closeButton && !title, _classNames2.className = className, _classNames2));
+  var overlayClassnames = classNames(styles$h.overlay, styles$h.drawer, (_classNames = {}, _classNames[styles$h['hide-overlay']] = hideOverlay, _classNames[styles$h["hide-overlay-" + placement]] = hideOverlay, _classNames['position-fixed'] = containerRef === undefined, _classNames['position-absolute'] = containerRef !== undefined, _classNames));
+  var contentClassnames = classNames(styles$h['drawer-content'], styles$h[placement], (_classNames2 = {}, _classNames2[styles$h['hide-overlay']] = hideOverlay, _classNames2['overflow-auto'] = !closeButton && !title, _classNames2.className = className, _classNames2));
   var renderHeader = function renderHeader() {
     if (closeButton && onDismiss && !title) {
       return React.createElement(Box, {
@@ -1962,7 +1962,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         alignItems: "center",
         padding: "2xl"
       }, React.createElement(Box, {
-        className: styles$g.title,
+        className: styles$h.title,
         fontWeight: "bold"
       }, title), onDismiss && React.createElement(Button, {
         variant: "tertiary",
@@ -2010,7 +2010,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, renderHeader(), content)))));
 });
 
-var _excluded$n = ["field", "form", "onChange", "id", "label"];
+var _excluded$o = ["field", "form", "onChange", "id", "label"];
 var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2023,7 +2023,7 @@ var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   return React.createElement(CheckboxInput, _extends({}, props, {
     id: id,
     label: label,
@@ -2034,7 +2034,7 @@ var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
   }));
 };
 
-var _excluded$m = ["className", "isSelected", "isDisabled", "error"];
+var _excluded$n = ["className", "isSelected", "isDisabled", "error"];
 var RadioInputIcon = function RadioInputIcon(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className,
@@ -2044,7 +2044,7 @@ var RadioInputIcon = function RadioInputIcon(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$error = _ref.error,
     error = _ref$error === void 0 ? null : _ref$error,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   var color = 'secondary';
   var name = 'radio-btn-unchecked';
   if (isSelected && isDisabled) {
@@ -2066,7 +2066,7 @@ var RadioInputIcon = function RadioInputIcon(_ref) {
   }));
 };
 
-var styles$f = {"size-sm":"RadioInput-module_size-sm__6DLmn","size-md":"RadioInput-module_size-md__wiJ4R","size-lg":"RadioInput-module_size-lg__pX8S8","radio-container":"RadioInput-module_radio-container__EBRgV","hidden":"RadioInput-module_hidden__KF4as","size-sm-tablet":"RadioInput-module_size-sm-tablet__x7edi","size-md-tablet":"RadioInput-module_size-md-tablet__T-HTa","size-lg-tablet":"RadioInput-module_size-lg-tablet__0Hkim","size-sm-desktop":"RadioInput-module_size-sm-desktop__HjeWG","size-md-desktop":"RadioInput-module_size-md-desktop__3Y1fn","size-lg-desktop":"RadioInput-module_size-lg-desktop__z3nKW","size-sm-hd":"RadioInput-module_size-sm-hd__oxAR7","size-md-hd":"RadioInput-module_size-md-hd__ws7ro","size-lg-hd":"RadioInput-module_size-lg-hd__87uii"};
+var styles$g = {"size-sm":"RadioInput-module_size-sm__6DLmn","size-md":"RadioInput-module_size-md__wiJ4R","size-lg":"RadioInput-module_size-lg__pX8S8","radio-container":"RadioInput-module_radio-container__EBRgV","hidden":"RadioInput-module_hidden__KF4as","size-sm-tablet":"RadioInput-module_size-sm-tablet__x7edi","size-md-tablet":"RadioInput-module_size-md-tablet__T-HTa","size-lg-tablet":"RadioInput-module_size-lg-tablet__0Hkim","size-sm-desktop":"RadioInput-module_size-sm-desktop__HjeWG","size-md-desktop":"RadioInput-module_size-md-desktop__3Y1fn","size-lg-desktop":"RadioInput-module_size-lg-desktop__z3nKW","size-sm-hd":"RadioInput-module_size-sm-hd__oxAR7","size-md-hd":"RadioInput-module_size-md-hd__ws7ro","size-lg-hd":"RadioInput-module_size-lg-hd__87uii"};
 
 var RadioInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames;
@@ -2090,7 +2090,7 @@ var RadioInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size;
   var responsiveClasses = classNames.apply(void 0, generateResponsiveClasses('size', size).map(function (c) {
-    return styles$f[c];
+    return styles$g[c];
   }));
   var labelProps = {
     inputId: option.id,
@@ -2099,7 +2099,7 @@ var RadioInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isRadioInputLabel: true,
     justifyContent: 'center'
   };
-  var containerClasses = classNames('hyphen-components__variables__form-control', className, styles$f['radio-container'], responsiveClasses, (_classNames = {}, _classNames[styles$f.hidden] = isHidden, _classNames));
+  var containerClasses = classNames('hyphen-components__variables__form-control', className, styles$g['radio-container'], responsiveClasses, (_classNames = {}, _classNames[styles$g.hidden] = isHidden, _classNames));
   return React.createElement(React.Fragment, null, option && React.createElement(Box, {
     className: containerClasses,
     key: option.id,
@@ -2135,9 +2135,9 @@ var RadioInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), option.label && React.createElement(FormLabel, _extends({}, labelProps), option.label)));
 });
 
-var styles$e = {"radio-group":"RadioGroup-module_radio-group__FWPcT","fieldset":"RadioGroup-module_fieldset__PEUXI","legend":"RadioGroup-module_legend__tcfV7","description":"RadioGroup-module_description__8fzM-"};
+var styles$f = {"radio-group":"RadioGroup-module_radio-group__FWPcT","fieldset":"RadioGroup-module_fieldset__PEUXI","legend":"RadioGroup-module_legend__tcfV7","description":"RadioGroup-module_description__8fzM-"};
 
-var _excluded$l = ["name", "onChange", "options", "className", "description", "direction", "error", "isDisabled", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size", "title", "value"];
+var _excluded$m = ["name", "onChange", "options", "className", "description", "direction", "error", "isDisabled", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size", "title", "value"];
 var RadioGroup = function RadioGroup(_ref) {
   var _classNames;
   var name = _ref.name,
@@ -2167,20 +2167,20 @@ var RadioGroup = function RadioGroup(_ref) {
     title = _ref$title === void 0 ? undefined : _ref$title,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? undefined : _ref$value,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-  var groupClasses = classNames('hyphen-components__variables__form-control', className, (_classNames = {}, _classNames[styles$e.loading] = error, _classNames));
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+  var groupClasses = classNames('hyphen-components__variables__form-control', className, (_classNames = {}, _classNames[styles$f.loading] = error, _classNames));
   return React.createElement("div", _extends({
-    className: classNames(styles$e['radio-group'], groupClasses)
+    className: classNames(styles$f['radio-group'], groupClasses)
   }, restProps), React.createElement("fieldset", {
-    className: styles$e.fieldset
+    className: styles$f.fieldset
   }, (title || description) && React.createElement("legend", {
-    className: styles$e.legend
+    className: styles$f.legend
   }, title, isRequired && React.createElement("span", null, requiredIndicator), description && React.createElement("div", {
-    className: styles$e.description
+    className: styles$f.description
   }, description)), React.createElement(Box, {
     direction: direction,
     gap: "sm",
-    className: styles$e.options
+    className: styles$f.options
   }, options && options.map(function (option) {
     return React.createElement(RadioInput, {
       key: option.id,
@@ -2197,7 +2197,7 @@ var RadioGroup = function RadioGroup(_ref) {
   }))), error && typeof error !== 'boolean' && React.createElement(InputValidationMessage, null, error));
 };
 
-var _excluded$k = ["field", "form", "onChange", "options"];
+var _excluded$l = ["field", "form", "onChange", "options"];
 var FormikRadioGroup = function FormikRadioGroup(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2209,7 +2209,7 @@ var FormikRadioGroup = function FormikRadioGroup(_ref) {
     errors = _ref$form.errors,
     onChange = _ref.onChange,
     options = _ref.options,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   return React.createElement(RadioGroup, _extends({}, props, {
     options: options,
     name: name,
@@ -2220,9 +2220,9 @@ var FormikRadioGroup = function FormikRadioGroup(_ref) {
   }));
 };
 
-var styles$d = {"react-select-icon":"SelectInput-module_react-select-icon__PvocB","size-sm":"SelectInput-module_size-sm__PKB-J","size-md":"SelectInput-module_size-md__n9Fj8","size-lg":"SelectInput-module_size-lg__LQ-uG","error":"SelectInput-module_error__Avf98","size-sm-tablet":"SelectInput-module_size-sm-tablet__2Dg01","size-md-tablet":"SelectInput-module_size-md-tablet__-iOSg","size-lg-tablet":"SelectInput-module_size-lg-tablet__9xmuJ","size-sm-desktop":"SelectInput-module_size-sm-desktop__tOWI4","size-md-desktop":"SelectInput-module_size-md-desktop__vo-UC","size-lg-desktop":"SelectInput-module_size-lg-desktop__nxQdj","size-sm-hd":"SelectInput-module_size-sm-hd__qamTH","size-md-hd":"SelectInput-module_size-md-hd__Cf8hk","size-lg-hd":"SelectInput-module_size-lg-hd__E4-mZ","disabled":"SelectInput-module_disabled__4ezAy","select-input-label":"SelectInput-module_select-input-label__eqEYa"};
+var styles$e = {"react-select-icon":"SelectInput-module_react-select-icon__PvocB","size-sm":"SelectInput-module_size-sm__PKB-J","size-md":"SelectInput-module_size-md__n9Fj8","size-lg":"SelectInput-module_size-lg__LQ-uG","error":"SelectInput-module_error__Avf98","size-sm-tablet":"SelectInput-module_size-sm-tablet__2Dg01","size-md-tablet":"SelectInput-module_size-md-tablet__-iOSg","size-lg-tablet":"SelectInput-module_size-lg-tablet__9xmuJ","size-sm-desktop":"SelectInput-module_size-sm-desktop__tOWI4","size-md-desktop":"SelectInput-module_size-md-desktop__vo-UC","size-lg-desktop":"SelectInput-module_size-lg-desktop__nxQdj","size-sm-hd":"SelectInput-module_size-sm-hd__qamTH","size-md-hd":"SelectInput-module_size-md-hd__Cf8hk","size-lg-hd":"SelectInput-module_size-lg-hd__E4-mZ","disabled":"SelectInput-module_disabled__4ezAy","select-input-label":"SelectInput-module_select-input-label__eqEYa"};
 
-var _excluded$j = ["id", "label", "onChange", "options", "value", "autoFocus", "className", "error", "helpText", "hideLabel", "isClearable", "isDisabled", "isMulti", "isRequired", "menuPortalTarget", "name", "onFocus", "onBlur", "placeholder", "requiredIndicator", "size"];
+var _excluded$k = ["id", "label", "onChange", "options", "value", "autoFocus", "className", "error", "helpText", "hideLabel", "isClearable", "isDisabled", "isMulti", "isRequired", "menuPortalTarget", "name", "onFocus", "onBlur", "placeholder", "requiredIndicator", "size"];
 var SelectInput = function SelectInput(_ref) {
   var _ref2, _classNames;
   var id = _ref.id,
@@ -2261,7 +2261,7 @@ var SelectInput = function SelectInput(_ref) {
     requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var handleChange = function handleChange(values) {
     var simulatedEventPayloadType = {
       target: {
@@ -2279,13 +2279,13 @@ var SelectInput = function SelectInput(_ref) {
   };
   var responsiveClasses = generateResponsiveClasses('size', size);
   var wrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', 'select-input-wrapper', className].concat(responsiveClasses.map(function (c) {
-    return styles$d[c];
-  }), [(_ref2 = {}, _ref2[styles$d.disabled] = isDisabled, _ref2)]));
-  var inputClasses = classNames('react-select', (_classNames = {}, _classNames[styles$d.error] = error, _classNames));
+    return styles$e[c];
+  }), [(_ref2 = {}, _ref2[styles$e.disabled] = isDisabled, _ref2)]));
+  var inputClasses = classNames('react-select', (_classNames = {}, _classNames[styles$e.error] = error, _classNames));
   var labelProps = {
     inputId: id,
     helpText: helpText,
-    className: styles$d['select-input-label'],
+    className: styles$e['select-input-label'],
     isDisabled: isDisabled,
     isFieldRequired: isRequired,
     requiredIndicator: requiredIndicator
@@ -2329,7 +2329,7 @@ var SelectInput = function SelectInput(_ref) {
   })), error && typeof error !== 'boolean' && React.createElement(InputValidationMessage, null, error));
 };
 
-var _excluded$i = ["field", "form", "onChange", "id", "label", "options"];
+var _excluded$j = ["field", "form", "onChange", "id", "label", "options"];
 var FormikSelectInput = function FormikSelectInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2343,7 +2343,7 @@ var FormikSelectInput = function FormikSelectInput(_ref) {
     id = _ref.id,
     label = _ref.label,
     options = _ref.options,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return React.createElement(SelectInput, _extends({}, props, {
     id: id,
     label: label,
@@ -2356,7 +2356,7 @@ var FormikSelectInput = function FormikSelectInput(_ref) {
   }));
 };
 
-var styles$c = {"text-input-wrapper":"SelectInputInset-module_text-input-wrapper__hZ4Fy","size-md":"SelectInputInset-module_size-md__6MFcV","select-input-label":"SelectInputInset-module_select-input-label__6XdR6","clear-button":"SelectInputInset-module_clear-button__xbZaY","size-lg":"SelectInputInset-module_size-lg__i2Bzf","disabled":"SelectInputInset-module_disabled__DYSr2","size-md-tablet":"SelectInputInset-module_size-md-tablet__xwoPz","size-lg-tablet":"SelectInputInset-module_size-lg-tablet__2DgFa","size-md-desktop":"SelectInputInset-module_size-md-desktop__MfemS","size-lg-desktop":"SelectInputInset-module_size-lg-desktop__etLGJ","size-md-hd":"SelectInputInset-module_size-md-hd__NWb1q","size-lg-hd":"SelectInputInset-module_size-lg-hd__ycjXC","error":"SelectInputInset-module_error__j-jgS"};
+var styles$d = {"text-input-wrapper":"SelectInputInset-module_text-input-wrapper__hZ4Fy","size-md":"SelectInputInset-module_size-md__6MFcV","select-input-label":"SelectInputInset-module_select-input-label__6XdR6","clear-button":"SelectInputInset-module_clear-button__xbZaY","size-lg":"SelectInputInset-module_size-lg__i2Bzf","disabled":"SelectInputInset-module_disabled__DYSr2","size-md-tablet":"SelectInputInset-module_size-md-tablet__xwoPz","size-lg-tablet":"SelectInputInset-module_size-lg-tablet__2DgFa","size-md-desktop":"SelectInputInset-module_size-md-desktop__MfemS","size-lg-desktop":"SelectInputInset-module_size-lg-desktop__etLGJ","size-md-hd":"SelectInputInset-module_size-md-hd__NWb1q","size-lg-hd":"SelectInputInset-module_size-lg-hd__ycjXC","error":"SelectInputInset-module_error__j-jgS"};
 
 var SelectInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref2;
@@ -2398,10 +2398,10 @@ var SelectInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var optionsWithPlaceholder = [_extends({}, placeholderOption)].concat(options);
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$c['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
-    return styles$c[c];
-  }), [(_ref2 = {}, _ref2[styles$c.error] = error, _ref2[styles$c.disabled] = isDisabled, _ref2[styles$c['is-clearable']] = onClear, _ref2)]));
-  var clearBtnClasses = classNames(styles$c['clear-button'], styles$c.md);
+  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$d['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
+    return styles$d[c];
+  }), [(_ref2 = {}, _ref2[styles$d.error] = error, _ref2[styles$d.disabled] = isDisabled, _ref2[styles$d['is-clearable']] = onClear, _ref2)]));
+  var clearBtnClasses = classNames(styles$d['clear-button'], styles$d.md);
   var renderClearIcon = function renderClearIcon() {
     var handleKeyPress = function handleKeyPress(event) {
       if (event.keyCode === 13 && onClear) onClear(event);
@@ -2456,12 +2456,12 @@ var SelectInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, option.label);
   })), !!onClear && !!value && renderClearIcon(), React.createElement("label", {
     htmlFor: id,
-    className: styles$c['select-input-label'],
+    className: styles$d['select-input-label'],
     id: id + "Label"
   }, label, isRequired && requiredIndicator && React.createElement("span", null, requiredIndicator))), helpText && React.createElement(HelpText, null, helpText), error && error !== true && React.createElement(InputValidationMessage, null, error));
 });
 
-var _excluded$h = ["field", "form", "onChange", "id", "label", "options"];
+var _excluded$i = ["field", "form", "onChange", "id", "label", "options"];
 var FormikSelectInputInset = function FormikSelectInputInset(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2475,7 +2475,7 @@ var FormikSelectInputInset = function FormikSelectInputInset(_ref) {
     id = _ref.id,
     label = _ref.label,
     options = _ref.options,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return React.createElement(SelectInputInset, _extends({}, props, {
     id: id,
     label: label,
@@ -2488,7 +2488,7 @@ var FormikSelectInputInset = function FormikSelectInputInset(_ref) {
   }));
 };
 
-var styles$b = {"text-input-wrapper":"TextareaInputInset-module_text-input-wrapper__0VNFI","size-md":"TextareaInputInset-module_size-md__Hkdpr","text-input-label":"TextareaInputInset-module_text-input-label__yHDss","size-lg":"TextareaInputInset-module_size-lg__wOXof","disabled":"TextareaInputInset-module_disabled__U-Fpa","size-md-tablet":"TextareaInputInset-module_size-md-tablet__KnN-9","size-lg-tablet":"TextareaInputInset-module_size-lg-tablet__oJ0ib","size-md-desktop":"TextareaInputInset-module_size-md-desktop__uBIxD","size-lg-desktop":"TextareaInputInset-module_size-lg-desktop__3qmko","size-md-hd":"TextareaInputInset-module_size-md-hd__6340p","size-lg-hd":"TextareaInputInset-module_size-lg-hd__PtVQT","error":"TextareaInputInset-module_error__sxX-U","textarea-resize-both":"TextareaInputInset-module_textarea-resize-both__53-Ff","textarea-resize-horizontal":"TextareaInputInset-module_textarea-resize-horizontal__X0ibH","textarea-resize-vertical":"TextareaInputInset-module_textarea-resize-vertical__YlsyR","textarea-resize-none":"TextareaInputInset-module_textarea-resize-none__p0eJB"};
+var styles$c = {"text-input-wrapper":"TextareaInputInset-module_text-input-wrapper__0VNFI","size-md":"TextareaInputInset-module_size-md__Hkdpr","text-input-label":"TextareaInputInset-module_text-input-label__yHDss","size-lg":"TextareaInputInset-module_size-lg__wOXof","disabled":"TextareaInputInset-module_disabled__U-Fpa","size-md-tablet":"TextareaInputInset-module_size-md-tablet__KnN-9","size-lg-tablet":"TextareaInputInset-module_size-lg-tablet__oJ0ib","size-md-desktop":"TextareaInputInset-module_size-md-desktop__uBIxD","size-lg-desktop":"TextareaInputInset-module_size-lg-desktop__3qmko","size-md-hd":"TextareaInputInset-module_size-md-hd__6340p","size-lg-hd":"TextareaInputInset-module_size-lg-hd__PtVQT","error":"TextareaInputInset-module_error__sxX-U","textarea-resize-both":"TextareaInputInset-module_textarea-resize-both__53-Ff","textarea-resize-horizontal":"TextareaInputInset-module_textarea-resize-horizontal__X0ibH","textarea-resize-vertical":"TextareaInputInset-module_textarea-resize-vertical__YlsyR","textarea-resize-none":"TextareaInputInset-module_textarea-resize-none__p0eJB"};
 
 var TextareaInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref2, _classNames;
@@ -2531,9 +2531,9 @@ var TextareaInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type;
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$b['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
-    return styles$b[c];
-  }), [(_ref2 = {}, _ref2[styles$b.disabled] = isDisabled, _ref2)]));
+  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$c['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
+    return styles$c[c];
+  }), [(_ref2 = {}, _ref2[styles$c.disabled] = isDisabled, _ref2)]));
   var computedInputProps = _extends({}, inputProps, {
     // These are spread first so that we don't have top level props overwritten by the user.
     'aria-required': isRequired,
@@ -2542,7 +2542,7 @@ var TextareaInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     'aria-labelledby': label ? id + "Label" : undefined,
     autoComplete: getAutoCompleteValue(autoComplete),
     autoFocus: autoFocus,
-    className: classNames(styles$b["textarea-resize-" + resize], (_classNames = {}, _classNames[styles$b.error] = error, _classNames)),
+    className: classNames(styles$c["textarea-resize-" + resize], (_classNames = {}, _classNames[styles$c.error] = error, _classNames)),
     disabled: isDisabled,
     id: id,
     maxLength: maxLength,
@@ -2568,12 +2568,12 @@ var TextareaInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     as: "textarea"
   }, computedInputProps)), React.createElement("label", {
     htmlFor: id,
-    className: styles$b['text-input-label'],
+    className: styles$c['text-input-label'],
     id: id + "Label"
   }, label, isRequired && requiredIndicator && React.createElement("span", null, requiredIndicator))), helpText && React.createElement(HelpText, null, helpText), error && error !== true && React.createElement(InputValidationMessage, null, error));
 });
 
-var _excluded$g = ["field", "form", "onChange", "id", "label"];
+var _excluded$h = ["field", "form", "onChange", "id", "label"];
 var FormikTextareaInputInset = function FormikTextareaInputInset(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2586,7 +2586,7 @@ var FormikTextareaInputInset = function FormikTextareaInputInset(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   return React.createElement(TextareaInputInset, _extends({}, props, {
     id: id,
     label: label,
@@ -2598,7 +2598,7 @@ var FormikTextareaInputInset = function FormikTextareaInputInset(_ref) {
   }));
 };
 
-var styles$a = {"text-input-wrapper":"TextInputInset-module_text-input-wrapper__qQzOh","size-md":"TextInputInset-module_size-md__Lg91X","label-input-wrapper":"TextInputInset-module_label-input-wrapper__opMsd","text-input-label":"TextInputInset-module_text-input-label__zADJM","prefix":"TextInputInset-module_prefix__i-iby","suffix":"TextInputInset-module_suffix__r9ZnM","clear-button":"TextInputInset-module_clear-button__kV9pf","size-lg":"TextInputInset-module_size-lg__ggigL","disabled":"TextInputInset-module_disabled__udCEB","size-md-tablet":"TextInputInset-module_size-md-tablet__adPUS","size-lg-tablet":"TextInputInset-module_size-lg-tablet__HZTUo","size-md-desktop":"TextInputInset-module_size-md-desktop__Pjze7","size-lg-desktop":"TextInputInset-module_size-lg-desktop__5ov91","size-md-hd":"TextInputInset-module_size-md-hd__jyglU","size-lg-hd":"TextInputInset-module_size-lg-hd__ymgTS","error":"TextInputInset-module_error__LZghB"};
+var styles$b = {"text-input-wrapper":"TextInputInset-module_text-input-wrapper__qQzOh","size-md":"TextInputInset-module_size-md__Lg91X","label-input-wrapper":"TextInputInset-module_label-input-wrapper__opMsd","text-input-label":"TextInputInset-module_text-input-label__zADJM","prefix":"TextInputInset-module_prefix__i-iby","suffix":"TextInputInset-module_suffix__r9ZnM","clear-button":"TextInputInset-module_clear-button__kV9pf","size-lg":"TextInputInset-module_size-lg__ggigL","disabled":"TextInputInset-module_disabled__udCEB","size-md-tablet":"TextInputInset-module_size-md-tablet__adPUS","size-lg-tablet":"TextInputInset-module_size-lg-tablet__HZTUo","size-md-desktop":"TextInputInset-module_size-md-desktop__Pjze7","size-lg-desktop":"TextInputInset-module_size-lg-desktop__5ov91","size-md-hd":"TextInputInset-module_size-md-hd__jyglU","size-lg-hd":"TextInputInset-module_size-lg-hd__ymgTS","error":"TextInputInset-module_error__LZghB"};
 
 var TextInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref2;
@@ -2642,10 +2642,10 @@ var TextInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type;
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$a['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
-    return styles$a[c];
-  }), [(_ref2 = {}, _ref2[styles$a.error] = error, _ref2[styles$a.disabled] = isDisabled, _ref2[styles$a['is-clearable']] = onClear, _ref2)]));
-  var clearBtnClasses = classNames(styles$a['clear-button'], styles$a.md);
+  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$b['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
+    return styles$b[c];
+  }), [(_ref2 = {}, _ref2[styles$b.error] = error, _ref2[styles$b.disabled] = isDisabled, _ref2[styles$b['is-clearable']] = onClear, _ref2)]));
+  var clearBtnClasses = classNames(styles$b['clear-button'], styles$b.md);
   var renderClearIcon = function renderClearIcon() {
     var handleKeyPress = function handleKeyPress(event) {
       if (event.keyCode === 13 && onClear) onClear(event);
@@ -2694,7 +2694,7 @@ var TextInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     alignItems: "center",
     justifyContent: "center",
     background: "secondary",
-    className: classNames(styles$a.prefix, 'ws-nowrap')
+    className: classNames(styles$b.prefix, 'ws-nowrap')
   }, prefix), React.createElement(Box, {
     direction: "row",
     position: "relative",
@@ -2704,16 +2704,16 @@ var TextInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     as: "input"
   }, computedInputProps)), !!onClear && !!value && renderClearIcon(), React.createElement("label", {
     htmlFor: id,
-    className: styles$a['text-input-label'],
+    className: styles$b['text-input-label'],
     id: id + "Label"
   }, label, isRequired && requiredIndicator && React.createElement("span", null, requiredIndicator))), suffix && React.createElement(Box, {
     color: "base",
     background: "secondary",
-    className: classNames(styles$a.suffix, 'ws-nowrap')
+    className: classNames(styles$b.suffix, 'ws-nowrap')
   }, suffix)), helpText && React.createElement(HelpText, null, helpText), error && error !== true && React.createElement(InputValidationMessage, null, error));
 });
 
-var _excluded$f = ["field", "form", "onChange", "id", "label"];
+var _excluded$g = ["field", "form", "onChange", "id", "label"];
 var FormikTextInputInset = function FormikTextInputInset(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2726,7 +2726,7 @@ var FormikTextInputInset = function FormikTextInputInset(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   return React.createElement(TextInputInset, _extends({}, props, {
     id: id,
     label: label,
@@ -2738,9 +2738,9 @@ var FormikTextInputInset = function FormikTextInputInset(_ref) {
   }));
 };
 
-var styles$9 = {"select-input-native-wrapper":"SelectInputNative-module_select-input-native-wrapper__-vvFm","disabled":"SelectInputNative-module_disabled__gKmV4","size-sm":"SelectInputNative-module_size-sm__7Ql4z","size-md":"SelectInputNative-module_size-md__ofleh","size-lg":"SelectInputNative-module_size-lg__ewS-6","size-sm-tablet":"SelectInputNative-module_size-sm-tablet__3wbFA","size-md-tablet":"SelectInputNative-module_size-md-tablet__nLo2t","size-lg-tablet":"SelectInputNative-module_size-lg-tablet__fLu2T","size-sm-desktop":"SelectInputNative-module_size-sm-desktop__aUL7D","size-md-desktop":"SelectInputNative-module_size-md-desktop__s1uoc","size-lg-desktop":"SelectInputNative-module_size-lg-desktop__Ri2Ka","size-sm-hd":"SelectInputNative-module_size-sm-hd__RVm4G","size-md-hd":"SelectInputNative-module_size-md-hd__m4Rqf","size-lg-hd":"SelectInputNative-module_size-lg-hd__V6i8b","error":"SelectInputNative-module_error__RBOZT","text-input-label":"SelectInputNative-module_text-input-label__-YjDc"};
+var styles$a = {"select-input-native-wrapper":"SelectInputNative-module_select-input-native-wrapper__-vvFm","disabled":"SelectInputNative-module_disabled__gKmV4","size-sm":"SelectInputNative-module_size-sm__7Ql4z","size-md":"SelectInputNative-module_size-md__ofleh","size-lg":"SelectInputNative-module_size-lg__ewS-6","size-sm-tablet":"SelectInputNative-module_size-sm-tablet__3wbFA","size-md-tablet":"SelectInputNative-module_size-md-tablet__nLo2t","size-lg-tablet":"SelectInputNative-module_size-lg-tablet__fLu2T","size-sm-desktop":"SelectInputNative-module_size-sm-desktop__aUL7D","size-md-desktop":"SelectInputNative-module_size-md-desktop__s1uoc","size-lg-desktop":"SelectInputNative-module_size-lg-desktop__Ri2Ka","size-sm-hd":"SelectInputNative-module_size-sm-hd__RVm4G","size-md-hd":"SelectInputNative-module_size-md-hd__m4Rqf","size-lg-hd":"SelectInputNative-module_size-lg-hd__V6i8b","error":"SelectInputNative-module_error__RBOZT","text-input-label":"SelectInputNative-module_text-input-label__-YjDc"};
 
-var _excluded$e = ["autoFocus", "label", "hideLabel", "helpText", "error", "id", "isDisabled", "isRequired", "name", "value", "options", "onChange", "placeholder", "requiredIndicator", "size"];
+var _excluded$f = ["autoFocus", "label", "hideLabel", "helpText", "error", "id", "isDisabled", "isRequired", "name", "value", "options", "onChange", "placeholder", "requiredIndicator", "size"];
 var SelectInputNative = function SelectInputNative(_ref) {
   var _ref2;
   var _ref$autoFocus = _ref.autoFocus,
@@ -2762,16 +2762,16 @@ var SelectInputNative = function SelectInputNative(_ref) {
     requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var placeholderOption = {
     value: '',
     label: placeholder
   };
   var optionsWithPlaceholder = [_extends({}, placeholderOption)].concat(options);
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var selectWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$9['select-input-native-wrapper']].concat(responsiveClasses.map(function (className) {
-    return styles$9[className];
-  }), [(_ref2 = {}, _ref2[styles$9.disabled] = isDisabled, _ref2[styles$9.error] = error, _ref2)]));
+  var selectWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$a['select-input-native-wrapper']].concat(responsiveClasses.map(function (className) {
+    return styles$a[className];
+  }), [(_ref2 = {}, _ref2[styles$a.disabled] = isDisabled, _ref2[styles$a.error] = error, _ref2)]));
   return React.createElement(FormControl, _extends({
     label: label,
     hideLabel: hideLabel,
@@ -2808,7 +2808,7 @@ var SelectInputNative = function SelectInputNative(_ref) {
   }))));
 };
 
-var _excluded$d = ["field", "form", "onChange", "options", "id", "label"];
+var _excluded$e = ["field", "form", "onChange", "options", "id", "label"];
 var FormikSelectInputNative = function FormikSelectInputNative(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2822,7 +2822,7 @@ var FormikSelectInputNative = function FormikSelectInputNative(_ref) {
     options = _ref.options,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return React.createElement(SelectInputNative, _extends({}, props, {
     options: options,
     id: id,
@@ -2835,7 +2835,7 @@ var FormikSelectInputNative = function FormikSelectInputNative(_ref) {
   }));
 };
 
-var _excluded$c = ["field", "form", "onChange", "id", "label"];
+var _excluded$d = ["field", "form", "onChange", "id", "label"];
 var FormikTextInput = function FormikTextInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2848,7 +2848,7 @@ var FormikTextInput = function FormikTextInput(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   return React.createElement(TextInput, _extends({}, props, {
     id: id,
     label: label,
@@ -2860,9 +2860,9 @@ var FormikTextInput = function FormikTextInput(_ref) {
   }));
 };
 
-var styles$8 = {"textarea-input-wrapper":"TextareaInput-module_textarea-input-wrapper__mJBZN","size-sm":"TextareaInput-module_size-sm__-YCcV","size-md":"TextareaInput-module_size-md__uPOvN","size-lg":"TextareaInput-module_size-lg__P5SYv","size-sm-tablet":"TextareaInput-module_size-sm-tablet__rYP2T","size-md-tablet":"TextareaInput-module_size-md-tablet__D1PYq","size-lg-tablet":"TextareaInput-module_size-lg-tablet__N-UED","size-sm-desktop":"TextareaInput-module_size-sm-desktop__Z-Zdg","size-md-desktop":"TextareaInput-module_size-md-desktop__W3jIm","size-lg-desktop":"TextareaInput-module_size-lg-desktop__XLwk0","size-sm-hd":"TextareaInput-module_size-sm-hd__KP21d","size-md-hd":"TextareaInput-module_size-md-hd__3me0R","size-lg-hd":"TextareaInput-module_size-lg-hd__BcgC-","error":"TextareaInput-module_error__JpCpt","textarea-input-label":"TextareaInput-module_textarea-input-label__1zb77","textarea-resize-both":"TextareaInput-module_textarea-resize-both__Gn3Zh","textarea-resize-horizontal":"TextareaInput-module_textarea-resize-horizontal__0aRED","textarea-resize-vertical":"TextareaInput-module_textarea-resize-vertical__DbKar","textarea-resize-none":"TextareaInput-module_textarea-resize-none__l6dRF"};
+var styles$9 = {"textarea-input-wrapper":"TextareaInput-module_textarea-input-wrapper__mJBZN","size-sm":"TextareaInput-module_size-sm__-YCcV","size-md":"TextareaInput-module_size-md__uPOvN","size-lg":"TextareaInput-module_size-lg__P5SYv","size-sm-tablet":"TextareaInput-module_size-sm-tablet__rYP2T","size-md-tablet":"TextareaInput-module_size-md-tablet__D1PYq","size-lg-tablet":"TextareaInput-module_size-lg-tablet__N-UED","size-sm-desktop":"TextareaInput-module_size-sm-desktop__Z-Zdg","size-md-desktop":"TextareaInput-module_size-md-desktop__W3jIm","size-lg-desktop":"TextareaInput-module_size-lg-desktop__XLwk0","size-sm-hd":"TextareaInput-module_size-sm-hd__KP21d","size-md-hd":"TextareaInput-module_size-md-hd__3me0R","size-lg-hd":"TextareaInput-module_size-lg-hd__BcgC-","error":"TextareaInput-module_error__JpCpt","textarea-input-label":"TextareaInput-module_textarea-input-label__1zb77","textarea-resize-both":"TextareaInput-module_textarea-resize-both__Gn3Zh","textarea-resize-horizontal":"TextareaInput-module_textarea-resize-horizontal__0aRED","textarea-resize-vertical":"TextareaInput-module_textarea-resize-vertical__DbKar","textarea-resize-none":"TextareaInput-module_textarea-resize-none__l6dRF"};
 
-var _excluded$b = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "className", "error", "helpText", "hideLabel", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onFocus", "placeholder", "requiredIndicator", "resize", "rows", "size"];
+var _excluded$c = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "className", "error", "helpText", "hideLabel", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onFocus", "placeholder", "requiredIndicator", "resize", "rows", "size"];
 var TextareaInput = function TextareaInput(_ref) {
   var _ref2;
   var id = _ref.id,
@@ -2902,11 +2902,11 @@ var TextareaInput = function TextareaInput(_ref) {
     rows = _ref$rows === void 0 ? 3 : _ref$rows,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$8['textarea-input-wrapper']].concat(responsiveClasses.map(function (c) {
-    return styles$8[c];
-  }), [(_ref2 = {}, _ref2[styles$8.error] = error, _ref2[styles$8.disabled] = isDisabled, _ref2)]));
+  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$9['textarea-input-wrapper']].concat(responsiveClasses.map(function (c) {
+    return styles$9[c];
+  }), [(_ref2 = {}, _ref2[styles$9.error] = error, _ref2[styles$9.disabled] = isDisabled, _ref2)]));
   var inputProps = {
     'aria-required': isRequired,
     'aria-invalid': !!error,
@@ -2914,7 +2914,7 @@ var TextareaInput = function TextareaInput(_ref) {
     'aria-labelledby': label && !hideLabel ? id + "Label" : undefined,
     autoComplete: getAutoCompleteValue(autoComplete),
     autoFocus: autoFocus,
-    className: classNames(styles$8["textarea-resize-" + resize]),
+    className: classNames(styles$9["textarea-resize-" + resize]),
     disabled: isDisabled,
     id: id,
     maxLength: maxLength,
@@ -2930,7 +2930,7 @@ var TextareaInput = function TextareaInput(_ref) {
   var labelProps = {
     inputId: id,
     helpText: helpText,
-    className: styles$8['textarea-input-label'],
+    className: styles$9['textarea-input-label'],
     isDisabled: isDisabled,
     isFieldRequired: isRequired,
     requiredIndicator: requiredIndicator
@@ -2946,7 +2946,7 @@ var TextareaInput = function TextareaInput(_ref) {
   }, inputProps))), error && error !== true && React.createElement(InputValidationMessage, null, error));
 };
 
-var _excluded$a = ["field", "form", "onChange", "id", "label"];
+var _excluded$b = ["field", "form", "onChange", "id", "label"];
 var FormikTextareaInput = function FormikTextareaInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2959,7 +2959,7 @@ var FormikTextareaInput = function FormikTextareaInput(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return React.createElement(TextareaInput, _extends({}, props, {
     id: id,
     label: label,
@@ -2971,7 +2971,7 @@ var FormikTextareaInput = function FormikTextareaInput(_ref) {
   }));
 };
 
-var _excluded$9 = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
+var _excluded$a = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
 var TimePicker = function TimePicker(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -2993,7 +2993,7 @@ var TimePicker = function TimePicker(_ref) {
     placeholder = _ref$placeholder === void 0 ? 'HH:MM' : _ref$placeholder,
     _ref$startTime = _ref.startTime,
     startTime = _ref$startTime === void 0 ? undefined : _ref$startTime,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var generateTimes = function generateTimes() {
     var first = new Date();
     first.setHours((startTime == null ? void 0 : startTime.hour) || 0, (startTime == null ? void 0 : startTime.minute) || 0, 0, 0);
@@ -3021,7 +3021,7 @@ var TimePicker = function TimePicker(_ref) {
   }));
 };
 
-var _excluded$8 = ["field", "form", "options", "onChange"];
+var _excluded$9 = ["field", "form", "options", "onChange"];
 var FormikTimePicker = function FormikTimePicker(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3033,7 +3033,7 @@ var FormikTimePicker = function FormikTimePicker(_ref) {
     errors = _ref$form.errors,
     options = _ref.options,
     onChange = _ref.onChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   return React.createElement(TimePicker, _extends({}, props, {
     name: name,
     onBlur: onBlur,
@@ -3044,7 +3044,7 @@ var FormikTimePicker = function FormikTimePicker(_ref) {
   }));
 };
 
-var _excluded$7 = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
+var _excluded$8 = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
 var TimePickerNative = function TimePickerNative(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -3066,7 +3066,7 @@ var TimePickerNative = function TimePickerNative(_ref) {
     placeholder = _ref$placeholder === void 0 ? 'HH:MM' : _ref$placeholder,
     _ref$startTime = _ref.startTime,
     startTime = _ref$startTime === void 0 ? undefined : _ref$startTime,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var generateTimes = function generateTimes() {
     var first = new Date();
     first.setHours((startTime == null ? void 0 : startTime.hour) || 0, (startTime == null ? void 0 : startTime.minute) || 0, 0, 0);
@@ -3095,7 +3095,7 @@ var TimePickerNative = function TimePickerNative(_ref) {
   }));
 };
 
-var _excluded$6 = ["field", "form", "onChange"];
+var _excluded$7 = ["field", "form", "onChange"];
 var FormikTimePickerNative = function FormikTimePickerNative(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3106,7 +3106,7 @@ var FormikTimePickerNative = function FormikTimePickerNative(_ref) {
     touched = _ref$form.touched,
     errors = _ref$form.errors,
     onChange = _ref.onChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return React.createElement(TimePickerNative, _extends({}, props, {
     name: name,
     onBlur: onBlur,
@@ -3116,7 +3116,7 @@ var FormikTimePickerNative = function FormikTimePickerNative(_ref) {
   }));
 };
 
-var styles$7 = {"thumb-size-sm":"Toggle-module_thumb-size-sm__GeodE","thumb-size-md":"Toggle-module_thumb-size-md__hZP-v","thumb-size-lg":"Toggle-module_thumb-size-lg__vTfiF","track-size-sm":"Toggle-module_track-size-sm__9H8xR","track-size-md":"Toggle-module_track-size-md__7tLlO","track-size-lg":"Toggle-module_track-size-lg__9drMt","thumb-size-sm-tablet":"Toggle-module_thumb-size-sm-tablet__pbksf","thumb-size-md-tablet":"Toggle-module_thumb-size-md-tablet__-TDJj","thumb-size-lg-tablet":"Toggle-module_thumb-size-lg-tablet__Q0isC","track-size-sm-tablet":"Toggle-module_track-size-sm-tablet__vpDN9","track-size-md-tablet":"Toggle-module_track-size-md-tablet__jBAOT","track-size-lg-tablet":"Toggle-module_track-size-lg-tablet__MLRv2","thumb-size-sm-desktop":"Toggle-module_thumb-size-sm-desktop__8a93z","thumb-size-md-desktop":"Toggle-module_thumb-size-md-desktop__VaAlw","thumb-size-lg-desktop":"Toggle-module_thumb-size-lg-desktop__c9vh7","track-size-sm-desktop":"Toggle-module_track-size-sm-desktop__LqFN-","track-size-md-desktop":"Toggle-module_track-size-md-desktop__3ClrR","track-size-lg-desktop":"Toggle-module_track-size-lg-desktop__ruWSF","thumb-size-sm-hd":"Toggle-module_thumb-size-sm-hd__m5Lwq","thumb-size-md-hd":"Toggle-module_thumb-size-md-hd__4VcAY","thumb-size-lg-hd":"Toggle-module_thumb-size-lg-hd__L-oay","track-size-sm-hd":"Toggle-module_track-size-sm-hd__0m-1g","track-size-md-hd":"Toggle-module_track-size-md-hd__S19uj","track-size-lg-hd":"Toggle-module_track-size-lg-hd__Go0mj","disabled":"Toggle-module_disabled__sxlCk","toggle-thumb":"Toggle-module_toggle-thumb__6hl8Y","toggle-track":"Toggle-module_toggle-track__Jv1qD","error":"Toggle-module_error__f1tIX","toggle-input":"Toggle-module_toggle-input__sNnss"};
+var styles$8 = {"thumb-size-sm":"Toggle-module_thumb-size-sm__GeodE","thumb-size-md":"Toggle-module_thumb-size-md__hZP-v","thumb-size-lg":"Toggle-module_thumb-size-lg__vTfiF","track-size-sm":"Toggle-module_track-size-sm__9H8xR","track-size-md":"Toggle-module_track-size-md__7tLlO","track-size-lg":"Toggle-module_track-size-lg__9drMt","thumb-size-sm-tablet":"Toggle-module_thumb-size-sm-tablet__pbksf","thumb-size-md-tablet":"Toggle-module_thumb-size-md-tablet__-TDJj","thumb-size-lg-tablet":"Toggle-module_thumb-size-lg-tablet__Q0isC","track-size-sm-tablet":"Toggle-module_track-size-sm-tablet__vpDN9","track-size-md-tablet":"Toggle-module_track-size-md-tablet__jBAOT","track-size-lg-tablet":"Toggle-module_track-size-lg-tablet__MLRv2","thumb-size-sm-desktop":"Toggle-module_thumb-size-sm-desktop__8a93z","thumb-size-md-desktop":"Toggle-module_thumb-size-md-desktop__VaAlw","thumb-size-lg-desktop":"Toggle-module_thumb-size-lg-desktop__c9vh7","track-size-sm-desktop":"Toggle-module_track-size-sm-desktop__LqFN-","track-size-md-desktop":"Toggle-module_track-size-md-desktop__3ClrR","track-size-lg-desktop":"Toggle-module_track-size-lg-desktop__ruWSF","thumb-size-sm-hd":"Toggle-module_thumb-size-sm-hd__m5Lwq","thumb-size-md-hd":"Toggle-module_thumb-size-md-hd__4VcAY","thumb-size-lg-hd":"Toggle-module_thumb-size-lg-hd__L-oay","track-size-sm-hd":"Toggle-module_track-size-sm-hd__0m-1g","track-size-md-hd":"Toggle-module_track-size-md-hd__S19uj","track-size-lg-hd":"Toggle-module_track-size-lg-hd__Go0mj","disabled":"Toggle-module_disabled__sxlCk","toggle-thumb":"Toggle-module_toggle-thumb__6hl8Y","toggle-track":"Toggle-module_toggle-track__Jv1qD","error":"Toggle-module_error__f1tIX","toggle-input":"Toggle-module_toggle-input__sNnss"};
 
 var Toggle = function Toggle(_ref) {
   var _classNames, _ref2;
@@ -3152,12 +3152,12 @@ var Toggle = function Toggle(_ref) {
   var handleFocus = function handleFocus(event) {
     if (onFocus) onFocus(event);
   };
-  var wrapperClasses = classNames('hyphen-components__variables__form-control', (_classNames = {}, _classNames[styles$7.disabled] = isDisabled, _classNames));
-  var trackClasses = classNames.apply(void 0, [styles$7['toggle-track']].concat(generateResponsiveClasses('track-size', size).map(function (c) {
-    return styles$7[c];
-  }), [(_ref2 = {}, _ref2[styles$7.error] = error, _ref2)]));
-  var thumbClasses = classNames.apply(void 0, [styles$7['toggle-thumb']].concat(generateResponsiveClasses('thumb-size', size).map(function (c) {
-    return styles$7[c];
+  var wrapperClasses = classNames('hyphen-components__variables__form-control', (_classNames = {}, _classNames[styles$8.disabled] = isDisabled, _classNames));
+  var trackClasses = classNames.apply(void 0, [styles$8['toggle-track']].concat(generateResponsiveClasses('track-size', size).map(function (c) {
+    return styles$8[c];
+  }), [(_ref2 = {}, _ref2[styles$8.error] = error, _ref2)]));
+  var thumbClasses = classNames.apply(void 0, [styles$8['toggle-thumb']].concat(generateResponsiveClasses('thumb-size', size).map(function (c) {
+    return styles$8[c];
   })));
   var inputProps = {
     'aria-required': isRequired,
@@ -3172,7 +3172,7 @@ var Toggle = function Toggle(_ref) {
     onFocus: handleFocus,
     required: isRequired,
     type: 'checkbox',
-    className: styles$7['toggle-input']
+    className: styles$8['toggle-input']
   };
   var labelProps = {
     inputId: id,
@@ -3207,7 +3207,7 @@ var Toggle = function Toggle(_ref) {
   }, helpText)))), error && error !== true && React.createElement(InputValidationMessage, null, error));
 };
 
-var _excluded$5 = ["field", "form"];
+var _excluded$6 = ["field", "form"];
 var FormikToggle = function FormikToggle(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3217,7 +3217,7 @@ var FormikToggle = function FormikToggle(_ref) {
     _ref$form = _ref.form,
     touched = _ref$form.touched,
     errors = _ref$form.errors,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   return React.createElement(Toggle, _extends({
     error: formik.getIn(touched, name) && formik.getIn(errors, name),
     isChecked: value,
@@ -3226,7 +3226,7 @@ var FormikToggle = function FormikToggle(_ref) {
   }, props));
 };
 
-var _excluded$4 = ["children", "padding", "direction", "alignItems", "justifyContent", "background", "gap", "style"];
+var _excluded$5 = ["children", "padding", "direction", "alignItems", "justifyContent", "background", "gap", "style"];
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -3242,7 +3242,7 @@ var ModalFooter = function ModalFooter(_ref) {
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 'sm' : _ref$gap,
     style = _ref.style,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return React.createElement(Box, _extends({
     background: background,
     padding: padding,
@@ -3258,7 +3258,7 @@ var ModalFooter = function ModalFooter(_ref) {
   }, restProps), children);
 };
 
-var styles$6 = {"modal-close":"Modal-module_modal-close__1YmMa","modal":"Modal-module_modal__yNG-7","modal-content":"Modal-module_modal-content__GMtBm"};
+var styles$7 = {"modal-close":"Modal-module_modal-close__1YmMa","modal":"Modal-module_modal__yNG-7","modal-content":"Modal-module_modal-content__GMtBm"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var id = _ref.id,
@@ -3286,14 +3286,14 @@ var ModalHeader = function ModalHeader(_ref) {
   }, title), onDismiss && React.createElement("button", {
     "aria-label": "close",
     type: "button",
-    className: styles$6['modal-close'],
+    className: styles$7['modal-close'],
     onClick: onDismiss
   }, React.createElement(Icon, {
     name: "remove"
   })));
 };
 
-var _excluded$3 = ["children", "flex", "padding", "overflow", "height"];
+var _excluded$4 = ["children", "flex", "padding", "overflow", "height"];
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children,
     _ref$flex = _ref.flex,
@@ -3304,7 +3304,7 @@ var ModalBody = function ModalBody(_ref) {
     overflow = _ref$overflow === void 0 ? 'auto' : _ref$overflow,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '100' : _ref$height,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return React.createElement(Box, _extends({
     padding: padding,
     flex: flex,
@@ -3316,7 +3316,7 @@ var ModalBody = function ModalBody(_ref) {
   }, restProps), children);
 };
 
-var _excluded$2 = ["ariaLabel", "ariaLabelledBy", "allowPinchZoom", "children", "className", "containerRef", "fullScreenMobile", "initialFocusRef", "isOpen", "maxWidth", "onDismiss", "overflow"];
+var _excluded$3 = ["ariaLabel", "ariaLabelledBy", "allowPinchZoom", "children", "className", "containerRef", "fullScreenMobile", "initialFocusRef", "isOpen", "maxWidth", "onDismiss", "overflow"];
 var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames;
   var ariaLabel = _ref.ariaLabel,
@@ -3336,7 +3336,7 @@ var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onDismiss = _ref.onDismiss,
     _ref$overflow = _ref.overflow,
     overflow = _ref$overflow === void 0 ? 'hidden' : _ref$overflow,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var activateFocusLock = React.useCallback(function () {
     setTimeout(function () {
       if (initialFocusRef && initialFocusRef.current) {
@@ -3345,10 +3345,10 @@ var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, 100);
   }, [initialFocusRef]);
   var maxWidthCss = getDimensionCss('mw', maxWidth);
-  var overlayClassnames = classNames(styles$6.overlay, styles$6.modal, {
+  var overlayClassnames = classNames(styles$7.overlay, styles$7.modal, {
     fullscreen: fullScreenMobile
   });
-  var contentClassnames = classNames(styles$6['modal-content'], className, maxWidthCss.classes, (_classNames = {}, _classNames["overflow-" + overflow] = overflow, _classNames));
+  var contentClassnames = classNames(styles$7['modal-content'], className, maxWidthCss.classes, (_classNames = {}, _classNames["overflow-" + overflow] = overflow, _classNames));
   var parentElement = containerRef != null && containerRef.current ? containerRef.current : undefined;
   return React.createElement(FocusLock, {
     autoFocus: true,
@@ -3551,6 +3551,40 @@ var Pagination = function Pagination(_ref) {
   }, isTotalVisible && "Showing " + activeListRange.first + "-" + activeListRange.last + " of " + totalItemsCount));
 };
 
+var styles$6 = {"slider":"RangeInput-module_slider__Z6D68","disabled":"RangeInput-module_disabled__gyu72"};
+
+var _excluded$2 = ["value", "max", "id", "onChange", "className", "isDisabled"];
+var RangeInput = function RangeInput(_ref) {
+  var _classNames;
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 0 : _ref$max,
+    id = _ref.id,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var currentProgress = value > 0 ? value / max * 100 : 0;
+  return React.createElement("input", _extends({}, restProps, {
+    id: id,
+    type: "range",
+    min: "0",
+    value: value,
+    max: max,
+    "aria-valuemax": max,
+    "aria-valuenow": value,
+    "aria-label": "range input",
+    className: classNames(styles$6.slider, className, (_classNames = {}, _classNames[styles$6.disabled] = isDisabled, _classNames)),
+    onChange: onChange,
+    disabled: isDisabled,
+    style: {
+      background: "linear-gradient(to right, var(--color-base-grey-400) " + currentProgress + "%, var(--color-base-grey-700) " + currentProgress + "%)"
+    }
+  }));
+};
+
 // eslint-disable-next-line import/prefer-default-export
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
@@ -4693,6 +4727,7 @@ exports.ModalBaseComponent = ModalBaseComponent;
 exports.Pagination = Pagination;
 exports.Popover = Popover;
 exports.RadioGroup = RadioGroup;
+exports.RangeInput = RangeInput;
 exports.ResponsiveContext = ResponsiveContext;
 exports.ResponsiveProvider = ResponsiveProvider;
 exports.SelectInput = SelectInput;