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

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,27 +1,35 @@
 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;
 
-import React, { useRef, useState, useEffect } 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 { 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,
@@ -31,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 = {
@@ -67,6 +77,9 @@ export var Modal = function Modal(_ref) {
   var dialogRef = useRef(null);
   var mouseDownTargetRef = useRef(null);
   var ModalContainer = animate ? ModalAnimation : ModalNoAnimation;
+  var modalTitleId = useMemo(function () {
+    return uniqueId("modal-title");
+  }, []);
   useLockBodyScroll(open);
   useKeyPressEvent("Escape", function () {
     if (open) onDismiss();
@@ -98,32 +111,50 @@ export var Modal = function Modal(_ref) {
       modalWrapperRef.removeEventListener("mousedown", onMouseDown);
     };
   }, [modalWrapperRef, onDismiss]);
-  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", {
-    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,
+
+  var modalAccessibilityProps = _objectSpread({
     role: "dialog"
-  }, /*#__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", {
-    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);
+  }, title ? {
+    "aria-labelledby": modalTitleId
+  } : {
+    "aria-label": "Modal"
+  });
+
+  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;

package/esm/Pagination/CompactPagination/CompactPagination.js

@@ -2,10 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
-import React from "react";
-import { ChevronsRight, ChevronsLeft, ArrowLeft, ArrowRight } from "react-feather";
-import stl from "../../styles/helpers/satellitePrefixer";
+import { ArrowLeft, ArrowRight, ChevronsLeft, ChevronsRight } from "react-feather";
 import { IconButton } from "../../Button";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var isDeterminateCompactPaginationProps = function isDeterminateCompactPaginationProps(props) {
   return "nbPages" in props;
 };
@@ -19,38 +20,40 @@ export 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.createElement("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center space-x-2"])))
-  }, props.showGoToFirstPage && /*#__PURE__*/React.createElement(IconButton, {
-    icon: ChevronsLeft,
-    title: "Go to first page",
-    onClick: function onClick() {
-      return props.onChange(1);
-    },
-    disabled: isFirstPage
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    icon: ArrowLeft,
-    title: "Go to previous page",
-    onClick: function onClick() {
-      return props.onChange(props.currentPage - 1);
-    },
-    disabled: isFirstPage
-  }), label && /*#__PURE__*/React.createElement("span", {
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["inline-block text-center tabular-nums px-2"])))
-  }, label), /*#__PURE__*/React.createElement(IconButton, {
-    icon: ArrowRight,
-    title: "Go to next page",
-    onClick: function onClick() {
-      return props.onChange(props.currentPage + 1);
-    },
-    disabled: isLastPage
-  }), isDeterminateCompactPaginationProps(props) && props.showGoToLastPage && /*#__PURE__*/React.createElement(IconButton, {
-    icon: ChevronsRight,
-    title: "Go to last page",
-    onClick: function onClick() {
-      return props.onChange(props.nbPages);
-    },
-    disabled: isLastPage
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center space-x-2"]))),
+    children: [props.showGoToFirstPage && /*#__PURE__*/_jsx(IconButton, {
+      icon: ChevronsLeft,
+      title: "Go to first page",
+      onClick: function onClick() {
+        return props.onChange(1);
+      },
+      disabled: isFirstPage
+    }), /*#__PURE__*/_jsx(IconButton, {
+      icon: ArrowLeft,
+      title: "Go to previous page",
+      onClick: function onClick() {
+        return props.onChange(props.currentPage - 1);
+      },
+      disabled: isFirstPage
+    }), label && /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["inline-block text-center tabular-nums px-2"]))),
+      children: label
+    }), /*#__PURE__*/_jsx(IconButton, {
+      icon: ArrowRight,
+      title: "Go to next page",
+      onClick: function onClick() {
+        return props.onChange(props.currentPage + 1);
+      },
+      disabled: isLastPage
+    }), isDeterminateCompactPaginationProps(props) && props.showGoToLastPage && /*#__PURE__*/_jsx(IconButton, {
+      icon: ChevronsRight,
+      title: "Go to last page",
+      onClick: function onClick() {
+        return props.onChange(props.nbPages);
+      },
+      disabled: isLastPage
+    })]
+  });
 };
 export default CompactPagination;

package/esm/Pagination/DotPagination/DotPagination.js

@@ -2,27 +2,28 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
-import React from "react";
 import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
 export var DotPagination = function DotPagination(_ref) {
   var currentPage = _ref.currentPage,
       onChange = _ref.onChange,
       nbPages = _ref.nbPages,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size;
-  return /*#__PURE__*/React.createElement("ul", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"])))
-  }, new Array(nbPages).fill(undefined).map(function (_, idx) {
-    var pageIdx = idx + 1;
-    return /*#__PURE__*/React.createElement("li", {
-      key: idx
-    }, /*#__PURE__*/React.createElement("button", {
-      "aria-label": "Go to page ".concat(pageIdx),
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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__*/_jsx("ul", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"]))),
+    children: new Array(nbPages).fill(undefined).map(function (_, idx) {
+      var pageIdx = idx + 1;
+      return /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx("button", {
+          "aria-label": "Go to page ".concat(pageIdx),
+          className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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);
+    })
+  });
 };
 export default DotPagination;

package/esm/Pagination/Pagination/Pagination.js

@@ -2,35 +2,40 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from "react";
 import { ArrowLeft, ArrowRight } from "react-feather";
+import Button, { ButtonGroup } from "../../Button";
 import stl from "../../styles/helpers/satellitePrefixer";
 import range from "../../utils/range";
-import Button, { ButtonGroup } from "../../Button";
+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_MAX_BUTTONS = 10;
 
 var Ellipsis = function Ellipsis() {
-  return /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/_jsx(Button, {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["pointer-events-none"]))),
     tabIndex: -1,
-    "aria-disabled": true
-  }, "\u2026");
+    "aria-disabled": true,
+    children: "\u2026"
+  });
 };
 
 var Group = function Group(_ref) {
   var group = _ref.group,
       currentPage = _ref.currentPage,
       onChange = _ref.onChange;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, group.map(function (index) {
-    return /*#__PURE__*/React.createElement(Button, {
-      "aria-label": "Go to page ".concat(index),
-      key: index,
-      variant: index === currentPage ? "primary" : "neutral",
-      onClick: function onClick() {
-        return onChange(index);
-      }
-    }, index);
-  }));
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: group.map(function (index) {
+      return /*#__PURE__*/_jsx(Button, {
+        "aria-label": "Go to page ".concat(index),
+        variant: index === currentPage ? "primary" : "neutral",
+        onClick: function onClick() {
+          return onChange(index);
+        },
+        children: index
+      }, index);
+    })
+  });
 };
 /**
  * Use pagination to help our users to move through an ordered collection of items.
@@ -61,36 +66,39 @@ export var Pagination = function Pagination(_ref2) {
     groups[2].push(nbPages);
   }
 
-  return /*#__PURE__*/React.createElement(ButtonGroup, {
-    as: "nav"
-  }, /*#__PURE__*/React.createElement(Button, {
-    "aria-label": "Go to previous page",
-    disabled: currentPage === 1,
-    onClick: function onClick() {
-      return onChange(currentPage - 1);
-    }
-  }, /*#__PURE__*/React.createElement(ArrowLeft, {
-    size: "1em"
-  })), /*#__PURE__*/React.createElement(Group, {
-    currentPage: currentPage,
-    onChange: onChange,
-    group: groups[0]
-  }), groups[0].length !== 0 && groups[1][0] - groups[0][0] > 1 && /*#__PURE__*/React.createElement(Ellipsis, null), /*#__PURE__*/React.createElement(Group, {
-    currentPage: currentPage,
-    onChange: onChange,
-    group: groups[1]
-  }), groups[2].length !== 0 && groups[2][0] - groups[1][groups[1].length - 1] > 1 && /*#__PURE__*/React.createElement(Ellipsis, null), /*#__PURE__*/React.createElement(Group, {
-    currentPage: currentPage,
-    onChange: onChange,
-    group: groups[2]
-  }), /*#__PURE__*/React.createElement(Button, {
-    "aria-label": "Go to next page",
-    disabled: currentPage === nbPages,
-    onClick: function onClick() {
-      return onChange(currentPage + 1);
-    }
-  }, /*#__PURE__*/React.createElement(ArrowRight, {
-    size: "1em"
-  })));
+  return /*#__PURE__*/_jsxs(ButtonGroup, {
+    as: "nav",
+    children: [/*#__PURE__*/_jsx(Button, {
+      "aria-label": "Go to previous page",
+      disabled: currentPage === 1,
+      onClick: function onClick() {
+        return onChange(currentPage - 1);
+      },
+      children: /*#__PURE__*/_jsx(ArrowLeft, {
+        size: "1em"
+      })
+    }), /*#__PURE__*/_jsx(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[0]
+    }), groups[0].length !== 0 && groups[1][0] - groups[0][0] > 1 && /*#__PURE__*/_jsx(Ellipsis, {}), /*#__PURE__*/_jsx(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[1]
+    }), groups[2].length !== 0 && groups[2][0] - groups[1][groups[1].length - 1] > 1 && /*#__PURE__*/_jsx(Ellipsis, {}), /*#__PURE__*/_jsx(Group, {
+      currentPage: currentPage,
+      onChange: onChange,
+      group: groups[2]
+    }), /*#__PURE__*/_jsx(Button, {
+      "aria-label": "Go to next page",
+      disabled: currentPage === nbPages,
+      onClick: function onClick() {
+        return onChange(currentPage + 1);
+      },
+      children: /*#__PURE__*/_jsx(ArrowRight, {
+        size: "1em"
+      })
+    })]
+  });
 };
 export default Pagination;

package/esm/ProgressBar/ProgressBar.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+import type { HTMLAttributes } from "react";
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
     barClassName?: string;
     value: number;
 }

package/esm/ProgressBar/ProgressBar.js

@@ -1,13 +1,18 @@
-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;
 
 var _excluded = ["value", "className", "barClassName"];
-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 { jsx as _jsx } from "react/jsx-runtime";
 
 /**
  * Progress bars visually represent the completion of a task or operation.
@@ -21,18 +26,19 @@ export var ProgressBar = function ProgressBar(_ref) {
       barClassName = _ref.barClassName,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["progress-bar"]))), className),
     role: "progressbar",
     "aria-valuenow": value,
     "aria-valuemin": 0,
-    "aria-valuemax": 100
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["progress-bar-progress"]))), barClassName),
-    style: {
-      width: "".concat(value, "%"),
-      transition: "all 150ms ease-in-out"
-    }
+    "aria-valuemax": 100,
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["progress-bar-progress"]))), barClassName),
+      style: {
+        width: "".concat(value, "%"),
+        transition: "all 150ms ease-in-out"
+      }
+    })
   }));
 };
 export default ProgressBar;

package/esm/ProgressSpinner/ProgressSpinner.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
+import type { SVGAttributes } from "react";
 export declare type ProgressSpinnerAlign = "left" | "center" | "right";
-export interface ProgressSpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+export interface ProgressSpinnerProps extends SVGAttributes<SVGSVGElement> {
     size?: number;
     thickness?: number;
     align?: ProgressSpinnerAlign;