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

package/cjs/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/cjs/Link/IconButtonLink.js

@@ -7,17 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.IconButtonLink = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _IconButton = _interopRequireDefault(require("../Button/IconButton"));
 
 var _useLinkProps = _interopRequireDefault(require("../utils/useLinkProps"));
 
-var _IconButton = _interopRequireDefault(require("../Button/IconButton"));
+var _jsxRuntime = require("react/jsx-runtime");
+
+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) { (0, _defineProperty2["default"])(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; }
 
 var IconButtonLink = function IconButtonLink(props) {
   var linkProps = (0, _useLinkProps["default"])(props);
-  return /*#__PURE__*/_react["default"].createElement(_IconButton["default"], (0, _extends2["default"])({}, props, linkProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton["default"], _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
     as: "a"
   }));
 };

package/cjs/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/cjs/Link/Link.js

@@ -2,36 +2,36 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Link = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _react = require("react");
+
 var _reactFeather = require("react-feather");
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _useLinkProps = _interopRequireDefault(require("../utils/useLinkProps"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 var _excluded = ["className", "children", "startIcon", "endIcon"];
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
 
 var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
@@ -46,15 +46,16 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     EndIcon = _reactFeather.ExternalLink;
   }
 
-  return /*#__PURE__*/_react["default"].createElement("a", (0, _extends2["default"])({}, anchorProps, linkProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread(_objectSpread({}, anchorProps), linkProps), {}, {
     ref: ref,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-link inline-flex items-center"]))), className)
-  }), StartIcon && /*#__PURE__*/_react["default"].createElement(StartIcon, {
-    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-1"]))),
-    size: "1em"
-  }), children, EndIcon && /*#__PURE__*/_react["default"].createElement(EndIcon, {
-    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-1"]))),
-    size: "1em"
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-link inline-flex items-center"]))), className),
+    children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-1"]))),
+      size: "1em"
+    }), children, EndIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndIcon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-1"]))),
+      size: "1em"
+    })]
   }));
 });
 exports.Link = Link;

package/cjs/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/cjs/Medallion/Medallion.js

@@ -9,12 +9,12 @@ exports["default"] = exports.Medallion = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 var VARIANT_CLASSNAMES = {
@@ -36,11 +36,12 @@ var Medallion = function Medallion(_ref) {
       size = _ref$size === void 0 ? "default" : _ref$size,
       className = _ref.className;
   var medallionClassName = VARIANT_CLASSNAMES[variant];
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className)
-  }, /*#__PURE__*/_react["default"].createElement(Icon, {
-    className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["p-1 ", ""])), size === "large" && "w-10 h-10")
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["p-1 ", ""])), size === "large" && "w-10 h-10")
+    })
+  });
 };
 
 exports.Medallion = Medallion;

package/cjs/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/cjs/Modal/Modal.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,44 +9,48 @@ exports["default"] = exports.Modal = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = require("react");
 
 var _reactDom = require("react-dom");
 
+var _reactFeather = require("react-feather");
+
 var _reactTransitionGroup = require("react-transition-group");
 
 var _useKeyPressEvent = _interopRequireDefault(require("react-use/lib/useKeyPressEvent"));
 
 var _useLockBodyScroll = _interopRequireDefault(require("react-use/lib/useLockBodyScroll"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _Button = require("../Button");
 
-var _reactFeather = require("react-feather");
+var _Card = _interopRequireDefault(require("../Card"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
-var _Card = _interopRequireDefault(require("../Card"));
-
-var _Button = require("../Button");
+var _uniqueId = _interopRequireDefault(require("../utils/uniqueId"));
 
 var _ModalFooter = _interopRequireDefault(require("./components/ModalFooter"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
 
 var ModalAnimation = function ModalAnimation(props) {
   return (
     /*#__PURE__*/
 
     /* eslint-disable-next-line @algolia/satellite/invalid-classnames */
-    _react["default"].createElement(_reactTransitionGroup.CSSTransition, (0, _extends2["default"])({}, props, {
+    (0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
       classNames: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["satellite-modal"]))),
       timeout: 200,
       appear: true,
@@ -58,7 +60,9 @@ var ModalAnimation = function ModalAnimation(props) {
 };
 
 var ModalNoAnimation = function ModalNoAnimation(props) {
-  return props["in"] ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.children) : null;
+  return props["in"] ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: props.children
+  }) : null;
 };
 
 var SIZE_CLASSNAMES = {
@@ -95,6 +99,9 @@ var Modal = function Modal(_ref) {
   var dialogRef = (0, _react.useRef)(null);
   var mouseDownTargetRef = (0, _react.useRef)(null);
   var ModalContainer = animate ? ModalAnimation : ModalNoAnimation;
+  var modalTitleId = (0, _react.useMemo)(function () {
+    return (0, _uniqueId["default"])("modal-title");
+  }, []);
   (0, _useLockBodyScroll["default"])(open);
   (0, _useKeyPressEvent["default"])("Escape", function () {
     if (open) onDismiss();
@@ -126,32 +133,50 @@ var Modal = function Modal(_ref) {
       modalWrapperRef.removeEventListener("mousedown", onMouseDown);
     };
   }, [modalWrapperRef, onDismiss]);
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(ModalContainer, {
-    "in": open
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-900 bg-opacity-30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"])))),
-    ref: setModalWrapperRef,
+
+  var modalAccessibilityProps = _objectSpread({
     role: "dialog"
-  }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-    ref: dialogRef,
-    elevation: "500",
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
-    fullBleed: true
-  }, /*#__PURE__*/_react["default"].createElement("header", {
-    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\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["default"].createElement("h2", {
-    className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex-1 display-heading truncate"])))
-  }, title), !hideCloseIcon && /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
-    icon: _reactFeather.X,
-    title: closeIconText,
-    variant: "subtle",
-    onClick: onDismiss,
-    className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0 -mr-2"])))
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: fullBleed ? undefined : (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["p-10"])))
-  }, children))))), document.body);
+  }, title ? {
+    "aria-labelledby": modalTitleId
+  } : {
+    "aria-label": "Modal"
+  });
+
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContainer, {
+    "in": open,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-900 bg-opacity-30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"])))),
+        ref: setModalWrapperRef
+      }, modalAccessibilityProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
+          ref: dialogRef,
+          elevation: "500",
+          className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
+          fullBleed: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+            className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\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__*/(0, _jsxRuntime.jsx)("h2", {
+              id: modalTitleId,
+              className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex-1 display-heading truncate"]))),
+              children: title
+            }), !hideCloseIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+              icon: _reactFeather.X,
+              title: closeIconText,
+              variant: "subtle",
+              onClick: onDismiss,
+              className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0 -mr-2"])))
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: fullBleed ? undefined : (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["p-10"]))),
+            children: children
+          })]
+        })
+      }))]
+    })
+  }), document.body);
 };
 
 exports.Modal = Modal;

package/cjs/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/cjs/Modal/components/ModalFooter.js

@@ -7,34 +7,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.ModalFooter = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _FlexGrid = _interopRequireDefault(require("../../FlexGrid"));
+
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
-var _FlexGrid = _interopRequireDefault(require("../../FlexGrid"));
+var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
 var _excluded = ["className", "children"];
 
+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) { (0, _defineProperty2["default"])(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; }
+
 var ModalFooter = function ModalFooter(_ref) {
   var className = _ref.className,
       children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, props, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["mt-8"]))), className)
-  }), /*#__PURE__*/_react["default"].createElement(_FlexGrid["default"], {
-    spacing: "md",
-    alignment: "center"
-  }, children));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["mt-8"]))), className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid["default"], {
+      spacing: "md",
+      alignment: "center",
+      children: children
+    })
+  }));
 };
 
 exports.ModalFooter = ModalFooter;

package/cjs/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/cjs/Modal/components/ModalSection.js

@@ -9,12 +9,12 @@ exports["default"] = exports.ModalSection = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject;
 
 var ModalSection = function ModalSection(_ref) {
@@ -22,9 +22,10 @@ var ModalSection = function ModalSection(_ref) {
       className = _ref.className,
       _ref$fullBleed = _ref.fullBleed,
       fullBleed = _ref$fullBleed === void 0 ? false : _ref$fullBleed;
-  return /*#__PURE__*/_react["default"].createElement("section", {
-    className: (0, _classnames["default"])(fullBleed && (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["-mx-10"]))), className)
-  }, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+    className: (0, _classnames["default"])(fullBleed && (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["-mx-10"]))), className),
+    children: children
+  });
 };
 
 exports.ModalSection = ModalSection;

package/cjs/Pagination/CompactPagination/CompactPagination.js

@@ -9,13 +9,13 @@ exports.isIndeterminateCompactPaginationProps = exports.isDeterminateCompactPagi
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _reactFeather = require("react-feather");
 
+var _Button = require("../../Button");
+
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
-var _Button = require("../../Button");
+var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
 
@@ -38,39 +38,41 @@ var CompactPagination = function CompactPagination(props) {
   var label = labelType === "none" ? null : labelType === "compact" ? "".concat(props.currentPage) : isDeterminateCompactPaginationProps(props) ? "Page ".concat(props.currentPage, " of ").concat(props.nbPages) : "Page ".concat(props.currentPage, " of many");
   var isFirstPage = props.currentPage === 1;
   var isLastPage = isDeterminateCompactPaginationProps(props) ? props.currentPage === props.nbPages : !!props.nextDisabled;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center space-x-2"])))
-  }, props.showGoToFirstPage && /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
-    icon: _reactFeather.ChevronsLeft,
-    title: "Go to first page",
-    onClick: function onClick() {
-      return props.onChange(1);
-    },
-    disabled: isFirstPage
-  }), /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
-    icon: _reactFeather.ArrowLeft,
-    title: "Go to previous page",
-    onClick: function onClick() {
-      return props.onChange(props.currentPage - 1);
-    },
-    disabled: isFirstPage
-  }), label && /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["inline-block text-center tabular-nums px-2"])))
-  }, label), /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
-    icon: _reactFeather.ArrowRight,
-    title: "Go to next page",
-    onClick: function onClick() {
-      return props.onChange(props.currentPage + 1);
-    },
-    disabled: isLastPage
-  }), isDeterminateCompactPaginationProps(props) && props.showGoToLastPage && /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
-    icon: _reactFeather.ChevronsRight,
-    title: "Go to last page",
-    onClick: function onClick() {
-      return props.onChange(props.nbPages);
-    },
-    disabled: isLastPage
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center space-x-2"]))),
+    children: [props.showGoToFirstPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      icon: _reactFeather.ChevronsLeft,
+      title: "Go to first page",
+      onClick: function onClick() {
+        return props.onChange(1);
+      },
+      disabled: isFirstPage
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      icon: _reactFeather.ArrowLeft,
+      title: "Go to previous page",
+      onClick: function onClick() {
+        return props.onChange(props.currentPage - 1);
+      },
+      disabled: isFirstPage
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["inline-block text-center tabular-nums px-2"]))),
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      icon: _reactFeather.ArrowRight,
+      title: "Go to next page",
+      onClick: function onClick() {
+        return props.onChange(props.currentPage + 1);
+      },
+      disabled: isLastPage
+    }), isDeterminateCompactPaginationProps(props) && props.showGoToLastPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      icon: _reactFeather.ChevronsRight,
+      title: "Go to last page",
+      onClick: function onClick() {
+        return props.onChange(props.nbPages);
+      },
+      disabled: isLastPage
+    })]
+  });
 };
 
 exports.CompactPagination = CompactPagination;

package/cjs/Pagination/DotPagination/DotPagination.js

@@ -9,10 +9,10 @@ exports["default"] = exports.DotPagination = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject, _templateObject2;
 
 var DotPagination = function DotPagination(_ref) {
@@ -21,20 +21,21 @@ var DotPagination = function DotPagination(_ref) {
       nbPages = _ref.nbPages,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size;
-  return /*#__PURE__*/_react["default"].createElement("ul", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"])))
-  }, new Array(nbPages).fill(undefined).map(function (_, idx) {
-    var pageIdx = idx + 1;
-    return /*#__PURE__*/_react["default"].createElement("li", {
-      key: idx
-    }, /*#__PURE__*/_react["default"].createElement("button", {
-      "aria-label": "Go to page ".concat(pageIdx),
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n              rounded-full mx-1\n              ", "\n              ", "\n            "])), currentPage === pageIdx ? "bg-accent-600" : "bg-grey-200", size === "medium" ? "h-3 w-3" : "h-2 w-2"),
-      onClick: function onClick() {
-        return onChange(pageIdx);
-      }
-    }));
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+    children: new Array(nbPages).fill(undefined).map(function (_, idx) {
+      var pageIdx = idx + 1;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": "Go to page ".concat(pageIdx),
+          className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n              rounded-full mx-1\n              ", "\n              ", "\n            "])), currentPage === pageIdx ? "bg-accent-600" : "bg-grey-200", size === "medium" ? "h-3 w-3" : "h-2 w-2"),
+          onClick: function onClick() {
+            return onChange(pageIdx);
+          }
+        })
+      }, idx);
+    })
+  });
 };
 
 exports.DotPagination = DotPagination;