@hyphen/hyphen-components 2.24.0 → 2.24.1

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

@@ -17,6 +17,7 @@ require('@hyphen/hyphen-design-tokens/build/assets/icons');
 var ReactModal = require('react-modal');
 var FocusLock = require('react-focus-lock');
 var reactRemoveScroll = require('react-remove-scroll');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var formik = require('formik');
 var Select = require('react-select');
 var AsyncCreatableSelect = require('react-select/async-creatable');
@@ -43,6 +44,7 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -269,7 +271,7 @@ Component, props, getDefault) {
 
 var styles$w = {"box-transition":"Box-module_box-transition__eQx8C"};
 
-var _excluded$J = ["as", "alignItems", "alignContent", "alignSelf", "background", "borderColor", "borderWidth", "children", "childGap", "className", "color", "columnGap", "cursor", "display", "direction", "flex", "fontFamily", "fontSize", "focus", "fontWeight", "gap", "height", "hover", "justifyContent", "margin", "maxHeight", "minHeight", "maxWidth", "minWidth", "overflow", "padding", "position", "radius", "rowGap", "shadow", "style", "textAlign", "wrap", "width", "zIndex"];
+var _excluded$K = ["as", "alignItems", "alignContent", "alignSelf", "background", "borderColor", "borderWidth", "children", "childGap", "className", "color", "columnGap", "cursor", "display", "direction", "flex", "fontFamily", "fontSize", "focus", "fontWeight", "gap", "height", "hover", "justifyContent", "margin", "maxHeight", "minHeight", "maxWidth", "minWidth", "overflow", "padding", "position", "radius", "rowGap", "shadow", "style", "textAlign", "wrap", "width", "zIndex"];
 /**
  * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
  * elements.
@@ -356,7 +358,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     width = _ref$width === void 0 ? undefined : _ref$width,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? undefined : _ref$zIndex,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$K);
   var heightCss = getDimensionCss('h', height);
   var widthCss = getDimensionCss('w', width);
   var maxHeightCss = getDimensionCss('mh', maxHeight);
@@ -507,14 +509,14 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 var boxPropsKeys = ['as', 'alignItems', 'alignContent', 'alignSelf', 'background', 'borderColor', 'borderWidth', 'className', 'childGap', 'children', 'color', 'columnGap', 'cursor', 'direction', 'display', 'flex', 'focus', 'fontFamily', 'fontSize', 'fontWeight', 'gap', 'height', 'hover', 'justifyContent', 'margin', 'maxHeight', 'minHeight', 'maxWidth', 'minWidth', 'overflow', 'padding', 'position', 'radius', 'rowGap', 'shadow', 'style', 'textAlign', 'wrap', 'width', 'zIndex'];
 
-var _excluded$I = ["className", "name", "color", "size"];
+var _excluded$J = ["className", "name", "color", "size"];
 var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className,
     name = _ref.name,
     color = _ref.color,
     size = _ref.size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var IconComponent = icons[name];
   if (!IconComponent) console.error("Icon '" + name + "' not found"); // eslint-disable-line no-console
   var iconClasses = classNames(className, generateResponsiveClasses('font-color', color), generateResponsiveClasses('font-size', size));
@@ -553,7 +555,7 @@ var ALERT_ICONS_MAP = {
   }
 };
 
-var _excluded$H = ["className", "closeText", "hasIcon", "isCompact", "isClosable", "message", "onClose", "render", "title", "variant"];
+var _excluded$I = ["className", "closeText", "hasIcon", "isCompact", "isClosable", "message", "onClose", "render", "title", "variant"];
 var Alert = function Alert(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -575,7 +577,7 @@ var Alert = function Alert(_ref) {
     title = _ref$title === void 0 ? '' : _ref$title,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   var handleClose = function handleClose(event) {
     if (!onClose) return;
     onClose(event);
@@ -629,7 +631,7 @@ var Alert = function Alert(_ref) {
 
 var styles$u = {"badge":"Badge-module_badge__ZbEBU","size-sm":"Badge-module_size-sm__rL8a6","size-md":"Badge-module_size-md__kf6IH","size-lg":"Badge-module_size-lg__of6XJ","inverse":"Badge-module_inverse__qZCFA","purple":"Badge-module_purple__rX-xW","green":"Badge-module_green__W03uU","red":"Badge-module_red__fl2jg","blue":"Badge-module_blue__C7kyV","yellow":"Badge-module_yellow__gGZ6R","light-grey":"Badge-module_light-grey__Wtrhx","dark-grey":"Badge-module_dark-grey__X-807","hyphen":"Badge-module_hyphen__9pe7x","size-sm-tablet":"Badge-module_size-sm-tablet__6xMVk","size-md-tablet":"Badge-module_size-md-tablet__4w-7I","size-lg-tablet":"Badge-module_size-lg-tablet__8xyRF","size-sm-desktop":"Badge-module_size-sm-desktop__Ayf5L","size-md-desktop":"Badge-module_size-md-desktop__XSq7m","size-lg-desktop":"Badge-module_size-lg-desktop__Baw3S","size-sm-hd":"Badge-module_size-sm-hd__Da6Au","size-md-hd":"Badge-module_size-md-hd__-VNMk","size-lg-hd":"Badge-module_size-lg-hd__6MOwL"};
 
-var _excluded$G = ["className", "message", "variant", "size"];
+var _excluded$H = ["className", "message", "variant", "size"];
 var Badge = function Badge(_ref) {
   var _classNames;
   var _ref$className = _ref.className,
@@ -640,7 +642,7 @@ var Badge = function Badge(_ref) {
     variant = _ref$variant === void 0 ? 'light-grey' : _ref$variant,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
     return styles$u[c];
   });
@@ -775,7 +777,7 @@ var handleReactRouterClick = function handleReactRouterClick(event, onClick, tar
 
 var styles$s = {"button":"Button-module_button__18Bed","size-sm":"Button-module_size-sm__6Xrjw","size-md":"Button-module_size-md__BkuGu","size-lg":"Button-module_size-lg__JVYWV","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","tertiary":"Button-module_tertiary__Nd7xM","danger":"Button-module_danger__Hxs5n","size-sm-tablet":"Button-module_size-sm-tablet__9XaSx","size-md-tablet":"Button-module_size-md-tablet__YQxaI","size-lg-tablet":"Button-module_size-lg-tablet__h3l97","size-sm-desktop":"Button-module_size-sm-desktop__8tTsg","size-md-desktop":"Button-module_size-md-desktop__OCdDi","size-lg-desktop":"Button-module_size-lg-desktop__uFc4f","size-sm-hd":"Button-module_size-sm-hd__INFfD","size-md-hd":"Button-module_size-md-hd__8e2mW","size-lg-hd":"Button-module_size-lg-hd__DH60l","loading":"Button-module_loading__QfItr","label":"Button-module_label__1PsXG","full-width":"Button-module_full-width__qDri6","spinner-wrapper":"Button-module_spinner-wrapper__rALNw"};
 
-var _excluded$F = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "shadow", "size", "tabIndex", "target", "type", "variant"];
+var _excluded$G = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "shadow", "size", "tabIndex", "target", "type", "variant"];
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames, _extends2;
   var _ref$children = _ref.children,
@@ -818,7 +820,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     type = _ref$type === void 0 ? undefined : _ref$type,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   var disabled = isLoading || isDisabled;
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
     return styles$s[c];
@@ -872,7 +874,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, _extends2.onFocus = handleFocus, _extends2.ref = ref, _extends2.type = type || (as !== 'a' && !href ? 'button' : undefined), _extends2.tabIndex = tabIndex, _extends2), restProps), buttonContent);
 });
 
-var _excluded$E = ["background", "borderColor", "borderWidth", "children", "display", "padding"];
+var _excluded$F = ["background", "borderColor", "borderWidth", "children", "display", "padding"];
 var CardFooter = function CardFooter(_ref) {
   var _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'secondary' : _ref$background,
@@ -886,7 +888,7 @@ var CardFooter = function CardFooter(_ref) {
     display = _ref$display === void 0 ? 'block' : _ref$display,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? '2xl' : _ref$padding,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   return React.createElement(Box, _extends({
     display: display,
     padding: padding,
@@ -907,7 +909,7 @@ var HEADING_DEFAULT_SIZE_MAP = {
 
 var styles$r = {"heading":"Heading-module_heading__zKyv7"};
 
-var _excluded$D = ["as", "children", "className", "color", "size"];
+var _excluded$E = ["as", "children", "className", "color", "size"];
 var Heading = function Heading(_ref) {
   var _classNames;
   var _ref$as = _ref.as,
@@ -916,7 +918,7 @@ var Heading = function Heading(_ref) {
     className = _ref.className,
     color = _ref.color,
     size = _ref.size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var element = getElementType(Heading, {
     as: as
   });
@@ -927,7 +929,7 @@ var Heading = function Heading(_ref) {
   }, restProps), children);
 };
 
-var _excluded$C = ["childGap", "children", "className", "display", "padding", "title"];
+var _excluded$D = ["childGap", "children", "className", "display", "padding", "title"];
 var CardHeader = function CardHeader(_ref) {
   var _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? '2xs' : _ref$childGap,
@@ -941,7 +943,7 @@ var CardHeader = function CardHeader(_ref) {
     padding = _ref$padding === void 0 ? '2xl' : _ref$padding,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? null : _ref$title,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   var renderTitle = function renderTitle() {
     return typeof title === 'string' ? React.createElement(Heading, {
       size: "sm",
@@ -958,7 +960,7 @@ var CardHeader = function CardHeader(_ref) {
 
 var styles$q = {"card-section-border":"Card-module_card-section-border__OefDX"};
 
-var _excluded$B = ["background", "borderColor", "borderWidth", "children", "childGap", "gap", "className", "display", "padding", "subdued", "title"];
+var _excluded$C = ["background", "borderColor", "borderWidth", "children", "childGap", "gap", "className", "display", "padding", "subdued", "title"];
 var CardSection = function CardSection(_ref) {
   var _classNames;
   var _ref$background = _ref.background,
@@ -983,7 +985,7 @@ var CardSection = function CardSection(_ref) {
     subdued = _ref$subdued === void 0 ? undefined : _ref$subdued,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? undefined : _ref$title,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   var renderTitle = typeof title === 'string' ? React.createElement(Box, {
     className: "m-bottom-md"
   }, React.createElement(Box, {
@@ -1006,7 +1008,7 @@ var CardSection = function CardSection(_ref) {
   }, children));
 };
 
-var _excluded$A = ["children", "subdued", "overflow", "display", "width"];
+var _excluded$B = ["children", "subdued", "overflow", "display", "width"];
 var CardBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     subdued = _ref.subdued,
@@ -1016,7 +1018,7 @@ var CardBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     display = _ref$display === void 0 ? 'block' : _ref$display,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100' : _ref$width,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   return React.createElement(Box, _extends({
     background: subdued ? 'secondary' : 'primary',
     borderWidth: "sm",
@@ -1039,7 +1041,7 @@ var Card = /*#__PURE__*/function () {
   return Card;
 }();
 
-var _excluded$z = ["className", "error", "isChecked", "isDisabled", "isIndeterminate"];
+var _excluded$A = ["className", "error", "isChecked", "isDisabled", "isIndeterminate"];
 var CheckboxIcon = function CheckboxIcon(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className,
@@ -1051,7 +1053,7 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isIndeterminate = _ref.isIndeterminate,
     isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var color = 'base';
   var name = 'checkbox-btn';
   if (isChecked) name = 'checkbox-btn-checked';else name = 'checkbox-btn';
@@ -1076,7 +1078,7 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
 
 var styles$p = {"checkbox":"Checkbox-module_checkbox__dY-7P","size-sm":"Checkbox-module_size-sm__mJkMQ","size-md":"Checkbox-module_size-md__I2s8g","size-lg":"Checkbox-module_size-lg__rFFnb","hidden":"Checkbox-module_hidden__2y7Zr","size-sm-tablet":"Checkbox-module_size-sm-tablet__GhQUW","size-md-tablet":"Checkbox-module_size-md-tablet__XRHf4","size-lg-tablet":"Checkbox-module_size-lg-tablet__quoAJ","size-sm-desktop":"Checkbox-module_size-sm-desktop__fqeEc","size-md-desktop":"Checkbox-module_size-md-desktop__9a278","size-lg-desktop":"Checkbox-module_size-lg-desktop__WQnv0","size-sm-hd":"Checkbox-module_size-sm-hd__X3yIF","size-md-hd":"Checkbox-module_size-md-hd__6T0dF","size-lg-hd":"Checkbox-module_size-lg-hd__UXCt1"};
 
-var _excluded$y = ["className", "display", "id", "isChecked", "label", "labelledby", "onChange", "error", "isDisabled", "isHidden", "isIndeterminate", "isRequired", "onBlur", "onFocus", "size", "value"];
+var _excluded$z = ["className", "display", "id", "isChecked", "label", "labelledby", "onChange", "error", "isDisabled", "isHidden", "isIndeterminate", "isRequired", "onBlur", "onFocus", "size", "value"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref2;
   var _ref$className = _ref.className,
@@ -1106,7 +1108,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? undefined : _ref$value,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var inputRef = React.useRef(null);
   React.useEffect(function () {
     if (inputRef != null && inputRef.current) {
@@ -1195,7 +1197,7 @@ var HelpText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, children);
 });
 
-var _excluded$x = ["children", "inputId", "className", "display", "helpText", "isDisabled", "isFieldRequired", "isRadioInputLabel", "requiredIndicator", "margin", "padding"];
+var _excluded$y = ["children", "inputId", "className", "display", "helpText", "isDisabled", "isFieldRequired", "isRadioInputLabel", "requiredIndicator", "margin", "padding"];
 var FormLabel = function FormLabel(_ref) {
   var _classNames;
   var children = _ref.children,
@@ -1217,7 +1219,7 @@ var FormLabel = function FormLabel(_ref) {
     margin = _ref$margin === void 0 ? '0' : _ref$margin,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? '0' : _ref$padding,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var labelClasses = classNames('hyphen-components__variables__form-control', styles$n.label, className, (_classNames = {}, _classNames[styles$n.disabled] = isDisabled, _classNames[styles$n.disabled] = isDisabled, _classNames[styles$n['radio-input-label']] = isRadioInputLabel, _classNames));
   return React.createElement(Box, _extends({
     as: "label",
@@ -1230,7 +1232,7 @@ var FormLabel = function FormLabel(_ref) {
   }, restProps), children, isFieldRequired && requiredIndicator && React.createElement("span", null, requiredIndicator), helpText && React.createElement(HelpText, null, helpText));
 };
 
-var _excluded$w = ["id", "isChecked", "label", "onChange", "className", "error", "hideLabel", "helpText", "isDisabled", "isIndeterminate", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size"];
+var _excluded$x = ["id", "isChecked", "label", "onChange", "className", "error", "hideLabel", "helpText", "isDisabled", "isIndeterminate", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size"];
 var labelMarginSizeMap = {
   sm: '2xs 0 0 0',
   md: 'xs 0 0 0',
@@ -1275,7 +1277,7 @@ var CheckboxInput = function CheckboxInput(_ref2) {
     requiredIndicator = _ref2$requiredIndicat === void 0 ? ' *' : _ref2$requiredIndicat,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'md' : _ref2$size,
-    restProps = _objectWithoutPropertiesLoose(_ref2, _excluded$w);
+    restProps = _objectWithoutPropertiesLoose(_ref2, _excluded$x);
   var handleBlur = function handleBlur(event) {
     if (onBlur) onBlur(event);
   };
@@ -1323,7 +1325,7 @@ var CollapsibleContent = CollapsiblePrimitive__namespace.CollapsibleContent;
 
 var styles$l = {};
 
-var _excluded$v = ["children", "dayClassName", "maxDate", "minDate", "monthsShown", "openToDate", "startDate", "selected", "selectsRange", "showTwoColumnMonthYearPicker", "showFullMonthYearPicker", "showMonthYearPicker", "className", "formatWeekDay"];
+var _excluded$w = ["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,
@@ -1355,7 +1357,7 @@ var DatePicker = function DatePicker(_ref) {
     formatWeekDay = _ref$formatWeekDay === void 0 ? function (formattedDate) {
       return formattedDate[0];
     } : _ref$formatWeekDay,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var datePickerClasses = classNames(styles$l['react-datepicker'], className);
   return React.createElement(ReactDatePicker, _extends({
     inline: true,
@@ -1375,7 +1377,7 @@ var DatePicker = function DatePicker(_ref) {
   }, restProps), children);
 };
 
-var _excluded$u = ["label", "hideLabel", "children", "error", "id", "isRequired", "helpText", "isDisabled", "requiredIndicator", "width"];
+var _excluded$v = ["label", "hideLabel", "children", "error", "id", "isRequired", "helpText", "isDisabled", "requiredIndicator", "width"];
 var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var label = _ref.label,
     hideLabel = _ref.hideLabel,
@@ -1388,7 +1390,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     requiredIndicator = _ref.requiredIndicator,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100' : _ref$width,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var labelProps = {
     inputId: id,
     helpText: helpText,
@@ -1416,7 +1418,7 @@ function getAutoCompleteValue(value) {
 
 var styles$k = {"text-input-wrapper":"TextInput-module_text-input-wrapper__HCnQD","size-sm":"TextInput-module_size-sm__qWJn7","prefix":"TextInput-module_prefix__-wFO9","suffix":"TextInput-module_suffix__327yL","clear-button":"TextInput-module_clear-button__LUJpO","is-clearable":"TextInput-module_is-clearable__ExAY3","size-md":"TextInput-module_size-md__UFPtt","size-lg":"TextInput-module_size-lg__Hjfez","disabled":"TextInput-module_disabled__lrifj","size-sm-tablet":"TextInput-module_size-sm-tablet__neC5C","size-md-tablet":"TextInput-module_size-md-tablet__u29oc","size-lg-tablet":"TextInput-module_size-lg-tablet__3PUB3","size-sm-desktop":"TextInput-module_size-sm-desktop__kA12V","size-md-desktop":"TextInput-module_size-md-desktop__yLJGr","size-lg-desktop":"TextInput-module_size-lg-desktop__A1pcS","size-sm-hd":"TextInput-module_size-sm-hd__f7Thr","size-md-hd":"TextInput-module_size-md-hd__Tsnqc","size-lg-hd":"TextInput-module_size-lg-hd__XLMos","error":"TextInput-module_error__p6zZq","text-input-label":"TextInput-module_text-input-label__3PlSG"};
 
-var _excluded$t = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "error", "helpText", "hideLabel", "inputProps", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onClear", "onFocus", "prefix", "placeholder", "requiredIndicator", "suffix", "size", "type"];
+var _excluded$u = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "error", "helpText", "hideLabel", "inputProps", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onClear", "onFocus", "prefix", "placeholder", "requiredIndicator", "suffix", "size", "type"];
 var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref2;
   var id = _ref.id,
@@ -1460,7 +1462,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   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];
@@ -1609,7 +1611,7 @@ var BREAKPOINTS = /*#__PURE__*/[].concat(Object.entries(designTokens.size.breakp
 var Z_INDEX_VALUES = designTokens.size['z-index'];
 // export const BOX_SHADOW_VALUES = designTokens.size['box-shadow'];
 
-var _excluded$s = ["className", "isOpen", "children", "content", "arrowColor", "contentContainerProps", "hasArrow", "offsetFromTarget", "onClickOutside", "placement", "withPortal", "portalTarget", "trapFocus"];
+var _excluded$t = ["className", "isOpen", "children", "content", "arrowColor", "contentContainerProps", "hasArrow", "offsetFromTarget", "onClickOutside", "placement", "withPortal", "portalTarget", "trapFocus"];
 var contentContainerDefaults = {
   background: 'primary',
   padding: 'sm',
@@ -1638,7 +1640,7 @@ var Popover = function Popover(_ref) {
     portalTarget = _ref.portalTarget,
     _ref$trapFocus = _ref.trapFocus,
     trapFocus = _ref$trapFocus === void 0 ? false : _ref$trapFocus,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var triggerRef = React.useRef(null);
   var popperRef = React.useRef(null);
   var _useState = React.useState(null),
@@ -1744,7 +1746,7 @@ var Popover = function Popover(_ref) {
   withPortal && portalTarget ? reactDom.createPortal(renderPopperContent(), portalTarget) : renderPopperContent()));
 };
 
-var _excluded$r = ["datePickerProps", "textInputProps", "dateFormat", "dateOptions", "popoverProps"];
+var _excluded$s = ["datePickerProps", "textInputProps", "dateFormat", "dateOptions", "popoverProps"];
 var defaultDatePickerProps = {
   selected: null,
   selectsRange: false
@@ -1764,7 +1766,7 @@ var DateInput = function DateInput(_ref) {
     dateOptions = _ref$dateOptions === void 0 ? undefined : _ref$dateOptions,
     _ref$popoverProps = _ref.popoverProps,
     popoverProps = _ref$popoverProps === void 0 ? _extends({}, defaultPopoverProps) : _ref$popoverProps,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var mergedDatePickerProps = _extends({}, defaultDatePickerProps, datePickerProps);
   var mergedPopoverProps = _extends({}, defaultPopoverProps, popoverProps);
   var mergedTextInputProps = _extends({}, defaultTextInputProps, textInputProps);
@@ -1841,14 +1843,14 @@ var DateInput = function DateInput(_ref) {
 var ENTER = 13;
 var SPACE = 32;
 
-var _excluded$q = ["children", "display", "isDetailsOpen", "onToggle"];
+var _excluded$r = ["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$q);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var handleClick = function handleClick(event) {
     // Needed to avoid default `details` behavior on a click event and keep this as controlled component.
     event.preventDefault();
@@ -1886,14 +1888,14 @@ var DetailsSummary = function DetailsSummary(_ref) {
 
 var styles$i = {"details-reset":"Details-module_details-reset__HWtSD"};
 
-var _excluded$p = ["children", "className", "display", "isOpen"];
+var _excluded$q = ["children", "className", "display", "isOpen"];
 var DetailsBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$display = _ref.display,
     display = _ref$display === void 0 ? 'block' : _ref$display,
     isOpen = _ref.isOpen,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var detailsClasses = classNames(className, styles$i['details-reset'], styles$i.details);
   return React.createElement(Box, _extends({
     as: "details",
@@ -2032,6 +2034,102 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, renderHeader(), content)))));
 });
 
+var _excluded$p = ["className", "inset"],
+  _excluded2 = ["className", "sideOffset"],
+  _excluded3 = ["className", "inset"],
+  _excluded4 = ["className"],
+  _excluded5 = ["className"],
+  _excluded6 = ["className", "inset", "children"],
+  _excluded7 = ["className"];
+var DropdownMenu = DropdownMenuPrimitive__namespace.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
+var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    inset = _ref.inset,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+  return React.createElement(DropdownMenuPrimitive__namespace.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 hover:background-color-secondary focus:background-color-secondary', inset && 'p-left-md', className)
+  }, props));
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
+var DropdownMenuContent = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    _ref2$sideOffset = _ref2.sideOffset,
+    sideOffset = _ref2$sideOffset === void 0 ? 4 : _ref2$sideOffset,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return React.createElement(DropdownMenuPrimitive__namespace.Portal, null, React.createElement(DropdownMenuPrimitive__namespace.Content, _extends({
+    ref: ref,
+    sideOffset: sideOffset,
+    className: classNames('z-index-popover p-xs minw-7xl overflow-hidden br-sm bw-sm border-color-subtle background-color-primary font-color-base shadow-md', className),
+    style: {
+      width: 'var(--radix-dropdown-menu-trigger-width)'
+    }
+  }, props)));
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
+var DropdownMenuLabel = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var className = _ref3.className,
+    inset = _ref3.inset,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  return React.createElement(DropdownMenuPrimitive__namespace.Label, _extends({
+    ref: ref,
+    className: classNames('display-flex align-items-center br-sm p-h-sm p-v-xs font-color-secondary font-size-xs font-weight-medium outline-none', inset && 'p-left-md', className)
+  }, props));
+});
+DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
+var DropdownMenuSeparator = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
+  var className = _ref4.className,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  return React.createElement(DropdownMenuPrimitive__namespace.Separator, _extends({
+    ref: ref,
+    className: classNames('h-2xs m-v-xs bw-top-sm border-color-subtle', className),
+    style: {
+      marginLeft: 'calc(var(--size-spacing-md)*-1)',
+      marginRight: 'calc(var(--size-spacing-md)*-1)'
+    }
+  }, props));
+});
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
+var DropdownMenuShortcut = function DropdownMenuShortcut(_ref5) {
+  var className = _ref5.className,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+  return React.createElement("span", _extends({
+    className: classNames('m-left-auto font-size-xs font-color-tertiary', className),
+    style: {
+      letterSpacing: '0.5px'
+    }
+  }, props));
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+var DropdownMenuSubTrigger = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+  var className = _ref6.className,
+    inset = _ref6.inset,
+    children = _ref6.children,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+  return React.createElement(DropdownMenuPrimitive__namespace.SubTrigger, _extends({
+    ref: ref,
+    className: classNames('display-flex cursor-default gap-xl align-items-center br-sm p-sm g-sm font-size-sm outline-none focus:background-color-secondary', inset && 'p-left-md', className)
+  }, props), children, React.createElement(Icon, {
+    name: "caret-sm-right",
+    className: "m-left-auto"
+  }));
+});
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
+var DropdownMenuSubContent = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
+  var className = _ref7.className,
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+  return React.createElement(DropdownMenuPrimitive__namespace.SubContent, _extends({
+    ref: ref,
+    className: classNames('z-index-popover minw-7xl overflow-hidden br-sm border-color-subtle bw-sm background-color-primary p-xs font-color-primary shadow-lg', className)
+  }, props));
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
+
 var _excluded$o = ["field", "form", "onChange", "id", "label"];
 var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
   var _ref$field = _ref.field,
@@ -4769,6 +4867,19 @@ exports.Details = Details;
 exports.DetailsBaseComponent = DetailsBaseComponent;
 exports.DetailsSummary = DetailsSummary;
 exports.Drawer = Drawer;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuPortal = DropdownMenuPortal;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuShortcut = DropdownMenuShortcut;
+exports.DropdownMenuSub = DropdownMenuSub;
+exports.DropdownMenuSubContent = DropdownMenuSubContent;
+exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.FormControl = FormControl;
 exports.FormLabel = FormLabel;
 exports.FormikCheckboxInput = FormikCheckboxInput;