cozy-ui 121.6.0 → 121.8.0

package/transpiled/react/Icons/CloudRainbow.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/cloud-rainbow.svg` to regenerate;
+import React from 'react';
+
+function SvgCloudRainbow(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 16 11"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8 1.333a3.669 3.669 0 013.593 2.954l.2 1 1.02.073c1.04.067 1.854.94 1.854 1.973 0 1.1-.9 2-2 2H4a2.666 2.666 0 01-2.667-2.666A2.649 2.649 0 013.707 4.02l.713-.073.333-.634A3.646 3.646 0 018 1.333zM8 0a4.997 4.997 0 00-4.433 2.693A3.996 3.996 0 000 6.667c0 2.206 1.793 4 4 4h8.667A3.335 3.335 0 0016 7.333a3.317 3.317 0 00-3.1-3.306A4.993 4.993 0 008 0z",
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 1.333a3.669 3.669 0 013.593 2.954l.2 1 1.02.073c1.04.067 1.854.94 1.854 1.973 0 1.1-.9 2-2 2H4a2.666 2.666 0 01-2.667-2.666A2.649 2.649 0 013.707 4.02l.713-.073.333-.634A3.646 3.646 0 018 1.333zM8 0a4.997 4.997 0 00-4.433 2.693A3.996 3.996 0 000 6.667c0 2.206 1.793 4 4 4h8.667A3.335 3.335 0 0016 7.333a3.317 3.317 0 00-3.1-3.306A4.993 4.993 0 008 0z",
+    fill: "url(#cloud-rainbow_svg__paint0_linear_11512_6354)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 1.333a3.669 3.669 0 013.593 2.954l.2 1 1.02.073c1.04.067 1.854.94 1.854 1.973 0 1.1-.9 2-2 2H4a2.666 2.666 0 01-2.667-2.666A2.649 2.649 0 013.707 4.02l.713-.073.333-.634A3.646 3.646 0 018 1.333zM8 0a4.997 4.997 0 00-4.433 2.693A3.996 3.996 0 000 6.667c0 2.206 1.793 4 4 4h8.667A3.335 3.335 0 0016 7.333a3.317 3.317 0 00-3.1-3.306A4.993 4.993 0 008 0z",
+    fill: "url(#cloud-rainbow_svg__paint1_linear_11512_6354)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 1.333a3.669 3.669 0 013.593 2.954l.2 1 1.02.073c1.04.067 1.854.94 1.854 1.973 0 1.1-.9 2-2 2H4a2.666 2.666 0 01-2.667-2.666A2.649 2.649 0 013.707 4.02l.713-.073.333-.634A3.646 3.646 0 018 1.333zM8 0a4.997 4.997 0 00-4.433 2.693A3.996 3.996 0 000 6.667c0 2.206 1.793 4 4 4h8.667A3.335 3.335 0 0016 7.333a3.317 3.317 0 00-3.1-3.306A4.993 4.993 0 008 0z",
+    fill: "url(#cloud-rainbow_svg__paint2_linear_11512_6354)"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "cloud-rainbow_svg__paint0_linear_11512_6354",
+    x1: 16,
+    y1: 6.222,
+    x2: 0,
+    y2: 6.222,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0.13,
+    stopColor: "#A033FF"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.61,
+    stopColor: "#0094FF"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#4FB500"
+  })), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "cloud-rainbow_svg__paint1_linear_11512_6354",
+    x1: 7.333,
+    y1: 3.333,
+    x2: 4.833,
+    y2: 10.833,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: "#FFD600",
+    stopOpacity: 0
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.563,
+    stopColor: "#FFC700"
+  })), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "cloud-rainbow_svg__paint2_linear_11512_6354",
+    x1: 8.667,
+    y1: 6.222,
+    x2: 12.079,
+    y2: 11.642,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0.03,
+    stopColor: "#FF3B30",
+    stopOpacity: 0
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.843,
+    stopColor: "#E73B2D"
+  }))));
+}
+
+export default SvgCloudRainbow;

package/transpiled/react/Icons/Mosaic.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/mosaic.svg` to regenerate;
+import React from 'react';
+
+function SvgMosaic(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 16 16"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.289 1.92l.02-.02.737-.737.02-.02c.241-.24.454-.453.645-.615a2.11 2.11 0 01.718-.426c.418-.136.87-.136 1.288 0 .286.093.515.253.718.426.191.162.404.374.644.615l.02.02.738.737.02.02c.24.241.454.454.615.645.173.203.333.432.426.718.136.419.136.87 0 1.288a2.117 2.117 0 01-.426.718c-.162.191-.374.404-.615.644l-.02.02-.737.738-.02.02c-.241.24-.454.454-.645.615a2.118 2.118 0 01-.718.426c-.418.136-.87.136-1.288 0a2.117 2.117 0 01-.718-.426 10.947 10.947 0 01-.644-.615l-.02-.02-.738-.737-.02-.02c-.24-.241-.454-.454-.615-.645a2.118 2.118 0 01-.426-.718 2.084 2.084 0 010-1.288 2.11 2.11 0 01.426-.718c.161-.191.374-.404.615-.644zm.576 1.657c-.11.129-.126.177-.13.189a.521.521 0 000 .322c.004.012.02.06.13.19.116.136.283.303.55.57l.737.737c.267.267.434.434.57.55.13.11.178.126.19.13a.521.521 0 00.322 0c.011-.004.06-.02.19-.13.136-.116.303-.283.57-.55l.737-.737c.267-.267.434-.434.55-.57.11-.13.126-.178.13-.19a.521.521 0 000-.322c-.004-.012-.02-.06-.13-.19a11.036 11.036 0 00-.55-.57l-.737-.737a10.98 10.98 0 00-.57-.55c-.13-.11-.178-.126-.19-.13a.521.521 0 00-.322 0c-.012.004-.06.02-.19.13a10.98 10.98 0 00-.57.55l-.737.737c-.267.267-.434.434-.55.57zM3.91 7.314h.028c.34 0 .641 0 .89-.02a2.12 2.12 0 00.81-.207c.392-.2.71-.519.91-.91a2.12 2.12 0 00.207-.81c.02-.249.02-.55.02-.89V3.376c0-.34 0-.64-.02-.89a2.119 2.119 0 00-.206-.808 2.085 2.085 0 00-.911-.911 2.118 2.118 0 00-.81-.207c-.249-.02-.55-.02-.89-.02H2.837c-.34 0-.64 0-.89.02a2.12 2.12 0 00-.809.207c-.392.2-.71.519-.91.91a2.118 2.118 0 00-.208.81c-.02.249-.02.55-.02.89v1.101c0 .34 0 .64.02.89.022.265.07.54.207.808.2.392.519.711.911.911.268.137.543.185.809.207.25.02.55.02.89.02H3.91zm1.018-1.62c-.011.006-.057.028-.226.042a11.01 11.01 0 01-.792.015H2.866c-.377 0-.614 0-.792-.015-.169-.014-.215-.036-.226-.042a.521.521 0 01-.228-.228c-.005-.01-.028-.057-.041-.226a10.986 10.986 0 01-.016-.792V3.406c0-.378.001-.614.016-.792.013-.17.036-.216.041-.226a.521.521 0 01.228-.228c.01-.006.057-.028.226-.042.178-.014.415-.015.792-.015H3.91c.377 0 .614 0 .792.015.169.014.215.036.226.042.098.05.178.13.228.228.005.01.027.057.041.226.015.178.015.414.015.792v1.042c0 .378 0 .614-.015.792-.014.17-.036.216-.041.226a.521.521 0 01-.228.228zM3.909 16h.028c.34 0 .642 0 .89-.02a2.12 2.12 0 00.81-.207c.392-.2.71-.519.91-.911.137-.268.186-.543.207-.809.02-.25.02-.55.02-.89v-1.101c0-.34 0-.64-.02-.89a2.119 2.119 0 00-.206-.809 2.085 2.085 0 00-.911-.91 2.117 2.117 0 00-.81-.207c-.248-.02-.55-.02-.89-.02H2.838c-.34 0-.64 0-.89.02-.266.021-.54.07-.809.206-.392.2-.71.52-.91.911a2.118 2.118 0 00-.208.81c-.02.248-.02.55-.02.89v1.099c0 .34 0 .64.02.89.022.266.07.54.207.809.2.392.519.71.911.91.268.137.543.186.809.208.25.02.55.02.89.02H3.91zm1.018-1.62c-.011.005-.057.028-.226.041a10.95 10.95 0 01-.792.016H2.866c-.377 0-.614-.001-.792-.016-.169-.013-.215-.036-.226-.041a.521.521 0 01-.228-.228c-.005-.01-.028-.057-.041-.226a10.985 10.985 0 01-.016-.792V12.09c0-.377.001-.614.016-.792.013-.168.036-.215.041-.226a.521.521 0 01.228-.228c.01-.005.057-.027.226-.041.178-.015.415-.015.792-.015H3.91c.377 0 .614 0 .792.015.169.014.215.036.226.041.098.05.178.13.228.228.005.01.027.057.041.226.015.178.015.415.015.793v1.042c0 .377 0 .614-.015.792-.014.169-.036.215-.041.226a.521.521 0 01-.228.228zM12.594 16h.03c.34 0 .64 0 .89-.02.265-.022.54-.07.808-.207.392-.2.711-.519.911-.911a2.12 2.12 0 00.207-.809c.02-.25.02-.55.02-.89v-1.101c0-.34 0-.64-.02-.89a2.12 2.12 0 00-.207-.809 2.085 2.085 0 00-.91-.91 2.117 2.117 0 00-.81-.207c-.249-.02-.55-.02-.89-.02h-1.101c-.34 0-.64 0-.89.02-.265.021-.54.07-.808.206-.392.2-.711.52-.911.911a2.118 2.118 0 00-.207.81c-.02.248-.02.55-.02.89v1.099c0 .34 0 .64.02.89.022.266.07.54.207.809.2.392.519.71.91.91.269.137.544.186.81.208.249.02.55.02.89.02h1.071zm1.018-1.62c-.01.005-.057.028-.226.041a10.6 10.6 0 01-.792.016h-1.042a10.6 10.6 0 01-.792-.016c-.17-.013-.216-.036-.226-.041a.521.521 0 01-.228-.228c-.006-.01-.028-.057-.042-.226a11.009 11.009 0 01-.015-.792V12.09c0-.377 0-.614.015-.792.014-.168.036-.215.042-.226a.521.521 0 01.228-.228c.01-.005.057-.027.226-.041.178-.015.414-.015.792-.015h1.042c.378 0 .614 0 .792.015.17.014.216.036.226.041.098.05.178.13.228.228.006.01.028.057.042.226.014.178.015.415.015.793v1.042c0 .377 0 .614-.015.792-.014.169-.036.215-.042.226a.521.521 0 01-.228.228z"
+  }));
+}
+
+export default SvgMosaic;

package/transpiled/react/Icons/PersonAdd.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/person-add.svg` to regenerate;
+import React from 'react';
+
+function SvgPersonAdd(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 16 13"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.768 5.398h-.905a.753.753 0 01-.553-.222.745.745 0 01-.223-.55.76.76 0 01.223-.554.746.746 0 01.553-.226h.905v-.904c0-.22.073-.404.221-.553a.745.745 0 01.55-.223.76.76 0 01.555.223c.15.149.226.333.226.553v.904h.904c.22 0 .404.074.553.222a.745.745 0 01.223.55.76.76 0 01-.223.554.746.746 0 01-.553.226h-.904v.905a.75.75 0 01-.222.552.745.745 0 01-.55.224.759.759 0 01-.554-.224.746.746 0 01-.226-.552v-.905zm-6.706.825c-.868 0-1.604-.302-2.208-.906-.604-.604-.906-1.34-.906-2.208 0-.868.302-1.603.906-2.205C4.458.3 5.194 0 6.062 0 6.93 0 7.665.301 8.27.904c.604.602.906 1.337.906 2.205 0 .868-.302 1.604-.906 2.208-.604.604-1.34.906-2.208.906zM0 10.753v-.36c0-.383.094-.734.281-1.055.188-.32.446-.576.774-.766.76-.44 1.563-.778 2.409-1.013a9.646 9.646 0 012.598-.353c.893 0 1.762.117 2.607.35.846.234 1.646.57 2.4 1.01.328.191.586.446.773.765.188.32.282.673.282 1.061v.36c0 .471-.166.872-.497 1.203a1.64 1.64 0 01-1.203.497h-8.73c-.472 0-.871-.166-1.2-.497A1.643 1.643 0 010 10.753z"
+  }));
+}
+
+export default SvgPersonAdd;

package/transpiled/react/InfosBadge/index.js

@@ -1,40 +1,38 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["classes"],
-    _excluded2 = ["qualifier"];
+var _excluded = ["classes"];
 import cx from 'classnames';
 import React from 'react';
 import Badge from "cozy-ui/transpiled/react/Badge";
-import { withStyles } from "cozy-ui/transpiled/react/styles";
-
-var customStyles = function customStyles() {
-  return {
-    qualifier: {
-      height: '1.125rem',
-      // compensation of the specific border size
-      minWidth: '1.125rem',
-      backgroundColor: 'var(--paperBackgroundColor)',
-      color: 'var(--iconTextColor)',
-      border: '1px solid var(--borderMainColor)'
-    }
-  };
-};
+import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  qualifier: {
+    height: isTwakeTheme() ? '24px' : '1.125rem',
+    // compensation of the specific border size
+    minWidth: isTwakeTheme() ? '24px' : '1.125rem',
+    backgroundColor: 'var(--paperBackgroundColor)',
+    color: 'var(--iconTextColor)',
+    border: isTwakeTheme() ? undefined : '1px solid var(--borderMainColor)',
+    boxShadow: isTwakeTheme() ? 'var(--shadow3)' : undefined
+  }
+});
 
-var InfosBadge = withStyles(customStyles)(function (_ref) {
+var InfosBadge = function InfosBadge(_ref) {
   var classes = _ref.classes,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var qualifier = classes.qualifier,
-      customClasses = _objectWithoutProperties(classes, _excluded2);
+  var _classes = useStyles();
 
   return /*#__PURE__*/React.createElement(Badge, _extends({
     classes: {
-      badge: cx(qualifier, customClasses)
+      badge: cx(_classes.qualifier, classes)
     },
     anchorOrigin: {
       vertical: 'bottom',
       horizontal: 'right'
     }
   }, props));
-});
+};
+
 export default InfosBadge;

package/transpiled/react/MuiCozyTheme/makeTheme.js

@@ -80,6 +80,8 @@ export var makeTheme = function makeTheme(type, variant) {
   var theme = createTheme(_objectSpread(_objectSpread({}, themesCommonConfig), {}, {
     typography: uiThemeName === 'Cozy' ? makeTypography(palette) : makeTwakeTypography(),
     shadows: makeShadows(type, variant),
+    type: type,
+    variant: variant,
     palette: palette
   }));
   var overrides = uiThemeName === 'Cozy' ? makeOverridesByTheme(theme)[type][variant] : makeTwakeOverridesByTheme(theme)[type][variant];

package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -909,6 +909,7 @@ export function makeDarkInvertedOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
+            borderRadius: string;
             '&.badgeBorder': {
                 border: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -909,6 +909,7 @@ export function makeDarkNormalOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
+            borderRadius: string;
             '&.badgeBorder': {
                 border: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -909,6 +909,7 @@ export function makeLightInvertedOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
+            borderRadius: string;
             '&.badgeBorder': {
                 border: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts

@@ -909,6 +909,7 @@ export function makeLightNormalOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
+            borderRadius: string;
             '&.badgeBorder': {
                 border: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -824,6 +824,7 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
       badge: {
         boxSizing: 'content-box',
         padding: 0,
+        borderRadius: '100%',
         '&.badgeBorder': {
           border: "2px solid ".concat(theme.palette.background.paper)
         },

package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkInvertedOverrides.d.ts

@@ -909,6 +909,7 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
+            borderRadius: string;
             '&.badgeBorder': {
                 border: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkNormalOverrides.d.ts

@@ -909,6 +909,7 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
+            borderRadius: string;
             '&.badgeBorder': {
                 border: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightInvertedOverrides.d.ts

@@ -909,6 +909,7 @@ export function makeLightInvertedTwakeOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
+            borderRadius: string;
             '&.badgeBorder': {
                 border: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.d.ts

@@ -909,6 +909,7 @@ export function makeLightNormalTwakeOverrides(theme: any): {
         badge: {
             boxSizing: string;
             padding: number;
+            borderRadius: string;
             '&.badgeBorder': {
                 border: string;
             };

package/transpiled/react/SquareAppIcon/index.js

@@ -7,7 +7,7 @@ import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
-var styles = {
+var stylesCozy = {
   "SquareAppIcon-wrapper": "styles__SquareAppIcon-wrapper___2SEuM",
   "SquareAppIcon-icon-container": "styles__SquareAppIcon-icon-container___39MRl",
   "SquareAppIcon-wrapper-ghost": "styles__SquareAppIcon-wrapper-ghost___1ZALZ",
@@ -20,6 +20,19 @@ var styles = {
   "isSuccess": "styles__isSuccess___I6nFq",
   "end-animation": "styles__end-animation___1O0b3"
 };
+var stylesTwake = {
+  "SquareAppIcon-wrapper": "styles_twake__SquareAppIcon-wrapper___4P3Cx",
+  "SquareAppIcon-icon-container": "styles_twake__SquareAppIcon-icon-container___grFij",
+  "SquareAppIcon-wrapper-ghost": "styles_twake__SquareAppIcon-wrapper-ghost___3xelE",
+  "SquareAppIcon-icon-container-normal": "styles_twake__SquareAppIcon-icon-container-normal___1O1bk",
+  "SquareAppIcon-wrapper-maintenance": "styles_twake__SquareAppIcon-wrapper-maintenance___hoMUk",
+  "SquareAppIcon-wrapper-loading": "styles_twake__SquareAppIcon-wrapper-loading___AoTRM",
+  "SquareAppIcon-spinner": "styles_twake__SquareAppIcon-spinner___UOK0n",
+  "onEnd": "styles_twake__onEnd___GkZzo",
+  "isFailed": "styles_twake__isFailed___CO_WC",
+  "isSuccess": "styles_twake__isSuccess___sH4pb",
+  "end-animation": "styles_twake__end-animation___26Lyd"
+};
 import AppIcon from "cozy-ui/transpiled/react/AppIcon";
 import Badge from "cozy-ui/transpiled/react/Badge";
 import Icon from "cozy-ui/transpiled/react/Icon";
@@ -31,17 +44,26 @@ import iconWarning from "cozy-ui/transpiled/react/Icons/WarningCircle";
 import InfosBadge from "cozy-ui/transpiled/react/InfosBadge";
 import Spinner from "cozy-ui/transpiled/react/Spinner";
 import Typography from "cozy-ui/transpiled/react/Typography";
+import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
 import { nameToColor } from "cozy-ui/transpiled/react/legacy/Avatar/helpers";
+import { useBreakpoints } from "cozy-ui/transpiled/react/providers/Breakpoints";
 import CozyTheme, { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 import { alpha, makeStyles } from "cozy-ui/transpiled/react/styles";
+var styles = isTwakeTheme() ? stylesTwake : stylesCozy;
+
+var makeTwakeColor = function makeTwakeColor(theme) {
+  return theme.variant === 'inverted' || theme.type === 'dark' ? 'var(--white)' : 'var(--black)';
+};
+
 var useStyles = makeStyles(function (theme) {
   return {
     name: _defineProperty({
-      color: 'var(--primaryTextColor)',
+      color: isTwakeTheme() ? makeTwakeColor(theme) : 'var(--primaryTextColor)',
+      textShadow: isTwakeTheme() ? theme.variant === 'inverted' || theme.type === 'dark' ? '0px 0px 10px rgba(0, 0, 0, 0.10), 0px 0px 2px rgba(0, 0, 0, 0.20), 0.5px 0.5px 1px rgba(0, 0, 0, 0.50)' : undefined : undefined,
       width: '5.5rem',
       textAlign: 'center',
-      fontSize: '0.875rem',
-      lineHeight: '1.188rem',
+      fontSize: isTwakeTheme() ? undefined : '0.875rem',
+      lineHeight: isTwakeTheme() ? undefined : '1.188rem',
       margin: '0.5rem 0.25rem 0 0.25rem',
       lineClamp: '2',
       boxOrient: 'vertical',
@@ -49,8 +71,8 @@ var useStyles = makeStyles(function (theme) {
       height: '2.375rem'
     }, theme.breakpoints.down('sm'), {
       width: '3.75rem',
-      fontSize: '0.6875rem',
-      lineHeight: '1rem',
+      fontSize: isTwakeTheme() ? undefined : '0.6875rem',
+      lineHeight: isTwakeTheme() ? undefined : '1rem',
       margin: '0.25rem 0.25rem 0 0.25rem',
       height: '2rem'
     }),
@@ -66,7 +88,7 @@ var useStyles = makeStyles(function (theme) {
       margin: 'auto'
     },
     shadow: {
-      boxShadow: theme.shadows[1]
+      boxShadow: isTwakeTheme() ? undefined : theme.shadows[1]
     },
     errorIcon: {
       fill: 'var(--errorColor)',
@@ -79,9 +101,9 @@ var useStyles = makeStyles(function (theme) {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
-      width: '6rem'
+      minWidth: '6rem'
     }, theme.breakpoints.down('sm'), {
-      width: '4.25rem'
+      minWidth: '4.25rem'
     }),
     detailedTileWrapper: {
       flexDirection: 'row',
@@ -122,6 +144,9 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
   var _useCozyTheme = useCozyTheme(),
       themeVariant = _useCozyTheme.variant;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   var classes = useStyles();
   var appName = name || get(appIconProps, 'app.name') || get(appIconProps, 'app') || '';
   var letter = appName[0] || '';
@@ -142,7 +167,8 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
     if (curr === 'loading' && (variant === 'default' || variant === undefined)) setAnimationState('success');
     prevVariant.current = variant;
   }, [variant]);
-  var squareTheme = ['add', 'ghost'].includes(variant) ? themeVariant : 'normal';
+  var exceptionVariant = [isTwakeTheme() ? 'ghost' : 'add', 'ghost'];
+  var squareTheme = exceptionVariant.includes(variant) ? themeVariant : 'normal';
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "square-app-icon",
     className: cx(classes.tileWrapper, _defineProperty({}, classes.detailedTileWrapper, display === 'detailed'))
@@ -160,9 +186,9 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
     variant: variant,
     animationState: animationState
   }), /*#__PURE__*/React.createElement(Badge, {
-    className: cx(styles['SquareAppIcon-wrapper'], styles["SquareAppIcon-wrapper-".concat(variant)], (_cx3 = {}, _defineProperty(_cx3, classes.squareAppIconGhost, ['ghost', 'add'].includes(variant)), _defineProperty(_cx3, classes.shadow, !['add', 'ghost'].includes(variant)), _cx3)),
+    className: cx(styles['SquareAppIcon-wrapper'], styles["SquareAppIcon-wrapper-".concat(variant)], (_cx3 = {}, _defineProperty(_cx3, classes.squareAppIconGhost, exceptionVariant.includes(variant)), _defineProperty(_cx3, classes.shadow, !exceptionVariant.includes(variant)), _cx3)),
     badgeContent: variant === 'error' ? /*#__PURE__*/React.createElement(Icon, {
-      size: "16",
+      size: 16,
       className: cx(classes.errorIcon),
       icon: iconWarning
     }) : '',
@@ -170,9 +196,7 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
     withBorder: false,
     size: "large",
     overlap: "rectangular",
-    style: variant === 'shortcut' && !IconContent ? {
-      backgroundColor: nameToColor(name)
-    } : null
+    style: variant === 'shortcut' && !IconContent ? _defineProperty({}, isTwakeTheme() ? 'background' : 'backgroundColor', nameToColor(name)) : null
   }, variant === 'shortcut' && !IconContent ? /*#__PURE__*/React.createElement(Typography, {
     className: classes.letter,
     variant: "h2",
@@ -183,17 +207,19 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
     className: cx(styles['onEnd'], _defineProperty({}, styles['isSuccess'], animationState === 'success'), _defineProperty({}, styles['isFailed'], animationState === 'failed')),
     onAnimationEnd: handleAnimationEnd
   }, animationState && /*#__PURE__*/React.createElement(Icon, {
-    size: "32",
+    size: 32,
     icon: animationState === 'success' ? IconCheckAnimated : SvgIconCrossAnimated
   })), variant === 'add' ? /*#__PURE__*/React.createElement(Icon, {
     icon: iconPlus,
     color: "var(--primaryColor)"
-  }) : IconContent ? IconContent : /*#__PURE__*/React.createElement(AppIcon, appIconProps))))), display === 'detailed' ? /*#__PURE__*/React.createElement(ListItemText, {
+  }) : IconContent ? IconContent : isTwakeTheme() ? /*#__PURE__*/React.createElement("div", {
+    className: "u-w-1-half-s u-h-1-half-s u-w-2 u-h-2"
+  }, /*#__PURE__*/React.createElement(AppIcon, appIconProps)) : /*#__PURE__*/React.createElement(AppIcon, appIconProps))))), display === 'detailed' ? /*#__PURE__*/React.createElement(ListItemText, {
     primary: appName,
     secondary: description
   }) : /*#__PURE__*/React.createElement(Typography, {
     className: cx(classes.name, _defineProperty({}, classes.nameInverted, themeVariant === 'inverted'), 'u-spacellipsis'),
-    variant: "h6",
+    variant: isTwakeTheme() ? isMobile ? 'overline' : 'h6' : 'h6',
     align: "center"
   }, appName));
 };

package/transpiled/react/providers/CozyTheme/DumbCozyTheme.js

@@ -28,6 +28,7 @@ var DumbCozyTheme = function DumbCozyTheme(_ref) {
     value: {
       type: selfThemeType,
       variant: selfThemeVariant,
+      name: uiThemeName,
       isLight: selfThemeType === 'light'
     }
   }, /*#__PURE__*/React.createElement(MuiCozyTheme, {

package/transpiled/react/providers/CozyTheme/index.d.ts

@@ -3,6 +3,7 @@ export function useCozyTheme(): {
     type: 'light' | 'dark';
     variant: 'normal' | 'inverted';
     isLight: boolean;
+    name: 'Twake' | 'Cozy';
 };
 export default CozyTheme;
 import React from "react";

package/transpiled/react/providers/CozyTheme/index.js

@@ -8,7 +8,7 @@ import DumbCozyTheme from "cozy-ui/transpiled/react/providers/CozyTheme/DumbCozy
 import { isRsg } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers";
 export var CozyThemeContext = /*#__PURE__*/createContext();
 /**
- * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean }}
+ * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean, name: 'Twake'|'Cozy' }}
  */
 
 export var useCozyTheme = function useCozyTheme() {
@@ -19,7 +19,8 @@ export var useCozyTheme = function useCozyTheme() {
     return {
       type: 'light',
       variant: 'normal',
-      isLight: true
+      isLight: true,
+      name: 'Cozy'
     };
   }