@hyphen/hyphen-components 2.11.4 → 2.12.0

package/dist/hyphen-components.esm.js

@@ -1,5 +1,5 @@
 'use client';
-import React, { forwardRef, Children, createElement, cloneElement, useRef, useState, useEffect, isValidElement, useCallback, useMemo, useLayoutEffect, createContext, useContext } from 'react';
+import React, { forwardRef, Children, createElement, cloneElement, useRef, useState, useEffect, isValidElement, useCallback, useMemo, useLayoutEffect, createContext } from 'react';
 import classNames from 'classnames';
 import icons from '@hyphen/hyphen-design-tokens/build/assets/icons/react';
 import format from 'date-fns/format';
@@ -1155,13 +1155,27 @@ var InputValidationMessage = function InputValidationMessage(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size;
-  var classes = classNames('hyphen-components__variables__form-control', styles$n['input-validation-message'], 'font-color-danger', "font-size-" + size, 'm-top-xs');
+  var classes = classNames('hyphen-components__variables__form-control', styles$n['input-validation-message'], 'font-color-danger', "font-size-" + size, 'm-top-sm');
   return React.createElement("div", {
     className: classes
   }, children);
 };
 
-var styles$m = {"label":"FormLabel-module_label__qTUB9","radio-input-label":"FormLabel-module_radio-input-label__IpAiN","disabled":"FormLabel-module_disabled__83oiH","help-text":"FormLabel-module_help-text__KmHu7"};
+var styles$m = {"label":"FormLabel-module_label__qTUB9","radio-input-label":"FormLabel-module_radio-input-label__IpAiN","disabled":"FormLabel-module_disabled__83oiH"};
+
+var styles$l = {"help-text":"HelpText-module_help-text__8WodW"};
+
+var HelpText = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  return React.createElement(Box, {
+    ref: ref,
+    className: classNames('hyphen-components__variables__form-control', styles$l['help-text'], className),
+    display: "block",
+    color: "secondary",
+    fontSize: "sm"
+  }, children);
+});
 
 var _excluded$w = ["children", "inputId", "className", "display", "helpText", "isDisabled", "isFieldRequired", "isRadioInputLabel", "requiredIndicator", "margin", "padding"];
 var FormLabel = function FormLabel(_ref) {
@@ -1195,13 +1209,7 @@ var FormLabel = function FormLabel(_ref) {
     margin: margin,
     padding: padding,
     htmlFor: inputId
-  }, restProps), children, isFieldRequired && requiredIndicator && React.createElement("span", null, requiredIndicator), helpText && React.createElement(Box, {
-    as: "p",
-    display: "block",
-    fontSize: "sm",
-    color: "secondary",
-    className: styles$m['help-text']
-  }, helpText));
+  }, restProps), children, isFieldRequired && requiredIndicator && React.createElement("span", null, requiredIndicator), helpText && React.createElement(HelpText, null, helpText));
 };
 
 var _excluded$v = ["id", "isChecked", "label", "onChange", "className", "error", "hideLabel", "helpText", "isDisabled", "isIndeterminate", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size"];
@@ -1291,7 +1299,7 @@ var CheckboxInput = function CheckboxInput(_ref2) {
   })), label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label)), error && error !== true && React.createElement(InputValidationMessage, null, error));
 };
 
-var styles$l = {};
+var styles$k = {};
 
 var _excluded$u = ["children", "dayClassName", "maxDate", "minDate", "monthsShown", "openToDate", "startDate", "selected", "selectsRange", "showTwoColumnMonthYearPicker", "showFullMonthYearPicker", "showMonthYearPicker", "className", "formatWeekDay"];
 var DatePicker = function DatePicker(_ref) {
@@ -1326,7 +1334,7 @@ var DatePicker = function DatePicker(_ref) {
       return formattedDate[0];
     } : _ref$formatWeekDay,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
-  var datePickerClasses = classNames(styles$l['react-datepicker'], className);
+  var datePickerClasses = classNames(styles$k['react-datepicker'], className);
   return React.createElement(ReactDatePicker, _extends({
     inline: true,
     calendarClassName: datePickerClasses,
@@ -1384,7 +1392,7 @@ function getAutoCompleteValue(value) {
   return value;
 }
 
-var styles$k = {"text-input-wrapper":"TextInput-module_text-input-wrapper__HCnQD","size-sm":"TextInput-module_size-sm__qWJn7","prefix":"TextInput-module_prefix__-wFO9","suffix":"TextInput-module_suffix__327yL","clear-button":"TextInput-module_clear-button__LUJpO","is-clearable":"TextInput-module_is-clearable__ExAY3","size-md":"TextInput-module_size-md__UFPtt","size-lg":"TextInput-module_size-lg__Hjfez","disabled":"TextInput-module_disabled__lrifj","size-sm-tablet":"TextInput-module_size-sm-tablet__neC5C","size-md-tablet":"TextInput-module_size-md-tablet__u29oc","size-lg-tablet":"TextInput-module_size-lg-tablet__3PUB3","size-sm-desktop":"TextInput-module_size-sm-desktop__kA12V","size-md-desktop":"TextInput-module_size-md-desktop__yLJGr","size-lg-desktop":"TextInput-module_size-lg-desktop__A1pcS","size-sm-hd":"TextInput-module_size-sm-hd__f7Thr","size-md-hd":"TextInput-module_size-md-hd__Tsnqc","size-lg-hd":"TextInput-module_size-lg-hd__XLMos","error":"TextInput-module_error__p6zZq","text-input-label":"TextInput-module_text-input-label__3PlSG"};
+var styles$j = {"text-input-wrapper":"TextInput-module_text-input-wrapper__HCnQD","size-sm":"TextInput-module_size-sm__qWJn7","prefix":"TextInput-module_prefix__-wFO9","suffix":"TextInput-module_suffix__327yL","clear-button":"TextInput-module_clear-button__LUJpO","is-clearable":"TextInput-module_is-clearable__ExAY3","size-md":"TextInput-module_size-md__UFPtt","size-lg":"TextInput-module_size-lg__Hjfez","disabled":"TextInput-module_disabled__lrifj","size-sm-tablet":"TextInput-module_size-sm-tablet__neC5C","size-md-tablet":"TextInput-module_size-md-tablet__u29oc","size-lg-tablet":"TextInput-module_size-lg-tablet__3PUB3","size-sm-desktop":"TextInput-module_size-sm-desktop__kA12V","size-md-desktop":"TextInput-module_size-md-desktop__yLJGr","size-lg-desktop":"TextInput-module_size-lg-desktop__A1pcS","size-sm-hd":"TextInput-module_size-sm-hd__f7Thr","size-md-hd":"TextInput-module_size-md-hd__Tsnqc","size-lg-hd":"TextInput-module_size-lg-hd__XLMos","error":"TextInput-module_error__p6zZq","text-input-label":"TextInput-module_text-input-label__3PlSG"};
 
 var _excluded$s = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "error", "helpText", "hideLabel", "inputProps", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onClear", "onFocus", "prefix", "placeholder", "requiredIndicator", "suffix", "size", "type"];
 var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -1432,10 +1440,10 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     type = _ref$type === void 0 ? 'text' : _ref$type,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var responsiveClasses = generateResponsiveClasses('size', size);
-  var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$k['text-input-wrapper']].concat(responsiveClasses.map(function (c) {
-    return styles$k[c];
-  }), [(_ref2 = {}, _ref2[styles$k.error] = error, _ref2[styles$k.disabled] = isDisabled, _ref2[styles$k['is-clearable']] = onClear, _ref2)]));
-  var clearBtnClasses = classNames(styles$k['clear-button'], styles$k.md);
+  var 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);
@@ -1494,17 +1502,17 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, prefix && React.createElement(Box, {
     color: "secondary",
     background: "secondary",
-    className: classNames(styles$k.prefix, 'ws-nowrap')
+    className: classNames(styles$j.prefix, 'ws-nowrap')
   }, prefix), React.createElement(Box, _extends({
     as: "input"
   }, computedInputProps)), !!onClear && !!value && renderClearIcon(), suffix && React.createElement(Box, {
     color: "secondary",
     background: "secondary",
-    className: classNames(styles$k.suffix, 'ws-nowrap')
+    className: classNames(styles$j.suffix, 'ws-nowrap')
   }, suffix)));
 });
 
-var styles$j = {"popover":"Popover-module_popover__rvS3X","fadeIn":"Popover-module_fadeIn__0btE5","popover-arrow":"Popover-module_popover-arrow__SLtPW"};
+var styles$i = {"popover":"Popover-module_popover__rvS3X","fadeIn":"Popover-module_fadeIn__0btE5","popover-arrow":"Popover-module_popover-arrow__SLtPW"};
 
 // eslint-disable-next-line import/prefer-default-export
 var getColumnKeys = function getColumnKeys(columns) {
@@ -1662,14 +1670,14 @@ var Popover = function Popover(_ref) {
     attributes = _usePopper.attributes;
   var containerBoxProps = _extends({}, contentContainerDefaults, contentContainerProps);
   var computedArrowColor = arrowColor || containerBoxProps.background;
-  var arrowClasses = classNames(styles$j['popover-arrow'], "background-color-" + computedArrowColor, {
+  var arrowClasses = classNames(styles$i['popover-arrow'], "background-color-" + computedArrowColor, {
     'display-none': !hasArrow
   });
   var renderPopperContent = function renderPopperContent() {
     var renderPopperBox = function renderPopperBox() {
       return React.createElement(Box, _extends({
         ref: popperRef,
-        className: classNames(styles$j.popover, className),
+        className: classNames(styles$i.popover, className),
         style: popperStyles.popper,
         role: "dialog",
         "aria-label": "Popover",
@@ -1854,7 +1862,7 @@ var DetailsSummary = function DetailsSummary(_ref) {
   }), children);
 };
 
-var styles$i = {"details-reset":"Details-module_details-reset__HWtSD"};
+var styles$h = {"details-reset":"Details-module_details-reset__HWtSD"};
 
 var _excluded$o = ["children", "className", "display", "isOpen"];
 var DetailsBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -1864,7 +1872,7 @@ var DetailsBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     display = _ref$display === void 0 ? 'block' : _ref$display,
     isOpen = _ref.isOpen,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
-  var detailsClasses = classNames(className, styles$i['details-reset'], styles$i.details);
+  var detailsClasses = classNames(className, styles$h['details-reset'], styles$h.details);
   return React.createElement(Box, _extends({
     as: "details",
     className: detailsClasses,
@@ -1881,7 +1889,7 @@ var Details = /*#__PURE__*/function () {
   return Details;
 }();
 
-var styles$h = {"drawer":"Drawer-module_drawer__IKoOm","hide-overlay-right":"Drawer-module_hide-overlay-right__FANA9","hide-overlay-left":"Drawer-module_hide-overlay-left__xZFa3","hide-overlay-bottom":"Drawer-module_hide-overlay-bottom__11EB1","hide-overlay-top":"Drawer-module_hide-overlay-top__kEsV5","drawer-content":"Drawer-module_drawer-content__zZ9xR","left":"Drawer-module_left__pwTcW","right":"Drawer-module_right__EzGpI","bottom":"Drawer-module_bottom__r3Q5Z","top":"Drawer-module_top__xQejO"};
+var styles$g = {"drawer":"Drawer-module_drawer__IKoOm","hide-overlay-right":"Drawer-module_hide-overlay-right__FANA9","hide-overlay-left":"Drawer-module_hide-overlay-left__xZFa3","hide-overlay-bottom":"Drawer-module_hide-overlay-bottom__11EB1","hide-overlay-top":"Drawer-module_hide-overlay-top__kEsV5","drawer-content":"Drawer-module_drawer-content__zZ9xR","left":"Drawer-module_left__pwTcW","right":"Drawer-module_right__EzGpI","bottom":"Drawer-module_bottom__r3Q5Z","top":"Drawer-module_top__xQejO"};
 
 var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _dynamicStyle, _classNames, _classNames2;
@@ -1927,8 +1935,8 @@ var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [initialFocusRef]);
   var dynamicWidth = width;
   var dynamicStyle = (_dynamicStyle = {}, _dynamicStyle['--w'] = dynamicWidth, _dynamicStyle);
-  var overlayClassnames = classNames(styles$h.overlay, styles$h.drawer, (_classNames = {}, _classNames[styles$h['hide-overlay']] = hideOverlay, _classNames[styles$h["hide-overlay-" + placement]] = hideOverlay, _classNames['position-fixed'] = containerRef === undefined, _classNames['position-absolute'] = containerRef !== undefined, _classNames));
-  var contentClassnames = classNames(styles$h['drawer-content'], styles$h[placement], (_classNames2 = {}, _classNames2[styles$h['hide-overlay']] = hideOverlay, _classNames2['overflow-auto'] = !closeButton && !title, _classNames2.className = className, _classNames2));
+  var overlayClassnames = classNames(styles$g.overlay, styles$g.drawer, (_classNames = {}, _classNames[styles$g['hide-overlay']] = hideOverlay, _classNames[styles$g["hide-overlay-" + placement]] = hideOverlay, _classNames['position-fixed'] = containerRef === undefined, _classNames['position-absolute'] = containerRef !== undefined, _classNames));
+  var contentClassnames = classNames(styles$g['drawer-content'], styles$g[placement], (_classNames2 = {}, _classNames2[styles$g['hide-overlay']] = hideOverlay, _classNames2['overflow-auto'] = !closeButton && !title, _classNames2.className = className, _classNames2));
   var renderHeader = function renderHeader() {
     if (closeButton && onDismiss && !title) {
       return React.createElement(Box, {
@@ -1950,7 +1958,7 @@ var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
         alignItems: "center",
         padding: "2xl"
       }, React.createElement(Box, {
-        className: styles$h.title,
+        className: styles$g.title,
         fontWeight: "bold"
       }, title), onDismiss && React.createElement(Button, {
         variant: "tertiary",
@@ -2054,7 +2062,7 @@ var RadioInputIcon = function RadioInputIcon(_ref) {
   }));
 };
 
-var styles$g = {"size-sm":"RadioInput-module_size-sm__6DLmn","size-md":"RadioInput-module_size-md__wiJ4R","size-lg":"RadioInput-module_size-lg__pX8S8","radio-container":"RadioInput-module_radio-container__EBRgV","hidden":"RadioInput-module_hidden__KF4as","size-sm-tablet":"RadioInput-module_size-sm-tablet__x7edi","size-md-tablet":"RadioInput-module_size-md-tablet__T-HTa","size-lg-tablet":"RadioInput-module_size-lg-tablet__0Hkim","size-sm-desktop":"RadioInput-module_size-sm-desktop__HjeWG","size-md-desktop":"RadioInput-module_size-md-desktop__3Y1fn","size-lg-desktop":"RadioInput-module_size-lg-desktop__z3nKW","size-sm-hd":"RadioInput-module_size-sm-hd__oxAR7","size-md-hd":"RadioInput-module_size-md-hd__ws7ro","size-lg-hd":"RadioInput-module_size-lg-hd__87uii"};
+var styles$f = {"size-sm":"RadioInput-module_size-sm__6DLmn","size-md":"RadioInput-module_size-md__wiJ4R","size-lg":"RadioInput-module_size-lg__pX8S8","radio-container":"RadioInput-module_radio-container__EBRgV","hidden":"RadioInput-module_hidden__KF4as","size-sm-tablet":"RadioInput-module_size-sm-tablet__x7edi","size-md-tablet":"RadioInput-module_size-md-tablet__T-HTa","size-lg-tablet":"RadioInput-module_size-lg-tablet__0Hkim","size-sm-desktop":"RadioInput-module_size-sm-desktop__HjeWG","size-md-desktop":"RadioInput-module_size-md-desktop__3Y1fn","size-lg-desktop":"RadioInput-module_size-lg-desktop__z3nKW","size-sm-hd":"RadioInput-module_size-sm-hd__oxAR7","size-md-hd":"RadioInput-module_size-md-hd__ws7ro","size-lg-hd":"RadioInput-module_size-lg-hd__87uii"};
 
 var RadioInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames;
@@ -2078,7 +2086,7 @@ var RadioInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size;
   var responsiveClasses = classNames.apply(void 0, generateResponsiveClasses('size', size).map(function (c) {
-    return styles$g[c];
+    return styles$f[c];
   }));
   var labelProps = {
     inputId: option.id,
@@ -2087,7 +2095,7 @@ var RadioInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isRadioInputLabel: true,
     justifyContent: 'center'
   };
-  var containerClasses = classNames('hyphen-components__variables__form-control', className, styles$g['radio-container'], responsiveClasses, (_classNames = {}, _classNames[styles$g.hidden] = isHidden, _classNames));
+  var containerClasses = classNames('hyphen-components__variables__form-control', className, styles$f['radio-container'], responsiveClasses, (_classNames = {}, _classNames[styles$f.hidden] = isHidden, _classNames));
   return React.createElement(React.Fragment, null, option && React.createElement(Box, {
     className: containerClasses,
     key: option.id,
@@ -2123,7 +2131,7 @@ var RadioInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), option.label && React.createElement(FormLabel, _extends({}, labelProps), option.label)));
 });
 
-var styles$f = {"radio-group":"RadioGroup-module_radio-group__FWPcT","fieldset":"RadioGroup-module_fieldset__PEUXI","legend":"RadioGroup-module_legend__tcfV7","description":"RadioGroup-module_description__8fzM-"};
+var styles$e = {"radio-group":"RadioGroup-module_radio-group__FWPcT","fieldset":"RadioGroup-module_fieldset__PEUXI","legend":"RadioGroup-module_legend__tcfV7","description":"RadioGroup-module_description__8fzM-"};
 
 var _excluded$l = ["name", "onChange", "options", "className", "description", "direction", "error", "isDisabled", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size", "title", "value"];
 var RadioGroup = function RadioGroup(_ref) {
@@ -2156,19 +2164,19 @@ var RadioGroup = function RadioGroup(_ref) {
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? undefined : _ref$value,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-  var groupClasses = classNames('hyphen-components__variables__form-control', className, (_classNames = {}, _classNames[styles$f.loading] = error, _classNames));
+  var groupClasses = classNames('hyphen-components__variables__form-control', className, (_classNames = {}, _classNames[styles$e.loading] = error, _classNames));
   return React.createElement("div", _extends({
-    className: classNames(styles$f['radio-group'], groupClasses)
+    className: classNames(styles$e['radio-group'], groupClasses)
   }, restProps), React.createElement("fieldset", {
-    className: styles$f.fieldset
+    className: styles$e.fieldset
   }, (title || description) && React.createElement("legend", {
-    className: styles$f.legend
+    className: styles$e.legend
   }, title, isRequired && React.createElement("span", null, requiredIndicator), description && React.createElement("div", {
-    className: styles$f.description
+    className: styles$e.description
   }, description)), React.createElement(Box, {
     direction: direction,
     gap: "sm",
-    className: styles$f.options
+    className: styles$e.options
   }, options && options.map(function (option) {
     return React.createElement(RadioInput, {
       key: option.id,
@@ -2208,7 +2216,7 @@ var FormikRadioGroup = function FormikRadioGroup(_ref) {
   }));
 };
 
-var styles$e = {"react-select-icon":"SelectInput-module_react-select-icon__PvocB","size-sm":"SelectInput-module_size-sm__PKB-J","size-md":"SelectInput-module_size-md__n9Fj8","size-lg":"SelectInput-module_size-lg__LQ-uG","error":"SelectInput-module_error__Avf98","size-sm-tablet":"SelectInput-module_size-sm-tablet__2Dg01","size-md-tablet":"SelectInput-module_size-md-tablet__-iOSg","size-lg-tablet":"SelectInput-module_size-lg-tablet__9xmuJ","size-sm-desktop":"SelectInput-module_size-sm-desktop__tOWI4","size-md-desktop":"SelectInput-module_size-md-desktop__vo-UC","size-lg-desktop":"SelectInput-module_size-lg-desktop__nxQdj","size-sm-hd":"SelectInput-module_size-sm-hd__qamTH","size-md-hd":"SelectInput-module_size-md-hd__Cf8hk","size-lg-hd":"SelectInput-module_size-lg-hd__E4-mZ","disabled":"SelectInput-module_disabled__4ezAy","select-input-label":"SelectInput-module_select-input-label__eqEYa"};
+var styles$d = {"react-select-icon":"SelectInput-module_react-select-icon__PvocB","size-sm":"SelectInput-module_size-sm__PKB-J","size-md":"SelectInput-module_size-md__n9Fj8","size-lg":"SelectInput-module_size-lg__LQ-uG","error":"SelectInput-module_error__Avf98","size-sm-tablet":"SelectInput-module_size-sm-tablet__2Dg01","size-md-tablet":"SelectInput-module_size-md-tablet__-iOSg","size-lg-tablet":"SelectInput-module_size-lg-tablet__9xmuJ","size-sm-desktop":"SelectInput-module_size-sm-desktop__tOWI4","size-md-desktop":"SelectInput-module_size-md-desktop__vo-UC","size-lg-desktop":"SelectInput-module_size-lg-desktop__nxQdj","size-sm-hd":"SelectInput-module_size-sm-hd__qamTH","size-md-hd":"SelectInput-module_size-md-hd__Cf8hk","size-lg-hd":"SelectInput-module_size-lg-hd__E4-mZ","disabled":"SelectInput-module_disabled__4ezAy","select-input-label":"SelectInput-module_select-input-label__eqEYa"};
 
 var _excluded$j = ["id", "label", "onChange", "options", "value", "autoFocus", "className", "error", "helpText", "hideLabel", "isClearable", "isDisabled", "isMulti", "isRequired", "menuPortalTarget", "name", "onFocus", "onBlur", "placeholder", "requiredIndicator", "size"];
 var SelectInput = function SelectInput(_ref) {
@@ -2267,13 +2275,13 @@ var SelectInput = function SelectInput(_ref) {
   };
   var responsiveClasses = generateResponsiveClasses('size', size);
   var wrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', 'select-input-wrapper', className].concat(responsiveClasses.map(function (c) {
-    return styles$e[c];
-  }), [(_ref2 = {}, _ref2[styles$e.disabled] = isDisabled, _ref2)]));
-  var inputClasses = classNames('react-select', (_classNames = {}, _classNames[styles$e.error] = error, _classNames));
+    return styles$d[c];
+  }), [(_ref2 = {}, _ref2[styles$d.disabled] = isDisabled, _ref2)]));
+  var inputClasses = classNames('react-select', (_classNames = {}, _classNames[styles$d.error] = error, _classNames));
   var labelProps = {
     inputId: id,
     helpText: helpText,
-    className: styles$e['select-input-label'],
+    className: styles$d['select-input-label'],
     isDisabled: isDisabled,
     isFieldRequired: isRequired,
     requiredIndicator: requiredIndicator
@@ -2344,20 +2352,6 @@ var FormikSelectInput = function FormikSelectInput(_ref) {
   }));
 };
 
-var styles$d = {"help-text":"HelpText-module_help-text__8WodW"};
-
-var HelpText = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className;
-  return React.createElement(Box, {
-    ref: ref,
-    className: classNames('hyphen-components__variables__form-control', styles$d['help-text'], className),
-    display: "block",
-    color: "secondary",
-    fontSize: "sm"
-  }, children);
-});
-
 var styles$c = {"text-input-wrapper":"SelectInputInset-module_text-input-wrapper__hZ4Fy","size-md":"SelectInputInset-module_size-md__6MFcV","select-input-label":"SelectInputInset-module_select-input-label__6XdR6","clear-button":"SelectInputInset-module_clear-button__xbZaY","size-lg":"SelectInputInset-module_size-lg__i2Bzf","disabled":"SelectInputInset-module_disabled__DYSr2","size-md-tablet":"SelectInputInset-module_size-md-tablet__xwoPz","size-lg-tablet":"SelectInputInset-module_size-lg-tablet__2DgFa","size-md-desktop":"SelectInputInset-module_size-md-desktop__MfemS","size-lg-desktop":"SelectInputInset-module_size-lg-desktop__etLGJ","size-md-hd":"SelectInputInset-module_size-md-hd__NWb1q","size-lg-hd":"SelectInputInset-module_size-lg-hd__ycjXC","error":"SelectInputInset-module_error__j-jgS"};
 
 var SelectInputInset = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -4002,22 +3996,19 @@ function ThemeProvider(_ref) {
     }
     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.createElement(ThemeProviderContext.Provider, _extends({}, props, {
     value: value
   }), children);
 }
-var useTheme = function useTheme() {
-  var context = useContext(ThemeProviderContext);
-  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider. Be sure your App is wrapped in ThemeProvider.');
-  return context;
-};
 
 var styles = {"toast-notification":"ToastNotification-module_toast-notification__2xiTW","toast-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"};
 
@@ -4657,5 +4648,11 @@ var useOpenClose = function useOpenClose(props) {
   };
 };
 
-export { Alert, Badge, Box, Button, Card, CardBaseComponent, Checkbox, CheckboxInput, DateInput, DatePicker, Details, DetailsBaseComponent, DetailsSummary, Drawer, FormControl, FormLabel, FormikCheckboxInput, FormikRadioGroup, FormikSelectInput, FormikSelectInputInset, FormikSelectInputNative, FormikTextInput, FormikTextInputInset, FormikTextareaInput, FormikTextareaInputInset, FormikTimePicker, FormikTimePickerNative, FormikToggle, Heading, Icon, Modal, ModalBaseComponent, Pagination, Popover, RadioGroup, ResponsiveContext, ResponsiveProvider, SelectInput, SelectInputInset, SelectInputNative, Spinner, Table, TextInput, TextInputInset, TextareaInput, TextareaInputInset, ThemeProvider, TimePicker, TimePickerNative, ToastContainer, Toggle, boxPropsKeys, createRectRef, toast, useBreakpoint, useIsomorphicLayoutEffect, useOpenClose, useTheme, useToasts, useWindowSize };
+var useTheme = function useTheme() {
+  var context = React.useContext(ThemeProviderContext);
+  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider. Be sure your App is wrapped in ThemeProvider.');
+  return context;
+};
+
+export { Alert, Badge, Box, Button, Card, CardBaseComponent, Checkbox, CheckboxInput, DateInput, DatePicker, Details, DetailsBaseComponent, DetailsSummary, Drawer, FormControl, FormLabel, FormikCheckboxInput, FormikRadioGroup, FormikSelectInput, FormikSelectInputInset, FormikSelectInputNative, FormikTextInput, FormikTextInputInset, FormikTextareaInput, FormikTextareaInputInset, FormikTimePicker, FormikTimePickerNative, FormikToggle, Heading, Icon, Modal, ModalBaseComponent, Pagination, Popover, RadioGroup, ResponsiveContext, ResponsiveProvider, SelectInput, SelectInputInset, SelectInputNative, Spinner, Table, TextInput, TextInputInset, TextareaInput, TextareaInputInset, ThemeProvider, ThemeProviderContext, TimePicker, TimePickerNative, ToastContainer, Toggle, boxPropsKeys, createRectRef, toast, useBreakpoint, useIsomorphicLayoutEffect, useOpenClose, useTheme, useToasts, useWindowSize };
 //# sourceMappingURL=hyphen-components.esm.js.map