cozy-ui 133.0.1 → 134.1.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [134.1.0](https://github.com/cozy/cozy-ui/compare/v134.0.0...v134.1.0) (2025-12-04)
+
+
+### Features
+
+* **Icon:** Add planet ([e3268b0](https://github.com/cozy/cozy-ui/commit/e3268b0))
+
+# [134.0.0](https://github.com/cozy/cozy-ui/compare/v133.0.1...v134.0.0) (2025-11-13)
+
+
+### Bug Fixes
+
+* **ActionsBar:** Theme type wasn't set correctly ([89f4cc7](https://github.com/cozy/cozy-ui/commit/89f4cc7))
+* **BottomSheet:** Theme type wasn't set correctly ([3f5e3e3](https://github.com/cozy/cozy-ui/commit/3f5e3e3))
+
+
+### Features
+
+* **CozyTheme:** Rename prop `settingsThemeType` in `type` ([f397f65](https://github.com/cozy/cozy-ui/commit/f397f65))
+
+
+### BREAKING CHANGES
+
+* **CozyTheme:** If you use `import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'` you must replace `settingsThemeType` prop by `type`. Expl: `<CozyTheme settingsThemeType={}>` becomes `<CozyTheme type={}>`
+
 ## [133.0.1](https://github.com/cozy/cozy-ui/compare/v133.0.0...v133.0.1) (2025-11-05)
 
 
@@ -24,7 +49,18 @@
 
 * If you use a component in that list, you must import it from `cozy-ui-plus` instead: `AppIcon, AppLinker, AppSections, AppTitle, CipherIcon, ContactPicker, Contacts/AddModal, Contacts/GroupsSelect, Contacts/Header, ContactsList, ContactsListModal, AuthenticationDialogs, Field, FileImageLoader, FilePicker, hooks/useClientErrors, IntentDialogOpener, IntentIframe, Labs/CollectionField, ListItem/ListItemByDoc, ListItem/ListItemBase, ListItem/ListItemContact, ListItem/ListItemFile, Paywall, providers/CozyTheme, providers/Intent, QualificationGrid, QualificationIcon, QualificationItem, QualificationModal, ShortcutTile, SquareAppIcon, Storage, UploadQueue, Wizard`.
 
-Please note that these components have been completely removed: `deprecated/IntentModal, deprecated/IntentOpener, deprecated/QuotaAlert`
+You can use this codemods to migrate:
+
+```
+yarn add cozy-ui-plus
+yarn global add @cozy/codemods
+yarn global add jscodeshift@0.13.1
+jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/transform-ui-bc-133.js src babel --ignore-pattern=src/targets/ --extensions js,jsx,tsx --parser tsx
+```
+
+You probably will need to fix linter issue after that with something like `yarn lint --fix`.
+
+* Please note that these components have been completely removed: `deprecated/IntentModal, deprecated/IntentOpener, deprecated/QuotaAlert`
 * If you used `deprecated/ActionMenu/Actions/modif` and `deprecated/ActionMenu/Actions/viewInContacts` please use those in `/ActionsMenu/Actions` instead
 * **BarContextProvider:** If you use `BarContextProvider` you must create it yourself. Take a look to the code to copy/paste
 * **Actions:** You must `import { fetchBlobFileById, isFile } from 'cozy-client/dist/models/file'` and pass it as action's option `makeActions([], { fetchBlobFileById, isFile })` when using `print` action.
@@ -3052,7 +3088,7 @@ jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/tra
 
 ### BREAKING CHANGES
 
-* **Viewer:** The `toolbarProps` attribute from Viewer property has been moved into the `componentsProps` attribute. 
+* **Viewer:** The `toolbarProps` attribute from Viewer property has been moved into the `componentsProps` attribute.
 
 You can use this codemods to migrate. **Don't forget to run js linter after the codemods.**
 
@@ -3065,7 +3101,7 @@ jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/tra
 ```
 
 You can do this manually by transferring the contents of `toolbarProps` to `componentsProps` under a `toolbarProps` property.
-* **Viewer:** The `onlyOfficeProps` attribute from Viewer property has been moved into the `componentsProps` attribute. 
+* **Viewer:** The `onlyOfficeProps` attribute from Viewer property has been moved into the `componentsProps` attribute.
 
 You have to move the contents of `onlyOfficeProps ` to `componentsProps` under a `OnlyOfficeViewer` property.
 
@@ -3307,7 +3343,7 @@ set to `1`
 
 This is the list of impacted components: `MuiCozyTheme/Buttons`, `MuiCozyTheme/MuiBreadcrumbs`, `MuiCozyTheme/Dialog`, `MuiCozyTheme/Accordion`, `MuiCozyTheme/AccordionDetails`, `MuiCozyTheme/AccordionSummary`, `MuiCozyTheme/Divider`, `MuiCozyTheme/Grid`, `MuiCozyTheme/List`, `MuiCozyTheme/ListItem`, `MuiCozyTheme/ListItemIcon`, `MuiCozyTheme/ListItemSecondaryAction`, `MuiCozyTheme/ListSubheader`, `MuiCozyTheme/Menu`, `MuiCozyTheme/Switch`, `MuiCozyTheme/TextField`
 
-You can use this codemods to migrate: 
+You can use this codemods to migrate:
 
 ```
 $ yarn global add @cozy/codemods
@@ -3328,7 +3364,7 @@ $ jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/t
 * This is the list of deprecated component
 `ActionMenu`, `Alerter`, `BottomDrawer`, `Button`, `ButtonAction`, `Chip`, `CompositeRow`, `GridItem`, `Infos`, `InfosCarrousel`, `InlineCard`, `IntentModal`, `IntentOpener`, `Media`, `Menus`, `Modal`, `NarrowContent`, `Overlay`, `PercentageBar`, `PercentageLine`, `PushClientButton`, `QuotaAlert`, `Radio`, `RaisedList`, `ViewStack`
 
-These components are now in a `deprecated` subfolder. Use this codemods to migrate: 
+These components are now in a `deprecated` subfolder. Use this codemods to migrate:
 
 ```
 $ yarn global add @cozy/codemods

package/assets/icons/ui/planet.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M7.992 0C3.576 0 0 3.584 0 8s3.576 8 7.992 8C12.416 16 16 12.416 16 8s-3.584-8-8.008-8Zm5.544 4.8h-2.36c-.256-1-.624-1.96-1.104-2.848A6.424 6.424 0 0 1 13.536 4.8ZM8 1.632A11.27 11.27 0 0 1 9.528 4.8H6.472A11.27 11.27 0 0 1 8 1.632ZM1.808 9.6A6.594 6.594 0 0 1 1.6 8c0-.552.08-1.088.208-1.6h2.704A13.212 13.212 0 0 0 4.4 8c0 .544.048 1.072.112 1.6H1.808Zm.656 1.6h2.36c.256 1 .624 1.96 1.104 2.848A6.39 6.39 0 0 1 2.464 11.2Zm2.36-6.4h-2.36a6.39 6.39 0 0 1 3.464-2.848A12.52 12.52 0 0 0 4.824 4.8ZM8 14.368A11.27 11.27 0 0 1 6.472 11.2h3.056A11.27 11.27 0 0 1 8 14.368ZM9.872 9.6H6.128A11.77 11.77 0 0 1 6 8c0-.544.056-1.08.128-1.6h3.744C9.944 6.92 10 7.456 10 8s-.056 1.072-.128 1.6Zm.2 4.448a12.52 12.52 0 0 0 1.104-2.848h2.36a6.424 6.424 0 0 1-3.464 2.848ZM11.488 9.6c.064-.528.112-1.056.112-1.6s-.048-1.072-.112-1.6h2.704c.128.512.208 1.048.208 1.6s-.08 1.088-.208 1.6h-2.704Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "133.0.1",
+  "version": "134.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ActionsBar/index.jsx

@@ -18,7 +18,7 @@ import DotsIcon from '../Icons/Dots'
 import Toolbar from '../Toolbar'
 import Typography from '../Typography'
 import useBreakpoints from '../providers/Breakpoints'
-import CozyTheme from '../providers/CozyTheme'
+import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
 import { useI18n } from '../providers/I18n'
 import { makeStyles } from '../styles'
 
@@ -111,6 +111,7 @@ const ActionsBar = ({
   onClose
 }) => {
   const { isMobile } = useBreakpoints()
+  const { type } = useCozyTheme()
   const anchorRef = useRef()
   const [showMenu, setShowMenu] = useState(false)
   const styles = useStyles({ isMobile })
@@ -137,7 +138,7 @@ const ActionsBar = ({
   }
 
   return (
-    <CozyTheme variant="inverted">
+    <CozyTheme type={type} variant="inverted">
       <AppBar className={styles.appBar} position="fixed" color="inherit">
         <Toolbar
           className={styles.toolbar}

package/react/BottomSheet/BottomSheet.jsx

@@ -436,9 +436,11 @@ BottomSheet.propTypes = {
 }
 
 const BottomSheetPortal = forwardRef(({ portalProps, ...props }, ref) => {
-  const { variant } = useCozyTheme()
+  const { type, variant } = useCozyTheme()
   const CozyThemeWrapper = portalProps?.disablePortal ? Fragment : CozyTheme
-  const wrapperProps = portalProps?.disablePortal ? undefined : { variant }
+  const wrapperProps = portalProps?.disablePortal
+    ? undefined
+    : { type, variant }
 
   return (
     <Portal {...portalProps}>

package/react/CozyDialogs/SpecificDialogs/Readme.md

@@ -45,64 +45,6 @@ const [open, setOpen] = useState(isTesting());
 </DemoProvider>
 ```
 
-### Authentification dialog
-
-Dialog used to authenticate a user in the cozy system. The authentication logic is implemented in the applications.
-
-```jsx
-import { AuthentificationDialog } from  'cozy-ui/transpiled/react/CozyDialogs'
-import Button from  'cozy-ui/transpiled/react/Buttons'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-import Variants from 'cozy-ui/docs/components/Variants'
-import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
-import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
-import Radio from 'cozy-ui/transpiled/react/Radios'
-import FormControl from 'cozy-ui/transpiled/react/FormControl'
-import FormLabel from 'cozy-ui/transpiled/react/FormLabel'
-
-initialState = { showModal: false };
-
-const initialVariants = [{
-  closable: true,
-  loading: false,
-  oidc: false
-}]
-
-const initialErrors = [{
-  default: true,
-  invalid_password: false,
-  server_error: false
-}]
-
-const onClose = () => setState({ showModal: false })
-
-const onAuthentification = () => {
-  alert('authentification')
-  setState({ showModal: false })
-};
-
-<Variants initialVariants={initialVariants}>
-  {variant => (
-    <Variants initialVariants={initialErrors} radio>
-      {error => (
-        <DemoProvider>
-          <Button label="Open modal" onClick={() => setState({ showModal: true })}/>
-          {state.showModal && (
-            <AuthentificationDialog
-              onSubmit={onAuthentification}
-              onClose={variant.closable && onClose}
-              error={error.invalid_password ? 'invalid_password' : error.server_error ? 'server_error' : undefined }
-              isLoading={variant.loading}
-              isOIDC={variant.oidc}
-            />
-          )}
-        </DemoProvider>
-      )}
-    </Variants>
-  )}
-</Variants>
-```
-
 ### ShortcutDialog dialog
 
 ⚠️ Must be used within AlertProvider.

package/react/Icon/Readme.md

@@ -268,6 +268,7 @@ import PhoneUpload from 'cozy-ui/transpiled/react/Icons/PhoneUpload'
 import PieChart from 'cozy-ui/transpiled/react/Icons/PieChart'
 import Pin from 'cozy-ui/transpiled/react/Icons/Pin'
 import Plane from 'cozy-ui/transpiled/react/Icons/Plane'
+import Planet from 'cozy-ui/transpiled/react/Icons/Planet'
 import Plus from 'cozy-ui/transpiled/react/Icons/Plus'
 import PlusSmall from 'cozy-ui/transpiled/react/Icons/PlusSmall'
 import PopInside from 'cozy-ui/transpiled/react/Icons/PopInside'
@@ -552,6 +553,7 @@ const icons = [
   PieChart,
   Pin,
   Plane,
+  Planet,
   PlusSmall,
   Plus,
   PopInside,
@@ -998,7 +1000,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','assign-admin','assign-moderator','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','cloud2','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','matrix','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','secutiry','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','assign-admin','assign-moderator','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','cloud2','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','matrix','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','planet','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','secutiry','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 
 <Grid container spacing={2}>

package/react/Icons/Planet.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/planet.svg` to regenerate;
+import React from 'react'
+
+function SvgPlanet(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M7.992 0C3.576 0 0 3.584 0 8s3.576 8 7.992 8C12.416 16 16 12.416 16 8s-3.584-8-8.008-8zm5.544 4.8h-2.36c-.256-1-.624-1.96-1.104-2.848A6.424 6.424 0 0113.536 4.8zM8 1.632A11.27 11.27 0 019.528 4.8H6.472A11.27 11.27 0 018 1.632zM1.808 9.6A6.594 6.594 0 011.6 8c0-.552.08-1.088.208-1.6h2.704A13.212 13.212 0 004.4 8c0 .544.048 1.072.112 1.6H1.808zm.656 1.6h2.36c.256 1 .624 1.96 1.104 2.848A6.39 6.39 0 012.464 11.2zm2.36-6.4h-2.36a6.39 6.39 0 013.464-2.848A12.52 12.52 0 004.824 4.8zM8 14.368A11.27 11.27 0 016.472 11.2h3.056A11.27 11.27 0 018 14.368zM9.872 9.6H6.128A11.77 11.77 0 016 8c0-.544.056-1.08.128-1.6h3.744C9.944 6.92 10 7.456 10 8s-.056 1.072-.128 1.6zm.2 4.448a12.52 12.52 0 001.104-2.848h2.36a6.424 6.424 0 01-3.464 2.848zM11.488 9.6c.064-.528.112-1.056.112-1.6s-.048-1.072-.112-1.6h2.704c.128.512.208 1.048.208 1.6s-.08 1.088-.208 1.6h-2.704z" />
+    </svg>
+  )
+}
+
+export default SvgPlanet

package/react/providers/CozyTheme/index.jsx

@@ -10,7 +10,7 @@ import useMediaQuery from '../../hooks/useMediaQuery'
 export const CozyThemeContext = createContext()
 
 /**
- * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean, name: 'Twake'|'Cozy' }}
+ * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean }}
  */
 export const useCozyTheme = () => {
   const context = useContext(CozyThemeContext)
@@ -31,42 +31,32 @@ export const useCozyTheme = () => {
   return context
 }
 
-const CozyTheme = ({
-  variant,
-  className,
-  ignoreItself,
-  settingsThemeType,
-  children
-}) => {
+const CozyTheme = ({ type, variant, className, ignoreItself, children }) => {
   const uiThemeType = localStorage.getItem('ui-theme-type') // use only for cozy-ui documentation and argos screenshots
   const uiThemeVariant = localStorage.getItem('ui-theme-variant') // use only for cozy-ui documentation and argos screenshots
 
   const deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)')
     ? 'dark'
     : 'light'
-  const filteredSettingsThemeType = ['light', 'dark'].includes(
-    settingsThemeType
-  )
-    ? settingsThemeType
+  const filteredSettingsThemeType = ['light', 'dark'].includes(type)
+    ? type
     : undefined
 
-  const selfThemeType =
-    uiThemeType || filteredSettingsThemeType || deviceThemeType
-  const selfThemeVariant = uiThemeVariant || variant
+  const _type = uiThemeType || filteredSettingsThemeType || deviceThemeType
+  const _variant = uiThemeVariant || variant
 
   return (
     <CozyThemeContext.Provider
       value={{
-        type: selfThemeType,
-        variant: selfThemeVariant,
-        isLight: selfThemeType === 'light'
+        type: _type,
+        variant: _variant,
+        isLight: _type === 'light'
       }}
     >
-      <MuiCozyTheme type={selfThemeType} variant={selfThemeVariant}>
+      <MuiCozyTheme type={_type} variant={_variant}>
         <div
           className={cx(className, {
-            [`TwakeTheme--${selfThemeType}-${selfThemeVariant}`]:
-              Boolean(selfThemeVariant),
+            [`TwakeTheme--${_type}-${_variant}`]: Boolean(_variant),
             'u-dc': ignoreItself
           })}
         >
@@ -78,11 +68,10 @@ const CozyTheme = ({
 }
 
 CozyTheme.propTypes = {
+  type: PropTypes.oneOf(['light', 'dark', 'auto']),
   variant: PropTypes.oneOf(['normal', 'inverted']),
   /** Causes this element's children to appear as if they were direct children of the element's parent, ignoring the element itself. */
   ignoreItself: PropTypes.bool,
-  /** Theme type from io.cozy.settings.instance */
-  settingsThemeType: PropTypes.oneOf(['light', 'dark', 'auto']),
   className: PropTypes.string,
   children: PropTypes.node
 }

package/transpiled/react/ActionsBar/index.js

@@ -18,7 +18,7 @@ import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 import Toolbar from "cozy-ui/transpiled/react/Toolbar";
 import Typography from "cozy-ui/transpiled/react/Typography";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
-import CozyTheme from "cozy-ui/transpiled/react/providers/CozyTheme";
+import CozyTheme, { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
 var useStyles = makeStyles({
@@ -121,6 +121,9 @@ var ActionsBar = function ActionsBar(_ref5) {
   var _useBreakpoints2 = useBreakpoints(),
       isMobile = _useBreakpoints2.isMobile;
 
+  var _useCozyTheme = useCozyTheme(),
+      type = _useCozyTheme.type;
+
   var anchorRef = useRef();
 
   var _useState = useState(false),
@@ -147,6 +150,7 @@ var ActionsBar = function ActionsBar(_ref5) {
   };
 
   return /*#__PURE__*/React.createElement(CozyTheme, {
+    type: type,
     variant: "inverted"
   }, /*#__PURE__*/React.createElement(AppBar, {
     className: styles.appBar,

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -436,10 +436,12 @@ var BottomSheetPortal = /*#__PURE__*/forwardRef(function (_ref4, ref) {
       props = _objectWithoutProperties(_ref4, _excluded);
 
   var _useCozyTheme2 = useCozyTheme(),
+      type = _useCozyTheme2.type,
       variant = _useCozyTheme2.variant;
 
   var CozyThemeWrapper = portalProps !== null && portalProps !== void 0 && portalProps.disablePortal ? Fragment : CozyTheme;
   var wrapperProps = portalProps !== null && portalProps !== void 0 && portalProps.disablePortal ? undefined : {
+    type: type,
     variant: variant
   };
   return /*#__PURE__*/React.createElement(Portal, portalProps, /*#__PURE__*/React.createElement(CozyThemeWrapper, wrapperProps, /*#__PURE__*/React.createElement(BottomSheet, _extends({