npm - @hyphen/hyphen-components - Versions diffs - 2.12.3 → 2.13.0 - Mend

@hyphen/hyphen-components 2.12.3 → 2.13.0

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

Files changed (18) hide show

package/dist/components/RangeInput/RangeInput.d.ts +29 -0
package/dist/components/RangeInput/RangeInput.stories.d.ts +7 -0
package/dist/css/index.css +2 -1
package/dist/hyphen-components.cjs.development.js +232 -197
package/dist/hyphen-components.cjs.development.js.map +1 -1
package/dist/hyphen-components.cjs.production.min.js +1 -1
package/dist/hyphen-components.cjs.production.min.js.map +1 -1
package/dist/hyphen-components.esm.js +232 -198
package/dist/hyphen-components.esm.js.map +1 -1
package/dist/index.d.ts +1 -0
package/package.json +1 -1
package/src/components/Modal/Modal.module.scss +1 -1
package/src/components/RangeInput/RangeInput.mdx +25 -0
package/src/components/RangeInput/RangeInput.module.scss +25 -0
package/src/components/RangeInput/RangeInput.stories.tsx +43 -0
package/src/components/RangeInput/RangeInput.test.tsx +36 -0
package/src/components/RangeInput/RangeInput.tsx +65 -0
package/src/index.ts +1 -0

package/dist/hyphen-components.esm.js CHANGED Viewed

@@ -239,9 +239,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.
@@ -328,7 +328,7 @@ var Box = /*#__PURE__*/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);
@@ -377,7 +377,7 @@ var Box = /*#__PURE__*/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`
@@ -479,14 +479,14 @@ var Box = /*#__PURE__*/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__*/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));
@@ -504,7 +504,7 @@ var Icon = /*#__PURE__*/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 = {
@@ -525,7 +525,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,
@@ -547,7 +547,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);
@@ -555,7 +555,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"
@@ -568,7 +568,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,
@@ -578,7 +578,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",
@@ -595,13 +595,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,
@@ -612,24 +612,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';
@@ -745,9 +745,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__*/forwardRef(function (_ref, ref) {
   var _classNames;
   var _ref$children = _ref.children,
@@ -788,12 +788,12 @@ var Button = /*#__PURE__*/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);
@@ -807,29 +807,29 @@ var Button = /*#__PURE__*/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;
@@ -854,7 +854,7 @@ var Button = /*#__PURE__*/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,
@@ -868,7 +868,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,
@@ -887,9 +887,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,
@@ -898,18 +898,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 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,
@@ -923,7 +923,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",
@@ -938,9 +938,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,
@@ -965,7 +965,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, {
@@ -974,7 +974,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,
@@ -988,7 +988,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,
@@ -998,7 +998,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",
@@ -1021,7 +1021,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,
@@ -1033,7 +1033,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';
@@ -1056,9 +1056,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,
@@ -1088,7 +1088,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) {
@@ -1122,11 +1122,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,
@@ -1149,35 +1149,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__*/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,
@@ -1199,8 +1199,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",
@@ -1212,7 +1212,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',
@@ -1257,7 +1257,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);
   };
@@ -1299,9 +1299,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,
@@ -1333,8 +1333,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,
@@ -1353,7 +1353,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,
@@ -1366,7 +1366,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,
@@ -1392,9 +1392,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__*/forwardRef(function (_ref, ref) {
   var _ref2;
   var id = _ref.id,
@@ -1438,12 +1438,12 @@ var TextInput = /*#__PURE__*/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);
@@ -1502,17 +1502,17 @@ var TextInput = /*#__PURE__*/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) {
@@ -1587,7 +1587,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',
@@ -1616,7 +1616,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 = useRef(null);
   var popperRef = useRef(null);
   var _useState = useState(null),
@@ -1670,14 +1670,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",
@@ -1722,7 +1722,7 @@ var Popover = function Popover(_ref) {
   withPortal && portalTarget ? 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
@@ -1742,7 +1742,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);
@@ -1819,14 +1819,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();
@@ -1862,17 +1862,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,
@@ -1889,7 +1889,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__*/forwardRef(function (_ref, ref) {
   var _dynamicStyle, _classNames, _classNames2;
@@ -1935,8 +1935,8 @@ var Drawer = /*#__PURE__*/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, {
@@ -1958,7 +1958,7 @@ var Drawer = /*#__PURE__*/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",
@@ -2006,7 +2006,7 @@ var Drawer = /*#__PURE__*/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,
@@ -2019,7 +2019,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,
@@ -2030,7 +2030,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,
@@ -2040,7 +2040,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) {
@@ -2062,7 +2062,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;
@@ -2086,7 +2086,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,
@@ -2095,7 +2095,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,
@@ -2131,9 +2131,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,
@@ -2163,20 +2163,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,
@@ -2193,7 +2193,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,
@@ -2205,7 +2205,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,
@@ -2216,9 +2216,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,
@@ -2257,7 +2257,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: {
@@ -2275,13 +2275,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
@@ -2325,7 +2325,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,
@@ -2339,7 +2339,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,
@@ -2352,7 +2352,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__*/forwardRef(function (_ref, ref) {
   var _ref2;
@@ -2394,10 +2394,10 @@ var SelectInputInset = /*#__PURE__*/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);
@@ -2452,12 +2452,12 @@ var SelectInputInset = /*#__PURE__*/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,
@@ -2471,7 +2471,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,
@@ -2484,7 +2484,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__*/forwardRef(function (_ref, ref) {
   var _ref2, _classNames;
@@ -2527,9 +2527,9 @@ var TextareaInputInset = /*#__PURE__*/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,
@@ -2538,7 +2538,7 @@ var TextareaInputInset = /*#__PURE__*/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,
@@ -2564,12 +2564,12 @@ var TextareaInputInset = /*#__PURE__*/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,
@@ -2582,7 +2582,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,
@@ -2594,7 +2594,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__*/forwardRef(function (_ref, ref) {
   var _ref2;
@@ -2638,10 +2638,10 @@ var TextInputInset = /*#__PURE__*/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);
@@ -2690,7 +2690,7 @@ var TextInputInset = /*#__PURE__*/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",
@@ -2700,16 +2700,16 @@ var TextInputInset = /*#__PURE__*/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,
@@ -2722,7 +2722,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,
@@ -2734,9 +2734,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,
@@ -2758,16 +2758,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,
@@ -2804,7 +2804,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,
@@ -2818,7 +2818,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,
@@ -2831,7 +2831,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,
@@ -2844,7 +2844,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,
@@ -2856,9 +2856,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,
@@ -2898,11 +2898,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,
@@ -2910,7 +2910,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,
@@ -2926,7 +2926,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
@@ -2942,7 +2942,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,
@@ -2955,7 +2955,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,
@@ -2967,7 +2967,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,
@@ -2989,7 +2989,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);
@@ -3017,7 +3017,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,
@@ -3029,7 +3029,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,
@@ -3040,7 +3040,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,
@@ -3062,7 +3062,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);
@@ -3091,7 +3091,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,
@@ -3102,7 +3102,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,
@@ -3112,7 +3112,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;
@@ -3148,12 +3148,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,
@@ -3168,7 +3168,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,
@@ -3203,7 +3203,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,
@@ -3213,7 +3213,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: getIn(touched, name) && getIn(errors, name),
     isChecked: value,
@@ -3222,7 +3222,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,
@@ -3238,7 +3238,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,
@@ -3254,7 +3254,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,
@@ -3282,14 +3282,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,
@@ -3300,7 +3300,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,
@@ -3312,7 +3312,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__*/forwardRef(function (_ref, ref) {
   var _classNames;
   var ariaLabel = _ref.ariaLabel,
@@ -3332,7 +3332,7 @@ var ModalBaseComponent = /*#__PURE__*/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 = useCallback(function () {
     setTimeout(function () {
       if (initialFocusRef && initialFocusRef.current) {
@@ -3341,10 +3341,10 @@ var ModalBaseComponent = /*#__PURE__*/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,
@@ -3547,6 +3547,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' ? useLayoutEffect : useEffect;
@@ -4654,5 +4688,5 @@ var useTheme = function useTheme() {
   return context;
 };
-export { Alert, Badge, Box, Button, Card, CardBaseComponent, Checkbox, CheckboxInput, DateInput, DatePicker, Details, DetailsBaseComponent, DetailsSummary, Drawer, FormControl, FormLabel, FormikCheckboxInput, FormikRadioGroup, FormikSelectInput, FormikSelectInputInset, FormikSelectInputNative, FormikTextInput, FormikTextInputInset, FormikTextareaInput, FormikTextareaInputInset, FormikTimePicker, FormikTimePickerNative, FormikToggle, Heading, Icon, Modal, ModalBaseComponent, Pagination, Popover, RadioGroup, ResponsiveContext, ResponsiveProvider, SelectInput, SelectInputInset, SelectInputNative, Spinner, Table, TextInput, TextInputInset, TextareaInput, TextareaInputInset, ThemeProvider, ThemeProviderContext, TimePicker, TimePickerNative, ToastContainer, Toggle, boxPropsKeys, createRectRef, toast, useBreakpoint, useIsomorphicLayoutEffect, useOpenClose, useTheme, useToasts, useWindowSize };
+export { Alert, Badge, Box, Button, Card, CardBaseComponent, Checkbox, CheckboxInput, DateInput, DatePicker, Details, DetailsBaseComponent, DetailsSummary, Drawer, FormControl, FormLabel, FormikCheckboxInput, FormikRadioGroup, FormikSelectInput, FormikSelectInputInset, FormikSelectInputNative, FormikTextInput, FormikTextInputInset, FormikTextareaInput, FormikTextareaInputInset, FormikTimePicker, FormikTimePickerNative, FormikToggle, Heading, Icon, Modal, ModalBaseComponent, Pagination, Popover, RadioGroup, RangeInput, ResponsiveContext, ResponsiveProvider, SelectInput, SelectInputInset, SelectInputNative, Spinner, Table, TextInput, TextInputInset, TextareaInput, TextareaInputInset, ThemeProvider, ThemeProviderContext, TimePicker, TimePickerNative, ToastContainer, Toggle, boxPropsKeys, createRectRef, toast, useBreakpoint, useIsomorphicLayoutEffect, useOpenClose, useTheme, useToasts, useWindowSize };
 //# sourceMappingURL=hyphen-components.esm.js.map