@hyphen/hyphen-components 2.24.0 → 2.25.0

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

@@ -17,11 +17,13 @@ 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');
 var AsyncSelect = require('react-select/async');
 var CreatableSelect = require('react-select/creatable');
+var reactSlot = require('@radix-ui/react-slot');
 var uuid = require('uuid');
 
 function _interopNamespaceDefault(e) {
@@ -43,6 +45,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) {
@@ -53,6 +56,9 @@ function _extends() {
     return n;
   }, _extends.apply(null, arguments);
 }
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
 function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
@@ -269,7 +275,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$L = ["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 +362,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$L);
   var heightCss = getDimensionCss('h', height);
   var widthCss = getDimensionCss('w', width);
   var maxHeightCss = getDimensionCss('mh', maxHeight);
@@ -507,14 +513,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$K = ["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$K);
   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 +559,7 @@ var ALERT_ICONS_MAP = {
   }
 };
 
-var _excluded$H = ["className", "closeText", "hasIcon", "isCompact", "isClosable", "message", "onClose", "render", "title", "variant"];
+var _excluded$J = ["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 +581,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$J);
   var handleClose = function handleClose(event) {
     if (!onClose) return;
     onClose(event);
@@ -629,7 +635,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$I = ["className", "message", "variant", "size"];
 var Badge = function Badge(_ref) {
   var _classNames;
   var _ref$className = _ref.className,
@@ -640,7 +646,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$I);
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
     return styles$u[c];
   });
@@ -775,7 +781,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$H = ["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 +824,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$H);
   var disabled = isLoading || isDisabled;
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
     return styles$s[c];
@@ -872,7 +878,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$G = ["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 +892,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$G);
   return React.createElement(Box, _extends({
     display: display,
     padding: padding,
@@ -907,7 +913,7 @@ var HEADING_DEFAULT_SIZE_MAP = {
 
 var styles$r = {"heading":"Heading-module_heading__zKyv7"};
 
-var _excluded$D = ["as", "children", "className", "color", "size"];
+var _excluded$F = ["as", "children", "className", "color", "size"];
 var Heading = function Heading(_ref) {
   var _classNames;
   var _ref$as = _ref.as,
@@ -916,7 +922,7 @@ var Heading = function Heading(_ref) {
     className = _ref.className,
     color = _ref.color,
     size = _ref.size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   var element = getElementType(Heading, {
     as: as
   });
@@ -927,7 +933,7 @@ var Heading = function Heading(_ref) {
   }, restProps), children);
 };
 
-var _excluded$C = ["childGap", "children", "className", "display", "padding", "title"];
+var _excluded$E = ["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 +947,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$E);
   var renderTitle = function renderTitle() {
     return typeof title === 'string' ? React.createElement(Heading, {
       size: "sm",
@@ -958,7 +964,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$D = ["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 +989,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$D);
   var renderTitle = typeof title === 'string' ? React.createElement(Box, {
     className: "m-bottom-md"
   }, React.createElement(Box, {
@@ -1006,7 +1012,7 @@ var CardSection = function CardSection(_ref) {
   }, children));
 };
 
-var _excluded$A = ["children", "subdued", "overflow", "display", "width"];
+var _excluded$C = ["children", "subdued", "overflow", "display", "width"];
 var CardBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     subdued = _ref.subdued,
@@ -1016,7 +1022,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$C);
   return React.createElement(Box, _extends({
     background: subdued ? 'secondary' : 'primary',
     borderWidth: "sm",
@@ -1039,7 +1045,7 @@ var Card = /*#__PURE__*/function () {
   return Card;
 }();
 
-var _excluded$z = ["className", "error", "isChecked", "isDisabled", "isIndeterminate"];
+var _excluded$B = ["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 +1057,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$B);
   var color = 'base';
   var name = 'checkbox-btn';
   if (isChecked) name = 'checkbox-btn-checked';else name = 'checkbox-btn';
@@ -1076,7 +1082,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$A = ["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 +1112,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$A);
   var inputRef = React.useRef(null);
   React.useEffect(function () {
     if (inputRef != null && inputRef.current) {
@@ -1195,7 +1201,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$z = ["children", "inputId", "className", "display", "helpText", "isDisabled", "isFieldRequired", "isRadioInputLabel", "requiredIndicator", "margin", "padding"];
 var FormLabel = function FormLabel(_ref) {
   var _classNames;
   var children = _ref.children,
@@ -1217,7 +1223,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$z);
   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 +1236,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$y = ["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 +1281,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$y);
   var handleBlur = function handleBlur(event) {
     if (onBlur) onBlur(event);
   };
@@ -1323,7 +1329,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$x = ["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 +1361,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$x);
   var datePickerClasses = classNames(styles$l['react-datepicker'], className);
   return React.createElement(ReactDatePicker, _extends({
     inline: true,
@@ -1375,7 +1381,7 @@ var DatePicker = function DatePicker(_ref) {
   }, restProps), children);
 };
 
-var _excluded$u = ["label", "hideLabel", "children", "error", "id", "isRequired", "helpText", "isDisabled", "requiredIndicator", "width"];
+var _excluded$w = ["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 +1394,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$w);
   var labelProps = {
     inputId: id,
     helpText: helpText,
@@ -1416,7 +1422,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$v = ["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 +1466,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$v);
   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 +1615,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$u = ["className", "isOpen", "children", "content", "arrowColor", "contentContainerProps", "hasArrow", "offsetFromTarget", "onClickOutside", "placement", "withPortal", "portalTarget", "trapFocus"];
 var contentContainerDefaults = {
   background: 'primary',
   padding: 'sm',
@@ -1638,7 +1644,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$u);
   var triggerRef = React.useRef(null);
   var popperRef = React.useRef(null);
   var _useState = React.useState(null),
@@ -1744,7 +1750,7 @@ var Popover = function Popover(_ref) {
   withPortal && portalTarget ? reactDom.createPortal(renderPopperContent(), portalTarget) : renderPopperContent()));
 };
 
-var _excluded$r = ["datePickerProps", "textInputProps", "dateFormat", "dateOptions", "popoverProps"];
+var _excluded$t = ["datePickerProps", "textInputProps", "dateFormat", "dateOptions", "popoverProps"];
 var defaultDatePickerProps = {
   selected: null,
   selectsRange: false
@@ -1764,7 +1770,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$t);
   var mergedDatePickerProps = _extends({}, defaultDatePickerProps, datePickerProps);
   var mergedPopoverProps = _extends({}, defaultPopoverProps, popoverProps);
   var mergedTextInputProps = _extends({}, defaultTextInputProps, textInputProps);
@@ -1841,14 +1847,14 @@ var DateInput = function DateInput(_ref) {
 var ENTER = 13;
 var SPACE = 32;
 
-var _excluded$q = ["children", "display", "isDetailsOpen", "onToggle"];
+var _excluded$s = ["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$s);
   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 +1892,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$r = ["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$r);
   var detailsClasses = classNames(className, styles$i['details-reset'], styles$i.details);
   return React.createElement(Box, _extends({
     as: "details",
@@ -2032,7 +2038,103 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, renderHeader(), content)))));
 });
 
-var _excluded$o = ["field", "form", "onChange", "id", "label"];
+var _excluded$q = ["className", "inset"],
+  _excluded2$1 = ["className", "sideOffset"],
+  _excluded3$1 = ["className", "inset"],
+  _excluded4$1 = ["className"],
+  _excluded5$1 = ["className"],
+  _excluded6$1 = ["className", "inset", "children"],
+  _excluded7$1 = ["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$q);
+  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$1);
+  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$1);
+  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$1);
+  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$1);
+  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$1);
+  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$1);
+  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$p = ["field", "form", "onChange", "id", "label"];
 var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2045,7 +2147,7 @@ var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return React.createElement(CheckboxInput, _extends({}, props, {
     id: id,
     label: label,
@@ -2056,7 +2158,7 @@ var FormikCheckboxInput = function FormikCheckboxInput(_ref) {
   }));
 };
 
-var _excluded$n = ["className", "isSelected", "isDisabled", "error"];
+var _excluded$o = ["className", "isSelected", "isDisabled", "error"];
 var RadioInputIcon = function RadioInputIcon(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className,
@@ -2066,7 +2168,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$n);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var color = 'secondary';
   var name = 'radio-btn-unchecked';
   if (isSelected && isDisabled) {
@@ -2159,7 +2261,7 @@ var RadioInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 var styles$f = {"radio-group":"RadioGroup-module_radio-group__FWPcT","fieldset":"RadioGroup-module_fieldset__PEUXI","legend":"RadioGroup-module_legend__tcfV7","description":"RadioGroup-module_description__8fzM-"};
 
-var _excluded$m = ["name", "onChange", "options", "className", "description", "direction", "error", "isDisabled", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size", "title", "value"];
+var _excluded$n = ["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,
@@ -2189,7 +2291,7 @@ 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$m);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   var groupClasses = classNames('hyphen-components__variables__form-control', className, (_classNames = {}, _classNames[styles$f.loading] = error, _classNames));
   return React.createElement("div", _extends({
     className: classNames(styles$f['radio-group'], groupClasses)
@@ -2219,7 +2321,7 @@ var RadioGroup = function RadioGroup(_ref) {
   }))), error && typeof error !== 'boolean' && React.createElement(InputValidationMessage, null, error));
 };
 
-var _excluded$l = ["field", "form", "onChange", "options"];
+var _excluded$m = ["field", "form", "onChange", "options"];
 var FormikRadioGroup = function FormikRadioGroup(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2231,7 +2333,7 @@ var FormikRadioGroup = function FormikRadioGroup(_ref) {
     errors = _ref$form.errors,
     onChange = _ref.onChange,
     options = _ref.options,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return React.createElement(RadioGroup, _extends({}, props, {
     options: options,
     name: name,
@@ -2244,7 +2346,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 _excluded$k = ["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$l = ["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,
@@ -2287,7 +2389,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$k);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$l);
   var handleChange = function handleChange(values) {
     var simulatedEventPayloadType = {
       target: {
@@ -2360,7 +2462,7 @@ function SelectInput(props) {
   })), error && typeof error !== 'boolean' && React.createElement(InputValidationMessage, null, error));
 }
 
-var _excluded$j = ["field", "form", "onChange", "id", "label", "options", "error"];
+var _excluded$k = ["field", "form", "onChange", "id", "label", "options", "error"];
 var FormikSelectInput = function FormikSelectInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2375,7 +2477,7 @@ var FormikSelectInput = function FormikSelectInput(_ref) {
     label = _ref.label,
     options = _ref.options,
     errorProp = _ref.error,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var errorMessage;
   var error = errorProp != null ? errorProp : formik.getIn(touched, name) && formik.getIn(errors, name);
   if (typeof error === 'string') {
@@ -2503,7 +2605,7 @@ var SelectInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, label, isRequired && requiredIndicator && React.createElement("span", null, requiredIndicator))), helpText && React.createElement(HelpText, null, helpText), error && error !== true && React.createElement(InputValidationMessage, null, error));
 });
 
-var _excluded$i = ["field", "form", "onChange", "id", "label", "options"];
+var _excluded$j = ["field", "form", "onChange", "id", "label", "options"];
 var FormikSelectInputInset = function FormikSelectInputInset(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2517,7 +2619,7 @@ var FormikSelectInputInset = function FormikSelectInputInset(_ref) {
     id = _ref.id,
     label = _ref.label,
     options = _ref.options,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return React.createElement(SelectInputInset, _extends({}, props, {
     id: id,
     label: label,
@@ -2615,7 +2717,7 @@ var TextareaInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, label, isRequired && requiredIndicator && React.createElement("span", null, requiredIndicator))), helpText && React.createElement(HelpText, null, helpText), error && error !== true && React.createElement(InputValidationMessage, null, error));
 });
 
-var _excluded$h = ["field", "form", "onChange", "id", "label"];
+var _excluded$i = ["field", "form", "onChange", "id", "label"];
 var FormikTextareaInputInset = function FormikTextareaInputInset(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2628,7 +2730,7 @@ var FormikTextareaInputInset = function FormikTextareaInputInset(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return React.createElement(TextareaInputInset, _extends({}, props, {
     id: id,
     label: label,
@@ -2755,7 +2857,7 @@ var TextInputInset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, suffix)), helpText && React.createElement(HelpText, null, helpText), error && error !== true && React.createElement(InputValidationMessage, null, error));
 });
 
-var _excluded$g = ["field", "form", "onChange", "id", "label"];
+var _excluded$h = ["field", "form", "onChange", "id", "label"];
 var FormikTextInputInset = function FormikTextInputInset(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2768,7 +2870,7 @@ var FormikTextInputInset = function FormikTextInputInset(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   return React.createElement(TextInputInset, _extends({}, props, {
     id: id,
     label: label,
@@ -2782,7 +2884,7 @@ var FormikTextInputInset = function FormikTextInputInset(_ref) {
 
 var styles$a = {"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$f = ["autoFocus", "label", "hideLabel", "helpText", "error", "id", "isDisabled", "isRequired", "name", "value", "options", "onChange", "placeholder", "requiredIndicator", "size"];
+var _excluded$g = ["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,
@@ -2804,7 +2906,7 @@ 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$f);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var placeholderOption = {
     value: '',
     label: placeholder
@@ -2850,7 +2952,7 @@ var SelectInputNative = function SelectInputNative(_ref) {
   }))));
 };
 
-var _excluded$e = ["field", "form", "onChange", "options", "id", "label"];
+var _excluded$f = ["field", "form", "onChange", "options", "id", "label"];
 var FormikSelectInputNative = function FormikSelectInputNative(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2864,7 +2966,7 @@ var FormikSelectInputNative = function FormikSelectInputNative(_ref) {
     options = _ref.options,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   return React.createElement(SelectInputNative, _extends({}, props, {
     options: options,
     id: id,
@@ -2877,7 +2979,7 @@ var FormikSelectInputNative = function FormikSelectInputNative(_ref) {
   }));
 };
 
-var _excluded$d = ["field", "form", "onChange", "id", "label"];
+var _excluded$e = ["field", "form", "onChange", "id", "label"];
 var FormikTextInput = function FormikTextInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -2890,7 +2992,7 @@ var FormikTextInput = function FormikTextInput(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return React.createElement(TextInput, _extends({}, props, {
     id: id,
     label: label,
@@ -2904,7 +3006,7 @@ var FormikTextInput = function FormikTextInput(_ref) {
 
 var styles$9 = {"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$c = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "className", "error", "helpText", "hideLabel", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onFocus", "placeholder", "requiredIndicator", "resize", "rows", "size"];
+var _excluded$d = ["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,
@@ -2944,7 +3046,7 @@ 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$c);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var responsiveClasses = generateResponsiveClasses('size', size);
   var inputWrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', styles$9['textarea-input-wrapper']].concat(responsiveClasses.map(function (c) {
     return styles$9[c];
@@ -2988,7 +3090,7 @@ var TextareaInput = function TextareaInput(_ref) {
   }, inputProps))), error && error !== true && React.createElement(InputValidationMessage, null, error));
 };
 
-var _excluded$b = ["field", "form", "onChange", "id", "label"];
+var _excluded$c = ["field", "form", "onChange", "id", "label"];
 var FormikTextareaInput = function FormikTextareaInput(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3001,7 +3103,7 @@ var FormikTextareaInput = function FormikTextareaInput(_ref) {
     onChange = _ref.onChange,
     id = _ref.id,
     label = _ref.label,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return React.createElement(TextareaInput, _extends({}, props, {
     id: id,
     label: label,
@@ -3013,7 +3115,7 @@ var FormikTextareaInput = function FormikTextareaInput(_ref) {
   }));
 };
 
-var _excluded$a = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
+var _excluded$b = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
 var TimePicker = function TimePicker(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -3035,7 +3137,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$a);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   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);
@@ -3063,7 +3165,7 @@ var TimePicker = function TimePicker(_ref) {
   }));
 };
 
-var _excluded$9 = ["field", "form", "options", "onChange"];
+var _excluded$a = ["field", "form", "options", "onChange"];
 var FormikTimePicker = function FormikTimePicker(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3075,7 +3177,7 @@ var FormikTimePicker = function FormikTimePicker(_ref) {
     errors = _ref$form.errors,
     options = _ref.options,
     onChange = _ref.onChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return React.createElement(TimePicker, _extends({}, props, {
     name: name,
     onBlur: onBlur,
@@ -3086,7 +3188,7 @@ var FormikTimePicker = function FormikTimePicker(_ref) {
   }));
 };
 
-var _excluded$8 = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
+var _excluded$9 = ["id", "name", "label", "onChange", "value", "dateDisplayOptions", "endTime", "interval", "locales", "placeholder", "startTime"];
 var TimePickerNative = function TimePickerNative(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -3108,7 +3210,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$8);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var generateTimes = function generateTimes() {
     var first = new Date();
     first.setHours((startTime == null ? void 0 : startTime.hour) || 0, (startTime == null ? void 0 : startTime.minute) || 0, 0, 0);
@@ -3137,7 +3239,7 @@ var TimePickerNative = function TimePickerNative(_ref) {
   }));
 };
 
-var _excluded$7 = ["field", "form", "onChange"];
+var _excluded$8 = ["field", "form", "onChange"];
 var FormikTimePickerNative = function FormikTimePickerNative(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3148,7 +3250,7 @@ var FormikTimePickerNative = function FormikTimePickerNative(_ref) {
     touched = _ref$form.touched,
     errors = _ref$form.errors,
     onChange = _ref.onChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   return React.createElement(TimePickerNative, _extends({}, props, {
     name: name,
     onBlur: onBlur,
@@ -3249,7 +3351,7 @@ var Toggle = function Toggle(_ref) {
   }, helpText)))), error && error !== true && React.createElement(InputValidationMessage, null, error));
 };
 
-var _excluded$6 = ["field", "form"];
+var _excluded$7 = ["field", "form"];
 var FormikToggle = function FormikToggle(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3259,7 +3361,7 @@ var FormikToggle = function FormikToggle(_ref) {
     _ref$form = _ref.form,
     touched = _ref$form.touched,
     errors = _ref$form.errors,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return React.createElement(Toggle, _extends({
     error: formik.getIn(touched, name) && formik.getIn(errors, name),
     isChecked: value,
@@ -3268,7 +3370,7 @@ var FormikToggle = function FormikToggle(_ref) {
   }, props));
 };
 
-var _excluded$5 = ["children", "padding", "direction", "alignItems", "justifyContent", "gap", "style"];
+var _excluded$6 = ["children", "padding", "direction", "alignItems", "justifyContent", "gap", "style"];
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
@@ -3281,7 +3383,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$5);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   return React.createElement(Box, _extends({
     padding: padding,
     direction: direction,
@@ -3324,7 +3426,7 @@ var ModalHeader = function ModalHeader(_ref) {
   }));
 };
 
-var _excluded$4 = ["children", "flex", "overflow", "height"];
+var _excluded$5 = ["children", "flex", "overflow", "height"];
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children,
     _ref$flex = _ref.flex,
@@ -3333,7 +3435,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$4);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return React.createElement(Box, _extends({
     flex: flex,
     overflow: overflow,
@@ -3346,7 +3448,7 @@ var ModalBody = function ModalBody(_ref) {
 
 var styles$7 = {"modal-close":"Modal-module_modal-close__1YmMa","modal":"Modal-module_modal__yNG-7","modal-content":"Modal-module_modal-content__GMtBm"};
 
-var _excluded$3 = ["ariaLabel", "ariaLabelledBy", "allowPinchZoom", "children", "className", "containerRef", "fullScreenMobile", "initialFocusRef", "isOpen", "maxWidth", "onDismiss", "overflow"];
+var _excluded$4 = ["ariaLabel", "ariaLabelledBy", "allowPinchZoom", "children", "className", "containerRef", "fullScreenMobile", "initialFocusRef", "isOpen", "maxWidth", "onDismiss", "overflow"];
 var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames;
   var ariaLabel = _ref.ariaLabel,
@@ -3366,7 +3468,7 @@ var ModalBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onDismiss = _ref.onDismiss,
     _ref$overflow = _ref.overflow,
     overflow = _ref$overflow === void 0 ? 'hidden' : _ref$overflow,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var activateFocusLock = React.useCallback(function () {
     setTimeout(function () {
       if (initialFocusRef && initialFocusRef.current) {
@@ -3592,7 +3694,7 @@ var Pagination = function Pagination(_ref) {
 
 var styles$6 = {"slider":"RangeInput-module_slider__Z6D68","disabled":"RangeInput-module_disabled__gyu72"};
 
-var _excluded$2 = ["value", "max", "id", "onChange", "className", "isDisabled"];
+var _excluded$3 = ["value", "max", "id", "onChange", "className", "isDisabled"];
 var RangeInput = function RangeInput(_ref) {
   var _classNames;
   var _ref$value = _ref.value,
@@ -3604,7 +3706,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$2);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var currentProgress = value > 0 ? value / max * 100 : 0;
   return React.createElement("input", _extends({}, restProps, {
     id: id,
@@ -3683,6 +3785,450 @@ var ResponsiveProvider = function ResponsiveProvider(_ref) {
   }, 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__namespace.useState(undefined),
+    isMobile = _React$useState[0],
+    setIsMobile = _React$useState[1];
+  React__namespace.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 _excluded$2 = ["defaultOpen", "open", "onOpenChange", "className", "style", "children"],
+  _excluded2 = ["side", "collapsible", "className", "children"],
+  _excluded3 = ["className", "onClick"],
+  _excluded4 = ["className"],
+  _excluded5 = ["className"],
+  _excluded6 = ["className"],
+  _excluded7 = ["className"],
+  _excluded8 = ["className"],
+  _excluded9 = ["className"],
+  _excluded10 = ["asChild", "isActive", "icon", "className"],
+  _excluded11 = ["className"],
+  _excluded12 = ["className"],
+  _excluded13 = ["className"],
+  _excluded14 = ["asChild", "isActive", "className"],
+  _excluded15 = ["className", "asChild"],
+  _excluded16 = ["className"],
+  _excluded17 = ["className"];
+var SIDEBAR_COOKIE_NAME = 'sidebar:state';
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_WIDTH = '16rem';
+var SIDEBAR_WIDTH_ICON = '3rem';
+var SIDEBAR_KEYBOARD_SHORTCUT = '[';
+var SidebarContext = /*#__PURE__*/React.createContext(null);
+function useSidebar() {
+  var context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+  return context;
+}
+var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? true : _ref$defaultOpen,
+    openProp = _ref.open,
+    setOpenProp = _ref.onOpenChange,
+    className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var isMobile = useIsMobile();
+  var _useState = React.useState(openProp != null ? openProp : defaultOpen),
+    openMobile = _useState[0],
+    setOpenMobile = _useState[1];
+  // Manages sidebar open state with a fallback to internal state when openProp is not provided
+  var _useState2 = React.useState(openProp != null ? openProp : defaultOpen),
+    _open = _useState2[0],
+    _setOpen = _useState2[1];
+  var open = openProp != null ? openProp : _open;
+  var setOpen = React.useCallback(function (value) {
+    var newOpenState = typeof value === 'function' ? value(open) : value;
+    if (newOpenState !== open) {
+      if (setOpenProp) {
+        setOpenProp(newOpenState);
+      } else {
+        _setOpen(newOpenState);
+      }
+      // Set cookie only if state changes
+      document.cookie = SIDEBAR_COOKIE_NAME + "=" + newOpenState + "; path=/; max-age=" + SIDEBAR_COOKIE_MAX_AGE;
+    }
+  }, [setOpenProp, open]);
+  // Toggle sidebar based on screen type
+  var toggleSidebar = React.useCallback(function () {
+    isMobile ? setOpenMobile(function (open) {
+      return !open;
+    }) : setOpen(function (open) {
+      return !open;
+    });
+  }, [isMobile, setOpen, setOpenMobile]);
+  // Keydown event handler for toggling sidebar
+  React.useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [toggleSidebar]);
+  // Update open state when `isMobile` changes
+  React.useEffect(function () {
+    if (isMobile && open) {
+      setOpenMobile(open);
+    }
+  }, [isMobile, open]);
+  // Assign state for data attributes
+  var state = open ? 'expanded' : 'collapsed';
+  var contextValue = React.useMemo(function () {
+    return {
+      state: state,
+      open: open,
+      setOpen: setOpen,
+      isMobile: isMobile,
+      openMobile: openMobile,
+      setOpenMobile: setOpenMobile,
+      toggleSidebar: toggleSidebar
+    };
+  }, [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
+  return React.createElement(SidebarContext.Provider, {
+    value: contextValue
+  }, React.createElement("div", _extends({
+    style: _extends({
+      '--sidebar-width': SIDEBAR_WIDTH,
+      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      minBlockSize: '100svh'
+    }, style),
+    className: classNames('display-flex w-100 background-color-secondary', className),
+    ref: ref
+  }, props), children));
+});
+SidebarProvider.displayName = 'SidebarProvider';
+var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$side = _ref2.side,
+    side = _ref2$side === void 0 ? 'left' : _ref2$side,
+    _ref2$collapsible = _ref2.collapsible,
+    collapsible = _ref2$collapsible === void 0 ? 'offcanvas' : _ref2$collapsible,
+    className = _ref2.className,
+    children = _ref2.children,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  var _useSidebar = useSidebar(),
+    isMobile = _useSidebar.isMobile,
+    state = _useSidebar.state,
+    openMobile = _useSidebar.openMobile,
+    setOpenMobile = _useSidebar.setOpenMobile;
+  if (isMobile) {
+    return React.createElement(Drawer, {
+      isOpen: openMobile,
+      onDismiss: function onDismiss() {
+        return setOpenMobile(false);
+      },
+      placement: side
+    }, React.createElement(Box, {
+      "data-sidebar": "sidebar",
+      "data-mobile": "true"
+    }, children));
+  }
+  if (collapsible === 'none') {
+    return React.createElement("div", _extends({
+      className: classNames('display-flex h-100 font-size-xs flex-direction-column background-color-secondary font-color-base', className),
+      style: {
+        width: 'var(--sidebar-width)'
+      },
+      ref: ref
+    }, props), children);
+  }
+  return React.createElement(Box, {
+    ref: ref,
+    background: "primary",
+    display: {
+      base: 'none',
+      desktop: 'block'
+    },
+    color: "base",
+    fontSize: "sm",
+    "data-state": state,
+    "data-collapsible": collapsible,
+    "data-side": side
+  }, React.createElement("div", {
+    style: {
+      animationTimingFunction: 'var(--sidebar-transition-timing, linear)',
+      transitionTimingFunction: 'var(--sidebar-transition-timing, linear)',
+      transitionDuration: 'var(--sidebar-transition-duration, 200ms)',
+      animationDuration: 'var(--sidebar-transition-duration, 200ms)',
+      transitionProperty: 'width',
+      width: state === 'collapsed' ? '0' : 'var(--sidebar-width)',
+      height: '100svh'
+    },
+    className: classNames('position-relative', className)
+  }), React.createElement("div", _extends({
+    className: classNames('position-fixed display-none display-flex-desktop ', className),
+    style: {
+      left: state === 'expanded' ? '0' : 'calc(var(--sidebar-width)*-1)',
+      top: '0',
+      bottom: '0',
+      zIndex: 'var(--size-z-index-drawer)',
+      transitionProperty: 'left, right, width',
+      width: 'var(--sidebar-width)',
+      height: '100svh'
+    }
+  }, props), React.createElement("div", {
+    "data-sidebar": "sidebar",
+    className: "display-flex h-100 w-100 flex-direction-column background-color-secondary font-color-base"
+  }, children)));
+});
+Sidebar.displayName = 'Sidebar';
+var SidebarTrigger = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var className = _ref3.className,
+    _onClick = _ref3.onClick,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  var _useSidebar2 = useSidebar(),
+    toggleSidebar = _useSidebar2.toggleSidebar;
+  return React.createElement(Button, _extends({
+    ref: ref,
+    "data-sidebar": "trigger",
+    variant: "tertiary",
+    size: "sm",
+    iconPrefix: "dock-left",
+    className: className,
+    onClick: function onClick(event) {
+      _onClick == null || _onClick(event);
+      toggleSidebar();
+    },
+    "aria-label": "toggle sidebar"
+  }, props));
+});
+SidebarTrigger.displayName = 'SidebarTrigger';
+var SidebarInset = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
+  var className = _ref4.className,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  return React.createElement("main", _extends({
+    ref: ref,
+    className: classNames('display-flex flex-auto flex-direction-column g-lg align-items-flex-start p-lg background-color-secondary', className)
+  }, props));
+});
+SidebarInset.displayName = 'SidebarInset';
+var SidebarHeader = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
+  var className = _ref5.className,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+  return React.createElement("div", _extends({
+    ref: ref,
+    "data-sidebar": "header",
+    className: classNames('display-flex g-sm p-v-md p-h-md p-right-0-desktop', className)
+  }, props));
+});
+SidebarHeader.displayName = 'SidebarHeader';
+var SidebarFooter = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+  var className = _ref6.className,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+  return React.createElement("div", _extends({
+    ref: ref,
+    "data-sidebar": "footer",
+    className: classNames('display-flex g-sm  p-v-md p-h-md p-right-0-desktop', className)
+  }, props));
+});
+SidebarFooter.displayName = 'SidebarFooter';
+var SidebarContent = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
+  var className = _ref7.className,
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+  return React.createElement("div", _extends({
+    ref: ref,
+    "data-sidebar": "content",
+    className: classNames('display-flex flex-direction-column g-xl minh-0 flex-auto overflow-auto', className)
+  }, props));
+});
+SidebarContent.displayName = 'SidebarContent';
+var SidebarMenu = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
+  var className = _ref8.className,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
+  return React.createElement("ul", _extends({
+    ref: ref,
+    "data-sidebar": "menu",
+    className: classNames('display-flex flex-direction-column w-100 minw-0 g-xs p-0 m-0', className),
+    style: {
+      listStyle: 'none'
+    }
+  }, props));
+});
+SidebarMenu.displayName = 'SidebarMenu';
+var SidebarMenuItem = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
+  var className = _ref9.className,
+    props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
+  return React.createElement("li", _extends({
+    ref: ref,
+    "data-sidebar": "menu-item",
+    className: classNames('font-size-sm position-relative', className)
+  }, props));
+});
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+var SidebarMenuButton = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
+  var _ref10$asChild = _ref10.asChild,
+    asChild = _ref10$asChild === void 0 ? false : _ref10$asChild,
+    _ref10$isActive = _ref10.isActive,
+    isActive = _ref10$isActive === void 0 ? false : _ref10$isActive,
+    className = _ref10.className,
+    props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
+  var Comp = asChild ? reactSlot.Slot : 'button';
+  var button = React.createElement(Comp, _extends({
+    ref: ref,
+    "data-sidebar": "menu-button",
+    "data-active": isActive,
+    className: classNames('display-flex w-100 flex-auto p-sm br-sm g-lg flex-direction-row flex-auto align-items-center font-size-sm bw-0 font-weight-medium text-align-left td-none hover:background-color-tertiary font-color-base cursor-pointer', {
+      'background-color-tertiary': isActive,
+      'background-color-transparent': !isActive
+    }, className)
+  }, props), props.children);
+  return button;
+});
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+var SidebarGroup = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
+  var className = _ref11.className,
+    props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
+  return React.createElement("div", _extends({
+    ref: ref,
+    "data-sidebar": "group",
+    className: classNames('position-relative p-h-md p-right-0-desktop display-flex w-100 minw-0 flex-direction-column', className)
+  }, props));
+});
+SidebarGroup.displayName = 'SidebarGroup';
+var SidebarGroupLabel = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
+  var className = _ref12.className,
+    props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
+  return React.createElement("div", _extends({
+    ref: ref,
+    "data-sidebar": "group-label",
+    className: classNames('display-flex h-3xl align-items-center br-sm p-h-sm font-color-secondary font-size-xs font-weight-medium outline-none', className)
+  }, props));
+});
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
+var SidebarMenuSub = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
+  var className = _ref13.className,
+    props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
+  return React.createElement("ul", _extends({
+    ref: ref,
+    "data-sidebar": "menu-sub",
+    className: classNames('display-flex min-w-0 m-left-xl p-left-sm flex-direction-column g-2xs bw-left-sm border-color-default', className),
+    style: {
+      listStyle: 'none'
+    }
+  }, props));
+});
+SidebarMenuSub.displayName = 'SidebarMenuSub';
+var SidebarMenuSubItem = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref14), _ref14));
+  return React.createElement("li", _extends({
+    ref: ref
+  }, props));
+});
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+var SidebarMenuSubButton = /*#__PURE__*/React.forwardRef(function (_ref15, ref) {
+  var _ref15$asChild = _ref15.asChild,
+    asChild = _ref15$asChild === void 0 ? false : _ref15$asChild,
+    isActive = _ref15.isActive,
+    className = _ref15.className,
+    props = _objectWithoutPropertiesLoose(_ref15, _excluded14);
+  var Comp = asChild ? reactSlot.Slot : 'a';
+  return React.createElement(Comp, _extends({
+    ref: ref,
+    "data-sidebar": "menu-sub-button",
+    "data-active": isActive,
+    className: classNames('display-flex td-none h-4xl p-left-lg font-color-base minw-0 align-items-center gap-sm overflow-hidden br-sm outline-none hover:background-color-tertiary', {
+      'background-color-tertiary': isActive,
+      'background-color-transparent': !isActive
+    }, className)
+  }, props));
+});
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
+var SidebarMenuAction = /*#__PURE__*/React.forwardRef(function (_ref16, ref) {
+  var className = _ref16.className,
+    _ref16$asChild = _ref16.asChild,
+    asChild = _ref16$asChild === void 0 ? false : _ref16$asChild,
+    props = _objectWithoutPropertiesLoose(_ref16, _excluded15);
+  var Comp = asChild ? reactSlot.Slot : 'button';
+  return React.createElement(Comp, _extends({
+    ref: ref,
+    "data-sidebar": "menu-action",
+    className: classNames('position-absolute lh-none p-xs font-color-secondary cursor-pointer hover:font-color-base minw-0 align-items-center bw-0 br-sm outline-none background-color-transparent hover:background-color-tertiary', className),
+    style: {
+      top: 'var(--size-spacing-xs)',
+      right: 'var(--size-spacing-xs)'
+    }
+  }, props));
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+var SidebarRail = /*#__PURE__*/React.forwardRef(function (_ref17, ref) {
+  var className = _ref17.className,
+    props = _objectWithoutPropertiesLoose(_ref17, _excluded16);
+  var _useSidebar3 = useSidebar(),
+    open = _useSidebar3.open,
+    toggleSidebar = _useSidebar3.toggleSidebar;
+  var caretIcon = open ? 'caret-sm-left' : 'caret-sm-right';
+  return React.createElement("button", _extends({
+    ref: ref,
+    "data-sidebar": "rail",
+    "aria-label": "Toggle Sidebar",
+    tabIndex: -1,
+    onClick: toggleSidebar,
+    title: "Toggle Sidebar",
+    className: classNames('hover-show-child display-flex p-top-5xl justify-content-center position-absolute background-color-transparent bw-0', {
+      'cursor-w-resize': open,
+      'cursor-e-resize': !open
+    }, className),
+    style: {
+      top: '0',
+      bottom: '0',
+      right: '-1rem',
+      width: '1rem',
+      zIndex: '-1'
+    }
+  }, props), React.createElement(Box, {
+    radius: "xl",
+    background: "primary",
+    color: "secondary",
+    borderWidth: "sm",
+    padding: "xs",
+    margin: "0 0 0 sm",
+    shadow: "xs",
+    className: classNames('hover-child', {
+      'cursor-w-resize': open,
+      'cursor-e-resize': !open
+    }, className)
+  }, React.createElement(Icon, {
+    name: caretIcon
+  })));
+});
+SidebarRail.displayName = 'SidebarRail';
+var SidebarMenuBadge = /*#__PURE__*/React.forwardRef(function (_ref18, ref) {
+  var className = _ref18.className,
+    props = _objectWithoutPropertiesLoose(_ref18, _excluded17);
+  return React.createElement("div", _extends({
+    ref: ref,
+    "data-sidebar": "menu-badge",
+    className: classNames('position-absolute font-size-xs cursor-default lh-none p-xs font-color-base minw-0 align-items-center bw-0 br-sm outline-none background-color-transparent', className),
+    style: {
+      top: 'var(--size-spacing-sm)',
+      right: 'var(--size-spacing-xs)'
+    }
+  }, props));
+});
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+
 var styles$5 = {"container":"Table-module_container__BsXT7","loading-mask":"Table-module_loading-mask__qoRPG","scroll-container":"Table-module_scroll-container__5WV5T","table":"Table-module_table__-ZPCW","auto":"Table-module_auto__1R8wm","fixed":"Table-module_fixed__T-EXg","borderless":"Table-module_borderless__BbsqE","scrollable":"Table-module_scrollable__Apjbs","scrollable-x":"Table-module_scrollable-x__mguJX","scrollable-y":"Table-module_scrollable-y__292qB","table-bordered":"Table-module_table-bordered__wM9u-","full-height":"Table-module_full-height__MlrSg"};
 
 var styles$4 = {"table-body":"TableBody-module_table-body__Y5WbD","striped":"TableBody-module_striped__5MlEr","hover":"TableBody-module_hover__2CRgY"};
@@ -4677,28 +5223,6 @@ var useBreakpoint = function useBreakpoint() {
   };
 };
 
-var desktopBreakpoint = /*#__PURE__*/BREAKPOINTS.find(function (b) {
-  return b.name === 'desktop';
-});
-var MOBILE_BREAKPOINT = desktopBreakpoint ? desktopBreakpoint.minWidth : 0; // min width in pixels
-function useIsMobile() {
-  var _React$useState = React__namespace.useState(undefined),
-    isMobile = _React$useState[0],
-    setIsMobile = _React$useState[1];
-  React__namespace.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 = {};
@@ -4769,6 +5293,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;
@@ -4796,6 +5333,24 @@ exports.ResponsiveProvider = ResponsiveProvider;
 exports.SelectInput = SelectInput;
 exports.SelectInputInset = SelectInputInset;
 exports.SelectInputNative = SelectInputNative;
+exports.Sidebar = Sidebar;
+exports.SidebarContent = SidebarContent;
+exports.SidebarFooter = SidebarFooter;
+exports.SidebarGroup = SidebarGroup;
+exports.SidebarGroupLabel = SidebarGroupLabel;
+exports.SidebarHeader = SidebarHeader;
+exports.SidebarInset = SidebarInset;
+exports.SidebarMenu = SidebarMenu;
+exports.SidebarMenuAction = SidebarMenuAction;
+exports.SidebarMenuBadge = SidebarMenuBadge;
+exports.SidebarMenuButton = SidebarMenuButton;
+exports.SidebarMenuItem = SidebarMenuItem;
+exports.SidebarMenuSub = SidebarMenuSub;
+exports.SidebarMenuSubButton = SidebarMenuSubButton;
+exports.SidebarMenuSubItem = SidebarMenuSubItem;
+exports.SidebarProvider = SidebarProvider;
+exports.SidebarRail = SidebarRail;
+exports.SidebarTrigger = SidebarTrigger;
 exports.Spinner = Spinner;
 exports.Table = Table;
 exports.TextInput = TextInput;
@@ -4815,6 +5370,7 @@ exports.useBreakpoint = useBreakpoint;
 exports.useIsMobile = useIsMobile;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useOpenClose = useOpenClose;
+exports.useSidebar = useSidebar;
 exports.useTheme = useTheme;
 exports.useToasts = useToasts;
 exports.useWindowSize = useWindowSize;