@algolia/satellite 1.0.0-beta.156 → 1.0.0-beta.158

package/esm/Button/types.js

@@ -1,3 +1,5 @@
 export function isButtonType(props) {
   return props && (!props.as || props.as === "button");
-}
+}
+
+// Polymorphic Helpers lifted from https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/

package/esm/Dropdown/DropdownButton.d.ts

@@ -1,11 +1,11 @@
-import type { FunctionComponent, ReactNode } from "react";
+import { ReactNode } from "react";
 import { ButtonProps } from "../Button";
 import { RenderTargetParams } from "./Dropdown";
-export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title" | "endIcon"> {
+export interface DropdownButtonProps extends Omit<ButtonProps, "title" | "endIcon"> {
     /** Descriptive title for `Dropdown` */
     title: ReactNode;
     renderFooter?: (args: RenderTargetParams) => ReactNode;
     children: ReactNode;
 }
-export declare const DropdownButton: FunctionComponent<DropdownButtonProps>;
+export declare const DropdownButton: import("react").ForwardRefExoticComponent<DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
 export default DropdownButton;

package/esm/Dropdown/DropdownButton.js

@@ -3,11 +3,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "title", "renderFooter"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { forwardRef } from "react";
 import { ChevronDown } from "react-feather";
 import Button from "../Button";
 import Dropdown from "./Dropdown";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var DropdownButton = function DropdownButton(_ref) {
+export var DropdownButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     title = _ref.title,
     renderFooter = _ref.renderFooter,
@@ -25,6 +26,7 @@ export var DropdownButton = function DropdownButton(_ref) {
     return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonProps), {}, {
       onClick: handleClick,
       endIcon: ChevronDown,
+      ref: ref,
       children: title
     }));
   };
@@ -33,5 +35,6 @@ export var DropdownButton = function DropdownButton(_ref) {
     renderFooter: renderFooter,
     children: children
   });
-};
+});
+DropdownButton.displayName = "DropdownButton";
 export default DropdownButton;

package/esm/Link/ButtonLink.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-import type { ButtonBaseProps, ExtractProps } from "../Button/types";
-export declare type ButtonLinkProps = ButtonBaseProps & ExtractProps<"a"> & {
+import { type PolymorphicButtonProps } from "../Button/PolymorphicButton";
+export declare type ButtonLinkProps = Omit<PolymorphicButtonProps<"a">, "as" | "ref"> & {
     href: string;
 };
-export declare const ButtonLink: ({ endIcon: EndIcon, href, onClick, ...props }: ButtonLinkProps) => JSX.Element;
+export declare const ButtonLink: import("react").ForwardRefExoticComponent<Omit<PolymorphicButtonProps<"a">, "ref" | "as"> & {
+    href: string;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
 export default ButtonLink;

package/esm/Link/ButtonLink.js

@@ -3,11 +3,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["endIcon", "href", "onClick"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { forwardRef } from "react";
 import { ExternalLink } from "react-feather";
-import Button from "../Button/Button";
+import { PolymorphicButton } from "../Button/PolymorphicButton";
 import useLinkProps from "../utils/useLinkProps";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var ButtonLink = function ButtonLink(_ref) {
+export var ButtonLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var EndIcon = _ref.endIcon,
     href = _ref.href,
     onClick = _ref.onClick,
@@ -19,9 +20,11 @@ export var ButtonLink = function ButtonLink(_ref) {
   if (linkProps.target === "_blank" && EndIcon === undefined) {
     EndIcon = ExternalLink;
   }
-  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
-    endIcon: EndIcon,
-    as: "a"
+  return /*#__PURE__*/_jsx(PolymorphicButton, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
+    ref: ref,
+    as: "a",
+    endIcon: EndIcon
   }));
-};
+});
+ButtonLink.displayName = "ButtonLink";
 export default ButtonLink;

package/esm/Link/IconButtonLink.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { IconButtonBaseProps } from "../Button/IconButton";
-import type { ExtractProps } from "../Button/types";
-export declare type IconButtonLinkProps = IconButtonBaseProps & ExtractProps<"a"> & {
+import { type PolymorphicIconButtonProps } from "../Button/PolymorphicIconButton";
+export declare type IconButtonLinkProps = Omit<PolymorphicIconButtonProps<"a">, "as" | "ref"> & {
     href: string;
 };
-export declare const IconButtonLink: ({ href, onClick, ...props }: IconButtonLinkProps) => JSX.Element;
+export declare const IconButtonLink: import("react").ForwardRefExoticComponent<Omit<PolymorphicIconButtonProps<"a">, "ref" | "as"> & {
+    href: string;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
 export default IconButtonLink;

package/esm/Link/IconButtonLink.js

@@ -3,10 +3,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["href", "onClick"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import IconButton from "../Button/IconButton";
+import { forwardRef } from "react";
+import { PolymorphicIconButton } from "../Button/PolymorphicIconButton";
 import useLinkProps from "../utils/useLinkProps";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var IconButtonLink = function IconButtonLink(_ref) {
+export var IconButtonLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var href = _ref.href,
     onClick = _ref.onClick,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -14,8 +15,10 @@ export var IconButtonLink = function IconButtonLink(_ref) {
     href: href,
     onClick: onClick
   }));
-  return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
-    as: "a"
+  return /*#__PURE__*/_jsx(PolymorphicIconButton, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
+    as: "a",
+    ref: ref
   }));
-};
+});
+IconButtonLink.displayName = "IconButtonLink";
 export default IconButtonLink;

package/esm/Medallion/Medallion.js

@@ -8,7 +8,7 @@ var VARIANT_CLASSNAMES = {
   pink: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["medallion-pink text-pink-600"]))),
   accent: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["medallion-accent text-accent-600"]))),
   blue: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["medallion-blue text-blue-600"]))),
-  green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["medallion-green text-green-700"]))),
+  green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["medallion-green text-green-600"]))),
   orange: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["medallion-orange text-orange-600"]))),
   red: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["medallion-red text-red-600"]))),
   // eslint-disable-next-line @algolia/satellite/prefer-accent -- here we're definitely refering to the color itself

package/esm/Modal/Modal.d.ts

@@ -1,30 +1,54 @@
 import type { ReactNode } from "react";
+import type { XOR } from "../types";
 export declare type ModalSizeVariant = "medium" | "large";
 export declare type ModalLocale = {
     dismissText?: string;
+    modalTitle?: string;
 };
-export interface ModalProps {
-    open?: boolean;
-    /** Descriptive title for `Modal` */
+interface ModalControlledProps {
+    /** Define whether the modal is open or closed. */
+    open: boolean;
+    /** The element that should receive focus once the `Modal` is closed. */
+    autoFocusOnCloseElement?: HTMLElement | null;
+}
+interface ModalUncontrolledProps {
+    /** Button which should trigger the modal */
+    triggerButton: ReactNode;
+}
+export declare type ModalProps = XOR<ModalControlledProps, ModalUncontrolledProps> & {
+    /** Descriptive title for `Modal`. */
     title?: ReactNode;
     /** @ignore */
     className?: string;
-    /** Should the content take up full full width of the `Modal`. */
+    /** Define whether the content should take up the full width of the `Modal`. */
     fullBleed?: boolean;
-    /** Define whether or not the modal should animate on show and hide */
+    /** Define whether or not the modal should animate on show and hide. */
     animate?: boolean;
+    /** Define the size of the `Modal`. */
     size?: ModalSizeVariant;
-    /** Define whether or not the dismiss button should be hidden */
+    /** Define whether or not the dismiss button should be hidden. */
     hideCloseIcon?: boolean;
-    /** Define whether or not the modal should be vertically aligned */
+    /** Define whether or not the modal should be vertically aligned. */
     centerY?: boolean;
-    /** Function triggered when the dismiss button is clicked */
+    /**
+     * Function triggered when the modal is dismissed.
+     * This function is called when the user clicks the close button,
+     * clicks outside the modal or presses the escape key.
+     */
     onDismiss?: () => void;
-    children: ReactNode;
+    /** The locale for the `Modal`. */
     locale?: ModalLocale;
-}
+    /**
+     * The element that should receive focus once the `Modal` is opened.
+     * If `undefined` or `null` is passed, the first focusable element will be focused.
+     * If `false`, no element will be focused.
+     */
+    autoFocusOnOpenElement?: HTMLElement | null | false;
+    children: ReactNode;
+};
 export declare const Modal: {
-    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale: propsLocale, }: ModalProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    ({ title, className, children, open, onDismiss, fullBleed, animate, hideCloseIcon, size, centerY, autoFocusOnOpenElement, autoFocusOnCloseElement, triggerButton, locale: propsLocale, }: ModalProps): JSX.Element;
     Footer: import("react").FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
+    Section: ({ children, className, fullBleed }: import("./components/ModalSection").ModalSectionProps) => JSX.Element;
 };
 export default Modal;

package/esm/Modal/Modal.js

@@ -1,38 +1,36 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import * as Dialog from "@radix-ui/react-dialog";
 import cx from "clsx";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { X } from "react-feather";
 import { CSSTransition } from "react-transition-group";
-import useKeyPressEvent from "react-use/lib/useKeyPressEvent";
-import useLockBodyScroll from "react-use/lib/useLockBodyScroll";
 import { IconButton } from "../Button";
 import Card from "../Card";
 import { useCreatePortal, useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
-import uniqueId from "../utils/uniqueId";
 import ModalFooter from "./components/ModalFooter";
+import ModalSection from "./components/ModalSection";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_MODAL_LOCALE = {
-  dismissText: "Dismiss"
+  dismissText: "Dismiss",
+  modalTitle: "Modal"
 };
+var MODAL_ANIMATION_OUT_DELAY = 200;
 var ModalAnimation = function ModalAnimation(props) {
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/_jsx(CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
     /* eslint-disable-next-line @algolia/satellite/invalid-classnames */
-    _jsx(CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
-      classNames: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["satellite-modal"]))),
-      timeout: 200,
-      appear: true,
-      unmountOnExit: true
-    }))
-  );
+    classNames: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["satellite-modal"]))),
+    timeout: MODAL_ANIMATION_OUT_DELAY,
+    appear: true,
+    unmountOnExit: true
+  }));
 };
 var ModalNoAnimation = function ModalNoAnimation(props) {
   return props["in"] ? /*#__PURE__*/_jsx(_Fragment, {
@@ -48,11 +46,10 @@ export var Modal = function Modal(_ref) {
     className = _ref.className,
     children = _ref.children,
     _ref$open = _ref.open,
-    open = _ref$open === void 0 ? true : _ref$open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    onDismiss = _ref.onDismiss,
     _ref$fullBleed = _ref.fullBleed,
     fullBleed = _ref$fullBleed === void 0 ? false : _ref$fullBleed,
-    _ref$onDismiss = _ref.onDismiss,
-    onDismiss = _ref$onDismiss === void 0 ? function () {} : _ref$onDismiss,
     _ref$animate = _ref.animate,
     animate = _ref$animate === void 0 ? true : _ref$animate,
     _ref$hideCloseIcon = _ref.hideCloseIcon,
@@ -61,91 +58,127 @@ export var Modal = function Modal(_ref) {
     size = _ref$size === void 0 ? "medium" : _ref$size,
     _ref$centerY = _ref.centerY,
     centerY = _ref$centerY === void 0 ? false : _ref$centerY,
+    autoFocusOnOpenElement = _ref.autoFocusOnOpenElement,
+    autoFocusOnCloseElement = _ref.autoFocusOnCloseElement,
+    triggerButton = _ref.triggerButton,
     propsLocale = _ref.locale;
-  var createPortal = useCreatePortal();
   var contextLocale = useLocale("modal");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    modalWrapperRef = _useState2[0],
-    setModalWrapperRef = _useState2[1];
-  var dialogRef = useRef(null);
-  var mouseDownTargetRef = useRef(null);
+  var createPortal = useCreatePortal();
   var ModalContainer = animate ? ModalAnimation : ModalNoAnimation;
-  var modalTitleId = useMemo(function () {
-    return uniqueId("modal-title");
-  }, []);
-  useLockBodyScroll(open);
-  useKeyPressEvent("Escape", function () {
-    if (open) onDismiss();
-  });
+  var _useState = useState(open),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(open),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpenAnimated = _useState4[0],
+    setIsOpenAnimated = _useState4[1];
+  var openTimeoutId = useRef();
+  var onOpenChangeTimeoutId = useRef();
+  var isControlled = triggerButton === undefined;
   useEffect(function () {
-    if (!modalWrapperRef) return;
-    var onMouseUp = function onMouseUp(evt) {
-      if (evt.target === mouseDownTargetRef.current && dialogRef.current && !dialogRef.current.contains(evt.target)) {
-        onDismiss();
+    clearTimeout(openTimeoutId.current);
+    setIsOpenAnimated(open);
+    if (animate && !open) {
+      openTimeoutId.current = setTimeout(function () {
+        return setIsOpen(open);
+      }, MODAL_ANIMATION_OUT_DELAY);
+    } else {
+      setIsOpen(open);
+    }
+  }, [open, animate]);
+  if (typeof document === "undefined") return /*#__PURE__*/_jsx(Fragment, {});
+  return /*#__PURE__*/_jsxs(Dialog.Root, {
+    open: isOpen,
+    onOpenChange: function onOpenChange(open) {
+      clearTimeout(onOpenChangeTimeoutId.current);
+      setIsOpenAnimated(open);
+      var cb = function cb() {
+        setIsOpen(open);
+        if (!open) onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+      };
+      if (animate) {
+        onOpenChangeTimeoutId.current = setTimeout(cb, MODAL_ANIMATION_OUT_DELAY);
+      } else {
+        cb();
       }
-      mouseDownTargetRef.current = null;
-    };
-    var onMouseDown = function onMouseDown(evt) {
-      return mouseDownTargetRef.current = evt.target;
-    };
-
-    /**
-     * We use native event handlers to avoid React event bubbling behaviour with element rendered in a portal.
-     * (otherwise, the modal gets dismissed when clicking on an AutoComplete menu item)
-     */
-    modalWrapperRef.addEventListener("mouseup", onMouseUp);
-    modalWrapperRef.addEventListener("mousedown", onMouseDown);
-    return function () {
-      modalWrapperRef.removeEventListener("mouseup", onMouseUp);
-      modalWrapperRef.removeEventListener("mousedown", onMouseDown);
-    };
-  }, [modalWrapperRef, onDismiss]);
-  var modalAccessibilityProps = _objectSpread({
-    role: "dialog"
-  }, title ? {
-    "aria-labelledby": modalTitleId
-  } : {
-    "aria-label": "Modal"
-  });
-  return createPortal( /*#__PURE__*/_jsx(ModalContainer, {
-    "in": open,
-    children: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("div", {
-        className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-900/30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
-      }), /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center"])))),
-        ref: setModalWrapperRef
-      }, modalAccessibilityProps), {}, {
-        children: /*#__PURE__*/_jsxs(Card, {
-          ref: dialogRef,
-          as: "section",
-          elevation: "500",
-          className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
-          fullBleed: true,
-          "aria-label": title || "Modal",
-          children: [/*#__PURE__*/_jsxs("header", {
-            className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n                px-8 min-h-14\n                flex items-center justify-between  space-x-2\n                ", "\n                ", "\n              "])), title ? "border-b border-grey-100" : "justify-end", !title && hideCloseIcon && "hidden"),
-            children: [!!title && /*#__PURE__*/_jsx("h2", {
-              id: modalTitleId,
-              className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex-1 display-heading truncate"]))),
-              children: title
-            }), !hideCloseIcon && /*#__PURE__*/_jsx(IconButton, {
-              icon: X,
-              title: locale.dismissText,
-              variant: "subtle",
-              onClick: onDismiss,
-              className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["shrink-0 -mr-2"])))
-            })]
-          }), /*#__PURE__*/_jsx("div", {
-            className: fullBleed ? undefined : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["p-10"]))),
-            children: children
-          })]
+    },
+    modal: true,
+    children: [!isControlled && /*#__PURE__*/_jsx(Dialog.Trigger, {
+      asChild: true,
+      children: triggerButton
+    }), createPortal( /*#__PURE__*/_jsx(Dialog.Overlay, {
+      className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-900/30 z-modalOverlay inset-0 fixed w-full h-full flex items-start justify-center overflow-x-hidden overflow-y-auto px-4 py-10"]))),
+      children: /*#__PURE__*/_jsx(Dialog.Content, {
+        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["modal-content"]))), SIZE_CLASSNAMES[size], !isOpen && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["hidden"]))), centerY && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex m-auto"])))),
+        onOpenAutoFocus: function onOpenAutoFocus(e) {
+          if (autoFocusOnOpenElement === false) {
+            e.preventDefault();
+          } else if (autoFocusOnOpenElement instanceof HTMLElement) {
+            e.preventDefault();
+            autoFocusOnOpenElement.focus();
+          }
+        },
+        onCloseAutoFocus: function onCloseAutoFocus(e) {
+          if (autoFocusOnCloseElement instanceof HTMLElement) {
+            e.preventDefault();
+            autoFocusOnCloseElement.focus();
+          }
+        },
+        onEscapeKeyDown: function onEscapeKeyDown(e) {
+          if (isControlled) {
+            e.preventDefault();
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+          }
+        },
+        onInteractOutside: function onInteractOutside(e) {
+          if (isControlled) {
+            e.preventDefault();
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+          }
+        },
+        "aria-label": !title ? locale.modalTitle : undefined,
+        "aria-describedby": undefined,
+        children: /*#__PURE__*/_jsx(ModalContainer, {
+          "in": animate ? isOpenAnimated : isOpen,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx("div", {
+              className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["modal-container"]))),
+              children: /*#__PURE__*/_jsxs(Card, {
+                as: "div",
+                elevation: "500",
+                className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["relative"]))), className),
+                fullBleed: true,
+                children: [/*#__PURE__*/_jsx("header", {
+                  className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["min-h-14 flex items-center justify-between space-x-2"]))), title ? stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-b border-grey-100 pl-8 pr-16"]))) : stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["justify-end px-8"]))), !title && hideCloseIcon && stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["hidden"])))),
+                  children: !!title && /*#__PURE__*/_jsx(Dialog.Title, {
+                    className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["flex-1 display-heading truncate"]))),
+                    children: title
+                  })
+                }), /*#__PURE__*/_jsx("div", {
+                  className: cx(!fullBleed && stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["p-10"])))),
+                  children: children
+                }), !hideCloseIcon && /*#__PURE__*/_jsx("div", {
+                  className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["-mr-2 absolute top-3 right-8"]))),
+                  children: /*#__PURE__*/_jsx(Dialog.Close, {
+                    asChild: true,
+                    children: /*#__PURE__*/_jsx(IconButton, {
+                      icon: X,
+                      title: locale.dismissText,
+                      variant: "subtle",
+                      showTooltip: false
+                    })
+                  })
+                })]
+              })
+            })
+          })
         })
-      }))]
-    })
-  }));
+      })
+    }))]
+  });
 };
 Modal.Footer = ModalFooter;
+Modal.Section = ModalSection;
 export default Modal;

package/esm/Modal/Modal.tailwind.js

@@ -10,6 +10,13 @@ var modalPlugin = plugin(function (_ref) {
     ".modal-container": {
       zIndex: theme("zIndex.modal")
     },
+    ".modal-content": {
+      borderRadius: "8px",
+      width: "100%",
+      "&:focus": {
+        outline: "none"
+      }
+    },
     // Sizes
     ".modal-dialog-medium": {
       maxWidth: "640px"

package/esm/RangeSlider/RangeSlider.js

@@ -9,6 +9,8 @@ import { SliderRange, Root as SliderRoot, SliderThumb, SliderTrack } from "@radi
 import cx from "clsx";
 import colors from "../styles/colors";
 import stl from "../styles/helpers/satellitePrefixer";
+
+// Prevents unwanted number narrowing
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var TRACK_SHADOWS_CLASSNAME = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["shadow-[inset_0_1px_3px_0_rgb(0_0_0_/_10%),0_0.5px_0_0_rgb(255_255_255_/_5%)]"])));

package/esm/Satellite/Satellite.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from "react";
+import { type FunctionComponent, type ReactNode } from "react";
 import type { ComponentsLocales } from "./locale";
 import type { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteProps {
@@ -7,5 +7,6 @@ export interface SatelliteProps {
     portalTarget?: HTMLElement;
     children: ReactNode;
 }
+export declare const DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
 export declare const Satellite: FunctionComponent<SatelliteProps>;
 export default Satellite;

package/esm/Satellite/Satellite.js

@@ -1,12 +1,35 @@
+import { useEffect } from "react";
 import SatelliteContext from "./SatelliteContext";
 import { router as defaultRouter } from "./SatelliteRouter";
 import { jsx as _jsx } from "react/jsx-runtime";
+export var DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
+var portalElement;
+var getPortalElement = function getPortalElement() {
+  if (typeof document === "undefined") return;
+  if (!portalElement) {
+    var element = document.createElement("div");
+    element.setAttribute("id", DEFAULT_PORTAL_TARGET_ID);
+    document.body.appendChild(element);
+    portalElement = element;
+  }
+  return portalElement;
+};
 export var Satellite = function Satellite(_ref) {
   var _ref$router = _ref.router,
     router = _ref$router === void 0 ? defaultRouter : _ref$router,
     locales = _ref.locales,
-    portalTarget = _ref.portalTarget,
+    _ref$portalTarget = _ref.portalTarget,
+    portalTarget = _ref$portalTarget === void 0 ? getPortalElement() : _ref$portalTarget,
     children = _ref.children;
+  useEffect(function () {
+    if (!portalTarget) return;
+    if (portalTarget === document.body) {
+      console.warn("Avoid using the document body as a portal target.");
+    }
+
+    // Radix adds pointer-events: none; on the body for its modal, so we need to reenable it for other portaled elements (tooltips, menus, autocomplete)
+    portalTarget.style.pointerEvents = "auto";
+  }, [portalTarget]);
   return /*#__PURE__*/_jsx(SatelliteContext.Provider, {
     value: {
       router: router,

package/esm/Satellite/locale.d.ts

@@ -1,5 +1,6 @@
 import type { AnnouncementBadgeLocale } from "../AnnouncementBadge";
 import type { AutoCompleteLocale } from "../AutoComplete";
+import type { UserAvatarLocale } from "../Avatars/UserAvatar";
 import type { DatePickerLocale } from "../DatePicker/types";
 import type { DropzoneLocale } from "../Dropzone";
 import type { FlagLocale } from "../Flag";
@@ -25,5 +26,6 @@ export declare type ComponentsLocales = {
     pagination?: PaginationLocale;
     sidebar?: SidebarLocale;
     tag?: TagLocale;
+    userAvatar?: UserAvatarLocale;
 };
 export declare const useLocale: <ComponentKey extends keyof ComponentsLocales>(componentKey: ComponentKey) => ComponentsLocales[ComponentKey];