@hyphen/hyphen-components 2.9.0 → 2.9.2

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

@@ -0,0 +1,4724 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames');
+var icons = require('@hyphen/hyphen-design-tokens/build/assets/icons/react');
+var format = require('date-fns/format');
+var ReactDatePicker = require('react-datepicker');
+var reactDom = require('react-dom');
+var reactPopper = require('react-popper');
+var FocusTrap = require('focus-trap-react');
+var designTokens = require('@hyphen/hyphen-design-tokens/build/json/variables');
+require('@hyphen/hyphen-design-tokens/build/assets/icons');
+var ReactModal = require('react-modal');
+var FocusLock = require('react-focus-lock');
+var reactRemoveScroll = require('react-remove-scroll');
+var formik = require('formik');
+var Select = require('react-select');
+var uuid = require('uuid');
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.indexOf(n) >= 0) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function isValidSpacingValue(value) {
+  if (value === undefined || value === null || typeof value !== 'string' && typeof value !== 'object') {
+    return false;
+  }
+  return true;
+}
+function generateBaseClasses(attribute, value) {
+  if (typeof value !== 'string') return [];
+  var trimmedValue = value.trim();
+  if (trimmedValue !== value) {
+    // eslint-disable-next-line no-console
+    console.warn("\n      Hyphen Components: It seems you've passed an incorrect\n      shorthand value as a prop in your component. The value\n      has extra whitespace either at the beginning or the end of it.\n      We have trimmed this whitespace, but please double-check that\n      the prop value is correct.\n      attribute: \"" + attribute + "\"\n      value: \"" + value + "\"\n    ");
+  }
+  var classes = [];
+  var shorthand;
+  if (attribute === 'br') {
+    shorthand = {
+      /* top-left-and-bottom-right | top-right-and-bottom-left */
+      2: ['top-left', 'top-right'],
+      /* top-left | top-right-and-bottom-left | bottom-right */
+      3: ['top-left', 'top-right', 'bottom-right'],
+      4: ['top-left', 'top-right', 'bottom-right', 'bottom-left']
+    };
+  } else if (attribute === 'g') {
+    shorthand = {
+      2: ['rg', 'cg']
+    };
+  } else {
+    shorthand = {
+      2: ['v', 'h'],
+      3: ['top', 'h', 'bottom'],
+      4: ['top', 'right', 'bottom', 'left']
+    };
+  }
+  if (trimmedValue.includes(' ') && trimmedValue.split(' ').length > 1) {
+    var sides = trimmedValue.split(' ');
+    if (sides.length > 4) {
+      // eslint-disable-next-line no-console
+      console.warn("\n        Hyphen Components: It seems you've passed an incorrect\n        shorthand value as a prop in your component. The value\n        has more than four string components. While it will not break anything,\n        please double-check your prop values to ensure the expected result is correct.\n        attribute: \"" + attribute + "\"\n        value: \"" + value + "\"\n      ");
+    }
+    var trimmedSides = sides.slice(0, 4);
+    // br = border radius -- the corner logic is different than sides.
+    if (attribute === 'br') {
+      trimmedSides.forEach(function (v, index) {
+        classes.push(attribute + "-" + shorthand[trimmedSides.length][index] + "-" + v);
+        if (trimmedSides.length === 3 && index === 1) {
+          classes.push(attribute + "-bottom-left-" + trimmedSides[index]);
+        } else if (trimmedSides.length === 2 && index === 0) {
+          classes.push(attribute + "-bottom-right-" + trimmedSides[index]);
+        } else if (trimmedSides.length === 2 && index === 1) {
+          classes.push(attribute + "-bottom-left-" + trimmedSides[index]);
+        }
+      });
+    } else if (attribute === 'g') {
+      trimmedSides.forEach(function (v, index) {
+        classes.push(shorthand[trimmedSides.length][index] + "-" + v);
+      });
+    } else {
+      trimmedSides.forEach(function (v, index) {
+        classes.push(attribute + "-" + shorthand[trimmedSides.length][index] + "-" + v);
+      });
+    }
+  } else {
+    classes.push(attribute + "-" + trimmedValue);
+  }
+  return classes;
+}
+function cssShorthandToClasses(attribute, value) {
+  if (!isValidSpacingValue(value)) return [];
+  var classes = [];
+  if (typeof value === 'object') {
+    Object.keys(value).forEach(function (key) {
+      var baseClasses = generateBaseClasses(attribute, value[key]);
+      var responsiveClasses = baseClasses == null ? void 0 : baseClasses.map(function (baseClass) {
+        return key === 'base' ? baseClass : baseClass + "-" + key;
+      });
+      classes.push.apply(classes, responsiveClasses);
+    });
+  } else if (typeof value === 'string') {
+    classes.push.apply(classes, generateBaseClasses(attribute, value));
+  }
+  return classes;
+}
+
+// eslint-disable-next-line
+function generateResponsiveClasses(classRoot,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+value) {
+  if (value === null || typeof value !== 'string' && typeof value !== 'object') return [];
+  var classes = [];
+  if (typeof value === 'object') {
+    Object.keys(value).forEach(function (key) {
+      var baseClass = classRoot + "-" + value[key];
+      var responsiveClass = key === 'base' ? baseClass : baseClass + "-" + key;
+      classes.push(responsiveClass);
+    });
+  } else if (typeof value === 'string') {
+    classes.push(classRoot + "-" + value);
+  }
+  return classes;
+}
+
+// eslint-disable-next-line import/prefer-default-export
+function doesStringIncludeCssUnit(value) {
+  var cssUnits = ['px', 'em', 'rem', '%', 'vw', 'vh'];
+  return cssUnits.some(function (unit) {
+    return value == null ? void 0 : value.includes(unit);
+  });
+}
+
+function getDimensionStyles(dimension, value) {
+  if (value === undefined) return value;
+  var styles;
+  // value is a css unit so set its style property
+  if (typeof value === 'string' && doesStringIncludeCssUnit(value)) {
+    switch (dimension) {
+      case 'h':
+        styles = {
+          height: value
+        };
+        break;
+      case 'mw':
+        styles = {
+          maxWidth: value
+        };
+        break;
+      case 'mh':
+        styles = {
+          maxHeight: value
+        };
+        break;
+      case 'minw':
+        styles = {
+          minWidth: value
+        };
+        break;
+      case 'minh':
+        styles = {
+          minHeight: value
+        };
+        break;
+      default:
+        styles = {
+          width: value
+        };
+    }
+  }
+  return styles;
+}
+function getDimensionClasses(dimension, value) {
+  if (value === undefined) return value;
+  var classes = [];
+  if (typeof value === 'string' && !doesStringIncludeCssUnit(value) || typeof value === 'object' && Object.values(value).every(function (v) {
+    return !doesStringIncludeCssUnit(v);
+  })) {
+    classes.push.apply(classes, generateResponsiveClasses(dimension, value));
+  }
+  return classes;
+}
+/**
+ * Returns an object of styles and class names that correspond with the given value
+ * @param {CssDimensionAbbreviation} dimension width or height
+ * @param {string} [value] value of the dimension
+ */
+function getDimensionCss(dimension, value) {
+  return {
+    styles: getDimensionStyles(dimension, value),
+    classes: getDimensionClasses(dimension, value)
+  };
+}
+
+/**
+ * Returns a createElement() type based on the props of the Component.
+ * Useful for calculating what type a component should render as.
+ *
+ * @param {function} Component A function or ReactClass.
+ * @param {object} props A ReactElement props object
+ * @param {function} [getDefault] A function that returns a default element type.
+ * @returns {string} A ReactElement type
+ */
+function getElementType(
+// eslint-disable-line import/prefer-default-export
+Component, props, getDefault) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  var _Component$defaultPro = Component.defaultProps,
+    defaultProps = _Component$defaultPro === void 0 ? {} : _Component$defaultPro;
+  // ----------------------------------------
+  // user defined "as" element type
+  if (props.as && props.as !== defaultProps.as) return props.as;
+  // ----------------------------------------
+  // computed default element type
+  if (getDefault) {
+    var computedDefault = getDefault();
+    if (computedDefault) return computedDefault;
+  }
+  // ----------------------------------------
+  // infer anchor links
+  if (props.href) return 'a';
+  // ----------------------------------------
+  // use defaultProp or 'div'
+  return defaultProps.as || 'div';
+}
+
+var styles$v = {"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"];
+/**
+ * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
+ * elements.
+ */
+var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref3;
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'div' : _ref$as,
+    _ref$alignItems = _ref.alignItems,
+    alignItems = _ref$alignItems === void 0 ? undefined : _ref$alignItems,
+    _ref$alignContent = _ref.alignContent,
+    alignContent = _ref$alignContent === void 0 ? undefined : _ref$alignContent,
+    _ref$alignSelf = _ref.alignSelf,
+    alignSelf = _ref$alignSelf === void 0 ? undefined : _ref$alignSelf,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? undefined : _ref$background,
+    _ref$borderColor = _ref.borderColor,
+    borderColor = _ref$borderColor === void 0 ? undefined : _ref$borderColor,
+    _ref$borderWidth = _ref.borderWidth,
+    borderWidth = _ref$borderWidth === void 0 ? undefined : _ref$borderWidth,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? undefined : _ref$children,
+    _ref$childGap = _ref.childGap,
+    childGap = _ref$childGap === void 0 ? undefined : _ref$childGap,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? undefined : _ref$color,
+    _ref$columnGap = _ref.columnGap,
+    columnGap = _ref$columnGap === void 0 ? undefined : _ref$columnGap,
+    _ref$cursor = _ref.cursor,
+    cursor = _ref$cursor === void 0 ? undefined : _ref$cursor,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'flex' : _ref$display,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'column' : _ref$direction,
+    _ref$flex = _ref.flex,
+    flex = _ref$flex === void 0 ? undefined : _ref$flex,
+    _ref$fontFamily = _ref.fontFamily,
+    fontFamily = _ref$fontFamily === void 0 ? undefined : _ref$fontFamily,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 'inherit' : _ref$fontSize,
+    _ref$focus = _ref.focus,
+    focus = _ref$focus === void 0 ? undefined : _ref$focus,
+    _ref$fontWeight = _ref.fontWeight,
+    fontWeight = _ref$fontWeight === void 0 ? undefined : _ref$fontWeight,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? undefined : _ref$gap,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? undefined : _ref$height,
+    _ref$hover = _ref.hover,
+    hover = _ref$hover === void 0 ? undefined : _ref$hover,
+    _ref$justifyContent = _ref.justifyContent,
+    justifyContent = _ref$justifyContent === void 0 ? undefined : _ref$justifyContent,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? undefined : _ref$margin,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? undefined : _ref$maxHeight,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? undefined : _ref$minHeight,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? undefined : _ref$maxWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? undefined : _ref$minWidth,
+    _ref$overflow = _ref.overflow,
+    overflow = _ref$overflow === void 0 ? undefined : _ref$overflow,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? undefined : _ref$padding,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? undefined : _ref$position,
+    _ref$radius = _ref.radius,
+    radius = _ref$radius === void 0 ? undefined : _ref$radius,
+    _ref$rowGap = _ref.rowGap,
+    rowGap = _ref$rowGap === void 0 ? undefined : _ref$rowGap,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? undefined : _ref$shadow,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$textAlign = _ref.textAlign,
+    textAlign = _ref$textAlign === void 0 ? undefined : _ref$textAlign,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? undefined : _ref$wrap,
+    _ref$width = _ref.width,
+    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);
+  var heightCss = getDimensionCss('h', height);
+  var widthCss = getDimensionCss('w', width);
+  var maxHeightCss = getDimensionCss('mh', maxHeight);
+  var maxWidthCss = getDimensionCss('mw', maxWidth);
+  var minHeightCss = getDimensionCss('minh', minHeight);
+  var minWidthCss = getDimensionCss('minw', minWidth);
+  var isFlexBox = typeof display === 'string' && display.includes('flex');
+  var flexDirectionClasses = isFlexBox ? generateResponsiveClasses('flex-direction', direction) : null;
+  var cssPropertyMap = {
+    color: {
+      classPrefix: 'font-color',
+      transformer: generateResponsiveClasses
+    },
+    background: {
+      classPrefix: 'background-color',
+      transformer: generateResponsiveClasses
+    },
+    borderColor: {
+      classPrefix: 'border-color',
+      transformer: generateResponsiveClasses
+    },
+    borderWidth: {
+      classPrefix: 'border-width',
+      transformer: cssShorthandToClasses
+    },
+    shadow: {
+      classPrefix: 'shadow',
+      transformer: generateResponsiveClasses
+    },
+    fontSize: {
+      classPrefix: 'font-size',
+      transformer: generateResponsiveClasses
+    }
+  };
+  var getStatefulClasses = function getStatefulClasses(stateKey, values) {
+    return values // eslint-disable-line
+    ? Object.entries(values).map(function (_ref2) {
+      var key = _ref2[0],
+        value = _ref2[1];
+      return cssPropertyMap[key].transformer(stateKey + ":" + cssPropertyMap[key].classPrefix, value);
+    } // eslint-disable-line max-len
+    ) : undefined;
+  };
+  var hoverClasses = getStatefulClasses('hover', hover);
+  var focusClasses = getStatefulClasses('focus', focus);
+  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)]));
+  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`
+   * so a margin can be applied to that side.
+   */
+  var generateChildGapDirection = function generateChildGapDirection() {
+    var childGapDirection = {};
+    var getChildGapMarginDirection = function getChildGapMarginDirection(d) {
+      var marginDirection = '';
+      if (d != null && d.includes('row')) marginDirection = 'right';else if (d != null && d.includes('column')) marginDirection = 'bottom';
+      return marginDirection;
+    };
+    if (typeof direction === 'string') {
+      childGapDirection = {
+        base: getChildGapMarginDirection(direction)
+      };
+    } else if (typeof direction === 'object' && direction !== null) {
+      childGapDirection = Object.keys(direction).reduce(function (acc, curr) {
+        var _extends2;
+        return _extends({}, acc, (_extends2 = {}, _extends2[curr] = getChildGapMarginDirection(direction[curr]), _extends2));
+      }, {});
+    }
+    return childGapDirection;
+  };
+  /**
+   * Shapes the childGap prop into a ResponsiveSpacing object
+   * so that we can cross-reference values between direction and childGap values to generate
+   * responsive classes.
+   */
+  var generateChildGap = function generateChildGap() {
+    var childGapObj = {};
+    if (typeof childGap === 'string') {
+      childGapObj = {
+        base: childGap
+      };
+    } else if (typeof childGap === 'object' && childGap !== null) {
+      childGapObj = _extends({}, childGap);
+    }
+    return childGapObj;
+  };
+  var childGapClasses = [];
+  if (childGap && direction) {
+    var childGapDirection = generateChildGapDirection();
+    var childGapValues = generateChildGap();
+    var breakpoints = ['hd', 'desktop', 'tablet', 'base'];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var findMatchingBreakpoint = function findMatchingBreakpoint(responsiveObj, key) {
+      var index = breakpoints.findIndex(function (breakpoint) {
+        return breakpoint === key;
+      });
+      var value = '';
+      value = responsiveObj[key];
+      if (!value) return findMatchingBreakpoint(responsiveObj, breakpoints[index + 1]);
+      return value;
+    };
+    breakpoints.forEach(function (breakpoint) {
+      var foundDirection = findMatchingBreakpoint(childGapDirection, breakpoint);
+      var foundChildGap = findMatchingBreakpoint(childGapValues, breakpoint);
+      var classSuffix = breakpoint === 'base' ? '' : "-" + breakpoint;
+      var oppositeDirection = foundDirection === 'bottom' ? 'right' : 'bottom';
+      childGapClasses.push("m-" + foundDirection + "-" + foundChildGap + classSuffix);
+      childGapClasses.push("m-" + oppositeDirection + "-0" + classSuffix);
+    });
+  }
+  /**
+   * Shallow merges existing classes of child node with a className based on the childGap value.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var decorateChildren = function decorateChildren(child, i, array) {
+    var _child$key;
+    if (i === array.length - 1 || !child || typeof child === 'string' || typeof child === 'number') {
+      return child; // Not gap if child is last element or if the children are strings or numbers.
+    }
+    var childClasses = classNames(child.props.className, [].concat(Array.from(new Set(childGapClasses))));
+    return React.cloneElement(child, {
+      className: childClasses,
+      key: (_child$key = child.key) != null ? _child$key : i
+    });
+  };
+  var decoratedChildren = React.Children.toArray(children).filter(function (child) {
+    return child !== null;
+  });
+  if (childGapClasses && decoratedChildren.length > 1) {
+    decoratedChildren = decoratedChildren.map(function (value, index, array) {
+      return decorateChildren(value,
+      // eslint-disable-line @typescript-eslint/no-explicit-any
+      index, array // eslint-disable-line @typescript-eslint/no-explicit-any
+      );
+    });
+  }
+  var element = getElementType(Box, {
+    as: as
+  });
+  return React.createElement(element, _extends({
+    className: boxClasses,
+    style: boxStyles,
+    ref: ref
+  }, restProps), children !== null && children !== undefined ? decoratedChildren : null);
+});
+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 Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    name = _ref.name,
+    color = _ref.color,
+    size = _ref.size,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+  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({
+    className: iconClasses || null,
+    ref: ref,
+    "data-testid": "icon-testid--" + name
+  }, restProps)) : React.createElement(Box, {
+    fontWeight: "bold",
+    background: "error",
+    color: "white",
+    padding: "2xs",
+    fontSize: "sm",
+    display: "inline"
+  }, "???");
+});
+
+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"};
+
+// eslint-disable-next-line import/prefer-default-export
+var ALERT_ICONS_MAP = {
+  "default": {
+    icon: 'c-warning'
+  },
+  info: {
+    icon: 'c-info'
+  },
+  success: {
+    icon: 'c-check'
+  },
+  warning: {
+    icon: 't-warning'
+  },
+  danger: {
+    icon: 'c-remove'
+  }
+};
+
+var _excluded$G = ["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,
+    _ref$closeText = _ref.closeText,
+    closeText = _ref$closeText === void 0 ? '' : _ref$closeText,
+    _ref$hasIcon = _ref.hasIcon,
+    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+    _ref$isCompact = _ref.isCompact,
+    isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+    _ref$isClosable = _ref.isClosable,
+    isClosable = _ref$isClosable === void 0 ? false : _ref$isClosable,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? '' : _ref$message,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? undefined : _ref$onClose,
+    _ref$render = _ref.render,
+    render = _ref$render === void 0 ? undefined : _ref$render,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '' : _ref$title,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+  var handleClose = function handleClose(event) {
+    if (!onClose) return;
+    onClose(event);
+  };
+  var renderAlertIcon = function renderAlertIcon() {
+    return React.createElement(Box, {
+      fontSize: "md",
+      className: styles$u["alert__icon__" + variant]
+    }, React.createElement(Icon, {
+      name: ALERT_ICONS_MAP[variant].icon,
+      "data-testid": "alert-icon-" + variant + "-test-id"
+    }));
+  };
+  var renderCloseIcon = function renderCloseIcon() {
+    var handleCloseKeyPress = function handleCloseKeyPress(event) {
+      if (event.keyCode === 13) handleClose(event);
+    };
+    return React.createElement(Box, {
+      margin: "0 0 0 auto",
+      color: "secondary",
+      className: styles$u['close-icon']
+    }, React.createElement("button", {
+      type: "button",
+      onClick: handleClose,
+      onKeyUp: handleCloseKeyPress
+    }, closeText || React.createElement(Icon, {
+      name: "remove",
+      "data-testid": "alert-close-icon-test-id"
+    })));
+  };
+  var alertContainerClasses = classNames(styles$u["alert__" + variant], styles$u.alert, className);
+  return React.createElement(Box, _extends({
+    alignItems: "flex-start",
+    gap: "md",
+    className: alertContainerClasses,
+    direction: "row",
+    padding: isCompact ? 'xs' : 'md',
+    radius: "md",
+    role: "alert",
+    fontSize: "sm"
+  }, restProps), hasIcon && renderAlertIcon(), React.createElement("div", null, render ? render() : React.createElement(Box, {
+    display: "block",
+    childGap: message && title ? '2xs' : undefined
+  }, title && React.createElement(Box, {
+    as: "h4",
+    fontSize: "sm",
+    fontWeight: "semibold",
+    className: styles$u['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 _excluded$F = ["className", "message", "variant", "size"];
+var Badge = function Badge(_ref) {
+  var _classNames;
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? '' : _ref$message,
+    _ref$variant = _ref.variant,
+    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);
+  var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
+    return styles$t[c];
+  });
+  var badgeClasses = classNames(styles$t.badge, className, responsiveClasses, (_classNames = {}, _classNames[styles$t[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 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 sizeInPixels = function sizeInPixels() {
+    var pixels;
+    if (size === 'sm') pixels = '12';
+    if (size === 'md') pixels = '16';
+    if (size === 'lg') pixels = '24';
+    if (size === 'xl') pixels = '30';
+    return pixels;
+  };
+  return React.createElement("span", {
+    className: classes
+  }, React.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", {
+    fill: "currentColor"
+  }, React.createElement("rect", {
+    fill: "currentColor",
+    height: "2",
+    rx: ".5",
+    width: "4",
+    x: "12",
+    y: "7"
+  }), React.createElement("rect", {
+    fill: "currentColor",
+    height: "4.001",
+    rx: ".5",
+    width: "1.999",
+    opacity: ".4",
+    x: "11.243",
+    y: "10.242",
+    transform: "rotate(-44.975 12.243 12.243)"
+  }), React.createElement("rect", {
+    fill: "currentColor",
+    height: "4",
+    rx: ".5",
+    width: "2",
+    opacity: ".4",
+    x: "7",
+    y: "12"
+  }), React.createElement("rect", {
+    fill: "currentColor",
+    height: "1.999",
+    rx: ".5",
+    width: "4.001",
+    opacity: ".4",
+    x: "1.757",
+    y: "11.243",
+    transform: "rotate(-45.03 3.757 12.242)"
+  }), React.createElement("rect", {
+    fill: "currentColor",
+    height: "2",
+    rx: ".5",
+    width: "4",
+    opacity: ".4",
+    y: "7"
+  }), React.createElement("rect", {
+    fill: "currentColor",
+    height: "4.001",
+    rx: ".5",
+    width: "1.999",
+    opacity: ".4",
+    x: "2.758",
+    y: "1.757",
+    transform: "rotate(-44.975 3.757 3.757)"
+  }), React.createElement("rect", {
+    fill: "currentColor",
+    height: "4",
+    rx: ".5",
+    width: "2",
+    opacity: ".6",
+    x: "7"
+  }), React.createElement("rect", {
+    fill: "currentColor",
+    height: "1.999",
+    rx: ".5",
+    width: "4.001",
+    opacity: ".8",
+    x: "10.242",
+    y: "2.758",
+    transform: "rotate(-45.03 12.242 3.757)"
+  }))));
+};
+
+var isModifiedEvent = function isModifiedEvent(e) {
+  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+};
+/**
+ * Due to react-router's handling of custom components used in RR <Link>
+ * we must add this validation that ensures the router will execute the passed `navigate`
+ * prop, thus navigating the user without triggering a refresh.
+ *
+ * SOURCES:
+ *    https://github.com/ReactTraining/react-router/issues/7727
+ *    https://github.com/ReactTraining/react-router/issues/7761
+ * */
+// eslint-disable-next-line import/prefer-default-export
+var handleReactRouterClick = function handleReactRouterClick(event, onClick, target, navigate) {
+  if (onClick) onClick(event);
+  if (!event.defaultPrevented &&
+  // onClick prevented default
+  event.button === 0 && (
+  // ignore everything but left clicks
+  !target || target === '_self') &&
+  // let browser handle "target=_blank" etc.
+  !isModifiedEvent(event) &&
+  // ignore clicks with modifier keys
+  navigate) {
+    event.preventDefault();
+    navigate();
+  }
+};
+
+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 _excluded$E = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "tabIndex", "target", "type", "size", "variant"];
+var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _classNames;
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? undefined : _ref$children,
+    _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'button' : _ref$as,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? undefined : _ref$id,
+    _ref$href = _ref.href,
+    href = _ref$href === void 0 ? undefined : _ref$href,
+    _ref$iconPrefix = _ref.iconPrefix,
+    iconPrefix = _ref$iconPrefix === void 0 ? undefined : _ref$iconPrefix,
+    _ref$iconSuffix = _ref.iconSuffix,
+    iconSuffix = _ref$iconSuffix === void 0 ? undefined : _ref$iconSuffix,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$navigate = _ref.navigate,
+    navigate = _ref$navigate === void 0 ? undefined : _ref$navigate,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? undefined : _ref$onClick,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? undefined : _ref$tabIndex,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? undefined : _ref$target,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? undefined : _ref$type,
+    _ref$size = _ref.size,
+    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);
+  var disabled = isLoading || isDisabled;
+  var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
+    return styles$r[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 handleClick = handleReactRouterClick;
+  var handleFocus = function handleFocus(event) {
+    if (onFocus) onFocus(event);
+  };
+  var handleBlur = function handleBlur(event) {
+    if (onBlur) onBlur(event);
+  };
+  var buttonContent = iconPrefix || iconSuffix ? React.createElement(Box, {
+    display: "inline-flex",
+    direction: "row",
+    alignItems: "center",
+    gap: "xs"
+  }, isLoading && React.createElement(Spinner, {
+    className: styles$r['spinner-wrapper']
+  }), iconPrefix && React.createElement(Icon, {
+    className: styles$r.label,
+    name: iconPrefix,
+    "aria-hidden": "true",
+    focusable: "false",
+    "data-testid": "prefixIcon",
+    size: size === 'md' ? 'sm' : size
+  }), children && React.createElement("span", {
+    className: styles$r.label
+  }, children), iconSuffix && React.createElement(Icon, {
+    className: styles$r.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']
+  }), function () {
+    if (children) {
+      return React.createElement("span", {
+        className: styles$r.label
+      }, children);
+    }
+    return null;
+  }());
+  var buttonElement = getElementType(Button, {
+    as: as
+  });
+  return React.createElement(buttonElement, _extends({
+    id: id,
+    href: href,
+    className: buttonClasses,
+    disabled: disabled,
+    target: as === 'a' && href ? target : null,
+    onBlur: handleBlur,
+    onClick: function onClick(event) {
+      return handleClick(event, _onClick, target, navigate);
+    },
+    onFocus: handleFocus,
+    ref: ref,
+    type: type || (as !== 'a' && !href ? 'button' : undefined),
+    tabIndex: tabIndex
+  }, restProps), buttonContent);
+});
+
+var _excluded$D = ["background", "borderColor", "borderWidth", "children", "display", "padding"];
+var CardFooter = function CardFooter(_ref) {
+  var _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'secondary' : _ref$background,
+    _ref$borderColor = _ref.borderColor,
+    borderColor = _ref$borderColor === void 0 ? 'subtle' : _ref$borderColor,
+    _ref$borderWidth = _ref.borderWidth,
+    borderWidth = _ref$borderWidth === void 0 ? 'xs 0 0 0' : _ref$borderWidth,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$display = _ref.display,
+    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);
+  return React.createElement(Box, _extends({
+    display: display,
+    padding: padding,
+    background: background,
+    borderColor: borderColor,
+    borderWidth: borderWidth
+  }, restProps), children);
+};
+
+var HEADING_DEFAULT_SIZE_MAP = {
+  h1: '3xl',
+  h2: '2xl',
+  h3: 'xl',
+  h4: 'lg',
+  h5: 'md',
+  h6: 'sm'
+};
+
+var styles$q = {"heading":"Heading-module_heading__zKyv7"};
+
+var _excluded$C = ["as", "children", "className", "color", "size"];
+var Heading = function Heading(_ref) {
+  var _classNames;
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'h4' : _ref$as,
+    children = _ref.children,
+    className = _ref.className,
+    color = _ref.color,
+    size = _ref.size,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+  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));
+  return React.createElement(element, _extends({
+    className: classes
+  }, restProps), children);
+};
+
+var _excluded$B = ["childGap", "children", "className", "display", "padding", "title"];
+var CardHeader = function CardHeader(_ref) {
+  var _ref$childGap = _ref.childGap,
+    childGap = _ref$childGap === void 0 ? '2xs' : _ref$childGap,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    _ref$padding = _ref.padding,
+    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);
+  var renderTitle = function renderTitle() {
+    return typeof title === 'string' ? React.createElement(Heading, {
+      size: "sm",
+      as: "h4"
+    }, title) : title;
+  };
+  return React.createElement(Box, _extends({
+    childGap: childGap,
+    display: display,
+    padding: padding,
+    className: className
+  }, restProps), title && renderTitle(), children);
+};
+
+var styles$p = {"card-section-border":"Card-module_card-section-border__OefDX"};
+
+var _excluded$A = ["background", "borderColor", "borderWidth", "children", "childGap", "gap", "className", "display", "padding", "subdued", "title"];
+var CardSection = function CardSection(_ref) {
+  var _classNames;
+  var _ref$background = _ref.background,
+    background = _ref$background === void 0 ? undefined : _ref$background,
+    _ref$borderColor = _ref.borderColor,
+    borderColor = _ref$borderColor === void 0 ? undefined : _ref$borderColor,
+    _ref$borderWidth = _ref.borderWidth,
+    borderWidth = _ref$borderWidth === void 0 ? undefined : _ref$borderWidth,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$childGap = _ref.childGap,
+    childGap = _ref$childGap === void 0 ? undefined : _ref$childGap,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? undefined : _ref$gap,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? '2xl' : _ref$padding,
+    _ref$subdued = _ref.subdued,
+    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);
+  var renderTitle = typeof title === 'string' ? React.createElement(Box, {
+    className: "m-bottom-md"
+  }, React.createElement(Box, {
+    as: "h4",
+    fontWeight: "bold",
+    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);
+  return React.createElement(Box, _extends({
+    background: background,
+    borderColor: borderColor,
+    borderWidth: borderWidth,
+    className: sectionClasses,
+    display: display,
+    padding: padding
+  }, restProps), renderTitle, React.createElement(Box, {
+    gap: gap,
+    childGap: childGap
+  }, children));
+};
+
+var _excluded$z = ["children", "subdued", "overflow", "display", "width"];
+var CardBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    subdued = _ref.subdued,
+    _ref$overflow = _ref.overflow,
+    overflow = _ref$overflow === void 0 ? 'hidden' : _ref$overflow,
+    _ref$display = _ref.display,
+    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);
+  return React.createElement(Box, _extends({
+    background: subdued ? 'secondary' : 'primary',
+    borderWidth: "sm",
+    borderColor: "subtle",
+    overflow: overflow,
+    display: display,
+    ref: ref,
+    shadow: "2xs",
+    width: width,
+    radius: "lg"
+  }, restProps), children);
+});
+// Actual component is wrapped in an IIFE for the export
+// To allow tree-shaking even with static properties (subcomponents in this case).
+var Card = /*#__PURE__*/function () {
+  var Card = CardBaseComponent; // eslint-disable-line no-shadow
+  Card.Header = CardHeader;
+  Card.Section = CardSection;
+  Card.Footer = CardFooter;
+  return Card;
+}();
+
+var _excluded$y = ["className", "error", "isChecked", "isDisabled", "isIndeterminate"];
+var CheckboxIcon = function CheckboxIcon(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? null : _ref$error,
+    _ref$isChecked = _ref.isChecked,
+    isChecked = _ref$isChecked === void 0 ? false : _ref$isChecked,
+    _ref$isDisabled = _ref.isDisabled,
+    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);
+  var color = 'base';
+  var name = 'checkbox-btn';
+  if (isChecked) name = 'checkbox-btn-checked';else name = 'checkbox-btn';
+  if (isIndeterminate) name = 'checkbox-btn-indeterminate';
+  if (isChecked && isDisabled) {
+    color = 'disabled';
+  } else if (isChecked && !isDisabled) {
+    color = 'base';
+  } else if (isDisabled) {
+    color = 'disabled';
+  }
+  if (error) color = 'danger';
+  if (isDisabled && error) color = 'danger-disabled';
+  return React.createElement(Box, _extends({
+    className: className,
+    display: "inline-block",
+    color: color
+  }, restProps), React.createElement(Icon, {
+    name: name
+  }));
+};
+
+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 _excluded$x = ["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,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'inline' : _ref$display,
+    id = _ref.id,
+    isChecked = _ref.isChecked,
+    label = _ref.label,
+    labelledby = _ref.labelledby,
+    onChange = _ref.onChange,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isHidden = _ref.isHidden,
+    isHidden = _ref$isHidden === void 0 ? false : _ref$isHidden,
+    _ref$isIndeterminate = _ref.isIndeterminate,
+    isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
+    _ref$size = _ref.size,
+    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);
+  var inputRef = React.useRef(null);
+  React.useEffect(function () {
+    if (inputRef != null && inputRef.current) {
+      inputRef.current.indeterminate = isIndeterminate;
+    }
+  }, [isIndeterminate]);
+  var handleBlur = function handleBlur(event) {
+    if (onBlur) onBlur(event);
+  };
+  var handleChange = function handleChange(event) {
+    onChange(event);
+  };
+  var handleFocus = function handleFocus(event) {
+    if (onFocus) onFocus(event);
+  };
+  var inputProps = _extends({
+    'aria-invalid': !!error,
+    'aria-label': label,
+    'aria-labelledby': labelledby,
+    'aria-required': isRequired,
+    id: id,
+    checked: !!isChecked,
+    disabled: isDisabled,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    required: isRequired,
+    type: 'checkbox',
+    ref: inputRef
+  }, value && {
+    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 iconClasses = classNames.apply(void 0, responsiveClasses.map(function (c) {
+    return styles$o[c];
+  }));
+  return React.createElement(Box, _extends({
+    display: display,
+    ref: ref,
+    style: {
+      position: 'relative'
+    },
+    className: containerClasses
+  }, restProps), React.createElement("input", _extends({}, inputProps, {
+    style: {
+      position: 'absolute',
+      opacity: '0'
+    }
+  })), !isHidden && React.createElement(CheckboxIcon, {
+    isChecked: isChecked,
+    isDisabled: isDisabled,
+    isIndeterminate: isIndeterminate,
+    className: iconClasses,
+    error: error
+  }));
+});
+
+var styles$n = {"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-xs');
+  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","help-text":"FormLabel-module_help-text__KmHu7"};
+
+var _excluded$w = ["children", "inputId", "className", "display", "helpText", "isDisabled", "isFieldRequired", "isRadioInputLabel", "requiredIndicator", "margin", "padding"];
+var FormLabel = function FormLabel(_ref) {
+  var _classNames;
+  var children = _ref.children,
+    inputId = _ref.inputId,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    helpText = _ref.helpText,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isFieldRequired = _ref.isFieldRequired,
+    isFieldRequired = _ref$isFieldRequired === void 0 ? false : _ref$isFieldRequired,
+    _ref$isRadioInputLabe = _ref.isRadioInputLabel,
+    isRadioInputLabel = _ref$isRadioInputLabe === void 0 ? false : _ref$isRadioInputLabe,
+    _ref$requiredIndicato = _ref.requiredIndicator,
+    requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
+    _ref$margin = _ref.margin,
+    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));
+  return React.createElement(Box, _extends({
+    as: "label",
+    id: inputId + "Label",
+    className: labelClasses,
+    display: display,
+    margin: margin,
+    padding: padding,
+    htmlFor: inputId
+  }, restProps), children, isFieldRequired && requiredIndicator && React.createElement("span", null, requiredIndicator), helpText && React.createElement(Box, {
+    as: "p",
+    display: "block",
+    fontSize: "sm",
+    color: "secondary",
+    className: styles$m['help-text']
+  }, helpText));
+};
+
+var _excluded$v = ["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',
+  lg: 'sm 0 0 0'
+};
+var computedResponsiveSize = function computedResponsiveSize(
+// eslint-disable-line @typescript-eslint/explicit-module-boundary-types
+size) {
+  if (size && !(typeof size === 'string') && typeof size === 'object') {
+    return Object.entries(size).reduce(function (acc, _ref) {
+      var _extends2;
+      var key = _ref[0],
+        value = _ref[1];
+      return _extends({}, acc, (_extends2 = {}, _extends2[key] = labelMarginSizeMap[value || 'md'], _extends2));
+    }, {});
+  }
+  return labelMarginSizeMap[size || 'md'];
+};
+var CheckboxInput = function CheckboxInput(_ref2) {
+  var id = _ref2.id,
+    isChecked = _ref2.isChecked,
+    label = _ref2.label,
+    onChange = _ref2.onChange,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    _ref2$error = _ref2.error,
+    error = _ref2$error === void 0 ? false : _ref2$error,
+    _ref2$hideLabel = _ref2.hideLabel,
+    hideLabel = _ref2$hideLabel === void 0 ? false : _ref2$hideLabel,
+    helpText = _ref2.helpText,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    _ref2$isIndeterminate = _ref2.isIndeterminate,
+    isIndeterminate = _ref2$isIndeterminate === void 0 ? false : _ref2$isIndeterminate,
+    _ref2$isRequired = _ref2.isRequired,
+    isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired,
+    _ref2$onBlur = _ref2.onBlur,
+    onBlur = _ref2$onBlur === void 0 ? undefined : _ref2$onBlur,
+    _ref2$onFocus = _ref2.onFocus,
+    onFocus = _ref2$onFocus === void 0 ? undefined : _ref2$onFocus,
+    _ref2$requiredIndicat = _ref2.requiredIndicator,
+    requiredIndicator = _ref2$requiredIndicat === void 0 ? ' *' : _ref2$requiredIndicat,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'md' : _ref2$size,
+    restProps = _objectWithoutPropertiesLoose(_ref2, _excluded$v);
+  var handleBlur = function handleBlur(event) {
+    if (onBlur) onBlur(event);
+  };
+  var handleChange = function handleChange(event) {
+    onChange(event);
+  };
+  var handleFocus = function handleFocus(event) {
+    if (onFocus) onFocus(event);
+  };
+  var checkboxProps = {
+    id: id,
+    isChecked: !!isChecked,
+    isDisabled: isDisabled,
+    isIndeterminate: isIndeterminate,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    isRequired: isRequired,
+    size: size,
+    label: label,
+    className: classNames('hyphen-components__variables__form-control', 'm-right-md'),
+    error: error
+  };
+  var labelProps = {
+    inputId: id,
+    helpText: helpText,
+    isDisabled: isDisabled,
+    isFieldRequired: isRequired,
+    requiredIndicator: requiredIndicator,
+    className: classNames.apply(void 0, cssShorthandToClasses('m', computedResponsiveSize(size)))
+  };
+  return React.createElement(Box, _extends({
+    className: className
+  }, restProps), React.createElement(Box, {
+    alignItems: "flex-start",
+    direction: "row"
+  }, React.createElement(Checkbox, _extends({}, checkboxProps, {
+    labelledby: id + "Label"
+  })), label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label)), error && error !== true && React.createElement(InputValidationMessage, null, error));
+};
+
+var styles$l = {};
+
+var _excluded$u = ["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,
+    _ref$dayClassName = _ref.dayClassName,
+    dayClassName = _ref$dayClassName === void 0 ? undefined : _ref$dayClassName,
+    _ref$maxDate = _ref.maxDate,
+    maxDate = _ref$maxDate === void 0 ? undefined : _ref$maxDate,
+    _ref$minDate = _ref.minDate,
+    minDate = _ref$minDate === void 0 ? undefined : _ref$minDate,
+    _ref$monthsShown = _ref.monthsShown,
+    monthsShown = _ref$monthsShown === void 0 ? undefined : _ref$monthsShown,
+    _ref$openToDate = _ref.openToDate,
+    openToDate = _ref$openToDate === void 0 ? undefined : _ref$openToDate,
+    _ref$startDate = _ref.startDate,
+    startDate = _ref$startDate === void 0 ? undefined : _ref$startDate,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? undefined : _ref$selected,
+    _ref$selectsRange = _ref.selectsRange,
+    selectsRange = _ref$selectsRange === void 0 ? undefined : _ref$selectsRange,
+    _ref$showTwoColumnMon = _ref.showTwoColumnMonthYearPicker,
+    showTwoColumnMonthYearPicker = _ref$showTwoColumnMon === void 0 ? false : _ref$showTwoColumnMon,
+    _ref$showFullMonthYea = _ref.showFullMonthYearPicker,
+    showFullMonthYearPicker = _ref$showFullMonthYea === void 0 ? false : _ref$showFullMonthYea,
+    _ref$showMonthYearPic = _ref.showMonthYearPicker,
+    showMonthYearPicker = _ref$showMonthYearPic === void 0 ? false : _ref$showMonthYearPic,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$formatWeekDay = _ref.formatWeekDay,
+    formatWeekDay = _ref$formatWeekDay === void 0 ? function (formattedDate) {
+      return formattedDate[0];
+    } : _ref$formatWeekDay,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+  var datePickerClasses = classNames(styles$l['react-datepicker'], className);
+  return React.createElement(ReactDatePicker, _extends({
+    inline: true,
+    calendarClassName: datePickerClasses,
+    formatWeekDay: formatWeekDay,
+    maxDate: maxDate,
+    minDate: minDate,
+    monthsShown: monthsShown,
+    openToDate: openToDate,
+    selected: selected,
+    startDate: startDate,
+    selectsRange: selectsRange,
+    showTwoColumnMonthYearPicker: showTwoColumnMonthYearPicker,
+    showFullMonthYearPicker: showFullMonthYearPicker,
+    showMonthYearPicker: showMonthYearPicker,
+    dayClassName: dayClassName
+  }, restProps), children);
+};
+
+var _excluded$t = ["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,
+    children = _ref.children,
+    error = _ref.error,
+    id = _ref.id,
+    isRequired = _ref.isRequired,
+    helpText = _ref.helpText,
+    isDisabled = _ref.isDisabled,
+    requiredIndicator = _ref.requiredIndicator,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100' : _ref$width,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+  var labelProps = {
+    inputId: id,
+    helpText: helpText,
+    margin: '0 0 xs 0',
+    isDisabled: isDisabled,
+    isFieldRequired: isRequired,
+    requiredIndicator: requiredIndicator
+  };
+  return React.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));
+});
+
+// eslint-disable-next-line import/prefer-default-export
+function getAutoCompleteValue(value) {
+  if (!value || typeof value !== 'boolean' && typeof value !== 'string') {
+    return 'off';
+  }
+  if (typeof value === 'boolean' && value) {
+    return 'on';
+  }
+  return value;
+}
+
+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 TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref2;
+  var id = _ref.id,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? false : _ref$autoComplete,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    helpText = _ref.helpText,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$maxLength = _ref.maxLength,
+    maxLength = _ref$maxLength === void 0 ? undefined : _ref$maxLength,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? '' : _ref$name,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
+    _ref$onClear = _ref.onClear,
+    onClear = _ref$onClear === void 0 ? undefined : _ref$onClear,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
+    _ref$prefix = _ref.prefix,
+    prefix = _ref$prefix === void 0 ? undefined : _ref$prefix,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    _ref$requiredIndicato = _ref.requiredIndicator,
+    requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
+    _ref$suffix = _ref.suffix,
+    suffix = _ref$suffix === void 0 ? undefined : _ref$suffix,
+    _ref$size = _ref.size,
+    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);
+  var responsiveClasses = generateResponsiveClasses('size', size);
+  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);
+    };
+    return React.createElement("button", {
+      type: "button",
+      onClick: onClear,
+      onKeyUp: handleKeyPress,
+      className: clearBtnClasses,
+      "data-testid": "text-input-clear-button",
+      "aria-label": "clear input"
+    }, React.createElement(Icon, {
+      name: "remove",
+      className: "display-block"
+    }));
+  };
+  var computedInputProps = _extends({}, inputProps, {
+    // These are spread first so that we don't have top level props overwritten by the user.
+    'aria-required': isRequired,
+    'aria-invalid': !!error,
+    'aria-label': label,
+    'aria-labelledby': label && !hideLabel ? id + "Label" : undefined,
+    autoComplete: getAutoCompleteValue(autoComplete),
+    autoFocus: autoFocus,
+    disabled: isDisabled,
+    id: id,
+    maxLength: maxLength,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    placeholder: placeholder,
+    required: isRequired,
+    type: type,
+    value: value,
+    className: classNames(inputProps.className, {
+      // 'p-left-xs p-left-xs-tablet p-left-xs-desktop p-left-xs-hd': prefix,
+      // 'p-right-xs p-right-xs-tablet p-right-xs-desktop p-right-xs-hd': suffix,
+      'p-h-0': !suffix && !prefix
+    })
+  });
+  return React.createElement(FormControl, _extends({
+    helpText: helpText,
+    error: error,
+    label: label,
+    id: id,
+    hideLabel: hideLabel,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    requiredIndicator: requiredIndicator,
+    ref: ref
+  }, restProps), React.createElement(Box, {
+    direction: "row",
+    overflow: "hidden",
+    className: inputWrapperClasses
+  }, prefix && React.createElement(Box, {
+    color: "secondary",
+    background: "secondary",
+    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$k.suffix, 'ws-nowrap')
+  }, suffix)));
+});
+
+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) {
+  var INTERNAL_KEY_PREFIX = 'columnKeyPrefix';
+  var columnKeys = [];
+  var keys = {};
+  columns.forEach(function (column) {
+    var _ref = column || {},
+      key = _ref.key,
+      dataKey = _ref.dataKey;
+    var shapedDataKey = dataKey != null && dataKey.includes(' ') ? dataKey.split(' ').join('-') : dataKey;
+    var mergedKey = key || shapedDataKey || INTERNAL_KEY_PREFIX;
+    while (keys[mergedKey]) {
+      mergedKey = mergedKey + "_next";
+    }
+    keys[mergedKey] = true;
+    columnKeys.push(mergedKey);
+  });
+  return columnKeys;
+};
+
+var isFunction = function isFunction(
+// eslint-disable-line import/prefer-default-export
+valOrFunction) {
+  return typeof valOrFunction === 'function';
+};
+
+function mergeRefs(refs) {
+  return function (value) {
+    refs.forEach(function (ref) {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
+var prefersReducedMotion = /*#__PURE__*/function () {
+  // eslint-disable-line import/prefer-default-export
+  var shouldReduceMotion;
+  return function () {
+    if (shouldReduceMotion === undefined) {
+      var _window;
+      var mediaQuery = (_window = window) == null ? void 0 : _window.matchMedia('(prefers-reduced-motion: reduce)');
+      shouldReduceMotion = !mediaQuery || mediaQuery.matches;
+    }
+    return shouldReduceMotion;
+  };
+}();
+
+var resolveValue = function resolveValue(
+// eslint-disable-line import/prefer-default-export
+valOrFunction, arg) {
+  return isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction;
+};
+
+// export const BREAKPOINT_VALUES = Object.values(designTokens.size.breakpoint);
+var BREAKPOINTS = /*#__PURE__*/[].concat(Object.entries(designTokens.size.breakpoint), [['base', {
+  value: '0'
+}]]).map(function (_ref) {
+  var name = _ref[0],
+    data = _ref[1];
+  if (typeof data === 'object' && data !== null && 'value' in data) {
+    return {
+      name: name,
+      minWidth: parseInt(data['value'], 10)
+    };
+  }
+});
+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 contentContainerDefaults = {
+  background: 'primary',
+  padding: 'sm',
+  radius: 'sm',
+  shadow: 'md'
+};
+var Popover = function Popover(_ref) {
+  var className = _ref.className,
+    isOpen = _ref.isOpen,
+    children = _ref.children,
+    content = _ref.content,
+    _ref$arrowColor = _ref.arrowColor,
+    arrowColor = _ref$arrowColor === void 0 ? undefined : _ref$arrowColor,
+    _ref$contentContainer = _ref.contentContainerProps,
+    contentContainerProps = _ref$contentContainer === void 0 ? _extends({}, contentContainerDefaults) : _ref$contentContainer,
+    _ref$hasArrow = _ref.hasArrow,
+    hasArrow = _ref$hasArrow === void 0 ? true : _ref$hasArrow,
+    _ref$offsetFromTarget = _ref.offsetFromTarget,
+    offsetFromTarget = _ref$offsetFromTarget === void 0 ? 12 : _ref$offsetFromTarget,
+    _ref$onClickOutside = _ref.onClickOutside,
+    onClickOutside = _ref$onClickOutside === void 0 ? undefined : _ref$onClickOutside,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'right' : _ref$placement,
+    _ref$withPortal = _ref.withPortal,
+    withPortal = _ref$withPortal === void 0 ? false : _ref$withPortal,
+    portalTarget = _ref.portalTarget,
+    _ref$trapFocus = _ref.trapFocus,
+    trapFocus = _ref$trapFocus === void 0 ? false : _ref$trapFocus,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+  var triggerRef = React.useRef(null);
+  var popperRef = React.useRef(null);
+  var _useState = React.useState(null),
+    arrowElement = _useState[0],
+    setArrowElement = _useState[1];
+  React.useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      var popover = popperRef.current;
+      var trigger = triggerRef.current;
+      if (!popover || !trigger) {
+        return;
+      }
+      if (event.target === trigger || trigger != null && trigger.contains(event.target)) {
+        return;
+      }
+      if (event.target !== popover && !(popover != null && popover.contains(event.target))) {
+        if (onClickOutside) onClickOutside(event);
+      }
+    };
+    var handleKeyUp = function handleKeyUp(event) {
+      if (event.key === 'Escape') {
+        if (onClickOutside) onClickOutside(event);
+      }
+    };
+    if (onClickOutside) {
+      document.body.addEventListener('click', handleClickOutside, false);
+      document.body.addEventListener('keyup', handleKeyUp);
+    }
+    return function () {
+      if (onClickOutside) {
+        document.body.removeEventListener('click', handleClickOutside, false);
+        document.body.removeEventListener('keyup', handleKeyUp);
+      }
+    };
+  }, [onClickOutside]);
+  var _usePopper = reactPopper.usePopper(triggerRef.current, popperRef.current, {
+      placement: placement,
+      modifiers: [{
+        name: 'arrow',
+        options: {
+          element: arrowElement
+        }
+      }, {
+        name: 'offset',
+        options: {
+          offset: [0, offsetFromTarget]
+        }
+      }]
+    }),
+    popperStyles = _usePopper.styles,
+    attributes = _usePopper.attributes;
+  var containerBoxProps = _extends({}, contentContainerDefaults, contentContainerProps);
+  var computedArrowColor = arrowColor || containerBoxProps.background;
+  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$j.popover, className),
+        style: popperStyles.popper,
+        role: "dialog",
+        "aria-label": "Popover",
+        "aria-hidden": !isOpen
+      }, containerBoxProps, attributes.popper, restProps), React.createElement("div", {
+        ref: setArrowElement,
+        style: popperStyles.arrow,
+        className: arrowClasses,
+        "data-popper-arrow": true
+      }), content);
+    };
+    return trapFocus ? React.createElement(FocusTrap, {
+      active: isOpen,
+      focusTrapOptions: {
+        clickOutsideDeactivates: true
+      }
+    }, renderPopperBox()) : renderPopperBox();
+  };
+  var childrenWithRef = React.Children.map(children, function (child) {
+    var childProps = {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref: triggerRef,
+      role: 'button',
+      'aria-expanded': isOpen,
+      'aria-haspopup': true
+    };
+    // Merge local ref with any ref passed originally to child component.
+    // We have to cast with `as` so TS compiler doesn't complain since ReactNode/ReactChild types don't
+    // explicitly declare ref as a property in the object.
+    if (child != null && child.ref) {
+      // eslint-disable-line @typescript-eslint/no-explicit-any
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      childProps.ref = mergeRefs([child == null ? void 0 : child.ref, childProps.ref]);
+    }
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, childProps);
+    }
+    return child;
+  });
+  return React.createElement(React.Fragment, null, childrenWithRef, isOpen && (
+  // portalTarget should always be defined if withPortal is true, but better safe than sorry here!
+  withPortal && portalTarget ? reactDom.createPortal(renderPopperContent(), portalTarget) : renderPopperContent()));
+};
+
+var _excluded$q = ["datePickerProps", "textInputProps", "dateFormat", "dateOptions", "popoverProps"];
+var defaultDatePickerProps = {
+  selected: null,
+  selectsRange: false
+};
+var defaultPopoverProps = {
+  placement: 'bottom'
+};
+var defaultTextInputProps = {
+  label: 'Select Date'
+};
+var DateInput = function DateInput(_ref) {
+  var datePickerProps = _ref.datePickerProps,
+    textInputProps = _ref.textInputProps,
+    _ref$dateFormat = _ref.dateFormat,
+    dateFormat = _ref$dateFormat === void 0 ? 'MM/dd/yyyy' : _ref$dateFormat,
+    _ref$dateOptions = _ref.dateOptions,
+    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);
+  var mergedDatePickerProps = _extends({}, defaultDatePickerProps, datePickerProps);
+  var mergedPopoverProps = _extends({}, defaultPopoverProps, popoverProps);
+  var mergedTextInputProps = _extends({}, defaultTextInputProps, textInputProps);
+  var getTextInputValue = function getTextInputValue() {
+    var selectsRange = mergedDatePickerProps.selectsRange,
+      startDate = mergedDatePickerProps.startDate,
+      endDate = mergedDatePickerProps.endDate,
+      selected = mergedDatePickerProps.selected;
+    var formattedStartDate = startDate ? format(startDate, dateFormat, dateOptions) : '';
+    var formattedEndDate = endDate ? format(endDate, dateFormat, dateOptions) : '';
+    var formattedSelectedDate = selected ? format(selected, dateFormat, dateOptions) : '';
+    if (selectsRange) {
+      return "" + formattedStartDate + (formattedStartDate || formattedEndDate ? ' - ' : '') + formattedEndDate;
+    }
+    return formattedSelectedDate;
+  };
+  var _useState = React.useState(false),
+    isPopoverOpen = _useState[0],
+    setPopoverOpen = _useState[1];
+  var handleTogglePopover = function handleTogglePopover(newPopoverOpenState) {
+    setPopoverOpen(newPopoverOpenState);
+  };
+  var handleDatePickerChange = function handleDatePickerChange(date, event // eslint-disable-line @typescript-eslint/no-explicit-any
+  ) {
+    mergedDatePickerProps.onChange(date, event);
+    if (!mergedDatePickerProps.selectsRange && date) setPopoverOpen(false);
+  };
+  /**
+   * This function is a one-off workaround to an edge case when detecting outside clicks.
+   * in Popover.tsx, outside clicks are detected by seeing if the clicked element is a child
+   * of the popover, which would mean it is NOT an outside click. However, when using min/max dates
+   * in the Datepicker, the month navigation elements are removed from the DOM when the max/min date has been reached.
+   * Because our outside click detector sees that the clicked element
+   * is not a child of the popover (it doesn't exist in the DOM anymore)
+   * It registers an outside click and closes the Popover.
+   * With this code we specifically guard against closing the popover
+   * if a user has clicked one of the month navigation arrows.
+   * */
+  var handleOnClickOutside = function handleOnClickOutside(event) {
+    var target = event.target;
+    if (target.className.includes('react-datepicker__navigation')) {
+      return;
+    }
+    handleTogglePopover(false);
+  };
+  var renderDatePicker = function renderDatePicker() {
+    return React.createElement(DatePicker, _extends({}, mergedDatePickerProps, {
+      onChange: handleDatePickerChange,
+      selected: mergedDatePickerProps.selected,
+      selectsRange: mergedDatePickerProps.selectsRange
+    }));
+  };
+  return React.createElement(Popover, _extends({}, mergedPopoverProps, {
+    isOpen: isPopoverOpen,
+    content: renderDatePicker(),
+    withPortal: true,
+    portalTarget: document.body,
+    onClickOutside: handleOnClickOutside
+  }), React.createElement(TextInput, _extends({}, mergedTextInputProps, {
+    id: mergedTextInputProps.id,
+    name: mergedTextInputProps.name,
+    label: mergedTextInputProps.label,
+    value: getTextInputValue(),
+    onChange: function onChange() {
+      return null;
+    },
+    onClick: function onClick() {
+      return handleTogglePopover(true);
+    },
+    readOnly: true
+  }, restProps)));
+};
+
+var ENTER = 13;
+var SPACE = 32;
+
+var _excluded$p = ["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);
+  var handleClick = function handleClick(event) {
+    // Needed to avoid default `details` behavior on a click event and keep this as controlled component.
+    event.preventDefault();
+    if (!onToggle && !(restProps != null && restProps.onClick)) return;
+    if (onToggle) {
+      onToggle(event);
+    }
+    if (restProps != null && restProps.onClick) {
+      restProps.onClick(event);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if ([ENTER, SPACE].indexOf(event.keyCode) !== -1) {
+      // Needed to avoid default `details` behavior on a click event and keep this as controlled component.
+      event.preventDefault();
+    }
+    if (!onToggle && !(restProps != null && restProps.onKeyDown)) return;
+    if (onToggle && [ENTER, SPACE].indexOf(event.keyCode) !== -1) {
+      onToggle(event);
+    }
+    if (restProps != null && restProps.onKeyDown) {
+      restProps.onKeyDown(event);
+    }
+  };
+  return React.createElement(Box, _extends({}, restProps, {
+    as: "summary",
+    display: display,
+    role: "button",
+    "aria-expanded": isDetailsOpen,
+    tabIndex: 0,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  }), children);
+};
+
+var styles$i = {"details-reset":"Details-module_details-reset__HWtSD"};
+
+var _excluded$o = ["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$i['details-reset'], styles$i.details);
+  return React.createElement(Box, _extends({
+    as: "details",
+    className: detailsClasses,
+    display: display,
+    open: isOpen,
+    ref: ref
+  }, restProps), children);
+});
+// Actual component is wrapped in an IIFE for the export
+// To allow tree-shaking even with static properties (subcomponents in this case).
+var Details = /*#__PURE__*/function () {
+  var Details = DetailsBaseComponent; // eslint-disable-line no-shadow
+  Details.Summary = DetailsSummary;
+  return Details;
+}();
+
+var styles$h = {"drawer":"Drawer-module_drawer__IKoOm","hide-overlay-right":"Drawer-module_hide-overlay-right__FANA9","hide-overlay-left":"Drawer-module_hide-overlay-left__xZFa3","hide-overlay-bottom":"Drawer-module_hide-overlay-bottom__11EB1","hide-overlay-top":"Drawer-module_hide-overlay-top__kEsV5","drawer-content":"Drawer-module_drawer-content__zZ9xR","left":"Drawer-module_left__pwTcW","right":"Drawer-module_right__EzGpI","bottom":"Drawer-module_bottom__r3Q5Z","top":"Drawer-module_top__xQejO"};
+
+var Drawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _dynamicStyle, _classNames, _classNames2;
+  var _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? undefined : _ref$ariaLabel,
+    _ref$ariaLabelledBy = _ref.ariaLabelledBy,
+    ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? undefined : _ref$ariaLabelledBy,
+    _ref$allowPinchZoom = _ref.allowPinchZoom,
+    allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? undefined : _ref$children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$closeButton = _ref.closeButton,
+    closeButton = _ref$closeButton === void 0 ? false : _ref$closeButton,
+    _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
+    closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
+    _ref$containerRef = _ref.containerRef,
+    containerRef = _ref$containerRef === void 0 ? undefined : _ref$containerRef,
+    _ref$dangerouslyBypas = _ref.dangerouslyBypassFocusLock,
+    dangerouslyBypassFocusLock = _ref$dangerouslyBypas === void 0 ? false : _ref$dangerouslyBypas,
+    _ref$dangerouslyBypas2 = _ref.dangerouslyBypassScrollLock,
+    dangerouslyBypassScrollLock = _ref$dangerouslyBypas2 === void 0 ? false : _ref$dangerouslyBypas2,
+    _ref$hideOverlay = _ref.hideOverlay,
+    hideOverlay = _ref$hideOverlay === void 0 ? false : _ref$hideOverlay,
+    _ref$initialFocusRef = _ref.initialFocusRef,
+    initialFocusRef = _ref$initialFocusRef === void 0 ? undefined : _ref$initialFocusRef,
+    isOpen = _ref.isOpen,
+    _ref$onDismiss = _ref.onDismiss,
+    onDismiss = _ref$onDismiss === void 0 ? undefined : _ref$onDismiss,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'right' : _ref$placement,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? undefined : _ref$title,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? undefined : _ref$width;
+  var activateFocusLock = React.useCallback(function () {
+    setTimeout(function () {
+      if (initialFocusRef && initialFocusRef.current) {
+        initialFocusRef.current.focus();
+      }
+    }, 100);
+  }, [initialFocusRef]);
+  var dynamicWidth = width;
+  var dynamicStyle = (_dynamicStyle = {}, _dynamicStyle['--w'] = dynamicWidth, _dynamicStyle);
+  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, {
+        alignItems: "flex-end",
+        justifyContent: "center",
+        padding: "md lg"
+      }, React.createElement(Button, {
+        variant: "tertiary",
+        onClick: onDismiss,
+        "aria-label": "close",
+        type: "button",
+        iconPrefix: "remove"
+      }));
+    }
+    if (title) {
+      return React.createElement(Box, {
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "2xl"
+      }, React.createElement(Box, {
+        className: styles$h.title,
+        fontWeight: "bold"
+      }, title), onDismiss && React.createElement(Button, {
+        variant: "tertiary",
+        onClick: onDismiss,
+        "aria-label": "close",
+        type: "button",
+        iconPrefix: "remove"
+      }));
+    }
+    return null;
+  };
+  var content = title || closeButton ? React.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, {
+    autoFocus: true,
+    returnFocus: true,
+    disabled: isDisabledFocusLock || !isOpen,
+    onActivation: activateFocusLock
+  }, React.createElement(reactRemoveScroll.RemoveScroll, {
+    allowPinchZoom: allowPinchZoom,
+    enabled: !isDisabledRemoveScroll && isOpen
+  }, React.createElement(Box, {
+    ref: ref
+  }, React.createElement(ReactModal, {
+    isOpen: isOpen,
+    overlayClassName: overlayClassnames,
+    className: contentClassnames,
+    onRequestClose: closeOnOverlayClick ? onDismiss : undefined,
+    ariaHideApp: false,
+    style: {
+      content: dynamicStyle,
+      overlay: dynamicStyle
+    },
+    parentSelector: function parentSelector() {
+      return parentElement;
+    }
+  }, React.createElement(Box, {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, renderHeader(), content)))));
+});
+
+var _excluded$n = ["field", "form", "onChange", "id", "label"];
+var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    formikOnChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    onChange = _ref.onChange,
+    id = _ref.id,
+    label = _ref.label,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+  return React.createElement(CheckboxInput, _extends({}, props, {
+    id: id,
+    label: label,
+    error: formik.getIn(touched, name) && formik.getIn(errors, name),
+    isChecked: value,
+    onBlur: onBlur,
+    onChange: onChange != null ? onChange : formikOnChange
+  }));
+};
+
+var _excluded$m = ["className", "isSelected", "isDisabled", "error"];
+var RadioInputIcon = function RadioInputIcon(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isDisabled = _ref.isDisabled,
+    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);
+  var color = 'secondary';
+  var name = 'radio-btn-unchecked';
+  if (isSelected && isDisabled) {
+    color = 'disabled';
+    name = 'radio-btn-checked';
+  } else if (isSelected && !isDisabled) {
+    color = 'base';
+    name = 'radio-btn-checked';
+  } else if (isDisabled) {
+    color = 'disabled';
+  }
+  if (error) color = 'danger';
+  if (isDisabled && error) color = 'danger-disabled';
+  return React.createElement(Box, _extends({
+    className: className
+  }, restProps), React.createElement(Icon, {
+    color: color,
+    name: name
+  }));
+};
+
+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;
+  var name = _ref.name,
+    onChange = _ref.onChange,
+    option = _ref.option,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isHidden = _ref.isHidden,
+    isHidden = _ref$isHidden === void 0 ? false : _ref$isHidden,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
+    _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$g[c];
+  }));
+  var labelProps = {
+    inputId: option.id,
+    isDisabled: isDisabled,
+    display: 'flex',
+    isRadioInputLabel: true,
+    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, {
+    className: containerClasses,
+    key: option.id,
+    direction: "row",
+    alignItems: "center",
+    ref: ref,
+    position: "relative"
+  }, React.createElement(Box, {
+    "aria-required": isRequired,
+    as: "input",
+    id: option.id,
+    type: "radio",
+    name: name,
+    value: option.value,
+    checked: isSelected,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: isDisabled,
+    position: "absolute",
+    required: isRequired,
+    style: {
+      opacity: '0'
+    },
+    margin: isHidden ? '0' : '0 xs 0 2xs'
+  }), !isHidden && React.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)));
+});
+
+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 RadioGroup = function RadioGroup(_ref) {
+  var _classNames;
+  var name = _ref.name,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? undefined : _ref$description,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'column' : _ref$direction,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
+    _ref$requiredIndicato = _ref.requiredIndicator,
+    requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$title = _ref.title,
+    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$f.loading] = error, _classNames));
+  return React.createElement("div", _extends({
+    className: classNames(styles$f['radio-group'], groupClasses)
+  }, restProps), React.createElement("fieldset", {
+    className: styles$f.fieldset
+  }, (title || description) && React.createElement("legend", {
+    className: styles$f.legend
+  }, title, isRequired && React.createElement("span", null, requiredIndicator), description && React.createElement("div", {
+    className: styles$f.description
+  }, description)), React.createElement(Box, {
+    direction: direction,
+    gap: "sm",
+    className: styles$f.options
+  }, options && options.map(function (option) {
+    return React.createElement(RadioInput, {
+      key: option.id,
+      name: name,
+      onChange: onChange,
+      option: option,
+      isDisabled: isDisabled || option.disabled || false,
+      isRequired: isRequired,
+      isSelected: value === option.value,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      size: size
+    });
+  }))), error && typeof error !== 'boolean' && React.createElement(InputValidationMessage, null, error));
+};
+
+var _excluded$k = ["field", "form", "onChange", "options"];
+var FormikRadioGroup = function FormikRadioGroup(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    formikOnChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+  return React.createElement(RadioGroup, _extends({}, props, {
+    options: options,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange != null ? onChange : formikOnChange,
+    value: value,
+    error: formik.getIn(touched, name) && formik.getIn(errors, name)
+  }));
+};
+
+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 SelectInput = function SelectInput(_ref) {
+  var _ref2, _classNames;
+  var id = _ref.id,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    value = _ref.value,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    helpText = _ref.helpText,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+    _ref$isClearable = _ref.isClearable,
+    isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isMulti = _ref.isMulti,
+    isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$menuPortalTarget = _ref.menuPortalTarget,
+    menuPortalTarget = _ref$menuPortalTarget === void 0 ? null : _ref$menuPortalTarget,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? '' : _ref$name,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? null : _ref$onFocus,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? null : _ref$onBlur,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? undefined : _ref$placeholder,
+    _ref$requiredIndicato = _ref.requiredIndicator,
+    requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+  var handleChange = function handleChange(values) {
+    var simulatedEventPayloadType = {
+      target: {
+        name: name,
+        value: values
+      }
+    };
+    onChange(simulatedEventPayloadType);
+  };
+  var handleFocus = function handleFocus(e) {
+    if (onFocus) onFocus(e);
+  };
+  var handleBlur = function handleBlur(e) {
+    if (onBlur) onBlur(e);
+  };
+  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$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$e['select-input-label'],
+    isDisabled: isDisabled,
+    isFieldRequired: isRequired,
+    requiredIndicator: requiredIndicator
+  };
+  var ClearIndicator = function ClearIndicator(props) {
+    return React.createElement(Select.components.ClearIndicator, _extends({}, props), React.createElement(Icon, {
+      name: "remove"
+    }));
+  };
+  return React.createElement(Box, {
+    width: "100%",
+    className: wrapperClasses
+  }, label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(Select, _extends({}, restProps, {
+    inputId: id,
+    "aria-label": label,
+    components: {
+      ClearIndicator: ClearIndicator
+    },
+    "aria-labelledby": label && !hideLabel ? id + "Label" : undefined,
+    className: inputClasses,
+    classNamePrefix: "react-select",
+    placeholder: placeholder,
+    isClearable: isClearable,
+    isDisabled: isDisabled,
+    isMulti: isMulti,
+    menuPortalTarget: menuPortalTarget,
+    name: name,
+    autoFocus: autoFocus,
+    options: options,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    styles: {
+      menuPortal: function menuPortal(base) {
+        return _extends({}, base, {
+          zIndex: Number(Z_INDEX_VALUES.popover)
+        });
+      }
+    },
+    value: value
+  })), error && typeof error !== 'boolean' && React.createElement(InputValidationMessage, null, error));
+};
+
+var _excluded$i = ["field", "form", "onChange", "id", "label", "options"];
+var FormikSelectInput = function FormikSelectInput(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    formikOnChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    onChange = _ref.onChange,
+    id = _ref.id,
+    label = _ref.label,
+    options = _ref.options,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+  return React.createElement(SelectInput, _extends({}, props, {
+    id: id,
+    label: label,
+    options: options,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange != null ? onChange : formikOnChange,
+    value: value,
+    error: formik.getIn(touched, name) && formik.getIn(errors, name)
+  }));
+};
+
+var styles$d = {"help-text":"HelpText-module_help-text__8WodW"};
+
+var HelpText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  return React.createElement(Box, {
+    ref: ref,
+    className: classNames('hyphen-components__variables__form-control', styles$d['help-text'], className),
+    display: "block",
+    color: "secondary",
+    fontSize: "sm"
+  }, children);
+});
+
+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 SelectInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref2;
+  var id = _ref.id,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? false : _ref$autoComplete,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    helpText = _ref.helpText,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? '' : _ref$name,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
+    _ref$onClear = _ref.onClear,
+    onClear = _ref$onClear === void 0 ? undefined : _ref$onClear,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
+    options = _ref.options,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Select...' : _ref$placeholder,
+    _ref$requiredIndicato = _ref.requiredIndicator,
+    requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size;
+  var placeholderOption = {
+    value: '',
+    label: placeholder
+  };
+  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 renderClearIcon = function renderClearIcon() {
+    var handleKeyPress = function handleKeyPress(event) {
+      if (event.keyCode === 13 && onClear) onClear(event);
+    };
+    return React.createElement("button", {
+      type: "button",
+      onClick: onClear,
+      onKeyUp: handleKeyPress,
+      className: clearBtnClasses,
+      "data-testid": "text-input-clear-button",
+      "aria-label": "clear input"
+    }, React.createElement(Icon, {
+      name: "remove",
+      className: "display-block"
+    }));
+  };
+  var computedInputProps = _extends({}, inputProps, {
+    // These are spread first so that we don't have top level props overwritten by the user.
+    'aria-required': isRequired,
+    'aria-invalid': !!error,
+    'aria-label': label,
+    'aria-labelledby': label ? id + "Label" : undefined,
+    autoComplete: getAutoCompleteValue(autoComplete),
+    autoFocus: autoFocus,
+    disabled: isDisabled,
+    id: id,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    required: isRequired,
+    value: value != null ? value : '',
+    className: classNames(inputProps.className)
+  });
+  return React.createElement("div", {
+    ref: ref
+  }, React.createElement(Box, {
+    direction: "row",
+    flex: "auto",
+    position: "relative",
+    className: inputWrapperClasses
+  }, React.createElement(Box, _extends({
+    as: "select"
+  }, computedInputProps), optionsWithPlaceholder.map(function (option) {
+    return React.createElement(Box, {
+      as: "option",
+      key: option.value,
+      value: option.value,
+      disabled: option.value === '',
+      hidden: option.value === '',
+      color: option.value === '' ? 'secondary' : 'base'
+    }, option.label);
+  })), !!onClear && !!value && renderClearIcon(), React.createElement("label", {
+    htmlFor: id,
+    className: styles$c['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 FormikSelectInputInset = function FormikSelectInputInset(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    formikOnChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    onChange = _ref.onChange,
+    id = _ref.id,
+    label = _ref.label,
+    options = _ref.options,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+  return React.createElement(SelectInputInset, _extends({}, props, {
+    id: id,
+    label: label,
+    options: options,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange != null ? onChange : formikOnChange,
+    value: value,
+    error: formik.getIn(touched, name) && formik.getIn(errors, name)
+  }));
+};
+
+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 TextareaInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref2, _classNames;
+  var id = _ref.id,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? false : _ref$autoComplete,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    className = _ref.className,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    helpText = _ref.helpText,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$maxLength = _ref.maxLength,
+    maxLength = _ref$maxLength === void 0 ? undefined : _ref$maxLength,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? '' : _ref$name,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? ' ' : _ref$placeholder,
+    _ref$requiredIndicato = _ref.requiredIndicator,
+    requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
+    _ref$resize = _ref.resize,
+    resize = _ref$resize === void 0 ? 'vertical' : _ref$resize,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? 5 : _ref$rows,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _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 computedInputProps = _extends({}, inputProps, {
+    // These are spread first so that we don't have top level props overwritten by the user.
+    'aria-required': isRequired,
+    'aria-invalid': !!error,
+    'aria-label': label,
+    '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)),
+    disabled: isDisabled,
+    id: id,
+    maxLength: maxLength,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    placeholder: placeholder,
+    required: isRequired,
+    rows: rows,
+    type: type,
+    value: value
+  });
+  return React.createElement(Box, {
+    width: "100",
+    ref: ref,
+    className: className
+  }, React.createElement(Box, {
+    display: "block",
+    position: "relative",
+    className: inputWrapperClasses
+  }, React.createElement(Box, _extends({
+    as: "textarea"
+  }, computedInputProps)), React.createElement("label", {
+    htmlFor: id,
+    className: styles$b['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 FormikTextareaInputInset = function FormikTextareaInputInset(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    formikOnChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    onChange = _ref.onChange,
+    id = _ref.id,
+    label = _ref.label,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+  return React.createElement(TextareaInputInset, _extends({}, props, {
+    id: id,
+    label: label,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange != null ? onChange : formikOnChange,
+    value: value,
+    error: formik.getIn(touched, name) && formik.getIn(errors, name)
+  }));
+};
+
+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 TextInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref2;
+  var id = _ref.id,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? false : _ref$autoComplete,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    helpText = _ref.helpText,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$maxLength = _ref.maxLength,
+    maxLength = _ref$maxLength === void 0 ? undefined : _ref$maxLength,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? '' : _ref$name,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
+    _ref$onClear = _ref.onClear,
+    onClear = _ref$onClear === void 0 ? undefined : _ref$onClear,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
+    _ref$prefix = _ref.prefix,
+    prefix = _ref$prefix === void 0 ? undefined : _ref$prefix,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? ' ' : _ref$placeholder,
+    _ref$requiredIndicato = _ref.requiredIndicator,
+    requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
+    _ref$suffix = _ref.suffix,
+    suffix = _ref$suffix === void 0 ? undefined : _ref$suffix,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _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 renderClearIcon = function renderClearIcon() {
+    var handleKeyPress = function handleKeyPress(event) {
+      if (event.keyCode === 13 && onClear) onClear(event);
+    };
+    return React.createElement("button", {
+      type: "button",
+      onClick: onClear,
+      onKeyUp: handleKeyPress,
+      className: clearBtnClasses,
+      "data-testid": "text-input-clear-button",
+      "aria-label": "clear input"
+    }, React.createElement(Icon, {
+      name: "remove",
+      className: "display-block"
+    }));
+  };
+  var computedInputProps = _extends({}, inputProps, {
+    // These are spread first so that we don't have top level props overwritten by the user.
+    'aria-required': isRequired,
+    'aria-invalid': !!error,
+    'aria-label': label,
+    'aria-labelledby': label ? id + "Label" : undefined,
+    autoComplete: getAutoCompleteValue(autoComplete),
+    autoFocus: autoFocus,
+    disabled: isDisabled,
+    id: id,
+    maxLength: maxLength,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    placeholder: placeholder,
+    required: isRequired,
+    type: type,
+    value: value,
+    className: classNames(inputProps.className)
+  });
+  return React.createElement(Box, {
+    width: "100",
+    ref: ref
+  }, React.createElement(Box, {
+    direction: "row",
+    className: inputWrapperClasses
+  }, prefix && React.createElement(Box, {
+    color: "base",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "secondary",
+    className: classNames(styles$a.prefix, 'ws-nowrap')
+  }, prefix), React.createElement(Box, {
+    direction: "row",
+    position: "relative",
+    className: "label-input-wrapper",
+    flex: "auto"
+  }, React.createElement(Box, _extends({
+    as: "input"
+  }, computedInputProps)), !!onClear && !!value && renderClearIcon(), React.createElement("label", {
+    htmlFor: id,
+    className: styles$a['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')
+  }, suffix)), helpText && React.createElement(HelpText, null, helpText), error && error !== true && React.createElement(InputValidationMessage, null, error));
+});
+
+var _excluded$f = ["field", "form", "onChange", "id", "label"];
+var FormikTextInputInset = function FormikTextInputInset(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    formikOnChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    onChange = _ref.onChange,
+    id = _ref.id,
+    label = _ref.label,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  return React.createElement(TextInputInset, _extends({}, props, {
+    id: id,
+    label: label,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange != null ? onChange : formikOnChange,
+    value: value,
+    error: formik.getIn(touched, name) && formik.getIn(errors, name)
+  }));
+};
+
+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 _excluded$e = ["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,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    label = _ref.label,
+    hideLabel = _ref.hideLabel,
+    helpText = _ref.helpText,
+    error = _ref.error,
+    id = _ref.id,
+    isDisabled = _ref.isDisabled,
+    isRequired = _ref.isRequired,
+    name = _ref.name,
+    value = _ref.value,
+    options = _ref.options,
+    onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Select...' : _ref$placeholder,
+    _ref$requiredIndicato = _ref.requiredIndicator,
+    requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+  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)]));
+  return React.createElement(FormControl, _extends({
+    label: label,
+    hideLabel: hideLabel,
+    id: id,
+    error: error,
+    helpText: helpText,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    requiredIndicator: requiredIndicator
+  }, restProps), React.createElement(Box, {
+    className: selectWrapperClasses
+  }, React.createElement(Box, {
+    as: "select",
+    "aria-label": label,
+    "aria-labelledby": label && !hideLabel ? id + "Label" : undefined,
+    "aria-required": isRequired,
+    value: value != null ? value : '',
+    onChange: onChange,
+    color: !value ? 'disabled' : 'base',
+    autoFocus: autoFocus,
+    disabled: isDisabled,
+    name: name,
+    id: id,
+    required: isRequired
+  }, optionsWithPlaceholder.map(function (option) {
+    return React.createElement(Box, {
+      as: "option",
+      key: option.value,
+      value: option.value,
+      disabled: option.value === '',
+      hidden: option.value === '',
+      color: option.value === '' ? 'disabled' : 'base'
+    }, option.label);
+  }))));
+};
+
+var _excluded$d = ["field", "form", "onChange", "options", "id", "label"];
+var FormikSelectInputNative = function FormikSelectInputNative(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    formikOnChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    id = _ref.id,
+    label = _ref.label,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  return React.createElement(SelectInputNative, _extends({}, props, {
+    options: options,
+    id: id,
+    label: label,
+    onChange: onChange != null ? onChange : formikOnChange,
+    name: name,
+    onBlur: onBlur,
+    value: value,
+    error: formik.getIn(touched, name) && formik.getIn(errors, name)
+  }));
+};
+
+var _excluded$c = ["field", "form", "onChange", "id", "label"];
+var FormikTextInput = function FormikTextInput(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    formikOnChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    onChange = _ref.onChange,
+    id = _ref.id,
+    label = _ref.label,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  return React.createElement(TextInput, _extends({}, props, {
+    id: id,
+    label: label,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange != null ? onChange : formikOnChange,
+    value: value,
+    error: formik.getIn(touched, name) && formik.getIn(errors, name)
+  }));
+};
+
+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 _excluded$b = ["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,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? false : _ref$autoComplete,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    helpText = _ref.helpText,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$maxLength = _ref.maxLength,
+    maxLength = _ref$maxLength === void 0 ? undefined : _ref$maxLength,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? undefined : _ref$name,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    _ref$requiredIndicato = _ref.requiredIndicator,
+    requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
+    _ref$resize = _ref.resize,
+    resize = _ref$resize === void 0 ? 'vertical' : _ref$resize,
+    _ref$rows = _ref.rows,
+    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);
+  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 inputProps = {
+    'aria-required': isRequired,
+    'aria-invalid': !!error,
+    'aria-label': label,
+    'aria-labelledby': label && !hideLabel ? id + "Label" : undefined,
+    autoComplete: getAutoCompleteValue(autoComplete),
+    autoFocus: autoFocus,
+    className: classNames(styles$8["textarea-resize-" + resize]),
+    disabled: isDisabled,
+    id: id,
+    maxLength: maxLength,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    placeholder: placeholder,
+    required: isRequired,
+    rows: rows,
+    value: value
+  };
+  var labelProps = {
+    inputId: id,
+    helpText: helpText,
+    className: styles$8['textarea-input-label'],
+    isDisabled: isDisabled,
+    isFieldRequired: isRequired,
+    requiredIndicator: requiredIndicator
+  };
+  return React.createElement(Box, _extends({
+    width: "100%",
+    className: className
+  }, restProps), label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(Box, {
+    display: "block",
+    className: inputWrapperClasses
+  }, React.createElement(Box, _extends({
+    as: "textarea"
+  }, inputProps))), error && error !== true && React.createElement(InputValidationMessage, null, error));
+};
+
+var _excluded$a = ["field", "form", "onChange", "id", "label"];
+var FormikTextareaInput = function FormikTextareaInput(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    formikOnChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    onChange = _ref.onChange,
+    id = _ref.id,
+    label = _ref.label,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  return React.createElement(TextareaInput, _extends({}, props, {
+    id: id,
+    label: label,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange != null ? onChange : formikOnChange,
+    value: value,
+    error: formik.getIn(touched, name) && formik.getIn(errors, name)
+  }));
+};
+
+var _excluded$9 = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
+var TimePicker = function TimePicker(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    _ref$dateDisplayOptio = _ref.dateDisplayOptions,
+    dateDisplayOptions = _ref$dateDisplayOptio === void 0 ? {
+      hour: '2-digit',
+      minute: '2-digit'
+    } : _ref$dateDisplayOptio,
+    _ref$endTime = _ref.endTime,
+    endTime = _ref$endTime === void 0 ? undefined : _ref$endTime,
+    _ref$interval = _ref.interval,
+    interval = _ref$interval === void 0 ? 900 : _ref$interval,
+    _ref$locales = _ref.locales,
+    locales = _ref$locales === void 0 ? 'en-US' : _ref$locales,
+    _ref$placeholder = _ref.placeholder,
+    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);
+  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);
+    var last = new Date();
+    last.setHours((endTime == null ? void 0 : endTime.hour) || first.getHours() + 24, (endTime == null ? void 0 : endTime.minute) || 0, 0, 0);
+    var timeOptions = [];
+    var currentTime = new Date(first);
+    while (currentTime < last) {
+      timeOptions.push({
+        value: currentTime.toISOString(),
+        label: currentTime.toLocaleTimeString(locales, dateDisplayOptions)
+      });
+      currentTime.setSeconds(first.getSeconds() + interval);
+    }
+    return timeOptions;
+  };
+  return React.createElement(SelectInput, _extends({}, restProps, {
+    id: id,
+    name: name,
+    label: label,
+    onChange: onChange,
+    options: generateTimes(),
+    placeholder: placeholder,
+    value: value
+  }));
+};
+
+var _excluded$8 = ["field", "form", "options", "onChange"];
+var FormikTimePicker = function FormikTimePicker(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    formikOnChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    options = _ref.options,
+    onChange = _ref.onChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+  return React.createElement(TimePicker, _extends({}, props, {
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange != null ? onChange : formikOnChange,
+    value: value,
+    error: formik.getIn(touched, name) && formik.getIn(errors, name),
+    options: options
+  }));
+};
+
+var _excluded$7 = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
+var TimePickerNative = function TimePickerNative(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    _ref$dateDisplayOptio = _ref.dateDisplayOptions,
+    dateDisplayOptions = _ref$dateDisplayOptio === void 0 ? {
+      hour: '2-digit',
+      minute: '2-digit'
+    } : _ref$dateDisplayOptio,
+    _ref$endTime = _ref.endTime,
+    endTime = _ref$endTime === void 0 ? undefined : _ref$endTime,
+    _ref$interval = _ref.interval,
+    interval = _ref$interval === void 0 ? 900 : _ref$interval,
+    _ref$locales = _ref.locales,
+    locales = _ref$locales === void 0 ? 'en-US' : _ref$locales,
+    _ref$placeholder = _ref.placeholder,
+    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);
+  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);
+    var last = new Date();
+    last.setHours((endTime == null ? void 0 : endTime.hour) || first.getHours() + 24, (endTime == null ? void 0 : endTime.minute) || 0, 0, 0);
+    var timeOptions = [];
+    var currentTime = new Date(first);
+    while (currentTime < last) {
+      timeOptions.push({
+        value: currentTime.toISOString(),
+        label: currentTime.toLocaleTimeString(locales, dateDisplayOptions)
+      });
+      currentTime.setSeconds(first.getSeconds() + interval);
+    }
+    return timeOptions;
+  };
+  var options = generateTimes();
+  return React.createElement(SelectInputNative, _extends({}, restProps, {
+    id: id,
+    name: name,
+    label: label,
+    onChange: onChange,
+    options: options,
+    placeholder: placeholder,
+    value: value
+  }));
+};
+
+var _excluded$6 = ["field", "form", "onChange"];
+var FormikTimePickerNative = function FormikTimePickerNative(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    formikOnChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    onChange = _ref.onChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  return React.createElement(TimePickerNative, _extends({}, props, {
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange != null ? onChange : formikOnChange,
+    value: value,
+    error: formik.getIn(touched, name) && formik.getIn(errors, name)
+  }));
+};
+
+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 Toggle = function Toggle(_ref) {
+  var _classNames, _ref2;
+  var id = _ref.id,
+    isChecked = _ref.isChecked,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+    helpText = _ref.helpText,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
+    _ref$requiredIndicato = _ref.requiredIndicator,
+    requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size;
+  var handleBlur = function handleBlur(event) {
+    if (onBlur) onBlur(event);
+  };
+  var handleChange = function handleChange(event) {
+    onChange(event);
+  };
+  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 inputProps = {
+    'aria-required': isRequired,
+    'aria-invalid': !!error,
+    'aria-label': label,
+    'aria-labelledby': label && !hideLabel ? id + "Label" : undefined,
+    id: id,
+    checked: !!isChecked,
+    disabled: isDisabled,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    required: isRequired,
+    type: 'checkbox',
+    className: styles$7['toggle-input']
+  };
+  var labelProps = {
+    inputId: id,
+    isDisabled: isDisabled,
+    display: 'flex',
+    direction: 'row',
+    childGap: 'md',
+    alignItems: helpText ? 'flex-start' : 'center',
+    isFieldRequired: isRequired,
+    requiredIndicator: requiredIndicator
+  };
+  return React.createElement(Box, {
+    className: className
+  }, React.createElement(Box, {
+    className: wrapperClasses
+  }, React.createElement(FormLabel, _extends({}, labelProps), React.createElement("input", _extends({}, inputProps)), React.createElement("span", {
+    "aria-hidden": "true",
+    className: trackClasses,
+    "data-testid": "toggleTrack"
+  }, React.createElement("span", {
+    className: thumbClasses,
+    "data-testid": "toggleThumb"
+  })), !hideLabel && React.createElement(Box, {
+    gap: "2xs",
+    className: helpText && (size === 'md' || size === 'lg') ? 'm-top-2xs' : ''
+  }, label && React.createElement("div", null, label), helpText && React.createElement(Box, {
+    as: "p",
+    display: "block",
+    fontSize: "sm",
+    fontWeight: "normal",
+    color: "secondary"
+  }, helpText)))), error && error !== true && React.createElement(InputValidationMessage, null, error));
+};
+
+var _excluded$5 = ["field", "form"];
+var FormikToggle = function FormikToggle(_ref) {
+  var _ref$field = _ref.field,
+    name = _ref$field.name,
+    onBlur = _ref$field.onBlur,
+    onChange = _ref$field.onChange,
+    value = _ref$field.value,
+    _ref$form = _ref.form,
+    touched = _ref$form.touched,
+    errors = _ref$form.errors,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  return React.createElement(Toggle, _extends({
+    error: formik.getIn(touched, name) && formik.getIn(errors, name),
+    isChecked: value,
+    onBlur: onBlur,
+    onChange: onChange
+  }, props));
+};
+
+var _excluded$4 = ["children", "padding", "direction", "alignItems", "justifyContent", "background", "gap", "style"];
+var ModalFooter = function ModalFooter(_ref) {
+  var children = _ref.children,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'xl' : _ref$padding,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    _ref$alignItems = _ref.alignItems,
+    alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
+    _ref$justifyContent = _ref.justifyContent,
+    justifyContent = _ref$justifyContent === void 0 ? 'flex-end' : _ref$justifyContent,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'secondary' : _ref$background,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'sm' : _ref$gap,
+    style = _ref.style,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  return React.createElement(Box, _extends({
+    background: background,
+    padding: padding,
+    direction: direction,
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    borderWidth: "sm 0 0 0",
+    borderColor: "default",
+    gap: gap,
+    style: _extends({
+      flexShrink: 0
+    }, style)
+  }, 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 ModalHeader = function ModalHeader(_ref) {
+  var id = _ref.id,
+    onDismiss = _ref.onDismiss,
+    _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, {
+    padding: "xl",
+    direction: "row",
+    alignItems: "center",
+    justifyContent: justifyContentValue,
+    borderWidth: "0 0 sm 0",
+    borderColor: "default",
+    style: {
+      flexShrink: 0
+    }
+  }, title && React.createElement(Box, {
+    as: "h4",
+    fontSize: {
+      base: 'md',
+      tablet: 'lg'
+    },
+    id: id
+  }, title), onDismiss && React.createElement("button", {
+    "aria-label": "close",
+    type: "button",
+    className: styles$6['modal-close'],
+    onClick: onDismiss
+  }, React.createElement(Icon, {
+    name: "remove"
+  })));
+};
+
+var _excluded$3 = ["children", "flex", "padding", "overflow", "height"];
+var ModalBody = function ModalBody(_ref) {
+  var children = _ref.children,
+    _ref$flex = _ref.flex,
+    flex = _ref$flex === void 0 ? 'auto' : _ref$flex,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'xl' : _ref$padding,
+    _ref$overflow = _ref.overflow,
+    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);
+  return React.createElement(Box, _extends({
+    padding: padding,
+    flex: flex,
+    overflow: overflow,
+    height: height,
+    style: {
+      position: 'relative'
+    }
+  }, restProps), children);
+};
+
+var _excluded$2 = ["ariaLabel", "ariaLabelledBy", "allowPinchZoom", "children", "className", "containerRef", "fullScreenMobile", "initialFocusRef", "isOpen", "maxWidth", "onDismiss", "overflow"];
+var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _classNames;
+  var ariaLabel = _ref.ariaLabel,
+    ariaLabelledBy = _ref.ariaLabelledBy,
+    _ref$allowPinchZoom = _ref.allowPinchZoom,
+    allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$containerRef = _ref.containerRef,
+    containerRef = _ref$containerRef === void 0 ? undefined : _ref$containerRef,
+    _ref$fullScreenMobile = _ref.fullScreenMobile,
+    fullScreenMobile = _ref$fullScreenMobile === void 0 ? false : _ref$fullScreenMobile,
+    initialFocusRef = _ref.initialFocusRef,
+    isOpen = _ref.isOpen,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? undefined : _ref$maxWidth,
+    onDismiss = _ref.onDismiss,
+    _ref$overflow = _ref.overflow,
+    overflow = _ref$overflow === void 0 ? 'hidden' : _ref$overflow,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var activateFocusLock = React.useCallback(function () {
+    setTimeout(function () {
+      if (initialFocusRef && initialFocusRef.current) {
+        initialFocusRef.current.focus();
+      }
+    }, 100);
+  }, [initialFocusRef]);
+  var maxWidthCss = getDimensionCss('mw', maxWidth);
+  var overlayClassnames = classNames(styles$6.overlay, styles$6.modal, {
+    fullscreen: fullScreenMobile
+  });
+  var contentClassnames = classNames(styles$6['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,
+    returnFocus: true,
+    disabled: !isOpen,
+    onActivation: activateFocusLock,
+    crossFrame: true
+  }, React.createElement(reactRemoveScroll.RemoveScroll, {
+    allowPinchZoom: allowPinchZoom,
+    enabled: isOpen
+  }, React.createElement(Box, {
+    ref: ref
+  }, React.createElement(ReactModal, _extends({
+    isOpen: isOpen,
+    overlayClassName: overlayClassnames,
+    className: contentClassnames,
+    onRequestClose: onDismiss,
+    ariaHideApp: false,
+    parentSelector: parentElement ? function () {
+      return parentElement;
+    } : undefined
+  }, restProps), React.createElement(Box, {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    style: _extends({}, maxWidthCss.styles),
+    height: "100"
+  }, children)))));
+});
+// Actual component is wrapped in an IIFE for the export
+// To allow tree-shaking even with static properties (subcomponents in this case).
+var Modal = /*#__PURE__*/function () {
+  var Modal = ModalBaseComponent; // eslint-disable-line no-shadow
+  Modal.Body = ModalBody;
+  Modal.Footer = ModalFooter;
+  Modal.Header = ModalHeader;
+  return Modal;
+}();
+
+var generatePages = function generatePages(pageRange, pageTotal, activePage, numberOfPagesDisplayed) {
+  var _pages;
+  var pages = [];
+  var startingPage = 1;
+  var endingPage = pageRange;
+  if (pageTotal <= pageRange) {
+    startingPage = 1;
+    endingPage = pageRange;
+  } else if (activePage + numberOfPagesDisplayed > pageTotal) {
+    startingPage = pageTotal - (numberOfPagesDisplayed - 1);
+    endingPage = startingPage + (numberOfPagesDisplayed - 1);
+  } else if (activePage > numberOfPagesDisplayed && activePage + numberOfPagesDisplayed <= pageTotal) {
+    startingPage = activePage - Math.floor(numberOfPagesDisplayed / 2);
+    endingPage = startingPage + (numberOfPagesDisplayed - 1);
+  }
+  for (var i = startingPage; i <= endingPage; i += 1) {
+    pages.push({
+      pageNumber: i,
+      isPage: true
+    });
+  }
+  if (pageTotal > ((_pages = pages[pages.length - 1]) == null ? void 0 : _pages.pageNumber)) {
+    var secondToLastPage = pageTotal !== activePage + numberOfPagesDisplayed ? activePage + numberOfPagesDisplayed : pageTotal - 1;
+    // only add ellipsis if there are more than 0 pages between the final page and the rest of the pages
+    if (pageTotal > numberOfPagesDisplayed + 1) {
+      pages.push({
+        pageNumber: secondToLastPage,
+        isPage: false
+      });
+    }
+    pages.push({
+      pageNumber: pageTotal,
+      isPage: true
+    });
+  }
+  if (activePage > numberOfPagesDisplayed) {
+    var threeDotsPage = activePage - numberOfPagesDisplayed > 1 ? activePage - numberOfPagesDisplayed : activePage - numberOfPagesDisplayed + 1;
+    pages.unshift({
+      pageNumber: 1,
+      isPage: true
+    }, {
+      pageNumber: threeDotsPage,
+      isPage: false
+    });
+  }
+  return [].concat(pages);
+};
+// Return the true page range in cases
+// where number of pages wanted for display is larger than the actual page total.
+var generatePageRange = function generatePageRange(numberOfPagesDisplayed, pageTotal) {
+  return numberOfPagesDisplayed > pageTotal ? pageTotal : numberOfPagesDisplayed;
+};
+var generatePageTotal = function generatePageTotal(totalItemsCount, itemsPerPage) {
+  return Math.ceil(totalItemsCount / itemsPerPage);
+};
+// Returns the range of current items displayed based on the specific page.
+// E.G: if the items per page is 20 and we are on page 1, it will return:
+// { first: 1, last: 20 }
+var generateActiveListRange = function generateActiveListRange(activePage, totalItemsCount, itemsPerPage) {
+  var activePageRange = {};
+  var pageTotal = generatePageTotal(totalItemsCount, itemsPerPage);
+  if (activePage === 1) {
+    activePageRange.first = 1;
+    activePageRange.last = totalItemsCount > itemsPerPage ? itemsPerPage : totalItemsCount;
+  } else if (activePage < pageTotal) {
+    activePageRange.first = activePage * itemsPerPage - (itemsPerPage - 1);
+    activePageRange.last = activePage * itemsPerPage;
+  } else {
+    activePageRange.first = activePage * itemsPerPage - (itemsPerPage - 1);
+    activePageRange.last = totalItemsCount;
+  }
+  return activePageRange;
+};
+
+var Pagination = function Pagination(_ref) {
+  var activePage = _ref.activePage,
+    itemsPerPage = _ref.itemsPerPage,
+    onChange = _ref.onChange,
+    totalItemsCount = _ref.totalItemsCount,
+    _ref$arePagesVisible = _ref.arePagesVisible,
+    arePagesVisible = _ref$arePagesVisible === void 0 ? false : _ref$arePagesVisible,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$isCompact = _ref.isCompact,
+    isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+    _ref$isTotalVisible = _ref.isTotalVisible,
+    isTotalVisible = _ref$isTotalVisible === void 0 ? true : _ref$isTotalVisible,
+    _ref$nextPageText = _ref.nextPageText,
+    nextPageText = _ref$nextPageText === void 0 ? 'Next' : _ref$nextPageText,
+    _ref$numberOfPagesDis = _ref.numberOfPagesDisplayed,
+    numberOfPagesDisplayed = _ref$numberOfPagesDis === void 0 ? 5 : _ref$numberOfPagesDis,
+    _ref$prevPageText = _ref.prevPageText,
+    prevPageText = _ref$prevPageText === void 0 ? 'Previous' : _ref$prevPageText;
+  var pageTotal = React.useMemo(function () {
+    return generatePageTotal(totalItemsCount, itemsPerPage);
+  }, [totalItemsCount, itemsPerPage]);
+  var pageRange = React.useMemo(function () {
+    return generatePageRange(numberOfPagesDisplayed, pageTotal);
+  }, [numberOfPagesDisplayed, pageTotal]);
+  var activeListRange = React.useMemo(function () {
+    return generateActiveListRange(activePage, totalItemsCount, itemsPerPage);
+  }, [activePage, totalItemsCount, itemsPerPage]);
+  var pages = React.useMemo(function () {
+    return generatePages(pageRange, pageTotal, activePage, numberOfPagesDisplayed);
+  }, [pageRange, pageTotal, activePage, numberOfPagesDisplayed]);
+  return React.createElement(Box, {
+    as: "nav",
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "lg",
+    className: classNames(className)
+  }, React.createElement(Box, {
+    direction: "row",
+    justifyContent: {
+      base: 'space-between'
+    },
+    flex: {
+      base: 'auto',
+      tablet: 'none'
+    },
+    gap: isCompact ? 'xs' : 'sm'
+  }, React.createElement(Button, {
+    variant: "primary",
+    size: isCompact ? 'sm' : 'md',
+    isDisabled: activePage === 1,
+    onClick: function onClick() {
+      return onChange(activePage - 1);
+    }
+  }, prevPageText), arePagesVisible && React.createElement(Box, {
+    direction: "row",
+    gap: "2xs"
+  }, pages.map(function (_ref2) {
+    var pageNumber = _ref2.pageNumber,
+      isPage = _ref2.isPage;
+    console.log(activePage, pageNumber, isPage);
+    return React.createElement(Button, {
+      key: pageNumber,
+      onClick: function onClick() {
+        return onChange(pageNumber);
+      },
+      variant: pageNumber === activePage ? 'secondary' : 'tertiary',
+      size: isCompact ? 'sm' : 'md',
+      style: {
+        minWidth: isCompact ? '33px' : '42px'
+      },
+      className: className
+    }, isPage ? pageNumber : '...');
+  })), React.createElement(Button, {
+    variant: "primary",
+    size: isCompact ? 'sm' : 'md',
+    isDisabled: activePage === pageTotal,
+    onClick: function onClick() {
+      return onChange(activePage + 1);
+    }
+  }, nextPageText)), React.createElement(Box, {
+    as: "p",
+    display: {
+      base: 'none',
+      tablet: 'block'
+    },
+    fontSize: isCompact ? 'sm' : 'md'
+  }, isTotalVisible && "Showing " + activeListRange.first + "-" + activeListRange.last + " of " + totalItemsCount));
+};
+
+// eslint-disable-next-line import/prefer-default-export
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+var ResponsiveContext = /*#__PURE__*/React.createContext({
+  isCreated: false
+});
+var ResponsiveProvider = function ResponsiveProvider(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$throttle = _ref.throttle,
+    throttle = _ref$throttle === void 0 ? 50 : _ref$throttle;
+  var _useState = React.useState(0),
+    innerWidth = _useState[0],
+    setInnerWidth = _useState[1];
+  var _useState2 = React.useState(0),
+    innerHeight = _useState2[0],
+    setInnerHeight = _useState2[1];
+  var _useState3 = React.useState(0),
+    outerWidth = _useState3[0],
+    setOuterWidth = _useState3[1];
+  var _useState4 = React.useState(0),
+    outerHeight = _useState4[0],
+    setOuterHeight = _useState4[1];
+  var handleWindowResize = function handleWindowResize() {
+    var _window$innerWidth, _window, _window$innerHeight, _window2, _window$outerWidth, _window3, _window$outerHeight, _window4;
+    setInnerWidth((_window$innerWidth = (_window = window) == null ? void 0 : _window.innerWidth) != null ? _window$innerWidth : 0);
+    setInnerHeight((_window$innerHeight = (_window2 = window) == null ? void 0 : _window2.innerHeight) != null ? _window$innerHeight : 0);
+    setOuterWidth((_window$outerWidth = (_window3 = window) == null ? void 0 : _window3.outerWidth) != null ? _window$outerWidth : 0);
+    setOuterHeight((_window$outerHeight = (_window4 = window) == null ? void 0 : _window4.outerHeight) != null ? _window$outerHeight : 0);
+  };
+  useIsomorphicLayoutEffect(function () {
+    // eslint-disable-line consistent-return
+    if (typeof window !== 'undefined') {
+      // Set values on render if window wasn't available for useState initialization.
+      handleWindowResize();
+      var timeoutId; // eslint-disable-line
+      var throttledResize = function throttledResize() {
+        // prevent execution of previous setTimeout
+        clearTimeout(timeoutId);
+        // change width from the state object after throttle time has elapsed.
+        timeoutId = setTimeout(handleWindowResize, throttle);
+      };
+      window.addEventListener('resize', throttledResize);
+      return function () {
+        return window.removeEventListener('resize', throttledResize);
+      };
+    }
+  }, [throttle]);
+  return React.createElement(ResponsiveContext.Provider, {
+    value: {
+      innerWidth: innerWidth,
+      innerHeight: innerHeight,
+      outerHeight: outerHeight,
+      outerWidth: outerWidth,
+      isCreated: true
+    }
+  }, children);
+};
+
+var styles$5 = {"container":"Table-module_container__BsXT7","loading-mask":"Table-module_loading-mask__qoRPG","scroll-container":"Table-module_scroll-container__5WV5T","table":"Table-module_table__-ZPCW","auto":"Table-module_auto__1R8wm","fixed":"Table-module_fixed__T-EXg","borderless":"Table-module_borderless__BbsqE","scrollable":"Table-module_scrollable__Apjbs","scrollable-x":"Table-module_scrollable-x__mguJX","scrollable-y":"Table-module_scrollable-y__292qB","table-bordered":"Table-module_table-bordered__wM9u-","full-height":"Table-module_full-height__MlrSg"};
+
+var styles$4 = {"table-body":"TableBody-module_table-body__Y5WbD","striped":"TableBody-module_striped__5MlEr","hover":"TableBody-module_hover__2CRgY"};
+
+var styles$3 = {"table-row":"TableRow-module_table-row__-Y9FQ","hoverable":"TableRow-module_hoverable__53-l9"};
+
+var styles$2 = {"table-cell":"TableBodyCell-module_table-cell__pKl29","borderless":"TableBodyCell-module_borderless__qwKQA","compact":"TableBodyCell-module_compact__zfdBf","truncated":"TableBodyCell-module_truncated__4YtPF","sticky-column-left":"TableBodyCell-module_sticky-column-left__tKIGW","sticky-column-right":"TableBodyCell-module_sticky-column-right__680hS","sticky-column":"TableBodyCell-module_sticky-column__QpEbV","align-right":"TableBodyCell-module_align-right__j-VqN","align-center":"TableBodyCell-module_align-center__saqzC"};
+
+var TableBodyCell = function TableBodyCell(_ref) {
+  var _classNames;
+  var _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$emptyCellPlaceho = _ref.emptyCellPlaceholder,
+    emptyCellPlaceholder = _ref$emptyCellPlaceho === void 0 ? null : _ref$emptyCellPlaceho,
+    _ref$isBorderless = _ref.isBorderless,
+    isBorderless = _ref$isBorderless === void 0 ? false : _ref$isBorderless,
+    _ref$isCompact = _ref.isCompact,
+    isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+    _ref$sticky = _ref.sticky,
+    sticky = _ref$sticky === void 0 ? undefined : _ref$sticky,
+    _ref$truncateOverflow = _ref.truncateOverflow,
+    truncateOverflow = _ref$truncateOverflow === void 0 ? false : _ref$truncateOverflow,
+    _ref$width = _ref.width,
+    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, {
+    as: columnIsSticky ? 'th' : 'td',
+    className: tableCellClasses,
+    display: "table-cell",
+    width: width + "px",
+    style: _extends({}, width && {
+      minWidth: width + "px",
+      maxWidth: width + "px"
+    }),
+    scope: "row"
+  }, children === null || typeof children === 'undefined' || children === '' ? emptyCellPlaceholder : children);
+};
+
+var styles$1 = {"table-header-cell":"TableHeaderCell-module_table-header-cell__aufSm","sortable":"TableHeaderCell-module_sortable__qjrkY","borderless":"TableHeaderCell-module_borderless__uos2k","truncated":"TableHeaderCell-module_truncated__wmNfw","compact":"TableHeaderCell-module_compact__ujtrZ","sticky-header":"TableHeaderCell-module_sticky-header__PEP9t","sticky-column-left":"TableHeaderCell-module_sticky-column-left__t8qIz","sticky-column-right":"TableHeaderCell-module_sticky-column-right__6D8-X","sticky-column":"TableHeaderCell-module_sticky-column__g9ybV","align-right":"TableHeaderCell-module_align-right__Qw0YQ","align-center":"TableHeaderCell-module_align-center__1RmCS","heading":"TableHeaderCell-module_heading__fEcYT","sort-icon":"TableHeaderCell-module_sort-icon__SHgic"};
+
+// eslint-disable-line import/prefer-default-export
+var TableHeaderCell = function TableHeaderCell(_ref) {
+  var _classNames;
+  var column = _ref.column,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$dataKey = _ref.dataKey,
+    dataKey = _ref$dataKey === void 0 ? undefined : _ref$dataKey,
+    _ref$isBorderless = _ref.isBorderless,
+    isBorderless = _ref$isBorderless === void 0 ? false : _ref$isBorderless,
+    _ref$isCompact = _ref.isCompact,
+    isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+    _ref$hasStickyHeader = _ref.hasStickyHeader,
+    hasStickyHeader = _ref$hasStickyHeader === void 0 ? false : _ref$hasStickyHeader,
+    _ref$isSortable = _ref.isSortable,
+    isSortable = _ref$isSortable === void 0 ? false : _ref$isSortable,
+    _ref$onSort = _ref.onSort,
+    onSort = _ref$onSort === void 0 ? undefined : _ref$onSort,
+    _ref$sortedColumn = _ref.sortedColumn,
+    sortedColumn = _ref$sortedColumn === void 0 ? undefined : _ref$sortedColumn,
+    _ref$sticky = _ref.sticky,
+    sticky = _ref$sticky === void 0 ? undefined : _ref$sticky,
+    _ref$truncateOverflow = _ref.truncateOverflow,
+    truncateOverflow = _ref$truncateOverflow === void 0 ? false : _ref$truncateOverflow,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? undefined : _ref$width;
+  var isColumnSorted = function isColumnSorted(columnDataKey) {
+    return !!sortedColumn && sortedColumn.dataKey === columnDataKey;
+  };
+  var getSortDirection = function getSortDirection() {
+    return sortedColumn && isColumnSorted(column.dataKey) ? sortedColumn.sortDirection : 'none';
+  };
+  var renderIcon = function renderIcon() {
+    var renderArrows = function renderArrows() {
+      if (getSortDirection() === 'ascending') {
+        return React.createElement(Icon, {
+          name: "caret-sm-up",
+          "data-testid": "tableHeaderCellSortAsc-testid"
+        });
+      }
+      if (getSortDirection() === 'descending') {
+        return React.createElement(Icon, {
+          name: "caret-sm-down",
+          "data-testid": "tableHeaderCellSortDesc-testid"
+        });
+      }
+      return React.createElement(Box, {
+        display: "inline-block",
+        width: "12px",
+        height: "12px",
+        "aria-hidden": "true",
+        "data-testid": "tableHeaderCellSortNone-testid"
+      });
+    };
+    return React.createElement("span", {
+      className: styles$1['sort-icon']
+    }, renderArrows());
+  };
+  var handleKeyPress = function handleKeyPress(event) {
+    if (!onSort || !isSortable) return;
+    var enterKey = 13;
+    var spaceKey = 32;
+    if (event.keyCode === enterKey || event.keyCode === spaceKey) {
+      var eventWithKey = _extends({}, event, {
+        sortedKey: dataKey
+      });
+      onSort(eventWithKey);
+    }
+  };
+  var handleSort = function handleSort(event) {
+    if (!onSort || !isSortable) return;
+    var eventWithKey = _extends({}, event, {
+      sortedKey: dataKey
+    });
+    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, {
+    as: "th",
+    display: "table-cell",
+    className: tableHeaderClasses,
+    width: width + "px",
+    "aria-sort": sortedColumn && isColumnSorted(column.dataKey) ? sortedColumn.sortDirection : 'none',
+    tabIndex: isSortable ? 0 : undefined,
+    onClick: handleSort,
+    onKeyDown: handleKeyPress,
+    scope: "col"
+  }, React.createElement("div", {
+    className: styles$1.heading
+  }, column.heading, isSortable && renderIcon()));
+};
+
+var TableRow = function TableRow(_ref) {
+  var _classNames;
+  var columns = _ref.columns,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$emptyCellPlaceho = _ref.emptyCellPlaceholder,
+    emptyCellPlaceholder = _ref$emptyCellPlaceho === void 0 ? '' : _ref$emptyCellPlaceho,
+    _ref$isBorderless = _ref.isBorderless,
+    isBorderless = _ref$isBorderless === void 0 ? false : _ref$isBorderless,
+    _ref$isCompact = _ref.isCompact,
+    isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+    _ref$hasStickyHeader = _ref.hasStickyHeader,
+    hasStickyHeader = _ref$hasStickyHeader === void 0 ? false : _ref$hasStickyHeader,
+    _ref$isHoverable = _ref.isHoverable,
+    isHoverable = _ref$isHoverable === void 0 ? false : _ref$isHoverable,
+    _ref$isTableHead = _ref.isTableHead,
+    isTableHead = _ref$isTableHead === void 0 ? false : _ref$isTableHead,
+    _ref$onSort = _ref.onSort,
+    onSort = _ref$onSort === void 0 ? undefined : _ref$onSort,
+    _ref$sortedColumn = _ref.sortedColumn,
+    sortedColumn = _ref$sortedColumn === void 0 ? undefined : _ref$sortedColumn,
+    _ref$row = _ref.row,
+    row = _ref$row === void 0 ? undefined : _ref$row,
+    _ref$rowIndex = _ref.rowIndex,
+    rowIndex = _ref$rowIndex === void 0 ? undefined : _ref$rowIndex,
+    _ref$truncateOverflow = _ref.truncateOverflow,
+    truncateOverflow = _ref$truncateOverflow === void 0 ? false : _ref$truncateOverflow;
+  var tableRowClasses = classNames(styles$3['table-row'], (_classNames = {}, _classNames[styles$3.hoverable] = isHoverable, _classNames), className);
+  var renderCellContent = function renderCellContent(column) {
+    if (column.render) {
+      var cellValue = column.dataKey && row ? row[column.dataKey] : undefined;
+      return column.render(cellValue, row, rowIndex);
+    }
+    return column.dataKey && row ? row[column.dataKey] : null;
+  };
+  var getCellClassName = function getCellClassName(column) {
+    if (column.cellClassName) {
+      if (typeof column.cellClassName === 'function') {
+        return column.cellClassName(column, row, rowIndex);
+      }
+      return column.cellClassName;
+    }
+    return undefined;
+  };
+  return React.createElement("tr", {
+    className: tableRowClasses
+  }, Object.values(columns).map(function (column, columnIndex) {
+    return isTableHead ? React.createElement(TableHeaderCell, {
+      column: column,
+      align: column.align || align,
+      key: getColumnKeys(columns)[columnIndex],
+      dataKey: column.dataKey,
+      className: column.headerClassName,
+      isSortable: column.isSortable,
+      onSort: onSort,
+      isBorderless: isBorderless,
+      isCompact: isCompact,
+      sortedColumn: sortedColumn,
+      truncateOverflow: column.truncateOverflow || truncateOverflow,
+      width: column.width,
+      hasStickyHeader: hasStickyHeader,
+      sticky: column.sticky
+    }) : React.createElement(TableBodyCell, {
+      align: column.align || align,
+      className: getCellClassName(column),
+      emptyCellPlaceholder: column.emptyCellPlaceholder || emptyCellPlaceholder,
+      truncateOverflow: column.truncateOverflow || truncateOverflow,
+      key: getColumnKeys(columns)[columnIndex],
+      isBorderless: isBorderless,
+      isCompact: isCompact,
+      width: column.width,
+      sticky: column.sticky
+    }, renderCellContent(column));
+  }));
+};
+
+var TableBody = function TableBody(_ref) {
+  var _classNames;
+  var columns = _ref.columns,
+    rowKey = _ref.rowKey,
+    rows = _ref.rows,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$emptyCellPlaceho = _ref.emptyCellPlaceholder,
+    emptyCellPlaceholder = _ref$emptyCellPlaceho === void 0 ? '' : _ref$emptyCellPlaceho,
+    _ref$hoverableRows = _ref.hoverableRows,
+    hoverableRows = _ref$hoverableRows === void 0 ? false : _ref$hoverableRows,
+    _ref$isBorderless = _ref.isBorderless,
+    isBorderless = _ref$isBorderless === void 0 ? false : _ref$isBorderless,
+    _ref$isCompact = _ref.isCompact,
+    isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+    _ref$isStriped = _ref.isStriped,
+    isStriped = _ref$isStriped === void 0 ? false : _ref$isStriped,
+    _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", {
+    className: tableBodyClasses
+  }, rows.map(function (row, rowIndex) {
+    return React.createElement(TableRow, {
+      columns: columns,
+      row: row,
+      rowIndex: rowIndex,
+      align: align,
+      key: row[rowKey],
+      emptyCellPlaceholder: emptyCellPlaceholder,
+      truncateOverflow: truncateOverflow,
+      isBorderless: isBorderless,
+      isCompact: isCompact
+    });
+  }));
+};
+
+var TableHead = function TableHead(_ref) {
+  var columns = _ref.columns,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$isBorderless = _ref.isBorderless,
+    isBorderless = _ref$isBorderless === void 0 ? false : _ref$isBorderless,
+    _ref$isCompact = _ref.isCompact,
+    isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+    _ref$hasStickyHeader = _ref.hasStickyHeader,
+    hasStickyHeader = _ref$hasStickyHeader === void 0 ? false : _ref$hasStickyHeader,
+    _ref$onSort = _ref.onSort,
+    onSort = _ref$onSort === void 0 ? undefined : _ref$onSort,
+    _ref$sortedColumn = _ref.sortedColumn,
+    sortedColumn = _ref$sortedColumn === void 0 ? undefined : _ref$sortedColumn,
+    _ref$truncateOverflow = _ref.truncateOverflow,
+    truncateOverflow = _ref$truncateOverflow === void 0 ? false : _ref$truncateOverflow;
+  var tableHeadClasses = classNames(className);
+  return React.createElement("thead", {
+    className: tableHeadClasses
+  }, React.createElement(TableRow, {
+    columns: columns,
+    align: align,
+    isTableHead: true,
+    isBorderless: isBorderless,
+    isCompact: isCompact,
+    onSort: onSort,
+    sortedColumn: sortedColumn,
+    truncateOverflow: truncateOverflow,
+    hasStickyHeader: hasStickyHeader
+  }));
+};
+
+var Table = function Table(_ref) {
+  var _classNames, _classNames2, _classNames3;
+  var columns = _ref.columns,
+    rows = _ref.rows,
+    rowKey = _ref.rowKey,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$emptyCellPlaceho = _ref.emptyCellPlaceholder,
+    emptyCellPlaceholder = _ref$emptyCellPlaceho === void 0 ? undefined : _ref$emptyCellPlaceho,
+    _ref$hoverableRows = _ref.hoverableRows,
+    hoverableRows = _ref$hoverableRows === void 0 ? false : _ref$hoverableRows,
+    _ref$isBorderless = _ref.isBorderless,
+    isBorderless = _ref$isBorderless === void 0 ? false : _ref$isBorderless,
+    _ref$isCompact = _ref.isCompact,
+    isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+    _ref$hasStickyHeader = _ref.hasStickyHeader,
+    hasStickyHeader = _ref$hasStickyHeader === void 0 ? false : _ref$hasStickyHeader,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isScrollable = _ref.isScrollable,
+    isScrollable = _ref$isScrollable === void 0 ? undefined : _ref$isScrollable,
+    _ref$isStriped = _ref.isStriped,
+    isStriped = _ref$isStriped === void 0 ? false : _ref$isStriped,
+    _ref$onSort = _ref.onSort,
+    onSort = _ref$onSort === void 0 ? undefined : _ref$onSort,
+    _ref$sortedColumn = _ref.sortedColumn,
+    sortedColumn = _ref$sortedColumn === void 0 ? undefined : _ref$sortedColumn,
+    _ref$useFixedTableLay = _ref.useFixedTableLayout,
+    useFixedTableLayout = _ref$useFixedTableLay === void 0 ? false : _ref$useFixedTableLay,
+    _ref$truncateOverflow = _ref.truncateOverflow,
+    truncateOverflow = _ref$truncateOverflow === void 0 ? false : _ref$truncateOverflow;
+  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", {
+    className: containerClasses
+  }, isLoading && React.createElement("div", {
+    className: styles$5['loading-mask']
+  }, React.createElement(Spinner, {
+    size: "xl"
+  })), React.createElement("div", {
+    className: scrollContainerClasses,
+    "data-testid": "tableContainerDiv-testid"
+  }, React.createElement("table", {
+    className: tableClasses
+  }, React.createElement(TableHead, {
+    columns: columns,
+    align: align,
+    onSort: onSort,
+    isBorderless: isBorderless,
+    isCompact: isCompact,
+    sortedColumn: sortedColumn,
+    truncateOverflow: truncateOverflow,
+    hasStickyHeader: hasStickyHeader
+  }), React.createElement(TableBody, {
+    rows: rows,
+    columns: columns,
+    rowKey: rowKey,
+    align: align,
+    isStriped: isStriped,
+    emptyCellPlaceholder: emptyCellPlaceholder,
+    hoverableRows: hoverableRows,
+    truncateOverflow: truncateOverflow,
+    isBorderless: isBorderless,
+    isCompact: isCompact
+  }))));
+};
+
+var _excluded$1 = ["children", "defaultTheme", "storageKey"];
+var initialState = {
+  theme: 'system',
+  setTheme: function setTheme() {
+    return null;
+  }
+};
+var ThemeProviderContext = /*#__PURE__*/React.createContext(initialState);
+function ThemeProvider(_ref) {
+  var children = _ref.children,
+    _ref$defaultTheme = _ref.defaultTheme,
+    defaultTheme = _ref$defaultTheme === void 0 ? 'system' : _ref$defaultTheme,
+    _ref$storageKey = _ref.storageKey,
+    storageKey = _ref$storageKey === void 0 ? 'hyphen-ui-theme' : _ref$storageKey,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var _useState = React.useState(function () {
+      return localStorage.getItem(storageKey) || defaultTheme;
+    }),
+    theme = _useState[0],
+    _setTheme = _useState[1];
+  React.useEffect(function () {
+    var root = window.document.documentElement;
+    root.classList.remove('light', 'dark');
+    if (theme === 'system') {
+      var systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      root.classList.add(systemTheme);
+      return;
+    }
+    root.classList.add(theme);
+  }, [theme]);
+  var value = {
+    theme: theme,
+    setTheme: function setTheme(theme) {
+      localStorage.setItem(storageKey, theme);
+      _setTheme(theme);
+    }
+  };
+  return React.createElement(ThemeProviderContext.Provider, _extends({}, props, {
+    value: value
+  }), children);
+}
+var useTheme = function useTheme() {
+  var context = React.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;
+};
+
+var styles = {"toast-notification":"ToastNotification-module_toast-notification__2xiTW","toast-dismiss":"ToastNotification-module_toast-dismiss__xxmkb","toast-notification-enter-top":"ToastNotification-module_toast-notification-enter-top__ZZDCr","toast-notification-exit-top":"ToastNotification-module_toast-notification-exit-top__fOIkZ","toast-notification-enter-bottom":"ToastNotification-module_toast-notification-enter-bottom__So3w7","toast-notification-exit-bottom":"ToastNotification-module_toast-notification-exit-bottom__DDthi","toast-notification-exit-left":"ToastNotification-module_toast-notification-exit-left__Fh1hC","toast-notification-exit-right":"ToastNotification-module_toast-notification-exit-right__C1jQ9","toast-notification-fade-in":"ToastNotification-module_toast-notification-fade-in__JlSGi","toast-notification-fade-out":"ToastNotification-module_toast-notification-fade-out__r6q4Q"};
+
+var getAnimationClass = function getAnimationClass(position, visible) {
+  var verticalPosition = position.includes('top') ? 'top' : 'bottom';
+  var horizontalPosition = position.includes('left') ? 'left' : 'right';
+  var isCentered = position.includes('center');
+  var _ref = prefersReducedMotion() ? [styles['toast-notification-fade-in'], styles['toast-notification-fade-out']] : [styles["toast-notification-enter-" + verticalPosition], styles["toast-notification-exit-" + (isCentered ? verticalPosition : horizontalPosition)]],
+    enter = _ref[0],
+    exit = _ref[1];
+  return visible ? enter : exit;
+};
+var renderToastIcon = function renderToastIcon(toast) {
+  var type = toast.type;
+  if (type === 'blank') return;
+  var iconName = 'exclamation-mark';
+  var iconColor = 'base'; // dark
+  if (type === 'success') {
+    iconName = 'c-check';
+    iconColor = 'success';
+  }
+  if (type === 'error') {
+    iconName = 'c-warning';
+    iconColor = 'danger';
+  }
+  var icon = type !== 'loading' ? React.createElement(Icon, {
+    name: iconName,
+    color: iconColor
+  }) : React.createElement(Spinner, null);
+  // eslint-disable-next-line consistent-return
+  return React.createElement(Box, {
+    justifyContent: "center",
+    height: "100"
+  }, icon);
+};
+var renderDismissIcon = function renderDismissIcon(toast, onDismiss) {
+  if (!toast.canDismiss) return;
+  // eslint-disable-next-line consistent-return
+  return React.createElement(Box, {
+    as: "button",
+    borderWidth: "0 0 0 sm",
+    className: styles['toast-dismiss'],
+    padding: "0 0 0 sm",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    background: "transparent" // transparent
+    ,
+    height: "100",
+    onClick: onDismiss,
+    "aria-label": "dismiss notification"
+  }, React.createElement(Icon, {
+    name: "remove"
+  }));
+};
+// eslint-disable-next-line import/prefer-default-export
+var ToastNotification = /*#__PURE__*/React.memo(function (_ref2) {
+  var toast = _ref2.toast,
+    _ref2$position = _ref2.position,
+    position = _ref2$position === void 0 ? 'top-center' : _ref2$position,
+    style = _ref2.style,
+    children = _ref2.children,
+    onDismiss = _ref2.onDismiss;
+  var message = React.createElement(Box, _extends({
+    direction: "row",
+    justifyContent: "center",
+    style: {
+      flex: '1 1 auto'
+    }
+  }, toast.ariaProps), resolveValue(toast.message, toast));
+  var animationClass = toast != null && toast.height ? getAnimationClass(toast.position || position, toast.visible) : undefined;
+  var classes = classNames(toast.className, styles['toast-notification'], animationClass, {
+    'toast-notification--not-visible': !toast.visible
+  });
+  return React.createElement(Box, {
+    alignItems: "center",
+    maxWidth: "300px",
+    padding: toast.isCompact ? 'sm' : 'md',
+    direction: "row",
+    className: classes,
+    gap: "sm",
+    style: _extends({}, style, toast.style, !toast.height && {
+      opacity: 0
+    })
+  }, typeof children === 'function' ? children({
+    message: message
+  }) : React.createElement(React.Fragment, null, renderToastIcon(toast), message, renderDismissIcon(toast, onDismiss)));
+});
+
+var _actionHandlers;
+var TOAST_LIMIT = 20;
+// eslint-disable-next-line no-shadow
+var ToastStoreActionType;
+(function (ToastStoreActionType) {
+  ToastStoreActionType["ADD_TOAST"] = "TOAST/ADD_TOAST";
+  ToastStoreActionType["UPDATE_TOAST"] = "TOAST/UPDATE_TOAST";
+  ToastStoreActionType["UPSERT_TOAST"] = "TOAST/UPSERT_TOAST";
+  ToastStoreActionType["DISMISS_TOAST"] = "TOAST/DISMISS_TOAST";
+  ToastStoreActionType["REMOVE_TOAST"] = "TOAST/REMOVE_TOAST";
+  ToastStoreActionType["START_PAUSE"] = "TOAST/START_PAUSE";
+  ToastStoreActionType["END_PAUSE"] = "TOAST/END_PAUSE";
+})(ToastStoreActionType || (ToastStoreActionType = {}));
+var toastTimeouts = /*#__PURE__*/new Map();
+var addToDismissedQueue = function addToDismissedQueue(toastId) {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+  var timeout = setTimeout(function () {
+    toastTimeouts["delete"](toastId);
+    dispatch({
+      // eslint-disable-line
+      type: ToastStoreActionType.REMOVE_TOAST,
+      payload: {
+        toastId: toastId
+      }
+    });
+  }, 1000);
+  toastTimeouts.set(toastId, timeout);
+};
+var clearFromDismissedQueue = function clearFromDismissedQueue(toastId) {
+  var timeout = toastTimeouts.get(toastId);
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+};
+var createReducer = function createReducer(initialState, handlers) {
+  return function (state, action) {
+    if (state === void 0) {
+      state = initialState;
+    }
+    if (handlers.hasOwnProperty(action.type)) {
+      // eslint-disable-line
+      return handlers[action.type](state, action);
+    }
+    return state;
+  };
+};
+var handleAddToast = function handleAddToast(state, action) {
+  if (!('toast' in action.payload)) return state;
+  var toast = action.payload.toast;
+  return _extends({}, state, {
+    toasts: [toast].concat(state.toasts).slice(0, TOAST_LIMIT)
+  });
+};
+var handleUpdateToast = function handleUpdateToast(state, action) {
+  var toast = action.payload.toast;
+  //  @TODO -- Side effects
+  if (toast.id) {
+    clearFromDismissedQueue(toast.id);
+  }
+  return _extends({}, state, {
+    toasts: state.toasts.map(function (t) {
+      return t.id === toast.id ? _extends({}, t, toast) : t;
+    }) // eslint-disable-line
+  });
+};
+var handleUpsertToast = function handleUpsertToast(state, action) {
+  var toast = action.payload.toast;
+  // @TODO -- refactor to avoid using recursive function before 'reducer is declared'
+  return state.toasts.find(function (t) {
+    return t.id === toast.id;
+  }) ? reducer(state, {
+    type: ToastStoreActionType.UPDATE_TOAST,
+    payload: {
+      toast: toast
+    }
+  }) // eslint-disable-line
+  : reducer(state, {
+    type: ToastStoreActionType.ADD_TOAST,
+    payload: {
+      toast: toast
+    }
+  }); // eslint-disable-line
+};
+var handleDismissToast = function handleDismissToast(state, action) {
+  var toastId = action.payload.toastId;
+  if (toastId) {
+    addToDismissedQueue(toastId);
+  } else {
+    state.toasts.forEach(function (toast) {
+      addToDismissedQueue(toast.id);
+    });
+  }
+  return _extends({}, state, {
+    // eslint-disable-next-line no-confusing-arrow
+    toasts: state.toasts.map(function (t) {
+      return t.id === toastId || toastId === undefined ? _extends({}, t, {
+        visible: false
+      }) : t;
+    })
+  });
+};
+var handleRemoveToast = function handleRemoveToast(state, action) {
+  var toastId = action.payload.toastId;
+  if (toastId === undefined) {
+    return _extends({}, state, {
+      toasts: []
+    });
+  }
+  return _extends({}, state, {
+    toasts: state.toasts.filter(function (t) {
+      return t.id !== toastId;
+    })
+  });
+};
+var handleStartPause = function handleStartPause(state, action) {
+  var time = action.payload.time;
+  return _extends({}, state, {
+    pausedAt: time
+  });
+};
+var handleEndPause = function handleEndPause(state, action) {
+  var time = action.payload.time;
+  var diff = time - (state.pausedAt || 0);
+  return _extends({}, state, {
+    pausedAt: undefined,
+    toasts: state.toasts.map(function (t) {
+      return _extends({}, t, {
+        pauseDuration: t.pauseDuration + diff
+      });
+    })
+  });
+};
+var actionHandlers = (_actionHandlers = {}, _actionHandlers[ToastStoreActionType.ADD_TOAST] = handleAddToast, _actionHandlers[ToastStoreActionType.UPDATE_TOAST] = handleUpdateToast, _actionHandlers[ToastStoreActionType.UPSERT_TOAST] = handleUpsertToast, _actionHandlers[ToastStoreActionType.DISMISS_TOAST] = handleDismissToast, _actionHandlers[ToastStoreActionType.REMOVE_TOAST] = handleRemoveToast, _actionHandlers[ToastStoreActionType.START_PAUSE] = handleStartPause, _actionHandlers[ToastStoreActionType.END_PAUSE] = handleEndPause, _actionHandlers);
+var toastReducer = /*#__PURE__*/createReducer({
+  toasts: [],
+  pausedAt: undefined
+}, actionHandlers);
+var reducer = function reducer(state, action) {
+  return toastReducer(state, action);
+};
+var listeners = [];
+var memoryState = {
+  toasts: [],
+  pausedAt: undefined
+};
+var dispatch = function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach(function (listener) {
+    listener(memoryState);
+  });
+};
+var defaultTimeouts = {
+  blank: 4000,
+  error: 4000,
+  success: 2000,
+  loading: Infinity,
+  custom: 4000
+};
+var useToastStore = function useToastStore(toastOptions) {
+  if (toastOptions === void 0) {
+    toastOptions = {};
+  }
+  var _useState = React.useState(memoryState),
+    state = _useState[0],
+    setState = _useState[1];
+  React.useEffect(function () {
+    listeners.push(setState);
+    return function () {
+      var index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+  var mergedToasts = state.toasts.map(function (t) {
+    var _toastOptions$t$type, _toastOptions, _toastOptions$t$type2;
+    return _extends({}, toastOptions, toastOptions[t.type], t, {
+      duration: t.duration || ((_toastOptions$t$type = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type.duration) || ((_toastOptions = toastOptions) == null ? void 0 : _toastOptions.duration) || defaultTimeouts[t.type],
+      style: _extends({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
+    });
+  });
+  return _extends({}, state, {
+    toasts: mergedToasts
+  });
+};
+
+var createToast = function createToast(message, type, opts) {
+  return _extends({
+    createdAt: Date.now(),
+    visible: true,
+    type: type,
+    ariaProps: {
+      role: 'status',
+      'aria-live': 'polite'
+    },
+    message: message,
+    pauseDuration: 0
+  }, opts, {
+    id: (opts == null ? void 0 : opts.id) || uuid.v4(),
+    canDismiss: type !== 'loading' && (opts == null ? void 0 : opts.canDismiss) !== false
+  });
+};
+var createHandler = function createHandler(type) {
+  return function (message, options) {
+    var toast = createToast(message, type, options);
+    dispatch({
+      type: ToastStoreActionType.UPSERT_TOAST,
+      payload: {
+        toast: toast
+      }
+    });
+    return toast.id;
+  };
+};
+// eslint-disable-next-line
+var toast = function toast(message, opts) {
+  return createHandler('blank')(message, opts);
+};
+toast.error = /*#__PURE__*/createHandler('error');
+toast.success = /*#__PURE__*/createHandler('success');
+toast.loading = /*#__PURE__*/createHandler('loading');
+toast.custom = /*#__PURE__*/createHandler('custom');
+toast.dismiss = function (toastId) {
+  dispatch({
+    type: ToastStoreActionType.DISMISS_TOAST,
+    payload: {
+      toastId: toastId
+    }
+  });
+};
+toast.remove = function (toastId) {
+  return dispatch({
+    type: ToastStoreActionType.REMOVE_TOAST,
+    payload: {
+      toastId: toastId
+    }
+  });
+};
+// eslint-disable-next-line func-names
+toast.async = function (promise, messages, opts) {
+  var id = toast.loading(messages.loading, _extends({}, opts, opts == null ? void 0 : opts.loading));
+  promise.then(function (data) {
+    toast.success(resolveValue(messages.success, data), _extends({
+      id: id
+    }, opts, opts == null ? void 0 : opts.success));
+    return data;
+  })["catch"](function (err) {
+    toast.error(resolveValue(messages.error, err), _extends({
+      id: id
+    }, opts, opts == null ? void 0 : opts.error));
+  });
+  return promise;
+};
+ // eslint-disable-line import/prefer-default-export
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+var useToasts = function useToasts(toastOptions) {
+  // eslint-disable-line import/prefer-default-export
+  var _useToastStore = useToastStore(toastOptions),
+    toasts = _useToastStore.toasts,
+    pausedAt = _useToastStore.pausedAt;
+  React.useEffect(function () {
+    if (pausedAt) {
+      return;
+    }
+    var now = Date.now();
+    var timeouts = toasts.map(function (t) {
+      if (t.duration === Infinity) {
+        return undefined;
+      }
+      var durationLeft = (t.duration || 0) + t.pauseDuration - (now - t.createdAt);
+      if (durationLeft < 0) {
+        if (t.visible) {
+          toast.dismiss(t.id);
+        }
+        return undefined;
+      }
+      return setTimeout(function () {
+        return toast.dismiss(t.id);
+      }, durationLeft); // eslint-disable-line consistent-return
+    });
+    return function () {
+      // eslint-disable-line consistent-return
+      timeouts.forEach(function (timeout) {
+        return timeout && clearTimeout(timeout);
+      });
+    };
+  }, [toasts, pausedAt]);
+  var handlers = React.useMemo(function () {
+    return {
+      startPause: function startPause() {
+        dispatch({
+          type: ToastStoreActionType.START_PAUSE,
+          payload: {
+            time: Date.now()
+          }
+        });
+      },
+      endPause: function endPause() {
+        if (pausedAt) {
+          dispatch({
+            type: ToastStoreActionType.END_PAUSE,
+            payload: {
+              time: Date.now()
+            }
+          });
+        }
+      },
+      updateHeight: function updateHeight(toastId, height) {
+        var _toasts$find;
+        if (((_toasts$find = toasts.find(function (t) {
+          return t.id === toastId;
+        })) == null ? void 0 : _toasts$find.height) === height) {
+          return;
+        }
+        dispatch({
+          type: ToastStoreActionType.UPDATE_TOAST,
+          payload: {
+            toast: {
+              id: toastId,
+              height: height
+            }
+          }
+        });
+      },
+      calculateOffset: function calculateOffset(currentToast, opts) {
+        var _relevantToasts$filte;
+        var _ref = opts || {},
+          reverseOrder = _ref.reverseOrder,
+          gutter = _ref.gutter,
+          defaultPosition = _ref.defaultPosition;
+        var relevantToasts = toasts.filter(function (t) {
+          return (t.position || defaultPosition) === (currentToast.position || defaultPosition) && t.height;
+        });
+        var toastIndex = relevantToasts.findIndex(function (t) {
+          return t.id === currentToast.id;
+        });
+        var toastsBefore = relevantToasts.filter(function (t, i) {
+          return i < toastIndex && t.visible;
+        }).length;
+        var offset = (_relevantToasts$filte = relevantToasts.filter(function (t) {
+          return t.visible;
+        })).slice.apply(_relevantToasts$filte, reverseOrder ? [toastsBefore + 1] : [0, toastsBefore]).reduce(function (acc, t) {
+          return acc + (t.height || 0) + gutter;
+        }, 0);
+        return offset;
+      }
+    };
+  }, [toasts, pausedAt]);
+  return {
+    toasts: toasts,
+    handlers: handlers
+  };
+};
+
+var _excluded = ["children", "containerStyle", "containerClassName", "gutter", "position", "reverseOrder", "toastOptions"];
+var createRectRef = function createRectRef(onRect) {
+  return function (el) {
+    if (el) {
+      var boundingRect = el.getBoundingClientRect();
+      onRect(boundingRect);
+    }
+  };
+};
+var getPositionStyle = function getPositionStyle(position, offset) {
+  var top = position.includes('top');
+  var verticalStyle = top ? {
+    top: 0
+  } : {
+    bottom: 0
+  };
+  var horizontalStyle = _extends({}, position.includes('center') && {
+    justifyContent: 'center'
+  }, !position.includes('center') && position.includes('right') && {
+    justifyContent: 'flex-end'
+  });
+  return _extends({
+    left: 0,
+    right: 0,
+    display: 'flex',
+    position: 'absolute',
+    transition: prefersReducedMotion() ? undefined : 'all 230ms cubic-bezier(.21,1.02,.73,1)',
+    transform: "translateY(" + offset * (top ? 1 : -1) + "px)"
+  }, verticalStyle, horizontalStyle);
+};
+var DEFAULT_OFFSET = 16;
+var renderNotification = function renderNotification(currentToast, children, containerPosition) {
+  var toastPosition = currentToast.position || containerPosition;
+  if (currentToast.type === 'custom') {
+    return resolveValue(currentToast.message, currentToast);
+  }
+  if (children) {
+    return children(currentToast);
+  }
+  return React.createElement(ToastNotification, {
+    toast: currentToast,
+    position: toastPosition,
+    onDismiss: function onDismiss() {
+      return toast.dismiss(currentToast.id);
+    }
+  });
+};
+var ToastContainer = function ToastContainer(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? undefined : _ref$children,
+    _ref$containerStyle = _ref.containerStyle,
+    containerStyle = _ref$containerStyle === void 0 ? undefined : _ref$containerStyle,
+    _ref$containerClassNa = _ref.containerClassName,
+    containerClassName = _ref$containerClassNa === void 0 ? undefined : _ref$containerClassNa,
+    _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? 8 : _ref$gutter,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'top-center' : _ref$position,
+    _ref$reverseOrder = _ref.reverseOrder,
+    reverseOrder = _ref$reverseOrder === void 0 ? false : _ref$reverseOrder,
+    toastOptions = _ref.toastOptions,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useToasts = useToasts(toastOptions),
+    toasts = _useToasts.toasts,
+    handlers = _useToasts.handlers;
+  return React.createElement(Box, _extends({
+    style: _extends({
+      top: DEFAULT_OFFSET,
+      left: DEFAULT_OFFSET,
+      right: DEFAULT_OFFSET,
+      bottom: DEFAULT_OFFSET,
+      pointerEvents: 'none'
+    }, containerStyle),
+    position: "fixed",
+    zIndex: "popover",
+    className: containerClassName,
+    onMouseEnter: handlers.startPause,
+    onMouseLeave: handlers.endPause
+  }, restProps), toasts.map(function (t) {
+    var toastPosition = t.position || position;
+    var offset = handlers.calculateOffset(t, {
+      reverseOrder: reverseOrder,
+      gutter: gutter,
+      defaultPosition: position
+    });
+    var positionStyle = getPositionStyle(toastPosition, offset);
+    var ref = t.height ? undefined : createRectRef(function (rect) {
+      handlers.updateHeight(t.id, rect.height);
+    });
+    return React.createElement(Box, {
+      ref: ref,
+      zIndex: t.visible ? 'popover' : undefined,
+      key: t.id,
+      style: _extends({}, positionStyle),
+      display: "block"
+    }, renderNotification(t, children, position));
+  }));
+};
+
+var useWindowSize = function useWindowSize() {
+  var _React$useContext = React.useContext(ResponsiveContext),
+    innerWidth = _React$useContext.innerWidth,
+    innerHeight = _React$useContext.innerHeight,
+    outerHeight = _React$useContext.outerHeight,
+    outerWidth = _React$useContext.outerWidth,
+    isCreated = _React$useContext.isCreated;
+  if (isCreated) {
+    return {
+      innerHeight: innerHeight,
+      innerWidth: innerWidth,
+      outerHeight: outerHeight,
+      outerWidth: outerWidth
+    };
+  }
+  return {};
+};
+
+var defaultBreakpoint = {
+  name: 'base',
+  minWidth: 0
+};
+var useBreakpoint = function useBreakpoint() {
+  var windowSize = useWindowSize();
+  var _useState = React.useState(_extends({}, defaultBreakpoint)),
+    breakpoint = _useState[0],
+    setBreakpoint = _useState[1];
+  useIsomorphicLayoutEffect(function () {
+    var sortedBreakpoints = [].concat(BREAKPOINTS).sort(function (a, b) {
+      return b.minWidth - a.minWidth;
+    });
+    var activeBreakpoint = windowSize && sortedBreakpoints.find(function (b) {
+      return b.minWidth <= windowSize.innerWidth;
+    });
+    setBreakpoint(activeBreakpoint || _extends({}, defaultBreakpoint));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [windowSize.innerWidth, windowSize.innerHeight, windowSize.outerWidth, windowSize.outerHeight]);
+  return {
+    isPhone: breakpoint.name === 'base',
+    isTablet: breakpoint.name === 'tablet',
+    isDesktop: breakpoint.name === 'desktop',
+    isHd: breakpoint.name === 'hd',
+    activeBreakpoint: breakpoint
+  };
+};
+
+var useOpenClose = function useOpenClose(props) {
+  if (props === void 0) {
+    props = {};
+  }
+  var _props = props,
+    defaultIsOpen = _props.defaultIsOpen,
+    isOpenProp = _props.isOpen,
+    onCloseProp = _props.onClose,
+    onOpenProp = _props.onOpen;
+  var openCallback = React.useCallback(function () {
+    onOpenProp == null || onOpenProp();
+  }, [onOpenProp]);
+  var closeCallback = React.useCallback(function () {
+    onCloseProp == null || onCloseProp();
+  }, [onCloseProp]);
+  var _useState = React.useState(defaultIsOpen || false),
+    isOpenState = _useState[0],
+    setIsOpen = _useState[1];
+  var isOpen = isOpenProp !== undefined ? isOpenProp : isOpenState;
+  var isControlled = isOpenProp !== undefined;
+  var handleClose = React.useCallback(function () {
+    if (!isControlled) {
+      setIsOpen(false);
+    }
+    closeCallback == null || closeCallback();
+  }, [isControlled, closeCallback]);
+  var handleOpen = React.useCallback(function () {
+    if (!isControlled) {
+      setIsOpen(true);
+    }
+    openCallback == null || openCallback();
+  }, [isControlled, openCallback]);
+  var handleToggle = React.useCallback(function () {
+    if (isOpen) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  }, [isOpen, handleOpen, handleClose]);
+  return {
+    isOpen: isOpen,
+    handleClose: handleClose,
+    handleOpen: handleOpen,
+    handleToggle: handleToggle
+  };
+};
+
+exports.Alert = Alert;
+exports.Badge = Badge;
+exports.Box = Box;
+exports.Button = Button;
+exports.Card = Card;
+exports.CardBaseComponent = CardBaseComponent;
+exports.Checkbox = Checkbox;
+exports.CheckboxInput = CheckboxInput;
+exports.DateInput = DateInput;
+exports.DatePicker = DatePicker;
+exports.Details = Details;
+exports.DetailsBaseComponent = DetailsBaseComponent;
+exports.DetailsSummary = DetailsSummary;
+exports.Drawer = Drawer;
+exports.FormControl = FormControl;
+exports.FormLabel = FormLabel;
+exports.FormikCheckboxInput = FormikCheckboxInput;
+exports.FormikRadioGroup = FormikRadioGroup;
+exports.FormikSelectInput = FormikSelectInput;
+exports.FormikSelectInputInset = FormikSelectInputInset;
+exports.FormikSelectInputNative = FormikSelectInputNative;
+exports.FormikTextInput = FormikTextInput;
+exports.FormikTextInputInset = FormikTextInputInset;
+exports.FormikTextareaInput = FormikTextareaInput;
+exports.FormikTextareaInputInset = FormikTextareaInputInset;
+exports.FormikTimePicker = FormikTimePicker;
+exports.FormikTimePickerNative = FormikTimePickerNative;
+exports.FormikToggle = FormikToggle;
+exports.Heading = Heading;
+exports.Icon = Icon;
+exports.Modal = Modal;
+exports.ModalBaseComponent = ModalBaseComponent;
+exports.Pagination = Pagination;
+exports.Popover = Popover;
+exports.RadioGroup = RadioGroup;
+exports.ResponsiveContext = ResponsiveContext;
+exports.ResponsiveProvider = ResponsiveProvider;
+exports.SelectInput = SelectInput;
+exports.SelectInputInset = SelectInputInset;
+exports.SelectInputNative = SelectInputNative;
+exports.Spinner = Spinner;
+exports.Table = Table;
+exports.TextInput = TextInput;
+exports.TextInputInset = TextInputInset;
+exports.TextareaInput = TextareaInput;
+exports.TextareaInputInset = TextareaInputInset;
+exports.ThemeProvider = ThemeProvider;
+exports.TimePicker = TimePicker;
+exports.TimePickerNative = TimePickerNative;
+exports.ToastContainer = ToastContainer;
+exports.Toggle = Toggle;
+exports.boxPropsKeys = boxPropsKeys;
+exports.createRectRef = createRectRef;
+exports.toast = toast;
+exports.useBreakpoint = useBreakpoint;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useOpenClose = useOpenClose;
+exports.useTheme = useTheme;
+exports.useToasts = useToasts;
+exports.useWindowSize = useWindowSize;
+//# sourceMappingURL=hyphen-components.cjs.development.js.map