cozy-sharing 7.1.3 → 8.0.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 8.0.0 (2023-07-05)
+
+
+### Features
+
+* Display reconnection webview for powens konnectors ([a924d3e](https://github.com/cozy/cozy-libs/commit/a924d3e13524f211bc8ae45435a012b8e2125ed8))
+* Update cozy-ui to 88 with codemods ([7ba4172](https://github.com/cozy/cozy-libs/commit/7ba41729ff1b67830fb131655434da61e40949a5))
+
+
+### BREAKING CHANGES
+
+* - you need to update cozy-ui to >=88.2.1
+
+
+
+
+
 ## [7.1.3](https://github.com/cozy/cozy-libs/compare/cozy-sharing@7.1.2...cozy-sharing@7.1.3) (2023-04-13)
 
 **Note:** Version bump only for package cozy-sharing

package/dist/ShareButtonWithRecipients.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["docId", "onClick"];
 import React from 'react';
-import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid';
+import Grid from 'cozy-ui/transpiled/react/Grid';
 import Skeleton from 'cozy-ui/transpiled/react/Skeleton';
 import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
 import { ShareButton } from './ShareButton';

package/dist/SharingBanner/components/PublicBanner.js

@@ -3,8 +3,8 @@ import React from 'react';
 import snarkdown from 'snarkdown';
 import { useClient } from 'cozy-client';
 import Banner from 'cozy-ui/transpiled/react/Banner';
-import Button, { ButtonLink } from 'cozy-ui/transpiled/react/Button';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import Button, { ButtonLink } from 'cozy-ui/transpiled/react/deprecated/Button';
 import CozyHomeLinkIcon from './CozyHomeLinkIcon';
 var styles = {
   "bannermarkdown": "publicBanner__bannermarkdown___1EMSa"

package/dist/SharingDetailsModal.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs';
+import Divider from 'cozy-ui/transpiled/react/Divider';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
-import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider';
 import OwnerIdentity from './components/Recipient/OwnerIdentity';
 import WhoHasAccess from './components/WhoHasAccess';
 import { getDisplayName } from './models';

package/dist/SharingProvider.js

@@ -401,6 +401,14 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
       };
     }());
 
+    /**
+     * updateDocumentPermissions - Description
+     *
+     * @param {Object} document A shared document
+     * @param {Array} newVerbs The new verbs to use for the permission, eg. ['GET']
+     *
+     * @return {Array}
+     */
     _defineProperty(_assertThisInitialized(_this), "updateDocumentPermissions", /*#__PURE__*/function () {
       var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10(document, newVerbs) {
         var permissions, responses;

package/dist/components/ContactSuggestion.js

@@ -4,9 +4,9 @@ import React from 'react';
 import { models } from 'cozy-client';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import ListItem from 'cozy-ui/transpiled/react/ListItem';
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
-import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem';
-import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon';
 import { Contact, Group, getDisplayName, getInitials } from '../models';
 var ContactModel = models.contact;
 export var ContactSuggestion = function ContactSuggestion(_ref) {

package/dist/components/Recipient/LinkRecipient.js

@@ -6,9 +6,9 @@ import Fade from 'cozy-ui/transpiled/react/Fade';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link';
+import ListItem from 'cozy-ui/transpiled/react/ListItem';
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
-import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem';
-import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon';
 import Typography from 'cozy-ui/transpiled/react/Typography';
 import LinkRecipientPermissions from './LinkRecipientPermissions';
 import RecipientConfirm from './RecipientConfirm';

package/dist/components/Recipient/LinkRecipientPermissions.js

@@ -2,14 +2,14 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useRef } from 'react';
-import ActionMenu, { ActionMenuItem, ActionMenuRadio } from 'cozy-ui/transpiled/react/ActionMenu';
-import Alerter from 'cozy-ui/transpiled/react/Alerter';
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash';
 import Spinner from 'cozy-ui/transpiled/react/Spinner';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import ActionMenu, { ActionMenuItem, ActionMenuRadio } from 'cozy-ui/transpiled/react/deprecated/ActionMenu';
+import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter';
 import { isOnlyReadOnlyLinkAllowed } from '../../helpers/link';
 import { checkIsReadOnlyPermissions } from '../../helpers/permissions';
 import logger from '../../logger';

package/dist/components/Recipient/Recipient.js

@@ -6,9 +6,9 @@ import React from 'react';
 import { useClient } from 'cozy-client';
 import Fade from 'cozy-ui/transpiled/react/Fade';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import ListItem from 'cozy-ui/transpiled/react/ListItem';
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
-import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem';
-import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon';
 import Typography from 'cozy-ui/transpiled/react/Typography';
 import RecipientAvatar from './RecipientAvatar';
 import RecipientConfirm from './RecipientConfirm';

package/dist/components/Recipient/RecipientConfirm.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Button from 'cozy-ui/transpiled/react/Button';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import Button from 'cozy-ui/transpiled/react/deprecated/Button';
 var modalStyles = {
   "share-modal-content": "share__share-modal-content___XTtaK",
   "coz-form": "share__coz-form___33NYF",

package/dist/components/Recipient/RecipientPermissions.js

@@ -3,7 +3,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useRef, useCallback } from 'react';
 import { useClient } from 'cozy-client';
-import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu';
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
 import Icon from 'cozy-ui/transpiled/react/Icon';
@@ -12,6 +11,7 @@ import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename';
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash';
 import Spinner from 'cozy-ui/transpiled/react/Spinner';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/deprecated/ActionMenu';
 
 var RecipientPermissions = function RecipientPermissions(_ref) {
   var isOwner = _ref.isOwner,

package/dist/components/Recipient/RecipientStatus.js

@@ -4,8 +4,8 @@ import Icon from 'cozy-ui/transpiled/react/Icon';
 import EyeIcon from 'cozy-ui/transpiled/react/Icons/Eye';
 import PaperplaneIcon from 'cozy-ui/transpiled/react/Icons/Paperplane';
 import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud';
-import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media';
 var styles = {
   "CozyTheme--inverted": "recipient__CozyTheme--inverted___2Hb9c",
   "CozyTheme--normal": "recipient__CozyTheme--normal___3WdEw",

package/dist/components/ShareButton.js

@@ -5,9 +5,9 @@ var _excluded = ["label", "onClick", "className"],
     _excluded3 = ["label", "onClick", "className"];
 import classNames from 'classnames';
 import React from 'react';
-import { Button } from 'cozy-ui/transpiled/react/Button';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share';
+import { Button } from 'cozy-ui/transpiled/react/deprecated/Button';
 var styles = {
   "coz-btn-shared": "button__coz-btn-shared___2BoMk",
   "coz-btn-sharedWithMe": "button__coz-btn-sharedWithMe___2Vjfh"

package/dist/components/ShareByEmail.js

@@ -6,8 +6,8 @@ import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useClient } from 'cozy-client';
-import Alerter from 'cozy-ui/transpiled/react/Alerter';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter';
 import ShareRecipientsInput from './ShareRecipientsInput';
 import ShareSubmit from './Sharesubmit';
 import ShareTypeSelect from './Sharetypeselect';

package/dist/components/ShareDialogTwoStepsConfirmationContainer.js

@@ -2,10 +2,10 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useEffect, useState } from 'react';
-import Button from 'cozy-ui/transpiled/react/Button';
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
 import Spinner from 'cozy-ui/transpiled/react/Spinner';
+import Button from 'cozy-ui/transpiled/react/deprecated/Button';
 import { useSafeState } from '../helpers/hooks';
 /**
  * Displays a loader that can be used when ShareDialogTwoStepsConfirmationContainer is in loading state

package/dist/components/Sharesubmit.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Button } from 'cozy-ui/transpiled/react/Button';
+import { Button } from 'cozy-ui/transpiled/react/deprecated/Button';
 
 var ShareSubmit = function ShareSubmit(props) {
   return /*#__PURE__*/React.createElement(Button, {

package/dist/components/WhoHasAccess.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
-import List from 'cozy-ui/transpiled/react/MuiCozyTheme/List';
+import List from 'cozy-ui/transpiled/react/List';
 import LinkRecipient from './Recipient/LinkRecipient';
 import OwnerRecipient from './Recipient/OwnerRecipient';
 import Recipient from './Recipient/Recipient';

package/dist/stylesheet.css

@@ -4,7 +4,7 @@
   background-color: var(--paleGrey);
   color: var(--silver);
   position: relative;
-  z-index: $low-index;
+  z-index: var(--zIndex-low);
 }
 .publicBanner__bannermarkdown___1EMSa img svg {
   width: 50%;
@@ -760,21 +760,6 @@
 }
 @media (max-width: 48rem) {
 }
-html {
-  --zIndex-below: -1;
-  --zIndex-app: 0;
-  --zIndex-low: 1;
-  --zIndex-alertMobile: 10;
-  --zIndex-nav: 20;
-  --zIndex-bar: 21;
-  --zIndex-selection: 30;
-  --zIndex-popover: 40;
-  --zIndex-overlay: 50;
-  --zIndex-fileActionMenu: 60;
-  --zIndex-drawer: 60;
-  --zIndex-modal: 70;
-  --zindex-alert: 80;
-}
 :root {
   --invertedBackgroundColor: #297ef2;
   --invertedContrastTextColor: #fff;
@@ -1005,7 +990,7 @@ html,
     Hexadecimal colors are here only as an example on a white background.
 
     Stylus: primaryTextColor -  #383B43, CSS: var(--primaryTextColor)
-    Stylus: secondaryTextColor - #9D9EA1, CSS: var(--secondaryTextColor)
+    Stylus: secondaryTextColor - #6F7177, CSS: var(--secondaryTextColor)
     Stylus: disabledTextColor - #BEBFC1, CSS: var(--disabledTextColor)
     Stylus: hintTextColor - #BEBFC1, CSS: var(--hintTextColor)
     Stylus: iconTextColor - #66686D, CSS: var(--iconTextColor)
@@ -1013,7 +998,7 @@ html,
     Styleguide Settings.theme.text
     */
   --primaryTextColor: rgba(29,33,42,0.9);
-  --secondaryTextColor: rgba(29,33,42,0.48);
+  --secondaryTextColor: rgba(29,33,42,0.64);
   --disabledTextColor: rgba(29,33,42,0.32);
   --hintTextColor: rgba(29,33,42,0.32);
   --iconTextColor: rgba(29,33,42,0.72);
@@ -1074,14 +1059,14 @@ html,
     Success colors
 
     Stylus: successColorLight        -  #38C949, CSS: var(--successColorLight)
-    Stylus: successColor             -  #09AE1C, CSS: var(--successColor)
+    Stylus: successColor             -  #09AB1B, CSS: var(--successColor)
     Stylus: successColorDark         -  #018711, CSS: var(--successColorDark)
     Stylus: successColorContrastText -  #FFF, CSS: var(--successColorContrastText)
 
     Styleguide Settings.theme.success
     */
   --successColorLight: #38c949;
-  --successColor: #09ae1c;
+  --successColor: #09ab1b;
   --successColorDark: #018711;
   --successColorContrastText: #fff;
 /*
@@ -1130,6 +1115,35 @@ html,
   --infoColor: #009fa2;
   --infoColorDark: #007578;
   --infoColorContrastText: #fff;
+/*
+    Shadow colors
+    */
+  --shadow0: none;
+  --shadow1: 0px 2px 4px 0px rgba(29,33,42,0.08), 0px 4px 16px 0px rgba(29,33,42,0.06), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow2: 0px 3px 5px 0px rgba(29,33,42,0.09), 0px 4px 17px 0px rgba(29,33,42,0.07), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow3: 0px 3px 5px -1px rgba(29,33,42,0.09), 0px 5px 19px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow4: 0px 3px 6px -1px rgba(29,33,42,0.1), 0px 5px 20px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow5: 0px 4px 6px -1px rgba(29,33,42,0.11), 0px 5px 22px 1px rgba(29,33,42,0.09), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow6: 0px 4px 7px -2px rgba(29,33,42,0.11), 0px 6px 23px 2px rgba(29,33,42,0.1), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow7: 0px 5px 7px -2px rgba(29,33,42,0.12), 0px 6px 24px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow8: 0px 5px 8px -2px rgba(29,33,42,0.13), 0px 6px 26px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow9: 0px 5px 8px -3px rgba(29,33,42,0.14), 0px 7px 27px 3px rgba(29,33,42,0.12), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow10: 0px 6px 9px -3px rgba(29,33,42,0.14), 0px 7px 29px 3px rgba(29,33,42,0.13), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow11: 0px 6px 9px -3px rgba(29,33,42,0.15), 0px 7px 30px 3px rgba(29,33,42,0.14), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow12: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 31px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow13: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 33px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow14: 0px 8px 11px -5px rgba(29,33,42,0.17), 0px 9px 34px 5px rgba(29,33,42,0.16), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow15: 0px 8px 11px -5px rgba(29,33,42,0.18), 0px 9px 35px 5px rgba(29,33,42,0.17), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow16: 0px 9px 12px -5px rgba(29,33,42,0.18), 0px 9px 37px 5px rgba(29,33,42,0.18), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow17: 0px 9px 12px -6px rgba(29,33,42,0.19), 0px 10px 38px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow18: 0px 9px 13px -6px rgba(29,33,42,0.2), 0px 10px 40px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow19: 0px 10px 13px -6px rgba(29,33,42,0.21), 0px 10px 41px 6px rgba(29,33,42,0.2), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow20: 0px 10px 14px -7px rgba(29,33,42,0.21), 0px 11px 42px 7px rgba(29,33,42,0.21), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow21: 0px 11px 14px -7px rgba(29,33,42,0.22), 0px 11px 44px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow22: 0px 11px 15px -7px rgba(29,33,42,0.23), 0px 11px 45px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow23: 0px 12px 15px -8px rgba(29,33,42,0.23), 0px 12px 47px 8px rgba(29,33,42,0.23), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow24: 0px 12px 16px -8px rgba(29,33,42,0.24), 0px 12px 48px 8px rgba(29,33,42,0.24), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow25: 0px 1px 4px rgba(29,33,42,0.04);
 /*
     ---------------------------------------------------------------------
     */
@@ -2116,7 +2130,7 @@ html,
     Hexadecimal colors are here only as an example on a white background.
 
     Stylus: primaryTextColor -  #383B43, CSS: var(--primaryTextColor)
-    Stylus: secondaryTextColor - #9D9EA1, CSS: var(--secondaryTextColor)
+    Stylus: secondaryTextColor - #6F7177, CSS: var(--secondaryTextColor)
     Stylus: disabledTextColor - #BEBFC1, CSS: var(--disabledTextColor)
     Stylus: hintTextColor - #BEBFC1, CSS: var(--hintTextColor)
     Stylus: iconTextColor - #66686D, CSS: var(--iconTextColor)
@@ -2124,7 +2138,7 @@ html,
     Styleguide Settings.theme.text
     */
   --primaryTextColor: rgba(29,33,42,0.9);
-  --secondaryTextColor: rgba(29,33,42,0.48);
+  --secondaryTextColor: rgba(29,33,42,0.64);
   --disabledTextColor: rgba(29,33,42,0.32);
   --hintTextColor: rgba(29,33,42,0.32);
   --iconTextColor: rgba(29,33,42,0.72);
@@ -2185,14 +2199,14 @@ html,
     Success colors
 
     Stylus: successColorLight        -  #38C949, CSS: var(--successColorLight)
-    Stylus: successColor             -  #09AE1C, CSS: var(--successColor)
+    Stylus: successColor             -  #09AB1B, CSS: var(--successColor)
     Stylus: successColorDark         -  #018711, CSS: var(--successColorDark)
     Stylus: successColorContrastText -  #FFF, CSS: var(--successColorContrastText)
 
     Styleguide Settings.theme.success
     */
   --successColorLight: #38c949;
-  --successColor: #09ae1c;
+  --successColor: #09ab1b;
   --successColorDark: #018711;
   --successColorContrastText: #fff;
 /*
@@ -2241,6 +2255,35 @@ html,
   --infoColor: #009fa2;
   --infoColorDark: #007578;
   --infoColorContrastText: #fff;
+/*
+    Shadow colors
+    */
+  --shadow0: none;
+  --shadow1: 0px 2px 4px 0px rgba(29,33,42,0.08), 0px 4px 16px 0px rgba(29,33,42,0.06), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow2: 0px 3px 5px 0px rgba(29,33,42,0.09), 0px 4px 17px 0px rgba(29,33,42,0.07), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow3: 0px 3px 5px -1px rgba(29,33,42,0.09), 0px 5px 19px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow4: 0px 3px 6px -1px rgba(29,33,42,0.1), 0px 5px 20px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow5: 0px 4px 6px -1px rgba(29,33,42,0.11), 0px 5px 22px 1px rgba(29,33,42,0.09), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow6: 0px 4px 7px -2px rgba(29,33,42,0.11), 0px 6px 23px 2px rgba(29,33,42,0.1), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow7: 0px 5px 7px -2px rgba(29,33,42,0.12), 0px 6px 24px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow8: 0px 5px 8px -2px rgba(29,33,42,0.13), 0px 6px 26px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow9: 0px 5px 8px -3px rgba(29,33,42,0.14), 0px 7px 27px 3px rgba(29,33,42,0.12), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow10: 0px 6px 9px -3px rgba(29,33,42,0.14), 0px 7px 29px 3px rgba(29,33,42,0.13), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow11: 0px 6px 9px -3px rgba(29,33,42,0.15), 0px 7px 30px 3px rgba(29,33,42,0.14), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow12: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 31px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow13: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 33px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow14: 0px 8px 11px -5px rgba(29,33,42,0.17), 0px 9px 34px 5px rgba(29,33,42,0.16), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow15: 0px 8px 11px -5px rgba(29,33,42,0.18), 0px 9px 35px 5px rgba(29,33,42,0.17), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow16: 0px 9px 12px -5px rgba(29,33,42,0.18), 0px 9px 37px 5px rgba(29,33,42,0.18), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow17: 0px 9px 12px -6px rgba(29,33,42,0.19), 0px 10px 38px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow18: 0px 9px 13px -6px rgba(29,33,42,0.2), 0px 10px 40px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow19: 0px 10px 13px -6px rgba(29,33,42,0.21), 0px 10px 41px 6px rgba(29,33,42,0.2), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow20: 0px 10px 14px -7px rgba(29,33,42,0.21), 0px 11px 42px 7px rgba(29,33,42,0.21), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow21: 0px 11px 14px -7px rgba(29,33,42,0.22), 0px 11px 44px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow22: 0px 11px 15px -7px rgba(29,33,42,0.23), 0px 11px 45px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow23: 0px 12px 15px -8px rgba(29,33,42,0.23), 0px 12px 47px 8px rgba(29,33,42,0.23), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow24: 0px 12px 16px -8px rgba(29,33,42,0.24), 0px 12px 48px 8px rgba(29,33,42,0.24), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow25: 0px 1px 4px rgba(29,33,42,0.04);
 /*
     ---------------------------------------------------------------------
     */
@@ -2596,7 +2639,7 @@ html,
     Hexadecimal colors are here only as an example on a white background.
 
     Stylus: primaryTextColor -  #383B43, CSS: var(--primaryTextColor)
-    Stylus: secondaryTextColor - #9D9EA1, CSS: var(--secondaryTextColor)
+    Stylus: secondaryTextColor - #6F7177, CSS: var(--secondaryTextColor)
     Stylus: disabledTextColor - #BEBFC1, CSS: var(--disabledTextColor)
     Stylus: hintTextColor - #BEBFC1, CSS: var(--hintTextColor)
     Stylus: iconTextColor - #66686D, CSS: var(--iconTextColor)
@@ -2604,7 +2647,7 @@ html,
     Styleguide Settings.theme.text
     */
   --primaryTextColor: rgba(29,33,42,0.9);
-  --secondaryTextColor: rgba(29,33,42,0.48);
+  --secondaryTextColor: rgba(29,33,42,0.64);
   --disabledTextColor: rgba(29,33,42,0.32);
   --hintTextColor: rgba(29,33,42,0.32);
   --iconTextColor: rgba(29,33,42,0.72);
@@ -2665,14 +2708,14 @@ html,
     Success colors
 
     Stylus: successColorLight        -  #38C949, CSS: var(--successColorLight)
-    Stylus: successColor             -  #09AE1C, CSS: var(--successColor)
+    Stylus: successColor             -  #09AB1B, CSS: var(--successColor)
     Stylus: successColorDark         -  #018711, CSS: var(--successColorDark)
     Stylus: successColorContrastText -  #FFF, CSS: var(--successColorContrastText)
 
     Styleguide Settings.theme.success
     */
   --successColorLight: #38c949;
-  --successColor: #09ae1c;
+  --successColor: #09ab1b;
   --successColorDark: #018711;
   --successColorContrastText: #fff;
 /*
@@ -2721,6 +2764,35 @@ html,
   --infoColor: #009fa2;
   --infoColorDark: #007578;
   --infoColorContrastText: #fff;
+/*
+    Shadow colors
+    */
+  --shadow0: none;
+  --shadow1: 0px 2px 4px 0px rgba(29,33,42,0.08), 0px 4px 16px 0px rgba(29,33,42,0.06), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow2: 0px 3px 5px 0px rgba(29,33,42,0.09), 0px 4px 17px 0px rgba(29,33,42,0.07), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow3: 0px 3px 5px -1px rgba(29,33,42,0.09), 0px 5px 19px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow4: 0px 3px 6px -1px rgba(29,33,42,0.1), 0px 5px 20px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow5: 0px 4px 6px -1px rgba(29,33,42,0.11), 0px 5px 22px 1px rgba(29,33,42,0.09), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow6: 0px 4px 7px -2px rgba(29,33,42,0.11), 0px 6px 23px 2px rgba(29,33,42,0.1), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow7: 0px 5px 7px -2px rgba(29,33,42,0.12), 0px 6px 24px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow8: 0px 5px 8px -2px rgba(29,33,42,0.13), 0px 6px 26px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow9: 0px 5px 8px -3px rgba(29,33,42,0.14), 0px 7px 27px 3px rgba(29,33,42,0.12), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow10: 0px 6px 9px -3px rgba(29,33,42,0.14), 0px 7px 29px 3px rgba(29,33,42,0.13), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow11: 0px 6px 9px -3px rgba(29,33,42,0.15), 0px 7px 30px 3px rgba(29,33,42,0.14), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow12: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 31px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow13: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 33px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow14: 0px 8px 11px -5px rgba(29,33,42,0.17), 0px 9px 34px 5px rgba(29,33,42,0.16), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow15: 0px 8px 11px -5px rgba(29,33,42,0.18), 0px 9px 35px 5px rgba(29,33,42,0.17), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow16: 0px 9px 12px -5px rgba(29,33,42,0.18), 0px 9px 37px 5px rgba(29,33,42,0.18), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow17: 0px 9px 12px -6px rgba(29,33,42,0.19), 0px 10px 38px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow18: 0px 9px 13px -6px rgba(29,33,42,0.2), 0px 10px 40px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow19: 0px 10px 13px -6px rgba(29,33,42,0.21), 0px 10px 41px 6px rgba(29,33,42,0.2), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow20: 0px 10px 14px -7px rgba(29,33,42,0.21), 0px 11px 42px 7px rgba(29,33,42,0.21), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow21: 0px 11px 14px -7px rgba(29,33,42,0.22), 0px 11px 44px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow22: 0px 11px 15px -7px rgba(29,33,42,0.23), 0px 11px 45px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow23: 0px 12px 15px -8px rgba(29,33,42,0.23), 0px 12px 47px 8px rgba(29,33,42,0.23), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow24: 0px 12px 16px -8px rgba(29,33,42,0.24), 0px 12px 48px 8px rgba(29,33,42,0.24), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
+  --shadow25: 0px 1px 4px rgba(29,33,42,0.04);
 /*
     ---------------------------------------------------------------------
     */
@@ -2774,6 +2846,8 @@ html {
   --zIndex-fileActionMenu: 60;
   --zIndex-drawer: 60;
   --zIndex-modal: 70;
+  --zIndex-modal-footer: 71;
+  --zIndex-modal-toolbar: 72;
   --zindex-alert: 80;
 }
 .autosuggest__container___1dbB4 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "7.1.3",
+  "version": "8.0.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -41,7 +41,7 @@
     "babel-plugin-css-modules-transform": "1.6.2",
     "babel-plugin-inline-react-svg": "1.1.2",
     "cozy-client": "37.0.0",
-    "cozy-ui": "82.2.0",
+    "cozy-ui": "88.2.1",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
@@ -53,7 +53,7 @@
   "peerDependencies": {
     "cozy-client": "^37.0.0",
     "cozy-realtime": "^3.11.0",
-    "cozy-ui": ">=82.2.0",
+    "cozy-ui": ">=88.2.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-router": "^5.0.1"
@@ -61,5 +61,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "2ba79efd70ed3a821ab1003a7b25d93d0a21db46"
+  "gitHead": "55b6fd5f0e759bdb960fda82ac7124c33b9c6ae9"
 }

package/src/ShareButtonWithRecipients.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Grid from 'cozy-ui/transpiled/react/Grid'
 import Skeleton from 'cozy-ui/transpiled/react/Skeleton'
 import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 

package/src/SharingBanner/components/PublicBanner.jsx

@@ -4,8 +4,8 @@ import snarkdown from 'snarkdown'
 
 import { useClient } from 'cozy-client'
 import Banner from 'cozy-ui/transpiled/react/Banner'
-import Button, { ButtonLink } from 'cozy-ui/transpiled/react/Button'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Button, { ButtonLink } from 'cozy-ui/transpiled/react/deprecated/Button'
 
 import CozyHomeLinkIcon from './CozyHomeLinkIcon'
 import styles from './publicBanner.styl'

package/src/SharingDetailsModal.jsx

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Divider from 'cozy-ui/transpiled/react/Divider'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
 
 import OwnerIdentity from './components/Recipient/OwnerIdentity'
 import WhoHasAccess from './components/WhoHasAccess'

package/src/components/ContactSuggestion.jsx

@@ -5,9 +5,9 @@ import React from 'react'
 import { models } from 'cozy-client'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
-import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
 
 import { Contact, Group, getDisplayName, getInitials } from '../models'
 

package/src/components/Recipient/LinkRecipient.jsx

@@ -6,9 +6,9 @@ import Fade from 'cozy-ui/transpiled/react/Fade'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
-import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
 import LinkRecipientPermissions from './LinkRecipientPermissions'

package/src/components/Recipient/LinkRecipientPermissions.jsx

@@ -1,16 +1,16 @@
 import React, { useState, useRef } from 'react'
 
-import ActionMenu, {
-  ActionMenuItem,
-  ActionMenuRadio
-} from 'cozy-ui/transpiled/react/ActionMenu'
-import Alerter from 'cozy-ui/transpiled/react/Alerter'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import ActionMenu, {
+  ActionMenuItem,
+  ActionMenuRadio
+} from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
+import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
 
 import { isOnlyReadOnlyLinkAllowed } from '../../helpers/link'
 import { checkIsReadOnlyPermissions } from '../../helpers/permissions'

package/src/components/Recipient/Recipient.jsx

@@ -4,9 +4,9 @@ import React from 'react'
 import { useClient } from 'cozy-client'
 import Fade from 'cozy-ui/transpiled/react/Fade'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
-import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
 import RecipientAvatar from './RecipientAvatar'

package/src/components/Recipient/RecipientConfirm.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Button from 'cozy-ui/transpiled/react/Button'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 
 import modalStyles from '../../share.styl'
 

package/src/components/Recipient/RecipientPermissions.jsx

@@ -1,7 +1,6 @@
 import React, { useState, useRef, useCallback } from 'react'
 
 import { useClient } from 'cozy-client'
-import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -10,6 +9,9 @@ import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import ActionMenu, {
+  ActionMenuItem
+} from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
 
 const RecipientPermissions = ({
   isOwner,