@algolia/satellite 1.0.0-beta.131 → 1.0.0-beta.132

package/esm/Insert/Insert.js

@@ -2,9 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import React from "react";
 import Badge from "../Badge";
 import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 /**
 * Put more emphasis on side content.
@@ -41,26 +42,32 @@ export var Insert = function Insert(_ref) {
   var title = _ref.title,
       contexts = _ref.contexts,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement("aside", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"])))
-  }, contexts ? /*#__PURE__*/React.createElement("span", {
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["block space-x-2 mb-4"])))
-  }, contexts.map(function (context, idx) {
-    var _ref2 = typeof context === "string" ? {
-      label: context
-    } : context,
-        label = _ref2.label,
-        _ref2$variant = _ref2.variant,
-        variant = _ref2$variant === void 0 ? "grey" : _ref2$variant;
+  return /*#__PURE__*/_jsxs("aside", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"]))),
+    children: [contexts ? /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["block space-x-2 mb-4"]))),
+      children: contexts.map(function (context, idx) {
+        var _ref2 = typeof context === "string" ? {
+          label: context
+        } : context,
+            label = _ref2.label,
+            _ref2$variant = _ref2.variant,
+            variant = _ref2$variant === void 0 ? "grey" : _ref2$variant;
 
-    return /*#__PURE__*/React.createElement(Badge, {
-      key: idx,
-      variant: variant
-    }, label);
-  })) : null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
-    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-heading mb-2"])))
-  }, title), /*#__PURE__*/React.createElement("span", {
-    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-body typo-subdued"])))
-  }, children)));
+        return /*#__PURE__*/_jsx(Badge, {
+          variant: variant,
+          children: label
+        }, idx);
+      })
+    }) : null, /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("p", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-heading mb-2"]))),
+        children: title
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-body typo-subdued"]))),
+        children: children
+      })]
+    })]
+  });
 };
 export default Insert;

package/esm/KeyboardKey/KeyboardKey.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import type { FC } from "react";
 export interface KeyboardKeyProps {
     className?: string;
     value: string;

package/esm/KeyboardKey/KeyboardKey.js

@@ -2,10 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React, { createElement } from "react";
-import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight, CornerDownLeft } from "react-feather";
 import cx from "classnames";
+import { createElement } from "react";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CornerDownLeft } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
 var KEY_MAPPINGS = {
   up: ArrowUp,
   down: ArrowDown,
@@ -22,7 +23,8 @@ export var KeyboardKey = function KeyboardKey(_ref) {
     width: "1em",
     height: "1em"
   });
-  return /*#__PURE__*/React.createElement("kbd", {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["keyboard-key "]))), className)
-  }, mappedValue);
+  return /*#__PURE__*/_jsx("kbd", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["keyboard-key "]))), className),
+    children: mappedValue
+  });
 };

package/esm/Link/BaseLink.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-export declare type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const BaseLink: React.ForwardRefExoticComponent<BaseLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+import type { AnchorHTMLAttributes } from "react";
+export declare type BaseLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const BaseLink: import("react").ForwardRefExoticComponent<BaseLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
 export default BaseLink;

package/esm/Link/BaseLink.js

@@ -1,9 +1,15 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef } from "react";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 useLinkProps from "../utils/useLinkProps";
+import { jsx as _jsx } from "react/jsx-runtime";
 export var BaseLink = /*#__PURE__*/forwardRef(function (anchorProps, ref) {
   var linkProps = useLinkProps(anchorProps);
-  return /*#__PURE__*/React.createElement("a", _extends({}, anchorProps, linkProps, {
+  return /*#__PURE__*/_jsx("a", _objectSpread(_objectSpread(_objectSpread({}, anchorProps), linkProps), {}, {
     ref: ref
   }));
 });

package/esm/Link/ButtonLink.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ButtonBaseProps, ExtractProps } from "../Button/types";
+import type { ButtonBaseProps, ExtractProps } from "../Button/types";
 export declare type ButtonLinkProps = ButtonBaseProps & ExtractProps<"a">;
 export declare const ButtonLink: ({ endIcon: EndIcon, ...props }: ButtonLinkProps) => JSX.Element;
 export default ButtonLink;

package/esm/Link/ButtonLink.js

@@ -1,10 +1,15 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["endIcon"];
-import React from "react";
+
+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 { ExternalLink } from "react-feather";
-import useLinkProps from "../utils/useLinkProps";
 import Button from "../Button/Button";
+import useLinkProps from "../utils/useLinkProps";
+import { jsx as _jsx } from "react/jsx-runtime";
 export var ButtonLink = function ButtonLink(_ref) {
   var EndIcon = _ref.endIcon,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -15,7 +20,7 @@ export var ButtonLink = function ButtonLink(_ref) {
     EndIcon = ExternalLink;
   }
 
-  return /*#__PURE__*/React.createElement(Button, _extends({}, props, linkProps, {
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
     endIcon: EndIcon,
     as: "a",
     onClick: function onClick(evt) {

package/esm/Link/IconButtonLink.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { IconButtonBaseProps } from "../Button/IconButton";
-import { ExtractProps } from "../Button/types";
+import type { ExtractProps } from "../Button/types";
 export declare type IconButtonLinkProps = IconButtonBaseProps & ExtractProps<"a">;
 export declare const IconButtonLink: (props: IconButtonLinkProps) => JSX.Element;
 export default IconButtonLink;

package/esm/Link/IconButtonLink.js

@@ -1,10 +1,15 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from "react";
-import useLinkProps from "../utils/useLinkProps";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 useLinkProps from "../utils/useLinkProps";
+import { jsx as _jsx } from "react/jsx-runtime";
 export var IconButtonLink = function IconButtonLink(props) {
   var linkProps = useLinkProps(props);
-  return /*#__PURE__*/React.createElement(IconButton, _extends({}, props, linkProps, {
+  return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
     as: "a"
   }));
 };

package/esm/Link/Link.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-import { IconComponentType } from "../types";
+import type { AnchorHTMLAttributes } from "react";
+import type { IconComponentType } from "../types";
 export declare type LinkProps = {
     startIcon?: IconComponentType;
     endIcon?: IconComponentType;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const Link: React.ForwardRefExoticComponent<{
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const Link: import("react").ForwardRefExoticComponent<{
     startIcon?: IconComponentType | undefined;
     endIcon?: IconComponentType | undefined;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
+} & AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/esm/Link/Link.js

@@ -1,15 +1,22 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 var _templateObject, _templateObject2, _templateObject3;
 
 var _excluded = ["className", "children", "startIcon", "endIcon"];
-import React, { forwardRef } from "react";
+
+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 cx from "classnames";
+import { forwardRef } from "react";
 import { ExternalLink } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
 import useLinkProps from "../utils/useLinkProps";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
       children = _ref.children,
@@ -24,15 +31,16 @@ export var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
     EndIcon = ExternalLink;
   }
 
-  return /*#__PURE__*/React.createElement("a", _extends({}, anchorProps, linkProps, {
+  return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread(_objectSpread({}, anchorProps), linkProps), {}, {
     ref: ref,
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["typo-link inline-flex items-center"]))), className)
-  }), StartIcon && /*#__PURE__*/React.createElement(StartIcon, {
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-1"]))),
-    size: "1em"
-  }), children, EndIcon && /*#__PURE__*/React.createElement(EndIcon, {
-    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-1"]))),
-    size: "1em"
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["typo-link inline-flex items-center"]))), className),
+    children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-1"]))),
+      size: "1em"
+    }), children, EndIcon && /*#__PURE__*/_jsx(EndIcon, {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-1"]))),
+      size: "1em"
+    })]
   }));
 });
 Link.displayName = "Link";

package/esm/Medallion/Medallion.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { IconComponentType } from "../types";
-import { MedallionSize, MedallionVariant } from "./types";
+import type { IconComponentType } from "../types";
+import type { MedallionSize, MedallionVariant } from "./types";
 export interface MedallionProps {
     icon: IconComponentType;
     variant?: MedallionVariant;

package/esm/Medallion/Medallion.js

@@ -2,9 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
-import React from "react";
 import cx from "classnames";
 import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
 var VARIANT_CLASSNAMES = {
   grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["medallion-grey text-grey-600"]))),
   pink: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["medallion-pink text-pink-600"]))),
@@ -23,10 +23,11 @@ export var Medallion = function Medallion(_ref) {
       size = _ref$size === void 0 ? "default" : _ref$size,
       className = _ref.className;
   var medallionClassName = VARIANT_CLASSNAMES[variant];
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className)
-  }, /*#__PURE__*/React.createElement(Icon, {
-    className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["p-1 ", ""])), size === "large" && "w-10 h-10")
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className),
+    children: /*#__PURE__*/_jsx(Icon, {
+      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["p-1 ", ""])), size === "large" && "w-10 h-10")
+    })
+  });
 };
 export default Medallion;

package/esm/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import type { ReactNode } from "react";
 export declare type ModalSizeVariant = "medium" | "large";
 export interface ModalProps {
     open?: boolean;
@@ -10,11 +10,11 @@ export interface ModalProps {
     hideCloseIcon?: boolean;
     centerY?: boolean;
     onDismiss?: () => void;
-    children: React.ReactNode;
+    children: ReactNode;
     closeIconText?: string;
 }
 export declare const Modal: {
-    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, closeIconText, }: ModalProps): React.ReactPortal;
-    Footer: React.FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
+    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, closeIconText, }: ModalProps): import("react").ReactPortal;
+    Footer: import("react").FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
 };
 export default Modal;

package/esm/Modal/Modal.js

@@ -1,33 +1,35 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
+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;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 React, { useRef, useState, useEffect, useMemo } from "react";
+import cx from "classnames";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+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 cx from "classnames";
-import { X } from "react-feather";
-import stl from "../styles/helpers/satellitePrefixer";
-import Card from "../Card";
 import { IconButton } from "../Button";
+import Card from "../Card";
+import stl from "../styles/helpers/satellitePrefixer";
 import uniqueId from "../utils/uniqueId";
 import ModalFooter from "./components/ModalFooter";
+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 ModalAnimation = function ModalAnimation(props) {
   return (
     /*#__PURE__*/
 
     /* eslint-disable-next-line @algolia/satellite/invalid-classnames */
-    React.createElement(CSSTransition, _extends({}, props, {
+    _jsx(CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
       classNames: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["satellite-modal"]))),
       timeout: 200,
       appear: true,
@@ -37,7 +39,9 @@ var ModalAnimation = function ModalAnimation(props) {
 };
 
 var ModalNoAnimation = function ModalNoAnimation(props) {
-  return props["in"] ? /*#__PURE__*/React.createElement(React.Fragment, null, props.children) : null;
+  return props["in"] ? /*#__PURE__*/_jsx(_Fragment, {
+    children: props.children
+  }) : null;
 };
 
 var SIZE_CLASSNAMES = {
@@ -116,32 +120,41 @@ export var Modal = function Modal(_ref) {
     "aria-label": "Modal"
   });
 
-  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(ModalContainer, {
-    "in": open
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-900 bg-opacity-30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
-  }), /*#__PURE__*/React.createElement("div", _extends({
-    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), /*#__PURE__*/React.createElement(Card, {
-    ref: dialogRef,
-    elevation: "500",
-    className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
-    fullBleed: true
-  }, /*#__PURE__*/React.createElement("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")
-  }, title && /*#__PURE__*/React.createElement("h2", {
-    id: modalTitleId,
-    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex-1 display-heading truncate"])))
-  }, title), !hideCloseIcon && /*#__PURE__*/React.createElement(IconButton, {
-    icon: X,
-    title: closeIconText,
-    variant: "subtle",
-    onClick: onDismiss,
-    className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex-shrink-0 -mr-2"])))
-  })), /*#__PURE__*/React.createElement("div", {
-    className: fullBleed ? undefined : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["p-10"])))
-  }, children))))), document.body);
+  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ModalContainer, {
+    "in": open,
+    children: /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-900 bg-opacity-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,
+          elevation: "500",
+          className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
+          fullBleed: true,
+          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: closeIconText,
+              variant: "subtle",
+              onClick: onDismiss,
+              className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex-shrink-0 -mr-2"])))
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: fullBleed ? undefined : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["p-10"]))),
+            children: children
+          })]
+        })
+      }))]
+    })
+  }), document.body);
 };
 Modal.Footer = ModalFooter;
 export default Modal;

package/esm/Modal/components/ModalFooter.d.ts

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from "react";
-export declare type ModalFooterProps = React.HTMLAttributes<HTMLElement>;
+import type { FunctionComponent, HTMLAttributes } from "react";
+export declare type ModalFooterProps = HTMLAttributes<HTMLElement>;
 export declare const ModalFooter: FunctionComponent<ModalFooterProps>;
 export default ModalFooter;

package/esm/Modal/components/ModalFooter.js

@@ -1,24 +1,31 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 var _templateObject;
 
 var _excluded = ["className", "children"];
-import React from "react";
+
+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 cx from "classnames";
-import stl from "../../styles/helpers/satellitePrefixer";
 import FlexGrid from "../../FlexGrid";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
 export var ModalFooter = function ModalFooter(_ref) {
   var className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["mt-8"]))), className)
-  }), /*#__PURE__*/React.createElement(FlexGrid, {
-    spacing: "md",
-    alignment: "center"
-  }, children));
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["mt-8"]))), className),
+    children: /*#__PURE__*/_jsx(FlexGrid, {
+      spacing: "md",
+      alignment: "center",
+      children: children
+    })
+  }));
 };
 export default ModalFooter;

package/esm/Modal/components/ModalSection.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export declare type ModalSectionProps = {
     children: ReactNode;
     /** @ignore */

package/esm/Modal/components/ModalSection.js

@@ -2,16 +2,17 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from "react";
 import cx from "classnames";
 import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
 export var ModalSection = function ModalSection(_ref) {
   var children = _ref.children,
       className = _ref.className,
       _ref$fullBleed = _ref.fullBleed,
       fullBleed = _ref$fullBleed === void 0 ? false : _ref$fullBleed;
-  return /*#__PURE__*/React.createElement("section", {
-    className: cx(fullBleed && stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["-mx-10"]))), className)
-  }, children);
+  return /*#__PURE__*/_jsx("section", {
+    className: cx(fullBleed && stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["-mx-10"]))), className),
+    children: children
+  });
 };
 export default ModalSection;