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

package/cjs/InstantSearch/InstantSearch.tailwind.js

@@ -4,24 +4,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var rgba = require("../styles/rgba");
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+
+var disabledColor = require("../styles/disabledColor");
 
 var _require = require("../styles/helpers/icons"),
     toBG = _require.toBG,
     selectIconBG = _require.selectIconBG;
 
-var disabledColor = require("../styles/disabledColor");
-
-module.exports = function (_ref) {
-  var _aisSearchBoxForm;
+var rgba = require("../styles/rgba");
 
+module.exports = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       prefix = _ref.prefix,
       theme = _ref.theme;
   addComponents((0, _defineProperty2["default"])({}, prefix(".instantsearch"), {
     // SearchBox widget
     // ----------------------------------------
-    ".ais-SearchBox-form": (_aisSearchBoxForm = {
+    ".ais-SearchBox-form": {
       position: "relative",
       overflow: "hidden",
       display: "flex",
@@ -31,24 +32,25 @@ module.exports = function (_ref) {
       cursor: "text",
       fontSize: theme("fontSize.base"),
       lineHeight: theme("lineHeight.base"),
-      backgroundColor: theme("colors.white")
-    }, (0, _defineProperty2["default"])(_aisSearchBoxForm, "overflow", "hidden"), (0, _defineProperty2["default"])(_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")),
@@ -116,22 +118,22 @@ module.exports = 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"),
@@ -153,7 +155,7 @@ module.exports = 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", {
@@ -328,14 +330,14 @@ module.exports = 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            ")
@@ -353,7 +355,7 @@ module.exports = 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")
@@ -377,4 +379,4 @@ module.exports = function (_ref) {
   }), {
     respectPrefix: false
   });
-};
+});

package/cjs/KeyboardKey/KeyboardKey.d.ts

@@ -1,5 +1,6 @@
 import type { FC } from "react";
 export interface KeyboardKeyProps {
+    /** @ignore */
     className?: string;
     value: string;
 }

package/cjs/KeyboardKey/KeyboardKey.js

@@ -33,14 +33,15 @@ var KEY_MAPPINGS = {
 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__*/(0, _react.createElement)(KEY_MAPPINGS[value], {
+  var mappedValue = KEY_MAPPINGS[value];
+  var displayed = !mappedValue ? value : typeof mappedValue === "string" ? mappedValue : /*#__PURE__*/(0, _react.createElement)(mappedValue, {
     "aria-label": value,
     width: "1em",
     height: "1em"
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("kbd", {
     className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["keyboard-key "]))), className),
-    children: mappedValue
+    children: displayed
   });
 };
 

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

@@ -1,18 +1,16 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
 
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var keyboardKeyPlugin = function keyboardKeyPlugin(_ref) {
+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",
@@ -28,6 +26,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      "
     }
   });
-};
-
+});
 module.exports = keyboardKeyPlugin;

package/cjs/Link/ButtonLink.js

@@ -36,16 +36,7 @@ var ButtonLink = function ButtonLink(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _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"
   }));
 };
 

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

@@ -5,24 +5,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 // @ts-check
-var rgba = require("../styles/rgba");
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
+var plugin = require("tailwindcss/plugin");
 
+var rgba = require("../styles/rgba");
 
-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
 
@@ -32,6 +30,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))
     }));
   });
-};
-
+});
 module.exports = medallionPlugin;

package/cjs/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,10 +14,10 @@ export interface ModalProps {
     centerY?: boolean;
     onDismiss?: () => void;
     children: ReactNode;
-    closeIconText?: string;
+    locale?: ModalLocale;
 }
 export declare const Modal: {
-    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, closeIconText, }: 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/cjs/Modal/Modal.js

@@ -17,8 +17,6 @@ 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");
@@ -31,6 +29,8 @@ var _Button = require("../Button");
 
 var _Card = _interopRequireDefault(require("../Card"));
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _uniqueId = _interopRequireDefault(require("../utils/uniqueId"));
@@ -45,6 +45,10 @@ 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) { (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 DEFAULT_MODAL_LOCALE = {
+  dismissText: "Dismiss"
+};
+
 var ModalAnimation = function ModalAnimation(props) {
   return (
     /*#__PURE__*/
@@ -88,8 +92,11 @@ 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,
-      _ref$closeIconText = _ref.closeIconText,
-      closeIconText = _ref$closeIconText === void 0 ? "Dismiss" : _ref$closeIconText;
+      propsLocale = _ref.locale;
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  var contextLocale = (0, _Satellite.useLocale)("modal");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -142,11 +149,11 @@ var Modal = function Modal(_ref) {
     "aria-label": "Modal"
   });
 
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContainer, {
+  return 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"]))))
+        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-900/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
@@ -164,10 +171,10 @@ var Modal = function Modal(_ref) {
               children: title
             }), !hideCloseIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
               icon: _reactFeather.X,
-              title: closeIconText,
+              title: locale.dismissText,
               variant: "subtle",
               onClick: onDismiss,
-              className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0 -mr-2"])))
+              className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 -mr-2"])))
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: fullBleed ? undefined : (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["p-10"]))),
@@ -176,7 +183,7 @@ var Modal = function Modal(_ref) {
         })
       }))]
     })
-  }), document.body);
+  }));
 };
 
 exports.Modal = Modal;

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

@@ -1,19 +1,11 @@
 "use strict";
 
 // @ts-check
-var rgba = require("../styles/rgba");
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
+var plugin = require("tailwindcss/plugin");
 
-
-var modalPlugin = function modalPlugin(_ref) {
+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({
@@ -22,33 +14,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)
     }
   });
-};
-
+});
 module.exports = modalPlugin;

package/cjs/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/cjs/Pagination/CompactPagination/CompactPagination.d.ts

@@ -1,11 +1,19 @@
 /// <reference types="react" />
 export declare type CompactPaginationLabel = "complete" | "compact" | "none";
+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) */
     currentPage: number;
     onChange: (page: number) => void;
     showGoToFirstPage?: boolean;
     label?: CompactPaginationLabel;
+    locale?: CompactPaginationLocale;
 };
 export declare type DeterminateCompactPaginationProps = BaseCompactPaginationProps & {
     nbPages: number;

package/cjs/Pagination/CompactPagination/CompactPagination.js

@@ -9,16 +9,34 @@ exports.isIndeterminateCompactPaginationProps = exports.isDeterminateCompactPagi
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _reactFeather = require("react-feather");
 
 var _Button = require("../../Button");
 
+var _Satellite = require("../../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 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) { (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 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");
+  }
+};
+
 var isDeterminateCompactPaginationProps = function isDeterminateCompactPaginationProps(props) {
   return "nbPages" in props;
 };
@@ -34,22 +52,28 @@ exports.isIndeterminateCompactPaginationProps = isIndeterminateCompactPagination
 var CompactPagination = function CompactPagination(props) {
   var _props$label;
 
+  var contextLocale = (0, _Satellite.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) ? "Page ".concat(props.currentPage, " of ").concat(props.nbPages) : "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__*/(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",
+      title: locale.goToFirstPage,
       onClick: function onClick() {
         return props.onChange(1);
       },
       disabled: isFirstPage
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
       icon: _reactFeather.ArrowLeft,
-      title: "Go to previous page",
+      title: locale.goToPreviousPage,
       onClick: function onClick() {
         return props.onChange(props.currentPage - 1);
       },
@@ -59,14 +83,14 @@ var CompactPagination = function CompactPagination(props) {
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
       icon: _reactFeather.ArrowRight,
-      title: "Go to next page",
+      title: locale.goToNextPage,
       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",
+      title: locale.goToLastPage,
       onClick: function onClick() {
         return props.onChange(props.nbPages);
       },

package/cjs/Pagination/DotPagination/DotPagination.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
+export declare type DotPaginationLocale = {
+    goToPageText?(page: number): string;
+};
 export declare type DotPaginationProps = {
     /** Currently selected page (1 based index) */
     currentPage: number;
     onChange: (page: number) => void;
     nbPages: number;
     size?: "small" | "medium";
+    locale?: DotPaginationLocale;
 };
-export declare const DotPagination: ({ currentPage, onChange, nbPages, size }: DotPaginationProps) => JSX.Element;
+export declare const DotPagination: ({ currentPage, onChange, nbPages, size, locale: propsLocale, }: DotPaginationProps) => JSX.Element;
 export default DotPagination;

package/cjs/Pagination/DotPagination/DotPagination.js

@@ -9,25 +9,44 @@ exports["default"] = exports.DotPagination = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _Satellite = require("../../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 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) { (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 DEFAULT_DOT_PAGINATION_LOCALE = {
+  goToPageText: function goToPageText(pageIdx) {
+    return "Go to page ".concat(pageIdx);
+  }
+};
+
 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;
+      size = _ref$size === void 0 ? "medium" : _ref$size,
+      propsLocale = _ref.locale;
+  var contextLocale = (0, _Satellite.useLocale)("dotPagination");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DOT_PAGINATION_LOCALE), contextLocale), propsLocale);
+
   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),
+          "aria-label": locale.goToPageText(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);