@hyphen/hyphen-components 2.20.0 → 2.22.0

package/dist/hyphen-components.esm.js

@@ -1,5 +1,6 @@
 'use client';
-import React, { forwardRef, Children, createElement, cloneElement, useRef, useState, useEffect, isValidElement, useCallback, useMemo, useLayoutEffect, createContext } from 'react';
+import * as React from 'react';
+import React__default, { forwardRef, Children, createElement, cloneElement, useRef, useState, useEffect, isValidElement, useCallback, useMemo, useLayoutEffect, createContext } from 'react';
 import classNames from 'classnames';
 import icons from '@hyphen/hyphen-design-tokens/build/assets/icons/react';
 import format from 'date-fns/format';
@@ -493,11 +494,11 @@ var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   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));
-  return IconComponent ? React.createElement(IconComponent, _extends({
+  return IconComponent ? React__default.createElement(IconComponent, _extends({
     className: iconClasses || null,
     ref: ref,
     "data-testid": "icon-testid--" + name
-  }, restProps)) : React.createElement(Box, {
+  }, restProps)) : React__default.createElement(Box, {
     fontWeight: "bold",
     background: "error",
     color: "white",
@@ -556,10 +557,10 @@ var Alert = function Alert(_ref) {
     onClose(event);
   };
   var renderAlertIcon = function renderAlertIcon() {
-    return React.createElement(Box, {
+    return React__default.createElement(Box, {
       fontSize: "md",
       className: styles$v["alert__icon__" + variant]
-    }, React.createElement(Icon, {
+    }, React__default.createElement(Icon, {
       name: ALERT_ICONS_MAP[variant].icon,
       "data-testid": "alert-icon-" + variant + "-test-id"
     }));
@@ -568,21 +569,21 @@ var Alert = function Alert(_ref) {
     var handleCloseKeyPress = function handleCloseKeyPress(event) {
       if (event.keyCode === 13) handleClose(event);
     };
-    return React.createElement(Box, {
+    return React__default.createElement(Box, {
       margin: "0 0 0 auto",
       color: "secondary",
       className: styles$v['close-icon']
-    }, React.createElement("button", {
+    }, React__default.createElement("button", {
       type: "button",
       onClick: handleClose,
       onKeyUp: handleCloseKeyPress
-    }, closeText || React.createElement(Icon, {
+    }, closeText || React__default.createElement(Icon, {
       name: "remove",
       "data-testid": "alert-close-icon-test-id"
     })));
   };
   var alertContainerClasses = classNames(styles$v["alert__" + variant], styles$v.alert, className);
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     alignItems: "flex-start",
     gap: "md",
     className: alertContainerClasses,
@@ -591,15 +592,15 @@ var Alert = function Alert(_ref) {
     radius: "md",
     role: "alert",
     fontSize: "sm"
-  }, restProps), hasIcon && renderAlertIcon(), React.createElement("div", null, render ? render() : React.createElement(Box, {
+  }, restProps), hasIcon && renderAlertIcon(), React__default.createElement("div", null, render ? render() : React__default.createElement(Box, {
     display: "block",
     childGap: message && title ? '2xs' : undefined
-  }, title && React.createElement(Box, {
+  }, title && React__default.createElement(Box, {
     as: "h4",
     fontSize: "sm",
     fontWeight: "semibold",
     className: styles$v['alert-heading']
-  }, title), message && (typeof message === 'string' ? React.createElement("p", null, message) : message))), isClosable && renderCloseIcon());
+  }, title), message && (typeof message === 'string' ? React__default.createElement("p", null, message) : message))), isClosable && renderCloseIcon());
 };
 
 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"};
@@ -620,7 +621,7 @@ var Badge = function Badge(_ref) {
     return styles$u[c];
   });
   var badgeClasses = classNames(styles$u.badge, className, responsiveClasses, (_classNames = {}, _classNames[styles$u[variant]] = variant, _classNames));
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     className: badgeClasses,
     display: "inline-block"
   }, restProps), message);
@@ -641,24 +642,24 @@ var Spinner = function Spinner(_ref) {
     if (size === 'xl') pixels = '30';
     return pixels;
   };
-  return React.createElement("span", {
+  return React__default.createElement("span", {
     className: classes
-  }, React.createElement("svg", {
+  }, React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: sizeInPixels(),
     height: sizeInPixels(),
     viewBox: "0 0 16 16",
     "data-testid": "spinner-testid"
-  }, React.createElement("g", {
+  }, React__default.createElement("g", {
     fill: "currentColor"
-  }, React.createElement("rect", {
+  }, React__default.createElement("rect", {
     fill: "currentColor",
     height: "2",
     rx: ".5",
     width: "4",
     x: "12",
     y: "7"
-  }), React.createElement("rect", {
+  }), React__default.createElement("rect", {
     fill: "currentColor",
     height: "4.001",
     rx: ".5",
@@ -667,7 +668,7 @@ var Spinner = function Spinner(_ref) {
     x: "11.243",
     y: "10.242",
     transform: "rotate(-44.975 12.243 12.243)"
-  }), React.createElement("rect", {
+  }), React__default.createElement("rect", {
     fill: "currentColor",
     height: "4",
     rx: ".5",
@@ -675,7 +676,7 @@ var Spinner = function Spinner(_ref) {
     opacity: ".4",
     x: "7",
     y: "12"
-  }), React.createElement("rect", {
+  }), React__default.createElement("rect", {
     fill: "currentColor",
     height: "1.999",
     rx: ".5",
@@ -684,14 +685,14 @@ var Spinner = function Spinner(_ref) {
     x: "1.757",
     y: "11.243",
     transform: "rotate(-45.03 3.757 12.242)"
-  }), React.createElement("rect", {
+  }), React__default.createElement("rect", {
     fill: "currentColor",
     height: "2",
     rx: ".5",
     width: "4",
     opacity: ".4",
     y: "7"
-  }), React.createElement("rect", {
+  }), React__default.createElement("rect", {
     fill: "currentColor",
     height: "4.001",
     rx: ".5",
@@ -700,14 +701,14 @@ var Spinner = function Spinner(_ref) {
     x: "2.758",
     y: "1.757",
     transform: "rotate(-44.975 3.757 3.757)"
-  }), React.createElement("rect", {
+  }), React__default.createElement("rect", {
     fill: "currentColor",
     height: "4",
     rx: ".5",
     width: "2",
     opacity: ".6",
     x: "7"
-  }), React.createElement("rect", {
+  }), React__default.createElement("rect", {
     fill: "currentColor",
     height: "1.999",
     rx: ".5",
@@ -806,34 +807,34 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var handleBlur = function handleBlur(event) {
     if (onBlur) onBlur(event);
   };
-  var buttonContent = iconPrefix || iconSuffix ? React.createElement(Box, {
+  var buttonContent = iconPrefix || iconSuffix ? React__default.createElement(Box, {
     display: "inline-flex",
     direction: "row",
     alignItems: "center",
     gap: "md"
-  }, isLoading && React.createElement(Spinner, {
+  }, isLoading && React__default.createElement(Spinner, {
     className: styles$s['spinner-wrapper']
-  }), iconPrefix && React.createElement(Icon, {
+  }), iconPrefix && React__default.createElement(Icon, {
     className: styles$s.label,
     name: iconPrefix,
     "aria-hidden": "true",
     focusable: "false",
     "data-testid": "prefixIcon",
     size: size === 'md' ? 'sm' : size
-  }), children && React.createElement("span", {
+  }), children && React__default.createElement("span", {
     className: styles$s.label
-  }, children), iconSuffix && React.createElement(Icon, {
+  }, children), iconSuffix && React__default.createElement(Icon, {
     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, {
+  })) : React__default.createElement(React__default.Fragment, null, isLoading && React__default.createElement(Spinner, {
     className: styles$s['spinner-wrapper']
   }), function () {
     if (children) {
-      return React.createElement("span", {
+      return React__default.createElement("span", {
         className: styles$s.label
       }, children);
     }
@@ -862,7 +863,7 @@ var CardFooter = function CardFooter(_ref) {
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? '2xl' : _ref$padding,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$E);
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     display: display,
     padding: padding,
     background: background,
@@ -918,12 +919,12 @@ var CardHeader = function CardHeader(_ref) {
     title = _ref$title === void 0 ? null : _ref$title,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   var renderTitle = function renderTitle() {
-    return typeof title === 'string' ? React.createElement(Heading, {
+    return typeof title === 'string' ? React__default.createElement(Heading, {
       size: "sm",
       as: "h4"
     }, title) : title;
   };
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     childGap: childGap,
     display: display,
     padding: padding,
@@ -959,30 +960,30 @@ var CardSection = function CardSection(_ref) {
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? undefined : _ref$title,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$B);
-  var renderTitle = typeof title === 'string' ? React.createElement(Box, {
+  var renderTitle = typeof title === 'string' ? React__default.createElement(Box, {
     className: "m-bottom-md"
-  }, React.createElement(Box, {
+  }, React__default.createElement(Box, {
     as: "h4",
     fontWeight: "bold",
     fontSize: "sm",
     color: "base"
   }, title)) : title;
   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({
+  return React__default.createElement(Box, _extends({
     background: background,
     borderColor: borderColor,
     borderWidth: borderWidth,
     className: sectionClasses,
     display: display,
     padding: padding
-  }, restProps), renderTitle, React.createElement(Box, {
+  }, restProps), renderTitle, React__default.createElement(Box, {
     gap: gap,
     childGap: childGap
   }, children));
 };
 
 var _excluded$A = ["children", "subdued", "overflow", "display", "width"];
-var CardBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var CardBaseComponent = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     subdued = _ref.subdued,
     _ref$overflow = _ref.overflow,
@@ -992,7 +993,7 @@ var CardBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100' : _ref$width,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$A);
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     background: subdued ? 'secondary' : 'primary',
     borderWidth: "sm",
     borderColor: "subtle",
@@ -1040,11 +1041,11 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
   }
   if (error) color = 'danger';
   if (isDisabled && error) color = 'danger-disabled';
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     className: className,
     display: "inline-block",
     color: color
-  }, restProps), React.createElement(Icon, {
+  }, restProps), React__default.createElement(Icon, {
     name: name
   }));
 };
@@ -1052,7 +1053,7 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
 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$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 Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref2;
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -1082,8 +1083,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? undefined : _ref$value,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$y);
-  var inputRef = React.useRef(null);
-  React.useEffect(function () {
+  var inputRef = React__default.useRef(null);
+  React__default.useEffect(function () {
     if (inputRef != null && inputRef.current) {
       inputRef.current.indeterminate = isIndeterminate;
     }
@@ -1121,19 +1122,19 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var iconClasses = classNames.apply(void 0, responsiveClasses.map(function (c) {
     return styles$p[c];
   }));
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     display: display,
     ref: ref,
     style: {
       position: 'relative'
     },
     className: containerClasses
-  }, restProps), React.createElement("input", _extends({}, inputProps, {
+  }, restProps), React__default.createElement("input", _extends({}, inputProps, {
     style: {
       position: 'absolute',
       opacity: '0'
     }
-  })), !isHidden && React.createElement(CheckboxIcon, {
+  })), !isHidden && React__default.createElement(CheckboxIcon, {
     isChecked: isChecked,
     isDisabled: isDisabled,
     isIndeterminate: isIndeterminate,
@@ -1149,7 +1150,7 @@ var InputValidationMessage = function InputValidationMessage(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size;
   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", {
+  return React__default.createElement("div", {
     className: classes
   }, children);
 };
@@ -1161,7 +1162,7 @@ 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, {
+  return React__default.createElement(Box, {
     ref: ref,
     className: classNames('hyphen-components__variables__form-control', styles$m['help-text'], className),
     display: "block",
@@ -1194,7 +1195,7 @@ var FormLabel = function FormLabel(_ref) {
     padding = _ref$padding === void 0 ? '0' : _ref$padding,
     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({
+  return React__default.createElement(Box, _extends({
     as: "label",
     id: inputId + "Label",
     className: labelClasses,
@@ -1202,7 +1203,7 @@ var FormLabel = function FormLabel(_ref) {
     margin: margin,
     padding: padding,
     htmlFor: inputId
-  }, restProps), children, isFieldRequired && requiredIndicator && React.createElement("span", null, requiredIndicator), helpText && React.createElement(HelpText, null, helpText));
+  }, restProps), children, isFieldRequired && requiredIndicator && React__default.createElement("span", null, requiredIndicator), helpText && React__default.createElement(HelpText, null, helpText));
 };
 
 var _excluded$w = ["id", "isChecked", "label", "onChange", "className", "error", "hideLabel", "helpText", "isDisabled", "isIndeterminate", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size"];
@@ -1282,14 +1283,14 @@ var CheckboxInput = function CheckboxInput(_ref2) {
     requiredIndicator: requiredIndicator,
     className: classNames.apply(void 0, cssShorthandToClasses('m', computedResponsiveSize(size)))
   };
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     className: className
-  }, restProps), React.createElement(Box, {
+  }, restProps), React__default.createElement(Box, {
     alignItems: "flex-start",
     direction: "row"
-  }, React.createElement(Checkbox, _extends({}, checkboxProps, {
+  }, React__default.createElement(Checkbox, _extends({}, checkboxProps, {
     labelledby: id + "Label"
-  })), label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label)), error && error !== true && React.createElement(InputValidationMessage, null, error));
+  })), label && !hideLabel && React__default.createElement(FormLabel, _extends({}, labelProps), label)), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 };
 
 var styles$l = {};
@@ -1328,7 +1329,7 @@ var DatePicker = function DatePicker(_ref) {
     } : _ref$formatWeekDay,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var datePickerClasses = classNames(styles$l['react-datepicker'], className);
-  return React.createElement(ReactDatePicker, _extends({
+  return React__default.createElement(ReactDatePicker, _extends({
     inline: true,
     calendarClassName: datePickerClasses,
     formatWeekDay: formatWeekDay,
@@ -1347,7 +1348,7 @@ var DatePicker = function DatePicker(_ref) {
 };
 
 var _excluded$u = ["label", "hideLabel", "children", "error", "id", "isRequired", "helpText", "isDisabled", "requiredIndicator", "width"];
-var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var FormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var label = _ref.label,
     hideLabel = _ref.hideLabel,
     children = _ref.children,
@@ -1368,10 +1369,10 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isFieldRequired: isRequired,
     requiredIndicator: requiredIndicator
   };
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     width: width,
     ref: ref
-  }, restProps), label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), children, error && error !== true && React.createElement(InputValidationMessage, null, error));
+  }, restProps), label && !hideLabel && React__default.createElement(FormLabel, _extends({}, labelProps), label), children, error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 });
 
 // eslint-disable-next-line import/prefer-default-export
@@ -1441,14 +1442,14 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var handleKeyPress = function handleKeyPress(event) {
       if (event.keyCode === 13 && onClear) onClear(event);
     };
-    return React.createElement("button", {
+    return React__default.createElement("button", {
       type: "button",
       onClick: onClear,
       onKeyUp: handleKeyPress,
       className: clearBtnClasses,
       "data-testid": "text-input-clear-button",
       "aria-label": "clear input"
-    }, React.createElement(Icon, {
+    }, React__default.createElement(Icon, {
       name: "remove",
       className: "display-block"
     }));
@@ -1478,7 +1479,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       'p-h-0': !suffix && !prefix
     })
   });
-  return React.createElement(FormControl, _extends({
+  return React__default.createElement(FormControl, _extends({
     helpText: helpText,
     error: error,
     label: label,
@@ -1488,17 +1489,17 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isRequired: isRequired,
     requiredIndicator: requiredIndicator,
     ref: ref
-  }, restProps), React.createElement(Box, {
+  }, restProps), React__default.createElement(Box, {
     direction: "row",
     overflow: "hidden",
     className: inputWrapperClasses
-  }, prefix && React.createElement(Box, {
+  }, prefix && React__default.createElement(Box, {
     color: "secondary",
     background: "secondary",
     className: classNames(styles$k.prefix, 'ws-nowrap')
-  }, prefix), React.createElement(Box, _extends({
+  }, prefix), React__default.createElement(Box, _extends({
     as: "input"
-  }, computedInputProps)), !!onClear && !!value && renderClearIcon(), suffix && React.createElement(Box, {
+  }, computedInputProps)), !!onClear && !!value && renderClearIcon(), suffix && React__default.createElement(Box, {
     color: "secondary",
     background: "secondary",
     className: classNames(styles$k.suffix, 'ws-nowrap')
@@ -1668,28 +1669,28 @@ var Popover = function Popover(_ref) {
   });
   var renderPopperContent = function renderPopperContent() {
     var renderPopperBox = function renderPopperBox() {
-      return React.createElement(Box, _extends({
+      return React__default.createElement(Box, _extends({
         ref: popperRef,
         className: classNames(styles$j.popover, className),
         style: popperStyles.popper,
         role: "dialog",
         "aria-label": "Popover",
         "aria-hidden": !isOpen
-      }, containerBoxProps, attributes.popper, restProps), React.createElement("div", {
+      }, containerBoxProps, attributes.popper, restProps), React__default.createElement("div", {
         ref: setArrowElement,
         style: popperStyles.arrow,
         className: arrowClasses,
         "data-popper-arrow": true
       }), content);
     };
-    return trapFocus ? React.createElement(FocusTrap, {
+    return trapFocus ? React__default.createElement(FocusTrap, {
       active: isOpen,
       focusTrapOptions: {
         clickOutsideDeactivates: true
       }
     }, renderPopperBox()) : renderPopperBox();
   };
-  var childrenWithRef = React.Children.map(children, function (child) {
+  var childrenWithRef = React__default.Children.map(children, function (child) {
     var childProps = {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref: triggerRef,
@@ -1710,7 +1711,7 @@ var Popover = function Popover(_ref) {
     }
     return child;
   });
-  return React.createElement(React.Fragment, null, childrenWithRef, isOpen && (
+  return React__default.createElement(React__default.Fragment, null, childrenWithRef, isOpen && (
   // portalTarget should always be defined if withPortal is true, but better safe than sorry here!
   withPortal && portalTarget ? createPortal(renderPopperContent(), portalTarget) : renderPopperContent()));
 };
@@ -1782,19 +1783,19 @@ var DateInput = function DateInput(_ref) {
     handleTogglePopover(false);
   };
   var renderDatePicker = function renderDatePicker() {
-    return React.createElement(DatePicker, _extends({}, mergedDatePickerProps, {
+    return React__default.createElement(DatePicker, _extends({}, mergedDatePickerProps, {
       onChange: handleDatePickerChange,
       selected: mergedDatePickerProps.selected,
       selectsRange: mergedDatePickerProps.selectsRange
     }));
   };
-  return React.createElement(Popover, _extends({}, mergedPopoverProps, {
+  return React__default.createElement(Popover, _extends({}, mergedPopoverProps, {
     isOpen: isPopoverOpen,
     content: renderDatePicker(),
     withPortal: true,
     portalTarget: document.body,
     onClickOutside: handleOnClickOutside
-  }), React.createElement(TextInput, _extends({}, mergedTextInputProps, {
+  }), React__default.createElement(TextInput, _extends({}, mergedTextInputProps, {
     id: mergedTextInputProps.id,
     name: mergedTextInputProps.name,
     label: mergedTextInputProps.label,
@@ -1844,7 +1845,7 @@ var DetailsSummary = function DetailsSummary(_ref) {
       restProps.onKeyDown(event);
     }
   };
-  return React.createElement(Box, _extends({}, restProps, {
+  return React__default.createElement(Box, _extends({}, restProps, {
     as: "summary",
     display: display,
     role: "button",
@@ -1858,7 +1859,7 @@ var DetailsSummary = function DetailsSummary(_ref) {
 var styles$i = {"details-reset":"Details-module_details-reset__HWtSD"};
 
 var _excluded$p = ["children", "className", "display", "isOpen"];
-var DetailsBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var DetailsBaseComponent = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$display = _ref.display,
@@ -1866,7 +1867,7 @@ var DetailsBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isOpen = _ref.isOpen,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   var detailsClasses = classNames(className, styles$i['details-reset'], styles$i.details);
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     as: "details",
     className: detailsClasses,
     display: display,
@@ -1932,11 +1933,11 @@ var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   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, {
+      return React__default.createElement(Box, {
         alignItems: "flex-end",
         justifyContent: "center",
         padding: "md lg"
-      }, React.createElement(Button, {
+      }, React__default.createElement(Button, {
         variant: "tertiary",
         onClick: onDismiss,
         "aria-label": "close",
@@ -1945,7 +1946,7 @@ var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }));
     }
     if (title) {
-      return React.createElement(Box, {
+      return React__default.createElement(Box, {
         direction: "row",
         justifyContent: "space-between",
         alignItems: "center",
@@ -1953,10 +1954,10 @@ var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
           base: '2xl',
           tablet: '4xl'
         }
-      }, React.createElement(Box, {
+      }, React__default.createElement(Box, {
         className: styles$h.title,
         fontWeight: "bold"
-      }, title), onDismiss && React.createElement(Button, {
+      }, title), onDismiss && React__default.createElement(Button, {
         variant: "tertiary",
         onClick: onDismiss,
         "aria-label": "close",
@@ -1966,24 +1967,24 @@ var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
     return null;
   };
-  var content = title || closeButton ? React.createElement(Box, {
+  var content = title || closeButton ? React__default.createElement(Box, {
     flex: "auto",
     overflow: "auto"
   }, children) : children;
   var parentElement = containerRef != null && containerRef.current ? containerRef.current : document.body;
   var isDisabledFocusLock = hideOverlay || dangerouslyBypassFocusLock;
   var isDisabledRemoveScroll = hideOverlay || dangerouslyBypassScrollLock;
-  return React.createElement(FocusLock, {
+  return React__default.createElement(FocusLock, {
     autoFocus: true,
     returnFocus: true,
     disabled: isDisabledFocusLock || !isOpen,
     onActivation: activateFocusLock
-  }, React.createElement(RemoveScroll, {
+  }, React__default.createElement(RemoveScroll, {
     allowPinchZoom: allowPinchZoom,
     enabled: !isDisabledRemoveScroll && isOpen
-  }, React.createElement(Box, {
+  }, React__default.createElement(Box, {
     ref: ref
-  }, React.createElement(ReactModal, {
+  }, React__default.createElement(ReactModal, {
     isOpen: isOpen,
     overlayClassName: overlayClassnames,
     className: contentClassnames,
@@ -1996,7 +1997,7 @@ var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     parentSelector: function parentSelector() {
       return parentElement;
     }
-  }, React.createElement(Box, {
+  }, React__default.createElement(Box, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     height: "100%"
@@ -2017,7 +2018,7 @@ var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
     id = _ref.id,
     label = _ref.label,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
-  return React.createElement(CheckboxInput, _extends({}, props, {
+  return React__default.createElement(CheckboxInput, _extends({}, props, {
     id: id,
     label: label,
     error: getIn(touched, name) && getIn(errors, name),
@@ -2051,9 +2052,9 @@ var RadioInputIcon = function RadioInputIcon(_ref) {
   }
   if (error) color = 'danger';
   if (isDisabled && error) color = 'danger-disabled';
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     className: className
-  }, restProps), React.createElement(Icon, {
+  }, restProps), React__default.createElement(Icon, {
     color: color,
     name: name
   }));
@@ -2061,7 +2062,7 @@ var RadioInputIcon = function RadioInputIcon(_ref) {
 
 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 RadioInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _classNames;
   var name = _ref.name,
     onChange = _ref.onChange,
@@ -2093,14 +2094,14 @@ var RadioInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     justifyContent: 'center'
   };
   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, {
+  return React__default.createElement(React__default.Fragment, null, option && React__default.createElement(Box, {
     className: containerClasses,
     key: option.id,
     direction: "row",
     alignItems: "center",
     ref: ref,
     position: "relative"
-  }, React.createElement(Box, {
+  }, React__default.createElement(Box, {
     "aria-required": isRequired,
     as: "input",
     id: option.id,
@@ -2118,14 +2119,14 @@ var RadioInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       opacity: '0'
     },
     margin: isHidden ? '0' : '0 xs 0 2xs'
-  }), !isHidden && React.createElement(RadioInputIcon, {
+  }), !isHidden && React__default.createElement(RadioInputIcon, {
     isSelected: isSelected,
     isDisabled: isDisabled,
     margin: isHidden ? '0' : '0 xs 0 2xs',
     className: responsiveClasses,
     background: isDisabled && !isSelected ? 'secondary' : 'primary',
     radius: "circle"
-  }), option.label && React.createElement(FormLabel, _extends({}, labelProps), option.label)));
+  }), option.label && React__default.createElement(FormLabel, _extends({}, labelProps), option.label)));
 });
 
 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-"};
@@ -2162,20 +2163,20 @@ var RadioGroup = function RadioGroup(_ref) {
     value = _ref$value === void 0 ? undefined : _ref$value,
     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({
+  return React__default.createElement("div", _extends({
     className: classNames(styles$f['radio-group'], groupClasses)
-  }, restProps), React.createElement("fieldset", {
+  }, restProps), React__default.createElement("fieldset", {
     className: styles$f.fieldset
-  }, (title || description) && React.createElement("legend", {
+  }, (title || description) && React__default.createElement("legend", {
     className: styles$f.legend
-  }, title, isRequired && React.createElement("span", null, requiredIndicator), description && React.createElement("div", {
+  }, title, isRequired && React__default.createElement("span", null, requiredIndicator), description && React__default.createElement("div", {
     className: styles$f.description
-  }, description)), React.createElement(Box, {
+  }, description)), React__default.createElement(Box, {
     direction: direction,
     gap: "sm",
     className: styles$f.options
   }, options && options.map(function (option) {
-    return React.createElement(RadioInput, {
+    return React__default.createElement(RadioInput, {
       key: option.id,
       name: name,
       onChange: onChange,
@@ -2187,7 +2188,7 @@ var RadioGroup = function RadioGroup(_ref) {
       onFocus: onFocus,
       size: size
     });
-  }))), error && typeof error !== 'boolean' && React.createElement(InputValidationMessage, null, error));
+  }))), error && typeof error !== 'boolean' && React__default.createElement(InputValidationMessage, null, error));
 };
 
 var _excluded$l = ["field", "form", "onChange", "options"];
@@ -2203,7 +2204,7 @@ var FormikRadioGroup = function FormikRadioGroup(_ref) {
     onChange = _ref.onChange,
     options = _ref.options,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-  return React.createElement(RadioGroup, _extends({}, props, {
+  return React__default.createElement(RadioGroup, _extends({}, props, {
     options: options,
     name: name,
     onBlur: onBlur,
@@ -2288,7 +2289,7 @@ function SelectInput(props) {
     requiredIndicator: requiredIndicator
   };
   var ClearIndicator = function ClearIndicator(props) {
-    return React.createElement(components.ClearIndicator, _extends({}, props), React.createElement(Icon, {
+    return React__default.createElement(components.ClearIndicator, _extends({}, props), React__default.createElement(Icon, {
       name: "remove"
     }));
   };
@@ -2298,10 +2299,10 @@ function SelectInput(props) {
   } : {
     options: options
   };
-  return React.createElement(Box, {
+  return React__default.createElement(Box, {
     width: "100%",
     className: wrapperClasses
-  }, label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(Component, _extends({}, restProps, selectOptions, {
+  }, label && !hideLabel && React__default.createElement(FormLabel, _extends({}, labelProps), label), React__default.createElement(Component, _extends({}, restProps, selectOptions, {
     inputId: id,
     "aria-label": label,
     components: {
@@ -2328,7 +2329,7 @@ function SelectInput(props) {
       }
     },
     value: value
-  })), error && typeof error !== 'boolean' && React.createElement(InputValidationMessage, null, error));
+  })), error && typeof error !== 'boolean' && React__default.createElement(InputValidationMessage, null, error));
 }
 
 var _excluded$j = ["field", "form", "onChange", "id", "label", "options", "error"];
@@ -2357,7 +2358,7 @@ var FormikSelectInput = function FormikSelectInput(_ref) {
       return err == null ? void 0 : err.label;
     })) == null ? void 0 : _error$find.label;
   }
-  return React.createElement(SelectInput, _extends({
+  return React__default.createElement(SelectInput, _extends({
     id: id,
     label: label,
     options: options,
@@ -2419,14 +2420,14 @@ var SelectInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var handleKeyPress = function handleKeyPress(event) {
       if (event.keyCode === 13 && onClear) onClear(event);
     };
-    return React.createElement("button", {
+    return React__default.createElement("button", {
       type: "button",
       onClick: onClear,
       onKeyUp: handleKeyPress,
       className: clearBtnClasses,
       "data-testid": "text-input-clear-button",
       "aria-label": "clear input"
-    }, React.createElement(Icon, {
+    }, React__default.createElement(Icon, {
       name: "remove",
       className: "display-block"
     }));
@@ -2449,17 +2450,17 @@ var SelectInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     value: value != null ? value : '',
     className: classNames(inputProps.className)
   });
-  return React.createElement("div", {
+  return React__default.createElement("div", {
     ref: ref
-  }, React.createElement(Box, {
+  }, React__default.createElement(Box, {
     direction: "row",
     flex: "auto",
     position: "relative",
     className: inputWrapperClasses
-  }, React.createElement(Box, _extends({
+  }, React__default.createElement(Box, _extends({
     as: "select"
   }, computedInputProps), optionsWithPlaceholder.map(function (option) {
-    return React.createElement(Box, {
+    return React__default.createElement(Box, {
       as: "option",
       key: option.value,
       value: option.value,
@@ -2467,11 +2468,11 @@ var SelectInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
       hidden: option.value === '',
       color: option.value === '' ? 'secondary' : 'base'
     }, option.label);
-  })), !!onClear && !!value && renderClearIcon(), React.createElement("label", {
+  })), !!onClear && !!value && renderClearIcon(), React__default.createElement("label", {
     htmlFor: id,
     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));
+  }, label, isRequired && requiredIndicator && React__default.createElement("span", null, requiredIndicator))), helpText && React__default.createElement(HelpText, null, helpText), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 });
 
 var _excluded$i = ["field", "form", "onChange", "id", "label", "options"];
@@ -2489,7 +2490,7 @@ var FormikSelectInputInset = function FormikSelectInputInset(_ref) {
     label = _ref.label,
     options = _ref.options,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
-  return React.createElement(SelectInputInset, _extends({}, props, {
+  return React__default.createElement(SelectInputInset, _extends({}, props, {
     id: id,
     label: label,
     options: options,
@@ -2569,21 +2570,21 @@ var TextareaInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     type: type,
     value: value
   });
-  return React.createElement(Box, {
+  return React__default.createElement(Box, {
     width: "100",
     ref: ref,
     className: className
-  }, React.createElement(Box, {
+  }, React__default.createElement(Box, {
     display: "block",
     position: "relative",
     className: inputWrapperClasses
-  }, React.createElement(Box, _extends({
+  }, React__default.createElement(Box, _extends({
     as: "textarea"
-  }, computedInputProps)), React.createElement("label", {
+  }, computedInputProps)), React__default.createElement("label", {
     htmlFor: id,
     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));
+  }, label, isRequired && requiredIndicator && React__default.createElement("span", null, requiredIndicator))), helpText && React__default.createElement(HelpText, null, helpText), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 });
 
 var _excluded$h = ["field", "form", "onChange", "id", "label"];
@@ -2600,7 +2601,7 @@ var FormikTextareaInputInset = function FormikTextareaInputInset(_ref) {
     id = _ref.id,
     label = _ref.label,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
-  return React.createElement(TextareaInputInset, _extends({}, props, {
+  return React__default.createElement(TextareaInputInset, _extends({}, props, {
     id: id,
     label: label,
     name: name,
@@ -2663,14 +2664,14 @@ var TextInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var handleKeyPress = function handleKeyPress(event) {
       if (event.keyCode === 13 && onClear) onClear(event);
     };
-    return React.createElement("button", {
+    return React__default.createElement("button", {
       type: "button",
       onClick: onClear,
       onKeyUp: handleKeyPress,
       className: clearBtnClasses,
       "data-testid": "text-input-clear-button",
       "aria-label": "clear input"
-    }, React.createElement(Icon, {
+    }, React__default.createElement(Icon, {
       name: "remove",
       className: "display-block"
     }));
@@ -2696,34 +2697,34 @@ var TextInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     value: value,
     className: classNames(inputProps.className)
   });
-  return React.createElement(Box, {
+  return React__default.createElement(Box, {
     width: "100",
     ref: ref
-  }, React.createElement(Box, {
+  }, React__default.createElement(Box, {
     direction: "row",
     className: inputWrapperClasses
-  }, prefix && React.createElement(Box, {
+  }, prefix && React__default.createElement(Box, {
     color: "base",
     alignItems: "center",
     justifyContent: "center",
     background: "secondary",
     className: classNames(styles$b.prefix, 'ws-nowrap')
-  }, prefix), React.createElement(Box, {
+  }, prefix), React__default.createElement(Box, {
     direction: "row",
     position: "relative",
     className: "label-input-wrapper",
     flex: "auto"
-  }, React.createElement(Box, _extends({
+  }, React__default.createElement(Box, _extends({
     as: "input"
-  }, computedInputProps)), !!onClear && !!value && renderClearIcon(), React.createElement("label", {
+  }, computedInputProps)), !!onClear && !!value && renderClearIcon(), React__default.createElement("label", {
     htmlFor: id,
     className: styles$b['text-input-label'],
     id: id + "Label"
-  }, label, isRequired && requiredIndicator && React.createElement("span", null, requiredIndicator))), suffix && React.createElement(Box, {
+  }, label, isRequired && requiredIndicator && React__default.createElement("span", null, requiredIndicator))), suffix && React__default.createElement(Box, {
     color: "base",
     background: "secondary",
     className: classNames(styles$b.suffix, 'ws-nowrap')
-  }, suffix)), helpText && React.createElement(HelpText, null, helpText), error && error !== true && React.createElement(InputValidationMessage, null, error));
+  }, suffix)), helpText && React__default.createElement(HelpText, null, helpText), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 });
 
 var _excluded$g = ["field", "form", "onChange", "id", "label"];
@@ -2740,7 +2741,7 @@ var FormikTextInputInset = function FormikTextInputInset(_ref) {
     id = _ref.id,
     label = _ref.label,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
-  return React.createElement(TextInputInset, _extends({}, props, {
+  return React__default.createElement(TextInputInset, _extends({}, props, {
     id: id,
     label: label,
     name: name,
@@ -2785,7 +2786,7 @@ var SelectInputNative = function SelectInputNative(_ref) {
   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({
+  return React__default.createElement(FormControl, _extends({
     label: label,
     hideLabel: hideLabel,
     id: id,
@@ -2794,9 +2795,9 @@ var SelectInputNative = function SelectInputNative(_ref) {
     isDisabled: isDisabled,
     isRequired: isRequired,
     requiredIndicator: requiredIndicator
-  }, restProps), React.createElement(Box, {
+  }, restProps), React__default.createElement(Box, {
     className: selectWrapperClasses
-  }, React.createElement(Box, {
+  }, React__default.createElement(Box, {
     as: "select",
     "aria-label": label,
     "aria-labelledby": label && !hideLabel ? id + "Label" : undefined,
@@ -2810,7 +2811,7 @@ var SelectInputNative = function SelectInputNative(_ref) {
     id: id,
     required: isRequired
   }, optionsWithPlaceholder.map(function (option) {
-    return React.createElement(Box, {
+    return React__default.createElement(Box, {
       as: "option",
       key: option.value,
       value: option.value,
@@ -2836,7 +2837,7 @@ var FormikSelectInputNative = function FormikSelectInputNative(_ref) {
     id = _ref.id,
     label = _ref.label,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
-  return React.createElement(SelectInputNative, _extends({}, props, {
+  return React__default.createElement(SelectInputNative, _extends({}, props, {
     options: options,
     id: id,
     label: label,
@@ -2862,7 +2863,7 @@ var FormikTextInput = function FormikTextInput(_ref) {
     id = _ref.id,
     label = _ref.label,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-  return React.createElement(TextInput, _extends({}, props, {
+  return React__default.createElement(TextInput, _extends({}, props, {
     id: id,
     label: label,
     name: name,
@@ -2948,15 +2949,15 @@ var TextareaInput = function TextareaInput(_ref) {
     isFieldRequired: isRequired,
     requiredIndicator: requiredIndicator
   };
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     width: "100%",
     className: className
-  }, restProps), label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(Box, {
+  }, restProps), label && !hideLabel && React__default.createElement(FormLabel, _extends({}, labelProps), label), React__default.createElement(Box, {
     display: "block",
     className: inputWrapperClasses
-  }, React.createElement(Box, _extends({
+  }, React__default.createElement(Box, _extends({
     as: "textarea"
-  }, inputProps))), error && error !== true && React.createElement(InputValidationMessage, null, error));
+  }, inputProps))), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 };
 
 var _excluded$b = ["field", "form", "onChange", "id", "label"];
@@ -2973,7 +2974,7 @@ var FormikTextareaInput = function FormikTextareaInput(_ref) {
     id = _ref.id,
     label = _ref.label,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-  return React.createElement(TextareaInput, _extends({}, props, {
+  return React__default.createElement(TextareaInput, _extends({}, props, {
     id: id,
     label: label,
     name: name,
@@ -3023,7 +3024,7 @@ var TimePicker = function TimePicker(_ref) {
     }
     return timeOptions;
   };
-  return React.createElement(SelectInput, _extends({}, restProps, {
+  return React__default.createElement(SelectInput, _extends({}, restProps, {
     id: id,
     name: name,
     label: label,
@@ -3047,7 +3048,7 @@ var FormikTimePicker = function FormikTimePicker(_ref) {
     options = _ref.options,
     onChange = _ref.onChange,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-  return React.createElement(TimePicker, _extends({}, props, {
+  return React__default.createElement(TimePicker, _extends({}, props, {
     name: name,
     onBlur: onBlur,
     onChange: onChange != null ? onChange : formikOnChange,
@@ -3097,7 +3098,7 @@ var TimePickerNative = function TimePickerNative(_ref) {
     return timeOptions;
   };
   var options = generateTimes();
-  return React.createElement(SelectInputNative, _extends({}, restProps, {
+  return React__default.createElement(SelectInputNative, _extends({}, restProps, {
     id: id,
     name: name,
     label: label,
@@ -3120,7 +3121,7 @@ var FormikTimePickerNative = function FormikTimePickerNative(_ref) {
     errors = _ref$form.errors,
     onChange = _ref.onChange,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  return React.createElement(TimePickerNative, _extends({}, props, {
+  return React__default.createElement(TimePickerNative, _extends({}, props, {
     name: name,
     onBlur: onBlur,
     onChange: onChange != null ? onChange : formikOnChange,
@@ -3197,27 +3198,27 @@ var Toggle = function Toggle(_ref) {
     isFieldRequired: isRequired,
     requiredIndicator: requiredIndicator
   };
-  return React.createElement(Box, {
+  return React__default.createElement(Box, {
     className: className
-  }, React.createElement(Box, {
+  }, React__default.createElement(Box, {
     className: wrapperClasses
-  }, React.createElement(FormLabel, _extends({}, labelProps), React.createElement("input", _extends({}, inputProps)), React.createElement("span", {
+  }, React__default.createElement(FormLabel, _extends({}, labelProps), React__default.createElement("input", _extends({}, inputProps)), React__default.createElement("span", {
     "aria-hidden": "true",
     className: trackClasses,
     "data-testid": "toggleTrack"
-  }, React.createElement("span", {
+  }, React__default.createElement("span", {
     className: thumbClasses,
     "data-testid": "toggleThumb"
-  })), !hideLabel && React.createElement(Box, {
+  })), !hideLabel && React__default.createElement(Box, {
     gap: "2xs",
     className: helpText && (size === 'md' || size === 'lg') ? 'm-top-2xs' : ''
-  }, label && React.createElement("div", null, label), helpText && React.createElement(Box, {
+  }, label && React__default.createElement("div", null, label), helpText && React__default.createElement(Box, {
     as: "p",
     display: "block",
     fontSize: "sm",
     fontWeight: "normal",
     color: "secondary"
-  }, helpText)))), error && error !== true && React.createElement(InputValidationMessage, null, error));
+  }, helpText)))), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 };
 
 var _excluded$6 = ["field", "form"];
@@ -3231,7 +3232,7 @@ var FormikToggle = function FormikToggle(_ref) {
     touched = _ref$form.touched,
     errors = _ref$form.errors,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  return React.createElement(Toggle, _extends({
+  return React__default.createElement(Toggle, _extends({
     error: getIn(touched, name) && getIn(errors, name),
     isChecked: value,
     onBlur: onBlur,
@@ -3253,7 +3254,7 @@ var ModalFooter = function ModalFooter(_ref) {
     gap = _ref$gap === void 0 ? 'md' : _ref$gap,
     style = _ref.style,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     padding: padding,
     direction: direction,
     alignItems: alignItems,
@@ -3271,7 +3272,7 @@ var ModalHeader = function ModalHeader(_ref) {
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? undefined : _ref$title;
   var justifyContentValue = title === undefined && onDismiss ? 'flex-end' : 'space-between';
-  return React.createElement(Box, {
+  return React__default.createElement(Box, {
     direction: "row",
     alignItems: "center",
     justifyContent: justifyContentValue,
@@ -3279,14 +3280,14 @@ var ModalHeader = function ModalHeader(_ref) {
     style: {
       flexShrink: 0
     }
-  }, title && React.createElement(Box, {
+  }, title && React__default.createElement(Box, {
     as: "h4",
     fontSize: {
       base: 'md',
       tablet: 'lg'
     },
     id: id
-  }, title), onDismiss && React.createElement(Button, {
+  }, title), onDismiss && React__default.createElement(Button, {
     "aria-label": "close",
     variant: "tertiary",
     onClick: onDismiss,
@@ -3305,7 +3306,7 @@ var ModalBody = function ModalBody(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '100' : _ref$height,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     flex: flex,
     overflow: overflow,
     height: height,
@@ -3352,18 +3353,18 @@ var ModalBaseComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var contentClassnames = classNames(styles$7['modal-content'], className, maxWidthCss.classes, (_classNames = {}, _classNames["overflow-" + overflow] = overflow, _classNames));
   if (!isOpen) return null;
   var parentElement = containerRef != null && containerRef.current ? containerRef.current : undefined;
-  return React.createElement(FocusLock, {
+  return React__default.createElement(FocusLock, {
     autoFocus: true,
     returnFocus: true,
     disabled: !isOpen,
     onActivation: activateFocusLock,
     crossFrame: true
-  }, React.createElement(RemoveScroll, {
+  }, React__default.createElement(RemoveScroll, {
     allowPinchZoom: allowPinchZoom,
     enabled: isOpen
-  }, React.createElement(Box, {
+  }, React__default.createElement(Box, {
     ref: ref
-  }, React.createElement(ReactModal, _extends({
+  }, React__default.createElement(ReactModal, _extends({
     isOpen: isOpen,
     overlayClassName: overlayClassnames,
     className: contentClassnames,
@@ -3375,7 +3376,7 @@ var ModalBaseComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: {
       content: _extends({}, maxWidthCss.styles)
     }
-  }, restProps), React.createElement(Box, {
+  }, restProps), React__default.createElement(Box, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     height: "100",
@@ -3495,13 +3496,13 @@ var Pagination = function Pagination(_ref) {
     }
     return "Showing " + activeListRange.first + "-" + activeListRange.last + " of " + totalItemsCount;
   }, [activeListRange, totalItemsCount]);
-  return React.createElement(Box, {
+  return React__default.createElement(Box, {
     as: "nav",
     direction: "row",
     alignItems: "center",
     justifyContent: "space-between",
     className: paginationClassNames
-  }, React.createElement(Box, {
+  }, React__default.createElement(Box, {
     direction: "row",
     justifyContent: {
       base: 'space-between'
@@ -3511,20 +3512,20 @@ var Pagination = function Pagination(_ref) {
       tablet: 'none'
     },
     gap: isCompact ? 'xs' : 'sm'
-  }, React.createElement(Button, {
+  }, React__default.createElement(Button, {
     variant: "secondary",
     size: isCompact ? 'sm' : 'md',
     isDisabled: validActivePage === 1,
     onClick: function onClick() {
       return onChange(validActivePage - 1);
     }
-  }, prevPageText), arePagesVisible && React.createElement(Box, {
+  }, prevPageText), arePagesVisible && React__default.createElement(Box, {
     direction: "row",
     gap: "2xs"
   }, pages.map(function (_ref2, index) {
     var pageNumber = _ref2.pageNumber,
       isPage = _ref2.isPage;
-    return isPage ? React.createElement(Button, {
+    return isPage ? React__default.createElement(Button, {
       key: pageNumber,
       onClick: function onClick() {
         return onChange(pageNumber);
@@ -3535,7 +3536,7 @@ var Pagination = function Pagination(_ref) {
         minWidth: isCompact ? '33px' : '42px'
       },
       className: className
-    }, pageNumber) : React.createElement(Box, {
+    }, pageNumber) : React__default.createElement(Box, {
       key: "ellipsis-" + index,
       style: {
         display: 'flexk',
@@ -3544,14 +3545,14 @@ var Pagination = function Pagination(_ref) {
         alignItems: 'center'
       }
     }, "...");
-  })), React.createElement(Button, {
+  })), React__default.createElement(Button, {
     variant: "secondary",
     size: isCompact ? 'sm' : 'md',
     isDisabled: validActivePage === pageTotal,
     onClick: function onClick() {
       return onChange(validActivePage + 1);
     }
-  }, nextPageText)), React.createElement(Box, {
+  }, nextPageText)), React__default.createElement(Box, {
     as: "p",
     display: {
       base: 'none',
@@ -3577,7 +3578,7 @@ var RangeInput = function RangeInput(_ref) {
     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, {
+  return React__default.createElement("input", _extends({}, restProps, {
     id: id,
     type: "range",
     min: "0",
@@ -3643,7 +3644,7 @@ var ResponsiveProvider = function ResponsiveProvider(_ref) {
       };
     }
   }, [throttle]);
-  return React.createElement(ResponsiveContext.Provider, {
+  return React__default.createElement(ResponsiveContext.Provider, {
     value: {
       innerWidth: innerWidth,
       innerHeight: innerHeight,
@@ -3684,7 +3685,7 @@ var TableBodyCell = function TableBodyCell(_ref) {
     width = _ref$width === void 0 ? undefined : _ref$width;
   var columnIsSticky = sticky === 'left' || sticky === 'right';
   var tableCellClasses = classNames(styles$2['table-cell'], (_classNames = {}, _classNames[styles$2.truncated] = truncateOverflow, _classNames[styles$2.compact] = isCompact, _classNames[styles$2.borderless] = isBorderless, _classNames[styles$2['sticky-column']] = columnIsSticky, _classNames[styles$2['sticky-column-left']] = sticky === 'left', _classNames[styles$2['sticky-column-right']] = sticky === 'right', _classNames[styles$2['align-right']] = align === 'right', _classNames[styles$2['align-center']] = align === 'center', _classNames), className);
-  return React.createElement(Box, {
+  return React__default.createElement(Box, {
     as: columnIsSticky ? 'th' : 'td',
     className: tableCellClasses,
     display: "table-cell",
@@ -3736,18 +3737,18 @@ var TableHeaderCell = function TableHeaderCell(_ref) {
   var renderIcon = function renderIcon() {
     var renderArrows = function renderArrows() {
       if (getSortDirection() === 'ascending') {
-        return React.createElement(Icon, {
+        return React__default.createElement(Icon, {
           name: "caret-sm-up",
           "data-testid": "tableHeaderCellSortAsc-testid"
         });
       }
       if (getSortDirection() === 'descending') {
-        return React.createElement(Icon, {
+        return React__default.createElement(Icon, {
           name: "caret-sm-down",
           "data-testid": "tableHeaderCellSortDesc-testid"
         });
       }
-      return React.createElement(Box, {
+      return React__default.createElement(Box, {
         display: "inline-block",
         width: "12px",
         height: "12px",
@@ -3755,7 +3756,7 @@ var TableHeaderCell = function TableHeaderCell(_ref) {
         "data-testid": "tableHeaderCellSortNone-testid"
       });
     };
-    return React.createElement("span", {
+    return React__default.createElement("span", {
       className: styles$1['sort-icon']
     }, renderArrows());
   };
@@ -3778,7 +3779,7 @@ var TableHeaderCell = function TableHeaderCell(_ref) {
     onSort(eventWithKey);
   };
   var tableHeaderClasses = classNames(styles$1['table-header-cell'], (_classNames = {}, _classNames[styles$1.sortable] = isSortable, _classNames[styles$1.compact] = isCompact, _classNames[styles$1.truncated] = truncateOverflow, _classNames[styles$1.borderless] = isBorderless, _classNames[styles$1['sticky-header']] = hasStickyHeader, _classNames[styles$1['sticky-column']] = sticky === 'left' || sticky === 'right', _classNames[styles$1['sticky-column-left']] = sticky === 'left', _classNames[styles$1['sticky-column-right']] = sticky === 'right', _classNames[styles$1['align-right']] = align === 'right', _classNames[styles$1['align-center']] = align === 'center', _classNames), className);
-  return React.createElement(Box, {
+  return React__default.createElement(Box, {
     as: "th",
     display: "table-cell",
     className: tableHeaderClasses,
@@ -3788,7 +3789,7 @@ var TableHeaderCell = function TableHeaderCell(_ref) {
     onClick: handleSort,
     onKeyDown: handleKeyPress,
     scope: "col"
-  }, React.createElement("div", {
+  }, React__default.createElement("div", {
     className: styles$1.heading
   }, column.heading, isSortable && renderIcon()));
 };
@@ -3839,10 +3840,10 @@ var TableRow = function TableRow(_ref) {
     }
     return undefined;
   };
-  return React.createElement("tr", {
+  return React__default.createElement("tr", {
     className: tableRowClasses
   }, Object.values(columns).map(function (column, columnIndex) {
-    return isTableHead ? React.createElement(TableHeaderCell, {
+    return isTableHead ? React__default.createElement(TableHeaderCell, {
       column: column,
       align: column.align || align,
       key: getColumnKeys(columns)[columnIndex],
@@ -3857,7 +3858,7 @@ var TableRow = function TableRow(_ref) {
       width: column.width,
       hasStickyHeader: hasStickyHeader,
       sticky: column.sticky
-    }) : React.createElement(TableBodyCell, {
+    }) : React__default.createElement(TableBodyCell, {
       align: column.align || align,
       className: getCellClassName(column),
       emptyCellPlaceholder: column.emptyCellPlaceholder || emptyCellPlaceholder,
@@ -3892,10 +3893,10 @@ var TableBody = function TableBody(_ref) {
     _ref$truncateOverflow = _ref.truncateOverflow,
     truncateOverflow = _ref$truncateOverflow === void 0 ? false : _ref$truncateOverflow;
   var tableBodyClasses = classNames(styles$4['table-body'], (_classNames = {}, _classNames[styles$4.striped] = isStriped, _classNames[styles$4.hover] = hoverableRows, _classNames), className);
-  return React.createElement("tbody", {
+  return React__default.createElement("tbody", {
     className: tableBodyClasses
   }, rows.map(function (row, rowIndex) {
-    return React.createElement(TableRow, {
+    return React__default.createElement(TableRow, {
       columns: columns,
       row: row,
       rowIndex: rowIndex,
@@ -3928,9 +3929,9 @@ var TableHead = function TableHead(_ref) {
     _ref$truncateOverflow = _ref.truncateOverflow,
     truncateOverflow = _ref$truncateOverflow === void 0 ? false : _ref$truncateOverflow;
   var tableHeadClasses = classNames(className);
-  return React.createElement("thead", {
+  return React__default.createElement("thead", {
     className: tableHeadClasses
-  }, React.createElement(TableRow, {
+  }, React__default.createElement(TableRow, {
     columns: columns,
     align: align,
     isTableHead: true,
@@ -3979,18 +3980,18 @@ var Table = function Table(_ref) {
   var containerClasses = classNames(styles$5.container, (_classNames = {}, _classNames[styles$5['full-height']] = !!(isScrollable != null && isScrollable.y), _classNames));
   var scrollContainerClasses = classNames(styles$5['scroll-container'], (_classNames2 = {}, _classNames2[styles$5.scrollable] = !!(isScrollable != null && isScrollable.x) || !!(isScrollable != null && isScrollable.y), _classNames2[styles$5['scrollable-x']] = !!(isScrollable != null && isScrollable.x), _classNames2[styles$5['scrollable-y']] = !!(isScrollable != null && isScrollable.y), _classNames2), className);
   var tableClasses = classNames(styles$5.table, (_classNames3 = {}, _classNames3[styles$5.fixed] = useFixedTableLayout, _classNames3[styles$5.striped] = isStriped, _classNames3[styles$5.borderless] = isBorderless, _classNames3[styles$5.compact] = isCompact, _classNames3));
-  return React.createElement("div", {
+  return React__default.createElement("div", {
     className: containerClasses
-  }, isLoading && React.createElement("div", {
+  }, isLoading && React__default.createElement("div", {
     className: styles$5['loading-mask']
-  }, React.createElement(Spinner, {
+  }, React__default.createElement(Spinner, {
     size: "xl"
-  })), React.createElement("div", {
+  })), React__default.createElement("div", {
     className: scrollContainerClasses,
     "data-testid": "tableContainerDiv-testid"
-  }, React.createElement("table", {
+  }, React__default.createElement("table", {
     className: tableClasses
-  }, React.createElement(TableHead, {
+  }, React__default.createElement(TableHead, {
     columns: columns,
     align: align,
     onSort: onSort,
@@ -3999,7 +4000,7 @@ var Table = function Table(_ref) {
     sortedColumn: sortedColumn,
     truncateOverflow: truncateOverflow,
     hasStickyHeader: hasStickyHeader
-  }), React.createElement(TableBody, {
+  }), React__default.createElement(TableBody, {
     rows: rows,
     columns: columns,
     rowKey: rowKey,
@@ -4052,7 +4053,7 @@ function ThemeProvider(_ref) {
     },
     isDarkMode: isDarkMode
   };
-  return React.createElement(ThemeProviderContext.Provider, _extends({}, props, {
+  return React__default.createElement(ThemeProviderContext.Provider, _extends({}, props, {
     value: value
   }), children);
 }
@@ -4081,12 +4082,12 @@ var renderToastIcon = function renderToastIcon(toast) {
     iconName = 'c-warning';
     iconColor = 'white';
   }
-  var icon = type !== 'loading' ? React.createElement(Icon, {
+  var icon = type !== 'loading' ? React__default.createElement(Icon, {
     name: iconName,
     color: iconColor
-  }) : React.createElement(Spinner, null);
+  }) : React__default.createElement(Spinner, null);
   // eslint-disable-next-line consistent-return
-  return React.createElement(Box, {
+  return React__default.createElement(Box, {
     justifyContent: "center",
     height: "100"
   }, icon);
@@ -4094,7 +4095,7 @@ var renderToastIcon = function renderToastIcon(toast) {
 var renderDismissIcon = function renderDismissIcon(toast, onDismiss) {
   if (!toast.canDismiss) return;
   // eslint-disable-next-line consistent-return
-  return React.createElement(Box, {
+  return React__default.createElement(Box, {
     as: "button",
     borderWidth: "0",
     className: styles['toast-dismiss'],
@@ -4107,12 +4108,12 @@ var renderDismissIcon = function renderDismissIcon(toast, onDismiss) {
     height: "100",
     onClick: onDismiss,
     "aria-label": "dismiss notification"
-  }, React.createElement(Icon, {
+  }, React__default.createElement(Icon, {
     name: "remove"
   }));
 };
 // eslint-disable-next-line import/prefer-default-export
-var ToastNotification = /*#__PURE__*/React.memo(function (_ref2) {
+var ToastNotification = /*#__PURE__*/React__default.memo(function (_ref2) {
   var _classNames;
   var toast = _ref2.toast,
     _ref2$position = _ref2.position,
@@ -4120,7 +4121,7 @@ var ToastNotification = /*#__PURE__*/React.memo(function (_ref2) {
     style = _ref2.style,
     children = _ref2.children,
     onDismiss = _ref2.onDismiss;
-  var message = React.createElement(Box, _extends({
+  var message = React__default.createElement(Box, _extends({
     direction: "row",
     justifyContent: "center",
     style: {
@@ -4131,7 +4132,7 @@ var ToastNotification = /*#__PURE__*/React.memo(function (_ref2) {
   var classes = classNames(toast.className, styles['toast-notification'], animationClass, (_classNames = {
     'toast-notification--not-visible': !toast.visible
   }, _classNames[styles['toast-error']] = toast.type === 'error', _classNames));
-  return React.createElement(Box, {
+  return React__default.createElement(Box, {
     alignItems: "center",
     maxWidth: "300px",
     padding: toast.isCompact ? 'sm' : 'md',
@@ -4143,7 +4144,7 @@ var ToastNotification = /*#__PURE__*/React.memo(function (_ref2) {
     })
   }, typeof children === 'function' ? children({
     message: message
-  }) : React.createElement(React.Fragment, null, renderToastIcon(toast), message, renderDismissIcon(toast, onDismiss)));
+  }) : React__default.createElement(React__default.Fragment, null, renderToastIcon(toast), message, renderDismissIcon(toast, onDismiss)));
 });
 
 var _actionHandlers;
@@ -4542,7 +4543,7 @@ var renderNotification = function renderNotification(currentToast, children, con
   if (children) {
     return children(currentToast);
   }
-  return React.createElement(ToastNotification, {
+  return React__default.createElement(ToastNotification, {
     toast: currentToast,
     position: toastPosition,
     onDismiss: function onDismiss() {
@@ -4568,7 +4569,7 @@ var ToastContainer = function ToastContainer(_ref) {
   var _useToasts = useToasts(toastOptions),
     toasts = _useToasts.toasts,
     handlers = _useToasts.handlers;
-  return React.createElement(Box, _extends({
+  return React__default.createElement(Box, _extends({
     style: _extends({
       top: DEFAULT_OFFSET,
       left: DEFAULT_OFFSET,
@@ -4592,7 +4593,7 @@ var ToastContainer = function ToastContainer(_ref) {
     var ref = t.height ? undefined : createRectRef(function (rect) {
       handlers.updateHeight(t.id, rect.height);
     });
-    return React.createElement(Box, {
+    return React__default.createElement(Box, {
       ref: ref,
       zIndex: t.visible ? 'popover' : undefined,
       key: t.id,
@@ -4603,7 +4604,7 @@ var ToastContainer = function ToastContainer(_ref) {
 };
 
 var useWindowSize = function useWindowSize() {
-  var _React$useContext = React.useContext(ResponsiveContext),
+  var _React$useContext = React__default.useContext(ResponsiveContext),
     innerWidth = _React$useContext.innerWidth,
     innerHeight = _React$useContext.innerHeight,
     outerHeight = _React$useContext.outerHeight,
@@ -4648,6 +4649,28 @@ var useBreakpoint = function useBreakpoint() {
   };
 };
 
+var desktopBreakpoint = /*#__PURE__*/BREAKPOINTS.find(function (b) {
+  return b.name === 'desktop';
+});
+var MOBILE_BREAKPOINT = desktopBreakpoint ? desktopBreakpoint.minWidth : 0; // min width in pixels
+function useIsMobile() {
+  var _React$useState = React.useState(undefined),
+    isMobile = _React$useState[0],
+    setIsMobile = _React$useState[1];
+  React.useEffect(function () {
+    var mql = window.matchMedia("(max-width: " + (MOBILE_BREAKPOINT - 1) + "px)");
+    var onChange = function onChange() {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return function () {
+      return mql.removeEventListener('change', onChange);
+    };
+  }, []);
+  return !!isMobile;
+}
+
 var useOpenClose = function useOpenClose(props) {
   if (props === void 0) {
     props = {};
@@ -4696,10 +4719,10 @@ var useOpenClose = function useOpenClose(props) {
 };
 
 var useTheme = function useTheme() {
-  var context = React.useContext(ThemeProviderContext);
+  var context = React__default.useContext(ThemeProviderContext);
   if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider. Be sure your App is wrapped in ThemeProvider.');
   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, 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 };
+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, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useTheme, useToasts, useWindowSize };
 //# sourceMappingURL=hyphen-components.esm.js.map