cozy-ui-plus 2.0.0 → 2.1.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.1](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@2.1.0...cozy-ui-plus@2.1.1) (2025-11-05)
+
+### Bug Fixes
+
+- **ui-plus:** Now spread props between Paywall and its subcomponents ([a86cf6a](https://github.com/cozy/cozy-libs/commit/a86cf6a353c1d64173226756147a3060f0a41ecc))
+
+# [2.1.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@2.0.0...cozy-ui-plus@2.1.0) (2025-11-05)
+
+### Features
+
+- **ui-plus:** Add AuthentificationDialog locales ([66ad8a3](https://github.com/cozy/cozy-libs/commit/66ad8a3a1f2e234d341a0bde6044ca22434e2824))
+
 # [2.0.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@1.2.0...cozy-ui-plus@2.0.0) (2025-11-05)
 
 ### Features

package/dist/Dialogs/AuthentificationDialog/withSpecificDialogsLocales.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.locales = exports.default = void 0;
+
+var _withOnlyLocales = _interopRequireDefault(require("cozy-ui/transpiled/react/providers/I18n/withOnlyLocales"));
+
+var en = {
+  cancel: "Cancel",
+  allow: "Allow",
+  "authentification-dialog": {
+    title: "Login",
+    "title-oidc": "Twake Pass",
+    subtitle: "For security, please confirm your identity",
+    label: "Twake password",
+    "label-oidc": "Twake Pass password",
+    abort: "Leave",
+    unlock: "Unlock",
+    "forgotten-password": "I forgot my password",
+    errors: {
+      invalid_password: "Incorrect password, try again.",
+      server_error: "Something went wrong with the server. Please, reload the page."
+    }
+  }
+};
+var fr = {
+  cancel: "Annuler",
+  allow: "Autoriser",
+  "authentification-dialog": {
+    title: "Authentification",
+    "title-oidc": "Twake Pass",
+    subtitle: "Par s\xE9curit\xE9, merci de confirmer votre identit\xE9",
+    label: "Mot de passe Twake",
+    "label-oidc": "Mot de passe Twake Pass",
+    abort: "Quitter",
+    unlock: "D\xE9verrouiller",
+    "forgotten-password": "J'ai oubli\xE9 mon mot de passe",
+    errors: {
+      invalid_password: "Mot de passe incorrect, essayer \xE0 nouveau.",
+      server_error: "Une erreur s'est produite. Merci de recharger la page."
+    }
+  }
+};
+var ru = {
+  cancel: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C",
+  allow: "\u0420\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044C",
+  "authentification-dialog": {
+    title: "\u0412\u0445\u043E\u0434",
+    "title-oidc": "Twake Pass",
+    subtitle: "\u0414\u043B\u044F \u0431\u0435\u0437\u043E\u043F\u0430\u0441\u043D\u043E\u0441\u0442\u0438 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435 \u0432\u0430\u0448\u0443 \u043B\u0438\u0447\u043D\u043E\u0441\u0442\u044C",
+    label: "\u041F\u0430\u0440\u043E\u043B\u044C Twake",
+    "label-oidc": "\u041F\u0430\u0440\u043E\u043B\u044C Twake Pass",
+    abort: "\u0412\u044B\u0439\u0442\u0438",
+    unlock: "\u0420\u0430\u0437\u0431\u043B\u043E\u043A\u0438\u0440\u043E\u0432\u0430\u0442\u044C",
+    "forgotten-password": "\u042F \u0437\u0430\u0431\u044B\u043B \u043F\u0430\u0440\u043E\u043B\u044C",
+    errors: {
+      invalid_password: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u043F\u0430\u0440\u043E\u043B\u044C, \u043F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0435\u0449\u0435 \u0440\u0430\u0437.",
+      server_error: "\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043E\u043C. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u043F\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443."
+    }
+  }
+};
+var vi = {
+  cancel: "H\u1EE7y",
+  allow: "Cho ph\xE9p",
+  "authentification-dialog": {
+    title: "\u0110\u0103ng nh\u1EADp",
+    "title-oidc": "Twake Pass",
+    subtitle: "\u0110\u1EC3 b\u1EA3o m\u1EADt, vui l\xF2ng x\xE1c nh\u1EADn danh t\xEDnh c\u1EE7a b\u1EA1n",
+    label: "M\u1EADt kh\u1EA9u Twake",
+    "label-oidc": "M\u1EADt kh\u1EA9u Twake Pass",
+    abort: "R\u1EDDi kh\u1ECFi",
+    unlock: "M\u1EDF kh\xF3a",
+    "forgotten-password": "T\xF4i qu\xEAn m\u1EADt kh\u1EA9u",
+    errors: {
+      invalid_password: "M\u1EADt kh\u1EA9u kh\xF4ng ch\xEDnh x\xE1c, h\xE3y th\u1EED l\u1EA1i.",
+      server_error: "C\xF3 l\u1ED7i x\u1EA3y ra v\u1EDBi m\xE1y ch\u1EE7. Vui l\xF2ng t\u1EA3i l\u1EA1i trang."
+    }
+  }
+};
+var locales = {
+  en: en,
+  fr: fr,
+  ru: ru,
+  vi: vi
+};
+exports.locales = locales;
+
+var _default = (0, _withOnlyLocales.default)(locales);
+
+exports.default = _default;

package/dist/Paywall/MaxAccountsByKonnectorPaywall.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -15,21 +19,24 @@ var _Paywall = _interopRequireDefault(require("./Paywall"));
 
 var _withPaywallLocales = _interopRequireDefault(require("./locales/withPaywallLocales"));
 
+var _excluded = ["max", "konnectorName", "onClose"];
+
 /**
  * Paywall displayed when the user reach the maximum accounts allowed for a konnector
  */
 var MaxAccountsByKonnectorPaywall = function MaxAccountsByKonnectorPaywall(_ref) {
   var max = _ref.max,
       konnectorName = _ref.konnectorName,
-      onClose = _ref.onClose;
-  return /*#__PURE__*/_react.default.createElement(_Paywall.default, {
+      onClose = _ref.onClose,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Paywall.default, (0, _extends2.default)({
     variant: "maxAccountsByKonnector",
     contentInterpolation: {
       smart_count: max,
       konnectorName: konnectorName
     },
     onClose: onClose
-  });
+  }, props));
 };
 
 MaxAccountsByKonnectorPaywall.propTypes = {

package/dist/Paywall/MaxAccountsPaywall.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -15,19 +19,22 @@ var _Paywall = _interopRequireDefault(require("./Paywall"));
 
 var _withPaywallLocales = _interopRequireDefault(require("./locales/withPaywallLocales"));
 
+var _excluded = ["max", "onClose"];
+
 /**
  * Paywall displayed when the user reach the maximum accounts allowed for all konnectors
  */
 var MaxAccountsPaywall = function MaxAccountsPaywall(_ref) {
   var max = _ref.max,
-      onClose = _ref.onClose;
-  return /*#__PURE__*/_react.default.createElement(_Paywall.default, {
+      onClose = _ref.onClose,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Paywall.default, (0, _extends2.default)({
     variant: "maxAccounts",
     contentInterpolation: {
       smart_count: max
     },
     onClose: onClose
-  });
+  }, props));
 };
 
 MaxAccountsPaywall.propTypes = {

package/dist/Paywall/MaxDaysToCapturePaywall.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -15,19 +19,22 @@ var _Paywall = _interopRequireDefault(require("./Paywall"));
 
 var _withPaywallLocales = _interopRequireDefault(require("./locales/withPaywallLocales"));
 
+var _excluded = ["days", "onClose"];
+
 /**
  * Paywall displayed when the user reach the maximum days allowed of capture geolocated data
  */
 var MaxDaysToCapturePaywall = function MaxDaysToCapturePaywall(_ref) {
   var days = _ref.days,
-      onClose = _ref.onClose;
-  return /*#__PURE__*/_react.default.createElement(_Paywall.default, {
+      onClose = _ref.onClose,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Paywall.default, (0, _extends2.default)({
     variant: "maxDaysToCapture",
     contentInterpolation: {
       smart_count: days
     },
     onClose: onClose
-  });
+  }, props));
 };
 
 MaxDaysToCapturePaywall.propTypes = {

package/dist/Paywall/MaxPapersPaywall.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -15,6 +19,8 @@ var _Paywall = _interopRequireDefault(require("./Paywall"));
 
 var _withPaywallLocales = _interopRequireDefault(require("./locales/withPaywallLocales"));
 
+var _excluded = ["max", "onClose"];
+
 /**
  * Paywall displayed when the user reaches the maximum number of papers created via the Mespapiers application.
  *
@@ -24,14 +30,15 @@ var _withPaywallLocales = _interopRequireDefault(require("./locales/withPaywallL
  */
 var MaxPapersPaywall = function MaxPapersPaywall(_ref) {
   var max = _ref.max,
-      onClose = _ref.onClose;
-  return /*#__PURE__*/_react.default.createElement(_Paywall.default, {
+      onClose = _ref.onClose,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Paywall.default, (0, _extends2.default)({
     variant: "maxPapers",
     contentInterpolation: {
       smart_count: max
     },
     onClose: onClose
-  });
+  }, props));
 };
 
 MaxPapersPaywall.propTypes = {

package/dist/Paywall/OnlyOfficePaywall.js

@@ -7,20 +7,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _Paywall = _interopRequireDefault(require("./Paywall"));
 
+var _excluded = ["onClose", "isPublic"];
+
 var OnlyOfficePaywall = function OnlyOfficePaywall(_ref) {
   var onClose = _ref.onClose,
-      isPublic = _ref.isPublic;
-  return /*#__PURE__*/_react.default.createElement(_Paywall.default, {
+      isPublic = _ref.isPublic,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Paywall.default, (0, _extends2.default)({
     variant: "onlyOffice",
     onClose: onClose,
     isPublic: isPublic
-  });
+  }, props));
 };
 /**
  * Paywall displayed when the user is not authorised to access OnlyOffice

package/dist/Paywall/PasswordSharingPaywall.js

@@ -7,19 +7,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _Paywall = _interopRequireDefault(require("./Paywall"));
 
+var _excluded = ["onClose"];
+
 var PasswordSharingPaywall = function PasswordSharingPaywall(_ref) {
-  var onClose = _ref.onClose;
-  return /*#__PURE__*/_react.default.createElement(_Paywall.default, {
+  var onClose = _ref.onClose,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Paywall.default, (0, _extends2.default)({
     variant: "passwordSharing",
     onClose: onClose,
     isPublic: false
-  });
+  }, props));
 };
 /**
  * Paywall displayed when the user is not authorised to share password

package/dist/Paywall/QuotaPaywall.js

@@ -7,21 +7,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _Paywall = _interopRequireDefault(require("./Paywall"));
 
+var _excluded = ["onClose"];
+
 /**
  * Paywall displayed when user disk space is full
  */
 var QuotaPaywall = function QuotaPaywall(_ref) {
-  var onClose = _ref.onClose;
-  return /*#__PURE__*/_react.default.createElement(_Paywall.default, {
+  var onClose = _ref.onClose,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Paywall.default, (0, _extends2.default)({
     variant: "quota",
     onClose: onClose
-  });
+  }, props));
 };
 
 QuotaPaywall.propTypes = {

package/dist/src/Dialogs/AuthentificationDialog/withSpecificDialogsLocales.d.ts

@@ -0,0 +1,12 @@
+export namespace locales {
+    export { en };
+    export { fr };
+    export { ru };
+    export { vi };
+}
+declare const _default: Component;
+export default _default;
+import en from './locales/en.json';
+import fr from './locales/fr.json';
+import ru from './locales/ru.json';
+import vi from './locales/vi.json';

package/dist/src/Paywall/OnlyOfficePaywall.d.ts

@@ -1,5 +1,6 @@
 export default OnlyOfficePaywall;
-declare function OnlyOfficePaywall({ onClose, isPublic }: {
+declare function OnlyOfficePaywall({ onClose, isPublic, ...props }: {
+    [x: string]: any;
     onClose: any;
     isPublic: any;
 }): JSX.Element;

package/dist/src/Paywall/PasswordSharingPaywall.d.ts

@@ -1,5 +1,6 @@
 export default PasswordSharingPaywall;
-declare function PasswordSharingPaywall({ onClose }: {
+declare function PasswordSharingPaywall({ onClose, ...props }: {
+    [x: string]: any;
     onClose: any;
 }): JSX.Element;
 declare namespace PasswordSharingPaywall {

package/dist/src/Paywall/QuotaPaywall.d.ts

@@ -2,7 +2,8 @@ export default QuotaPaywall;
 /**
  * Paywall displayed when user disk space is full
  */
-declare function QuotaPaywall({ onClose }: {
+declare function QuotaPaywall({ onClose, ...props }: {
+    [x: string]: any;
     onClose: any;
 }): JSX.Element;
 declare namespace QuotaPaywall {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -72,5 +72,5 @@
     "react": "^16 || ^17 || ^18",
     "react-dom": "^16 || ^17 || ^18"
   },
-  "gitHead": "a64c909f52d7de12fdec9836ed98f107cf8443b4"
+  "gitHead": "c53696d649980df8a8780451c87c29bc005cea1e"
 }

package/src/Dialogs/AuthentificationDialog/locales/en.json

@@ -0,0 +1,18 @@
+{
+  "cancel": "Cancel",
+  "allow": "Allow",
+  "authentification-dialog": {
+    "title": "Login",
+    "title-oidc": "Twake Pass",
+    "subtitle": "For security, please confirm your identity",
+    "label": "Twake password",
+    "label-oidc": "Twake Pass password",
+    "abort": "Leave",
+    "unlock": "Unlock",
+    "forgotten-password": "I forgot my password",
+    "errors": {
+      "invalid_password": "Incorrect password, try again.",
+      "server_error": "Something went wrong with the server. Please, reload the page."
+    }
+  }
+}

package/src/Dialogs/AuthentificationDialog/locales/fr.json

@@ -0,0 +1,18 @@
+{
+  "cancel": "Annuler",
+  "allow": "Autoriser",
+  "authentification-dialog": {
+    "title": "Authentification",
+    "title-oidc": "Twake Pass",
+    "subtitle": "Par sécurité, merci de confirmer votre identité",
+    "label": "Mot de passe Twake",
+    "label-oidc": "Mot de passe Twake Pass",
+    "abort": "Quitter",
+    "unlock": "Déverrouiller",
+    "forgotten-password": "J'ai oublié mon mot de passe",
+    "errors": {
+      "invalid_password": "Mot de passe incorrect, essayer à nouveau.",
+      "server_error": "Une erreur s'est produite. Merci de recharger la page."
+    }
+  }
+}

package/src/Dialogs/AuthentificationDialog/locales/ru.json

@@ -0,0 +1,18 @@
+{
+  "cancel": "Отменить",
+  "allow": "Разрешить",
+  "authentification-dialog": {
+    "title": "Вход",
+    "title-oidc": "Twake Pass",
+    "subtitle": "Для безопасности подтвердите вашу личность",
+    "label": "Пароль Twake",
+    "label-oidc": "Пароль Twake Pass",
+    "abort": "Выйти",
+    "unlock": "Разблокировать",
+    "forgotten-password": "Я забыл пароль",
+    "errors": {
+      "invalid_password": "Неверный пароль, попробуйте еще раз.",
+      "server_error": "Что-то пошло не так с сервером. Пожалуйста, перезагрузите страницу."
+    }
+  }
+}

package/src/Dialogs/AuthentificationDialog/locales/vi.json

@@ -0,0 +1,18 @@
+{
+  "cancel": "Hủy",
+  "allow": "Cho phép",
+  "authentification-dialog": {
+    "title": "Đăng nhập",
+    "title-oidc": "Twake Pass",
+    "subtitle": "Để bảo mật, vui lòng xác nhận danh tính của bạn",
+    "label": "Mật khẩu Twake",
+    "label-oidc": "Mật khẩu Twake Pass",
+    "abort": "Rời khỏi",
+    "unlock": "Mở khóa",
+    "forgotten-password": "Tôi quên mật khẩu",
+    "errors": {
+      "invalid_password": "Mật khẩu không chính xác, hãy thử lại.",
+      "server_error": "Có lỗi xảy ra với máy chủ. Vui lòng tải lại trang."
+    }
+  }
+}

package/src/Dialogs/AuthentificationDialog/withSpecificDialogsLocales.jsx

@@ -0,0 +1,15 @@
+import withOnlyLocales from 'cozy-ui/transpiled/react/providers/I18n/withOnlyLocales'
+
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+import ru from './locales/ru.json'
+import vi from './locales/vi.json'
+
+export const locales = {
+  en,
+  fr,
+  ru,
+  vi
+}
+
+export default withOnlyLocales(locales)

package/src/Paywall/MaxAccountsByKonnectorPaywall.jsx

@@ -7,7 +7,12 @@ import withPaywallLocales from './locales/withPaywallLocales'
 /**
  * Paywall displayed when the user reach the maximum accounts allowed for a konnector
  */
-const MaxAccountsByKonnectorPaywall = ({ max, konnectorName, onClose }) => {
+const MaxAccountsByKonnectorPaywall = ({
+  max,
+  konnectorName,
+  onClose,
+  ...props
+}) => {
   return (
     <Paywall
       variant="maxAccountsByKonnector"
@@ -16,6 +21,7 @@ const MaxAccountsByKonnectorPaywall = ({ max, konnectorName, onClose }) => {
         konnectorName
       }}
       onClose={onClose}
+      {...props}
     />
   )
 }

package/src/Paywall/MaxAccountsPaywall.jsx

@@ -7,12 +7,13 @@ import withPaywallLocales from './locales/withPaywallLocales'
 /**
  * Paywall displayed when the user reach the maximum accounts allowed for all konnectors
  */
-const MaxAccountsPaywall = ({ max, onClose }) => {
+const MaxAccountsPaywall = ({ max, onClose, ...props }) => {
   return (
     <Paywall
       variant="maxAccounts"
       contentInterpolation={{ smart_count: max }}
       onClose={onClose}
+      {...props}
     />
   )
 }

package/src/Paywall/MaxDaysToCapturePaywall.jsx

@@ -7,12 +7,13 @@ import withPaywallLocales from './locales/withPaywallLocales'
 /**
  * Paywall displayed when the user reach the maximum days allowed of capture geolocated data
  */
-const MaxDaysToCapturePaywall = ({ days, onClose }) => {
+const MaxDaysToCapturePaywall = ({ days, onClose, ...props }) => {
   return (
     <Paywall
       variant="maxDaysToCapture"
       contentInterpolation={{ smart_count: days }}
       onClose={onClose}
+      {...props}
     />
   )
 }

package/src/Paywall/MaxPapersPaywall.jsx

@@ -11,12 +11,13 @@ import withPaywallLocales from './locales/withPaywallLocales'
  * @param {function} onClose - Callback used when the user close the paywall
  * @returns {React.Component} - React component
  */
-const MaxPapersPaywall = ({ max, onClose }) => {
+const MaxPapersPaywall = ({ max, onClose, ...props }) => {
   return (
     <Paywall
       variant="maxPapers"
       contentInterpolation={{ smart_count: max }}
       onClose={onClose}
+      {...props}
     />
   )
 }

package/src/Paywall/OnlyOfficePaywall.jsx

@@ -3,8 +3,15 @@ import React from 'react'
 
 import Paywall from './Paywall'
 
-const OnlyOfficePaywall = ({ onClose, isPublic }) => {
-  return <Paywall variant="onlyOffice" onClose={onClose} isPublic={isPublic} />
+const OnlyOfficePaywall = ({ onClose, isPublic, ...props }) => {
+  return (
+    <Paywall
+      variant="onlyOffice"
+      onClose={onClose}
+      isPublic={isPublic}
+      {...props}
+    />
+  )
 }
 
 /**

package/src/Paywall/PasswordSharingPaywall.jsx

@@ -3,9 +3,14 @@ import React from 'react'
 
 import Paywall from './Paywall'
 
-const PasswordSharingPaywall = ({ onClose }) => {
+const PasswordSharingPaywall = ({ onClose, ...props }) => {
   return (
-    <Paywall variant="passwordSharing" onClose={onClose} isPublic={false} />
+    <Paywall
+      variant="passwordSharing"
+      onClose={onClose}
+      isPublic={false}
+      {...props}
+    />
   )
 }
 

package/src/Paywall/QuotaPaywall.jsx

@@ -6,8 +6,8 @@ import Paywall from './Paywall'
 /**
  * Paywall displayed when user disk space is full
  */
-const QuotaPaywall = ({ onClose }) => {
-  return <Paywall variant="quota" onClose={onClose} />
+const QuotaPaywall = ({ onClose, ...props }) => {
+  return <Paywall variant="quota" onClose={onClose} {...props} />
 }
 
 QuotaPaywall.propTypes = {