@algolia/satellite 1.0.0-beta.133 → 1.0.0-beta.136

package/esm/InstantSearch/InstantSearch.tailwind.d.ts

@@ -1,6 +1,5 @@
-declare function _exports({ addComponents, prefix, theme }: {
-    addComponents: any;
-    prefix: any;
-    theme: any;
-}): void;
+declare const _exports: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};
 export = _exports;

package/esm/InstantSearch/InstantSearch.tailwind.js

@@ -1,22 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _disabledColor from "../styles/disabledColor";
-import _require2 from "../styles/helpers/icons";
 import _rgba from "../styles/rgba";
-var rgba = _rgba;
+import _require2 from "../styles/helpers/icons";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var disabledColor = _disabledColor;
 var _require = _require2,
     toBG = _require.toBG,
     selectIconBG = _require.selectIconBG;
-var disabledColor = _disabledColor;
-export default (function (_ref) {
-  var _aisSearchBoxForm;
-
+var rgba = _rgba;
+export default plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       prefix = _ref.prefix,
       theme = _ref.theme;
   addComponents(_defineProperty({}, prefix(".instantsearch"), {
     // SearchBox widget
     // ----------------------------------------
-    ".ais-SearchBox-form": (_aisSearchBoxForm = {
+    ".ais-SearchBox-form": {
       position: "relative",
       overflow: "hidden",
       display: "flex",
@@ -26,24 +27,25 @@ export default (function (_ref) {
       cursor: "text",
       fontSize: theme("fontSize.base"),
       lineHeight: theme("lineHeight.base"),
-      backgroundColor: theme("colors.white")
-    }, _defineProperty(_aisSearchBoxForm, "overflow", "hidden"), _defineProperty(_aisSearchBoxForm, "&:before", {
-      content: "''",
-      position: "absolute",
-      left: theme("spacing.4"),
-      top: "50%",
-      marginTop: "-".concat(theme("spacing.2")),
-      width: theme("spacing.4"),
-      height: theme("spacing.4"),
-      background: toBG("Search", {
-        color: theme("colors.grey.600"),
-        size: 16
-      })
-    }), _aisSearchBoxForm),
+      backgroundColor: theme("colors.white"),
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        left: theme("spacing.4"),
+        top: "50%",
+        marginTop: "-".concat(theme("spacing.2")),
+        width: theme("spacing.4"),
+        height: theme("spacing.4"),
+        background: toBG("Search", {
+          color: theme("colors.grey.600"),
+          size: 16
+        })
+      }
+    },
     ".ais-SearchBox-input": {
       appearance: "none",
-      flex: 1,
-      minWidth: 0,
+      flex: "1",
+      minWidth: "0px",
       paddingLeft: theme("spacing.10"),
       backgroundColor: theme("colors.white"),
       border: "1px solid ".concat(theme("colors.grey.200")),
@@ -111,22 +113,22 @@ export default (function (_ref) {
       whiteSpace: "nowrap"
     },
     ".ais-Menu-item--selected .ais-Menu-label, .ais-HierarchicalMenu-item--selected > .ais-HierarchicalMenu-link > .ais-HierarchicalMenu-label": {
-      fontWeight: 600
+      fontWeight: "600"
     },
     ".ais-RefinementList-checkbox": {
-      opacity: 0,
+      opacity: "0",
       position: "absolute"
     },
     ".ais-RefinementList-labelText, .ais-HierarchicalMenu-label": {
       position: "relative",
-      left: -1,
-      marginRight: -1,
+      left: "-1px",
+      marginRight: "-1px",
       paddingLeft: theme("spacing.6"),
       "&:before": {
         content: "''",
         overflow: "hidden",
         position: "absolute",
-        left: 1,
+        left: "1px",
         top: "50%",
         marginTop: "-".concat(theme("spacing.2")),
         width: theme("spacing.4"),
@@ -148,7 +150,7 @@ export default (function (_ref) {
       borderColor: "currentColor"
     },
     ".ais-RefinementList-item--selected .ais-RefinementList-labelText:before": {
-      opacity: 1,
+      opacity: "1",
       borderColor: "currentColor",
       boxShadow: "inset 0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
       backgroundImage: toBG("Check", {
@@ -323,14 +325,14 @@ export default (function (_ref) {
         backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)")
       },
       "&:focus": {
-        zIndex: 2,
+        zIndex: "2",
         outline: "none",
         backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
         borderColor: theme("colors.accent.600"),
         boxShadow: "\n              0 0 0 1px ".concat(theme("colors.accent.600"), ",\n              0 2px 0 1px ").concat(theme("colors.shadow.5"), "\n            ")
       },
       "&:active, &.ais-Pagination-link--selected": {
-        zIndex: 1,
+        zIndex: "1",
         backgroundImage: theme("color.grey.100"),
         borderColor: theme("colors.grey.200"),
         boxShadow: "\n              inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n              inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n              0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n            ")
@@ -348,7 +350,7 @@ export default (function (_ref) {
     },
     ".ais-Pagination-item + .ais-Pagination-item > .ais-Pagination-link": {
       marginLeft: "-1px",
-      borderRadius: 0
+      borderRadius: "0px"
     },
     ".ais-Pagination-item:last-child > .ais-Pagination-link": {
       borderRadius: "0 ".concat(theme("borderRadius.DEFAULT"), " ").concat(theme("borderRadius.DEFAULT"), " 0")

package/esm/KeyboardKey/KeyboardKey.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import cx from "classnames";
+import cx from "clsx";
 import { createElement } from "react";
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CornerDownLeft } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
@@ -18,13 +18,14 @@ var KEY_MAPPINGS = {
 export var KeyboardKey = function KeyboardKey(_ref) {
   var className = _ref.className,
       value = _ref.value;
-  var mappedValue = !KEY_MAPPINGS[value] ? value : typeof KEY_MAPPINGS[value] === "string" ? KEY_MAPPINGS[value] : /*#__PURE__*/createElement(KEY_MAPPINGS[value], {
+  var mappedValue = KEY_MAPPINGS[value];
+  var displayed = !mappedValue ? value : typeof mappedValue === "string" ? mappedValue : /*#__PURE__*/createElement(mappedValue, {
     "aria-label": value,
     width: "1em",
     height: "1em"
   });
   return /*#__PURE__*/_jsx("kbd", {
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["keyboard-key "]))), className),
-    children: mappedValue
+    children: displayed
   });
 };

package/esm/KeyboardKey/KeyboardKey.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = keyboardKeyPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const keyboardKeyPlugin: import('../tailwind-types').TailwindPlugin;
+declare const keyboardKeyPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/KeyboardKey/KeyboardKey.tailwind.js

@@ -1,16 +1,14 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var keyboardKeyPlugin = function keyboardKeyPlugin(_ref) {
+var plugin = _plugin;
+var keyboardKeyPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
     ".keyboard-key": {
       borderRadius: theme("borderRadius.DEFAULT"),
-      height: 20,
-      minWidth: 20,
+      height: "20px",
+      minWidth: "20px",
       padding: "0 4px",
       display: "inline-flex",
       textAlign: "center",
@@ -26,6 +24,5 @@ var keyboardKeyPlugin = function keyboardKeyPlugin(_ref) {
       boxShadow: "\n        2px 1px 4px -2px rgba(35, 38, 59, 0.24),\n        inset -0.6px -0.6px 1px #dcdde7, inset 0.6px 0.6px 1px #ffffff\n      "
     }
   });
-};
-
+});
 export default keyboardKeyPlugin;

package/esm/Link/ButtonLink.js

@@ -22,16 +22,7 @@ export var ButtonLink = function ButtonLink(_ref) {
 
   return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
     endIcon: EndIcon,
-    as: "a",
-    onClick: function onClick(evt) {
-      if (props.disabled) {
-        evt.preventDefault();
-      } else {
-        var _linkProps$onClick;
-
-        (_linkProps$onClick = linkProps.onClick) === null || _linkProps$onClick === void 0 ? void 0 : _linkProps$onClick.call(linkProps, evt);
-      }
-    }
+    as: "a"
   }));
 };
 export default ButtonLink;

package/esm/Link/Link.js

@@ -10,7 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 cx from "clsx";
 import { forwardRef } from "react";
 import { ExternalLink } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";

package/esm/Medallion/Medallion.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 var VARIANT_CLASSNAMES = {
@@ -13,6 +13,7 @@ var VARIANT_CLASSNAMES = {
   green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["medallion-green text-green-700"]))),
   orange: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["medallion-orange text-orange-600"]))),
   red: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["medallion-red text-red-600"]))),
+  // eslint-disable-next-line @algolia/satellite/prefer-accent -- here we're definitely refering to the color itself
   white: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["medallion-white text-nebula-500"])))
 };
 export var Medallion = function Medallion(_ref) {

package/esm/Medallion/Medallion.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = medallionPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const medallionPlugin: import('../tailwind-types').TailwindPlugin;
+declare const medallionPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/Medallion/Medallion.tailwind.js

@@ -1,23 +1,21 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _rgba from "../styles/rgba";
+import _plugin from "tailwindcss/plugin";
 // @ts-check
+var plugin = _plugin;
 var rgba = _rgba;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
-var medallionPlugin = function medallionPlugin(_ref) {
+var medallionPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   var colors = ["grey", "pink", "accent", "blue", "green", "orange", "red", "white"];
   addComponents({
     ".medallion": {
-      height: 40,
-      width: 40
+      height: "40px",
+      width: "40px"
     },
     ".medallion-large": {
-      height: 72,
-      width: 72
+      height: "72px",
+      width: "72px"
     }
   }); // Variants
 
@@ -27,6 +25,5 @@ var medallionPlugin = function medallionPlugin(_ref) {
       boxShadow: color === "white" ? "0px 4px 8px -2px rgba(33, 36, 61, 0.25), inset 0px -2px 2px rgba(35, 38, 59, 0.03)" : "0px 4px 8px -2px rgba(33, 36, 61, 0.25), inset 0px -2px 2px ".concat(rgba(theme("colors.".concat(color, ".300")), 0.03))
     }));
   });
-};
-
+});
 export default medallionPlugin;

package/esm/Modal/Modal.d.ts

@@ -1,5 +1,8 @@
 import type { ReactNode } from "react";
 export declare type ModalSizeVariant = "medium" | "large";
+export declare type ModalLocale = {
+    dismissText?: string;
+};
 export interface ModalProps {
     open?: boolean;
     title?: string | JSX.Element;
@@ -11,12 +14,10 @@ export interface ModalProps {
     centerY?: boolean;
     onDismiss?: () => void;
     children: ReactNode;
-    locale?: {
-        dismissText?: string;
-    };
+    locale?: ModalLocale;
 }
 export declare const Modal: {
-    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale, }: ModalProps): import("react").ReactPortal;
+    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale: propsLocale, }: ModalProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     Footer: import("react").FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
 };
 export default Modal;

package/esm/Modal/Modal.js

@@ -8,21 +8,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 cx from "clsx";
 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 { IconButton } from "../Button";
 import Card from "../Card";
+import { useCreatePortal, useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import uniqueId from "../utils/uniqueId";
 import ModalFooter from "./components/ModalFooter";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_MODAL_LOCALE = {
+  dismissText: "Dismiss"
+};
 
 var ModalAnimation = function ModalAnimation(props) {
   return (
@@ -66,7 +69,11 @@ export var Modal = function Modal(_ref) {
       size = _ref$size === void 0 ? "medium" : _ref$size,
       _ref$centerY = _ref.centerY,
       centerY = _ref$centerY === void 0 ? false : _ref$centerY,
-      locale = _ref.locale;
+      propsLocale = _ref.locale;
+  var createPortal = useCreatePortal();
+  var contextLocale = useLocale("modal");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -119,11 +126,11 @@ export var Modal = function Modal(_ref) {
     "aria-label": "Modal"
   });
 
-  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ModalContainer, {
+  return 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"]))))
+        className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-900/30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
       }), /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
         className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center"])))),
         ref: setModalWrapperRef
@@ -141,10 +148,10 @@ export var Modal = function Modal(_ref) {
               children: title
             }), !hideCloseIcon && /*#__PURE__*/_jsx(IconButton, {
               icon: X,
-              title: (locale === null || locale === void 0 ? void 0 : locale.dismissText) || "Dismiss",
+              title: locale.dismissText,
               variant: "subtle",
               onClick: onDismiss,
-              className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex-shrink-0 -mr-2"])))
+              className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["shrink-0 -mr-2"])))
             })]
           }), /*#__PURE__*/_jsx("div", {
             className: fullBleed ? undefined : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["p-10"]))),
@@ -153,7 +160,7 @@ export var Modal = function Modal(_ref) {
         })
       }))]
     })
-  }), document.body);
+  }));
 };
 Modal.Footer = ModalFooter;
 export default Modal;

package/esm/Modal/Modal.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = modalPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const modalPlugin: import('../tailwind-types').TailwindPlugin;
+declare const modalPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/Modal/Modal.tailwind.js

@@ -1,17 +1,9 @@
-import _rgba from "../styles/rgba";
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-var rgba = _rgba;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
-var modalPlugin = function modalPlugin(_ref) {
+var plugin = _plugin;
+var modalPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
-
-  /**
-   * @param {string} color
-   */
   var transitionEasing = "cubic-bezier(0.6, -0.28, 0.735, 0.045)";
   var transitionDuration = 200;
   addComponents({
@@ -20,33 +12,32 @@ var modalPlugin = function modalPlugin(_ref) {
     },
     // Sizes
     ".modal-dialog-medium": {
-      maxWidth: 640
+      maxWidth: "640px"
     },
     ".modal-dialog-large": {
-      maxWidth: 920
+      maxWidth: "920px"
     }
   }); // Animation
 
   addComponents({
     ".satellite-modal-appear .modal-container, .satellite-modal-enter .modal-container": {
-      opacity: 0.1,
+      opacity: "0.1",
       transform: "translate(0, 8px) scale(0.94)"
     },
     ".satellite-modal-appear-active .modal-container, .satellite-modal-enter-active .modal-container": {
-      opacity: 1,
+      opacity: "1",
       transform: "translate(0, 0) scale(1)",
       transition: "all ".concat(transitionDuration, "ms ").concat(transitionEasing)
     },
     ".satellite-modal-exit .modal-container": {
-      opacity: 1,
+      opacity: "1",
       transform: "translate(0, 0) scale(1)"
     },
     ".satellite-modal-exit-active .modal-container": {
-      opacity: 0.1,
+      opacity: "0.1",
       transform: "translate(0, 8px) scale(0.94)",
       transition: "all ".concat(transitionDuration, "ms ").concat(transitionEasing)
     }
   });
-};
-
+});
 export default modalPlugin;

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

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

package/esm/Modal/components/ModalFooter.js

@@ -10,7 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 cx from "clsx";
 import FlexGrid from "../../FlexGrid";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/Modal/components/ModalSection.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var ModalSection = function ModalSection(_ref) {

package/esm/Pagination/CompactPagination/CompactPagination.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 export declare type CompactPaginationLabel = "complete" | "compact" | "none";
-declare type BaseLocaleProps = {
+export declare type CompactPaginationLocale = {
     goToFirstPage?: string;
     goToLastPage?: string;
     goToNextPage?: string;
     goToPreviousPage?: string;
+    label?(page: number, nbPages?: number): string;
 };
 declare type BaseCompactPaginationProps = {
     /** Currently selected page (1 based index) */
@@ -12,19 +13,14 @@ declare type BaseCompactPaginationProps = {
     onChange: (page: number) => void;
     showGoToFirstPage?: boolean;
     label?: CompactPaginationLabel;
+    locale?: CompactPaginationLocale;
 };
 export declare type DeterminateCompactPaginationProps = BaseCompactPaginationProps & {
     nbPages: number;
     showGoToLastPage?: boolean;
-    locale?: BaseLocaleProps & {
-        label?(page: number, nbPages: number): string;
-    };
 };
 export declare type IndeterminateCompactPaginationProps = BaseCompactPaginationProps & {
     nextDisabled?: boolean;
-    locale?: BaseLocaleProps & {
-        label?(page: number): string;
-    };
 };
 export declare type CompactPaginationProps = DeterminateCompactPaginationProps | IndeterminateCompactPaginationProps;
 export declare const isDeterminateCompactPaginationProps: (props: CompactPaginationProps) => props is DeterminateCompactPaginationProps;

package/esm/Pagination/CompactPagination/CompactPagination.js

@@ -1,12 +1,27 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _templateObject, _templateObject2;
 
+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 { ArrowLeft, ArrowRight, ChevronsLeft, ChevronsRight } from "react-feather";
 import { IconButton } from "../../Button";
+import { useLocale } from "../../Satellite";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_COMPACT_PAGINATION_LOCALE = {
+  goToFirstPage: "Go to first page",
+  goToPreviousPage: "Go to previous page",
+  goToNextPage: "Go to next page",
+  goToLastPage: "Go to last page",
+  label: function label(page, nbPages) {
+    return typeof nbPages === "number" ? "Page ".concat(page, " of ").concat(nbPages) : "Page ".concat(page, " of many");
+  }
+};
 export var isDeterminateCompactPaginationProps = function isDeterminateCompactPaginationProps(props) {
   return "nbPages" in props;
 };
@@ -14,24 +29,30 @@ export var isIndeterminateCompactPaginationProps = function isIndeterminateCompa
   return !isDeterminateCompactPaginationProps(props);
 };
 export var CompactPagination = function CompactPagination(props) {
-  var _props$label, _props$locale, _props$locale$label, _props$locale2, _props$locale2$label, _props$locale3, _props$locale4, _props$locale5, _props$locale6;
+  var _props$label;
+
+  var contextLocale = useLocale("compactPagination");
+
+  var locale = _objectSpread(_objectSpread({}, DEFAULT_COMPACT_PAGINATION_LOCALE), {}, {
+    contextLocale: contextLocale
+  }, props.locale);
 
   var labelType = (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : isDeterminateCompactPaginationProps(props) ? "complete" : "compact";
-  var label = labelType === "none" ? null : labelType === "compact" ? "".concat(props.currentPage) : isDeterminateCompactPaginationProps(props) ? ((_props$locale = props.locale) === null || _props$locale === void 0 ? void 0 : (_props$locale$label = _props$locale.label) === null || _props$locale$label === void 0 ? void 0 : _props$locale$label.call(_props$locale, props.currentPage, props.nbPages)) || "Page ".concat(props.currentPage, " of ").concat(props.nbPages) : ((_props$locale2 = props.locale) === null || _props$locale2 === void 0 ? void 0 : (_props$locale2$label = _props$locale2.label) === null || _props$locale2$label === void 0 ? void 0 : _props$locale2$label.call(_props$locale2, props.currentPage)) || "Page ".concat(props.currentPage, " of many");
+  var label = labelType === "none" ? null : labelType === "compact" ? "".concat(props.currentPage) : isDeterminateCompactPaginationProps(props) ? locale.label(props.currentPage, props.nbPages) : locale.label(props.currentPage);
   var isFirstPage = props.currentPage === 1;
   var isLastPage = isDeterminateCompactPaginationProps(props) ? props.currentPage === props.nbPages : !!props.nextDisabled;
   return /*#__PURE__*/_jsxs("div", {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center space-x-2"]))),
     children: [props.showGoToFirstPage && /*#__PURE__*/_jsx(IconButton, {
       icon: ChevronsLeft,
-      title: ((_props$locale3 = props.locale) === null || _props$locale3 === void 0 ? void 0 : _props$locale3.goToFirstPage) || "Go to first page",
+      title: locale.goToFirstPage,
       onClick: function onClick() {
         return props.onChange(1);
       },
       disabled: isFirstPage
     }), /*#__PURE__*/_jsx(IconButton, {
       icon: ArrowLeft,
-      title: ((_props$locale4 = props.locale) === null || _props$locale4 === void 0 ? void 0 : _props$locale4.goToPreviousPage) || "Go to previous page",
+      title: locale.goToPreviousPage,
       onClick: function onClick() {
         return props.onChange(props.currentPage - 1);
       },
@@ -41,14 +62,14 @@ export var CompactPagination = function CompactPagination(props) {
       children: label
     }), /*#__PURE__*/_jsx(IconButton, {
       icon: ArrowRight,
-      title: ((_props$locale5 = props.locale) === null || _props$locale5 === void 0 ? void 0 : _props$locale5.goToNextPage) || "Go to next page",
+      title: locale.goToNextPage,
       onClick: function onClick() {
         return props.onChange(props.currentPage + 1);
       },
       disabled: isLastPage
     }), isDeterminateCompactPaginationProps(props) && props.showGoToLastPage && /*#__PURE__*/_jsx(IconButton, {
       icon: ChevronsRight,
-      title: ((_props$locale6 = props.locale) === null || _props$locale6 === void 0 ? void 0 : _props$locale6.goToLastPage) || "Go to last page",
+      title: locale.goToLastPage,
       onClick: function onClick() {
         return props.onChange(props.nbPages);
       },