@hyphen/hyphen-components 2.25.2 → 4.0.0

package/dist/hyphen-components.esm.js

@@ -1,8 +1,9 @@
 'use client';
 import * as React from 'react';
-import React__default, { forwardRef, Children, createElement, cloneElement, useRef, useState, useEffect, isValidElement, useCallback, useMemo, useLayoutEffect, createContext } from 'react';
+import React__default, { forwardRef, Children, createElement, cloneElement, useRef, useState, useEffect, isValidElement, useContext, useCallback, useMemo, createContext, useLayoutEffect } from 'react';
 import classNames from 'classnames';
 import icons from '@hyphen/hyphen-design-tokens/build/assets/icons/react';
+import { Slottable, Slot } from '@radix-ui/react-slot';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import format from 'date-fns/format';
 import ReactDatePicker from 'react-datepicker';
@@ -20,7 +21,6 @@ import Select, { components } from 'react-select';
 import AsyncCreatableSelect from 'react-select/async-creatable';
 import AsyncSelect from 'react-select/async';
 import CreatableSelect from 'react-select/creatable';
-import { Slot } from '@radix-ui/react-slot';
 import { v4 } from 'uuid';
 
 function _extends() {
@@ -251,7 +251,7 @@ Component, props, getDefault) {
 
 var styles$w = {"box-transition":"Box-module_box-transition__eQx8C"};
 
-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"];
+var _excluded$M = ["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.
@@ -338,7 +338,7 @@ var Box = /*#__PURE__*/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$L);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$M);
   var heightCss = getDimensionCss('h', height);
   var widthCss = getDimensionCss('w', width);
   var maxHeightCss = getDimensionCss('mh', maxHeight);
@@ -489,14 +489,14 @@ var Box = /*#__PURE__*/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$K = ["className", "name", "color", "size"];
+var _excluded$L = ["className", "name", "color", "size"];
 var Icon = /*#__PURE__*/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$K);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$L);
   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));
@@ -535,7 +535,7 @@ var ALERT_ICONS_MAP = {
   }
 };
 
-var _excluded$J = ["className", "closeText", "hasIcon", "isCompact", "isClosable", "message", "onClose", "render", "title", "variant"];
+var _excluded$K = ["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,
@@ -557,7 +557,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$J);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$K);
   var handleClose = function handleClose(event) {
     if (!onClose) return;
     onClose(event);
@@ -611,7 +611,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$I = ["className", "message", "variant", "size"];
+var _excluded$J = ["className", "message", "variant", "size"];
 var Badge = function Badge(_ref) {
   var _classNames;
   var _ref$className = _ref.className,
@@ -622,7 +622,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$I);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
     return styles$u[c];
   });
@@ -726,99 +726,47 @@ var Spinner = function Spinner(_ref) {
   }))));
 };
 
-var isModifiedEvent = function isModifiedEvent(e) {
-  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-};
-/**
- * Due to react-router's handling of custom components used in RR <Link>
- * we must add this validation that ensures the router will execute the passed `navigate`
- * prop, thus navigating the user without triggering a refresh.
- *
- * SOURCES:
- *    https://github.com/ReactTraining/react-router/issues/7727
- *    https://github.com/ReactTraining/react-router/issues/7761
- * */
-// eslint-disable-next-line import/prefer-default-export
-var handleReactRouterClick = function handleReactRouterClick(event, onClick, target, navigate) {
-  if (onClick) onClick(event);
-  if (!event.defaultPrevented &&
-  // onClick prevented default
-  event.button === 0 && (
-  // ignore everything but left clicks
-  !target || target === '_self') &&
-  // let browser handle "target=_blank" etc.
-  !isModifiedEvent(event) &&
-  // ignore clicks with modifier keys
-  navigate) {
-    event.preventDefault();
-    navigate();
-  }
-};
-
 var styles$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$H = ["children", "as", "className", "fullWidth", "id", "href", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "navigate", "onClick", "onFocus", "onBlur", "shadow", "size", "tabIndex", "target", "type", "variant"];
+var _excluded$I = ["asChild", "children", "className", "fullWidth", "iconPrefix", "iconSuffix", "isDisabled", "isLoading", "onClick", "onBlur", "onFocus", "shadow", "size", "variant"];
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _classNames, _extends2;
-  var _ref$children = _ref.children,
-    children = _ref$children === void 0 ? undefined : _ref$children,
-    _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'button' : _ref$as,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$fullWidth = _ref.fullWidth,
-    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? undefined : _ref$id,
-    _ref$href = _ref.href,
-    href = _ref$href === void 0 ? undefined : _ref$href,
-    _ref$iconPrefix = _ref.iconPrefix,
-    iconPrefix = _ref$iconPrefix === void 0 ? undefined : _ref$iconPrefix,
-    _ref$iconSuffix = _ref.iconSuffix,
-    iconSuffix = _ref$iconSuffix === void 0 ? undefined : _ref$iconSuffix,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    _ref$navigate = _ref.navigate,
-    navigate = _ref$navigate === void 0 ? undefined : _ref$navigate,
-    _ref$onClick = _ref.onClick,
-    _onClick = _ref$onClick === void 0 ? undefined : _ref$onClick,
-    _ref$onFocus = _ref.onFocus,
-    onFocus = _ref$onFocus === void 0 ? undefined : _ref$onFocus,
-    _ref$onBlur = _ref.onBlur,
-    onBlur = _ref$onBlur === void 0 ? undefined : _ref$onBlur,
-    _ref$shadow = _ref.shadow,
-    shadow = _ref$shadow === void 0 ? undefined : _ref$shadow,
+  var _classNames;
+  var asChild = _ref.asChild,
+    children = _ref.children,
+    className = _ref.className,
+    fullWidth = _ref.fullWidth,
+    iconPrefix = _ref.iconPrefix,
+    iconSuffix = _ref.iconSuffix,
+    isDisabled = _ref.isDisabled,
+    isLoading = _ref.isLoading,
+    onClick = _ref.onClick,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    shadow = _ref.shadow,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    _ref$tabIndex = _ref.tabIndex,
-    tabIndex = _ref$tabIndex === void 0 ? undefined : _ref$tabIndex,
-    _ref$target = _ref.target,
-    target = _ref$target === void 0 ? undefined : _ref$target,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? undefined : _ref$type,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   var disabled = isLoading || isDisabled;
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
     return styles$s[c];
-  });
+  }).filter(Boolean);
   var buttonClasses = classNames('hyphen-components__variables__form-control', styles$s.button, className, responsiveClasses, generateResponsiveClasses('shadow', shadow), (_classNames = {}, _classNames[styles$s.loading] = isLoading, _classNames[styles$s[variant]] = variant, _classNames[styles$s['full-width']] = fullWidth, _classNames));
-  var handleClick = handleReactRouterClick;
-  var handleFocus = function handleFocus(event) {
-    if (onFocus) onFocus(event);
-  };
-  var handleBlur = function handleBlur(event) {
-    if (onBlur) onBlur(event);
-  };
-  var buttonContent = iconPrefix || iconSuffix ? React__default.createElement(Box, {
-    display: "inline-flex",
-    direction: "row",
-    alignItems: "center",
-    gap: "md"
-  }, isLoading && React__default.createElement(Spinner, {
+  var handleClick = !disabled ? onClick : undefined;
+  var handleBlur = !disabled ? onBlur : undefined;
+  var handleFocus = !disabled ? onFocus : undefined;
+  var Comp = asChild ? Slot : 'button';
+  return React__default.createElement(Comp, _extends({}, disabled && {
+    'aria-disabled': true
+  }, {
+    disabled: disabled,
+    className: buttonClasses,
+    onClick: handleClick,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    ref: ref
+  }, restProps), isLoading && React__default.createElement(Spinner, {
     className: styles$s['spinner-wrapper']
   }), iconPrefix && React__default.createElement(Icon, {
     className: styles$s.label,
@@ -827,34 +775,20 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     focusable: "false",
     "data-testid": "prefixIcon",
     size: size === 'md' ? 'sm' : size
-  }), children && React__default.createElement("span", {
+  }), children && React__default.createElement(Slottable, null, asChild ? children : React__default.createElement("span", {
     className: styles$s.label
-  }, children), iconSuffix && React__default.createElement(Icon, {
+  }, children)), iconSuffix && React__default.createElement(Icon, {
     className: styles$s.label,
     name: iconSuffix,
     "aria-hidden": "true",
     focusable: "false",
     "data-testid": "suffixIcon",
     size: size === 'md' ? 'sm' : size
-  })) : React__default.createElement(React__default.Fragment, null, isLoading && React__default.createElement(Spinner, {
-    className: styles$s['spinner-wrapper']
-  }), function () {
-    if (children) {
-      return React__default.createElement("span", {
-        className: styles$s.label
-      }, children);
-    }
-    return null;
-  }());
-  var buttonElement = getElementType(Button, {
-    as: as
-  });
-  return createElement(buttonElement, _extends((_extends2 = {}, _extends2['aria-disabled'] = disabled, _extends2.id = id, _extends2.href = href, _extends2.className = buttonClasses, _extends2.disabled = disabled, _extends2.target = as === 'a' && href ? target : null, _extends2.rel = as === 'a' && href && target === '_blank' ? 'noopener noreferrer' : null, _extends2.onBlur = handleBlur, _extends2.onClick = function onClick(event) {
-    return handleClick(event, _onClick, target, navigate);
-  }, _extends2.onFocus = handleFocus, _extends2.ref = ref, _extends2.type = type || (as !== 'a' && !href ? 'button' : undefined), _extends2.tabIndex = tabIndex, _extends2), restProps), buttonContent);
+  }));
 });
+Button.displayName = 'Button';
 
-var _excluded$G = ["background", "borderColor", "borderWidth", "children", "display", "padding"];
+var _excluded$H = ["background", "borderColor", "borderWidth", "children", "display", "padding"];
 var CardFooter = function CardFooter(_ref) {
   var _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'secondary' : _ref$background,
@@ -868,7 +802,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$G);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   return React__default.createElement(Box, _extends({
     display: display,
     padding: padding,
@@ -889,7 +823,7 @@ var HEADING_DEFAULT_SIZE_MAP = {
 
 var styles$r = {"heading":"Heading-module_heading__zKyv7"};
 
-var _excluded$F = ["as", "children", "className", "color", "size"];
+var _excluded$G = ["as", "children", "className", "color", "size"];
 var Heading = function Heading(_ref) {
   var _classNames;
   var _ref$as = _ref.as,
@@ -898,7 +832,7 @@ var Heading = function Heading(_ref) {
     className = _ref.className,
     color = _ref.color,
     size = _ref.size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   var element = getElementType(Heading, {
     as: as
   });
@@ -909,7 +843,7 @@ var Heading = function Heading(_ref) {
   }, restProps), children);
 };
 
-var _excluded$E = ["childGap", "children", "className", "display", "padding", "title"];
+var _excluded$F = ["childGap", "children", "className", "display", "padding", "title"];
 var CardHeader = function CardHeader(_ref) {
   var _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? '2xs' : _ref$childGap,
@@ -923,7 +857,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$E);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   var renderTitle = function renderTitle() {
     return typeof title === 'string' ? React__default.createElement(Heading, {
       size: "sm",
@@ -940,7 +874,7 @@ var CardHeader = function CardHeader(_ref) {
 
 var styles$q = {"card-section-border":"Card-module_card-section-border__OefDX"};
 
-var _excluded$D = ["background", "borderColor", "borderWidth", "children", "childGap", "gap", "className", "display", "padding", "subdued", "title"];
+var _excluded$E = ["background", "borderColor", "borderWidth", "children", "childGap", "gap", "className", "display", "padding", "subdued", "title"];
 var CardSection = function CardSection(_ref) {
   var _classNames;
   var _ref$background = _ref.background,
@@ -965,7 +899,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$D);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var renderTitle = typeof title === 'string' ? React__default.createElement(Box, {
     className: "m-bottom-md"
   }, React__default.createElement(Box, {
@@ -988,7 +922,7 @@ var CardSection = function CardSection(_ref) {
   }, children));
 };
 
-var _excluded$C = ["children", "subdued", "overflow", "display", "width"];
+var _excluded$D = ["children", "subdued", "overflow", "display", "width"];
 var CardBaseComponent = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     subdued = _ref.subdued,
@@ -998,7 +932,7 @@ var CardBaseComponent = /*#__PURE__*/React__default.forwardRef(function (_ref, r
     display = _ref$display === void 0 ? 'block' : _ref$display,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100' : _ref$width,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   return React__default.createElement(Box, _extends({
     background: subdued ? 'secondary' : 'primary',
     borderWidth: "sm",
@@ -1021,7 +955,7 @@ var Card = /*#__PURE__*/function () {
   return Card;
 }();
 
-var _excluded$B = ["className", "error", "isChecked", "isDisabled", "isIndeterminate"];
+var _excluded$C = ["className", "error", "isChecked", "isDisabled", "isIndeterminate"];
 var CheckboxIcon = function CheckboxIcon(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className,
@@ -1033,7 +967,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$B);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   var color = 'base';
   var name = 'checkbox-btn';
   if (isChecked) name = 'checkbox-btn-checked';else name = 'checkbox-btn';
@@ -1058,7 +992,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$A = ["className", "display", "id", "isChecked", "label", "labelledby", "onChange", "error", "isDisabled", "isHidden", "isIndeterminate", "isRequired", "onBlur", "onFocus", "size", "value"];
+var _excluded$B = ["className", "display", "id", "isChecked", "label", "labelledby", "onChange", "error", "isDisabled", "isHidden", "isIndeterminate", "isRequired", "onBlur", "onFocus", "size", "value"];
 var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref2;
   var _ref$className = _ref.className,
@@ -1088,7 +1022,7 @@ var Checkbox = /*#__PURE__*/React__default.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$A);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   var inputRef = React__default.useRef(null);
   React__default.useEffect(function () {
     if (inputRef != null && inputRef.current) {
@@ -1177,7 +1111,7 @@ var HelpText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, children);
 });
 
-var _excluded$z = ["children", "inputId", "className", "display", "helpText", "isDisabled", "isFieldRequired", "isRadioInputLabel", "requiredIndicator", "margin", "padding"];
+var _excluded$A = ["children", "inputId", "className", "display", "helpText", "isDisabled", "isFieldRequired", "isRadioInputLabel", "requiredIndicator", "margin", "padding"];
 var FormLabel = function FormLabel(_ref) {
   var _classNames;
   var children = _ref.children,
@@ -1199,7 +1133,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$z);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   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__default.createElement(Box, _extends({
     as: "label",
@@ -1212,7 +1146,7 @@ var FormLabel = function FormLabel(_ref) {
   }, restProps), children, isFieldRequired && requiredIndicator && React__default.createElement("span", null, requiredIndicator), helpText && React__default.createElement(HelpText, null, helpText));
 };
 
-var _excluded$y = ["id", "isChecked", "label", "onChange", "className", "error", "hideLabel", "helpText", "isDisabled", "isIndeterminate", "isRequired", "onBlur", "onFocus", "requiredIndicator", "size"];
+var _excluded$z = ["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',
@@ -1257,7 +1191,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$y);
+    restProps = _objectWithoutPropertiesLoose(_ref2, _excluded$z);
   var handleBlur = function handleBlur(event) {
     if (onBlur) onBlur(event);
   };
@@ -1305,7 +1239,7 @@ var CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
 var styles$l = {};
 
-var _excluded$x = ["children", "dayClassName", "maxDate", "minDate", "monthsShown", "openToDate", "startDate", "selected", "selectsRange", "showTwoColumnMonthYearPicker", "showFullMonthYearPicker", "showMonthYearPicker", "className", "formatWeekDay"];
+var _excluded$y = ["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,
@@ -1337,7 +1271,7 @@ var DatePicker = function DatePicker(_ref) {
     formatWeekDay = _ref$formatWeekDay === void 0 ? function (formattedDate) {
       return formattedDate[0];
     } : _ref$formatWeekDay,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var datePickerClasses = classNames(styles$l['react-datepicker'], className);
   return React__default.createElement(ReactDatePicker, _extends({
     inline: true,
@@ -1357,7 +1291,7 @@ var DatePicker = function DatePicker(_ref) {
   }, restProps), children);
 };
 
-var _excluded$w = ["label", "hideLabel", "children", "error", "id", "isRequired", "helpText", "isDisabled", "requiredIndicator", "width"];
+var _excluded$x = ["label", "hideLabel", "children", "error", "id", "isRequired", "helpText", "isDisabled", "requiredIndicator", "width"];
 var FormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var label = _ref.label,
     hideLabel = _ref.hideLabel,
@@ -1370,7 +1304,7 @@ var FormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     requiredIndicator = _ref.requiredIndicator,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100' : _ref$width,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   var labelProps = {
     inputId: id,
     helpText: helpText,
@@ -1398,7 +1332,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$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 _excluded$w = ["id", "label", "onChange", "value", "autoComplete", "autoFocus", "error", "helpText", "hideLabel", "inputProps", "isDisabled", "isRequired", "maxLength", "name", "onBlur", "onClear", "onFocus", "prefix", "placeholder", "requiredIndicator", "suffix", "size", "type"];
 var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref2;
   var id = _ref.id,
@@ -1442,7 +1376,7 @@ var TextInput = /*#__PURE__*/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$v);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   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];
@@ -1587,11 +1521,14 @@ var BREAKPOINTS = /*#__PURE__*/[].concat(Object.entries(designTokens.size.breakp
       minWidth: parseInt(data['value'], 10)
     };
   }
+  return undefined;
+}).filter(function (breakpoint) {
+  return breakpoint !== undefined;
 });
 var Z_INDEX_VALUES = designTokens.size['z-index'];
 // export const BOX_SHADOW_VALUES = designTokens.size['box-shadow'];
 
-var _excluded$u = ["className", "isOpen", "children", "content", "arrowColor", "contentContainerProps", "hasArrow", "offsetFromTarget", "onClickOutside", "placement", "withPortal", "portalTarget", "trapFocus"];
+var _excluded$v = ["className", "isOpen", "children", "content", "arrowColor", "contentContainerProps", "hasArrow", "offsetFromTarget", "onClickOutside", "placement", "withPortal", "portalTarget", "trapFocus"];
 var contentContainerDefaults = {
   background: 'primary',
   padding: 'sm',
@@ -1620,7 +1557,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$u);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var triggerRef = useRef(null);
   var popperRef = useRef(null);
   var _useState = useState(null),
@@ -1726,7 +1663,7 @@ var Popover = function Popover(_ref) {
   withPortal && portalTarget ? createPortal(renderPopperContent(), portalTarget) : renderPopperContent()));
 };
 
-var _excluded$t = ["datePickerProps", "textInputProps", "dateFormat", "dateOptions", "popoverProps"];
+var _excluded$u = ["datePickerProps", "textInputProps", "dateFormat", "dateOptions", "popoverProps"];
 var defaultDatePickerProps = {
   selected: null,
   selectsRange: false
@@ -1746,7 +1683,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$t);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var mergedDatePickerProps = _extends({}, defaultDatePickerProps, datePickerProps);
   var mergedPopoverProps = _extends({}, defaultPopoverProps, popoverProps);
   var mergedTextInputProps = _extends({}, defaultTextInputProps, textInputProps);
@@ -1823,14 +1760,14 @@ var DateInput = function DateInput(_ref) {
 var ENTER = 13;
 var SPACE = 32;
 
-var _excluded$s = ["children", "display", "isDetailsOpen", "onToggle"];
+var _excluded$t = ["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$s);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var handleClick = function handleClick(event) {
     // Needed to avoid default `details` behavior on a click event and keep this as controlled component.
     event.preventDefault();
@@ -1868,14 +1805,14 @@ var DetailsSummary = function DetailsSummary(_ref) {
 
 var styles$i = {"details-reset":"Details-module_details-reset__HWtSD"};
 
-var _excluded$r = ["children", "className", "display", "isOpen"];
+var _excluded$s = ["children", "className", "display", "isOpen"];
 var DetailsBaseComponent = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$display = _ref.display,
     display = _ref$display === void 0 ? 'block' : _ref$display,
     isOpen = _ref.isOpen,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var detailsClasses = classNames(className, styles$i['details-reset'], styles$i.details);
   return React__default.createElement(Box, _extends({
     as: "details",
@@ -1895,41 +1832,136 @@ var Details = /*#__PURE__*/function () {
 
 var styles$h = {"drawer":"Drawer-module_drawer__IKoOm","hide-overlay-right":"Drawer-module_hide-overlay-right__FANA9","hide-overlay-left":"Drawer-module_hide-overlay-left__xZFa3","hide-overlay-bottom":"Drawer-module_hide-overlay-bottom__11EB1","hide-overlay-top":"Drawer-module_hide-overlay-top__kEsV5","drawer-content":"Drawer-module_drawer-content__zZ9xR","left":"Drawer-module_left__pwTcW","right":"Drawer-module_right__EzGpI","bottom":"Drawer-module_bottom__r3Q5Z","top":"Drawer-module_top__xQejO"};
 
-var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var _excluded$r = ["defaultIsOpen", "open", "onOpenChange", "className", "children"],
+  _excluded2$2 = ["asChild", "onClick"],
+  _excluded3$2 = ["className"],
+  _excluded4$2 = ["className", "onClick", "onClose"],
+  _excluded5$2 = ["className"];
+var DrawerContext = /*#__PURE__*/createContext(null);
+function useDrawer() {
+  var context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error('useDrawer must be used within a DrawerProvider.');
+  }
+  return context;
+}
+var DrawerProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$defaultIsOpen = _ref.defaultIsOpen,
+    defaultIsOpen = _ref$defaultIsOpen === void 0 ? false : _ref$defaultIsOpen,
+    openProp = _ref.open,
+    setOpenProp = _ref.onOpenChange,
+    className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+  var _useState = useState(openProp != null ? openProp : defaultIsOpen),
+    _open = _useState[0],
+    _setOpen = _useState[1];
+  var open = openProp != null ? openProp : _open;
+  var setOpen = useCallback(function (value) {
+    var newOpen = typeof value === 'function' ? value(open) : value;
+    if (newOpen !== open) {
+      if (setOpenProp) {
+        setOpenProp(newOpen); // Controlled
+      } else {
+        _setOpen(newOpen); // Uncontrolled
+      }
+    }
+  }, [open, setOpenProp]);
+  var toggleDrawer = useCallback(function () {
+    setOpen(function (prev) {
+      return !prev;
+    });
+  }, [setOpen]);
+  var contextValue = useMemo(function () {
+    return {
+      open: open,
+      setOpen: setOpen,
+      toggleDrawer: toggleDrawer
+    };
+  }, [open, setOpen, toggleDrawer]);
+  return React__default.createElement(DrawerContext.Provider, {
+    value: contextValue
+  }, React__default.createElement("div", _extends({
+    className: classNames('drawer-container', {
+      'drawer-open': open
+    }, className),
+    ref: ref
+  }, props), children));
+});
+DrawerProvider.displayName = 'DrawerProvider';
+var DrawerTrigger = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
+  var _ref2$asChild = _ref2.asChild,
+    asChild = _ref2$asChild === void 0 ? false : _ref2$asChild,
+    onClick = _ref2.onClick,
+    triggerProps = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+  var context = useContext(DrawerContext);
+  var isStandalone = !context;
+  var handleClick = function handleClick(event) {
+    onClick == null || onClick(event);
+    if (!isStandalone) {
+      // Use context to toggle the drawer
+      context == null || context.toggleDrawer();
+    }
+  };
+  var Comp = asChild ? Slot : 'button';
+  return React__default.createElement(Comp, _extends({
+    ref: ref,
+    "data-drawer": "trigger",
+    "aria-haspopup": "dialog",
+    "aria-expanded": context == null ? void 0 : context.open,
+    "data-state": context == null ? void 0 : context.open,
+    "aria-label": "toggle drawer"
+  }, triggerProps, {
+    onClick: handleClick
+  }));
+});
+DrawerTrigger.displayName = 'SidebarTrigger';
+var Drawer = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var _dynamicStyle, _classNames, _classNames2;
-  var _ref$ariaLabel = _ref.ariaLabel,
-    ariaLabel = _ref$ariaLabel === void 0 ? undefined : _ref$ariaLabel,
-    _ref$ariaLabelledBy = _ref.ariaLabelledBy,
-    ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? undefined : _ref$ariaLabelledBy,
-    _ref$allowPinchZoom = _ref.allowPinchZoom,
-    allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? undefined : _ref$children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? undefined : _ref$className,
-    _ref$closeButton = _ref.closeButton,
-    closeButton = _ref$closeButton === void 0 ? false : _ref$closeButton,
-    _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
-    closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
-    _ref$containerRef = _ref.containerRef,
-    containerRef = _ref$containerRef === void 0 ? undefined : _ref$containerRef,
-    _ref$dangerouslyBypas = _ref.dangerouslyBypassFocusLock,
-    dangerouslyBypassFocusLock = _ref$dangerouslyBypas === void 0 ? false : _ref$dangerouslyBypas,
-    _ref$dangerouslyBypas2 = _ref.dangerouslyBypassScrollLock,
-    dangerouslyBypassScrollLock = _ref$dangerouslyBypas2 === void 0 ? false : _ref$dangerouslyBypas2,
-    _ref$hideOverlay = _ref.hideOverlay,
-    hideOverlay = _ref$hideOverlay === void 0 ? false : _ref$hideOverlay,
-    _ref$initialFocusRef = _ref.initialFocusRef,
-    initialFocusRef = _ref$initialFocusRef === void 0 ? undefined : _ref$initialFocusRef,
-    isOpen = _ref.isOpen,
-    _ref$onDismiss = _ref.onDismiss,
-    onDismiss = _ref$onDismiss === void 0 ? undefined : _ref$onDismiss,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'right' : _ref$placement,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? undefined : _ref$title,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? undefined : _ref$width;
+  var _ref3$ariaLabel = _ref3.ariaLabel,
+    ariaLabel = _ref3$ariaLabel === void 0 ? undefined : _ref3$ariaLabel,
+    _ref3$ariaLabelledBy = _ref3.ariaLabelledBy,
+    ariaLabelledBy = _ref3$ariaLabelledBy === void 0 ? undefined : _ref3$ariaLabelledBy,
+    _ref3$allowPinchZoom = _ref3.allowPinchZoom,
+    allowPinchZoom = _ref3$allowPinchZoom === void 0 ? false : _ref3$allowPinchZoom,
+    _ref3$children = _ref3.children,
+    children = _ref3$children === void 0 ? undefined : _ref3$children,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? undefined : _ref3$className,
+    _ref3$closeOnOverlayC = _ref3.closeOnOverlayClick,
+    closeOnOverlayClick = _ref3$closeOnOverlayC === void 0 ? true : _ref3$closeOnOverlayC,
+    _ref3$containerRef = _ref3.containerRef,
+    containerRef = _ref3$containerRef === void 0 ? undefined : _ref3$containerRef,
+    _ref3$dangerouslyBypa = _ref3.dangerouslyBypassFocusLock,
+    dangerouslyBypassFocusLock = _ref3$dangerouslyBypa === void 0 ? false : _ref3$dangerouslyBypa,
+    _ref3$dangerouslyBypa2 = _ref3.dangerouslyBypassScrollLock,
+    dangerouslyBypassScrollLock = _ref3$dangerouslyBypa2 === void 0 ? false : _ref3$dangerouslyBypa2,
+    _ref3$hideOverlay = _ref3.hideOverlay,
+    hideOverlay = _ref3$hideOverlay === void 0 ? false : _ref3$hideOverlay,
+    _ref3$initialFocusRef = _ref3.initialFocusRef,
+    initialFocusRef = _ref3$initialFocusRef === void 0 ? undefined : _ref3$initialFocusRef,
+    controlledIsOpen = _ref3.isOpen,
+    _ref3$defaultIsOpen = _ref3.defaultIsOpen,
+    defaultIsOpen = _ref3$defaultIsOpen === void 0 ? false : _ref3$defaultIsOpen,
+    _ref3$onDismiss = _ref3.onDismiss,
+    onDismiss = _ref3$onDismiss === void 0 ? undefined : _ref3$onDismiss,
+    _ref3$placement = _ref3.placement,
+    placement = _ref3$placement === void 0 ? 'right' : _ref3$placement,
+    _ref3$width = _ref3.width,
+    width = _ref3$width === void 0 ? undefined : _ref3$width;
+  var context = useContext(DrawerContext);
+  var isStandalone = !context; // Determine if there's no provider
+  var _useState2 = useState(defaultIsOpen),
+    uncontrolledOpen = _useState2[0],
+    setUncontrolledOpen = _useState2[1];
+  var isOpen = isStandalone ? controlledIsOpen != null ? controlledIsOpen : uncontrolledOpen // Use internal or prop-based state
+  : context.open; // Use context-provided state
+  var setOpen = isStandalone ? setUncontrolledOpen // Update internal state
+  : context.setOpen; // Update context state
+  var handleDismiss = useCallback(function (event) {
+    setOpen(false); // Update state (context or standalone)
+    onDismiss == null || onDismiss(event); // Trigger external callback
+  }, [setOpen, onDismiss]);
   var activateFocusLock = useCallback(function () {
     setTimeout(function () {
       if (initialFocusRef && initialFocusRef.current) {
@@ -1938,49 +1970,9 @@ var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, 100);
   }, [initialFocusRef]);
   var dynamicWidth = width;
-  var dynamicStyle = (_dynamicStyle = {}, _dynamicStyle['--w'] = dynamicWidth, _dynamicStyle);
+  var dynamicStyle = (_dynamicStyle = {}, _dynamicStyle['--drawer-width'] = dynamicWidth, _dynamicStyle);
   var overlayClassnames = classNames(styles$h.overlay, styles$h.drawer, (_classNames = {}, _classNames[styles$h['hide-overlay']] = hideOverlay, _classNames[styles$h["hide-overlay-" + placement]] = hideOverlay, _classNames['position-fixed'] = containerRef === undefined, _classNames['position-absolute'] = containerRef !== undefined, _classNames));
-  var contentClassnames = classNames(styles$h['drawer-content'], styles$h[placement], (_classNames2 = {}, _classNames2[styles$h['hide-overlay']] = hideOverlay, _classNames2['overflow-auto'] = !closeButton && !title, _classNames2.className = className, _classNames2));
-  var renderHeader = function renderHeader() {
-    if (closeButton && onDismiss && !title) {
-      return React__default.createElement(Box, {
-        alignItems: "flex-end",
-        justifyContent: "center",
-        padding: "md lg"
-      }, React__default.createElement(Button, {
-        variant: "tertiary",
-        onClick: onDismiss,
-        "aria-label": "close",
-        type: "button",
-        iconPrefix: "remove"
-      }));
-    }
-    if (title) {
-      return React__default.createElement(Box, {
-        direction: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: {
-          base: '2xl',
-          tablet: '4xl'
-        }
-      }, React__default.createElement(Box, {
-        className: styles$h.title,
-        fontWeight: "bold"
-      }, title), onDismiss && React__default.createElement(Button, {
-        variant: "tertiary",
-        onClick: onDismiss,
-        "aria-label": "close",
-        type: "button",
-        iconPrefix: "remove"
-      }));
-    }
-    return null;
-  };
-  var content = title || closeButton ? React__default.createElement(Box, {
-    flex: "auto",
-    overflow: "auto"
-  }, children) : children;
+  var contentClassnames = classNames(styles$h['drawer-content'], styles$h[placement], (_classNames2 = {}, _classNames2[styles$h['hide-overlay']] = hideOverlay, _classNames2));
   var parentElement = containerRef != null && containerRef.current ? containerRef.current : document.body;
   var isDisabledFocusLock = hideOverlay || dangerouslyBypassFocusLock;
   var isDisabledRemoveScroll = hideOverlay || dangerouslyBypassScrollLock;
@@ -1998,7 +1990,7 @@ var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isOpen: isOpen,
     overlayClassName: overlayClassnames,
     className: contentClassnames,
-    onRequestClose: closeOnOverlayClick ? onDismiss : undefined,
+    onRequestClose: closeOnOverlayClick ? handleDismiss : undefined,
     ariaHideApp: false,
     style: {
       content: dynamicStyle,
@@ -2010,8 +2002,78 @@ var Drawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, React__default.createElement(Box, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    height: "100%"
-  }, renderHeader(), content)))));
+    height: "100",
+    "data-testid": "drawer-content",
+    className: className
+  }, children)))));
+});
+var DrawerHeader = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
+  var props = _objectWithoutPropertiesLoose(_ref4, _excluded3$2);
+  return React__default.createElement(Box, _extends({
+    ref: ref,
+    "data-drawer": "header",
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: {
+      base: '2xl 2xl 0 2xl',
+      tablet: '3xl 3xl 0 3xl'
+    }
+  }, props));
+});
+DrawerHeader.displayName = 'DrawerHeader';
+var DrawerTitle = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
+  return React__default.createElement(Box, _extends({
+    ref: ref,
+    "data-drawer": "title",
+    fontWeight: "bold"
+  }, props));
+});
+var DrawerCloseButton = /*#__PURE__*/forwardRef(function (_ref6, ref) {
+  var className = _ref6.className,
+    onClick = _ref6.onClick,
+    onClose = _ref6.onClose,
+    rest = _objectWithoutPropertiesLoose(_ref6, _excluded4$2);
+  var context = useContext(DrawerContext);
+  var isStandalone = !context;
+  var handleClick = function handleClick(event) {
+    onClick == null || onClick(event);
+    if (isStandalone) {
+      // Fallback to onClose if provided
+      onClose == null || onClose();
+    } else {
+      // Use context to toggle the drawer
+      context == null || context.toggleDrawer();
+    }
+  };
+  return React__default.createElement(Button, _extends({
+    variant: "tertiary",
+    "aria-label": "close",
+    type: "button",
+    iconPrefix: "remove",
+    "data-drawer": "close",
+    className: classNames('m-left-auto', className),
+    size: "sm",
+    onClick: handleClick,
+    ref: ref
+  }, rest));
+});
+DrawerCloseButton.displayName = 'DrawerCloseButton';
+var DrawerContent = /*#__PURE__*/React__default.forwardRef(function (_ref7, ref) {
+  var props = _objectWithoutPropertiesLoose(_ref7, _excluded5$2);
+  return React__default.createElement(Box, _extends({
+    ref: ref,
+    "data-drawer": "content",
+    flex: "auto",
+    overflow: "auto",
+    alignItems: "flex-start",
+    padding: {
+      base: '2xl',
+      tablet: '3xl'
+    },
+    gap: "md"
+  }, props));
 });
 
 var _excluded$q = ["className", "inset"],
@@ -5257,5 +5319,5 @@ var useTheme = function useTheme() {
   return context;
 };
 
-export { Alert, Badge, Box, Button, Card, CardBaseComponent, Checkbox, CheckboxInput, Collapsible, CollapsibleContent, CollapsibleTrigger, DateInput, DatePicker, Details, DetailsBaseComponent, DetailsSummary, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormControl, FormLabel, FormikCheckboxInput, FormikRadioGroup, FormikSelectInput, FormikSelectInputInset, FormikSelectInputNative, FormikTextInput, FormikTextInputInset, FormikTextareaInput, FormikTextareaInputInset, FormikTimePicker, FormikTimePickerNative, FormikToggle, Heading, Icon, Modal, ModalBaseComponent, Pagination, Popover, RadioGroup, RangeInput, ResponsiveContext, ResponsiveProvider, SelectInput, SelectInputInset, SelectInputNative, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, Spinner, Table, TextInput, TextInputInset, TextareaInput, TextareaInputInset, ThemeProvider, ThemeProviderContext, TimePicker, TimePickerNative, ToastContainer, Toggle, boxPropsKeys, createRectRef, toast, useBreakpoint, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };
+export { Alert, Badge, Box, Button, Card, CardBaseComponent, Checkbox, CheckboxInput, Collapsible, CollapsibleContent, CollapsibleTrigger, DateInput, DatePicker, Details, DetailsBaseComponent, DetailsSummary, Drawer, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormControl, FormLabel, FormikCheckboxInput, FormikRadioGroup, FormikSelectInput, FormikSelectInputInset, FormikSelectInputNative, FormikTextInput, FormikTextInputInset, FormikTextareaInput, FormikTextareaInputInset, FormikTimePicker, FormikTimePickerNative, FormikToggle, Heading, Icon, Modal, ModalBaseComponent, Pagination, Popover, RadioGroup, RangeInput, ResponsiveContext, ResponsiveProvider, SelectInput, SelectInputInset, SelectInputNative, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, Spinner, Table, TextInput, TextInputInset, TextareaInput, TextareaInputInset, ThemeProvider, ThemeProviderContext, TimePicker, TimePickerNative, ToastContainer, Toggle, boxPropsKeys, createRectRef, toast, useBreakpoint, useDrawer, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };
 //# sourceMappingURL=hyphen-components.esm.js.map