@doist/reactist 24.2.0-beta → 25.0.0-beta.1

package/dist/reactist.cjs.development.js

@@ -111,7 +111,7 @@ function _objectWithoutProperties(source, excluded) {
  * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
  * value to be typed using `as PolymorphicComponent<…>`.
  *
- * @see PolymorphicComponent for details about what this type does
+ * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
  */
 
 function polymorphicComponent(render) {
@@ -201,9 +201,62 @@ var modules_89b7671c = {"minWidth-0":"_68ab48ca","minWidth-xsmall":"_6fa2b565","
 var modules_8b5c09cb = {"gap-none":"_64ed24f4","gap-xsmall":"_2580a74b","gap-small":"c68f8bf6","gap-medium":"_43e5f8e9","gap-large":"_966b120f","gap-xlarge":"f957894c","gap-xxlarge":"_8cca104b","tablet-gap-none":"_5797cee2","tablet-gap-xsmall":"_9015672f","tablet-gap-small":"_7ec86eec","tablet-gap-medium":"_714d7179","tablet-gap-large":"ae1deb59","tablet-gap-xlarge":"e1cfce55","tablet-gap-xxlarge":"_168a8ff8","desktop-gap-none":"_43e2b619","desktop-gap-xsmall":"_0ea9bf88","desktop-gap-small":"d451307a","desktop-gap-medium":"bf93cf66","desktop-gap-large":"_1430cddf","desktop-gap-xlarge":"fa00c93e","desktop-gap-xxlarge":"_6f3aee54"};
 
 const _excluded = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "gap", "alignItems", "justifyContent", "alignSelf", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
-const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
-  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
 
+function getBoxClassNames({
+  position = 'static',
+  display,
+  flexDirection = 'row',
+  flexWrap,
+  flexGrow,
+  flexShrink,
+  gap,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  overflow,
+  width,
+  height,
+  background,
+  border,
+  borderRadius,
+  minWidth,
+  maxWidth,
+  textAlign,
+  padding,
+  paddingY,
+  paddingX,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+  margin,
+  marginY,
+  marginX,
+  marginTop,
+  marginRight,
+  marginBottom,
+  marginLeft,
+  className
+}) {
+  var _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8;
+
+  const resolvedPaddingTop = (_ref = paddingTop != null ? paddingTop : paddingY) != null ? _ref : padding;
+  const resolvedPaddingRight = (_ref2 = paddingRight != null ? paddingRight : paddingX) != null ? _ref2 : padding;
+  const resolvedPaddingBottom = (_ref3 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref3 : padding;
+  const resolvedPaddingLeft = (_ref4 = paddingLeft != null ? paddingLeft : paddingX) != null ? _ref4 : padding;
+  const resolvedMarginTop = (_ref5 = marginTop != null ? marginTop : marginY) != null ? _ref5 : margin;
+  const resolvedMarginRight = (_ref6 = marginRight != null ? marginRight : marginX) != null ? _ref6 : margin;
+  const resolvedMarginBottom = (_ref7 = marginBottom != null ? marginBottom : marginY) != null ? _ref7 : margin;
+  const resolvedMarginLeft = (_ref8 = marginLeft != null ? marginLeft : marginX) != null ? _ref8 : margin;
+  const omitFlex = !display || typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
+  return classNames(className, modules_54d944f2.box, display ? getClassNames(modules_54d944f2, 'display', display) : null, position !== 'static' ? getClassNames(modules_54d944f2, 'position', position) : null, minWidth != null ? getClassNames(modules_89b7671c, 'minWidth', String(minWidth)) : null, getClassNames(modules_89b7671c, 'maxWidth', maxWidth), getClassNames(modules_54d944f2, 'textAlign', textAlign), // padding
+  getClassNames(modules_b537a8ee, 'paddingTop', resolvedPaddingTop), getClassNames(modules_b537a8ee, 'paddingRight', resolvedPaddingRight), getClassNames(modules_b537a8ee, 'paddingBottom', resolvedPaddingBottom), getClassNames(modules_b537a8ee, 'paddingLeft', resolvedPaddingLeft), // margin
+  getClassNames(modules_131405ac, 'marginTop', resolvedMarginTop), getClassNames(modules_131405ac, 'marginRight', resolvedMarginRight), getClassNames(modules_131405ac, 'marginBottom', resolvedMarginBottom), getClassNames(modules_131405ac, 'marginLeft', resolvedMarginLeft), // flex props
+  omitFlex ? null : getClassNames(modules_54d944f2, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(modules_54d944f2, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(modules_54d944f2, 'alignItems', alignItems), omitFlex ? null : getClassNames(modules_54d944f2, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(modules_54d944f2, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, gap ? getClassNames(modules_8b5c09cb, 'gap', gap) : null, // other props
+  getClassNames(modules_54d944f2, 'overflow', overflow), width != null ? getClassNames(modules_89b7671c, 'width', String(width)) : null, getClassNames(modules_54d944f2, 'height', height), getClassNames(modules_54d944f2, 'bg', background), borderRadius !== 'none' ? getClassNames(modules_54d944f2, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(modules_54d944f2, 'border', border) : null);
+}
+
+const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref9, ref) {
   let {
     as: component = 'div',
     position = 'static',
@@ -241,24 +294,46 @@ const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
     marginLeft,
     className,
     children
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  const resolvedPaddingTop = (_ref2 = paddingTop != null ? paddingTop : paddingY) != null ? _ref2 : padding;
-  const resolvedPaddingRight = (_ref3 = paddingRight != null ? paddingRight : paddingX) != null ? _ref3 : padding;
-  const resolvedPaddingBottom = (_ref4 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref4 : padding;
-  const resolvedPaddingLeft = (_ref5 = paddingLeft != null ? paddingLeft : paddingX) != null ? _ref5 : padding;
-  const resolvedMarginTop = (_ref6 = marginTop != null ? marginTop : marginY) != null ? _ref6 : margin;
-  const resolvedMarginRight = (_ref7 = marginRight != null ? marginRight : marginX) != null ? _ref7 : margin;
-  const resolvedMarginBottom = (_ref8 = marginBottom != null ? marginBottom : marginY) != null ? _ref8 : margin;
-  const resolvedMarginLeft = (_ref9 = marginLeft != null ? marginLeft : marginX) != null ? _ref9 : margin;
-  const omitFlex = !display || typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
+  } = _ref9,
+      props = _objectWithoutProperties(_ref9, _excluded);
+
   return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: classNames(className, modules_54d944f2.box, display ? getClassNames(modules_54d944f2, 'display', display) : null, position !== 'static' ? getClassNames(modules_54d944f2, 'position', position) : null, minWidth != null ? getClassNames(modules_89b7671c, 'minWidth', String(minWidth)) : null, getClassNames(modules_89b7671c, 'maxWidth', maxWidth), getClassNames(modules_54d944f2, 'textAlign', textAlign), // padding
-    getClassNames(modules_b537a8ee, 'paddingTop', resolvedPaddingTop), getClassNames(modules_b537a8ee, 'paddingRight', resolvedPaddingRight), getClassNames(modules_b537a8ee, 'paddingBottom', resolvedPaddingBottom), getClassNames(modules_b537a8ee, 'paddingLeft', resolvedPaddingLeft), // margin
-    getClassNames(modules_131405ac, 'marginTop', resolvedMarginTop), getClassNames(modules_131405ac, 'marginRight', resolvedMarginRight), getClassNames(modules_131405ac, 'marginBottom', resolvedMarginBottom), getClassNames(modules_131405ac, 'marginLeft', resolvedMarginLeft), // flex props
-    omitFlex ? null : getClassNames(modules_54d944f2, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(modules_54d944f2, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(modules_54d944f2, 'alignItems', alignItems), omitFlex ? null : getClassNames(modules_54d944f2, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(modules_54d944f2, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, gap ? getClassNames(modules_8b5c09cb, 'gap', gap) : null, // other props
-    getClassNames(modules_54d944f2, 'overflow', overflow), width != null ? getClassNames(modules_89b7671c, 'width', String(width)) : null, getClassNames(modules_54d944f2, 'height', height), getClassNames(modules_54d944f2, 'bg', background), borderRadius !== 'none' ? getClassNames(modules_54d944f2, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(modules_54d944f2, 'border', border) : null) || undefined,
+    className: getBoxClassNames({
+      position,
+      display,
+      flexDirection,
+      flexWrap,
+      flexGrow,
+      flexShrink,
+      gap,
+      alignItems,
+      justifyContent,
+      alignSelf,
+      overflow,
+      width,
+      height,
+      background,
+      border,
+      borderRadius,
+      minWidth,
+      maxWidth,
+      textAlign,
+      padding,
+      paddingY,
+      paddingX,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+      margin,
+      marginY,
+      marginX,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      className
+    }),
     ref
   }), children);
 });
@@ -448,6 +523,30 @@ const HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually
   }));
 });
 
+var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
+
+function Spinner({
+  size = 24
+}) {
+  return /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": true,
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    className: modules_c7f5018f.svg,
+    "data-chromatic": "ignore"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: modules_c7f5018f.tint,
+    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: modules_c7f5018f.fill,
+    d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
+  })));
+}
+
 var modules_95f1407a = {"tooltip":"_487c82cd"};
 
 function Tooltip({
@@ -478,145 +577,127 @@ function Tooltip({
     render: child,
     store: tooltip,
     ref: child.ref
-  }), isOpen && content ? /*#__PURE__*/React.createElement(Box, {
-    as: react.Tooltip,
-    gutter: gapSize,
+  }), isOpen && content ? /*#__PURE__*/React.createElement(react.Tooltip, {
     store: tooltip,
-    className: [modules_95f1407a.tooltip, exceptionallySetClassName],
-    background: "toast",
-    borderRadius: "standard",
-    paddingX: "small",
-    paddingY: "xsmall",
-    maxWidth: "medium",
-    width: "fitContent",
-    overflow: "hidden",
-    textAlign: "center"
+    gutter: gapSize,
+    render: /*#__PURE__*/React.createElement(Box, {
+      className: [modules_95f1407a.tooltip, exceptionallySetClassName],
+      background: "toast",
+      borderRadius: "standard",
+      paddingX: "small",
+      paddingY: "xsmall",
+      maxWidth: "medium",
+      width: "fitContent",
+      overflow: "hidden",
+      textAlign: "center"
+    })
   }, withArrow ? /*#__PURE__*/React.createElement(react.TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
 }
 
-var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
-
-function Spinner({
-  size = 24
-}) {
-  return /*#__PURE__*/React.createElement("svg", {
-    "aria-hidden": true,
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    className: modules_c7f5018f.svg,
-    "data-chromatic": "ignore"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React.createElement("path", {
-    className: modules_c7f5018f.tint,
-    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: modules_c7f5018f.fill,
-    d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
-  })));
-}
-
-var modules_b9569bce = {"baseButton":"_8313bd46","label":"_0051d171","shape-rounded":"_8eb8f0fa","size-small":"_8b7f1a82","size-normal":"_5e45d59f","size-large":"_95951888","disabled":"_43792df1","iconButton":"_8644eccb","startIcon":"a44d4350","endIcon":"_073e1aa4","variant-primary":"_7a4dbd5f","variant-secondary":"_54d56775","variant-tertiary":"_907a61ca","variant-quaternary":"f169a390","tone-destructive":"ccb3eb8c"};
+var modules_5357ebb8 = {"baseButton":"_3930afa0","label":"_90654824","shape-rounded":"c05d17c2","size-small":"_1e29d236","size-normal":"_7246d092","size-large":"_2d084671","disabled":"_2b0b9d95","iconButton":"abd5766f","startIcon":"_380e7c73","endIcon":"_20fe4105","variant-primary":"_7ea1378e","variant-secondary":"_64ee8afd","variant-tertiary":"_650176bf","variant-quaternary":"aa19cb97","tone-destructive":"_7a2d9a8c"};
 
-const _excluded$6 = ["as", "variant", "tone", "size", "shape", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon", "width", "align"];
+const _excluded$6 = ["variant", "tone", "size", "shape", "type", "disabled", "loading", "tooltip", "render", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "width", "align"],
+      _excluded2$1 = ["variant", "tone", "size", "shape", "type", "disabled", "loading", "tooltip", "render", "onClick", "exceptionallySetClassName", "children", "icon"];
 
 function preventDefault(event) {
   event.preventDefault();
 }
 /**
- * The component that powers `Button` and `ButtonLink`, where the button styling logic and some
- * common functionality resides. This component is internal to Reactist.
- *
- * @see Button
- * @see ButtonLink
+ * A button element that displays a text label and optionally a start or end icon. It follows the
+ * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
  */
 
 
-const BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref) {
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   let {
-    as = 'div',
     variant,
     tone = 'normal',
     size = 'normal',
     shape = 'normal',
+    type = 'button',
     disabled = false,
     loading = false,
     tooltip,
+    render,
     onClick,
     exceptionallySetClassName,
     children,
     startIcon,
     endIcon,
-    icon,
     width = 'auto',
     align = 'center'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$6);
 
   const isDisabled = loading || disabled;
-  const buttonElement = /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
+  const buttonElement = /*#__PURE__*/React.createElement(react.Role.button, _objectSpread2(_objectSpread2({}, props), {}, {
+    render: render,
+    type: render != null ? undefined : type,
     ref: ref,
     "aria-disabled": isDisabled,
     onClick: isDisabled ? preventDefault : onClick,
-    width: icon ? undefined : width,
-    className: [exceptionallySetClassName, modules_b9569bce.baseButton, modules_b9569bce["variant-" + variant], modules_b9569bce["tone-" + tone], modules_b9569bce["size-" + size], shape === 'rounded' ? modules_b9569bce['shape-rounded'] : null, icon ? modules_b9569bce.iconButton : null, disabled ? modules_b9569bce.disabled : null]
-  }), icon ? loading && /*#__PURE__*/React.createElement(Spinner, null) || icon : /*#__PURE__*/React.createElement(React.Fragment, null, startIcon ? /*#__PURE__*/React.createElement(Box, {
+    className: classNames([getBoxClassNames({
+      width
+    }), exceptionallySetClassName, modules_5357ebb8.baseButton, modules_5357ebb8["variant-" + variant], modules_5357ebb8["tone-" + tone], modules_5357ebb8["size-" + size], shape === 'rounded' ? modules_5357ebb8['shape-rounded'] : null, disabled ? modules_5357ebb8.disabled : null])
+  }), /*#__PURE__*/React.createElement(React.Fragment, null, startIcon ? /*#__PURE__*/React.createElement(Box, {
     display: "flex",
-    className: modules_b9569bce.startIcon,
+    className: modules_5357ebb8.startIcon,
     "aria-hidden": true
   }, loading && !endIcon ? /*#__PURE__*/React.createElement(Spinner, null) : startIcon) : null, children ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    className: modules_b9569bce.label,
+    className: modules_5357ebb8.label,
     overflow: "hidden",
     width: width === 'full' ? 'full' : undefined,
     textAlign: width === 'auto' ? 'center' : align
   }, children) : null, endIcon || loading && !startIcon ? /*#__PURE__*/React.createElement(Box, {
     display: "flex",
-    className: modules_b9569bce.endIcon,
+    className: modules_5357ebb8.endIcon,
     "aria-hidden": true
-  }, loading ? /*#__PURE__*/React.createElement(Spinner, null) : endIcon) : null)); // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided
-
-  const tooltipContent = icon && tooltip === undefined ? props['aria-label'] : tooltip;
-  return tooltipContent ? /*#__PURE__*/React.createElement(Tooltip, {
-    content: tooltipContent
+  }, loading ? /*#__PURE__*/React.createElement(Spinner, null) : endIcon) : null));
+  return tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: tooltip
   }, buttonElement) : buttonElement;
 });
-
-const _excluded$7 = ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"];
 /**
- * A semantic button that also looks like a button, and provides all the necessary visual variants.
- * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
- *
- * @see ButtonLink
+ * A button element that displays an icon only, visually, though it is semantically labelled. It
+ * also makes sure to always show a tooltip with its label. It follows the
+ * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
  */
 
-const Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref2, ref) {
   let {
     variant,
     tone = 'normal',
     size = 'normal',
+    shape = 'normal',
     type = 'button',
     disabled = false,
-    exceptionallySetClassName
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+    loading = false,
+    tooltip,
+    render,
+    onClick,
+    exceptionallySetClassName,
+    children,
+    icon
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2$1);
 
-  return /*#__PURE__*/React.createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: "button",
+  const isDisabled = loading || disabled;
+  const buttonElement = /*#__PURE__*/React.createElement(react.Role.button, _objectSpread2(_objectSpread2({}, props), {}, {
+    render: render,
+    type: render != null ? undefined : type,
     ref: ref,
-    variant: variant,
-    tone: tone,
-    size: size,
-    type: type,
-    disabled: disabled,
-    exceptionallySetClassName: exceptionallySetClassName
-  }));
+    "aria-disabled": isDisabled,
+    onClick: isDisabled ? preventDefault : onClick,
+    className: classNames([exceptionallySetClassName, modules_5357ebb8.baseButton, modules_5357ebb8["variant-" + variant], modules_5357ebb8["tone-" + tone], modules_5357ebb8["size-" + size], shape === 'rounded' ? modules_5357ebb8['shape-rounded'] : null, modules_5357ebb8.iconButton, disabled ? modules_5357ebb8.disabled : null])
+  }), loading && /*#__PURE__*/React.createElement(Spinner, null) || icon);
+  const tooltipContent = tooltip === undefined ? props['aria-label'] : tooltip;
+  return tooltipContent ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: tooltipContent
+  }, buttonElement) : buttonElement;
 });
 
-const _excluded$8 = ["tone"];
+const _excluded$7 = ["tone"];
 const alertIconForTone = {
   info: AlertInfoIcon,
   positive: AlertPositiveIcon,
@@ -628,7 +709,7 @@ function AlertIcon(_ref) {
   let {
     tone
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
   const Icon = alertIconForTone[tone];
   return Icon ? /*#__PURE__*/React.createElement(Icon, _objectSpread2({}, props)) : null;
@@ -764,7 +845,7 @@ function useId(providedId) {
 
 var modules_afa80466 = {"banner":"c1dffd60","banner-info":"_9d552538","banner-promotion":"d797752e","title":"_8cd610da","title-without-description":"_78ea5373","title-info":"_319c73fa","title-promotion":"fc84253f","description":"af4bd758","description-info":"b95a8c07","description-promotion":"_3c33f615"};
 
-const _excluded$9 = ["id", "tone", "icon", "title", "description", "action"];
+const _excluded$8 = ["id", "tone", "icon", "title", "description", "action"];
 const Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
   let {
     id,
@@ -774,7 +855,7 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
     description,
     action
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   const titleId = useId();
   const descriptionId = useId();
@@ -816,7 +897,7 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
   }, action) : null));
 });
 
-const _excluded$a = ["size", "exceptionallySetClassName"];
+const _excluded$9 = ["size", "exceptionallySetClassName"];
 const sizeMapping = {
   xsmall: 16,
   small: 24,
@@ -831,7 +912,7 @@ function Loading(_ref) {
     size = 'small',
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
   const numericSize = (_sizeMapping$size = sizeMapping[size]) != null ? _sizeMapping$size : sizeMapping.small;
   const ariaLabel = props['aria-label'] ? props['aria-label'] : !props['aria-labelledby'] ? 'Loading…' : undefined;
@@ -874,7 +955,7 @@ function Notice({
 
 var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
 
-const _excluded$b = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
+const _excluded$a = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
 const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
   let {
     as,
@@ -886,7 +967,7 @@ const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
     lineClamp,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   const lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp != null ? lineClamp : 1) > 1;
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -902,7 +983,7 @@ const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
 
 var modules_d11e18f0 = {"stackedToastsView":"_616cc3f3","toastContainer":"_1b5f8e86","slot":"ce2e3476"};
 
-const _excluded$c = ["message", "description", "icon", "action", "onDismiss", "dismissLabel"];
+const _excluded$b = ["message", "description", "icon", "action", "onDismiss", "dismissLabel"];
 /**
  * A toast that shows a message, and an optional action associated with it.
  *
@@ -927,7 +1008,7 @@ const StaticToast = /*#__PURE__*/React__default.forwardRef(function Toast(_ref,
     onDismiss,
     dismissLabel = 'Close'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   return /*#__PURE__*/React__default.createElement(Box, _objectSpread2({
     ref: ref,
@@ -951,7 +1032,7 @@ const StaticToast = /*#__PURE__*/React__default.forwardRef(function Toast(_ref,
     variant: "tertiary",
     size: "small",
     onClick: action.onClick
-  }, action.label) : action) : null, onDismiss ? /*#__PURE__*/React__default.createElement(ToastContentSlot, null, /*#__PURE__*/React__default.createElement(Button, {
+  }, action.label) : action) : null, onDismiss ? /*#__PURE__*/React__default.createElement(ToastContentSlot, null, /*#__PURE__*/React__default.createElement(IconButton, {
     variant: "quaternary",
     size: "small",
     onClick: onDismiss,
@@ -1148,7 +1229,7 @@ function useToastsAnimation() {
   };
 }
 
-const _excluded$d = ["toastId"];
+const _excluded$c = ["toastId"];
 /** @private */
 
 const InternalToast = /*#__PURE__*/React__default.forwardRef(function InternalToast({
@@ -1279,7 +1360,7 @@ function ToastsProvider({
     let {
       toastId
     } = _ref,
-        props = _objectWithoutProperties(_ref, _excluded$d);
+        props = _objectWithoutProperties(_ref, _excluded$c);
 
     return /*#__PURE__*/React__default.createElement(InternalToast, _objectSpread2({
       key: toastId,
@@ -1355,7 +1436,7 @@ function Toast(props) {
 
 var modules_949d2ff4 = {"heading":"bff24867","weight-medium":"_9b540c61","weight-light":"c6729907","tone-secondary":"d6507f70","tone-danger":"d1846d93","size-largest":"_7cbdd1ba","size-larger":"b3e14969","size-smaller":"be14a265","lineClampMultipleLines":"_71391f13","lineClamp-1":"_97298b1b","lineClamp-2":"_6d357d76","lineClamp-3":"d820b451","lineClamp-4":"_8d37487d","lineClamp-5":"_5215b4d7"};
 
-const _excluded$e = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
+const _excluded$d = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
 const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
   let {
     level,
@@ -1367,7 +1448,7 @@ const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
     align,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   // In TypeScript v4.1, this would be properly recognized without needing the type assertion
   // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
@@ -1386,7 +1467,7 @@ const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
 
 var modules_8ebe6db0 = {"prose":"_560c1e08","darkModeTypography":"_8b53b13e"};
 
-const _excluded$f = ["darkModeTypography", "exceptionallySetClassName"];
+const _excluded$e = ["darkModeTypography", "exceptionallySetClassName"];
 /**
  * Used to style HTML you don’t control, like HTML content generated from Markdown.
  */
@@ -1396,54 +1477,23 @@ function Prose(_ref) {
     darkModeTypography,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     className: [modules_8ebe6db0.prose, darkModeTypography ? modules_8ebe6db0.darkModeTypography : null, exceptionallySetClassName]
   }));
 }
 
-const _excluded$g = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
-/**
- * A semantic link that looks like a button, exactly matching the `Button` component in all visual
- * aspects.
- *
- * @see Button
- */
-
-const ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref) {
-  let {
-    as = 'a',
-    variant,
-    tone = 'normal',
-    size = 'normal',
-    exceptionallySetClassName,
-    openInNewTab = false
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
-
-  return /*#__PURE__*/React.createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
-    ref: ref,
-    variant: variant,
-    tone: tone,
-    size: size,
-    exceptionallySetClassName: exceptionallySetClassName,
-    target: openInNewTab ? '_blank' : undefined,
-    rel: openInNewTab ? 'noopener noreferrer' : undefined
-  }));
-});
-
 var modules_3d05deee = {"container":"fdc181b3"};
 
-const _excluded$h = ["as", "openInNewTab", "exceptionallySetClassName"];
+const _excluded$f = ["as", "openInNewTab", "exceptionallySetClassName"];
 const TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
   let {
     as = 'a',
     openInNewTab = false,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$h);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
@@ -1455,7 +1505,7 @@ const TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref)
   }));
 });
 
-const _excluded$i = ["checked", "indeterminate", "disabled"];
+const _excluded$g = ["checked", "indeterminate", "disabled"];
 const svgPath = {
   checked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
   unchecked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',
@@ -1494,7 +1544,7 @@ function CheckboxIcon(_ref) {
     indeterminate,
     disabled
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$g);
 
   const pathKey = getPathKey({
     checked,
@@ -1546,7 +1596,7 @@ function useForkRef(...refs) {
   refs);
 }
 
-const _excluded$j = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
+const _excluded$h = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
 const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
@@ -1558,7 +1608,7 @@ const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref,
     defaultChecked,
     onChange
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   const isControlledComponent = typeof props.checked === 'boolean';
 
@@ -1771,7 +1821,7 @@ function BaseField({
 
 var modules_aaf25250 = {"inputWrapper":"dea25485","bordered":"_80b6b376","error":"_1a32867a","slot":"dbbd207e"};
 
-const _excluded$k = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startSlot", "endSlot"];
+const _excluded$i = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startSlot", "endSlot"];
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   let {
     variant = 'default',
@@ -1789,7 +1839,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     startSlot,
     endSlot
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$k);
+      props = _objectWithoutProperties(_ref, _excluded$i);
 
   const internalRef = React.useRef(null);
   const combinedRef = useCallbackRef.useMergeRefs([ref, internalRef]);
@@ -1834,12 +1884,12 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   }, endSlot) : null));
 });
 
-const _excluded$l = ["togglePasswordLabel"];
+const _excluded$j = ["togglePasswordLabel"];
 const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
   let {
     togglePasswordLabel = 'Toggle password visibility'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$j);
 
   const [isPasswordVisible, setPasswordVisible] = React.useState(false);
   const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon;
@@ -1847,7 +1897,7 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
     ref: ref,
     // @ts-expect-error TextField does not support type="password", so we override the type check here
     type: isPasswordVisible ? 'text' : 'password',
-    endSlot: /*#__PURE__*/React.createElement(Button, {
+    endSlot: /*#__PURE__*/React.createElement(IconButton, {
       variant: "quaternary",
       icon: /*#__PURE__*/React.createElement(Icon, {
         "aria-hidden": true
@@ -1860,7 +1910,7 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
 
 var modules_1fa9b208 = {"selectWrapper":"b930bb07","bordered":"e1f620b6","error":"_7e87474e"};
 
-const _excluded$m = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
+const _excluded$k = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
 const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   let {
     variant = 'default',
@@ -1876,7 +1926,7 @@ const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref
     hidden,
     'aria-describedby': ariaDescribedBy
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     variant: variant,
@@ -1914,7 +1964,7 @@ function SelectChevron(props) {
 
 var modules_8e05f7c9 = {"container":"bae487be","disabled":"_408d32a0","checked":"_99b0ead7","toggle":"_5af09fb5","label":"a66e1846","handle":"_0dcf70ec","keyFocused":"_1f5e7fd4"};
 
-const _excluded$n = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
+const _excluded$l = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
 const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
@@ -1930,7 +1980,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
     'aria-labelledby': originalAriaLabelledby,
     onChange
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$n);
+      props = _objectWithoutProperties(_ref, _excluded$l);
 
   const id = useId(originalId);
   const hintId = useId();
@@ -1990,7 +2040,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
 
 var modules_2728c236 = {"textAreaContainer":"_55ccf266","innerContainer":"_89bb7098","bordered":"_02a47358","error":"_704ff540","autoExpand":"_145ca8f0"};
 
-const _excluded$o = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
+const _excluded$m = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   let {
     variant = 'default',
@@ -2007,7 +2057,7 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
     rows,
     autoExpand = false
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$o);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   const containerRef = React.useRef(null);
   const internalRef = React.useRef(null);
@@ -2090,7 +2140,7 @@ function emailToIndex(email, maxIndex) {
 
 var modules_08f3eeac = {"avatar":"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
 
-const _excluded$p = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
+const _excluded$n = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
 const AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
 
 function Avatar(_ref) {
@@ -2102,7 +2152,7 @@ function Avatar(_ref) {
     colorList = AVATAR_COLORS,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$p);
+      props = _objectWithoutProperties(_ref, _excluded$n);
 
   const userInitials = getInitials(user.name) || getInitials(user.email);
   const avatarSize = size ? size : 'l';
@@ -2124,14 +2174,14 @@ Avatar.displayName = 'Avatar';
 
 var modules_33c7c985 = {"badge":"c6ba5977","badge-info":"cf731337","badge-positive":"_7cfc5738","badge-promote":"_63691069","badge-attention":"_28ffb572","badge-warning":"_89e77f92"};
 
-const _excluded$q = ["tone", "label"];
+const _excluded$o = ["tone", "label"];
 
 function Badge(_ref) {
   let {
     tone,
     label
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$q);
+      props = _objectWithoutProperties(_ref, _excluded$o);
 
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: "span" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)
@@ -2143,8 +2193,8 @@ function Badge(_ref) {
 
 var modules_8f59d13b = {"overlay":"_8aa86dd3","fadein":"_20c07ee6","fitContent":"_713bc08f","container":"_45139719","full":"ec8619a2","large":"_86a1d5a4","medium":"_11d61de3","small":"aee19643","xlarge":"fe449c81","expand":"_61ffb38f","buttonContainer":"_49ffdac0","headerContent":"ee92ccb3"};
 
-const _excluded$r = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown"],
-      _excluded2$1 = ["children", "button", "withDivider", "exceptionallySetClassName"],
+const _excluded$p = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown", "className"],
+      _excluded2$2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
       _excluded5 = ["children"];
@@ -2180,9 +2230,11 @@ function Modal(_ref) {
     hideOnInteractOutside = true,
     children,
     portalElement,
-    onKeyDown
+    onKeyDown,
+    // @ts-expect-error we want to make sure to not pass it to the Dialog component
+    className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$r);
+      props = _objectWithoutProperties(_ref, _excluded$p);
 
   const setOpen = React.useCallback(visible => {
     if (!visible) {
@@ -2240,9 +2292,8 @@ function Modal(_ref) {
     className: classNames(modules_8f59d13b.overlay, modules_8f59d13b[height], modules_8f59d13b[width], exceptionallySetOverlayClassName),
 
     /**
-     * We're using `onPointerDown` instead of `onClick` to prevent
-     * the modal from closing when the click starts inside the modal
-     * and ends on the backdrop.
+     * We're using `onPointerDown` instead of `onClick` to prevent the modal from
+     * closing when the click starts inside the modal and ends on the backdrop.
      */
     onPointerDown: hideOnInteractOutside ? handleBackdropClick : undefined,
     ref: backdropRef
@@ -2252,17 +2303,18 @@ function Modal(_ref) {
     returnFocus: true
   }, /*#__PURE__*/React.createElement(react.Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: dialogRef,
-    as: Box,
+    render: /*#__PURE__*/React.createElement(Box, {
+      borderRadius: "full",
+      background: "default",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      height: height === 'expand' ? 'full' : undefined,
+      flexGrow: height === 'expand' ? 1 : 0
+    }),
+    className: classNames(exceptionallySetClassName, modules_8f59d13b.container),
     store: store,
     preventBodyScroll: true,
-    borderRadius: "full",
-    background: "default",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    height: height === 'expand' ? 'full' : undefined,
-    flexGrow: height === 'expand' ? 1 : 0,
-    className: [exceptionallySetClassName, modules_8f59d13b.container],
     // Disable focus lock as we set up our own using ReactFocusLock
     modal: false,
     autoFocus: false,
@@ -2298,7 +2350,7 @@ function ModalCloseButton(props) {
       setIsMounted(true);
     }
   }, [isMounted]);
-  return /*#__PURE__*/React.createElement(Button, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(IconButton, _objectSpread2(_objectSpread2({}, props), {}, {
     variant: "quaternary",
     onClick: onDismiss,
     icon: /*#__PURE__*/React.createElement(CloseIcon, null),
@@ -2320,7 +2372,7 @@ function ModalHeader(_ref2) {
     withDivider = false,
     exceptionallySetClassName
   } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$1);
+      props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: "header",
@@ -2418,9 +2470,8 @@ function ModalActions(_ref5) {
 
 var modules_40c67f5b = {"tab":"e96bf360","track":"_430e252d","tab-neutral":"f631ccbe","tab-themed":"_6ba96acc","track-neutral":"ef4cd8d3","track-themed":"_344b3b10"};
 
-const _excluded$s = ["as", "children", "id", "exceptionallySetClassName"],
-      _excluded2$2 = ["children", "space"],
-      _excluded3$1 = ["children", "id", "as", "render"];
+const _excluded$q = ["children", "space"],
+      _excluded2$3 = ["children", "id", "renderMode"];
 const TabsContext = /*#__PURE__*/React.createContext(null);
 /**
  * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
@@ -2457,15 +2508,12 @@ function Tabs({
  */
 
 
-const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref2, ref) {
-  let {
-    as,
-    children,
-    id,
-    exceptionallySetClassName
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded$s);
-
+const Tab = /*#__PURE__*/React.forwardRef(function Tab({
+  children,
+  id,
+  exceptionallySetClassName,
+  render
+}, ref) {
   const tabContextValue = React.useContext(TabsContext);
   if (!tabContextValue) return null;
   const {
@@ -2473,24 +2521,24 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref2, ref) {
     tabStore
   } = tabContextValue;
   const className = classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]);
-  return /*#__PURE__*/React.createElement(react.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
+  return /*#__PURE__*/React.createElement(react.Tab, {
+    render: render,
     className: className,
     id: id,
     store: tabStore,
     ref: ref
-  }), children);
+  }, children);
 });
 /**
  * A component used to group `<Tab>` elements together.
  */
 
-function TabList(_ref3) {
+function TabList(_ref2) {
   let {
     children,
     space
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded2$2);
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded$q);
 
   const tabContextValue = React.useContext(TabsContext);
 
@@ -2504,13 +2552,14 @@ function TabList(_ref3) {
   } = tabContextValue;
   return (
     /*#__PURE__*/
-    // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container
+    // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container
     // which will render the track with the wrong height
-    React.createElement(Box, null, /*#__PURE__*/React.createElement(react.TabList, _objectSpread2({
+    React.createElement("div", null, /*#__PURE__*/React.createElement(react.TabList, _objectSpread2({
       store: tabStore,
-      as: Box,
-      position: "relative",
-      width: "maxContent"
+      render: /*#__PURE__*/React.createElement(Box, {
+        position: "relative",
+        width: "maxContent"
+      })
     }, props), /*#__PURE__*/React.createElement(Box, {
       className: [modules_40c67f5b.track, modules_40c67f5b["track-" + variant]]
     }), /*#__PURE__*/React.createElement(Inline, {
@@ -2524,14 +2573,13 @@ function TabList(_ref3) {
  */
 
 
-const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
+const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(_ref3, ref) {
   let {
     children,
     id,
-    as,
-    render = 'always'
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded3$1);
+    renderMode = 'always'
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2$3);
 
   const tabContextValue = React.useContext(TabsContext);
   const [tabRendered, setTabRendered] = React.useState(false);
@@ -2550,11 +2598,10 @@ const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref)
   const {
     tabStore
   } = tabContextValue;
-  const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
+  const shouldRender = renderMode === 'always' || renderMode === 'active' && tabIsActive || renderMode === 'lazy' && (tabIsActive || tabRendered);
   return shouldRender ? /*#__PURE__*/React.createElement(react.TabPanel, _objectSpread2(_objectSpread2({}, props), {}, {
     tabId: id,
     store: tabStore,
-    as: as,
     ref: ref
   }), children) : null;
 });
@@ -2573,18 +2620,18 @@ function TabAwareSlot({
   }) : null;
 }
 
-const _excluded$t = ["children", "onItemSelect"],
-      _excluded2$3 = ["exceptionallySetClassName"],
-      _excluded3$2 = ["as"],
+const _excluded$r = ["children", "onItemSelect"],
+      _excluded2$4 = ["exceptionallySetClassName"],
+      _excluded3$1 = ["render"],
       _excluded4$1 = ["exceptionallySetClassName", "modal"],
-      _excluded5$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
+      _excluded5$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"],
       _excluded6 = ["label", "children", "exceptionallySetClassName"];
-const MenuContext = /*#__PURE__*/React.createContext( // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
-// (it is normally obtained by calling useMenuState but we can't call hooks outside components).
-// This is however of little consequence since this value is only used if some of the components
-// are used outside Menu, something that should not happen and we do not support.
-// @ts-expect-error
-{});
+const MenuContext = /*#__PURE__*/React.createContext({
+  menuStore: null,
+  handleItemSelect: () => undefined,
+  getAnchorRect: null,
+  setAnchorRect: () => undefined
+});
 /**
  * Wrapper component to control a menu. It does not render anything, only providing the state
  * management for the menu components inside it.
@@ -2595,7 +2642,7 @@ function Menu(_ref) {
     children,
     onItemSelect
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$t);
+      props = _objectWithoutProperties(_ref, _excluded$r);
 
   const [anchorRect, setAnchorRect] = React.useState(null);
   const getAnchorRect = React.useMemo(() => anchorRect ? () => anchorRect : null, [anchorRect]);
@@ -2617,34 +2664,41 @@ function Menu(_ref) {
  */
 
 
-const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
+const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref2, ref) {
   let {
     exceptionallySetClassName
   } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$3);
+      props = _objectWithoutProperties(_ref2, _excluded2$4);
 
   const {
     menuStore
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuButton must be wrapped in <Menu/>');
+  }
+
   return /*#__PURE__*/React.createElement(react.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
     store: menuStore,
     ref: ref,
     className: classNames('reactist_menubutton', exceptionallySetClassName)
   }));
-}); //
-// ContextMenuTrigger
-//
-
-const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref3, ref) {
+});
+const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function ContextMenuTrigger(_ref3, ref) {
   let {
-    as: component = 'div'
+    render
   } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3$2);
+      props = _objectWithoutProperties(_ref3, _excluded3$1);
 
   const {
     setAnchorRect,
     menuStore
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('ContextMenuTrigger must be wrapped in <Menu/>');
+  }
+
   const handleContextMenu = React.useCallback(function handleContextMenu(event) {
     event.preventDefault();
     setAnchorRect({
@@ -2657,16 +2711,17 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
   React.useEffect(() => {
     if (!isOpen) setAnchorRect(null);
   }, [isOpen, setAnchorRect]);
-  return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(react.Role.div, _objectSpread2(_objectSpread2({}, props), {}, {
     onContextMenu: handleContextMenu,
-    ref
+    ref: ref,
+    render: render
   }));
 });
 /**
  * The dropdown menu itself, containing a list of menu items.
  */
 
-const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
+const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(_ref4, ref) {
   let {
     exceptionallySetClassName,
     modal = true
@@ -2677,6 +2732,11 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
     menuStore,
     getAnchorRect
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuList must be wrapped in <Menu/>');
+  }
+
   const isOpen = menuStore.useState('open');
   return isOpen ? /*#__PURE__*/React.createElement(react.Portal, {
     preserveTabOrder: true
@@ -2695,15 +2755,14 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
  * callback.
  */
 
-const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
+const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref5, ref) {
   let {
     value,
     children,
     onSelect,
     hideOnSelect = true,
     onClick,
-    exceptionallySetClassName,
-    as = 'button'
+    exceptionallySetClassName
   } = _ref5,
       props = _objectWithoutProperties(_ref5, _excluded5$1);
 
@@ -2711,6 +2770,11 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
     handleItemSelect,
     menuStore
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuItem must be wrapped in <Menu/>');
+  }
+
   const {
     hide
   } = menuStore;
@@ -2722,7 +2786,6 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
     if (shouldClose) hide();
   }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
   return /*#__PURE__*/React.createElement(react.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
     store: menuStore,
     ref: ref,
     onClick: handleClick,
@@ -2760,6 +2823,11 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
     handleItemSelect: parentMenuItemSelect,
     menuStore
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('SubMenu must be wrapped in <Menu/>');
+  }
+
   const {
     hide: parentMenuHide
   } = menuStore;
@@ -2768,19 +2836,16 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
     parentMenuItemSelect == null ? void 0 : parentMenuItemSelect(value);
     parentMenuHide();
   }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
-  const [button, list] = React.Children.toArray(children); // Ariakit needs to be able to pass props to the MenuButton and combine it with the MenuItem component
-
-  const renderMenuButton = React.useCallback(function renderMenuButton(props) {
-    return /*#__PURE__*/React.cloneElement(button, props);
-  }, [button]);
+  const [button, list] = React.Children.toArray(children);
+  const buttonElement = button;
   return /*#__PURE__*/React.createElement(Menu, {
     onItemSelect: handleSubItemSelect
   }, /*#__PURE__*/React.createElement(react.MenuItem, {
-    as: "div",
     store: menuStore,
     ref: ref,
-    hideOnClick: false
-  }, renderMenuButton), list);
+    hideOnClick: false,
+    render: buttonElement
+  }, buttonElement.props.children), list);
 });
 /**
  * A way to semantically group some menu items.
@@ -2789,7 +2854,7 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
  * before and/or after the group if you so wish.
  */
 
-const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, ref) {
+const MenuGroup = /*#__PURE__*/React.forwardRef(function MenuGroup(_ref6, ref) {
   let {
     label,
     children,
@@ -2800,6 +2865,11 @@ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, re
   const {
     menuStore
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuGroup must be wrapped in <Menu/>');
+  }
+
   return /*#__PURE__*/React.createElement(react.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     store: menuStore,
@@ -2810,7 +2880,7 @@ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, re
   }, label) : null, children);
 });
 
-const _excluded$u = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
+const _excluded$s = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
 /**
  * @deprecated
  */
@@ -2826,7 +2896,7 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
     onClick,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$u);
+      props = _objectWithoutProperties(_ref, _excluded$s);
 
   const className = classNames('reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null, {
     'reactist_button--loading': loading
@@ -2849,7 +2919,7 @@ Button$1.defaultProps = {
   disabled: false
 };
 
-const _excluded$v = ["children", "onClick", "tooltip", "className"];
+const _excluded$t = ["children", "onClick", "tooltip", "className"];
 
 class Box$1 extends React.Component {
   constructor(props, context) {
@@ -3002,7 +3072,7 @@ const Trigger = /*#__PURE__*/React.forwardRef(function Trigger(_ref, ref) {
     tooltip,
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$v);
+      props = _objectWithoutProperties(_ref, _excluded$t);
 
   function handleClick(event) {
     event.preventDefault();
@@ -3129,7 +3199,7 @@ function ColorItem({
 
 ColorItem.displayName = 'ColorItem';
 
-const _excluded$w = ["children", "className", "translateKey", "isMac"];
+const _excluded$u = ["children", "className", "translateKey", "isMac"];
 // Support for setting up how to translate modifiers globally.
 //
 
@@ -3211,7 +3281,7 @@ function KeyboardShortcut(_ref) {
     translateKey = globalTranslateKey,
     isMac = (_navigator$platform$t = (_navigator$platform = navigator.platform) == null ? void 0 : _navigator$platform.toUpperCase().includes('MAC')) != null ? _navigator$platform$t : false
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$w);
+      props = _objectWithoutProperties(_ref, _excluded$u);
 
   const shortcuts = typeof children === 'string' ? [children] : children;
   return /*#__PURE__*/React.createElement("span", _objectSpread2({
@@ -3617,7 +3687,11 @@ Time.defaultProps = {
   }
 };
 
-const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
+/**
+ * @deprecated
+ */
+
+const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   const className = classNames('reactist_input', props.className);
   return /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
     className: className,
@@ -3626,7 +3700,7 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 Input.displayName = 'Input';
 
-const _excluded$x = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
+const _excluded$v = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
 
 function Select(_ref) {
   let {
@@ -3637,7 +3711,7 @@ function Select(_ref) {
     className = '',
     defaultValue
   } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded$x);
+      otherProps = _objectWithoutProperties(_ref, _excluded$v);
 
   const selectClassName = classNames('reactist_select', {
     disabled
@@ -3667,7 +3741,6 @@ exports.Badge = Badge;
 exports.Banner = Banner;
 exports.Box = Box;
 exports.Button = Button;
-exports.ButtonLink = ButtonLink;
 exports.COLORS = COLORS;
 exports.CheckboxField = CheckboxField;
 exports.ColorPicker = ColorPicker;
@@ -3682,6 +3755,7 @@ exports.Divider = Divider;
 exports.Heading = Heading;
 exports.Hidden = Hidden;
 exports.HiddenVisually = HiddenVisually;
+exports.IconButton = IconButton;
 exports.Inline = Inline;
 exports.KeyCapturer = KeyCapturer;
 exports.KeyboardShortcut = KeyboardShortcut;
@@ -3720,5 +3794,6 @@ exports.Time = Time;
 exports.Toast = Toast;
 exports.ToastsProvider = ToastsProvider;
 exports.Tooltip = Tooltip;
+exports.getBoxClassNames = getBoxClassNames;
 exports.useToasts = useToasts;
 //# sourceMappingURL=reactist.cjs.development.js.map