@hyphen/hyphen-components 6.14.0 → 7.0.0-beta.1

package/dist/hyphen-components.esm.js

@@ -1,16 +1,13 @@
 'use client';
 import * as React from 'react';
-import React__default, { forwardRef, Children, createElement, cloneElement, memo, useCallback, useMemo, useLayoutEffect, useEffect, createContext, useState, useContext } from 'react';
+import React__default, { forwardRef, Children, createElement, cloneElement, memo, useCallback, useMemo, useContext, useState, createContext, useLayoutEffect, useEffect } from 'react';
 import classNames from 'classnames';
 import icons from '@hyphen/hyphen-design-tokens/build/assets/icons/react';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { Slottable, Slot } from '@radix-ui/react-slot';
+import 'react-day-picker';
+import 'react-day-picker/style.css';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-import format from 'date-fns/format';
-import ReactDatePicker from 'react-datepicker';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables';
-import '@hyphen/hyphen-design-tokens/build/assets/icons';
 import ReactModal from 'react-modal';
 import FocusLock from 'react-focus-lock';
 import { RemoveScroll } from 'react-remove-scroll';
@@ -20,7 +17,10 @@ import Select, { components } from 'react-select';
 import AsyncCreatableSelect from 'react-select/async-creatable';
 import AsyncSelect from 'react-select/async';
 import CreatableSelect from 'react-select/creatable';
+import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables';
+import '@hyphen/hyphen-design-tokens/build/assets/icons';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { v4 } from 'uuid';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
@@ -253,7 +253,7 @@ Component, props, getDefault) {
   return defaultProps.as || 'div';
 }
 
-var styles$A = {"box-transition":"Box-module_box-transition__eQx8C"};
+var styles$z = {"box-transition":"Box-module_box-transition__eQx8C"};
 
 var _excluded$Q = ["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", "textTransform", "textWrap", "wrap", "whiteSpace", "width", "wordBreak", "zIndex"];
 /**
@@ -399,7 +399,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var boxClasses = classNames.apply(void 0, [className, cssShorthandToClasses('m', margin), cssShorthandToClasses('p', padding), cssShorthandToClasses('br', radius), cssShorthandToClasses('g', gap), cssShorthandToClasses('cg', columnGap), cssShorthandToClasses('rg', rowGap), heightCss.classes, maxHeightCss.classes, minHeightCss.classes, maxWidthCss.classes, minWidthCss.classes, widthCss.classes, flexDirectionClasses, generateResponsiveClasses('display', display), generateResponsiveClasses('justify-content', justifyContent), generateResponsiveClasses('align-items', alignItems), generateResponsiveClasses('align-content', alignContent), generateResponsiveClasses('align-self', alignSelf), generateResponsiveClasses('font-family', fontFamily), generateResponsiveClasses('font-size', fontSize), generateResponsiveClasses('overflow', overflow), generateResponsiveClasses('shadow', shadow), generateResponsiveClasses('flex', flex), cssShorthandToClasses('bw', borderWidth), generateResponsiveClasses('font-weight', fontWeight), generateResponsiveClasses('text-align', textAlign), generateResponsiveClasses('transform', textTransform), generateResponsiveClasses('text-wrap', textWrap), generateResponsiveClasses('position', position), generateResponsiveClasses('z-index', zIndex), generateResponsiveClasses('whitespace', whiteSpace), generateResponsiveClasses('break', wordBreak)].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$A['box-transition']] = hover || focus, _ref3)]));
+  }, _ref3["background-color-" + background] = background, _ref3["font-color-" + color] = color, _ref3["border-color-" + borderColor] = borderColor, _ref3["cursor-" + cursor] = cursor, _ref3[styles$z['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`
@@ -526,7 +526,7 @@ var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, "???");
 });
 
-var styles$z = {"alert":"Alert-module_alert__zP4AL","close-icon":"Alert-module_close-icon__zs4Xk","alert-heading":"Alert-module_alert-heading__VguTk","alert__default":"Alert-module_alert__default__-pcBw","alert__info":"Alert-module_alert__info__UZeOd","alert__success":"Alert-module_alert__success__o2IHF","alert__warning":"Alert-module_alert__warning__lzTY-","alert__danger":"Alert-module_alert__danger__M-XFh","alert__icon__default":"Alert-module_alert__icon__default__cCx9C","alert__icon__info":"Alert-module_alert__icon__info__2W0Bi","alert__icon__success":"Alert-module_alert__icon__success__NBCDO","alert__icon__warning":"Alert-module_alert__icon__warning__nY4hy","alert__icon__danger":"Alert-module_alert__icon__danger__NcOrf"};
+var styles$y = {"alert":"Alert-module_alert__zP4AL","close-icon":"Alert-module_close-icon__zs4Xk","alert-heading":"Alert-module_alert-heading__VguTk","alert__default":"Alert-module_alert__default__-pcBw","alert__info":"Alert-module_alert__info__UZeOd","alert__success":"Alert-module_alert__success__o2IHF","alert__warning":"Alert-module_alert__warning__lzTY-","alert__danger":"Alert-module_alert__danger__M-XFh","alert__icon__default":"Alert-module_alert__icon__default__cCx9C","alert__icon__info":"Alert-module_alert__icon__info__2W0Bi","alert__icon__success":"Alert-module_alert__icon__success__NBCDO","alert__icon__warning":"Alert-module_alert__icon__warning__nY4hy","alert__icon__danger":"Alert-module_alert__icon__danger__NcOrf"};
 
 var ALERT_ICONS_MAP = {
   "default": {
@@ -574,13 +574,13 @@ var AlertComponent = function AlertComponent(_ref) {
     if (event.keyCode === 13) handleClose(event);
   }, [handleClose]);
   var alertContainerClasses = useMemo(function () {
-    return classNames(styles$z["alert__" + variant], styles$z.alert, className);
+    return classNames(styles$y["alert__" + variant], styles$y.alert, className);
   }, [variant, className]);
   var alertIcon = useMemo(function () {
     if (!hasIcon) return null;
     return React__default.createElement(Box, {
       fontSize: "md",
-      className: styles$z["alert__icon__" + variant]
+      className: styles$y["alert__icon__" + variant]
     }, React__default.createElement(Icon, {
       name: ALERT_ICONS_MAP[variant].icon,
       "data-testid": "alert-icon-" + variant + "-test-id"
@@ -591,7 +591,7 @@ var AlertComponent = function AlertComponent(_ref) {
     return React__default.createElement(Box, {
       margin: "0 0 0 auto",
       color: "secondary",
-      className: styles$z['close-icon']
+      className: styles$y['close-icon']
     }, React__default.createElement("button", {
       type: "button",
       onClick: handleClose,
@@ -613,7 +613,7 @@ var AlertComponent = function AlertComponent(_ref) {
       as: "h4",
       fontSize: "sm",
       fontWeight: "semibold",
-      className: styles$z['alert-heading']
+      className: styles$y['alert-heading']
     }, title), children != null ? children : message && (typeof message === 'string' ? React__default.createElement("p", null, message) : message));
   }, [render, message, title, children]);
   return React__default.createElement(Box, _extends({
@@ -631,7 +631,7 @@ var Alert = /*#__PURE__*/memo(AlertComponent);
 
 var AspectRatio = AspectRatioPrimitive.Root;
 
-var styles$y = {"badge":"Badge-module_badge__ZbEBU","size-sm":"Badge-module_size-sm__rL8a6","size-md":"Badge-module_size-md__kf6IH","size-lg":"Badge-module_size-lg__of6XJ","inverse":"Badge-module_inverse__qZCFA","purple":"Badge-module_purple__rX-xW","green":"Badge-module_green__W03uU","red":"Badge-module_red__fl2jg","blue":"Badge-module_blue__C7kyV","yellow":"Badge-module_yellow__gGZ6R","light-grey":"Badge-module_light-grey__Wtrhx","dark-grey":"Badge-module_dark-grey__X-807","hyphen":"Badge-module_hyphen__9pe7x","size-sm-tablet":"Badge-module_size-sm-tablet__6xMVk","size-md-tablet":"Badge-module_size-md-tablet__4w-7I","size-lg-tablet":"Badge-module_size-lg-tablet__8xyRF","size-sm-desktop":"Badge-module_size-sm-desktop__Ayf5L","size-md-desktop":"Badge-module_size-md-desktop__XSq7m","size-lg-desktop":"Badge-module_size-lg-desktop__Baw3S","size-sm-hd":"Badge-module_size-sm-hd__Da6Au","size-md-hd":"Badge-module_size-md-hd__-VNMk","size-lg-hd":"Badge-module_size-lg-hd__6MOwL"};
+var styles$x = {"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$N = ["className", "message", "variant", "size", "children"];
 var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -647,9 +647,9 @@ var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children = _ref.children,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$N);
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
-    return styles$y[c];
+    return styles$x[c];
   });
-  var badgeClasses = classNames(styles$y.badge, className, responsiveClasses, (_classNames = {}, _classNames[styles$y[variant]] = variant, _classNames));
+  var badgeClasses = classNames(styles$x.badge, className, responsiveClasses, (_classNames = {}, _classNames[styles$x[variant]] = variant, _classNames));
   return React__default.createElement(Box, _extends({
     ref: ref,
     className: badgeClasses,
@@ -659,13 +659,13 @@ var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, restProps), children || message);
 });
 
-var styles$x = {"spinner":"Spinner-module_spinner__SZoUP","spin":"Spinner-module_spin__Yk0wm"};
+var styles$w = {"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$x.spinner);
+  var classes = classNames(className, styles$w.spinner);
   var sizeInPixels = function sizeInPixels() {
     var pixels;
     if (size === 'sm') pixels = '12';
@@ -752,7 +752,7 @@ var Spinner = function Spinner(_ref) {
   }))));
 };
 
-var styles$w = {"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","link":"Button-module_link__MzvJO","size-sm-tablet":"Button-module_size-sm-tablet__9XaSx","size-md-tablet":"Button-module_size-md-tablet__YQxaI","size-lg-tablet":"Button-module_size-lg-tablet__h3l97","size-sm-desktop":"Button-module_size-sm-desktop__8tTsg","size-md-desktop":"Button-module_size-md-desktop__OCdDi","size-lg-desktop":"Button-module_size-lg-desktop__uFc4f","size-sm-hd":"Button-module_size-sm-hd__INFfD","size-md-hd":"Button-module_size-md-hd__8e2mW","size-lg-hd":"Button-module_size-lg-hd__DH60l","loading":"Button-module_loading__QfItr","label":"Button-module_label__1PsXG","full-width":"Button-module_full-width__qDri6","spinner-wrapper":"Button-module_spinner-wrapper__rALNw"};
+var styles$v = {"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","link":"Button-module_link__MzvJO","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$M = ["asChild", "children", "className", "fullWidth", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "onClick", "onBlur", "onFocus", "shadow", "size", "type", "variant"];
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -778,9 +778,9 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$M);
   var disabled = isLoading || isDisabled;
   var responsiveClasses = variant !== 'link' ? generateResponsiveClasses('size', size).map(function (c) {
-    return styles$w[c];
+    return styles$v[c];
   }).filter(Boolean) : [];
-  var buttonClasses = classNames('hyphen-components__variables__form-control', styles$w.button, className, responsiveClasses, generateResponsiveClasses('shadow', shadow), (_classNames = {}, _classNames[styles$w.loading] = isLoading, _classNames[styles$w[variant]] = variant, _classNames[styles$w['full-width']] = fullWidth, _classNames));
+  var buttonClasses = classNames('hyphen-components__variables__form-control', styles$v.button, className, responsiveClasses, generateResponsiveClasses('shadow', shadow), (_classNames = {}, _classNames[styles$v.loading] = isLoading, _classNames[styles$v[variant]] = variant, _classNames[styles$v['full-width']] = fullWidth, _classNames));
   var handleClick = !disabled ? onClick : undefined;
   var handleBlur = !disabled ? onBlur : undefined;
   var handleFocus = !disabled ? onFocus : undefined;
@@ -797,18 +797,18 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, !asChild && {
     type: type
   }, restProps), isLoading && React__default.createElement(Spinner, {
-    className: styles$w['spinner-wrapper']
+    className: styles$v['spinner-wrapper']
   }), iconPrefix && React__default.createElement(Icon, {
-    className: styles$w.label,
+    className: styles$v.label,
     name: iconPrefix,
     "aria-hidden": "true",
     focusable: "false",
     "data-testid": "prefixIcon",
     size: size === 'md' ? 'sm' : size
   }), children && React__default.createElement(Slottable, null, asChild ? children : React__default.createElement("span", {
-    className: styles$w.label
+    className: styles$v.label
   }, children)), iconSuffix && React__default.createElement(Icon, {
-    className: styles$w.label,
+    className: styles$v.label,
     name: iconSuffix,
     "aria-hidden": "true",
     focusable: "false",
@@ -851,7 +851,7 @@ var HEADING_DEFAULT_SIZE_MAP = {
   h6: 'sm'
 };
 
-var styles$v = {"heading":"Heading-module_heading__zKyv7"};
+var styles$u = {"heading":"Heading-module_heading__zKyv7"};
 
 var _excluded$K = ["as", "children", "className", "color", "size"];
 var Heading = function Heading(_ref) {
@@ -867,7 +867,7 @@ var Heading = function Heading(_ref) {
     as: as
   });
   var headingSize = size || HEADING_DEFAULT_SIZE_MAP[as];
-  var classes = classNames(styles$v.heading, className, generateResponsiveClasses('heading', headingSize), (_classNames = {}, _classNames["font-color-" + color] = color, _classNames));
+  var classes = classNames(styles$u.heading, className, generateResponsiveClasses('heading', headingSize), (_classNames = {}, _classNames["font-color-" + color] = color, _classNames));
   return createElement(element, _extends({
     className: classes
   }, restProps), children);
@@ -899,7 +899,7 @@ var CardHeader = function CardHeader(_ref) {
   }, description) : description)), children);
 };
 
-var styles$u = {"card-section-border":"Card-module_card-section-border__OefDX"};
+var styles$t = {"card-section-border":"Card-module_card-section-border__OefDX"};
 
 var _excluded$I = ["background", "borderColor", "borderWidth", "children", "childGap", "gap", "className", "display", "padding", "subdued", "title"];
 var CardSection = function CardSection(_ref) {
@@ -935,7 +935,7 @@ var CardSection = function CardSection(_ref) {
     fontSize: "sm",
     color: "base"
   }, title)) : title;
-  var sectionClasses = classNames((_classNames = {}, _classNames[styles$u['card-section-border']] = borderColor === undefined && borderWidth === undefined, _classNames[styles$u['card-subdued']] = subdued, _classNames), className);
+  var sectionClasses = classNames((_classNames = {}, _classNames[styles$t['card-section-border']] = borderColor === undefined && borderWidth === undefined, _classNames[styles$t['card-subdued']] = subdued, _classNames), className);
   return React__default.createElement(Box, _extends({
     background: background,
     borderColor: borderColor,
@@ -1017,7 +1017,7 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
   }));
 };
 
-var styles$t = {"checkbox":"Checkbox-module_checkbox__dY-7P","size-sm":"Checkbox-module_size-sm__mJkMQ","size-md":"Checkbox-module_size-md__I2s8g","size-lg":"Checkbox-module_size-lg__rFFnb","hidden":"Checkbox-module_hidden__2y7Zr","size-sm-tablet":"Checkbox-module_size-sm-tablet__GhQUW","size-md-tablet":"Checkbox-module_size-md-tablet__XRHf4","size-lg-tablet":"Checkbox-module_size-lg-tablet__quoAJ","size-sm-desktop":"Checkbox-module_size-sm-desktop__fqeEc","size-md-desktop":"Checkbox-module_size-md-desktop__9a278","size-lg-desktop":"Checkbox-module_size-lg-desktop__WQnv0","size-sm-hd":"Checkbox-module_size-sm-hd__X3yIF","size-md-hd":"Checkbox-module_size-md-hd__6T0dF","size-lg-hd":"Checkbox-module_size-lg-hd__UXCt1"};
+var styles$s = {"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$F = ["className", "display", "id", "isChecked", "label", "labelledby", "onChange", "error", "isDisabled", "isHidden", "isIndeterminate", "isRequired", "onBlur", "onFocus", "size", "value"];
 var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
@@ -1083,11 +1083,11 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     value: value
   });
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var containerClasses = classNames.apply(void 0, [styles$t.checkbox, className].concat(responsiveClasses.map(function (c) {
-    return styles$t[c];
-  }), [(_ref2 = {}, _ref2[styles$t.hidden] = isHidden, _ref2)]));
+  var containerClasses = classNames.apply(void 0, [styles$s.checkbox, className].concat(responsiveClasses.map(function (c) {
+    return styles$s[c];
+  }), [(_ref2 = {}, _ref2[styles$s.hidden] = isHidden, _ref2)]));
   var iconClasses = classNames.apply(void 0, responsiveClasses.map(function (c) {
-    return styles$t[c];
+    return styles$s[c];
   }));
   return React__default.createElement(Box, _extends({
     display: display,
@@ -1110,28 +1110,28 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }));
 });
 
-var styles$s = {"input-validation-message":"InputValidationMessage-module_input-validation-message__4MMMK"};
+var styles$r = {"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$s['input-validation-message'], 'font-color-danger', "font-size-" + size, 'm-top-sm');
+  var classes = classNames('hyphen-components__variables__form-control', styles$r['input-validation-message'], 'font-color-danger', "font-size-" + size, 'm-top-sm');
   return React__default.createElement("div", {
     className: classes
   }, children);
 };
 
-var styles$r = {"label":"FormLabel-module_label__qTUB9","radio-input-label":"FormLabel-module_radio-input-label__IpAiN","disabled":"FormLabel-module_disabled__83oiH","sm":"FormLabel-module_sm__6PwRr"};
+var styles$q = {"label":"FormLabel-module_label__qTUB9","radio-input-label":"FormLabel-module_radio-input-label__IpAiN","disabled":"FormLabel-module_disabled__83oiH","sm":"FormLabel-module_sm__6PwRr"};
 
-var styles$q = {"help-text":"HelpText-module_help-text__8WodW"};
+var styles$p = {"help-text":"HelpText-module_help-text__8WodW"};
 
 var HelpText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className;
   return React__default.createElement(Box, {
     ref: ref,
-    className: classNames('hyphen-components__variables__form-control', styles$q['help-text'], className),
+    className: classNames('hyphen-components__variables__form-control', styles$p['help-text'], className),
     display: "block",
     color: "secondary",
     fontSize: "sm"
@@ -1163,7 +1163,7 @@ var FormLabel = function FormLabel(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$E);
-  var labelClasses = classNames('hyphen-components__variables__form-control', styles$r.label, className, (_classNames = {}, _classNames[styles$r.sm] = size === 'sm', _classNames[styles$r.disabled] = isDisabled, _classNames[styles$r['radio-input-label']] = isRadioInputLabel, _classNames));
+  var labelClasses = classNames('hyphen-components__variables__form-control', styles$q.label, className, (_classNames = {}, _classNames[styles$q.sm] = size === 'sm', _classNames[styles$q.disabled] = isDisabled, _classNames[styles$q['radio-input-label']] = isRadioInputLabel, _classNames));
   return React__default.createElement(Box, _extends({
     as: "label",
     id: inputId + "Label",
@@ -1240,631 +1240,43 @@ var CheckboxInput = function CheckboxInput(_ref2) {
     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__default.createElement(Box, _extends({
-    className: className
-  }, restProps), React__default.createElement(Box, {
-    alignItems: "flex-start",
-    direction: "row"
-  }, React__default.createElement(Checkbox, _extends({}, checkboxProps, {
-    labelledby: id + "Label"
-  })), label && !hideLabel && React__default.createElement(FormLabel, _extends({}, labelProps), label)), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
-};
-
-var Collapsible = CollapsiblePrimitive.Root;
-var CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-var CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-
-var styles$p = {};
-
-var _excluded$C = ["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$C);
-  var datePickerClasses = classNames(styles$p['react-datepicker'], className);
-  return React__default.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$B = ["label", "hideLabel", "children", "error", "id", "isRequired", "helpText", "isDisabled", "requiredIndicator", "width"];
-var FormControl = /*#__PURE__*/React__default.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$B);
-  var labelProps = {
-    inputId: id,
-    helpText: helpText,
-    margin: '0 0 xs 0',
-    isDisabled: isDisabled,
-    isFieldRequired: isRequired,
-    requiredIndicator: requiredIndicator
-  };
-  return React__default.createElement(Box, _extends({
-    width: width,
-    ref: ref
-  }, restProps), label && !hideLabel && React__default.createElement(FormLabel, _extends({}, labelProps), label), children, error && error !== true && React__default.createElement(InputValidationMessage, null, error));
-});
-
-// eslint-disable-next-line import/prefer-default-export
-function getAutoCompleteValue(value) {
-  if (!value || typeof value !== 'boolean' && typeof value !== 'string') {
-    return 'off';
-  }
-  if (typeof value === 'boolean' && value) {
-    return 'on';
-  }
-  return value;
-}
-
-var styles$o = {"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$A = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "error", "helpText", "hideLabel", "inputProps", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onClear", "onFocus", "prefix", "placeholder", "requiredIndicator", "suffix", "size", "type"];
-var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref2;
-  var id = _ref.id,
-    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$A);
-  var responsiveClasses = generateResponsiveClasses('size', size);
-  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$o['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
-    return styles$o[c];
-  }), [(_ref2 = {}, _ref2[styles$o.error] = error, _ref2[styles$o.disabled] = isDisabled, _ref2[styles$o['is-clearable']] = onClear, _ref2)]));
-  var clearBtnClasses = classNames(styles$o['clear-button'], styles$o.md);
-  var renderClearIcon = function renderClearIcon() {
-    var handleKeyPress = function handleKeyPress(event) {
-      if (event.keyCode === 13 && onClear) onClear(event);
-    };
-    return React__default.createElement("button", {
-      type: "button",
-      onClick: onClear,
-      onKeyUp: handleKeyPress,
-      className: clearBtnClasses,
-      "data-testid": "text-input-clear-button",
-      "aria-label": "clear input"
-    }, React__default.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__default.createElement(FormControl, _extends({
-    helpText: helpText,
-    error: error,
-    label: label,
-    id: id,
-    hideLabel: hideLabel,
-    isDisabled: isDisabled,
-    isRequired: isRequired,
-    requiredIndicator: requiredIndicator,
-    ref: ref
-  }, restProps), React__default.createElement(Box, {
-    direction: "row",
-    overflow: "hidden",
-    className: inputWrapperClasses
-  }, prefix && React__default.createElement(Box, {
-    color: "secondary",
-    background: "secondary",
-    className: classNames(styles$o.prefix, 'ws-nowrap')
-  }, prefix), React__default.createElement(Box, _extends({
-    as: "input"
-  }, computedInputProps)), !!onClear && !!value && renderClearIcon(), suffix && React__default.createElement(Box, {
-    color: "secondary",
-    background: "secondary",
-    className: classNames(styles$o.suffix, 'ws-nowrap')
-  }, suffix)));
-});
-
-var styles$n = {"PopoverContent":"Popover-module_PopoverContent__1Ki2o","slideUp":"Popover-module_slideUp__z1H3Z","slideDown":"Popover-module_slideDown__KPRrt","slideLeft":"Popover-module_slideLeft__BVjMh","slideRight":"Popover-module_slideRight__PoOkh"};
-
-var _excluded$z = ["className", "align", "sideOffset"];
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverPortal = PopoverPrimitive.Portal;
-var PopoverContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'center' : _ref$align,
-    _ref$sideOffset = _ref.sideOffset,
-    sideOffset = _ref$sideOffset === void 0 ? 4 : _ref$sideOffset,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
-  return React__default.createElement(PopoverPrimitive.Content, _extends({
-    ref: ref,
-    align: align,
-    sideOffset: sideOffset,
-    className: classNames(styles$n.PopoverContent, className)
-  }, props));
-});
-
-// 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)
-    };
-  }
-  return undefined;
-}).filter(function (breakpoint) {
-  return breakpoint !== undefined;
-});
-var Z_INDEX_VALUES = designTokens.size['z-index'];
-// export const BOX_SHADOW_VALUES = designTokens.size['box-shadow'];
-
-// eslint-disable-next-line import/prefer-default-export
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-var ResponsiveContext = /*#__PURE__*/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 = useState(0),
-    innerWidth = _useState[0],
-    setInnerWidth = _useState[1];
-  var _useState2 = useState(0),
-    innerHeight = _useState2[0],
-    setInnerHeight = _useState2[1];
-  var _useState3 = useState(0),
-    outerWidth = _useState3[0],
-    setOuterWidth = _useState3[1];
-  var _useState4 = 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 () {
-        window.removeEventListener('resize', throttledResize);
-        clearTimeout(timeoutId);
-      };
-    }
-  }, [throttle]);
-  return React__default.createElement(ResponsiveContext.Provider, {
-    value: {
-      innerWidth: innerWidth,
-      innerHeight: innerHeight,
-      outerHeight: outerHeight,
-      outerWidth: outerWidth,
-      isCreated: true
-    }
-  }, children);
-};
-
-var useWindowSize = function useWindowSize() {
-  var _React$useContext = React__default.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 = 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 desktopBreakpoint = /*#__PURE__*/BREAKPOINTS.find(function (b) {
-  return b.name === 'desktop';
-});
-var MOBILE_BREAKPOINT = desktopBreakpoint ? desktopBreakpoint.minWidth : 0; // min width in pixels
-function useIsMobile() {
-  var _React$useState = React.useState(undefined),
-    isMobile = _React$useState[0],
-    setIsMobile = _React$useState[1];
-  React.useEffect(function () {
-    var mql = window.matchMedia("(max-width: " + (MOBILE_BREAKPOINT - 1) + "px)");
-    var onChange = function onChange() {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener('change', onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return function () {
-      return mql.removeEventListener('change', onChange);
-    };
-  }, []);
-  return !!isMobile;
-}
-
-var useOpenClose = function useOpenClose(props) {
-  if (props === void 0) {
-    props = {};
-  }
-  var _props = props,
-    defaultIsOpen = _props.defaultIsOpen,
-    isOpenProp = _props.isOpen,
-    onCloseProp = _props.onClose,
-    onOpenProp = _props.onOpen;
-  var openCallback = useCallback(function () {
-    onOpenProp == null || onOpenProp();
-  }, [onOpenProp]);
-  var closeCallback = useCallback(function () {
-    onCloseProp == null || onCloseProp();
-  }, [onCloseProp]);
-  var _useState = useState(defaultIsOpen || false),
-    isOpenState = _useState[0],
-    setIsOpen = _useState[1];
-  var isOpen = isOpenProp !== undefined ? isOpenProp : isOpenState;
-  var isControlled = isOpenProp !== undefined;
-  var handleClose = useCallback(function () {
-    if (!isControlled) {
-      setIsOpen(false);
-    }
-    closeCallback == null || closeCallback();
-  }, [isControlled, closeCallback]);
-  var handleOpen = useCallback(function () {
-    if (!isControlled) {
-      setIsOpen(true);
-    }
-    openCallback == null || openCallback();
-  }, [isControlled, openCallback]);
-  var handleToggle = useCallback(function () {
-    if (isOpen) {
-      handleClose();
-    } else {
-      handleOpen();
-    }
-  }, [isOpen, handleOpen, handleClose]);
-  return {
-    isOpen: isOpen,
-    handleClose: handleClose,
-    handleOpen: handleOpen,
-    handleToggle: handleToggle
-  };
-};
-
-var _excluded$y = ["children", "defaultTheme", "storageKey"];
-var initialState = {
-  theme: 'system',
-  setTheme: function setTheme() {
-    return null;
-  }
-};
-var ThemeProviderContext = /*#__PURE__*/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$y);
-  var _useState = useState(function () {
-      return localStorage.getItem(storageKey) || defaultTheme;
-    }),
-    theme = _useState[0],
-    _setTheme = _useState[1];
-  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 isDarkMode = theme === 'dark' || theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches;
-  var value = {
-    theme: theme,
-    setTheme: function setTheme(theme) {
-      localStorage.setItem(storageKey, theme);
-      _setTheme(theme);
-    },
-    isDarkMode: isDarkMode
-  };
-  return React__default.createElement(ThemeProviderContext.Provider, _extends({}, props, {
-    value: value
-  }), children);
-}
-
-var useTheme = function useTheme() {
-  var context = React__default.useContext(ThemeProviderContext);
-  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider. Be sure your App is wrapped in ThemeProvider.');
-  return context;
-};
-
-var defaultDatePickerProps = {
-  selected: null,
-  selectsRange: false
-};
-var defaultPopoverProps = {
-  align: 'start',
-  side: 'bottom'
-};
-var defaultTextInputProps = {
-  label: 'Select Date'
-};
-var DateInput = function DateInput(_ref) {
-  var _datePickerProps$sele, _datePickerProps$sele2, _popoverProps$side, _popoverProps$align;
-  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;
-  var _useOpenClose = useOpenClose(),
-    isOpen = _useOpenClose.isOpen,
-    handleClose = _useOpenClose.handleClose,
-    handleOpen = _useOpenClose.handleOpen;
-  // Internal state for selected date if not controlled
-  var isControlled = datePickerProps.selected !== undefined;
-  var _useState = useState(Array.isArray(datePickerProps.selected) ? (_datePickerProps$sele = datePickerProps.selected[0]) != null ? _datePickerProps$sele : null : (_datePickerProps$sele2 = datePickerProps.selected) != null ? _datePickerProps$sele2 : null),
-    internalSelected = _useState[0],
-    setInternalSelected = _useState[1];
-  // Use controlled or internal state
-  var selectedDate = isControlled ? datePickerProps.selected : internalSelected;
-  var mergedDatePickerProps = _extends({}, defaultDatePickerProps, datePickerProps, {
-    selected: selectedDate
-  });
-  var mergedPopoverProps = _extends({}, defaultPopoverProps, popoverProps, {
-    side: (_popoverProps$side = popoverProps == null ? void 0 : popoverProps.side) != null ? _popoverProps$side : defaultPopoverProps.side,
-    align: (_popoverProps$align = popoverProps == null ? void 0 : popoverProps.align) != null ? _popoverProps$align : defaultPopoverProps.align,
-    onInteractOutside: handleClose
-  });
-  var mergedTextInputProps = _extends({}, defaultTextInputProps, textInputProps);
-  var getTextInputValue = function getTextInputValue() {
-    var selectsRange = mergedDatePickerProps.selectsRange,
-      startDate = mergedDatePickerProps.startDate,
-      endDate = mergedDatePickerProps.endDate,
-      selected = mergedDatePickerProps.selected;
-    // If selectsRange and selected is an array, use it for start/end
-    var rangeStart = startDate;
-    var rangeEnd = endDate;
-    if (selectsRange && Array.isArray(selected)) {
-      var _selected$, _selected$2;
-      rangeStart = (_selected$ = selected[0]) != null ? _selected$ : null;
-      rangeEnd = (_selected$2 = selected[1]) != null ? _selected$2 : null;
-    }
-    var formattedStartDate = rangeStart ? format(rangeStart, dateFormat, dateOptions) : '';
-    var formattedEndDate = rangeEnd ? format(rangeEnd, dateFormat, dateOptions) : '';
-    var formattedSelectedDate = selected && !selectsRange && !Array.isArray(selected) ? format(selected, dateFormat, dateOptions) : '';
-    if (selectsRange) {
-      return "" + formattedStartDate + (formattedStartDate || formattedEndDate ? ' - ' : '') + formattedEndDate;
-    }
-    return formattedSelectedDate;
-  };
-  var handleDatePickerChange = function handleDatePickerChange(date, event) {
-    if (datePickerProps.onChange) {
-      datePickerProps.onChange(date, event);
-    }
-    if (!isControlled) {
-      // If not controlled, update internal state
-      if (Array.isArray(date)) {
-        var _date$;
-        setInternalSelected((_date$ = date[0]) != null ? _date$ : null);
-      } else {
-        setInternalSelected(date);
-      }
-    }
-    // Close popover when a date is selected (single) or when end date is selected (range)
-    if (mergedDatePickerProps.selectsRange) {
-      if (Array.isArray(date) && date[0] && date[1]) {
-        handleClose();
-      }
-    } else if (date) {
-      handleClose();
-    }
+    label: label,
+    className: classNames('hyphen-components__variables__form-control', 'm-right-md'),
+    error: error
   };
-  return React__default.createElement(Popover, {
-    open: isOpen
-  }, React__default.createElement(PopoverTrigger, {
-    asChild: true
-  }, React__default.createElement(TextInput, _extends({
-    id: mergedTextInputProps.id,
-    name: mergedTextInputProps.name,
-    label: mergedTextInputProps.label,
-    value: getTextInputValue(),
-    readOnly: true,
-    onClick: handleOpen,
-    inputProps: {
-      className: 'text-align-left'
-    },
-    type: "text",
-    onChange: function onChange() {
-      return null;
-    }
-  }, mergedTextInputProps))), React__default.createElement(PopoverPortal, null, React__default.createElement(PopoverContent, _extends({}, mergedPopoverProps), React__default.createElement(DatePicker, _extends({}, mergedDatePickerProps, {
-    onChange: handleDatePickerChange,
-    selected: selectedDate,
-    selectsRange: mergedDatePickerProps.selectsRange
-  })))));
+  var labelProps = {
+    inputId: id,
+    helpText: helpText,
+    isDisabled: isDisabled,
+    isFieldRequired: isRequired,
+    requiredIndicator: requiredIndicator,
+    className: classNames.apply(void 0, cssShorthandToClasses('m', computedResponsiveSize(size)))
+  };
+  return React__default.createElement(Box, _extends({
+    className: className
+  }, restProps), React__default.createElement(Box, {
+    alignItems: "flex-start",
+    direction: "row"
+  }, React__default.createElement(Checkbox, _extends({}, checkboxProps, {
+    labelledby: id + "Label"
+  })), label && !hideLabel && React__default.createElement(FormLabel, _extends({}, labelProps), label)), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 };
 
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
 var ENTER = 13;
 var SPACE = 32;
 
-var _excluded$x = ["children", "display", "isDetailsOpen", "onToggle"];
+var _excluded$C = ["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$x);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   var handleClick = function handleClick(event) {
     // Needed to avoid default `details` behavior on a click event and keep this as controlled component.
     event.preventDefault();
@@ -1900,17 +1312,17 @@ var DetailsSummary = function DetailsSummary(_ref) {
   }), children);
 };
 
-var styles$m = {"details-reset":"Details-module_details-reset__HWtSD"};
+var styles$o = {"details-reset":"Details-module_details-reset__HWtSD"};
 
-var _excluded$w = ["children", "className", "display", "isOpen"];
+var _excluded$B = ["children", "className", "display", "isOpen"];
 var DetailsBaseComponent = /*#__PURE__*/React__default.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$w);
-  var detailsClasses = classNames(className, styles$m['details-reset'], styles$m.details);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+  var detailsClasses = classNames(className, styles$o['details-reset'], styles$o.details);
   return React__default.createElement(Box, _extends({
     as: "details",
     className: detailsClasses,
@@ -1927,9 +1339,9 @@ var Details = /*#__PURE__*/function () {
   return Details;
 }();
 
-var styles$l = {"drawer":"Drawer-module_drawer__IKoOm","hide-overlay-right":"Drawer-module_hide-overlay-right__FANA9","hide-overlay-left":"Drawer-module_hide-overlay-left__xZFa3","hide-overlay-bottom":"Drawer-module_hide-overlay-bottom__11EB1","hide-overlay-top":"Drawer-module_hide-overlay-top__kEsV5","drawer-content":"Drawer-module_drawer-content__zZ9xR","left":"Drawer-module_left__pwTcW","right":"Drawer-module_right__EzGpI","bottom":"Drawer-module_bottom__r3Q5Z","top":"Drawer-module_top__xQejO"};
+var styles$n = {"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 _excluded$v = ["defaultIsOpen", "open", "onOpenChange", "className", "children"],
+var _excluded$A = ["defaultIsOpen", "open", "onOpenChange", "className", "children"],
   _excluded2$3 = ["asChild", "onClick"],
   _excluded3$2 = ["className"],
   _excluded4$2 = ["className"],
@@ -1950,7 +1362,7 @@ var DrawerProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setOpenProp = _ref.onOpenChange,
     className = _ref.className,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var _useState = useState(openProp != null ? openProp : defaultIsOpen),
     _open = _useState[0],
     _setOpen = _useState[1];
@@ -2069,8 +1481,8 @@ var Drawer = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   }, [initialFocusRef]);
   var dynamicWidth = width;
   var dynamicStyle = (_dynamicStyle = {}, _dynamicStyle['--drawer-width'] = dynamicWidth, _dynamicStyle);
-  var overlayClassnames = classNames(styles$l.overlay, styles$l.drawer, (_classNames = {}, _classNames[styles$l['hide-overlay']] = hideOverlay, _classNames[styles$l["hide-overlay-" + placement]] = hideOverlay, _classNames['position-fixed'] = containerRef === undefined, _classNames['position-absolute'] = containerRef !== undefined, _classNames));
-  var contentClassnames = classNames(styles$l['drawer-content'], styles$l[placement], (_classNames2 = {}, _classNames2[styles$l['hide-overlay']] = hideOverlay, _classNames2));
+  var overlayClassnames = classNames(styles$n.overlay, styles$n.drawer, (_classNames = {}, _classNames[styles$n['hide-overlay']] = hideOverlay, _classNames[styles$n["hide-overlay-" + placement]] = hideOverlay, _classNames['position-fixed'] = containerRef === undefined, _classNames['position-absolute'] = containerRef !== undefined, _classNames));
+  var contentClassnames = classNames(styles$n['drawer-content'], styles$n[placement], (_classNames2 = {}, _classNames2[styles$n['hide-overlay']] = hideOverlay, _classNames2));
   var parentElement = containerRef != null && containerRef.current ? containerRef.current : document.body;
   var isDisabledFocusLock = hideOverlay || dangerouslyBypassFocusLock;
   var isDisabledRemoveScroll = hideOverlay || dangerouslyBypassScrollLock;
@@ -2180,7 +1592,7 @@ var DrawerContent = /*#__PURE__*/React__default.forwardRef(function (_ref7, ref)
   }, props));
 });
 
-var _excluded$u = ["className", "inset"],
+var _excluded$z = ["className", "inset"],
   _excluded2$2 = ["className", "sideOffset"],
   _excluded3$1 = ["className", "inset"],
   _excluded4$1 = ["className"],
@@ -2196,7 +1608,7 @@ var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var DropdownMenuItem = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     inset = _ref.inset,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   return React__default.createElement(DropdownMenuPrimitive.Item, _extends({
     ref: ref,
     className: classNames('font-size-sm position-relative cursor-default display-flex br-sm align-items-center p-sm g-sm outline-none', inset && 'p-left-md', !props.disabled && 'hover:background-color-secondary focus:background-color-secondary', props.disabled && 'cursor-not-allowed font-color-disabled', className)
@@ -2276,7 +1688,35 @@ var DropdownMenuSubContent = /*#__PURE__*/React__default.forwardRef(function (_r
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
-var _excluded$t = ["field", "form", "onChange", "id", "label"];
+var _excluded$y = ["label", "hideLabel", "children", "error", "id", "isRequired", "helpText", "isDisabled", "requiredIndicator", "width"];
+var FormControl = /*#__PURE__*/React__default.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$y);
+  var labelProps = {
+    inputId: id,
+    helpText: helpText,
+    margin: '0 0 xs 0',
+    isDisabled: isDisabled,
+    isFieldRequired: isRequired,
+    requiredIndicator: requiredIndicator
+  };
+  return React__default.createElement(Box, _extends({
+    width: width,
+    ref: ref
+  }, restProps), label && !hideLabel && React__default.createElement(FormLabel, _extends({}, labelProps), label), children, error && error !== true && React__default.createElement(InputValidationMessage, null, error));
+});
+
+var _excluded$x = ["field", "form", "onChange", "id", "label"];
 var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2289,7 +1729,7 @@ var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   return React__default.createElement(CheckboxInput, _extends({}, props, {
     id: id,
     label: label,
@@ -2300,7 +1740,7 @@ var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
   }));
 };
 
-var _excluded$s = ["className", "isSelected", "isDisabled", "error"];
+var _excluded$w = ["className", "isSelected", "isDisabled", "error"];
 var RadioInputIcon = function RadioInputIcon(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className,
@@ -2310,7 +1750,7 @@ var RadioInputIcon = function RadioInputIcon(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$error = _ref.error,
     error = _ref$error === void 0 ? null : _ref$error,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var color = 'secondary';
   var name = 'radio-btn-unchecked';
   if (isSelected && isDisabled) {
@@ -2332,7 +1772,7 @@ var RadioInputIcon = function RadioInputIcon(_ref) {
   }));
 };
 
-var styles$k = {"size-sm":"RadioInput-module_size-sm__6DLmn","size-md":"RadioInput-module_size-md__wiJ4R","size-lg":"RadioInput-module_size-lg__pX8S8","radio-container":"RadioInput-module_radio-container__EBRgV","hidden":"RadioInput-module_hidden__KF4as","size-sm-tablet":"RadioInput-module_size-sm-tablet__x7edi","size-md-tablet":"RadioInput-module_size-md-tablet__T-HTa","size-lg-tablet":"RadioInput-module_size-lg-tablet__0Hkim","size-sm-desktop":"RadioInput-module_size-sm-desktop__HjeWG","size-md-desktop":"RadioInput-module_size-md-desktop__3Y1fn","size-lg-desktop":"RadioInput-module_size-lg-desktop__z3nKW","size-sm-hd":"RadioInput-module_size-sm-hd__oxAR7","size-md-hd":"RadioInput-module_size-md-hd__ws7ro","size-lg-hd":"RadioInput-module_size-lg-hd__87uii"};
+var styles$m = {"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__default.forwardRef(function (_ref, ref) {
   var _classNames;
@@ -2356,7 +1796,7 @@ var RadioInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size;
   var responsiveClasses = classNames.apply(void 0, generateResponsiveClasses('size', size).map(function (c) {
-    return styles$k[c];
+    return styles$m[c];
   }));
   var labelProps = {
     inputId: option.id,
@@ -2365,7 +1805,7 @@ var RadioInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     isRadioInputLabel: true,
     justifyContent: 'center'
   };
-  var containerClasses = classNames('hyphen-components__variables__form-control', className, styles$k['radio-container'], responsiveClasses, (_classNames = {}, _classNames[styles$k.hidden] = isHidden, _classNames));
+  var containerClasses = classNames('hyphen-components__variables__form-control', className, styles$m['radio-container'], responsiveClasses, (_classNames = {}, _classNames[styles$m.hidden] = isHidden, _classNames));
   return React__default.createElement(React__default.Fragment, null, option && React__default.createElement(Box, {
     className: containerClasses,
     key: option.id,
@@ -2401,9 +1841,9 @@ var RadioInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }), option.label && React__default.createElement(FormLabel, _extends({}, labelProps), option.label)));
 });
 
-var styles$j = {"radio-group":"RadioGroup-module_radio-group__FWPcT","fieldset":"RadioGroup-module_fieldset__PEUXI","legend":"RadioGroup-module_legend__tcfV7","description":"RadioGroup-module_description__8fzM-"};
+var styles$l = {"radio-group":"RadioGroup-module_radio-group__FWPcT","fieldset":"RadioGroup-module_fieldset__PEUXI","legend":"RadioGroup-module_legend__tcfV7","description":"RadioGroup-module_description__8fzM-"};
 
-var _excluded$r = ["name", "onChange", "options", "className", "description", "direction", "error", "isDisabled", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size", "title", "value"];
+var _excluded$v = ["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,
@@ -2433,20 +1873,20 @@ var RadioGroup = function RadioGroup(_ref) {
     title = _ref$title === void 0 ? undefined : _ref$title,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? undefined : _ref$value,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
-  var groupClasses = classNames('hyphen-components__variables__form-control', className, (_classNames = {}, _classNames[styles$j.loading] = error, _classNames));
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+  var groupClasses = classNames('hyphen-components__variables__form-control', className, (_classNames = {}, _classNames[styles$l.loading] = error, _classNames));
   return React__default.createElement("div", _extends({
-    className: classNames(styles$j['radio-group'], groupClasses)
+    className: classNames(styles$l['radio-group'], groupClasses)
   }, restProps), React__default.createElement("fieldset", {
-    className: styles$j.fieldset
+    className: styles$l.fieldset
   }, (title || description) && React__default.createElement("legend", {
-    className: styles$j.legend
+    className: styles$l.legend
   }, title, isRequired && React__default.createElement("span", null, requiredIndicator), description && React__default.createElement("div", {
-    className: styles$j.description
+    className: styles$l.description
   }, description)), React__default.createElement(Box, {
     direction: direction,
     gap: "sm",
-    className: styles$j.options
+    className: styles$l.options
   }, options && options.map(function (option) {
     return React__default.createElement(RadioInput, {
       key: option.id,
@@ -2463,7 +1903,7 @@ var RadioGroup = function RadioGroup(_ref) {
   }))), error && typeof error !== 'boolean' && React__default.createElement(InputValidationMessage, null, error));
 };
 
-var _excluded$q = ["field", "form", "onChange", "options"];
+var _excluded$u = ["field", "form", "onChange", "options"];
 var FormikRadioGroup = function FormikRadioGroup(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2475,7 +1915,7 @@ var FormikRadioGroup = function FormikRadioGroup(_ref) {
     errors = _ref$form.errors,
     onChange = _ref.onChange,
     options = _ref.options,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   return React__default.createElement(RadioGroup, _extends({}, props, {
     options: options,
     name: name,
@@ -2486,6 +1926,17 @@ var FormikRadioGroup = function FormikRadioGroup(_ref) {
   }));
 };
 
+// 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;
+}
+
 // eslint-disable-next-line import/prefer-default-export
 var getColumnKeys = function getColumnKeys(columns) {
   var INTERNAL_KEY_PREFIX = 'columnKeyPrefix';
@@ -2531,9 +1982,28 @@ valOrFunction, arg) {
   return isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction;
 };
 
-var styles$i = {"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"};
+// 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)
+    };
+  }
+  return undefined;
+}).filter(function (breakpoint) {
+  return breakpoint !== undefined;
+});
+var Z_INDEX_VALUES = designTokens.size['z-index'];
+// export const BOX_SHADOW_VALUES = designTokens.size['box-shadow'];
+
+var styles$k = {"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$p = ["id", "label", "onChange", "options", "value", "autoFocus", "className", "error", "helpText", "hideLabel", "isClearable", "isAsync", "isCreatable", "isDisabled", "isMulti", "isRequired", "menuPortalTarget", "name", "onFocus", "onBlur", "placeholder", "requiredIndicator", "size"];
+var _excluded$t = ["id", "label", "onChange", "options", "value", "autoFocus", "className", "error", "helpText", "hideLabel", "isClearable", "isAsync", "isCreatable", "isDisabled", "isMulti", "isRequired", "menuPortalTarget", "name", "onFocus", "onBlur", "placeholder", "requiredIndicator", "size"];
 function SelectInput(props) {
   var _ref, _classNames;
   var id = props.id,
@@ -2576,7 +2046,7 @@ function SelectInput(props) {
     requiredIndicator = _props$requiredIndica === void 0 ? ' *' : _props$requiredIndica,
     _props$size = props.size,
     size = _props$size === void 0 ? 'md' : _props$size,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded$p);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$t);
   var handleChange = function handleChange(values) {
     var simulatedEventPayloadType = {
       target: {
@@ -2594,13 +2064,13 @@ function SelectInput(props) {
   };
   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$i[c];
-  }), [(_ref = {}, _ref[styles$i.disabled] = isDisabled, _ref)]));
-  var inputClasses = classNames('react-select', (_classNames = {}, _classNames[styles$i.error] = error, _classNames));
+    return styles$k[c];
+  }), [(_ref = {}, _ref[styles$k.disabled] = isDisabled, _ref)]));
+  var inputClasses = classNames('react-select', (_classNames = {}, _classNames[styles$k.error] = error, _classNames));
   var labelProps = {
     inputId: id,
     helpText: helpText,
-    className: styles$i['select-input-label'],
+    className: styles$k['select-input-label'],
     isDisabled: isDisabled,
     isFieldRequired: isRequired,
     requiredIndicator: requiredIndicator
@@ -2649,7 +2119,7 @@ function SelectInput(props) {
   })), error && typeof error !== 'boolean' && React__default.createElement(InputValidationMessage, null, error));
 }
 
-var _excluded$o = ["field", "form", "onChange", "id", "label", "options", "error"];
+var _excluded$s = ["field", "form", "onChange", "id", "label", "options", "error"];
 var FormikSelectInput = function FormikSelectInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2664,7 +2134,7 @@ var FormikSelectInput = function FormikSelectInput(_ref) {
     label = _ref.label,
     options = _ref.options,
     errorProp = _ref.error,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var errorMessage;
   var error = errorProp != null ? errorProp : getIn(touched, name) && getIn(errors, name);
   if (typeof error === 'string') {
@@ -2687,7 +2157,7 @@ var FormikSelectInput = function FormikSelectInput(_ref) {
   }, props));
 };
 
-var styles$h = {"text-input-wrapper":"SelectInputInset-module_text-input-wrapper__hZ4Fy","size-md":"SelectInputInset-module_size-md__6MFcV","select-input-label":"SelectInputInset-module_select-input-label__6XdR6","clear-button":"SelectInputInset-module_clear-button__xbZaY","size-lg":"SelectInputInset-module_size-lg__i2Bzf","disabled":"SelectInputInset-module_disabled__DYSr2","size-md-tablet":"SelectInputInset-module_size-md-tablet__xwoPz","size-lg-tablet":"SelectInputInset-module_size-lg-tablet__2DgFa","size-md-desktop":"SelectInputInset-module_size-md-desktop__MfemS","size-lg-desktop":"SelectInputInset-module_size-lg-desktop__etLGJ","size-md-hd":"SelectInputInset-module_size-md-hd__NWb1q","size-lg-hd":"SelectInputInset-module_size-lg-hd__ycjXC","error":"SelectInputInset-module_error__j-jgS"};
+var styles$j = {"text-input-wrapper":"SelectInputInset-module_text-input-wrapper__hZ4Fy","size-md":"SelectInputInset-module_size-md__6MFcV","select-input-label":"SelectInputInset-module_select-input-label__6XdR6","clear-button":"SelectInputInset-module_clear-button__xbZaY","size-lg":"SelectInputInset-module_size-lg__i2Bzf","disabled":"SelectInputInset-module_disabled__DYSr2","size-md-tablet":"SelectInputInset-module_size-md-tablet__xwoPz","size-lg-tablet":"SelectInputInset-module_size-lg-tablet__2DgFa","size-md-desktop":"SelectInputInset-module_size-md-desktop__MfemS","size-lg-desktop":"SelectInputInset-module_size-lg-desktop__etLGJ","size-md-hd":"SelectInputInset-module_size-md-hd__NWb1q","size-lg-hd":"SelectInputInset-module_size-lg-hd__ycjXC","error":"SelectInputInset-module_error__j-jgS"};
 
 var SelectInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref2;
@@ -2729,10 +2199,10 @@ var SelectInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   var optionsWithPlaceholder = [_extends({}, placeholderOption)].concat(options);
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$h['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
-    return styles$h[c];
-  }), [(_ref2 = {}, _ref2[styles$h.error] = error, _ref2[styles$h.disabled] = isDisabled, _ref2[styles$h['is-clearable']] = onClear, _ref2)]));
-  var clearBtnClasses = classNames(styles$h['clear-button'], styles$h.md);
+  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$j['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
+    return styles$j[c];
+  }), [(_ref2 = {}, _ref2[styles$j.error] = error, _ref2[styles$j.disabled] = isDisabled, _ref2[styles$j['is-clearable']] = onClear, _ref2)]));
+  var clearBtnClasses = classNames(styles$j['clear-button'], styles$j.md);
   var renderClearIcon = function renderClearIcon() {
     var handleKeyPress = function handleKeyPress(event) {
       if (event.keyCode === 13 && onClear) onClear(event);
@@ -2787,12 +2257,12 @@ var SelectInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, option.label);
   })), !!onClear && !!value && renderClearIcon(), React__default.createElement("label", {
     htmlFor: id,
-    className: styles$h['select-input-label'],
+    className: styles$j['select-input-label'],
     id: id + "Label"
   }, label, isRequired && requiredIndicator && React__default.createElement("span", null, requiredIndicator))), helpText && React__default.createElement(HelpText, null, helpText), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 });
 
-var _excluded$n = ["field", "form", "onChange", "id", "label", "options"];
+var _excluded$r = ["field", "form", "onChange", "id", "label", "options"];
 var FormikSelectInputInset = function FormikSelectInputInset(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2806,7 +2276,7 @@ var FormikSelectInputInset = function FormikSelectInputInset(_ref) {
     id = _ref.id,
     label = _ref.label,
     options = _ref.options,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   return React__default.createElement(SelectInputInset, _extends({}, props, {
     id: id,
     label: label,
@@ -2819,7 +2289,7 @@ var FormikSelectInputInset = function FormikSelectInputInset(_ref) {
   }));
 };
 
-var styles$g = {"text-input-wrapper":"TextareaInputInset-module_text-input-wrapper__0VNFI","size-md":"TextareaInputInset-module_size-md__Hkdpr","text-input-label":"TextareaInputInset-module_text-input-label__yHDss","size-lg":"TextareaInputInset-module_size-lg__wOXof","disabled":"TextareaInputInset-module_disabled__U-Fpa","size-md-tablet":"TextareaInputInset-module_size-md-tablet__KnN-9","size-lg-tablet":"TextareaInputInset-module_size-lg-tablet__oJ0ib","size-md-desktop":"TextareaInputInset-module_size-md-desktop__uBIxD","size-lg-desktop":"TextareaInputInset-module_size-lg-desktop__3qmko","size-md-hd":"TextareaInputInset-module_size-md-hd__6340p","size-lg-hd":"TextareaInputInset-module_size-lg-hd__PtVQT","error":"TextareaInputInset-module_error__sxX-U","textarea-resize-both":"TextareaInputInset-module_textarea-resize-both__53-Ff","textarea-resize-horizontal":"TextareaInputInset-module_textarea-resize-horizontal__X0ibH","textarea-resize-vertical":"TextareaInputInset-module_textarea-resize-vertical__YlsyR","textarea-resize-none":"TextareaInputInset-module_textarea-resize-none__p0eJB"};
+var styles$i = {"text-input-wrapper":"TextareaInputInset-module_text-input-wrapper__0VNFI","size-md":"TextareaInputInset-module_size-md__Hkdpr","text-input-label":"TextareaInputInset-module_text-input-label__yHDss","size-lg":"TextareaInputInset-module_size-lg__wOXof","disabled":"TextareaInputInset-module_disabled__U-Fpa","size-md-tablet":"TextareaInputInset-module_size-md-tablet__KnN-9","size-lg-tablet":"TextareaInputInset-module_size-lg-tablet__oJ0ib","size-md-desktop":"TextareaInputInset-module_size-md-desktop__uBIxD","size-lg-desktop":"TextareaInputInset-module_size-lg-desktop__3qmko","size-md-hd":"TextareaInputInset-module_size-md-hd__6340p","size-lg-hd":"TextareaInputInset-module_size-lg-hd__PtVQT","error":"TextareaInputInset-module_error__sxX-U","textarea-resize-both":"TextareaInputInset-module_textarea-resize-both__53-Ff","textarea-resize-horizontal":"TextareaInputInset-module_textarea-resize-horizontal__X0ibH","textarea-resize-vertical":"TextareaInputInset-module_textarea-resize-vertical__YlsyR","textarea-resize-none":"TextareaInputInset-module_textarea-resize-none__p0eJB"};
 
 var TextareaInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref2, _classNames;
@@ -2862,9 +2332,9 @@ var TextareaInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type;
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$g['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
-    return styles$g[c];
-  }), [(_ref2 = {}, _ref2[styles$g.disabled] = isDisabled, _ref2)]));
+  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$i['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
+    return styles$i[c];
+  }), [(_ref2 = {}, _ref2[styles$i.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,
@@ -2873,7 +2343,7 @@ var TextareaInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     'aria-labelledby': label ? id + "Label" : undefined,
     autoComplete: getAutoCompleteValue(autoComplete),
     autoFocus: autoFocus,
-    className: classNames(styles$g["textarea-resize-" + resize], (_classNames = {}, _classNames[styles$g.error] = error, _classNames)),
+    className: classNames(styles$i["textarea-resize-" + resize], (_classNames = {}, _classNames[styles$i.error] = error, _classNames)),
     disabled: isDisabled,
     id: id,
     maxLength: maxLength,
@@ -2899,12 +2369,12 @@ var TextareaInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     as: "textarea"
   }, computedInputProps)), React__default.createElement("label", {
     htmlFor: id,
-    className: styles$g['text-input-label'],
+    className: styles$i['text-input-label'],
     id: id + "Label"
   }, label, isRequired && requiredIndicator && React__default.createElement("span", null, requiredIndicator))), helpText && React__default.createElement(HelpText, null, helpText), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 });
 
-var _excluded$m = ["field", "form", "onChange", "id", "label"];
+var _excluded$q = ["field", "form", "onChange", "id", "label"];
 var FormikTextareaInputInset = function FormikTextareaInputInset(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2917,7 +2387,7 @@ var FormikTextareaInputInset = function FormikTextareaInputInset(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   return React__default.createElement(TextareaInputInset, _extends({}, props, {
     id: id,
     label: label,
@@ -2929,7 +2399,7 @@ var FormikTextareaInputInset = function FormikTextareaInputInset(_ref) {
   }));
 };
 
-var styles$f = {"text-input-wrapper":"TextInputInset-module_text-input-wrapper__qQzOh","size-md":"TextInputInset-module_size-md__Lg91X","label-input-wrapper":"TextInputInset-module_label-input-wrapper__opMsd","text-input-label":"TextInputInset-module_text-input-label__zADJM","prefix":"TextInputInset-module_prefix__i-iby","suffix":"TextInputInset-module_suffix__r9ZnM","clear-button":"TextInputInset-module_clear-button__kV9pf","size-lg":"TextInputInset-module_size-lg__ggigL","disabled":"TextInputInset-module_disabled__udCEB","size-md-tablet":"TextInputInset-module_size-md-tablet__adPUS","size-lg-tablet":"TextInputInset-module_size-lg-tablet__HZTUo","size-md-desktop":"TextInputInset-module_size-md-desktop__Pjze7","size-lg-desktop":"TextInputInset-module_size-lg-desktop__5ov91","size-md-hd":"TextInputInset-module_size-md-hd__jyglU","size-lg-hd":"TextInputInset-module_size-lg-hd__ymgTS","error":"TextInputInset-module_error__LZghB"};
+var styles$h = {"text-input-wrapper":"TextInputInset-module_text-input-wrapper__qQzOh","size-md":"TextInputInset-module_size-md__Lg91X","label-input-wrapper":"TextInputInset-module_label-input-wrapper__opMsd","text-input-label":"TextInputInset-module_text-input-label__zADJM","prefix":"TextInputInset-module_prefix__i-iby","suffix":"TextInputInset-module_suffix__r9ZnM","clear-button":"TextInputInset-module_clear-button__kV9pf","size-lg":"TextInputInset-module_size-lg__ggigL","disabled":"TextInputInset-module_disabled__udCEB","size-md-tablet":"TextInputInset-module_size-md-tablet__adPUS","size-lg-tablet":"TextInputInset-module_size-lg-tablet__HZTUo","size-md-desktop":"TextInputInset-module_size-md-desktop__Pjze7","size-lg-desktop":"TextInputInset-module_size-lg-desktop__5ov91","size-md-hd":"TextInputInset-module_size-md-hd__jyglU","size-lg-hd":"TextInputInset-module_size-lg-hd__ymgTS","error":"TextInputInset-module_error__LZghB"};
 
 var TextInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref2;
@@ -2973,10 +2443,10 @@ var TextInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type;
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$f['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
-    return styles$f[c];
-  }), [(_ref2 = {}, _ref2[styles$f.error] = error, _ref2[styles$f.disabled] = isDisabled, _ref2[styles$f['is-clearable']] = onClear, _ref2)]));
-  var clearBtnClasses = classNames(styles$f['clear-button'], styles$f.md);
+  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$h['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
+    return styles$h[c];
+  }), [(_ref2 = {}, _ref2[styles$h.error] = error, _ref2[styles$h.disabled] = isDisabled, _ref2[styles$h['is-clearable']] = onClear, _ref2)]));
+  var clearBtnClasses = classNames(styles$h['clear-button'], styles$h.md);
   var renderClearIcon = function renderClearIcon() {
     var handleKeyPress = function handleKeyPress(event) {
       if (event.keyCode === 13 && onClear) onClear(event);
@@ -3025,7 +2495,7 @@ var TextInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     alignItems: "center",
     justifyContent: "center",
     background: "secondary",
-    className: classNames(styles$f.prefix, 'ws-nowrap')
+    className: classNames(styles$h.prefix, 'ws-nowrap')
   }, prefix), React__default.createElement(Box, {
     direction: "row",
     position: "relative",
@@ -3035,16 +2505,16 @@ var TextInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
     as: "input"
   }, computedInputProps)), !!onClear && !!value && renderClearIcon(), React__default.createElement("label", {
     htmlFor: id,
-    className: styles$f['text-input-label'],
+    className: styles$h['text-input-label'],
     id: id + "Label"
   }, label, isRequired && requiredIndicator && React__default.createElement("span", null, requiredIndicator))), suffix && React__default.createElement(Box, {
     color: "base",
     background: "secondary",
-    className: classNames(styles$f.suffix, 'ws-nowrap')
+    className: classNames(styles$h.suffix, 'ws-nowrap')
   }, suffix)), helpText && React__default.createElement(HelpText, null, helpText), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 });
 
-var _excluded$l = ["field", "form", "onChange", "id", "label"];
+var _excluded$p = ["field", "form", "onChange", "id", "label"];
 var FormikTextInputInset = function FormikTextInputInset(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3057,7 +2527,7 @@ var FormikTextInputInset = function FormikTextInputInset(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return React__default.createElement(TextInputInset, _extends({}, props, {
     id: id,
     label: label,
@@ -3069,9 +2539,9 @@ var FormikTextInputInset = function FormikTextInputInset(_ref) {
   }));
 };
 
-var styles$e = {"select-input-native-wrapper":"SelectInputNative-module_select-input-native-wrapper__-vvFm","disabled":"SelectInputNative-module_disabled__gKmV4","size-sm":"SelectInputNative-module_size-sm__7Ql4z","size-md":"SelectInputNative-module_size-md__ofleh","size-lg":"SelectInputNative-module_size-lg__ewS-6","size-sm-tablet":"SelectInputNative-module_size-sm-tablet__3wbFA","size-md-tablet":"SelectInputNative-module_size-md-tablet__nLo2t","size-lg-tablet":"SelectInputNative-module_size-lg-tablet__fLu2T","size-sm-desktop":"SelectInputNative-module_size-sm-desktop__aUL7D","size-md-desktop":"SelectInputNative-module_size-md-desktop__s1uoc","size-lg-desktop":"SelectInputNative-module_size-lg-desktop__Ri2Ka","size-sm-hd":"SelectInputNative-module_size-sm-hd__RVm4G","size-md-hd":"SelectInputNative-module_size-md-hd__m4Rqf","size-lg-hd":"SelectInputNative-module_size-lg-hd__V6i8b","error":"SelectInputNative-module_error__RBOZT","text-input-label":"SelectInputNative-module_text-input-label__-YjDc"};
+var styles$g = {"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$k = ["autoFocus", "label", "hideLabel", "helpText", "error", "id", "isDisabled", "isRequired", "name", "value", "options", "onChange", "placeholder", "requiredIndicator", "size"];
+var _excluded$o = ["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,
@@ -3093,16 +2563,16 @@ var SelectInputNative = function SelectInputNative(_ref) {
     requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   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$e['select-input-native-wrapper']].concat(responsiveClasses.map(function (className) {
-    return styles$e[className];
-  }), [(_ref2 = {}, _ref2[styles$e.disabled] = isDisabled, _ref2[styles$e.error] = error, _ref2)]));
+  var selectWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$g['select-input-native-wrapper']].concat(responsiveClasses.map(function (className) {
+    return styles$g[className];
+  }), [(_ref2 = {}, _ref2[styles$g.disabled] = isDisabled, _ref2[styles$g.error] = error, _ref2)]));
   return React__default.createElement(FormControl, _extends({
     label: label,
     hideLabel: hideLabel,
@@ -3139,7 +2609,7 @@ var SelectInputNative = function SelectInputNative(_ref) {
   }))));
 };
 
-var _excluded$j = ["field", "form", "onChange", "options", "id", "label"];
+var _excluded$n = ["field", "form", "onChange", "options", "id", "label"];
 var FormikSelectInputNative = function FormikSelectInputNative(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3153,7 +2623,7 @@ var FormikSelectInputNative = function FormikSelectInputNative(_ref) {
     options = _ref.options,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   return React__default.createElement(SelectInputNative, _extends({}, props, {
     options: options,
     id: id,
@@ -3166,7 +2636,127 @@ var FormikSelectInputNative = function FormikSelectInputNative(_ref) {
   }));
 };
 
-var _excluded$i = ["field", "form", "onChange", "id", "label"];
+var styles$f = {"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$m = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "error", "helpText", "hideLabel", "inputProps", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onClear", "onFocus", "prefix", "placeholder", "requiredIndicator", "suffix", "size", "type"];
+var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref2;
+  var id = _ref.id,
+    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$m);
+  var responsiveClasses = generateResponsiveClasses('size', size);
+  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$f['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
+    return styles$f[c];
+  }), [(_ref2 = {}, _ref2[styles$f.error] = error, _ref2[styles$f.disabled] = isDisabled, _ref2[styles$f['is-clearable']] = onClear, _ref2)]));
+  var clearBtnClasses = classNames(styles$f['clear-button'], styles$f.md);
+  var renderClearIcon = function renderClearIcon() {
+    var handleKeyPress = function handleKeyPress(event) {
+      if (event.keyCode === 13 && onClear) onClear(event);
+    };
+    return React__default.createElement("button", {
+      type: "button",
+      onClick: onClear,
+      onKeyUp: handleKeyPress,
+      className: clearBtnClasses,
+      "data-testid": "text-input-clear-button",
+      "aria-label": "clear input"
+    }, React__default.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__default.createElement(FormControl, _extends({
+    helpText: helpText,
+    error: error,
+    label: label,
+    id: id,
+    hideLabel: hideLabel,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    requiredIndicator: requiredIndicator,
+    ref: ref
+  }, restProps), React__default.createElement(Box, {
+    direction: "row",
+    overflow: "hidden",
+    className: inputWrapperClasses
+  }, prefix && React__default.createElement(Box, {
+    color: "secondary",
+    background: "secondary",
+    className: classNames(styles$f.prefix, 'ws-nowrap')
+  }, prefix), React__default.createElement(Box, _extends({
+    as: "input"
+  }, computedInputProps)), !!onClear && !!value && renderClearIcon(), suffix && React__default.createElement(Box, {
+    color: "secondary",
+    background: "secondary",
+    className: classNames(styles$f.suffix, 'ws-nowrap')
+  }, suffix)));
+});
+
+var _excluded$l = ["field", "form", "onChange", "id", "label"];
 var FormikTextInput = function FormikTextInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3179,7 +2769,7 @@ var FormikTextInput = function FormikTextInput(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   return React__default.createElement(TextInput, _extends({}, props, {
     id: id,
     label: label,
@@ -3191,9 +2781,9 @@ var FormikTextInput = function FormikTextInput(_ref) {
   }));
 };
 
-var styles$d = {"textarea-input-wrapper":"TextareaInput-module_textarea-input-wrapper__mJBZN","size-sm":"TextareaInput-module_size-sm__-YCcV","size-md":"TextareaInput-module_size-md__uPOvN","size-lg":"TextareaInput-module_size-lg__P5SYv","size-sm-tablet":"TextareaInput-module_size-sm-tablet__rYP2T","size-md-tablet":"TextareaInput-module_size-md-tablet__D1PYq","size-lg-tablet":"TextareaInput-module_size-lg-tablet__N-UED","size-sm-desktop":"TextareaInput-module_size-sm-desktop__Z-Zdg","size-md-desktop":"TextareaInput-module_size-md-desktop__W3jIm","size-lg-desktop":"TextareaInput-module_size-lg-desktop__XLwk0","size-sm-hd":"TextareaInput-module_size-sm-hd__KP21d","size-md-hd":"TextareaInput-module_size-md-hd__3me0R","size-lg-hd":"TextareaInput-module_size-lg-hd__BcgC-","error":"TextareaInput-module_error__JpCpt","textarea-input-label":"TextareaInput-module_textarea-input-label__1zb77","textarea-resize-both":"TextareaInput-module_textarea-resize-both__Gn3Zh","textarea-resize-horizontal":"TextareaInput-module_textarea-resize-horizontal__0aRED","textarea-resize-vertical":"TextareaInput-module_textarea-resize-vertical__DbKar","textarea-resize-none":"TextareaInput-module_textarea-resize-none__l6dRF"};
+var styles$e = {"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$h = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "className", "error", "helpText", "hideLabel", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onFocus", "placeholder", "requiredIndicator", "resize", "rows", "size"];
+var _excluded$k = ["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,
@@ -3233,11 +2823,11 @@ var TextareaInput = function TextareaInput(_ref) {
     rows = _ref$rows === void 0 ? 3 : _ref$rows,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$d['textarea-input-wrapper']].concat(responsiveClasses.map(function (c) {
-    return styles$d[c];
-  }), [(_ref2 = {}, _ref2[styles$d.error] = error, _ref2[styles$d.disabled] = isDisabled, _ref2)]));
+  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$e['textarea-input-wrapper']].concat(responsiveClasses.map(function (c) {
+    return styles$e[c];
+  }), [(_ref2 = {}, _ref2[styles$e.error] = error, _ref2[styles$e.disabled] = isDisabled, _ref2)]));
   var inputProps = {
     'aria-required': isRequired,
     'aria-invalid': !!error,
@@ -3245,7 +2835,7 @@ var TextareaInput = function TextareaInput(_ref) {
     'aria-labelledby': label && !hideLabel ? id + "Label" : undefined,
     autoComplete: getAutoCompleteValue(autoComplete),
     autoFocus: autoFocus,
-    className: classNames(styles$d["textarea-resize-" + resize]),
+    className: classNames(styles$e["textarea-resize-" + resize]),
     disabled: isDisabled,
     id: id,
     maxLength: maxLength,
@@ -3261,7 +2851,7 @@ var TextareaInput = function TextareaInput(_ref) {
   var labelProps = {
     inputId: id,
     helpText: helpText,
-    className: styles$d['textarea-input-label'],
+    className: styles$e['textarea-input-label'],
     isDisabled: isDisabled,
     isFieldRequired: isRequired,
     requiredIndicator: requiredIndicator
@@ -3277,7 +2867,7 @@ var TextareaInput = function TextareaInput(_ref) {
   }, inputProps))), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 };
 
-var _excluded$g = ["field", "form", "onChange", "id", "label"];
+var _excluded$j = ["field", "form", "onChange", "id", "label"];
 var FormikTextareaInput = function FormikTextareaInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3290,7 +2880,7 @@ var FormikTextareaInput = function FormikTextareaInput(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return React__default.createElement(TextareaInput, _extends({}, props, {
     id: id,
     label: label,
@@ -3302,7 +2892,7 @@ var FormikTextareaInput = function FormikTextareaInput(_ref) {
   }));
 };
 
-var _excluded$f = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
+var _excluded$i = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
 var TimePicker = function TimePicker(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -3324,7 +2914,7 @@ var TimePicker = function TimePicker(_ref) {
     placeholder = _ref$placeholder === void 0 ? 'HH:MM' : _ref$placeholder,
     _ref$startTime = _ref.startTime,
     startTime = _ref$startTime === void 0 ? undefined : _ref$startTime,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   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);
@@ -3352,7 +2942,7 @@ var TimePicker = function TimePicker(_ref) {
   }));
 };
 
-var _excluded$e = ["field", "form", "options", "onChange"];
+var _excluded$h = ["field", "form", "options", "onChange"];
 var FormikTimePicker = function FormikTimePicker(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3364,7 +2954,7 @@ var FormikTimePicker = function FormikTimePicker(_ref) {
     errors = _ref$form.errors,
     options = _ref.options,
     onChange = _ref.onChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   return React__default.createElement(TimePicker, _extends({}, props, {
     name: name,
     onBlur: onBlur,
@@ -3375,7 +2965,7 @@ var FormikTimePicker = function FormikTimePicker(_ref) {
   }));
 };
 
-var _excluded$d = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
+var _excluded$g = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
 var TimePickerNative = function TimePickerNative(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -3397,7 +2987,7 @@ var TimePickerNative = function TimePickerNative(_ref) {
     placeholder = _ref$placeholder === void 0 ? 'HH:MM' : _ref$placeholder,
     _ref$startTime = _ref.startTime,
     startTime = _ref$startTime === void 0 ? undefined : _ref$startTime,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   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);
@@ -3426,7 +3016,7 @@ var TimePickerNative = function TimePickerNative(_ref) {
   }));
 };
 
-var _excluded$c = ["field", "form", "onChange"];
+var _excluded$f = ["field", "form", "onChange"];
 var FormikTimePickerNative = function FormikTimePickerNative(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3437,7 +3027,7 @@ var FormikTimePickerNative = function FormikTimePickerNative(_ref) {
     touched = _ref$form.touched,
     errors = _ref$form.errors,
     onChange = _ref.onChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   return React__default.createElement(TimePickerNative, _extends({}, props, {
     name: name,
     onBlur: onBlur,
@@ -3447,7 +3037,7 @@ var FormikTimePickerNative = function FormikTimePickerNative(_ref) {
   }));
 };
 
-var styles$c = {"thumb-size-sm":"Switch-module_thumb-size-sm__0cIei","thumb-size-md":"Switch-module_thumb-size-md__wB9aa","thumb-size-lg":"Switch-module_thumb-size-lg__sD9d9","track-size-sm":"Switch-module_track-size-sm__6dGMb","track-size-md":"Switch-module_track-size-md__XXrdH","track-size-lg":"Switch-module_track-size-lg__Rm3qX","thumb-size-sm-tablet":"Switch-module_thumb-size-sm-tablet__kMoMh","thumb-size-md-tablet":"Switch-module_thumb-size-md-tablet__xWxiX","thumb-size-lg-tablet":"Switch-module_thumb-size-lg-tablet__sFOqF","track-size-sm-tablet":"Switch-module_track-size-sm-tablet__iaxm-","track-size-md-tablet":"Switch-module_track-size-md-tablet__UJUGh","track-size-lg-tablet":"Switch-module_track-size-lg-tablet__Azrsy","thumb-size-sm-desktop":"Switch-module_thumb-size-sm-desktop__8HEdQ","thumb-size-md-desktop":"Switch-module_thumb-size-md-desktop__Zc9eN","thumb-size-lg-desktop":"Switch-module_thumb-size-lg-desktop__nctEB","track-size-sm-desktop":"Switch-module_track-size-sm-desktop__M4yd-","track-size-md-desktop":"Switch-module_track-size-md-desktop__4PYHn","track-size-lg-desktop":"Switch-module_track-size-lg-desktop__3fzJY","thumb-size-sm-hd":"Switch-module_thumb-size-sm-hd__No76h","thumb-size-md-hd":"Switch-module_thumb-size-md-hd__3MR-O","thumb-size-lg-hd":"Switch-module_thumb-size-lg-hd__4AQ8O","track-size-sm-hd":"Switch-module_track-size-sm-hd__gQTpP","track-size-md-hd":"Switch-module_track-size-md-hd__JOSCe","track-size-lg-hd":"Switch-module_track-size-lg-hd__CBQq3","disabled":"Switch-module_disabled__VeSGJ","switch-thumb":"Switch-module_switch-thumb__bTWJz","switch-track":"Switch-module_switch-track__rAmhp","error":"Switch-module_error__OBYv6","switch-input":"Switch-module_switch-input__oQwtt"};
+var styles$d = {"thumb-size-sm":"Switch-module_thumb-size-sm__0cIei","thumb-size-md":"Switch-module_thumb-size-md__wB9aa","thumb-size-lg":"Switch-module_thumb-size-lg__sD9d9","track-size-sm":"Switch-module_track-size-sm__6dGMb","track-size-md":"Switch-module_track-size-md__XXrdH","track-size-lg":"Switch-module_track-size-lg__Rm3qX","thumb-size-sm-tablet":"Switch-module_thumb-size-sm-tablet__kMoMh","thumb-size-md-tablet":"Switch-module_thumb-size-md-tablet__xWxiX","thumb-size-lg-tablet":"Switch-module_thumb-size-lg-tablet__sFOqF","track-size-sm-tablet":"Switch-module_track-size-sm-tablet__iaxm-","track-size-md-tablet":"Switch-module_track-size-md-tablet__UJUGh","track-size-lg-tablet":"Switch-module_track-size-lg-tablet__Azrsy","thumb-size-sm-desktop":"Switch-module_thumb-size-sm-desktop__8HEdQ","thumb-size-md-desktop":"Switch-module_thumb-size-md-desktop__Zc9eN","thumb-size-lg-desktop":"Switch-module_thumb-size-lg-desktop__nctEB","track-size-sm-desktop":"Switch-module_track-size-sm-desktop__M4yd-","track-size-md-desktop":"Switch-module_track-size-md-desktop__4PYHn","track-size-lg-desktop":"Switch-module_track-size-lg-desktop__3fzJY","thumb-size-sm-hd":"Switch-module_thumb-size-sm-hd__No76h","thumb-size-md-hd":"Switch-module_thumb-size-md-hd__3MR-O","thumb-size-lg-hd":"Switch-module_thumb-size-lg-hd__4AQ8O","track-size-sm-hd":"Switch-module_track-size-sm-hd__gQTpP","track-size-md-hd":"Switch-module_track-size-md-hd__JOSCe","track-size-lg-hd":"Switch-module_track-size-lg-hd__CBQq3","disabled":"Switch-module_disabled__VeSGJ","switch-thumb":"Switch-module_switch-thumb__bTWJz","switch-track":"Switch-module_switch-track__rAmhp","error":"Switch-module_error__OBYv6","switch-input":"Switch-module_switch-input__oQwtt"};
 
 var Switch = function Switch(_ref) {
   var _classNames, _ref2;
@@ -3483,12 +3073,12 @@ var Switch = function Switch(_ref) {
   var handleFocus = function handleFocus(event) {
     if (onFocus) onFocus(event);
   };
-  var wrapperClasses = classNames('hyphen-components__variables__form-control', (_classNames = {}, _classNames[styles$c.disabled] = isDisabled, _classNames));
-  var trackClasses = classNames.apply(void 0, [styles$c['switch-track']].concat(generateResponsiveClasses('track-size', size).map(function (c) {
-    return styles$c[c];
-  }), [(_ref2 = {}, _ref2[styles$c.error] = error, _ref2)]));
-  var thumbClasses = classNames.apply(void 0, [styles$c['switch-thumb']].concat(generateResponsiveClasses('thumb-size', size).map(function (c) {
-    return styles$c[c];
+  var wrapperClasses = classNames('hyphen-components__variables__form-control', (_classNames = {}, _classNames[styles$d.disabled] = isDisabled, _classNames));
+  var trackClasses = classNames.apply(void 0, [styles$d['switch-track']].concat(generateResponsiveClasses('track-size', size).map(function (c) {
+    return styles$d[c];
+  }), [(_ref2 = {}, _ref2[styles$d.error] = error, _ref2)]));
+  var thumbClasses = classNames.apply(void 0, [styles$d['switch-thumb']].concat(generateResponsiveClasses('thumb-size', size).map(function (c) {
+    return styles$d[c];
   })));
   var inputProps = {
     'aria-required': isRequired,
@@ -3503,7 +3093,7 @@ var Switch = function Switch(_ref) {
     onFocus: handleFocus,
     required: isRequired,
     type: 'checkbox',
-    className: styles$c['switch-input']
+    className: styles$d['switch-input']
   };
   var labelProps = {
     inputId: id,
@@ -3539,7 +3129,7 @@ var Switch = function Switch(_ref) {
   }, helpText)))), error && error !== true && React__default.createElement(InputValidationMessage, null, error));
 };
 
-var _excluded$b = ["field", "form"];
+var _excluded$e = ["field", "form"];
 var FormikSwitch = function FormikSwitch(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3549,7 +3139,7 @@ var FormikSwitch = function FormikSwitch(_ref) {
     _ref$form = _ref.form,
     touched = _ref$form.touched,
     errors = _ref$form.errors,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return React__default.createElement(Switch, _extends({
     error: getIn(touched, name) && getIn(errors, name),
     isChecked: value,
@@ -3558,9 +3148,9 @@ var FormikSwitch = function FormikSwitch(_ref) {
   }, props));
 };
 
-var styles$b = {"item":"ToggleGroup-module_item__dIBO0","outline":"ToggleGroup-module_outline__d5OlO"};
+var styles$c = {"item":"ToggleGroup-module_item__dIBO0","outline":"ToggleGroup-module_outline__d5OlO"};
 
-var _excluded$a = ["className", "variant", "children", "gap", "error"],
+var _excluded$d = ["className", "variant", "children", "gap", "error"],
   _excluded2$1 = ["className", "children", "value", "variant"];
 var ToggleGroupContext = /*#__PURE__*/createContext({
   variant: 'default'
@@ -3573,7 +3163,7 @@ var ToggleGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 'xs' : _ref$gap,
     error = _ref.error,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   return React__default.createElement("div", null, React__default.createElement(ToggleGroupPrimitive.Root, _extends({
     ref: ref,
     className: classNames('display-flex align-items-center justify-content-start', className, cssShorthandToClasses('g', gap))
@@ -3594,13 +3184,13 @@ var ToggleGroupItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var appliedVariant = variant || contextVariant;
   return React__default.createElement(ToggleGroupPrimitive.Item, _extends({
     ref: ref,
-    className: classNames('br-sm display-flex g-sm p-sm', styles$b.item, appliedVariant === 'outline' && styles$b.outline, className),
+    className: classNames('br-sm display-flex g-sm p-sm', styles$c.item, appliedVariant === 'outline' && styles$c.outline, className),
     value: value
   }, props), children);
 });
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
-var _excluded$9 = ["field", "form", "options", "helpText", "label", "children"];
+var _excluded$c = ["field", "form", "options", "helpText", "label", "children"];
 var FormikToggleGroup = function FormikToggleGroup(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3614,7 +3204,7 @@ var FormikToggleGroup = function FormikToggleGroup(_ref) {
     helpText = _ref.helpText,
     label = _ref.label,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return React__default.createElement(Box, {
     gap: "sm"
   }, (label || helpText) && React__default.createElement("div", null, label && React__default.createElement(Box, {
@@ -3638,7 +3228,7 @@ var FormikToggleGroup = function FormikToggleGroup(_ref) {
   })));
 };
 
-var _excluded$8 = ["name", "options", "helpText", "label", "children", "variant", "gap"];
+var _excluded$b = ["name", "options", "helpText", "label", "children", "variant", "gap"];
 var FormikToggleGroupMulti = function FormikToggleGroupMulti(_ref) {
   var name = _ref.name,
     options = _ref.options,
@@ -3647,7 +3237,7 @@ var FormikToggleGroupMulti = function FormikToggleGroupMulti(_ref) {
     children = _ref.children,
     variant = _ref.variant,
     gap = _ref.gap,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var _useField = useField(name),
     field = _useField[0],
     meta = _useField[1],
@@ -3681,7 +3271,7 @@ var FormikToggleGroupMulti = function FormikToggleGroupMulti(_ref) {
   }));
 };
 
-var _excluded$7 = ["children", "padding", "direction", "alignItems", "justifyContent", "gap", "style"];
+var _excluded$a = ["children", "padding", "direction", "alignItems", "justifyContent", "gap", "style"];
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
@@ -3694,7 +3284,7 @@ var ModalFooter = function ModalFooter(_ref) {
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 'md' : _ref$gap,
     style = _ref.style,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return React__default.createElement(Box, _extends({
     padding: padding,
     direction: direction,
@@ -3707,20 +3297,30 @@ var ModalFooter = function ModalFooter(_ref) {
   }, restProps), children);
 };
 
+var _excluded$9 = ["id", "onDismiss", "direction", "alignItems", "title", "children", "style"];
 var ModalHeader = function ModalHeader(_ref) {
   var id = _ref.id,
     onDismiss = _ref.onDismiss,
+    _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$title = _ref.title,
-    title = _ref$title === void 0 ? undefined : _ref$title;
-  var justifyContentValue = title === undefined && onDismiss ? 'flex-end' : 'space-between';
-  return React__default.createElement(Box, {
-    direction: "row",
-    alignItems: "center",
+    title = _ref$title === void 0 ? undefined : _ref$title,
+    children = _ref.children,
+    style = _ref.style,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  var justifyContentValue = title || children ? 'space-between' : 'flex-end';
+  return React__default.createElement(Box, _extends({
+    direction: direction,
+    alignItems: alignItems,
     justifyContent: justifyContentValue,
     gap: "3xl",
-    style: {
+    style: _extends({
       flexShrink: 0
-    }
+    }, style)
+  }, restProps), (title || children) && React__default.createElement(Box, {
+    gap: "2xs"
   }, title && React__default.createElement(Box, {
     as: "h4",
     fontSize: {
@@ -3728,7 +3328,7 @@ var ModalHeader = function ModalHeader(_ref) {
       tablet: 'lg'
     },
     id: id
-  }, title), onDismiss && React__default.createElement(Button, {
+  }, title), children), onDismiss && React__default.createElement(Button, {
     "aria-label": "close",
     variant: "tertiary",
     onClick: onDismiss,
@@ -3738,7 +3338,7 @@ var ModalHeader = function ModalHeader(_ref) {
   }));
 };
 
-var _excluded$6 = ["children", "flex", "overflow", "height"];
+var _excluded$8 = ["children", "flex", "overflow", "height"];
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children,
     _ref$flex = _ref.flex,
@@ -3747,7 +3347,7 @@ var ModalBody = function ModalBody(_ref) {
     overflow = _ref$overflow === void 0 ? 'auto' : _ref$overflow,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '100' : _ref$height,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   return React__default.createElement(Box, _extends({
     flex: flex,
     overflow: overflow,
@@ -3758,9 +3358,9 @@ var ModalBody = function ModalBody(_ref) {
   }, restProps), children);
 };
 
-var styles$a = {"modal-close":"Modal-module_modal-close__1YmMa","modal":"Modal-module_modal__yNG-7","modal-content":"Modal-module_modal-content__GMtBm"};
+var styles$b = {"modal-close":"Modal-module_modal-close__1YmMa","modal":"Modal-module_modal__yNG-7","modal-content":"Modal-module_modal-content__GMtBm"};
 
-var _excluded$5 = ["ariaLabel", "ariaLabelledBy", "allowPinchZoom", "background", "children", "className", "containerRef", "fullScreenMobile", "initialFocusRef", "isOpen", "maxWidth", "onDismiss", "overflow", "style"];
+var _excluded$7 = ["ariaLabel", "ariaLabelledBy", "allowPinchZoom", "background", "children", "className", "containerRef", "fullScreenMobile", "initialFocusRef", "isOpen", "maxWidth", "onDismiss", "overflow", "style"];
 var ModalBaseComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _classNames;
   var ariaLabel = _ref.ariaLabel,
@@ -3783,7 +3383,7 @@ var ModalBaseComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$overflow = _ref.overflow,
     overflow = _ref$overflow === void 0 ? 'hidden' : _ref$overflow,
     style = _ref.style,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var activateFocusLock = useCallback(function () {
     setTimeout(function () {
       if (initialFocusRef && initialFocusRef.current) {
@@ -3792,10 +3392,10 @@ var ModalBaseComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, 100);
   }, [initialFocusRef]);
   var maxWidthCss = getDimensionCss('mw', maxWidth);
-  var overlayClassnames = classNames(styles$a.overlay, styles$a.modal, {
+  var overlayClassnames = classNames(styles$b.overlay, styles$b.modal, {
     fullscreen: fullScreenMobile
   });
-  var contentClassnames = classNames(styles$a['modal-content'], className, maxWidthCss.classes, (_classNames = {}, _classNames["overflow-" + overflow] = overflow, _classNames));
+  var contentClassnames = classNames(styles$b['modal-content'], className, maxWidthCss.classes, (_classNames = {}, _classNames["overflow-" + overflow] = overflow, _classNames));
   if (!isOpen) return null;
   var parentElement = containerRef != null && containerRef.current ? containerRef.current : undefined;
   return React__default.createElement(FocusLock, {
@@ -4008,9 +3608,31 @@ var Pagination = function Pagination(_ref) {
   }, isTotalVisible && activeListRangeText));
 };
 
+var styles$a = {"PopoverContent":"Popover-module_PopoverContent__1Ki2o","slideUp":"Popover-module_slideUp__z1H3Z","slideDown":"Popover-module_slideDown__KPRrt","slideLeft":"Popover-module_slideLeft__BVjMh","slideRight":"Popover-module_slideRight__PoOkh"};
+
+var _excluded$6 = ["className", "align", "sideOffset"];
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverPortal = PopoverPrimitive.Portal;
+var PopoverContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$sideOffset = _ref.sideOffset,
+    sideOffset = _ref$sideOffset === void 0 ? 4 : _ref$sideOffset,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  return React__default.createElement(PopoverPrimitive.Content, _extends({
+    ref: ref,
+    align: align,
+    sideOffset: sideOffset,
+    className: classNames(styles$a.PopoverContent, className)
+  }, props));
+});
+
 var styles$9 = {"slider":"RangeInput-module_slider__Z6D68","disabled":"RangeInput-module_disabled__gyu72"};
 
-var _excluded$4 = ["value", "max", "id", "onChange", "className", "isDisabled"];
+var _excluded$5 = ["value", "max", "id", "onChange", "className", "isDisabled"];
 var RangeInput = function RangeInput(_ref) {
   var _classNames;
   var _ref$value = _ref.value,
@@ -4022,7 +3644,7 @@ var RangeInput = function RangeInput(_ref) {
     className = _ref.className,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var currentProgress = value > 0 ? value / max * 100 : 0;
   return React__default.createElement("input", _extends({}, restProps, {
     id: id,
@@ -4042,11 +3664,93 @@ var RangeInput = function RangeInput(_ref) {
   }));
 };
 
+// eslint-disable-next-line import/prefer-default-export
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+var ResponsiveContext = /*#__PURE__*/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 = useState(0),
+    innerWidth = _useState[0],
+    setInnerWidth = _useState[1];
+  var _useState2 = useState(0),
+    innerHeight = _useState2[0],
+    setInnerHeight = _useState2[1];
+  var _useState3 = useState(0),
+    outerWidth = _useState3[0],
+    setOuterWidth = _useState3[1];
+  var _useState4 = 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 () {
+        window.removeEventListener('resize', throttledResize);
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [throttle]);
+  return React__default.createElement(ResponsiveContext.Provider, {
+    value: {
+      innerWidth: innerWidth,
+      innerHeight: innerHeight,
+      outerHeight: outerHeight,
+      outerWidth: outerWidth,
+      isCreated: true
+    }
+  }, children);
+};
+
+var desktopBreakpoint = /*#__PURE__*/BREAKPOINTS.find(function (b) {
+  return b.name === 'desktop';
+});
+var MOBILE_BREAKPOINT = desktopBreakpoint ? desktopBreakpoint.minWidth : 0; // min width in pixels
+function useIsMobile() {
+  var _React$useState = React.useState(undefined),
+    isMobile = _React$useState[0],
+    setIsMobile = _React$useState[1];
+  React.useEffect(function () {
+    var mql = window.matchMedia("(max-width: " + (MOBILE_BREAKPOINT - 1) + "px)");
+    var onChange = function onChange() {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return function () {
+      return mql.removeEventListener('change', onChange);
+    };
+  }, []);
+  return !!isMobile;
+}
+
 var styles$8 = {"rail":"Sidebar-module_rail__nWu0Q","group-data-":"Sidebar-module_group-data-__GTJmR"};
 
 var styles$7 = {"TooltipContent":"Tooltip-module_TooltipContent__wLEZU","tooltip-slideUpAndFade":"Tooltip-module_tooltip-slideUpAndFade__Y05jp","tooltip-slideRightAndFade":"Tooltip-module_tooltip-slideRightAndFade__K04p9","tooltip-slideDownAndFade":"Tooltip-module_tooltip-slideDownAndFade__1wMd-","tooltip-slideLeftAndFade":"Tooltip-module_tooltip-slideLeftAndFade__iQ1fp"};
 
-var _excluded$3 = ["className", "sideOffset"];
+var _excluded$4 = ["className", "sideOffset"];
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -4055,7 +3759,7 @@ var TooltipContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$sideOffset = _ref.sideOffset,
     sideOffset = _ref$sideOffset === void 0 ? 4 : _ref$sideOffset,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return React.createElement(TooltipPrimitive.Content, _extends({
     ref: ref,
     sideOffset: sideOffset,
@@ -4064,7 +3768,7 @@ var TooltipContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-var _excluded$2 = ["defaultOpen", "open", "storageKey", "onOpenChange", "className", "style", "children"],
+var _excluded$3 = ["defaultOpen", "open", "storageKey", "onOpenChange", "className", "style", "children"],
   _excluded2 = ["side", "collapsible", "className", "children"],
   _excluded3 = ["className", "onClick"],
   _excluded4 = ["className"],
@@ -4102,7 +3806,7 @@ var SidebarProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className = _ref.className,
     style = _ref.style,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var isMobile = useIsMobile();
   var _useState = useState(function () {
       return isMobile ? false : openProp != null ? openProp : defaultOpen;
@@ -4890,6 +4594,50 @@ var Table = function Table(_ref) {
   }))));
 };
 
+var _excluded$2 = ["children", "defaultTheme", "storageKey"];
+var initialState = {
+  theme: 'system',
+  setTheme: function setTheme() {
+    return null;
+  }
+};
+var ThemeProviderContext = /*#__PURE__*/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$2);
+  var _useState = useState(function () {
+      return localStorage.getItem(storageKey) || defaultTheme;
+    }),
+    theme = _useState[0],
+    _setTheme = _useState[1];
+  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 isDarkMode = theme === 'dark' || theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  var value = {
+    theme: theme,
+    setTheme: function setTheme(theme) {
+      localStorage.setItem(storageKey, theme);
+      _setTheme(theme);
+    },
+    isDarkMode: isDarkMode
+  };
+  return React__default.createElement(ThemeProviderContext.Provider, _extends({}, props, {
+    value: value
+  }), children);
+}
+
 var styles$1 = {"toast-notification":"ToastNotification-module_toast-notification__2xiTW","toast-error":"ToastNotification-module_toast-error__4ArAY","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) {
@@ -5450,5 +5198,104 @@ var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props), children);
 });
 
-export { Alert, AspectRatio, Badge, Box, Button, Card, CardBaseComponent, Checkbox, CheckboxInput, Collapsible, CollapsibleContent, CollapsibleTrigger, DateInput, DatePicker, Details, DetailsBaseComponent, DetailsSummary, Drawer, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormControl, FormLabel, FormikCheckboxInput, FormikRadioGroup, FormikSelectInput, FormikSelectInputInset, FormikSelectInputNative, FormikSwitch, FormikTextInput, FormikTextInputInset, FormikTextareaInput, FormikTextareaInputInset, FormikTimePicker, FormikTimePickerNative, FormikToggleGroup, FormikToggleGroupMulti, Heading, Icon, Modal, ModalBaseComponent, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverPortal, PopoverTrigger, RadioGroup, RangeInput, ResponsiveContext, ResponsiveProvider, SelectInput, SelectInputInset, SelectInputNative, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, Spinner, Switch, Table, TextInput, TextInputInset, TextareaInput, TextareaInputInset, ThemeProvider, ThemeProviderContext, TimePicker, TimePickerNative, ToastContainer, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, boxPropsKeys, createRectRef, toast, useBreakpoint, useDrawer, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };
+var useWindowSize = function useWindowSize() {
+  var _React$useContext = React__default.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 = 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 = useCallback(function () {
+    onOpenProp == null || onOpenProp();
+  }, [onOpenProp]);
+  var closeCallback = useCallback(function () {
+    onCloseProp == null || onCloseProp();
+  }, [onCloseProp]);
+  var _useState = useState(defaultIsOpen || false),
+    isOpenState = _useState[0],
+    setIsOpen = _useState[1];
+  var isOpen = isOpenProp !== undefined ? isOpenProp : isOpenState;
+  var isControlled = isOpenProp !== undefined;
+  var handleClose = useCallback(function () {
+    if (!isControlled) {
+      setIsOpen(false);
+    }
+    closeCallback == null || closeCallback();
+  }, [isControlled, closeCallback]);
+  var handleOpen = useCallback(function () {
+    if (!isControlled) {
+      setIsOpen(true);
+    }
+    openCallback == null || openCallback();
+  }, [isControlled, openCallback]);
+  var handleToggle = useCallback(function () {
+    if (isOpen) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  }, [isOpen, handleOpen, handleClose]);
+  return {
+    isOpen: isOpen,
+    handleClose: handleClose,
+    handleOpen: handleOpen,
+    handleToggle: handleToggle
+  };
+};
+
+var useTheme = function useTheme() {
+  var context = React__default.useContext(ThemeProviderContext);
+  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider. Be sure your App is wrapped in ThemeProvider.');
+  return context;
+};
+
+export { Alert, AspectRatio, Badge, Box, Button, Card, CardBaseComponent, Checkbox, CheckboxInput, Collapsible, CollapsibleContent, CollapsibleTrigger, Details, DetailsBaseComponent, DetailsSummary, Drawer, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormControl, FormLabel, FormikCheckboxInput, FormikRadioGroup, FormikSelectInput, FormikSelectInputInset, FormikSelectInputNative, FormikSwitch, FormikTextInput, FormikTextInputInset, FormikTextareaInput, FormikTextareaInputInset, FormikTimePicker, FormikTimePickerNative, FormikToggleGroup, FormikToggleGroupMulti, Heading, Icon, Modal, ModalBaseComponent, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverPortal, PopoverTrigger, RadioGroup, RangeInput, ResponsiveContext, ResponsiveProvider, SelectInput, SelectInputInset, SelectInputNative, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, Spinner, Switch, Table, TextInput, TextInputInset, TextareaInput, TextareaInputInset, ThemeProvider, ThemeProviderContext, TimePicker, TimePickerNative, ToastContainer, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, boxPropsKeys, createRectRef, toast, useBreakpoint, useDrawer, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };
 //# sourceMappingURL=hyphen-components.esm.js.map