From a170f021ef91a7906266db39f39c96f7a99a6ee7 Mon Sep 17 00:00:00 2001
From: Beatrice Guerra <beatrice.guerra@zextras.com>
Date: Mon, 11 Nov 2024 12:06:44 +0100
Subject: [PATCH 01/11] chore: update submodule

---
 src/carbonio-ui-commons | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/carbonio-ui-commons b/src/carbonio-ui-commons
index 7c35e9db..e5098888 160000
--- a/src/carbonio-ui-commons
+++ b/src/carbonio-ui-commons
@@ -1 +1 @@
-Subproject commit 7c35e9db94ada0a8bfe69c0ca3a7047f276f4ad2
+Subproject commit e5098888b4625f1a6a5dd3871ffc7014e9b449e5

From fc1698c010c29dd067d91c42a0045bb908f97fd5 Mon Sep 17 00:00:00 2001
From: Beatrice Guerra <beatrice.guerra@zextras.com>
Date: Tue, 12 Nov 2024 12:44:50 +0100
Subject: [PATCH 02/11] refactor: uppgrade styled-components to v6

Refs: CO-1609
---
 .idea/runConfigurations/start.xml             |  12 -
 .idea/zapp-calendar.iml                       |   4 +-
 package-lock.json                             | 352 ++++++--
 package.json                                  |   9 +-
 src/assets.d.ts                               |   6 +
 src/carbonio-ui-commons                       |   2 +-
 src/commons/color-select.jsx                  |   4 +-
 src/commons/date-picker-style.jsx             |   2 +-
 src/commons/editor-generator.ts               |   4 +-
 src/commons/globals.d.ts                      |   6 -
 src/commons/modal-footer.tsx                  | 145 +--
 .../{modal-header.jsx => modal-header.tsx}    |  23 +-
 src/commons/styled-components.tsx             |   6 +-
 src/react-big-calendar-lib.d.ts               |  10 +
 src/react-big-calendar.d.ts                   |  14 +
 src/settings/components/date-picker-style.jsx | 851 ------------------
 src/settings/components/date-picker-style.tsx | 841 +++++++++++++++++
 .../components/{utils.js => utils.ts}         |  56 +-
 src/settings/permissions-settings-view.jsx    |   2 +-
 src/view/calendar/custom-toolbar.tsx          |  31 +-
 src/view/calendar/work-view.tsx               |   4 +-
 src/view/editor/parts/editor-attendees.tsx    |   6 +-
 src/view/editor/parts/editor-date-picker.tsx  |  11 +-
 .../parts/editor-free-busy-selector.tsx       |   2 +-
 .../parts/editor-resource-component.tsx       |  37 +-
 src/view/editor/parts/editor-time-zone.tsx    |   2 +-
 .../views/recurrence-end-options.tsx          |   2 +-
 .../editor/parts/select-label-factory.tsx     |  48 +-
 src/view/event-panel-view/attachment.tsx      |  22 +-
 .../event-panel-view/event-panel-view.tsx     |   3 +-
 src/view/move/new-calendar-modal.tsx          |  11 +-
 .../search/parts/from-date-to-date-row.tsx    |   4 +-
 src/view/search/types.d.ts                    |   6 -
 src/view/sidebar/edit-modal/edit-modal.tsx    |  62 +-
 .../parts/edit-permission-modal.tsx           |   2 +-
 .../edit-modal/parts/main-edit-modal.tsx      |  17 +-
 src/view/sidebar/share-calendar-modal.tsx     |  31 +-
 tsconfig.json                                 |   5 +-
 38 files changed, 1450 insertions(+), 1205 deletions(-)
 delete mode 100644 .idea/runConfigurations/start.xml
 create mode 100644 src/assets.d.ts
 delete mode 100644 src/commons/globals.d.ts
 rename src/commons/{modal-header.jsx => modal-header.tsx} (55%)
 create mode 100644 src/react-big-calendar-lib.d.ts
 create mode 100644 src/react-big-calendar.d.ts
 delete mode 100644 src/settings/components/date-picker-style.jsx
 create mode 100644 src/settings/components/date-picker-style.tsx
 rename src/settings/components/{utils.js => utils.ts} (91%)
 delete mode 100644 src/view/search/types.d.ts

diff --git a/.idea/runConfigurations/start.xml b/.idea/runConfigurations/start.xml
deleted file mode 100644
index 0ac61971..00000000
--- a/.idea/runConfigurations/start.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="start" type="js.build_tools.npm" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/package.json" />
-    <command value="run" />
-    <scripts>
-      <script value="start" />
-    </scripts>
-    <node-interpreter value="project" />
-    <envs />
-    <method v="2" />
-  </configuration>
-</component>
\ No newline at end of file
diff --git a/.idea/zapp-calendar.iml b/.idea/zapp-calendar.iml
index 060e6cab..0c1ad526 100644
--- a/.idea/zapp-calendar.iml
+++ b/.idea/zapp-calendar.iml
@@ -5,10 +5,8 @@
       <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/build" />
       <excludeFolder url="file://$MODULE_DIR$/pkg" />
+      <excludeFolder url="file://$MODULE_DIR$/coverage" />
     </content>
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
-  <component name="SonarLintModuleSettings">
-    <option name="uniqueId" value="d48ba62e-61b0-4149-bc49-be0c7c76248b" />
-  </component>
 </module>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 852d4eed..89a5dac3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,9 +16,9 @@
 				"@reduxjs/toolkit": "^1.9.7",
 				"@types/webpack": "^5.28.2",
 				"@types/webpack-env": "^1.18.1",
-				"@zextras/carbonio-design-system": "^8.0.0",
+				"@zextras/carbonio-design-system": "9.0.0-devel.6",
 				"@zextras/carbonio-shell-ui": "devel",
-				"@zextras/carbonio-ui-preview": "^3.0.0",
+				"@zextras/carbonio-ui-preview": "^3.1.0-devel.2",
 				"core-js": "^3.36.1",
 				"date-arithmetic": "^4.1.0",
 				"i18next": "^22.4.13",
@@ -37,7 +37,7 @@
 				"react-widgets": "4.6.1",
 				"react-widgets-moment": "4.0.30",
 				"redux": "4.2.1",
-				"styled-components": "^5.3.6",
+				"styled-components": "^6.1.13",
 				"zustand": "^4.5.2"
 			},
 			"devDependencies": {
@@ -56,9 +56,11 @@
 				"@types/jest": "^29.5.13",
 				"@types/lodash": "^4.17.0",
 				"@types/react": "^18.3.1",
+				"@types/react-big-calendar": "^1.15.0",
 				"@types/react-dom": "^18.3.1",
 				"@types/react-redux": "^7.1.33",
 				"@types/react-router-dom": "^5.3.3",
+				"@types/react-widgets-moment": "^4.0.3",
 				"@types/styled-components": "^5.1.34",
 				"@zextras/carbonio-ui-configs": "^1.0.0",
 				"@zextras/carbonio-ui-sdk": "^1.7.7",
@@ -70,6 +72,7 @@
 				"eslint-plugin-unused-imports": "^2.0.0",
 				"eslint-stats": "^1.0.1",
 				"husky": "^9.1.6",
+				"is-ci": "^3.0.1",
 				"jest": "^29.7.0",
 				"jest-environment-jsdom": "^29.7.0",
 				"jest-fail-on-console": "^3.1.2",
@@ -2576,6 +2579,32 @@
 				"@floating-ui/utils": "^0.2.8"
 			}
 		},
+		"node_modules/@floating-ui/react": {
+			"version": "0.26.27",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.27.tgz",
+			"integrity": "sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==",
+			"dependencies": {
+				"@floating-ui/react-dom": "^2.1.2",
+				"@floating-ui/utils": "^0.2.8",
+				"tabbable": "^6.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
+		"node_modules/@floating-ui/react-dom": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+			"integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+			"dependencies": {
+				"@floating-ui/dom": "^1.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
 		"node_modules/@floating-ui/utils": {
 			"version": "0.2.8",
 			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
@@ -4443,6 +4472,12 @@
 			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
 			"dev": true
 		},
+		"node_modules/@types/date-arithmetic": {
+			"version": "4.1.4",
+			"resolved": "https://registry.npmjs.org/@types/date-arithmetic/-/date-arithmetic-4.1.4.tgz",
+			"integrity": "sha512-p9eZ2X9B80iKiTW4ukVj8B4K6q9/+xFtQ5MGYA5HWToY9nL4EkhV9+6ftT2VHpVMEZb5Tv00Iel516bVdO+yRw==",
+			"dev": true
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -4668,6 +4703,17 @@
 				"csstype": "^3.0.2"
 			}
 		},
+		"node_modules/@types/react-big-calendar": {
+			"version": "1.15.0",
+			"resolved": "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-1.15.0.tgz",
+			"integrity": "sha512-eZF0HCwalF8bFaEpcxufrIEAu8m6UiTjqbuQk66i7RbuPbi4xjlJqFeQ6Pb6TCudZVZ5ttnz9AquQDvgKGM3cQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/date-arithmetic": "*",
+				"@types/prop-types": "*",
+				"@types/react": "*"
+			}
+		},
 		"node_modules/@types/react-dom": {
 			"version": "18.3.1",
 			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
@@ -4718,6 +4764,15 @@
 				"@types/react": "*"
 			}
 		},
+		"node_modules/@types/react-widgets-moment": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/@types/react-widgets-moment/-/react-widgets-moment-4.0.3.tgz",
+			"integrity": "sha512-w6URZ/7x26te8AeemS4mRSfgx8r0rO09/qtByDoqFa8nL1C/zRW6sdIRWR/M1N6atHJIY0xvTFPi2LVVC2eBmw==",
+			"dev": true,
+			"dependencies": {
+				"moment": "^2.18.1"
+			}
+		},
 		"node_modules/@types/retry": {
 			"version": "0.12.0",
 			"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -4800,6 +4855,11 @@
 				"csstype": "^3.0.2"
 			}
 		},
+		"node_modules/@types/stylis": {
+			"version": "4.2.5",
+			"resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+			"integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
+		},
 		"node_modules/@types/tough-cookie": {
 			"version": "4.0.5",
 			"resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -5263,21 +5323,22 @@
 			"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
 		},
 		"node_modules/@zextras/carbonio-design-system": {
-			"version": "8.0.0",
-			"resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-8.0.0.tgz",
-			"integrity": "sha512-HDbA9d5JNPm1gZyDPiawbd3Fw5XNaupLN1VNxQcph29opZXWH2QzfCuYVH+dSGVm2sIkICgyBqk1gaPENtocEQ==",
+			"version": "9.0.0-devel.6",
+			"resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-9.0.0-devel.6.tgz",
+			"integrity": "sha512-GqiE91YsbYh+mcMyIiMqCldA4x4aokAKLyoF8hkUKuEhIAUrbBNqc51StEyVognIRS2R/nO605DXHFMNFHdO/g==",
 			"dependencies": {
-				"@floating-ui/dom": "^1.5.3",
+				"@floating-ui/dom": "^1.6.11",
 				"core-js": "^3.38.1",
-				"darkreader": "^4.9.58",
-				"polished": "^4.2.2",
-				"react-datepicker": "^4.25.0"
+				"darkreader": "^4.9.92",
+				"polished": "^4.3.1",
+				"react-datepicker": "^7.5.0"
 			},
 			"peerDependencies": {
+				"date-fns": "^4.1.0",
 				"lodash": "^4.17.21",
-				"react": "^18.0.0",
-				"react-dom": "^18.0.0",
-				"styled-components": "^5.3.11"
+				"react": "^18.3.1",
+				"react-dom": "^18.3.1",
+				"styled-components": "^6.1.13"
 			}
 		},
 		"node_modules/@zextras/carbonio-shell-ui": {
@@ -5348,6 +5409,58 @@
 				}
 			}
 		},
+		"node_modules/@zextras/carbonio-shell-ui/node_modules/@emotion/unitless": {
+			"version": "0.7.5",
+			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+			"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+		},
+		"node_modules/@zextras/carbonio-shell-ui/node_modules/@zextras/carbonio-design-system": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-8.1.0.tgz",
+			"integrity": "sha512-PxiPPetc3YCKr7NsxiM83TWZhthdCsUkg6r3Njc5zOQVIE0SAMbv4fjDcPMTtDnqx8TV9e0EVZtGA0TZADmnaQ==",
+			"dependencies": {
+				"@floating-ui/dom": "^1.5.3",
+				"core-js": "^3.38.1",
+				"darkreader": "^4.9.58",
+				"polished": "^4.2.2",
+				"react-datepicker": "^4.25.0"
+			},
+			"peerDependencies": {
+				"lodash": "^4.17.21",
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0",
+				"styled-components": "^5.3.11"
+			}
+		},
+		"node_modules/@zextras/carbonio-shell-ui/node_modules/@zextras/carbonio-ui-preview": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-3.0.0.tgz",
+			"integrity": "sha512-MJM8VVCJ4AYgmWrXHWhLdZPZakdJANF/V6Va7Wy/YRyPsaXXqGlrs27VB3kFLQGp72sGhS0AEqr6LMWnHJQajA==",
+			"dependencies": {
+				"core-js": "^3.37.1",
+				"react-pdf": "^9.1.0"
+			},
+			"peerDependencies": {
+				"@zextras/carbonio-design-system": "^8.0.0",
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@zextras/carbonio-shell-ui/node_modules/date-fns": {
+			"version": "2.30.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+			"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+			"dependencies": {
+				"@babel/runtime": "^7.21.0"
+			},
+			"engines": {
+				"node": ">=0.11"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/date-fns"
+			}
+		},
 		"node_modules/@zextras/carbonio-shell-ui/node_modules/immer": {
 			"version": "10.1.1",
 			"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
@@ -5357,6 +5470,52 @@
 				"url": "https://opencollective.com/immer"
 			}
 		},
+		"node_modules/@zextras/carbonio-shell-ui/node_modules/react-datepicker": {
+			"version": "4.25.0",
+			"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz",
+			"integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==",
+			"dependencies": {
+				"@popperjs/core": "^2.11.8",
+				"classnames": "^2.2.6",
+				"date-fns": "^2.30.0",
+				"prop-types": "^15.7.2",
+				"react-onclickoutside": "^6.13.0",
+				"react-popper": "^2.3.0"
+			},
+			"peerDependencies": {
+				"react": "^16.9.0 || ^17 || ^18",
+				"react-dom": "^16.9.0 || ^17 || ^18"
+			}
+		},
+		"node_modules/@zextras/carbonio-shell-ui/node_modules/styled-components": {
+			"version": "5.3.11",
+			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
+			"integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.0.0",
+				"@babel/traverse": "^7.4.5",
+				"@emotion/is-prop-valid": "^1.1.0",
+				"@emotion/stylis": "^0.8.4",
+				"@emotion/unitless": "^0.7.4",
+				"babel-plugin-styled-components": ">= 1.12.0",
+				"css-to-react-native": "^3.0.0",
+				"hoist-non-react-statics": "^3.0.0",
+				"shallowequal": "^1.1.0",
+				"supports-color": "^5.5.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/styled-components"
+			},
+			"peerDependencies": {
+				"react": ">= 16.8.0",
+				"react-dom": ">= 16.8.0",
+				"react-is": ">= 16.8.0"
+			}
+		},
 		"node_modules/@zextras/carbonio-ui-configs": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-configs/-/carbonio-ui-configs-1.0.2.tgz",
@@ -5694,15 +5853,15 @@
 			}
 		},
 		"node_modules/@zextras/carbonio-ui-preview": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-3.0.0.tgz",
-			"integrity": "sha512-MJM8VVCJ4AYgmWrXHWhLdZPZakdJANF/V6Va7Wy/YRyPsaXXqGlrs27VB3kFLQGp72sGhS0AEqr6LMWnHJQajA==",
+			"version": "3.1.0-devel.2",
+			"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-3.1.0-devel.2.tgz",
+			"integrity": "sha512-z6Zb/ZlV2U0+CuAmRFR6ZoDwiAUvzFGMQYaR9RmZw0gtZ9JfY1OX/J9f9b49aJpteEXdZyuLClv0/9X7erBjKQ==",
 			"dependencies": {
 				"core-js": "^3.37.1",
 				"react-pdf": "^9.1.0"
 			},
 			"peerDependencies": {
-				"@zextras/carbonio-design-system": "^8.0.0",
+				"@zextras/carbonio-design-system": "^8.0.0 || ^9.0.0-devel",
 				"react": "^18.0.0",
 				"react-dom": "^18.0.0"
 			}
@@ -7918,9 +8077,9 @@
 			}
 		},
 		"node_modules/darkreader": {
-			"version": "4.9.89",
-			"resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.89.tgz",
-			"integrity": "sha512-mO/HFu69+U1szlAfkhW+1P4IcSeNV9Su6JD3zTKFyg61b5GMWY70lkBimD4NEDpY6DJ4Ks9kFFpENeG/UcsKYw==",
+			"version": "4.9.96",
+			"resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.96.tgz",
+			"integrity": "sha512-zda3BfSF9KRNee59pWZBMeblay0THGFPob9gf2UeUes8mIMM+bHKg0EyPTcSgHholyBwRAmpRMosmPl34YAoaA==",
 			"dependencies": {
 				"malevic": "0.20.2"
 			},
@@ -8000,18 +8159,13 @@
 			"integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg=="
 		},
 		"node_modules/date-fns": {
-			"version": "2.30.0",
-			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-			"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-			"dependencies": {
-				"@babel/runtime": "^7.21.0"
-			},
-			"engines": {
-				"node": ">=0.11"
-			},
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+			"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+			"peer": true,
 			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/date-fns"
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
 			}
 		},
 		"node_modules/dayjs": {
@@ -11400,6 +11554,18 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/is-ci": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
+			"integrity": "sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==",
+			"dev": true,
+			"dependencies": {
+				"ci-info": "^3.2.0"
+			},
+			"bin": {
+				"is-ci": "bin.js"
+			}
+		},
 		"node_modules/is-core-module": {
 			"version": "2.15.1",
 			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
@@ -14995,7 +15161,6 @@
 			"version": "3.3.7",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
 			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -15652,9 +15817,9 @@
 			}
 		},
 		"node_modules/path2d": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.1.tgz",
-			"integrity": "sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==",
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.2.tgz",
+			"integrity": "sha512-+vnG6S4dYcYxZd+CZxzXCNKdELYZSKfohrk98yajCo1PtRoDgCTrrwOvK1GT0UoAdVszagDVllQc0U1vaX4NUQ==",
 			"optional": true,
 			"engines": {
 				"node": ">=6"
@@ -16504,22 +16669,29 @@
 			}
 		},
 		"node_modules/react-datepicker": {
-			"version": "4.25.0",
-			"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz",
-			"integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==",
+			"version": "7.5.0",
+			"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.5.0.tgz",
+			"integrity": "sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==",
 			"dependencies": {
-				"@popperjs/core": "^2.11.8",
-				"classnames": "^2.2.6",
-				"date-fns": "^2.30.0",
-				"prop-types": "^15.7.2",
-				"react-onclickoutside": "^6.13.0",
-				"react-popper": "^2.3.0"
+				"@floating-ui/react": "^0.26.23",
+				"clsx": "^2.1.1",
+				"date-fns": "^3.6.0",
+				"prop-types": "^15.8.1"
 			},
 			"peerDependencies": {
 				"react": "^16.9.0 || ^17 || ^18",
 				"react-dom": "^16.9.0 || ^17 || ^18"
 			}
 		},
+		"node_modules/react-datepicker/node_modules/date-fns": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+			"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
+			}
+		},
 		"node_modules/react-dom": {
 			"version": "18.3.1",
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -17654,7 +17826,6 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
 			"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -17985,23 +18156,22 @@
 			}
 		},
 		"node_modules/styled-components": {
-			"version": "5.3.11",
-			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
-			"integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+			"version": "6.1.13",
+			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
+			"integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
 			"dependencies": {
-				"@babel/helper-module-imports": "^7.0.0",
-				"@babel/traverse": "^7.4.5",
-				"@emotion/is-prop-valid": "^1.1.0",
-				"@emotion/stylis": "^0.8.4",
-				"@emotion/unitless": "^0.7.4",
-				"babel-plugin-styled-components": ">= 1.12.0",
-				"css-to-react-native": "^3.0.0",
-				"hoist-non-react-statics": "^3.0.0",
-				"shallowequal": "^1.1.0",
-				"supports-color": "^5.5.0"
+				"@emotion/is-prop-valid": "1.2.2",
+				"@emotion/unitless": "0.8.1",
+				"@types/stylis": "4.2.5",
+				"css-to-react-native": "3.2.0",
+				"csstype": "3.1.3",
+				"postcss": "8.4.38",
+				"shallowequal": "1.1.0",
+				"stylis": "4.3.2",
+				"tslib": "2.6.2"
 			},
 			"engines": {
-				"node": ">=10"
+				"node": ">= 16"
 			},
 			"funding": {
 				"type": "opencollective",
@@ -18009,14 +18179,63 @@
 			},
 			"peerDependencies": {
 				"react": ">= 16.8.0",
-				"react-dom": ">= 16.8.0",
-				"react-is": ">= 16.8.0"
+				"react-dom": ">= 16.8.0"
+			}
+		},
+		"node_modules/styled-components/node_modules/@emotion/is-prop-valid": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+			"integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+			"dependencies": {
+				"@emotion/memoize": "^0.8.1"
 			}
 		},
+		"node_modules/styled-components/node_modules/@emotion/memoize": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+			"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+		},
 		"node_modules/styled-components/node_modules/@emotion/unitless": {
-			"version": "0.7.5",
-			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-			"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+			"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+		},
+		"node_modules/styled-components/node_modules/postcss": {
+			"version": "8.4.38",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+			"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"nanoid": "^3.3.7",
+				"picocolors": "^1.0.0",
+				"source-map-js": "^1.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			}
+		},
+		"node_modules/styled-components/node_modules/stylis": {
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+			"integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
+		},
+		"node_modules/styled-components/node_modules/tslib": {
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
 		},
 		"node_modules/stylis": {
 			"version": "4.2.0",
@@ -18067,6 +18286,11 @@
 				"url": "https://opencollective.com/unts"
 			}
 		},
+		"node_modules/tabbable": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+			"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+		},
 		"node_modules/tapable": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/package.json b/package.json
index 034af556..d3eb17a1 100644
--- a/package.json
+++ b/package.json
@@ -51,9 +51,11 @@
 		"@types/jest": "^29.5.13",
 		"@types/lodash": "^4.17.0",
 		"@types/react": "^18.3.1",
+		"@types/react-big-calendar": "^1.15.0",
 		"@types/react-dom": "^18.3.1",
 		"@types/react-redux": "^7.1.33",
 		"@types/react-router-dom": "^5.3.3",
+		"@types/react-widgets-moment": "^4.0.3",
 		"@types/styled-components": "^5.1.34",
 		"@zextras/carbonio-ui-configs": "^1.0.0",
 		"@zextras/carbonio-ui-sdk": "^1.7.7",
@@ -65,6 +67,7 @@
 		"eslint-plugin-unused-imports": "^2.0.0",
 		"eslint-stats": "^1.0.1",
 		"husky": "^9.1.6",
+		"is-ci": "^3.0.1",
 		"jest": "^29.7.0",
 		"jest-environment-jsdom": "^29.7.0",
 		"jest-fail-on-console": "^3.1.2",
@@ -83,9 +86,9 @@
 		"@reduxjs/toolkit": "^1.9.7",
 		"@types/webpack": "^5.28.2",
 		"@types/webpack-env": "^1.18.1",
-		"@zextras/carbonio-design-system": "^8.0.0",
+		"@zextras/carbonio-design-system": "9.0.0-devel.6",
 		"@zextras/carbonio-shell-ui": "devel",
-		"@zextras/carbonio-ui-preview": "^3.0.0",
+		"@zextras/carbonio-ui-preview": "^3.1.0-devel.2",
 		"core-js": "^3.36.1",
 		"date-arithmetic": "^4.1.0",
 		"i18next": "^22.4.13",
@@ -104,7 +107,7 @@
 		"react-widgets": "4.6.1",
 		"react-widgets-moment": "4.0.30",
 		"redux": "4.2.1",
-		"styled-components": "^5.3.6",
+		"styled-components": "^6.1.13",
 		"zustand": "^4.5.2"
 	},
 	"browserslist": [
diff --git a/src/assets.d.ts b/src/assets.d.ts
new file mode 100644
index 00000000..ee8425a7
--- /dev/null
+++ b/src/assets.d.ts
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+declare module '*.mp3';
diff --git a/src/carbonio-ui-commons b/src/carbonio-ui-commons
index e5098888..555f1d20 160000
--- a/src/carbonio-ui-commons
+++ b/src/carbonio-ui-commons
@@ -1 +1 @@
-Subproject commit e5098888b4625f1a6a5dd3871ffc7014e9b449e5
+Subproject commit 555f1d204501399df896bcaf2b9e6e0855b37906
diff --git a/src/commons/color-select.jsx b/src/commons/color-select.jsx
index c3c20d2d..96bc77bc 100644
--- a/src/commons/color-select.jsx
+++ b/src/commons/color-select.jsx
@@ -35,7 +35,7 @@ const LabelFactory = ({ selected, label, open, focus }) => (
 				<TextUpperCase>{selected[0].label}</TextUpperCase>
 			</Row>
 			<Padding right="small">
-				<Square color={ZIMBRA_STANDARD_COLORS[Number(selected[0].value)].hex} />
+				<Square $color={ZIMBRA_STANDARD_COLORS[Number(selected[0].value)].hex} />
 			</Padding>
 		</Row>
 		<Icon
@@ -62,7 +62,7 @@ const getStatusItems = (t) =>
 				<Padding left="small">
 					<TextUpperCase>{t(el.zLabel)}</TextUpperCase>
 				</Padding>
-				<Square color={el.hex} />
+				<Square $color={el.hex} />
 			</Container>
 		)
 	}));
diff --git a/src/commons/date-picker-style.jsx b/src/commons/date-picker-style.jsx
index 8d4c123e..cad7688c 100644
--- a/src/commons/date-picker-style.jsx
+++ b/src/commons/date-picker-style.jsx
@@ -217,7 +217,7 @@ const Styler = styled(Container)`
 		display: table-cell;
 	}
 	.rw-widget-picker > .rw-select {
-		width: ${({ allDay }) => (allDay ? '2.125rem' : '4.25rem')};
+		width: ${({ $allDay }) => ($allDay ? '2.125rem' : '4.25rem')};
 		white-space: nowrap;
 	}
 	.rw-open > .rw-widget-picker {
diff --git a/src/commons/editor-generator.ts b/src/commons/editor-generator.ts
index 5b1a82f7..04a6649d 100644
--- a/src/commons/editor-generator.ts
+++ b/src/commons/editor-generator.ts
@@ -9,7 +9,7 @@ import momentLocalizer from 'react-widgets-moment';
 import { Dispatch } from 'redux';
 
 import { getIdentityItems } from './get-identity-items';
-import { Folder, Folders, LinkFolder } from '../carbonio-ui-commons/types/folder';
+import { Folders, LinkFolder } from '../carbonio-ui-commons/types/folder';
 import { getPrefs } from '../carbonio-ui-commons/utils/get-prefs';
 import { PREFS_DEFAULTS } from '../constants';
 import { EventPropType, normalizeEditor } from '../normalizations/normalize-editor';
@@ -17,7 +17,7 @@ import { createNewEditor } from '../store/slices/editor-slice';
 import { Editor } from '../types/editor';
 import { Invite } from '../types/store/invite';
 
-momentLocalizer(moment);
+momentLocalizer();
 
 let counter = 0;
 
diff --git a/src/commons/globals.d.ts b/src/commons/globals.d.ts
deleted file mode 100644
index cff8272b..00000000
--- a/src/commons/globals.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-// declare module '@zextras/carbonio-design-system';
diff --git a/src/commons/modal-footer.tsx b/src/commons/modal-footer.tsx
index fa69959c..3bb1d1d0 100644
--- a/src/commons/modal-footer.tsx
+++ b/src/commons/modal-footer.tsx
@@ -3,9 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable import/extensions */
-import React, { FC, ReactElement } from 'react';
+import React, { FC, ReactElement, useMemo } from 'react';
 
 import { Button, Container, Divider, Padding, Tooltip } from '@zextras/carbonio-design-system';
 import { t } from '@zextras/carbonio-shell-ui';
@@ -33,78 +31,101 @@ const ModalFooter: FC<ModalFooterProps> = ({
 	additionalBtnType = 'outlined',
 	additionalColor = 'secondary',
 	additionalLabel = t('label.cancel', 'cancel')
-}): ReactElement => (
-	<Container mainAlignment={mainAlignment} crossAlignment={crossAlignment}>
-		{showDivider && (
-			<Container
-				padding={{ top: 'small', bottom: 'small' }}
-				mainAlignment="center"
-				crossAlignment="flex-start"
-				orientation="horizontal"
-				height="fit"
-			>
-				<Divider />
-			</Container>
-		)}
-		<Container orientation="horizontal" mainAlignment="space-between">
-			{additionalAction && (
-				<Container orientation="horizontal" width="fit">
-					<Button
-						color={additionalColor}
-						type={additionalBtnType}
-						onClick={additionalAction}
-						label={additionalLabel}
-						width="fit"
-					/>
-					<Padding horizontal="extrasmall" />
+}): ReactElement => {
+	const secondaryButtonTypeAndColor = useMemo(() => {
+		if (secondaryBtnType === 'ghost') {
+			return { type: secondaryBtnType, color: secondaryColor };
+		}
+		if (secondaryBtnType === 'default') {
+			return {
+				type: secondaryBtnType,
+				backgroundColor: secondaryColor || secondarybackground
+			};
+		}
+		return {
+			type: secondaryBtnType,
+			labelColor: secondaryColor,
+			backgroundColor: secondarybackground
+		};
+	}, [secondaryBtnType, secondaryColor, secondarybackground]);
+
+	const primaryButtonTypeAndColor = useMemo(() => {
+		if (primaryBtnType === 'ghost') {
+			return { type: primaryBtnType, color };
+		}
+		if (primaryBtnType === 'default') {
+			return { type: primaryBtnType, backgroundColor: color || background };
+		}
+		return { type: primaryBtnType, labelColor: color, backgroundColor: background };
+	}, [background, color, primaryBtnType]);
+
+	return (
+		<Container mainAlignment={mainAlignment} crossAlignment={crossAlignment}>
+			{showDivider && (
+				<Container
+					padding={{ top: 'small', bottom: 'small' }}
+					mainAlignment="center"
+					crossAlignment="flex-start"
+					orientation="horizontal"
+					height="fit"
+				>
+					<Divider />
 				</Container>
 			)}
-			<Container
-				padding={{ top: 'small', bottom: 'small' }}
-				mainAlignment="flex-end"
-				crossAlignment="flex-start"
-				orientation="horizontal"
-				height="fit"
-			>
-				{secondaryAction && (
-					<>
+			<Container orientation="horizontal" mainAlignment="space-between">
+				{additionalAction && (
+					<Container orientation="horizontal" width="fit">
 						<Button
-							backgroundColor={secondarybackground}
-							color={secondaryColor}
-							type={secondaryBtnType}
-							onClick={secondaryAction}
-							label={secondaryLabel}
-							disabled={secondaryDisabled}
+							color={additionalColor}
+							type={additionalBtnType}
+							onClick={additionalAction}
+							label={additionalLabel}
 							width="fit"
 						/>
 						<Padding horizontal="extrasmall" />
-					</>
+					</Container>
 				)}
-				{tooltip ? (
-					<Tooltip label={tooltip} placement="top" maxWidth="fit">
+				<Container
+					padding={{ top: 'small', bottom: 'small' }}
+					mainAlignment="flex-end"
+					crossAlignment="flex-start"
+					orientation="horizontal"
+					height="fit"
+				>
+					{secondaryAction && (
+						<>
+							<Button
+								{...secondaryButtonTypeAndColor}
+								onClick={secondaryAction}
+								label={secondaryLabel}
+								disabled={secondaryDisabled}
+								width="fit"
+							/>
+							<Padding horizontal="extrasmall" />
+						</>
+					)}
+					{tooltip ? (
+						<Tooltip label={tooltip} placement="top" maxWidth="fit">
+							<Button
+								width="fit"
+								onClick={onConfirm}
+								label={label}
+								disabled={disabled}
+								{...primaryButtonTypeAndColor}
+							/>
+						</Tooltip>
+					) : (
 						<Button
 							width="fit"
-							color={color}
 							onClick={onConfirm}
 							label={label}
-							type={primaryBtnType}
 							disabled={disabled}
-							backgroundColor={color || background}
+							{...primaryButtonTypeAndColor}
 						/>
-					</Tooltip>
-				) : (
-					<Button
-						width="fit"
-						color={color}
-						onClick={onConfirm}
-						label={label}
-						type={primaryBtnType}
-						disabled={disabled}
-						backgroundColor={color || background}
-					/>
-				)}
+					)}
+				</Container>
 			</Container>
 		</Container>
-	</Container>
-);
+	);
+};
 export default ModalFooter;
diff --git a/src/commons/modal-header.jsx b/src/commons/modal-header.tsx
similarity index 55%
rename from src/commons/modal-header.jsx
rename to src/commons/modal-header.tsx
index 222bd7ea..6787b745 100644
--- a/src/commons/modal-header.jsx
+++ b/src/commons/modal-header.tsx
@@ -5,9 +5,21 @@
  */
 import React from 'react';
 
-import { Container, Divider, Text, Row, IconButton } from '@zextras/carbonio-design-system';
+import {
+	Container,
+	Divider,
+	Text,
+	Row,
+	IconButton,
+	ButtonProps
+} from '@zextras/carbonio-design-system';
 
-export const ModalHeader = ({ title, onClose }) => (
+interface ModalHeaderProps {
+	title: string;
+	onClose?: ButtonProps['onClick'];
+}
+
+export const ModalHeader = ({ title, onClose }: ModalHeaderProps): React.JSX.Element => (
 	<>
 		<Row
 			orientation="horizontal"
@@ -20,12 +32,7 @@ export const ModalHeader = ({ title, onClose }) => (
 				{title}
 			</Text>
 			{onClose && (
-				<IconButton
-					size="medium"
-					style={{ padding: { all: 'small' }, margin: 0 }}
-					onClick={onClose}
-					icon="CloseOutline"
-				/>
+				<IconButton size="medium" style={{ margin: 0 }} onClick={onClose} icon="CloseOutline" />
 			)}
 		</Row>
 		<Container padding={{ top: 'small', bottom: 'small' }}>
diff --git a/src/commons/styled-components.tsx b/src/commons/styled-components.tsx
index f137dcf5..0a432e98 100644
--- a/src/commons/styled-components.tsx
+++ b/src/commons/styled-components.tsx
@@ -3,16 +3,16 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { Container, Text } from '@zextras/carbonio-design-system';
+import { AnyColor, Container, Text } from '@zextras/carbonio-design-system';
 import styled from 'styled-components';
 
-export const Square = styled.div`
+export const Square = styled.div<{ $color: AnyColor }>`
 	width: 1.125rem;
 	height: 1.125rem;
 	position: relative;
 	top: -0.1875rem;
 	border: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular};
-	background: ${({ color }): string | undefined => color};
+	background: ${({ $color }): string | undefined => $color};
 	border-radius: 0.25rem;
 `;
 export const ColorContainer = styled(Container)`
diff --git a/src/react-big-calendar-lib.d.ts b/src/react-big-calendar-lib.d.ts
new file mode 100644
index 00000000..aea7e609
--- /dev/null
+++ b/src/react-big-calendar-lib.d.ts
@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+declare module 'react-big-calendar/lib/TimeGrid' {
+	import type * as ReactBigCalendar from 'react-big-calendar';
+
+	export default ReactBigCalendar.TimeGrid;
+}
diff --git a/src/react-big-calendar.d.ts b/src/react-big-calendar.d.ts
new file mode 100644
index 00000000..91f618c2
--- /dev/null
+++ b/src/react-big-calendar.d.ts
@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type * as ReactBigCalendar from 'react-big-calendar';
+
+declare module 'react-big-calendar' {
+	interface TimeGridProps extends ReactBigCalendar.TimeGridProps {
+		enableAutoScroll?: boolean;
+		eventOffset?: ReactBigCalendar.TimeGridProps['eventOffset'];
+	}
+}
diff --git a/src/settings/components/date-picker-style.jsx b/src/settings/components/date-picker-style.jsx
deleted file mode 100644
index 61693982..00000000
--- a/src/settings/components/date-picker-style.jsx
+++ /dev/null
@@ -1,851 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import { Container } from '@zextras/carbonio-design-system';
-import styled from 'styled-components';
-
-const Styler = styled(Container)`
-	.rw-btn,
-.rw-input-reset,
-.rw-input,
-.rw-dropdown-list-autofill,
-.rw-filter-input {
-	color: inherit;
-	padding: 0;
-	margin: 0;
-	border: none;
-	box-shadow: none;
-	background: none;
-	background-image: none;
-	font-family: inherit;
-	font-size: inherit;
-	line-height: inherit;
-	-ms-touch-action: manipulation;
-	touch-action: manipulation;
-}
-.rw-btn::-moz-focus-inner {
-	padding: 0;
-	border: 0;
-}
-select.rw-input {
-	text-transform: none;
-}
-html input[type="button"].rw-input {
-	-webkit-appearance: button;
-	cursor: pointer;
-}
-textarea.rw-input {
-	overflow: auto;
-	resize: vertical;
-}
-button[disabled].rw-input,
-fieldset[disabled] .rw-input,
-html input[disabled].rw-input {
-	cursor: not-allowed;
-}
-button.rw-input::-moz-focus-inner,
-input.rw-input::-moz-focus-inner {
-	border: 0;
-	padding: 0;
-}
-input[type="checkbox"],
-input[type="radio"] {
-	box-sizing: border-box;
-	padding: 0;
-}
-${
-	/* @font-face {
-	font-family: "RwWidgets";
-	font-weight: normal;
-	font-style: normal;
-	${/* src: url("../fonts/rw-widgets.eot?v=4.1.0");
-	src: url("../fonts/rw-widgets.eot?#iefix&v=4.1.0") format("embedded-opentype"),
-	url("../fonts/rw-widgets.woff?v=4.1.0") format("woff"),
-	url("../fonts/rw-widgets.ttf?v=4.1.0") format("truetype"),
-		url("../fonts/rw-widgets.svg?v=4.1.0#fontawesomeregular") format("svg"); */ ''
-};
-} */''};
-.rw-i {
-	display: inline-block;
-	color: inherit;
-	${/* font-family: RwWidgets; */ ''};
-	font-style: normal;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
-}
-.rw-i-caret-down:before {
-	content: "\e803";
-}
-.rw-i-caret-up:before {
-	content: "\e800";
-}
-.rw-i-chevron-left:before {
-	content: "\f104";
-}
-.rw-i-chevron-right:before {
-	content: "\f105";
-}
-.rw-i-clock-o:before {
-	content: "\e805";
-}
-.rw-i-calendar:before {
-	content: "\e804";
-}
-.rw-i-search:before {
-	content: "\e801";
-}
-.rw-btn {
-	position: relative;
-	color: #333;
-	display: inline-block;
-	text-align: center;
-	vertical-align: middle;
-	border: 0.0625rem solid transparent;
-	cursor: pointer;
-	outline: none;
-}
-.rw-state-readonly .rw-btn,
-.rw-state-disabled .rw-btn {
-	cursor: not-allowed;
-}
-.rw-btn-select {
-	opacity: 0.75;
-	transition: opacity 150ms ease-in;
-}
-.rw-btn-select:hover,
-.rw-state-focus .rw-btn-select,
-:hover > .rw-btn-select {
-	opacity: 1;
-}
-.rw-btn-primary {
-	width: 100%;
-	white-space: normal;
-	line-height: 2em;
-}
-.rw-btn-primary:hover {
-	background-color: #e6e6e6;
-}
-.rw-btn-select[disabled],
-.rw-btn-primary[disabled],
-fieldset[disabled] .rw-btn-select,
-fieldset[disabled] .rw-btn-primary {
-	box-shadow: none;
-	cursor: not-allowed;
-	opacity: 0.65;
-	pointer-events: none;
-}
-.rw-sr {
-	position: absolute;
-	width: 0.0625rem;
-	height: 0.0625rem;
-	margin: -0.0625rem;
-	padding: 0;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	border: 0;
-}
-.rw-widget {
-	background-clip: border-box;
-	border: none;
-	outline: none;
-	position: relative;
-	border-radius: 0.125rem 0.125rem 0 0;
-	width: 100%;
-}
-.rw-widget,
-.rw-widget * {
-	box-sizing: border-box;
-}
-.rw-widget:before,
-.rw-widget *:before,
-.rw-widget:after,
-.rw-widget *:after {
-	box-sizing: border-box;
-}
-.rw-widget > .rw-widget-container {
-	width: 100%;
-	margin: 0;
-}
-.rw-widget-container {
-	background-color: ${({ theme }) => theme.palette.gray5.regular};
-	border-bottom: ${({ theme }) => theme.palette.gray2.regular} 0.0625rem solid;
-}
-.rw-widget-container.rw-state-focus,
-.rw-state-focus > .rw-widget-container,
-.rw-widget-container.rw-state-focus:hover,
-.rw-state-focus > .rw-widget-container:hover {
-	background-color: ${({ theme }) => theme.palette.gray5.focus};
-	border-bottom: ${({ theme }) => theme.palette.primary.regular} 0.0625rem solid;
-}
-.rw-widget-container.rw-state-readonly,
-.rw-state-readonly > .rw-widget-container {
-	cursor: not-allowed;
-}
-.rw-widget-container.rw-state-disabled,
-.rw-state-disabled > .rw-widget-container,
-fieldset[disabled] .rw-widget-container,
-.rw-widget-container.rw-state-disabled:hover,
-.rw-state-disabled > .rw-widget-container:hover,
-fieldset[disabled] .rw-widget-container:hover,
-.rw-widget-container.rw-state-disabled:active,
-.rw-state-disabled > .rw-widget-container:active,
-fieldset[disabled] .rw-widget-container:active {
-	box-shadow: none;
-	cursor: not-allowed;
-}
-
-.rw-datetime-picker {
-	height: 2.625rem;
-}
-.rw-widget-picker {
-	position: relative;
-	overflow: hidden;
-	border-collapse: separate;
-	display: inline-table;
-	height: 100%;
-}
-.rw-widget-picker > * {
-	position: relative;
-	border: none;
-	outline: none;
-	width: 100%;
-	height: 100%;
-	display: table-cell;
-}
-.rw-widget-picker > .rw-select {
-	width: ${({ allDay }) => (allDay ? '2.125rem' : '4.25rem')};
-	white-space: nowrap;
-}
-.rw-open > .rw-widget-picker {
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
-}
-.rw-open-up > .rw-widget-picker {
-	border-top-right-radius: 0;
-	border-top-left-radius: 0;
-}
-fieldset[disabled] .rw-widget-picker,
-.rw-state-disabled > .rw-widget-picker {
-	background-color: #eee;
-}
-.rw-multiselect > .rw-widget-picker {
-	height: auto;
-}
-.rw-select {
-	cursor: pointer;
-}
-.rw-select > * {
-	width: 2rem;
-	height: 100%;
-}
-.rw-state-readonly .rw-select,
-.rw-state-disabled .rw-select {
-	cursor: not-allowed;
-}
-.rw-select-bordered {
-	cursor: pointer;
-	border: none;
-	border-left: #ccc 0.0625rem solid;
-}
-.rw-select-bordered:hover,
-.rw-select-bordered:active {
-	background-color: #e6e6e6;
-}
-.rw-select-bordered:active {
-	box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
-}
-.rw-state-disabled .rw-select-bordered,
-.rw-state-readonly .rw-select-bordered,
-fieldset[disabled] .rw-select-bordered,
-.rw-state-disabled .rw-select-bordered:hover,
-.rw-state-readonly .rw-select-bordered:hover,
-fieldset[disabled] .rw-select-bordered:hover,
-.rw-state-disabled .rw-select-bordered:active,
-.rw-state-readonly .rw-select-bordered:active,
-fieldset[disabled] .rw-select-bordered:active {
-	cursor: not-allowed;
-	background-color: inherit;
-	background-image: none;
-	box-shadow: none;
-}
-.rw-rtl .rw-select-bordered {
-	border-right: #ccc 0.0625rem solid;
-	border-left: none;
-}
-.rw-rtl {
-	direction: rtl;
-}
-.rw-input-reset,
-.rw-input,
-.rw-dropdown-list-autofill,
-.rw-filter-input {
-	outline: 0;
-}
-.rw-input-reset::-moz-placeholder {
-	color: #999;
-	opacity: 1;
-}
-.rw-input-reset:-ms-input-placeholder {
-	color: #999;
-}
-.rw-input-reset::-webkit-input-placeholder {
-	color: #999;
-}
-.rw-input,
-.rw-dropdown-list-autofill,
-.rw-filter-input {
-	padding: 0 0.857em;
-}
-.rw-input[type="text"]::-ms-clear {
-	display: none;
-}
-.rw-input[disabled],
-fieldset[disabled] .rw-input {
-	box-shadow: none;
-	cursor: not-allowed;
-	opacity: 1;
-	background-color: #eee;
-	border-color: #ccc;
-}
-.rw-input[readonly] {
-	cursor: not-allowed;
-}
-.rw-i.rw-loading {
-	display: block;
-	${/* background: url("../img/loading.gif") no-repeat center; */ ''};
-	min-width: 1rem;
-	width: 1.9em;
-	height: 1rem;
-}
-.rw-i.rw-loading:before {
-	content: "";
-}
-.rw-placeholder {
-	color: #999;
-}
-.rw-detect-autofill:-webkit-autofill {
-	animation-name: react-widgets-autofill-start;
-	transition: background-color 50000s ease-in-out 0s;
-}
-.rw-detect-autofill:not(:-webkit-autofill) {
-	animation-name: react-widgets-autofill-cancel;
-}
-.rw-webkit-autofill .rw-widget-container,
-.rw-input:-webkit-autofill {
-	background-color: #faffbd !important;
-	background-image: none !important;
-	color: #000 !important;
-}
-.rw-widget-input,
-.rw-filter-input {
-}
-.rw-widget-input.rw-state-focus {
-	box-shadow: 0 0 0.5rem rgba(102, 175, 233, 0.6), inset 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.075);
-}
-.rw-list {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	font-size: 1em;
-	outline: 0;
-	overflow: auto;
-	max-height: 12.5rem;
-}
-.rw-list-option {
-	-ms-user-select: none;
-	user-select: none;
-	color: #333;
-	cursor: pointer;
-	border: 0.0625rem solid transparent;
-}
-.rw-list-option.rw-state-focus,
-.rw-list-option.rw-state-focus:hover {
-	background-color: transparent;
-	border-color: #66afe9;
-	color: #333;
-}
-.rw-list-option:hover,
-.rw-list-option:hover.rw-state-focus {
-	background-color: #e6e6e6;
-	border-color: #e6e6e6;
-	color: #333;
-}
-.rw-list-option.rw-state-selected,
-.rw-list-option.rw-state-selected:hover {
-	background-color: #337ab7;
-	border-color: #337ab7;
-	color: white;
-}
-fieldset[disabled] .rw-list-option,
-.rw-list-option.rw-state-disabled,
-.rw-list-option.rw-state-readonly {
-	box-shadow: none;
-	cursor: not-allowed;
-	color: #999;
-	opacity: 0.7;
-}
-fieldset[disabled] .rw-list-option:hover,
-.rw-list-option.rw-state-disabled:hover,
-.rw-list-option.rw-state-readonly:hover {
-	background: none;
-	border-color: transparent;
-}
-.rw-list-empty,
-.rw-list-option,
-.rw-list-optgroup {
-	padding: 0.143em 0.75em;
-	outline: 0;
-}
-.rw-list-optgroup {
-	font-weight: bold;
-	padding-top: 0.4375rem;
-}
-.rw-list-option-create {
-	border-top: 0.0625rem #ccc solid;
-}
-.rw-dropdown-list-autofill {
-	padding: 0;
-}
-.rw-dropdown-list-input {
-	background-color: transparent;
-	vertical-align: middle;
-	padding-right: 0;
-	max-width: 0.0625rem;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-.rw-rtl .rw-dropdown-list-input {
-	padding-right: 0.857em;
-	padding-left: 0;
-}
-.rw-filter-input {
-	position: relative;
-	margin: 0.25rem;
-	padding-right: 0;
-}
-.rw-filter-input .rw-rtl {
-	padding-right: 0.857em;
-	padding-left: 0;
-}
-.rw-filter-input .rw-select,
-.rw-filter-input .rw-btn {
-	opacity: 0.75;
-	cursor: text;
-}
-.rw-filter-input > .rw-select,
-.rw-filter-input > .rw-select:active,
-.rw-filter-input > .rw-select:hover {
-	background: none;
-	cursor: initial;
-	box-shadow: none;
-}
-
-.rw-number-picker .rw-btn {
-	  cursor: pointer;
-	height: calc(1.2145em - 0.0625rem);
-		${
-			/*
-		  margin-top: -0.0625rem\9;
-	height: 1.2145em\9;
-*/ 'border: 0.125rem solid red;'
-		};
-	line-height: 1.2145em;
-	line-height: calc(1.2145em - 0.0625rem);
-	display: block;
-	border: none;
-} 
-
-.rw-number-picker .rw-btn:hover,
-.rw-number-picker .rw-btn:active {
-	background-color: #e6e6e6;
-}
-.rw-number-picker .rw-btn:active {
-	box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
-}
-.rw-state-disabled .rw-number-picker .rw-btn,
-.rw-state-readonly .rw-number-picker .rw-btn,
-fieldset[disabled] .rw-number-picker .rw-btn,
-.rw-state-disabled .rw-number-picker .rw-btn:hover,
-.rw-state-readonly .rw-number-picker .rw-btn:hover,
-fieldset[disabled] .rw-number-picker .rw-btn:hover,
-.rw-state-disabled .rw-number-picker .rw-btn:active,
-.rw-state-readonly .rw-number-picker .rw-btn:active,
-fieldset[disabled] .rw-number-picker .rw-btn:active {
-	cursor: not-allowed;
-	background-color: inherit;
-	background-image: none;
-	box-shadow: none;
-}
-.rw-number-picker .rw-select {
-	vertical-align: middle;
-}
-.rw-number-picker .rw-select,
-.rw-number-picker .rw-select:hover,
-.rw-number-picker .rw-select:active {
-	box-shadow: none;
-}
-.rw-calendar-popup {
-	right: auto;
-	min-width: 0;
-	width: 18em;
-}
-.rw-calendar {
-	border-radius: 0.25rem;
-	background-color: #fff;
-	border: #ccc 0.0625rem solid;
-	overflow: hidden;
-}
-.rw-calendar.rw-popup {
-	border-color: #ccc;
-}
-.rw-calendar-now {
-	font-weight: bold;
-}
-.rw-calendar-btn-left,
-.rw-calendar-btn-right {
-	width: 12.5%;
-}
-.rw-calendar-btn-view {
-	width: 75%;
-}
-.rw-calendar-footer {
-	border-top: 0.0625rem solid #ccc;
-}
-.rw-calendar-grid {
-	outline: none;
-	height: 14.28571429em;
-	table-layout: fixed;
-	border-collapse: separate;
-	border-spacing: 0;
-	width: 100%;
-	background-color: #fff;
-}
-.rw-head-cell {
-	text-align: center;
-	border-bottom: 0.0625rem solid #ccc;
-	padding: 0.25em;
-}
-.rw-cell {
-	color: #333;
-	border-radius: 0.25rem;
-	cursor: pointer;
-	line-height: normal;
-	text-align: center;
-	border: 0.0625rem solid transparent;
-	padding: 0.25em;
-}
-.rw-cell:hover {
-	background-color: #e6e6e6;
-	border-color: #e6e6e6;
-	color: #333;
-}
-.rw-cell.rw-state-focus,
-.rw-cell.rw-state-focus:hover {
-	background-color: transparent;
-	border-color: #66afe9;
-	color: #333;
-}
-.rw-cell.rw-state-selected,
-.rw-cell.rw-state-selected:hover {
-	background-color: #337ab7;
-	border-color: #337ab7;
-	color: white;
-}
-.rw-cell.rw-state-disabled {
-	color: #999;
-	opacity: 0.7;
-}
-.rw-cell.rw-state-disabled:hover {
-	background: none;
-	border-color: transparent;
-}
-.rw-calendar-month .rw-cell {
-	text-align: center;
-}
-.rw-cell-off-range {
-	color: #999;
-}
-.rw-calendar-transition-group {
-	position: relative;
-}
-.rw-calendar-transition {
-	transition: transform 300ms;
-	overflow: hidden;
-}
-.rw-calendar-transition-top {
-	-ms-transform: translateY(-100%);
-	transform: translateY(-100%);
-}
-.rw-calendar-transition-bottom {
-	-ms-transform: translateY(100%);
-	transform: translateY(100%);
-}
-.rw-calendar-transition-right {
-	-ms-transform: translateX(-100%);
-	transform: translateX(-100%);
-}
-.rw-calendar-transition-left {
-	-ms-transform: translateX(100%);
-	transform: translateX(100%);
-}
-.rw-calendar-transition-entering.rw-calendar-transition-top,
-.rw-calendar-transition-entered.rw-calendar-transition-top,
-.rw-calendar-transition-entering.rw-calendar-transition-bottom,
-.rw-calendar-transition-entered.rw-calendar-transition-bottom {
-	-ms-transform: translateY(0);
-	transform: translateY(0);
-}
-.rw-calendar-transition-entering.rw-calendar-transition-right,
-.rw-calendar-transition-entered.rw-calendar-transition-right,
-.rw-calendar-transition-entering.rw-calendar-transition-left,
-.rw-calendar-transition-entered.rw-calendar-transition-left {
-	-ms-transform: translateX(0);
-	transform: translateX(0);
-}
-.rw-calendar-transition-exiting.rw-calendar-transition-top {
-	-ms-transform: translateY(100%);
-	transform: translateY(100%);
-}
-.rw-calendar-transition-exiting.rw-calendar-transition-bottom {
-	-ms-transform: translateY(-100%);
-	transform: translateY(-100%);
-}
-.rw-calendar-transition-exiting.rw-calendar-transition-right {
-	-ms-transform: translateX(100%);
-	transform: translateX(100%);
-}
-.rw-calendar-transition-exiting.rw-calendar-transition-left {
-	-ms-transform: translateX(-100%);
-	transform: translateX(-100%);
-}
-.rw-select-list {
-	overflow: auto;
-	position: relative;
-}
-.rw-select-list .rw-list {
-	max-height: none;
-	font-size: 1em;
-}
-.rw-select-list-label {
-	display: block;
-	position: relative;
-	font-weight: normal;
-	cursor: inherit;
-	padding-left: 1.25rem;
-	margin: 0;
-}
-.rw-rtl .rw-select-list-label {
-	padding-left: 0;
-	padding-right: 1.25rem;
-}
-input.rw-select-list-input {
-	position: absolute;
-	left: 0;
-	top: 50%;
-	-ms-transform: translateY(-50%);
-	transform: translateY(-50%);
-	${/* top: 0.1em\9; */ ''};
-	margin: 0;
-	line-height: normal;
-	cursor: inherit;
-}
-.rw-rtl input.rw-select-list-input {
-	left: auto;
-	right: 0;
-}
-.rw-loading-mask {
-	content: "";
-	${/* background: url("../img/loader-big.gif") no-repeat center; */ ''};
-	position: absolute;
-	background-color: #fff;
-	border-radius: 0.25rem;
-	opacity: 0.7;
-	top: 0;
-	left: 0;
-	height: 100%;
-	width: 100%;
-}
-.rw-multiselect {
-	cursor: text;
-}
-.rw-multiselect .rw-input-reset {
-	height: calc(2.429em - 0.125rem);
-	${
-		/* margin-top: -0.125rem\9;
-	height: 2.429em\9; */ ''
-	};
-	border-width: 0;
-	width: auto;
-	max-width: 100%;
-	padding: 0 0.857em;
-}
-.rw-multiselect .rw-select {
-	vertical-align: middle;
-}
-.rw-multiselect .rw-select,
-.rw-multiselect .rw-select:hover,
-.rw-multiselect .rw-select:active {
-	box-shadow: none;
-	background: none;
-}
-.rw-multiselect-taglist {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	display: inline-block;
-	vertical-align: 0;
-	outline: none;
-}
-.rw-multiselect-tag {
-	display: inline-table;
-	color: inherit;
-	padding: 0 0.35em 0 0.35em;
-	margin-left: calc(0.279335em - 0.0625rem);
-	margin-top: 0.279335em;
-	margin-top: calc(0.279335em - 0.0625rem);
-	height: 1.87033em;
-	border-radius: 0.1875rem;
-	background-color: #eee;
-	border: 0.0625rem solid #ccc;
-	cursor: default;
-	vertical-align: top;
-	text-align: center;
-	overflow: hidden;
-	max-width: 100%;
-}
-.rw-multiselect-tag > * {
-	display: table-cell;
-	vertical-align: middle;
-	height: 100%;
-}
-.rw-rtl .rw-multiselect-tag {
-	margin-left: 0;
-	margin-right: calc(0.279335em - 0.0625rem);
-	padding: 0 0.35em 0 0.35em;
-}
-.rw-multiselect-tag.rw-state-focus,
-.rw-multiselect-tag.rw-state-focus:hover {
-	background-color: transparent;
-	border-color: #66afe9;
-	color: #333;
-}
-.rw-multiselect-tag.rw-state-readonly,
-.rw-multiselect-tag.rw-state-disabled,
-.rw-state-readonly .rw-multiselect-tag,
-.rw-state-disabled .rw-multiselect-tag,
-fieldset[disabled] .rw-multiselect-tag {
-	cursor: not-allowed;
-}
-.rw-multiselect-tag.rw-state-disabled,
-.rw-state-disabled .rw-multiselect-tag,
-fieldset[disabled] .rw-multiselect-tag {
-	opacity: 0.65;
-}
-fieldset[disabled] .rw-multiselect-tag {
-	box-shadow: none;
-	cursor: not-allowed;
-}
-.rw-multiselect-tag-btn {
-	color: inherit;
-	margin-left: 0.25em;
-}
-.rw-rtl .rw-multiselect-tag-btn {
-	margin-left: 0;
-	margin-right: 0.25em;
-}
-.rw-autocomplete .rw-select {
-	position: absolute;
-	display: block;
-	width: auto;
-	top: 0;
-	bottom: 0;
-	right: 0;
-}
-.rw-popup-container {
-	position: absolute;
-	z-index: 1005;
-	top: 100%;
-	left: -0.375rem;
-	right: -0.375rem;
-}
-.rw-popup-container.rw-dropup {
-	top: auto;
-	bottom: 100%;
-}
-.rw-state-focus .rw-popup-container {
-	z-index: 1006;
-}
-.rw-popup-transition {
-	width: 100%;
-	margin-bottom: 0.375rem;
-	padding: 0 0.375rem;
-}
-.rw-dropup > .rw-popup-transition {
-	margin-bottom: 0;
-	margin-top: 0.375rem;
-}
-.rw-popup {
-	border-top-right-radius: 0;
-	border-top-left-radius: 0;
-	border-bottom-right-radius: 0.1875rem;
-	border-bottom-left-radius: 0.1875rem;
-	box-shadow: 0 0.3125rem 0.375rem rgba(0, 0, 0, 0.2);
-	border: #ccc 0.0625rem solid;
-	background: #fff;
-}
-.rw-dropup .rw-popup {
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
-	border-top-right-radius: 0.1875rem;
-	border-top-left-radius: 0.1875rem;
-	box-shadow: 0 -0.125rem 0.375rem rgba(0, 0, 0, 0.2);
-}
-.rw-popup-transition {
-	transition: transform 200ms;
-}
-.rw-popup-transition-entering {
-	overflow: hidden;
-}
-.rw-popup-transition-entering .rw-popup-transition {
-	-ms-transform: translateY(0);
-	transform: translateY(0);
-	transition-timing-function: ease-out;
-}
-.rw-popup-transition-exiting .rw-popup-transition {
-	transition-timing-function: ease-in;
-}
-.rw-popup-transition-exiting,
-.rw-popup-transition-exited {
-	overflow: hidden;
-}
-.rw-popup-transition-exiting .rw-popup-transition,
-.rw-popup-transition-exited .rw-popup-transition {
-	-ms-transform: translateY(-100%);
-	transform: translateY(-100%);
-}
-.rw-popup-transition-exiting.rw-dropup .rw-popup-transition,
-.rw-popup-transition-exited.rw-dropup .rw-popup-transition {
-	-ms-transform: translateY(100%);
-	transform: translateY(100%);
-}
-.rw-popup-transition-exited {
-	display: none;
-}
-.rw-state-disabled {
-	box-shadow: none;
-	cursor: not-allowed;
-}
-
-	color: ${({ theme }) => theme.palette.text.regular};
-	font-family: ${({ theme }) => theme.fonts.default};
-	font-size: ${({ theme }) => theme.sizes.font.medium};
-	font-weight: ${({ theme }) => theme.fonts.weight.regular};
-`;
-
-export default Styler;
diff --git a/src/settings/components/date-picker-style.tsx b/src/settings/components/date-picker-style.tsx
new file mode 100644
index 00000000..9bdc3da2
--- /dev/null
+++ b/src/settings/components/date-picker-style.tsx
@@ -0,0 +1,841 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { Container } from '@zextras/carbonio-design-system';
+import styled from 'styled-components';
+
+const Styler = styled(Container)<{ $allDay?: boolean }>`
+	.rw-btn,
+	.rw-input-reset,
+	.rw-input,
+	.rw-dropdown-list-autofill,
+	.rw-filter-input {
+		color: inherit;
+		padding: 0;
+		margin: 0;
+		border: none;
+		box-shadow: none;
+		background: none;
+		background-image: none;
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+		-ms-touch-action: manipulation;
+		touch-action: manipulation;
+	}
+	.rw-btn::-moz-focus-inner {
+		padding: 0;
+		border: 0;
+	}
+	select.rw-input {
+		text-transform: none;
+	}
+	html input[type='button'].rw-input {
+		-webkit-appearance: button;
+		cursor: pointer;
+	}
+	textarea.rw-input {
+		overflow: auto;
+		resize: vertical;
+	}
+	button[disabled].rw-input,
+	fieldset[disabled] .rw-input,
+	html input[disabled].rw-input {
+		cursor: not-allowed;
+	}
+	button.rw-input::-moz-focus-inner,
+	input.rw-input::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+	input[type='checkbox'],
+	input[type='radio'] {
+		box-sizing: border-box;
+		padding: 0;
+	}
+	.rw-i {
+		display: inline-block;
+		color: inherit;
+		${/* font-family: RwWidgets; */ ''};
+		font-style: normal;
+		font-weight: normal;
+		font-variant: normal;
+		text-transform: none;
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+	}
+	.rw-i-caret-down:before {
+		content: '\e803';
+	}
+	.rw-i-caret-up:before {
+		content: '\e800';
+	}
+	.rw-i-chevron-left:before {
+		content: '\f104';
+	}
+	.rw-i-chevron-right:before {
+		content: '\f105';
+	}
+	.rw-i-clock-o:before {
+		content: '\e805';
+	}
+	.rw-i-calendar:before {
+		content: '\e804';
+	}
+	.rw-i-search:before {
+		content: '\e801';
+	}
+	.rw-btn {
+		position: relative;
+		color: #333;
+		display: inline-block;
+		text-align: center;
+		vertical-align: middle;
+		border: 0.0625rem solid transparent;
+		cursor: pointer;
+		outline: none;
+	}
+	.rw-state-readonly .rw-btn,
+	.rw-state-disabled .rw-btn {
+		cursor: not-allowed;
+	}
+	.rw-btn-select {
+		opacity: 0.75;
+		transition: opacity 150ms ease-in;
+	}
+	.rw-btn-select:hover,
+	.rw-state-focus .rw-btn-select,
+	:hover > .rw-btn-select {
+		opacity: 1;
+	}
+	.rw-btn-primary {
+		width: 100%;
+		white-space: normal;
+		line-height: 2em;
+	}
+	.rw-btn-primary:hover {
+		background-color: #e6e6e6;
+	}
+	.rw-btn-select[disabled],
+	.rw-btn-primary[disabled],
+	fieldset[disabled] .rw-btn-select,
+	fieldset[disabled] .rw-btn-primary {
+		box-shadow: none;
+		cursor: not-allowed;
+		opacity: 0.65;
+		pointer-events: none;
+	}
+	.rw-sr {
+		position: absolute;
+		width: 0.0625rem;
+		height: 0.0625rem;
+		margin: -0.0625rem;
+		padding: 0;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		border: 0;
+	}
+	.rw-widget {
+		background-clip: border-box;
+		border: none;
+		outline: none;
+		position: relative;
+		border-radius: 0.125rem 0.125rem 0 0;
+		width: 100%;
+	}
+	.rw-widget,
+	.rw-widget * {
+		box-sizing: border-box;
+	}
+	.rw-widget:before,
+	.rw-widget *:before,
+	.rw-widget:after,
+	.rw-widget *:after {
+		box-sizing: border-box;
+	}
+	.rw-widget > .rw-widget-container {
+		width: 100%;
+		margin: 0;
+	}
+	.rw-widget-container {
+		background-color: ${({ theme }): string => theme.palette.gray5.regular};
+		border-bottom: ${({ theme }): string => theme.palette.gray2.regular} 0.0625rem solid;
+	}
+	.rw-widget-container.rw-state-focus,
+	.rw-state-focus > .rw-widget-container,
+	.rw-widget-container.rw-state-focus:hover,
+	.rw-state-focus > .rw-widget-container:hover {
+		background-color: ${({ theme }): string => theme.palette.gray5.focus};
+		border-bottom: ${({ theme }): string => theme.palette.primary.regular} 0.0625rem solid;
+	}
+	.rw-widget-container.rw-state-readonly,
+	.rw-state-readonly > .rw-widget-container {
+		cursor: not-allowed;
+	}
+	.rw-widget-container.rw-state-disabled,
+	.rw-state-disabled > .rw-widget-container,
+	fieldset[disabled] .rw-widget-container,
+	.rw-widget-container.rw-state-disabled:hover,
+	.rw-state-disabled > .rw-widget-container:hover,
+	fieldset[disabled] .rw-widget-container:hover,
+	.rw-widget-container.rw-state-disabled:active,
+	.rw-state-disabled > .rw-widget-container:active,
+	fieldset[disabled] .rw-widget-container:active {
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	.rw-datetime-picker {
+		height: 2.625rem;
+	}
+	.rw-widget-picker {
+		position: relative;
+		overflow: hidden;
+		border-collapse: separate;
+		display: inline-table;
+		height: 100%;
+	}
+	.rw-widget-picker > * {
+		position: relative;
+		border: none;
+		outline: none;
+		width: 100%;
+		height: 100%;
+		display: table-cell;
+	}
+	.rw-widget-picker > .rw-select {
+		width: ${({ $allDay }): string => ($allDay ? '2.125rem' : '4.25rem')};
+		white-space: nowrap;
+	}
+	.rw-open > .rw-widget-picker {
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+	.rw-open-up > .rw-widget-picker {
+		border-top-right-radius: 0;
+		border-top-left-radius: 0;
+	}
+	fieldset[disabled] .rw-widget-picker,
+	.rw-state-disabled > .rw-widget-picker {
+		background-color: #eee;
+	}
+	.rw-multiselect > .rw-widget-picker {
+		height: auto;
+	}
+	.rw-select {
+		cursor: pointer;
+	}
+	.rw-select > * {
+		width: 2rem;
+		height: 100%;
+	}
+	.rw-state-readonly .rw-select,
+	.rw-state-disabled .rw-select {
+		cursor: not-allowed;
+	}
+	.rw-select-bordered {
+		cursor: pointer;
+		border: none;
+		border-left: #ccc 0.0625rem solid;
+	}
+	.rw-select-bordered:hover,
+	.rw-select-bordered:active {
+		background-color: #e6e6e6;
+	}
+	.rw-select-bordered:active {
+		box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
+	}
+	.rw-state-disabled .rw-select-bordered,
+	.rw-state-readonly .rw-select-bordered,
+	fieldset[disabled] .rw-select-bordered,
+	.rw-state-disabled .rw-select-bordered:hover,
+	.rw-state-readonly .rw-select-bordered:hover,
+	fieldset[disabled] .rw-select-bordered:hover,
+	.rw-state-disabled .rw-select-bordered:active,
+	.rw-state-readonly .rw-select-bordered:active,
+	fieldset[disabled] .rw-select-bordered:active {
+		cursor: not-allowed;
+		background-color: inherit;
+		background-image: none;
+		box-shadow: none;
+	}
+	.rw-rtl .rw-select-bordered {
+		border-right: #ccc 0.0625rem solid;
+		border-left: none;
+	}
+	.rw-rtl {
+		direction: rtl;
+	}
+	.rw-input-reset,
+	.rw-input,
+	.rw-dropdown-list-autofill,
+	.rw-filter-input {
+		outline: 0;
+	}
+	.rw-input-reset::-moz-placeholder {
+		color: #999;
+		opacity: 1;
+	}
+	.rw-input-reset:-ms-input-placeholder {
+		color: #999;
+	}
+	.rw-input-reset::-webkit-input-placeholder {
+		color: #999;
+	}
+	.rw-input,
+	.rw-dropdown-list-autofill,
+	.rw-filter-input {
+		padding: 0 0.857em;
+	}
+	.rw-input[type='text']::-ms-clear {
+		display: none;
+	}
+	.rw-input[disabled],
+	fieldset[disabled] .rw-input {
+		box-shadow: none;
+		cursor: not-allowed;
+		opacity: 1;
+		background-color: #eee;
+		border-color: #ccc;
+	}
+	.rw-input[readonly] {
+		cursor: not-allowed;
+	}
+	.rw-i.rw-loading {
+		display: block;
+		${/* background: url("../img/loading.gif") no-repeat center; */ ''};
+		min-width: 1rem;
+		width: 1.9em;
+		height: 1rem;
+	}
+	.rw-i.rw-loading:before {
+		content: '';
+	}
+	.rw-placeholder {
+		color: #999;
+	}
+	.rw-detect-autofill:-webkit-autofill {
+		animation-name: react-widgets-autofill-start;
+		transition: background-color 50000s ease-in-out 0s;
+	}
+	.rw-detect-autofill:not(:-webkit-autofill) {
+		animation-name: react-widgets-autofill-cancel;
+	}
+	.rw-webkit-autofill .rw-widget-container,
+	.rw-input:-webkit-autofill {
+		background-color: #faffbd !important;
+		background-image: none !important;
+		color: #000 !important;
+	}
+	.rw-widget-input,
+	.rw-filter-input {
+	}
+	.rw-widget-input.rw-state-focus {
+		box-shadow:
+			0 0 0.5rem rgba(102, 175, 233, 0.6),
+			inset 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.075);
+	}
+	.rw-list {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		font-size: 1em;
+		outline: 0;
+		overflow: auto;
+		max-height: 12.5rem;
+	}
+	.rw-list-option {
+		-ms-user-select: none;
+		user-select: none;
+		color: #333;
+		cursor: pointer;
+		border: 0.0625rem solid transparent;
+	}
+	.rw-list-option.rw-state-focus,
+	.rw-list-option.rw-state-focus:hover {
+		background-color: transparent;
+		border-color: #66afe9;
+		color: #333;
+	}
+	.rw-list-option:hover,
+	.rw-list-option:hover.rw-state-focus {
+		background-color: #e6e6e6;
+		border-color: #e6e6e6;
+		color: #333;
+	}
+	.rw-list-option.rw-state-selected,
+	.rw-list-option.rw-state-selected:hover {
+		background-color: #337ab7;
+		border-color: #337ab7;
+		color: white;
+	}
+	fieldset[disabled] .rw-list-option,
+	.rw-list-option.rw-state-disabled,
+	.rw-list-option.rw-state-readonly {
+		box-shadow: none;
+		cursor: not-allowed;
+		color: #999;
+		opacity: 0.7;
+	}
+	fieldset[disabled] .rw-list-option:hover,
+	.rw-list-option.rw-state-disabled:hover,
+	.rw-list-option.rw-state-readonly:hover {
+		background: none;
+		border-color: transparent;
+	}
+	.rw-list-empty,
+	.rw-list-option,
+	.rw-list-optgroup {
+		padding: 0.143em 0.75em;
+		outline: 0;
+	}
+	.rw-list-optgroup {
+		font-weight: bold;
+		padding-top: 0.4375rem;
+	}
+	.rw-list-option-create {
+		border-top: 0.0625rem #ccc solid;
+	}
+	.rw-dropdown-list-autofill {
+		padding: 0;
+	}
+	.rw-dropdown-list-input {
+		background-color: transparent;
+		vertical-align: middle;
+		padding-right: 0;
+		max-width: 0.0625rem;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+	.rw-rtl .rw-dropdown-list-input {
+		padding-right: 0.857em;
+		padding-left: 0;
+	}
+	.rw-filter-input {
+		position: relative;
+		margin: 0.25rem;
+		padding-right: 0;
+	}
+	.rw-filter-input .rw-rtl {
+		padding-right: 0.857em;
+		padding-left: 0;
+	}
+	.rw-filter-input .rw-select,
+	.rw-filter-input .rw-btn {
+		opacity: 0.75;
+		cursor: text;
+	}
+	.rw-filter-input > .rw-select,
+	.rw-filter-input > .rw-select:active,
+	.rw-filter-input > .rw-select:hover {
+		background: none;
+		cursor: initial;
+		box-shadow: none;
+	}
+
+	.rw-number-picker .rw-btn {
+		cursor: pointer;
+		height: calc(1.2145em - 0.0625rem);
+		${
+			/*
+		  margin-top: -0.0625rem\9;
+	height: 1.2145em\9;
+*/ 'border: 0.125rem solid red;'
+		};
+		line-height: 1.2145em;
+		line-height: calc(1.2145em - 0.0625rem);
+		display: block;
+		border: none;
+	}
+
+	.rw-number-picker .rw-btn:hover,
+	.rw-number-picker .rw-btn:active {
+		background-color: #e6e6e6;
+	}
+	.rw-number-picker .rw-btn:active {
+		box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
+	}
+	.rw-state-disabled .rw-number-picker .rw-btn,
+	.rw-state-readonly .rw-number-picker .rw-btn,
+	fieldset[disabled] .rw-number-picker .rw-btn,
+	.rw-state-disabled .rw-number-picker .rw-btn:hover,
+	.rw-state-readonly .rw-number-picker .rw-btn:hover,
+	fieldset[disabled] .rw-number-picker .rw-btn:hover,
+	.rw-state-disabled .rw-number-picker .rw-btn:active,
+	.rw-state-readonly .rw-number-picker .rw-btn:active,
+	fieldset[disabled] .rw-number-picker .rw-btn:active {
+		cursor: not-allowed;
+		background-color: inherit;
+		background-image: none;
+		box-shadow: none;
+	}
+	.rw-number-picker .rw-select {
+		vertical-align: middle;
+	}
+	.rw-number-picker .rw-select,
+	.rw-number-picker .rw-select:hover,
+	.rw-number-picker .rw-select:active {
+		box-shadow: none;
+	}
+	.rw-calendar-popup {
+		right: auto;
+		min-width: 0;
+		width: 18em;
+	}
+	.rw-calendar {
+		border-radius: 0.25rem;
+		background-color: #fff;
+		border: #ccc 0.0625rem solid;
+		overflow: hidden;
+	}
+	.rw-calendar.rw-popup {
+		border-color: #ccc;
+	}
+	.rw-calendar-now {
+		font-weight: bold;
+	}
+	.rw-calendar-btn-left,
+	.rw-calendar-btn-right {
+		width: 12.5%;
+	}
+	.rw-calendar-btn-view {
+		width: 75%;
+	}
+	.rw-calendar-footer {
+		border-top: 0.0625rem solid #ccc;
+	}
+	.rw-calendar-grid {
+		outline: none;
+		height: 14.28571429em;
+		table-layout: fixed;
+		border-collapse: separate;
+		border-spacing: 0;
+		width: 100%;
+		background-color: #fff;
+	}
+	.rw-head-cell {
+		text-align: center;
+		border-bottom: 0.0625rem solid #ccc;
+		padding: 0.25em;
+	}
+	.rw-cell {
+		color: #333;
+		border-radius: 0.25rem;
+		cursor: pointer;
+		line-height: normal;
+		text-align: center;
+		border: 0.0625rem solid transparent;
+		padding: 0.25em;
+	}
+	.rw-cell:hover {
+		background-color: #e6e6e6;
+		border-color: #e6e6e6;
+		color: #333;
+	}
+	.rw-cell.rw-state-focus,
+	.rw-cell.rw-state-focus:hover {
+		background-color: transparent;
+		border-color: #66afe9;
+		color: #333;
+	}
+	.rw-cell.rw-state-selected,
+	.rw-cell.rw-state-selected:hover {
+		background-color: #337ab7;
+		border-color: #337ab7;
+		color: white;
+	}
+	.rw-cell.rw-state-disabled {
+		color: #999;
+		opacity: 0.7;
+	}
+	.rw-cell.rw-state-disabled:hover {
+		background: none;
+		border-color: transparent;
+	}
+	.rw-calendar-month .rw-cell {
+		text-align: center;
+	}
+	.rw-cell-off-range {
+		color: #999;
+	}
+	.rw-calendar-transition-group {
+		position: relative;
+	}
+	.rw-calendar-transition {
+		transition: transform 300ms;
+		overflow: hidden;
+	}
+	.rw-calendar-transition-top {
+		-ms-transform: translateY(-100%);
+		transform: translateY(-100%);
+	}
+	.rw-calendar-transition-bottom {
+		-ms-transform: translateY(100%);
+		transform: translateY(100%);
+	}
+	.rw-calendar-transition-right {
+		-ms-transform: translateX(-100%);
+		transform: translateX(-100%);
+	}
+	.rw-calendar-transition-left {
+		-ms-transform: translateX(100%);
+		transform: translateX(100%);
+	}
+	.rw-calendar-transition-entering.rw-calendar-transition-top,
+	.rw-calendar-transition-entered.rw-calendar-transition-top,
+	.rw-calendar-transition-entering.rw-calendar-transition-bottom,
+	.rw-calendar-transition-entered.rw-calendar-transition-bottom {
+		-ms-transform: translateY(0);
+		transform: translateY(0);
+	}
+	.rw-calendar-transition-entering.rw-calendar-transition-right,
+	.rw-calendar-transition-entered.rw-calendar-transition-right,
+	.rw-calendar-transition-entering.rw-calendar-transition-left,
+	.rw-calendar-transition-entered.rw-calendar-transition-left {
+		-ms-transform: translateX(0);
+		transform: translateX(0);
+	}
+	.rw-calendar-transition-exiting.rw-calendar-transition-top {
+		-ms-transform: translateY(100%);
+		transform: translateY(100%);
+	}
+	.rw-calendar-transition-exiting.rw-calendar-transition-bottom {
+		-ms-transform: translateY(-100%);
+		transform: translateY(-100%);
+	}
+	.rw-calendar-transition-exiting.rw-calendar-transition-right {
+		-ms-transform: translateX(100%);
+		transform: translateX(100%);
+	}
+	.rw-calendar-transition-exiting.rw-calendar-transition-left {
+		-ms-transform: translateX(-100%);
+		transform: translateX(-100%);
+	}
+	.rw-select-list {
+		overflow: auto;
+		position: relative;
+	}
+	.rw-select-list .rw-list {
+		max-height: none;
+		font-size: 1em;
+	}
+	.rw-select-list-label {
+		display: block;
+		position: relative;
+		font-weight: normal;
+		cursor: inherit;
+		padding-left: 1.25rem;
+		margin: 0;
+	}
+	.rw-rtl .rw-select-list-label {
+		padding-left: 0;
+		padding-right: 1.25rem;
+	}
+	input.rw-select-list-input {
+		position: absolute;
+		left: 0;
+		top: 50%;
+		-ms-transform: translateY(-50%);
+		transform: translateY(-50%);
+		${/* top: 0.1em\9; */ ''};
+		margin: 0;
+		line-height: normal;
+		cursor: inherit;
+	}
+	.rw-rtl input.rw-select-list-input {
+		left: auto;
+		right: 0;
+	}
+	.rw-loading-mask {
+		content: '';
+		${/* background: url("../img/loader-big.gif") no-repeat center; */ ''};
+		position: absolute;
+		background-color: #fff;
+		border-radius: 0.25rem;
+		opacity: 0.7;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+	}
+	.rw-multiselect {
+		cursor: text;
+	}
+	.rw-multiselect .rw-input-reset {
+		height: calc(2.429em - 0.125rem);
+		${
+			/* margin-top: -0.125rem\9;
+	height: 2.429em\9; */ ''
+		};
+		border-width: 0;
+		width: auto;
+		max-width: 100%;
+		padding: 0 0.857em;
+	}
+	.rw-multiselect .rw-select {
+		vertical-align: middle;
+	}
+	.rw-multiselect .rw-select,
+	.rw-multiselect .rw-select:hover,
+	.rw-multiselect .rw-select:active {
+		box-shadow: none;
+		background: none;
+	}
+	.rw-multiselect-taglist {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		display: inline-block;
+		vertical-align: 0;
+		outline: none;
+	}
+	.rw-multiselect-tag {
+		display: inline-table;
+		color: inherit;
+		padding: 0 0.35em 0 0.35em;
+		margin-left: calc(0.279335em - 0.0625rem);
+		margin-top: 0.279335em;
+		margin-top: calc(0.279335em - 0.0625rem);
+		height: 1.87033em;
+		border-radius: 0.1875rem;
+		background-color: #eee;
+		border: 0.0625rem solid #ccc;
+		cursor: default;
+		vertical-align: top;
+		text-align: center;
+		overflow: hidden;
+		max-width: 100%;
+	}
+	.rw-multiselect-tag > * {
+		display: table-cell;
+		vertical-align: middle;
+		height: 100%;
+	}
+	.rw-rtl .rw-multiselect-tag {
+		margin-left: 0;
+		margin-right: calc(0.279335em - 0.0625rem);
+		padding: 0 0.35em 0 0.35em;
+	}
+	.rw-multiselect-tag.rw-state-focus,
+	.rw-multiselect-tag.rw-state-focus:hover {
+		background-color: transparent;
+		border-color: #66afe9;
+		color: #333;
+	}
+	.rw-multiselect-tag.rw-state-readonly,
+	.rw-multiselect-tag.rw-state-disabled,
+	.rw-state-readonly .rw-multiselect-tag,
+	.rw-state-disabled .rw-multiselect-tag,
+	fieldset[disabled] .rw-multiselect-tag {
+		cursor: not-allowed;
+	}
+	.rw-multiselect-tag.rw-state-disabled,
+	.rw-state-disabled .rw-multiselect-tag,
+	fieldset[disabled] .rw-multiselect-tag {
+		opacity: 0.65;
+	}
+	fieldset[disabled] .rw-multiselect-tag {
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+	.rw-multiselect-tag-btn {
+		color: inherit;
+		margin-left: 0.25em;
+	}
+	.rw-rtl .rw-multiselect-tag-btn {
+		margin-left: 0;
+		margin-right: 0.25em;
+	}
+	.rw-autocomplete .rw-select {
+		position: absolute;
+		display: block;
+		width: auto;
+		top: 0;
+		bottom: 0;
+		right: 0;
+	}
+	.rw-popup-container {
+		position: absolute;
+		z-index: 1005;
+		top: 100%;
+		left: -0.375rem;
+		right: -0.375rem;
+	}
+	.rw-popup-container.rw-dropup {
+		top: auto;
+		bottom: 100%;
+	}
+	.rw-state-focus .rw-popup-container {
+		z-index: 1006;
+	}
+	.rw-popup-transition {
+		width: 100%;
+		margin-bottom: 0.375rem;
+		padding: 0 0.375rem;
+	}
+	.rw-dropup > .rw-popup-transition {
+		margin-bottom: 0;
+		margin-top: 0.375rem;
+	}
+	.rw-popup {
+		border-top-right-radius: 0;
+		border-top-left-radius: 0;
+		border-bottom-right-radius: 0.1875rem;
+		border-bottom-left-radius: 0.1875rem;
+		box-shadow: 0 0.3125rem 0.375rem rgba(0, 0, 0, 0.2);
+		border: #ccc 0.0625rem solid;
+		background: #fff;
+	}
+	.rw-dropup .rw-popup {
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+		border-top-right-radius: 0.1875rem;
+		border-top-left-radius: 0.1875rem;
+		box-shadow: 0 -0.125rem 0.375rem rgba(0, 0, 0, 0.2);
+	}
+	.rw-popup-transition {
+		transition: transform 200ms;
+	}
+	.rw-popup-transition-entering {
+		overflow: hidden;
+	}
+	.rw-popup-transition-entering .rw-popup-transition {
+		-ms-transform: translateY(0);
+		transform: translateY(0);
+		transition-timing-function: ease-out;
+	}
+	.rw-popup-transition-exiting .rw-popup-transition {
+		transition-timing-function: ease-in;
+	}
+	.rw-popup-transition-exiting,
+	.rw-popup-transition-exited {
+		overflow: hidden;
+	}
+	.rw-popup-transition-exiting .rw-popup-transition,
+	.rw-popup-transition-exited .rw-popup-transition {
+		-ms-transform: translateY(-100%);
+		transform: translateY(-100%);
+	}
+	.rw-popup-transition-exiting.rw-dropup .rw-popup-transition,
+	.rw-popup-transition-exited.rw-dropup .rw-popup-transition {
+		-ms-transform: translateY(100%);
+		transform: translateY(100%);
+	}
+	.rw-popup-transition-exited {
+		display: none;
+	}
+	.rw-state-disabled {
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	color: ${({ theme }): string => theme.palette.text.regular};
+	font-family: ${({ theme }): string => theme.fonts.default};
+	font-size: ${({ theme }): string => theme.sizes.font.medium};
+	font-weight: ${({ theme }): number => theme.fonts.weight.regular};
+`;
+
+export default Styler;
diff --git a/src/settings/components/utils.js b/src/settings/components/utils.ts
similarity index 91%
rename from src/settings/components/utils.js
rename to src/settings/components/utils.ts
index 072c04e9..733e5a3c 100644
--- a/src/settings/components/utils.js
+++ b/src/settings/components/utils.ts
@@ -3,10 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { SelectItem } from '@zextras/carbonio-design-system';
 import { t } from '@zextras/carbonio-shell-ui';
 import { isEqual, transform, isObject, find } from 'lodash';
 
-export const ShowReminderOptions = () => [
+export const ShowReminderOptions = (): SelectItem<`${number}`>[] => [
 	{ label: t('reminder.never', 'Never'), value: '0' },
 	{ label: t('reminder.all_time', 'All time of the event'), value: '-1' },
 	{
@@ -147,18 +148,18 @@ export const ShowReminderOptions = () => [
 	}
 ];
 
-export const DefaultViewOptions = () => [
+export const DefaultViewOptions = (): SelectItem[] => [
 	{ label: t('settings.options.default_view.month', 'Month View'), value: 'month' },
 	{ label: t('settings.options.default_view.week', 'Week View'), value: 'week' },
 	{ label: t('settings.options.default_view.day', 'Day View'), value: 'day' },
 	{ label: t('settings.options.default_view.work_week', 'Work Week View'), value: 'workWeek' },
 	{ label: t('settings.options.default_view.list', 'List View'), value: 'list' }
 ];
-export const DefaultCalendarOptions = () => [
+export const DefaultCalendarOptions = (): SelectItem[] => [
 	{ label: t('label.calendar', 'Calendar'), value: 'calendar' }
 ];
 
-export const TimeZonesOptions = () => [
+export const TimeZonesOptions = (): SelectItem[] => [
 	{
 		value: 'Etc/GMT+12',
 		label: t('timezone.dateline', { value: 'GMT -12:00', defaultValue: '{{value}} Dateline' })
@@ -631,7 +632,7 @@ export const TimeZonesOptions = () => [
 		})
 	}
 ];
-export const FreeBusyOptions = () => [
+export const FreeBusyOptions = (): SelectItem[] => [
 	{
 		label: t(
 			'settings.options.free_busy_opts.allow_all',
@@ -669,7 +670,7 @@ export const FreeBusyOptions = () => [
 	}
 ];
 
-export const InvitesOptions = () => [
+export const InvitesOptions = (): SelectItem[] => [
 	{
 		label: t(
 			'settings.options.invt_opts.allow_all',
@@ -696,7 +697,7 @@ export const InvitesOptions = () => [
 		value: 'v4'
 	}
 ];
-export const StartWeekOfOptions = () => [
+export const StartWeekOfOptions = (): SelectItem<`${number}`>[] => [
 	{ label: t('label.week_day.sunday', 'Sunday'), value: '0' },
 	{ label: t('label.week_day.monday', 'Monday'), value: '1' },
 	{ label: t('label.week_day.tuesday', 'Tuesday'), value: '2' },
@@ -706,11 +707,11 @@ export const StartWeekOfOptions = () => [
 	{ label: t('label.week_day.saturday', 'Saturday'), value: '6' }
 ];
 
-export const DefaultApptVisibiltyOptions = () => [
+export const DefaultApptVisibiltyOptions = (): SelectItem<'public' | 'private'>[] => [
 	{ label: t('settings.options.dflt_vsblty_opt.public', 'Public'), value: 'public' },
 	{ label: t('label.private', 'Private'), value: 'private' }
 ];
-export const SpanTimeOptions = (isMinutesFormat) => [
+export const SpanTimeOptions = (isMinutesFormat: boolean): SelectItem[] => [
 	{
 		label: t('reminder.minute_before', {
 			count: 30,
@@ -745,7 +746,7 @@ export const SpanTimeOptions = (isMinutesFormat) => [
 	}
 ];
 
-export const getWeekDay = (day) => {
+export const getWeekDay = (day: `${number}`): string => {
 	switch (day) {
 		case '1':
 			return t('label.week_day.monday', 'Monday');
@@ -764,7 +765,7 @@ export const getWeekDay = (day) => {
 	}
 };
 
-export const ShareCalendarWithOptions = () => [
+export const ShareCalendarWithOptions = (): SelectItem<'usr' | 'pub'>[] => [
 	{
 		label: t('share.options.share_calendar_with.internal_users_groups', 'Internal Users or Groups'),
 		value: 'usr'
@@ -778,7 +779,7 @@ export const ShareCalendarWithOptions = () => [
 	}
 ];
 
-export const ShareCalendarRoleOptions = (canViewPrvtAppt) => [
+export const ShareCalendarRoleOptions = (canViewPrvtAppt: boolean | undefined): SelectItem[] => [
 	{ label: t('share.options.share_calendar_role.none', 'None'), value: '' },
 	{
 		label: t('share.options.share_calendar_role.viewer', 'Viewer'),
@@ -794,13 +795,27 @@ export const ShareCalendarRoleOptions = (canViewPrvtAppt) => [
 	}
 ];
 
-export const differenceObject = (object, base) => {
-	// eslint-disable-next-line no-shadow
-	function changes(object, base) {
-		return transform(object, (result, value, key) => {
-			if (!isEqual(value, base[key])) {
+export const differenceObject = <
+	TObj extends Record<string, unknown>,
+	TBase extends Record<string, unknown>
+>(
+	object: TObj,
+	base: TBase
+): Record<keyof TObj, unknown> => {
+	function changes<
+		TInnerObj extends Record<string, unknown>,
+		TInnerBase extends Record<string, unknown>
+	>(innerObject: TInnerObj, innerBase: TInnerBase): Record<keyof TInnerObj, unknown> {
+		return transform(innerObject, (result, value, key: keyof TInnerObj) => {
+			if (!isEqual(value, innerBase[key as keyof TInnerBase])) {
 				// eslint-disable-next-line no-param-reassign
-				result[key] = isObject(value) && isObject(base[key]) ? changes(value, base[key]) : value;
+				result[key] =
+					isObject(value) && isObject(innerBase[key as keyof TInnerBase])
+						? changes(
+								value as Record<string, unknown>,
+								innerBase[key as keyof TInnerBase] as Record<string, unknown>
+							)
+						: value;
 			}
 		});
 	}
@@ -809,6 +824,7 @@ export const differenceObject = (object, base) => {
 
 export const validEmailRegex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
 
-export const validEmail = (email) => !!validEmailRegex.test(email);
+export const validEmail = (email: string): boolean => validEmailRegex.test(email);
 
-export const findLabel = (list, value) => find(list, (item) => item.value === value)?.label;
+export const findLabel = <TValue>(list: SelectItem<TValue>[], value: unknown): string | undefined =>
+	find(list, (item) => item.value === value)?.label;
diff --git a/src/settings/permissions-settings-view.jsx b/src/settings/permissions-settings-view.jsx
index 1fa515b0..185a8756 100644
--- a/src/settings/permissions-settings-view.jsx
+++ b/src/settings/permissions-settings-view.jsx
@@ -10,7 +10,7 @@ import { t, useIntegratedComponent } from '@zextras/carbonio-shell-ui';
 import styled from 'styled-components';
 
 const AttendeesContainer = styled.div`
-	width: calc(100% - ${({ hasTooltip }) => (hasTooltip ? `3rem` : '0rem')});
+	width: calc(100% - ${({ $hasTooltip }) => ($hasTooltip ? `3rem` : '0rem')});
 	height: fit-content;
 	background: ${({ theme }) => theme.palette.gray5.regular};
 	border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray2.regular};
diff --git a/src/view/calendar/custom-toolbar.tsx b/src/view/calendar/custom-toolbar.tsx
index 8704bc24..1b6685dc 100644
--- a/src/view/calendar/custom-toolbar.tsx
+++ b/src/view/calendar/custom-toolbar.tsx
@@ -11,20 +11,21 @@ import {
 	IconButton,
 	pseudoClasses,
 	Tooltip,
-	Padding
+	Padding,
+	AnyColor
 } from '@zextras/carbonio-design-system';
 import { useTranslation } from 'react-i18next';
-import styled, { css, SimpleInterpolation } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { useSplitLayoutPrefs } from '../../hooks/use-split-layout-prefs';
 import { CalendarView, useAppStatusStore } from '../../store/zustand/store';
 
-const CustomContainer = styled(Container)`
+const CustomContainer = styled(Container)<{ $color?: AnyColor }>`
 	border: 0.0625rem solid;
 	border-radius: 0.25rem;
 	height: fit-content;
-	${({ color = 'primary', theme }): SimpleInterpolation => css`
-		${pseudoClasses(theme, color, 'border-color')};
+	${({ $color = 'primary', theme }): ReturnType<typeof css> => css`
+		${pseudoClasses(theme, $color, 'border-color')};
 	`};
 `;
 
@@ -182,33 +183,37 @@ export const CustomToolbar = ({
 
 					<CustomContainer width="fit" orientation="horizontal" mainAlignment="flex-end">
 						<CustomButton
-							backgroundColor={view === 'month' ? 'highlight' : undefined}
+							backgroundColor={view === 'month' ? 'highlight' : 'transparent'}
+							labelColor={'primary'}
 							label={t('label.month', 'month')}
-							type="ghost"
+							type="default"
 							onClick={month}
 							data-testid="MonthButton"
 							minWidth={'fit-content'}
 						/>
 						<CustomButton
-							backgroundColor={view === 'week' ? 'highlight' : undefined}
+							backgroundColor={view === 'week' ? 'highlight' : 'transparent'}
+							labelColor={'primary'}
 							label={t('label.week', 'week')}
-							type="ghost"
+							type="default"
 							onClick={week}
 							data-testid="WeekButton"
 							minWidth={'fit-content'}
 						/>
 						<CustomButton
-							backgroundColor={view === 'day' ? 'highlight' : undefined}
+							backgroundColor={view === 'day' ? 'highlight' : 'transparent'}
+							labelColor={'primary'}
 							label={t('label.day', 'day')}
-							type="ghost"
+							type="default"
 							onClick={day}
 							data-testid="DayButton"
 							minWidth={'fit-content'}
 						/>
 						<CustomButton
-							backgroundColor={view === 'work_week' ? 'highlight' : undefined}
+							backgroundColor={view === 'work_week' ? 'highlight' : 'transparent'}
+							labelColor={'primary'}
 							label={t('label.work_week', 'work week')}
-							type="ghost"
+							type="default"
 							onClick={workView}
 							data-testid="WorkWeekButton"
 							minWidth={'fit-content'}
diff --git a/src/view/calendar/work-view.tsx b/src/view/calendar/work-view.tsx
index e6822d7b..1e311f36 100644
--- a/src/view/calendar/work-view.tsx
+++ b/src/view/calendar/work-view.tsx
@@ -62,7 +62,7 @@ WorkView.range = (rangeDate: Date): Date[] => {
 		schedule,
 		(acc: Date[], day: WorkWeekDay, i: number) => {
 			if (day.working) {
-				acc.push(datesAdd(d, i - current, 'day'));
+				acc.push(datesAdd(d.toDate(), i - current, 'day'));
 			}
 			return acc;
 		},
@@ -101,7 +101,7 @@ WorkView.weekBounds = (week: WorkWeekDay[]): WorkWeekBounds => {
 WorkView.title = (titleDate: Date): string => {
 	const { start, end } = WorkView.weekBounds(schedule);
 	const startDate = moment(titleDate).day(start);
-	const endDate = datesAdd(startDate, end - start, 'day');
+	const endDate = datesAdd(startDate.toDate(), end - start, 'day');
 	const isMonthSame = moment(startDate).format('MMMM') === moment(endDate).format('MMMM');
 	return isMonthSame
 		? `${moment(startDate).format('MMMM DD')} - ${moment(endDate).format('DD')}`
diff --git a/src/view/editor/parts/editor-attendees.tsx b/src/view/editor/parts/editor-attendees.tsx
index 05f75c3e..f564bca6 100644
--- a/src/view/editor/parts/editor-attendees.tsx
+++ b/src/view/editor/parts/editor-attendees.tsx
@@ -37,10 +37,8 @@ type EditorAttendeesProps = {
 	editorId: string;
 };
 
-export const AttendeesContainer = styled.div`
-	width: calc(
-		100% - ${({ hasTooltip }: { hasTooltip?: boolean }): string => (hasTooltip ? `3rem` : '0rem')}
-	);
+export const AttendeesContainer = styled.div<{ $hasTooltip?: boolean }>`
+	width: calc(100% - ${({ $hasTooltip }): string => ($hasTooltip ? `3rem` : '0rem')});
 	height: fit-content;
 	background: ${({ theme }): string => theme.palette.gray5.regular};
 	border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular};
diff --git a/src/view/editor/parts/editor-date-picker.tsx b/src/view/editor/parts/editor-date-picker.tsx
index 1fbb95d8..ec3b3998 100644
--- a/src/view/editor/parts/editor-date-picker.tsx
+++ b/src/view/editor/parts/editor-date-picker.tsx
@@ -13,7 +13,6 @@ import StartDatePicker from '../../../commons/start-date-picker';
 import { useAppDispatch, useAppSelector } from '../../../store/redux/hooks';
 import {
 	selectEditorAllDay,
-	selectEditorDisabled,
 	selectEditorEnd,
 	selectEditorStart
 } from '../../../store/selectors/editor';
@@ -24,7 +23,6 @@ export const EditorDatePicker = ({ editorId }: { editorId: string }): ReactEleme
 	const start = useAppSelector(selectEditorStart(editorId));
 	const end = useAppSelector(selectEditorEnd(editorId));
 	const diff = useMemo(() => moment(end).diff(moment(start)), [end, start]);
-	const disabled = useAppSelector(selectEditorDisabled(editorId));
 	const dispatch = useAppDispatch();
 	const onChange = useCallback(
 		({ start: newStartValue, end: newEndValue }: { start: number; end: number }) => {
@@ -36,13 +34,7 @@ export const EditorDatePicker = ({ editorId }: { editorId: string }): ReactEleme
 	return start && end ? (
 		<>
 			<Row takeAvailableSpace>
-				<StartDatePicker
-					start={new Date(start)}
-					onChange={onChange}
-					diff={diff}
-					allDay={allDay}
-					disabled={disabled?.datePicker}
-				/>
+				<StartDatePicker start={new Date(start)} onChange={onChange} diff={diff} allDay={allDay} />
 			</Row>
 			<Padding left="small" />
 			<Row takeAvailableSpace>
@@ -52,7 +44,6 @@ export const EditorDatePicker = ({ editorId }: { editorId: string }): ReactEleme
 					onChange={onChange}
 					diff={diff}
 					allDay={allDay}
-					disabled={disabled?.datePicker}
 				/>
 			</Row>
 		</>
diff --git a/src/view/editor/parts/editor-free-busy-selector.tsx b/src/view/editor/parts/editor-free-busy-selector.tsx
index 81dc0f2a..25ab4079 100644
--- a/src/view/editor/parts/editor-free-busy-selector.tsx
+++ b/src/view/editor/parts/editor-free-busy-selector.tsx
@@ -29,7 +29,7 @@ type ItemProps = {
 
 const StatusItemComponent = ({ label, color }: ItemProps): ReactElement => (
 	<Container width="fit" mainAlignment="flex-start" orientation="horizontal">
-		<Square color={color} />
+		<Square $color={color} />
 		<Padding left="small">
 			<Text>{label}</Text>
 		</Padding>
diff --git a/src/view/editor/parts/editor-resource-component.tsx b/src/view/editor/parts/editor-resource-component.tsx
index a56f71cc..88fe031b 100644
--- a/src/view/editor/parts/editor-resource-component.tsx
+++ b/src/view/editor/parts/editor-resource-component.tsx
@@ -16,7 +16,7 @@ import {
 	useKeyboard
 } from '@zextras/carbonio-design-system';
 import { find, map } from 'lodash';
-import styled, { DefaultTheme } from 'styled-components';
+import styled from 'styled-components';
 
 import {
 	EditorAvailabilityWarningRow,
@@ -35,20 +35,19 @@ import { Contact } from '../../../types/soap/soap-actions';
 import { EditorChipAttendees } from '../../../types/store/invite';
 
 interface SkeletonTileProps {
-	width?: string;
-	height?: string;
-	radius?: string;
-	theme: DefaultTheme;
+	$width?: string;
+	$height?: string;
+	$radius?: string;
 }
 
 const SkeletonTile = styled.div<SkeletonTileProps>`
-	width: ${({ width }): string => width ?? '1rem'};
-	max-width: ${({ width }): string => width ?? '1rem'};
-	min-width: ${({ width }): string => width ?? '1rem'};
-	height: ${({ height }): string => height ?? '1rem'};
-	max-height: ${({ height }): string => height ?? '1rem'};
-	min-height: ${({ height }): string => height ?? '1rem'};
-	border-radius: ${({ radius }): string => radius ?? '0.125rem'};
+	width: ${({ $width }): string => $width ?? '1rem'};
+	max-width: ${({ $width }): string => $width ?? '1rem'};
+	min-width: ${({ $width }): string => $width ?? '1rem'};
+	height: ${({ $height }): string => $height ?? '1rem'};
+	max-height: ${({ $height }): string => $height ?? '1rem'};
+	min-height: ${({ $height }): string => $height ?? '1rem'};
+	border-radius: ${({ $radius }): string => $radius ?? '0.125rem'};
 	background: ${({ theme }): string => theme.palette.gray2.regular};
 `;
 
@@ -60,15 +59,19 @@ export const Loader = (): ReactElement => (
 		minWidth="16rem"
 		minHeight="2rem"
 	>
-		<SkeletonTile radius="50%" width="2rem" height="2rem" />
+		<SkeletonTile $radius="50%" $width="2rem" $height="2rem" />
 		<Container orientation="vertical" crossAlignment="flex-start" padding={{ left: 'small' }}>
 			<SkeletonTile
-				radius="0.25rem"
-				width={`${Math.random() * 9.375 + 4}rem`}
-				height="0.875rem"
+				$radius="0.25rem"
+				$width={`${Math.random() * 9.375 + 4}rem`}
+				$height="0.875rem"
 				style={{ marginBottom: '0.25rem' }}
 			/>
-			<SkeletonTile radius="0.25rem" width={`${Math.random() * 9.375 + 4}rem`} height="0.75rem" />
+			<SkeletonTile
+				$radius="0.25rem"
+				$width={`${Math.random() * 9.375 + 4}rem`}
+				$height="0.75rem"
+			/>
 		</Container>
 	</Container>
 );
diff --git a/src/view/editor/parts/editor-time-zone.tsx b/src/view/editor/parts/editor-time-zone.tsx
index f7ec22a0..75a2a237 100644
--- a/src/view/editor/parts/editor-time-zone.tsx
+++ b/src/view/editor/parts/editor-time-zone.tsx
@@ -33,7 +33,7 @@ export const EditorTimezone = ({ editorId }: { editorId: string }): ReactElement
 	const disabled = useAppSelector(selectEditorDisabled(editorId));
 
 	const { zimbraPrefUseTimeZoneListInCalendar } = usePrefs();
-	const timeZonesOptions = useMemo(() => TimeZonesOptions(t), [t]);
+	const timeZonesOptions = useMemo(() => TimeZonesOptions(), []);
 	const timezoneLabel = t('timezones', 'Timezones');
 	const [value, setValue] = useState<SelectValue>(() => {
 		if (timezone && zimbraPrefUseTimeZoneListInCalendar === 'TRUE') {
diff --git a/src/view/editor/parts/recurrence/views/recurrence-end-options.tsx b/src/view/editor/parts/recurrence/views/recurrence-end-options.tsx
index a5018967..cb9872bf 100644
--- a/src/view/editor/parts/recurrence/views/recurrence-end-options.tsx
+++ b/src/view/editor/parts/recurrence/views/recurrence-end-options.tsx
@@ -188,7 +188,7 @@ const RecurrenceEndOptions = ({ editorId }: { editorId: string }): ReactElement
 							<Container crossAlignment="flex-start" style={{ maxWidth: '31.25rem' }}>
 								<DateTimePicker
 									label={endAfterString}
-									includeTime={false}
+									showTimeSelect={false}
 									defaultValue={initialPickerValue}
 									onChange={onDateChange}
 									disabled={isDatePickerDisabled}
diff --git a/src/view/editor/parts/select-label-factory.tsx b/src/view/editor/parts/select-label-factory.tsx
index 4f5e4833..dc62c07b 100644
--- a/src/view/editor/parts/select-label-factory.tsx
+++ b/src/view/editor/parts/select-label-factory.tsx
@@ -11,11 +11,10 @@ import {
 	Text,
 	Row,
 	Icon,
-	TextProps,
-	IconProps,
 	SelectItem,
 	LabelFactoryProps,
-	Tooltip
+	Tooltip,
+	AnyColor
 } from '@zextras/carbonio-design-system';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
@@ -25,12 +24,12 @@ import { useRoot } from '../../../carbonio-ui-commons/store/zustand/folder';
 import { Grant } from '../../../carbonio-ui-commons/types/folder';
 import { isLinkChild } from '../../../commons/utilities';
 
-export const Square = styled.div`
+export const Square = styled.div<{ $color?: AnyColor; $disabled?: boolean }>`
 	width: 1rem;
 	height: 1rem;
-	background: ${({ color }): string | undefined => color};
+	background: ${({ $color }): string | undefined => $color};
 	border-radius: 0.25rem;
-	opacity: ${({ disabled }: { disabled?: boolean }): number => (disabled ? 0.5 : 1)};
+	opacity: ${({ $disabled }): number => ($disabled ? 0.5 : 1)};
 `;
 
 export const ColorContainer = styled(Container)`
@@ -41,31 +40,16 @@ export const TextUpperCase = styled(Text)`
 	text-transform: capitalize;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	color: ${({ theme, disabled, color }): string => {
-		if (color) {
-			return disabled ? theme.palette.text.disabled : color;
-		}
-		return disabled ? theme.palette.text.disabled : theme.palette.text.regular;
-	}};
+	color: ${({ theme, disabled, color }): string =>
+		(disabled && theme.palette.text.disabled) || color || theme.palette.text.regular};
 `;
 
-export const LabelText = styled(Text)<TextProps & { $showPrimary?: boolean }>`
-color: ${({ theme, disabled, $showPrimary }): string =>
-	// eslint-disable-next-line no-nested-ternary
-	disabled
-		? theme.palette.text.disabled
-		: $showPrimary
-			? theme.palette.primary.regular
-			: theme.palette.secondary.regular}};`;
-
-export const StyledIcon = styled(Icon)<IconProps & { $showPrimary?: boolean }>`
-color: ${({ theme, disabled, $showPrimary }): string =>
-	// eslint-disable-next-line no-nested-ternary
-	disabled
-		? theme.palette.text.disabled
-		: $showPrimary
-			? theme.palette.primary.regular
-			: theme.palette.secondary.regular}};`;
+export const LabelText = styled(Text)<{ $showPrimary?: boolean }>`
+	color: ${({ theme, disabled, $showPrimary }): string =>
+		(disabled && theme.palette.text.disabled) ||
+		($showPrimary && theme.palette.primary.regular) ||
+		theme.palette.secondary.regular};
+`;
 
 interface CustomSelectItem extends SelectItem {
 	id?: string;
@@ -134,7 +118,7 @@ export const ItemFactory = ({
 	return (
 		<Row wrap={'nowrap'}>
 			<Padding right="small">
-				<Square color={color} disabled={disabled} />
+				<Square $color={color} $disabled={disabled} />
 			</Padding>
 			<TextUpperCase disabled={disabled}>{label}</TextUpperCase>
 			{sharedStatusIcon}
@@ -187,12 +171,12 @@ const LabelFactory = (item: CustomLabelFactoryProps): ReactElement => {
 					)}
 				</Row>
 			</Row>
-			<StyledIcon
+			<Icon
 				size="large"
 				icon={open ? 'ChevronUpOutline' : 'ChevronDownOutline'}
 				disabled={disabled}
-				$showPrimary={open || focus}
 				style={{ alignSelf: 'center' }}
+				color={(disabled && 'text') || ((open || focus) && 'primary') || 'secondary'}
 			/>
 		</ColorContainer>
 	);
diff --git a/src/view/event-panel-view/attachment.tsx b/src/view/event-panel-view/attachment.tsx
index 5dee3162..49a9b5c6 100644
--- a/src/view/event-panel-view/attachment.tsx
+++ b/src/view/event-panel-view/attachment.tsx
@@ -8,12 +8,10 @@ import React, { ReactElement, useCallback, useContext, useMemo } from 'react';
 import {
 	Button,
 	Container,
-	ContainerProps,
 	getColor,
 	Padding,
 	Row,
 	Text,
-	TextProps,
 	Tooltip
 } from '@zextras/carbonio-design-system';
 import { PreviewsManagerContext } from '@zextras/carbonio-ui-preview';
@@ -45,7 +43,7 @@ const AttachmentHoverBarContainer = styled(Container)`
 	height: 0;
 `;
 
-const AttachmentContainer = styled(Container)<ContainerProps & { disabled: boolean }>`
+const AttachmentContainer = styled(Container)<{ $disabled: boolean }>`
 	border-radius: 0.125rem;
 	width: calc(50% - 0.5rem);
 	transition: 0.2s ease-out;
@@ -53,8 +51,8 @@ const AttachmentContainer = styled(Container)<ContainerProps & { disabled: boole
 	margin-right: ${({ theme }): string => theme.sizes.padding.small};
 	box-sizing: border-box;
 	&:hover {
-		background-color: ${({ theme, background = 'transparent', disabled }): string =>
-			disabled ? 'gray5' : getColor(`${background}.hover`, theme)};
+		background-color: ${({ theme, background = 'transparent', $disabled }): string =>
+			$disabled ? 'gray5' : getColor(`${background}.hover`, theme)};
 		& ${AttachmentHoverBarContainer} {
 			display: flex;
 		}
@@ -63,22 +61,20 @@ const AttachmentContainer = styled(Container)<ContainerProps & { disabled: boole
 		background-color: ${({ theme, background = 'transparent' }): string =>
 			getColor(`${background}.focus`, theme)};
 	}
-	cursor: ${({ disabled }): string => (disabled ? 'default' : 'pointer')};
+	cursor: ${({ $disabled }): string => ($disabled ? 'default' : 'pointer')};
 `;
 
-const AttachmentExtension = styled(Text)<
-	TextProps & { background?: { extension: string; color: string } }
->`
+const AttachmentExtension = styled(Text)<{ $background?: { color: string } }>`
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	width: 2rem;
 	height: 2rem;
 	border-radius: ${({ theme }): string => theme.borderRadius};
-	background-color: ${({ theme, disabled, background }): string =>
+	background-color: ${({ theme, disabled, $background }): string =>
 		disabled
 			? theme.palette.primary.disabled
-			: (background?.color ?? theme.palette.primary.regular)};
+			: ($background?.color ?? theme.palette.primary.regular)};
 	color: ${({ theme }): string => theme.palette.gray6.regular};
 	font-size: calc(${({ theme }): string => theme.sizes.font.small} - 0.125rem);
 	text-transform: uppercase;
@@ -193,7 +189,7 @@ export const Attachment = ({
 			mainAlignment="flex-start"
 			height="fit"
 			background={disabled ? 'gray5' : 'gray3'}
-			disabled={disabled}
+			$disabled={disabled}
 			padding={{ right: 'medium' }}
 		>
 			<Tooltip
@@ -211,7 +207,7 @@ export const Attachment = ({
 					takeAvailableSpace
 				>
 					<AttachmentExtension
-						background={find(iconColors, (ic) => ic.extension === extension)}
+						$background={find(iconColors, (ic) => ic.extension === extension)}
 						disabled={disabled}
 					>
 						{extension}
diff --git a/src/view/event-panel-view/event-panel-view.tsx b/src/view/event-panel-view/event-panel-view.tsx
index 19a24f57..9f1c256f 100644
--- a/src/view/event-panel-view/event-panel-view.tsx
+++ b/src/view/event-panel-view/event-panel-view.tsx
@@ -7,7 +7,6 @@ import React, { ReactElement, useCallback, useMemo } from 'react';
 
 import {
 	Container,
-	ContainerProps,
 	Divider,
 	Dropdown,
 	Icon,
@@ -52,7 +51,7 @@ const BodyContainer = styled(Container)`
 	overflow-y: auto;
 `;
 
-const AppointmentCardContainer = styled(Container)<ContainerProps & { expanded?: boolean }>`
+const AppointmentCardContainer = styled(Container)`
 	z-index: 10;
 	position: absolute;
 	top: 1rem;
diff --git a/src/view/move/new-calendar-modal.tsx b/src/view/move/new-calendar-modal.tsx
index b5bf9397..9e389e97 100644
--- a/src/view/move/new-calendar-modal.tsx
+++ b/src/view/move/new-calendar-modal.tsx
@@ -16,7 +16,8 @@ import {
 	Icon,
 	SelectItem,
 	SelectProps,
-	useSnackbar
+	useSnackbar,
+	AnyColor
 } from '@zextras/carbonio-design-system';
 import { includes, map } from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -31,13 +32,13 @@ import { CALENDARS_STANDARD_COLORS } from '../../constants/calendar';
 import { createCalendar } from '../../store/actions/create-calendar';
 import { EventType } from '../../types/event';
 
-const Square = styled.div`
+const Square = styled.div<{ $color?: AnyColor }>`
 	width: 1.125rem;
 	height: 1.125rem;
 	position: relative;
 	top: -0.1875rem;
 	border: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular};
-	background: ${({ color }): string | undefined => color};
+	background: ${({ $color }): string | undefined => $color};
 	border-radius: 0.25rem;
 `;
 
@@ -78,7 +79,7 @@ const LabelFactory: SelectProps['LabelFactory'] = ({
 				<TextUpperCase>{selected?.[0].label}</TextUpperCase>
 			</Row>
 			<Padding right="small">
-				<Square color={CALENDARS_STANDARD_COLORS[Number(selected[0].value)].color} />
+				<Square $color={CALENDARS_STANDARD_COLORS[Number(selected[0].value)].color} />
 			</Padding>
 		</Row>
 		<Icon
@@ -100,7 +101,7 @@ const getStatusItems = (): SelectItem[] =>
 					<TextUpperCase>{el.label}</TextUpperCase>
 				</Padding>
 				<Padding right="small">
-					<Square color={el.color} />
+					<Square $color={el.color} />
 				</Padding>
 			</Container>
 		)
diff --git a/src/view/search/parts/from-date-to-date-row.tsx b/src/view/search/parts/from-date-to-date-row.tsx
index 11f9a875..9c7e619a 100644
--- a/src/view/search/parts/from-date-to-date-row.tsx
+++ b/src/view/search/parts/from-date-to-date-row.tsx
@@ -46,7 +46,7 @@ const FromDateToDateRow: FC<ComponentProps> = ({
 					enableChips
 					chipProps={{ avatarBackground: 'gray1', avatarIcon: 'CalendarOutline' }}
 					dateFormat="dd/MM/yyyy"
-					includeTime={false}
+					showTimeSelect={false}
 					defaultValue={fromDate}
 					onChange={onFromDateChange}
 				/>
@@ -58,7 +58,7 @@ const FromDateToDateRow: FC<ComponentProps> = ({
 					enableChips
 					chipProps={{ avatarBackground: 'gray1', avatarIcon: 'CalendarOutline' }}
 					dateFormat="dd/MM/yyyy"
-					includeTime={false}
+					showTimeSelect={false}
 					defaultValue={toDate}
 					onChange={onToDateChange}
 				/>
diff --git a/src/view/search/types.d.ts b/src/view/search/types.d.ts
deleted file mode 100644
index f79b3e8f..00000000
--- a/src/view/search/types.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-declare module '*';
diff --git a/src/view/sidebar/edit-modal/edit-modal.tsx b/src/view/sidebar/edit-modal/edit-modal.tsx
index 18219ecd..95e214af 100644
--- a/src/view/sidebar/edit-modal/edit-modal.tsx
+++ b/src/view/sidebar/edit-modal/edit-modal.tsx
@@ -75,36 +75,23 @@ export const EditModal: FC<EditModalProps> = ({ onClose, folderId }) => {
 	}, [folderId]);
 
 	return (
-		<>
-			<EditModalContext.Provider value={{ setModal, onClose, roleOptions, setActiveGrant }}>
-				{modal === 'main' && folder && (
-					<MainEditModal folder={folder} totalAppointments={folder?.n ?? 0} grant={grant ?? []} />
-				)}
+		<EditModalContext.Provider value={{ setModal, onClose, roleOptions, setActiveGrant }}>
+			{modal === 'main' && folder && (
+				<MainEditModal folder={folder} totalAppointments={folder?.n ?? 0} grant={grant ?? []} />
+			)}
 
-				{(modal === 'share' && folder && (
-					<ShareCalendarModal
-						folderName={folder.name}
-						folderId={folderId}
-						closeFn={onClose}
-						onGoBack={onGoBack}
-						secondaryLabel={t('folder.modal.footer.go_back', 'Go back')}
-						grant={grant}
-					/>
-				)) ||
-					(modal === 'revoke' && folder && (
-						<ShareRevokeModal
-							folder={folder}
-							grant={
-								Object.keys(activeGrant).length > 0
-									? (activeGrant as Grant)
-									: (folder?.acl?.grant[0] as Grant)
-							}
-							onGoBack={onGoBack}
-						/>
-					))}
-
-				{modal === 'edit' && folder && (
-					<EditPermissionModal
+			{(modal === 'share' && folder && (
+				<ShareCalendarModal
+					folderName={folder.name}
+					folderId={folderId}
+					closeFn={onClose}
+					onGoBack={onGoBack}
+					secondaryLabel={t('folder.modal.footer.go_back', 'Go back')}
+					grant={grant}
+				/>
+			)) ||
+				(modal === 'revoke' && folder && (
+					<ShareRevokeModal
 						folder={folder}
 						grant={
 							Object.keys(activeGrant).length > 0
@@ -113,8 +100,19 @@ export const EditModal: FC<EditModalProps> = ({ onClose, folderId }) => {
 						}
 						onGoBack={onGoBack}
 					/>
-				)}
-			</EditModalContext.Provider>
-		</>
+				))}
+
+			{modal === 'edit' && folder && (
+				<EditPermissionModal
+					folder={folder}
+					grant={
+						Object.keys(activeGrant).length > 0
+							? (activeGrant as Grant)
+							: (folder?.acl?.grant[0] as Grant)
+					}
+					onGoBack={onGoBack}
+				/>
+			)}
+		</EditModalContext.Provider>
 	);
 };
diff --git a/src/view/sidebar/edit-modal/parts/edit-permission-modal.tsx b/src/view/sidebar/edit-modal/parts/edit-permission-modal.tsx
index b74e56c9..39dc14ab 100644
--- a/src/view/sidebar/edit-modal/parts/edit-permission-modal.tsx
+++ b/src/view/sidebar/edit-modal/parts/edit-permission-modal.tsx
@@ -142,7 +142,7 @@ export const EditPermissionModal: FC<EditPermissionModalProps> = ({ folder, gran
 					disablePortal
 					defaultSelection={{
 						value: grant.perm,
-						label: findLabel(roleOptions, grant.perm)
+						label: findLabel(roleOptions, grant.perm) ?? ''
 					}}
 				/>
 			</Container>
diff --git a/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx b/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx
index 98e5e577..ca761209 100644
--- a/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx
+++ b/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx
@@ -6,6 +6,7 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import {
+	AnyColor,
 	Button,
 	Checkbox,
 	Container,
@@ -28,7 +29,7 @@ import { useUserAccounts } from '@zextras/carbonio-shell-ui';
 import type { TFunction } from 'i18next';
 import { compact, find, includes, isEmpty, map } from 'lodash';
 import { useTranslation } from 'react-i18next';
-import styled, { DefaultTheme } from 'styled-components';
+import styled from 'styled-components';
 
 import { GranteeChip } from './grantee-chip';
 import { FOLDER_VIEW } from '../../../../carbonio-ui-commons/constants';
@@ -45,20 +46,18 @@ import { folderAction } from '../../../../store/actions/calendar-actions';
 import { sendShareCalendarNotification } from '../../../../store/actions/send-share-calendar-notification';
 import { useAppDispatch } from '../../../../store/redux/hooks';
 
-const Square = styled.div`
+const Square = styled.div<{ $color: AnyColor }>`
 	width: 1.125rem;
 	height: 1.125rem;
 	position: relative;
 	top: -0.1875rem;
-	border: 0.0625rem solid
-		${({ theme }: { theme: DefaultTheme }): string => theme.palette.gray2.regular};
-	background: ${({ color }: { color: string }): string => color};
+	border: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular};
+	background: ${({ $color }): string => $color};
 	border-radius: 0.25rem;
 `;
 
 const ColorContainer = styled(Container)`
-	border-bottom: 0.0625rem solid
-		${({ theme }: { theme: DefaultTheme }): string => theme.palette.gray2.regular};
+	border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular};
 `;
 
 const StyledContainer = styled(Container)`
@@ -113,7 +112,7 @@ const LabelFactory: FC<LabelFactoryProps> = ({ selected, label, open, focus }) =
 					<TextUpperCase>{colorName}</TextUpperCase>
 				</Row>
 				<Padding right="small">
-					<Square color={squareColor ?? '0'} />
+					<Square $color={squareColor ?? '0'} />
 				</Padding>
 			</Row>
 			<Icon
@@ -135,7 +134,7 @@ const getStatusItems = (t: TFunction): Array<SelectItem> =>
 				<Padding left="small">
 					<TextUpperCase>{t(el.label ?? '')}</TextUpperCase>
 				</Padding>
-				<Square color={el.color} />
+				<Square $color={el.color} />
 			</Container>
 		)
 	}));
diff --git a/src/view/sidebar/share-calendar-modal.tsx b/src/view/sidebar/share-calendar-modal.tsx
index 893fe3b1..c782cd23 100644
--- a/src/view/sidebar/share-calendar-modal.tsx
+++ b/src/view/sidebar/share-calendar-modal.tsx
@@ -8,7 +8,6 @@ import React, { FC, ReactElement, useCallback, useMemo, useState } from 'react';
 import {
 	Checkbox,
 	ChipInput,
-	ChipItem,
 	Container,
 	Icon,
 	Input,
@@ -110,7 +109,7 @@ const UserShare = ({
 
 	const [ContactInput, integrationAvailable] = useIntegratedComponent('contact-input');
 
-	const [shareWithUserRole, setshareWithUserRole] = useState<string | null>('r');
+	const [shareWithUserRole, setShareWithUserRole] = useState<string | null>('r');
 	const [sendNotification, setSendNotification] = useState(true);
 	const [standardMessage, setStandardMessage] = useState('');
 	const [contacts, setContacts] = useState<Contacts>([]);
@@ -131,9 +130,9 @@ const UserShare = ({
 
 	const onShareRoleChange = useCallback<SingleSelectionOnChange<string | null>>(
 		(shareRole) => {
-			setshareWithUserRole(shareRole);
+			setShareWithUserRole(shareRole);
 		},
-		[setshareWithUserRole]
+		[setShareWithUserRole]
 	);
 
 	const onConfirm = useCallback((): void => {
@@ -224,10 +223,14 @@ const UserShare = ({
 						placeholder={t('share.placeholder.recipients_address', 'Recipients e-mail addresses')}
 						hasError
 						background={'gray4'}
-						onChange={(ev: ChipItem<any>[]): void => {
-							// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-							// @ts-ignore
-							setContacts(map(ev, (contact) => ({ email: contact.address })));
+						onChange={(chips): void => {
+							// FIXME: this cannot work since address does not belong to the chip
+							setContacts(
+								map(chips, (chip) => ({
+									email:
+										('address' in chip && typeof chip.address === 'string' && chip.address) || ''
+								}))
+							);
 						}}
 					/>
 				)}
@@ -253,7 +256,7 @@ const UserShare = ({
 					placement={'bottom-start'}
 					defaultSelection={{
 						value: 'r',
-						label: findLabel(shareCalendarRoleOptions, 'r')
+						label: findLabel(shareCalendarRoleOptions, 'r') ?? ''
 					}}
 				/>
 			</Container>
@@ -370,11 +373,13 @@ export const ShareCalendarModal: FC<ShareCalendarModalProps> = ({
 	const [t] = useTranslation();
 	const shareCalendarWithOptions = useMemo(() => ShareCalendarWithOptions(), []);
 
-	const [shareWithUserType, setShareWithUserType] = useState<'usr' | null>(SHARE_USER_TYPE.USER);
+	const [shareWithUserType, setShareWithUserType] = useState<'usr' | 'pub' | null>(
+		SHARE_USER_TYPE.USER
+	);
 
 	const title = useMemo(() => `${t('label.share', 'Share')} ${folderName}`, [folderName, t]);
 
-	const onShareWithChange = useCallback<SingleSelectionOnChange<'usr' | null>>((shareWith) => {
+	const onShareWithChange = useCallback<SingleSelectionOnChange<'usr' | 'pub'>>((shareWith) => {
 		setShareWithUserType(shareWith);
 	}, []);
 
@@ -391,7 +396,7 @@ export const ShareCalendarModal: FC<ShareCalendarModalProps> = ({
 				crossAlignment="flex-start"
 				height="fit"
 			>
-				<Select
+				<Select<'usr' | 'pub'>
 					items={shareCalendarWithOptions}
 					background={'gray5'}
 					label={t('label.share_with', 'Share with')}
@@ -399,7 +404,7 @@ export const ShareCalendarModal: FC<ShareCalendarModalProps> = ({
 					onChange={onShareWithChange}
 					defaultSelection={{
 						value: SHARE_USER_TYPE.USER,
-						label: findLabel(shareCalendarWithOptions, SHARE_USER_TYPE.USER)
+						label: findLabel(shareCalendarWithOptions, SHARE_USER_TYPE.USER) ?? ''
 					}}
 				/>
 			</Container>
diff --git a/tsconfig.json b/tsconfig.json
index 133a2858..dc8a39ff 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,8 @@
 	"extends": "@zextras/carbonio-ui-configs/rules/typescript.json",
 	"compilerOptions": {
 		"skipLibCheck": true,
-		"jsx": "react"
+		"jsx": "react",
+		"allowJs": true
 	},
 	"include": [
 		"src/**/*.ts",
@@ -11,5 +12,5 @@
 		"jest-setup.ts",
 		"src/view/sidebar/custom-components/folders-component.tsx"
 	],
-	"exclude": ["./node_modules/*", "./dist/*"]
+	"exclude": ["./node_modules/*", "./dist/*"],
 }

From 33c9adfe07014bfd13f9e00900c7ef1e8213b81d Mon Sep 17 00:00:00 2001
From: Beatrice Guerra <beatrice.guerra@zextras.com>
Date: Wed, 13 Nov 2024 11:10:21 +0100
Subject: [PATCH 03/11] fix: fix styles

Refs: CO-1609
---
 .idea/zapp-calendar.iml                       |   1 +
 src/settings/apple-ical-settings.jsx          |   4 +-
 src/settings/components/settings-heading.jsx  |   2 +-
 src/settings/creating-app-settings-view.jsx   |   4 +-
 src/settings/custom-schedule-modal.jsx        |  10 +-
 src/settings/general-settings-view.jsx        |  10 +-
 src/settings/permissions-settings-view.jsx    |   6 +-
 src/settings/settings-view.jsx                |   2 +-
 src/settings/work-week-settings-view.jsx      |   2 +-
 src/view/calendar/calendar-style.jsx          | 594 -------------
 src/view/calendar/calendar-style.tsx          | 797 ++++++++++++++++++
 src/view/calendar/custom-event.tsx            |   2 +-
 .../parts/editor-attachments-button.tsx       |   7 +-
 src/view/editor/parts/editor-attendees.tsx    |   2 +-
 .../editor/parts/editor-styled-components.tsx |  24 +-
 .../recurrence/components/month-select.tsx    |   2 +-
 .../components/ordinal-number-select.tsx      |   2 +-
 .../recurrence/components/weekday-select.tsx  |   2 +-
 src/view/event-panel-view/attachment.tsx      |   2 +-
 .../event-panel-view/event-panel-view.tsx     |   2 +-
 src/view/event-panel-view/trash-row-part.tsx  |   2 +-
 src/view/modals/delete-event-modal.tsx        |   2 +-
 .../modals/modify-standard-message-modal.tsx  |   2 +-
 src/view/search/displayer.tsx                 |   2 +-
 .../edit-modal/parts/main-edit-modal.tsx      |   2 +-
 src/view/tags/use-get-tags-accordions.tsx     |   8 +-
 26 files changed, 852 insertions(+), 643 deletions(-)
 delete mode 100644 src/view/calendar/calendar-style.jsx
 create mode 100644 src/view/calendar/calendar-style.tsx

diff --git a/.idea/zapp-calendar.iml b/.idea/zapp-calendar.iml
index 0c1ad526..ce15b05e 100644
--- a/.idea/zapp-calendar.iml
+++ b/.idea/zapp-calendar.iml
@@ -6,6 +6,7 @@
       <excludeFolder url="file://$MODULE_DIR$/build" />
       <excludeFolder url="file://$MODULE_DIR$/pkg" />
       <excludeFolder url="file://$MODULE_DIR$/coverage" />
+      <excludeFolder url="file://$MODULE_DIR$/dist" />
     </content>
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
diff --git a/src/settings/apple-ical-settings.jsx b/src/settings/apple-ical-settings.jsx
index e60af516..6ebfd90b 100644
--- a/src/settings/apple-ical-settings.jsx
+++ b/src/settings/apple-ical-settings.jsx
@@ -13,13 +13,13 @@ export default function AppleIcalSettings({ settingsObj, updateSettings }) {
 		<Container
 			padding={{ all: 'medium' }}
 			background="gray6"
-			mainAlignment="baseline"
+			mainAlignment="flex-start"
 			crossAlignment="baseline"
 		>
 			<Container
 				orientation="horizontal"
 				crossAlignment="baseline"
-				mainAlignment="baseline"
+				mainAlignment="flex-start"
 				padding={{ all: 'small' }}
 			>
 				<Row padding={{ right: 'small' }}>
diff --git a/src/settings/components/settings-heading.jsx b/src/settings/components/settings-heading.jsx
index e65aac38..009bc0ff 100644
--- a/src/settings/components/settings-heading.jsx
+++ b/src/settings/components/settings-heading.jsx
@@ -12,7 +12,7 @@ export default function Heading({ title }) {
 		<>
 			<Row
 				padding={{ all: 'small' }}
-				mainAlignment="baseline"
+				mainAlignment="flex-start"
 				crossAlignment="baseline"
 				width="100%"
 				background="gray4"
diff --git a/src/settings/creating-app-settings-view.jsx b/src/settings/creating-app-settings-view.jsx
index 54a4e385..7397bc2e 100644
--- a/src/settings/creating-app-settings-view.jsx
+++ b/src/settings/creating-app-settings-view.jsx
@@ -15,7 +15,7 @@ export default function CreatingAppointmentSettings({ settingsObj, updateSetting
 		<Container
 			padding={{ all: 'medium' }}
 			background="gray6"
-			mainAlignment="baseline"
+			mainAlignment="flex-start"
 			crossAlignment="baseline"
 		>
 			<Row padding={{ all: 'small' }}>
@@ -47,7 +47,7 @@ export default function CreatingAppointmentSettings({ settingsObj, updateSetting
 			<Row
 				padding={{ horizontal: 'small', top: 'small' }}
 				orientation="vertical"
-				mainAlignment="baseline"
+				mainAlignment="flex-start"
 				crossAlignment="baseline"
 			>
 				<Text size="large" weight="bold">
diff --git a/src/settings/custom-schedule-modal.jsx b/src/settings/custom-schedule-modal.jsx
index be98b7c9..4526123c 100644
--- a/src/settings/custom-schedule-modal.jsx
+++ b/src/settings/custom-schedule-modal.jsx
@@ -43,7 +43,7 @@ export default function CustomScheduleModal({
 				height="fit"
 			>
 				<ModalHeader title={title} onClose={toggleModal} />
-				<Container mainAlignment="baseline" crossAlignment="baseline">
+				<Container mainAlignment="flex-start" crossAlignment="baseline">
 					<Row padding={{ all: 'small' }}>
 						<Text size="large" weight="bold">
 							{t('label.work_hour', 'Work hour')}
@@ -51,7 +51,7 @@ export default function CustomScheduleModal({
 					</Row>
 					<Container
 						orientation="vertical"
-						mainAlignment="baseline"
+						mainAlignment="flex-start"
 						crossAlignment="baseline"
 						maxHeight="60vh"
 						style={{ overflowY: 'auto' }}
@@ -61,16 +61,16 @@ export default function CustomScheduleModal({
 								width="95%"
 								key={`week_day_${index}`}
 								orientation="horizontal"
-								mainAlignment="baseline"
+								mainAlignment="flex-start"
 							>
-								<Row width="35%" mainAlignment="baseline" crossAlignment="flex-start">
+								<Row width="35%" mainAlignment="flex-start" crossAlignment="flex-start">
 									<Checkbox
 										value={s.working}
 										onClick={handelDaysClicked(s.day)}
 										label={getWeekDay(`${Number(s.day) - 1}`, t)}
 									/>
 								</Row>
-								<Row width="65%" mainAlignment="baseline" crossAlignment="flex-start">
+								<Row width="65%" mainAlignment="flex-start" crossAlignment="flex-start">
 									<TimePicker
 										start={s.start}
 										disabled={!s.working}
diff --git a/src/settings/general-settings-view.jsx b/src/settings/general-settings-view.jsx
index 8ba2cb03..9f511342 100644
--- a/src/settings/general-settings-view.jsx
+++ b/src/settings/general-settings-view.jsx
@@ -41,7 +41,7 @@ export default function GeneralSettings({
 	const defaultApptVisibiltyOptions = useMemo(() => DefaultApptVisibiltyOptions(), []);
 
 	return (
-		<Container padding={{ all: 'small' }} mainAlignment="baseline" crossAlignment="baseline">
+		<Container padding={{ all: 'small' }} mainAlignment="flex-start" crossAlignment="baseline">
 			<Row
 				padding={{ all: 'small' }}
 				mainAlignment="space-between"
@@ -110,7 +110,7 @@ export default function GeneralSettings({
 			<Row
 				padding={{ all: 'small' }}
 				orientation="vertical"
-				mainAlignment="baseline"
+				mainAlignment="flex-start"
 				crossAlignment="baseline"
 			>
 				<Checkbox
@@ -146,7 +146,7 @@ export default function GeneralSettings({
 			<Row
 				padding={{ horizontal: 'small', top: 'small' }}
 				orientation="vertical"
-				mainAlignment="baseline"
+				mainAlignment="flex-start"
 				crossAlignment="baseline"
 			>
 				<Text size="large" weight="bold">
@@ -171,7 +171,7 @@ export default function GeneralSettings({
 					{t('settings.label.forward_invites', 'Forward Invites')}
 				</Text>
 			</Row>
-			<Row width="100%" mainAlignment="baseline" padding={{ horizontal: 'small' }}>
+			<Row width="100%" mainAlignment="flex-start" padding={{ horizontal: 'small' }}>
 				<Input
 					hasError={isEmailNotValid}
 					label={t('settings.label.enter_email', 'Enter e-mail address')}
@@ -225,7 +225,7 @@ export default function GeneralSettings({
 			</Row>
 			<Row
 				orientation="vertical"
-				mainAlignment="baseline"
+				mainAlignment="flex-start"
 				crossAlignment="baseline"
 				padding={{ all: 'small' }}
 			>
diff --git a/src/settings/permissions-settings-view.jsx b/src/settings/permissions-settings-view.jsx
index 185a8756..a4bb3a97 100644
--- a/src/settings/permissions-settings-view.jsx
+++ b/src/settings/permissions-settings-view.jsx
@@ -38,13 +38,13 @@ export default function PermisionsSettings({
 		<Container
 			padding={{ all: 'medium' }}
 			background="gray6"
-			mainAlignment="baseline"
+			mainAlignment="flex-start"
 			crossAlignment="baseline"
 		>
 			<Container
 				orientation="horizontal"
 				crossAlignment="baseline"
-				mainAlignment="baseline"
+				mainAlignment="flex-start"
 				padding={{ all: 'small' }}
 			>
 				<Row padding={{ right: 'small' }}>
@@ -189,7 +189,7 @@ export default function PermisionsSettings({
 
 			<Row
 				orientation="vertical"
-				mainAlignment="baseline"
+				mainAlignment="flex-start"
 				crossAlignment="baseline"
 				padding={{ all: 'small' }}
 			>
diff --git a/src/settings/settings-view.jsx b/src/settings/settings-view.jsx
index d73cbfab..1e11344e 100644
--- a/src/settings/settings-view.jsx
+++ b/src/settings/settings-view.jsx
@@ -407,7 +407,7 @@ export default function CalendarSettingsView() {
 			<SettingsHeader title={title} onSave={saveChanges} onCancel={onClose} isDirty={!disabled} />
 			<Container
 				orientation="vertical"
-				mainAlignment="baseline"
+				mainAlignment="flex-start"
 				crossAlignment="baseline"
 				background={'gray5'}
 				style={{ overflowY: 'auto' }}
diff --git a/src/settings/work-week-settings-view.jsx b/src/settings/work-week-settings-view.jsx
index 100489cb..6b486f30 100644
--- a/src/settings/work-week-settings-view.jsx
+++ b/src/settings/work-week-settings-view.jsx
@@ -29,7 +29,7 @@ export default function WorkWeekSettings({
 	toggleModal
 }) {
 	return (
-		<Container padding={{ all: 'medium' }} mainAlignment="baseline" crossAlignment="baseline">
+		<Container padding={{ all: 'medium' }} mainAlignment="flex-start" crossAlignment="baseline">
 			{map(workingSchedule, (s, index) => (
 				<Row key={`week_day_${index}`}>
 					<Checkbox
diff --git a/src/view/calendar/calendar-style.jsx b/src/view/calendar/calendar-style.jsx
deleted file mode 100644
index a240447e..00000000
--- a/src/view/calendar/calendar-style.jsx
+++ /dev/null
@@ -1,594 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import { createGlobalStyle } from 'styled-components';
-
-export default createGlobalStyle`
-	.rbc-addons-dnd-resizable{
-		width: 100%;
-	}
-	.rbc-addons-dnd.rbc-calendar {
-			width: 100%;
-	}
-	.rbc-calendar {
-		color: ${({ theme }) => theme.palette.text.regular};
-		font-family: ${({ theme }) => theme.fonts.default};
-		font-size: ${({ theme }) => theme.sizes.font.medium};
-		font-weight: ${({ theme }) => theme.fonts.weight.regular};
-		& * {
-			outline: none !important;
-		}
-	}
-
-	.rbc-btn {
-		color: inherit;
-		font: inherit;
-		margin: 0; }
-
-	button.rbc-btn {
-		overflow: visible;
-		text-transform: none;
-		-webkit-appearance: button;
-		cursor: pointer; }
-
-	button[disabled].rbc-btn {
-		cursor: not-allowed; }
-
-	button.rbc-input::-moz-focus-inner {
-		border: 0;
-		padding: 0; }
-
-	.rbc-calendar {
-		box-sizing: border-box;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		align-items: stretch; }
-
-	.rbc-calendar *,
-	.rbc-calendar *:before,
-	.rbc-calendar *:after {
-		box-sizing: inherit; }
-
-	.rbc-abs-full, .rbc-row-bg {
-		overflow: hidden;
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0; }
-
-	.rbc-ellipsis, .rbc-event-label, .rbc-row-segment .rbc-event-content, .rbc-show-more {
-		display: block;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap; }
-
-	.rbc-rtl {
-		direction: rtl; }
-
-	.rbc-off-range {
-		color:${({ theme }) => theme.palette.text.disabled}; }
-
-	.rbc-off-range-bg {
-		background: ${({ theme }) => theme.palette.gray5.regular}; }
-
-	.rbc-header {
-      min-width: ${({ headerMinWidth }) => headerMinWidth};
-		overflow: hidden;
-		flex: 1 0 0;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		padding: 0 0.0625rem 0 0;
-		text-align: center;
-		vertical-align: middle;
-		font-weight: bold;
-		font-size: 90%;
-		min-height: 0;
-		border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-		.rbc-header + .rbc-header {
-			border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-		.rbc-rtl .rbc-header + .rbc-header {
-			border-left-width: 0;
-			border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-		.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
-			color: inherit;
-			text-decoration: none; }
-
-	.rbc-row-content {
-		position: relative;
-		user-select: none;
-		-webkit-user-select: none;
-		z-index: 4; }
-
-	.rbc-today {
-		background-color: ${({ theme }) => theme.palette.highlight.regular};
-		color: ${({ theme }) => theme.palette.primary.regular};
-		font-weight: bold; }
-
-
-	.rbc-toolbar {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		align-items: center;
-		margin-bottom: 0.625rem;
-		font-size: 1rem;
-		padding: 0.5rem;
-		background-color: ${({ theme }) => theme.palette.gray5.regular}; }
-		.rbc-toolbar .rbc-toolbar-label {
-			flex-grow: 1;
-			padding: 0 0.625rem;
-			text-align: center; }
-		.rbc-toolbar button {
-			color: ${({ theme }) => theme.palette.primary.regular};
-			display: inline-block;
-			margin: 0;
-			text-align: center;
-			vertical-align: middle;
-			background: none;
-			border: 0.0625rem solid ${({ theme }) => theme.palette.primary.regular};
-			padding: .375rem 1rem;
-			border-radius: 0.125rem;
-			line-height: normal;
-			white-space: nowrap; }
-			.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
-				background-image: none;
-			//	box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
-				background-color: ${({ theme }) => theme.palette.highlight.regular};
-				border-color: ${({ theme }) => theme.palette.primary.active};
-			}
-			.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
-				color:${({ theme }) => theme.palette.primary.focus};
-				background-color: ${({ theme }) => theme.palette.transparent.focus};
-				border-color: ${({ theme }) => theme.palette.primary.focus};
-			}
-			.rbc-toolbar button:focus {
-				color: ${({ theme }) => theme.palette.primary.focus};
-				background-color: ${({ theme }) => theme.palette.transparent.focus};
-				border-color: ${({ theme }) => theme.palette.primary.focus};
-			}
-			.rbc-toolbar button:hover {
-				color: ${({ theme }) => theme.palette.primary.hover};
-				background-color: ${({ theme }) => theme.palette.transparent.hover};
-				border-color: ${({ theme }) => theme.palette.primary.hover};
-			}
-
-	.rbc-btn-group {
-		display: inline-block;
-		height: 2rem;
-		white-space: nowrap; }
-		.rbc-btn-group > button {
-			height: 2rem;
-			text-transform: uppercase;
-			font-size: 0.875rem; }
-		.rbc-btn-group > button:first-child:not(:last-child) {
-			border-top-right-radius: 0;
-			border-bottom-right-radius: 0; }
-		.rbc-btn-group > button:last-child:not(:first-child) {
-			border-top-left-radius: 0;
-			border-bottom-left-radius: 0; }
-		.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
-			border-radius: 0.125rem;
-			border-top-left-radius: 0;
-			border-bottom-left-radius: 0; }
-		.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
-			border-radius: 0.125rem;
-			border-top-right-radius: 0;
-			border-bottom-right-radius: 0; }
-		.rbc-btn-group > button:not(:first-child):not(:last-child) {
-			border-radius: 0; }
-		.rbc-btn-group button + button {
-			margin-left: -0.0625rem; }
-		.rbc-rtl .rbc-btn-group button + button {
-			margin-left: 0;
-			margin-right: -0.0625rem; }
-		.rbc-btn-group + .rbc-btn-group,
-		.rbc-btn-group + button {
-			margin-left: 0.625rem; }
-
-
-	.rbc-row {
-		display: flex;
-		flex-direction: row; }
-
-	.rbc-row-segment {
-		padding: 0 0.0625rem 0.0625rem 0.0625rem; }
-
-  .rbc-day-bg.rbc-selected-cell {
-    background-color: ${({ primaryCalendar, summaryViewOpen, action }) =>
-			!summaryViewOpen && !action ? primaryCalendar?.color?.background : 'inherit'} !important;
-    border: 0.0625rem solid ${({ primaryCalendar, summaryViewOpen, action }) =>
-			!summaryViewOpen && !action ? primaryCalendar?.color?.color : 'inherit'} !important;}
-
-	.rbc-show-more {
-		background-color: ${({ theme }) => theme.palette.transparent.active};
-		z-index: 4;
-		font-weight: bold;
-		font-size: 85%;
-		height: auto;
-		line-height: normal; }
-
-	.rbc-month-view {
-		position: relative;
-		border: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
-		display: flex;
-		flex-direction: column;
-		flex: 1 0 0;
-		width: 100%;
-		user-select: none;
-		-webkit-user-select: none;
-		height: 100%; }
-
-	.rbc-month-header {
-		display: flex;
-		flex-direction: row; }
-
-	.rbc-month-row {
-		display: flex;
-		position: relative;
-		flex-direction: column;
-		flex: 1 0 0;
-		flex-basis: 0;
-		overflow: hidden;
-		height: 100%; }
-		.rbc-month-row + .rbc-month-row {
-			border-top: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-
-	.rbc-date-cell {
-		flex: 1 1 0;
-		min-width: 0;
-		padding-right: 0.3125rem;
-		text-align: right; }
-		.rbc-date-cell.rbc-now {
-			font-weight: bold; }
-		.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
-			color: inherit;
-			text-decoration: none; }
-	.rbc-row-bg {
-		display: flex;
-		flex-direction: row;
-		flex: 1 0 0;
-		overflow: hidden;
-	}
-	.rbc-day-bg {
-		cursor: pointer;
-		flex: 1 0 0; }
-		.rbc-day-bg + .rbc-day-bg {
-			border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-		.rbc-rtl .rbc-day-bg + .rbc-day-bg {
-			border-left-width: 0;
-			border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-
-	.rbc-overlay {
-		position: absolute;
-		z-index: 5;
-		border: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
-		background-color: #fff;
-		box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.25);
-		padding: 0.625rem; }
-		.rbc-overlay > * + * {
-			margin-top: 0.0625rem; }
-
-	.rbc-overlay-header {
-		border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
-		margin: -0.625rem -0.625rem 0.3125rem -0.625rem;
-		padding: 0.125rem 0.625rem; }
-
-	.rbc-agenda-view {
-		display: flex;
-		flex-direction: column;
-		flex: 1 0 0;
-		overflow: auto; }
-		.rbc-agenda-view table.rbc-agenda-table {
-			width: 100%;
-			border: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
-			border-spacing: 0;
-			border-collapse: collapse; }
-			.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
-				padding: 0.3125rem 0.625rem;
-				vertical-align: top; }
-			.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
-				padding-left: 0.9375rem;
-				padding-right: 0.9375rem;
-				text-transform: lowercase; }
-			.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
-				border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-			.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
-				border-left-width: 0;
-				border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-			.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
-				border-top: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-			.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
-				padding: 0.1875rem 0.3125rem;
-				text-align: left;
-				border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-				.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
-					text-align: right; }
-
-	.rbc-agenda-time-cell {
-		text-transform: lowercase; }
-		.rbc-agenda-time-cell .rbc-continues-after:after {
-			content: ' »'; }
-		.rbc-agenda-time-cell .rbc-continues-prior:before {
-			content: '« '; }
-
-	.rbc-agenda-date-cell,
-	.rbc-agenda-time-cell {
-		white-space: nowrap; }
-
-	.rbc-agenda-event-cell {
-		width: 100%; }
-
-	.rbc-time-column {
-		display: flex;
-		flex-direction: column;
-		min-height: 100%; }
-		.rbc-time-column .rbc-timeslot-group {
-			flex: 1; }
-
-	.rbc-timeslot-group {
-		border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray6.regular};
-		min-height: 5rem;
-		display: flex;
-		flex-flow: column nowrap; }
-
-	.rbc-time-gutter,
-	.rbc-header-gutter {
-		flex: none; }
-
-	.rbc-label {
-		padding: 0 0.3125rem; }
-
-	.rbc-day-slot {
-		position: relative; }
-		.rbc-day-slot .rbc-events-container {
-			bottom: 0;
-			left: 0;
-			position: absolute;
-			right: 0;
-			margin-right: 0.625rem;
-			top: 0; }
-			.rbc-day-slot .rbc-events-container.rbc-rtl {
-				left: 0.625rem;
-				right: 0; }
-		.rbc-day-slot .rbc-event {
-			border: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
-			display: flex;
-			max-height: 100%;
-			min-height: 1.25rem;
-			flex-flow: column wrap;
-			align-items: flex-start;
-			overflow: hidden;
-			position: absolute; }
-		.rbc-day-slot .rbc-event-label {
-			flex: none;
-			padding-right: 0.3125rem;
-			width: auto; }
-		.rbc-day-slot .rbc-event-content {
-			width: 100%;
-			flex: 1 1 0;
-			word-wrap: break-word;
-			line-height: 1;
-			height: 100%;
-			min-height: 1em; }
-		.rbc-day-slot .rbc-time-slot {
-			border-top: 0.0625rem solid ${({ theme }) => theme.palette.gray5.regular}; }
-
-	.rbc-time-view-resources .rbc-time-gutter,
-	.rbc-time-view-resources .rbc-time-header-gutter {
-		position: sticky;
-		left: 0;
-		background-color: ${({ theme }) => theme.palette.gray6.regular};
-		border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
-		z-index: 10;
-		margin-right: -0.0625rem; }
-
-	.rbc-time-view-resources .rbc-time-header {
-		overflow: hidden; }
-
-	.rbc-time-view-resources .rbc-time-header-content {
-		min-width: auto;
-		flex: 1 0 0; 
-  }
-
-	.rbc-time-view-resources .rbc-time-header-cell-single-day {
-		display: none; }
-
-	.rbc-time-view-resources .rbc-day-slot {
-		min-width: 8.75rem; }
-
-	.rbc-time-view-resources .rbc-header,
-	.rbc-time-view-resources .rbc-day-bg {
-		width: 8.75rem;
-		flex: 1 1 0; }
-
-	.rbc-time-header-content + .rbc-time-header-content {
-		margin-left: -0.0625rem; }
-
-	.rbc-time-slot {
-		flex: 1 0 0; }
-		.rbc-time-slot.rbc-now {
-			font-weight: bold; }
-
-	.rbc-day-header {
-		text-align: center; }
-	.rbc-allday-cell {
-    cursor: ${({ summaryViewOpen, action }) =>
-			!summaryViewOpen && !action ? 'pointer' : 'inherit'};
-	}
-  .rbc-day-slot.rbc-time-column {
-    cursor: ${({ summaryViewOpen, action }) =>
-			!summaryViewOpen && !action ? 'pointer' : 'inherit'};
-  }
-	.rbc-slot-selection {
-		color: ${({ primaryCalendar }) => primaryCalendar?.color?.color};
-		background-color: ${({ primaryCalendar }) => primaryCalendar?.color?.background};
-		border: 0.0625rem solid ${({ primaryCalendar }) => primaryCalendar?.color?.color} !important;
-		z-index: 10;
-		position: absolute;
-		font-size: ${({ theme }) => theme.sizes.font.medium};
-		width: 100%;
-		padding: ${({ theme }) => `${theme.sizes.padding.small} ${theme.sizes.padding.extrasmall}`};
-		border-radius : 0.25rem;
-	}
-
-  .rbc-day-slot.rbc-time-column.rbc-slot-selecting {
-		cursor: ns-resize; }
-
-	.rbc-time-view {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		width: 100%;
-		border: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
-		min-height: 0; }
-		.rbc-time-view .rbc-time-gutter {
-			white-space: nowrap; }
-		.rbc-time-view .rbc-allday-cell {
-			box-sizing: content-box;
-			width: 100%;
-			height: 100%;
-			position: relative; }
-		.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
-			border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-		.rbc-time-view .rbc-allday-events {
-			position: relative;
-			z-index: 4; }
-		.rbc-time-view .rbc-row {
-			box-sizing: border-box;
-			min-height: 1.25rem; }
-  .rbc-event-label {
-      display: none;
-  }
-	.rbc-button-link {
-			border: 0;
-			cursor: pointer;
-			background-color: transparent;
-			font-weight: bold;
-	}
-	.rbc-time-header {
-		display: flex;
-		flex: 0 0 auto;
-		flex-direction: row; }
-		.rbc-time-header.rbc-overflowing {
-			border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-		.rbc-rtl .rbc-time-header.rbc-overflowing {
-			border-right-width: 0;
-			border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-		.rbc-time-header > .rbc-row:first-child {
-			border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-		.rbc-time-header > .rbc-row.rbc-row-resource {
-			border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-
-	.rbc-time-header-cell-single-day {
-		display: none; }
-
-	.rbc-time-header-content {
-		flex: 1;
-		display: flex;
-		min-width: 0;
-		flex-direction: column;
-		border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-		.rbc-rtl .rbc-time-header-content {
-			border-left-width: 0;
-			border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular}; }
-		.rbc-time-header-content > .rbc-row.rbc-row-resource {
-			border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray3.regular};
-			flex-shrink: 0; }
-
-	.rbc-time-content {
-		display: flex;
-		flex: 1 0 0;
-		align-items: flex-start;
-		width: 100%;
-		border-top: 0.125rem solid ${({ theme }) => theme.palette.gray3.regular};
-		overflow-y: auto;
-		position: relative; }
-		.rbc-time-content > .rbc-time-gutter {
-			flex: none; }
-		.rbc-time-content > * + * > * {
-			border-left: 0.0625rem solid ${({ theme }) => theme.palette.gray6.regular}; }
-		.rbc-rtl .rbc-time-content > * + * > * {
-			border-left-width: 0;
-			border-right: 0.0625rem solid ${({ theme }) => theme.palette.gray6.regular}; }
-		.rbc-time-content > .rbc-day-slot {
-			width: 100%;
-			user-select: none;
-			-webkit-user-select: none; 
-		}
-
-	.rbc-current-time-indicator {
-		position: absolute;
-		z-index: 3;
-		left: 0;
-		right: 0;
-		height: 0.125rem;
-		background-color: ${({ theme }) => theme.palette.primary.regular};
-		pointer-events: none; }
-
-  .rbc-addons-dnd .rbc-addons-dnd-row-body {
-    position: relative; }
-
-  .rbc-addons-dnd .rbc-addons-dnd-drag-row {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0; }
-
-  .rbc-addons-dnd .rbc-addons-dnd-over {
-    background-color: rgba(0, 0, 0, 0.3); }
-
-  .rbc-addons-dnd .rbc-event {
-    transition: opacity 150ms; }
-  .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ns-icon, .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ew-icon {
-    display: block; }
-
-  .rbc-addons-dnd .rbc-addons-dnd-dragged-event {
-    opacity: 0; }
-	
-  .rbc-addons-dnd.rbc-addons-dnd-is-dragging .rbc-event:not(.rbc-addons-dnd-dragged-event):not(.rbc-addons-dnd-drag-preview) {
-    opacity: .50; }
-
-  .rbc-addons-dnd .rbc-addons-dnd-resizable {
-    position: relative;
-    width: 100%;
-    height: 100%; }
-
-  .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor {
-    width: 100%;
-    text-align: center;
-    position: absolute; }
-  .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:first-child {
-    z-index: 20;
-    top: 0; }
-  .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:last-child {
-    z-index: 20;
-    bottom: 0; }
-  .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor .rbc-addons-dnd-resize-ns-icon {
-    display: none;
-    border-top: 0.1875rem double;
-    margin: 0 auto;
-    width: 0.625rem;
-    cursor: ns-resize; }
-
-  .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor {
-    position: absolute;
-    top: 0.25rem;
-    bottom: 0; }
-  .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:first-child {
-		z-index: 20;
-    left: 0; }
-  .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:last-child {
-    z-index: 20;
-    right: 0; }
-  .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor .rbc-addons-dnd-resize-ew-icon {
-    display: none;
-    border-left: 0.1875rem double;
-    margin-top: auto;
-    margin-bottom: auto;
-    height: 0.625rem;
-    cursor: ew-resize; }
-	`;
diff --git a/src/view/calendar/calendar-style.tsx b/src/view/calendar/calendar-style.tsx
new file mode 100644
index 00000000..b8197214
--- /dev/null
+++ b/src/view/calendar/calendar-style.tsx
@@ -0,0 +1,797 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { createGlobalStyle } from 'styled-components';
+
+export default createGlobalStyle<{
+	$primaryCalendar?: { color?: { background?: string; color?: string } };
+	$summaryViewOpen?: boolean;
+	$action?: unknown;
+	$headerMinWidth?: string;
+}>`
+    .rbc-addons-dnd-resizable {
+        width: 100%;
+    }
+
+    .rbc-addons-dnd.rbc-calendar {
+        width: 100%;
+    }
+
+    .rbc-calendar {
+        color: ${({ theme }): string => theme.palette.text.regular};
+        font-family: ${({ theme }): string => theme.fonts.default};
+        font-size: ${({ theme }): string => theme.sizes.font.medium};
+        font-weight: ${({ theme }): number => theme.fonts.weight.regular};
+
+        & * {
+            outline: none !important;
+        }
+    }
+
+    .rbc-btn {
+        color: inherit;
+        font: inherit;
+        margin: 0;
+    }
+
+    button.rbc-btn {
+        overflow: visible;
+        text-transform: none;
+        -webkit-appearance: button;
+        cursor: pointer;
+    }
+
+    button[disabled].rbc-btn {
+        cursor: not-allowed;
+    }
+
+    button.rbc-input::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+
+    .rbc-calendar {
+        box-sizing: border-box;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .rbc-calendar *,
+    .rbc-calendar *:before,
+    .rbc-calendar *:after {
+        box-sizing: inherit;
+    }
+
+    .rbc-abs-full, .rbc-row-bg {
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .rbc-ellipsis, .rbc-event-label, .rbc-row-segment .rbc-event-content, .rbc-show-more {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .rbc-rtl {
+        direction: rtl;
+    }
+
+    .rbc-off-range {
+        color: ${({ theme }): string => theme.palette.text.disabled};
+    }
+
+    .rbc-off-range-bg {
+        background: ${({ theme }): string => theme.palette.gray5.regular};
+    }
+
+    .rbc-header {
+        min-width: ${({ $headerMinWidth }): string | undefined => $headerMinWidth};
+        overflow: hidden;
+        flex: 1 0 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 0 0.0625rem 0 0;
+        text-align: center;
+        vertical-align: middle;
+        font-weight: bold;
+        font-size: 90%;
+        min-height: 0;
+        border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-header + .rbc-header {
+        border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-rtl .rbc-header + .rbc-header {
+        border-left-width: 0;
+        border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .rbc-row-content {
+        position: relative;
+        user-select: none;
+        -webkit-user-select: none;
+        z-index: 4;
+    }
+
+    .rbc-today {
+        background-color: ${({ theme }): string => theme.palette.highlight.regular};
+        color: ${({ theme }): string => theme.palette.primary.regular};
+        font-weight: bold;
+    }
+
+
+    .rbc-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 0.625rem;
+        font-size: 1rem;
+        padding: 0.5rem;
+        background-color: ${({ theme }): string => theme.palette.gray5.regular};
+    }
+
+    .rbc-toolbar .rbc-toolbar-label {
+        flex-grow: 1;
+        padding: 0 0.625rem;
+        text-align: center;
+    }
+
+    .rbc-toolbar button {
+        color: ${({ theme }): string => theme.palette.primary.regular};
+        display: inline-block;
+        margin: 0;
+        text-align: center;
+        vertical-align: middle;
+        background: none;
+        border: 0.0625rem solid ${({ theme }): string => theme.palette.primary.regular};
+        padding: .375rem 1rem;
+        border-radius: 0.125rem;
+        line-height: normal;
+        white-space: nowrap;
+    }
+
+    .rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
+        background-image: none;
+        //	box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125);
+        background-color: ${({ theme }): string => theme.palette.highlight.regular};
+        border-color: ${({ theme }): string => theme.palette.primary.active};
+    }
+
+    .rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
+        color: ${({ theme }): string => theme.palette.primary.focus};
+        background-color: ${({ theme }): string => theme.palette.transparent.focus};
+        border-color: ${({ theme }): string => theme.palette.primary.focus};
+    }
+
+    .rbc-toolbar button:focus {
+        color: ${({ theme }): string => theme.palette.primary.focus};
+        background-color: ${({ theme }): string => theme.palette.transparent.focus};
+        border-color: ${({ theme }): string => theme.palette.primary.focus};
+    }
+
+    .rbc-toolbar button:hover {
+        color: ${({ theme }): string => theme.palette.primary.hover};
+        background-color: ${({ theme }): string => theme.palette.transparent.hover};
+        border-color: ${({ theme }): string => theme.palette.primary.hover};
+    }
+
+    .rbc-btn-group {
+        display: inline-block;
+        height: 2rem;
+        white-space: nowrap;
+    }
+
+    .rbc-btn-group > button {
+        height: 2rem;
+        text-transform: uppercase;
+        font-size: 0.875rem;
+    }
+
+    .rbc-btn-group > button:first-child:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .rbc-btn-group > button:last-child:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
+        border-radius: 0.125rem;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
+        border-radius: 0.125rem;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .rbc-btn-group > button:not(:first-child):not(:last-child) {
+        border-radius: 0;
+    }
+
+    .rbc-btn-group button + button {
+        margin-left: -0.0625rem;
+    }
+
+    .rbc-rtl .rbc-btn-group button + button {
+        margin-left: 0;
+        margin-right: -0.0625rem;
+    }
+
+    .rbc-btn-group + .rbc-btn-group,
+    .rbc-btn-group + button {
+        margin-left: 0.625rem;
+    }
+
+
+    .rbc-row {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .rbc-row-segment {
+        padding: 0 0.0625rem 0.0625rem 0.0625rem;
+    }
+
+    .rbc-day-bg.rbc-selected-cell {
+        background-color: ${({ $primaryCalendar, $summaryViewOpen, $action }): string =>
+					!$summaryViewOpen && !$action && $primaryCalendar?.color?.background
+						? $primaryCalendar.color.background
+						: 'inherit'} !important;
+        border: ${({ $primaryCalendar, $summaryViewOpen, $action }): string =>
+					!$summaryViewOpen && !$action && $primaryCalendar?.color?.color
+						? `0.0625rem solid ${$primaryCalendar.color.color}`
+						: 'inherit'} !important;
+    }
+
+    .rbc-show-more {
+        background-color: ${({ theme }): string => theme.palette.transparent.active};
+        z-index: 4;
+        font-weight: bold;
+        font-size: 85%;
+        height: auto;
+        line-height: normal;
+    }
+
+    .rbc-month-view {
+        position: relative;
+        border: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+        display: flex;
+        flex-direction: column;
+        flex: 1 0 0;
+        width: 100%;
+        user-select: none;
+        -webkit-user-select: none;
+        height: 100%;
+    }
+
+    .rbc-month-header {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .rbc-month-row {
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        flex: 1 0 0;
+        flex-basis: 0;
+        overflow: hidden;
+        height: 100%;
+    }
+
+    .rbc-month-row + .rbc-month-row {
+        border-top: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-date-cell {
+        flex: 1 1 0;
+        min-width: 0;
+        padding-right: 0.3125rem;
+        text-align: right;
+    }
+
+    .rbc-date-cell.rbc-now {
+        font-weight: bold;
+    }
+
+    .rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .rbc-row-bg {
+        display: flex;
+        flex-direction: row;
+        flex: 1 0 0;
+        overflow: hidden;
+    }
+
+    .rbc-day-bg {
+        cursor: pointer;
+        flex: 1 0 0;
+    }
+
+    .rbc-day-bg + .rbc-day-bg {
+        border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-rtl .rbc-day-bg + .rbc-day-bg {
+        border-left-width: 0;
+        border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-overlay {
+        position: absolute;
+        z-index: 5;
+        border: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+        background-color: #fff;
+        box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.25);
+        padding: 0.625rem;
+    }
+
+    .rbc-overlay > * + * {
+        margin-top: 0.0625rem;
+    }
+
+    .rbc-overlay-header {
+        border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+        margin: -0.625rem -0.625rem 0.3125rem -0.625rem;
+        padding: 0.125rem 0.625rem;
+    }
+
+    .rbc-agenda-view {
+        display: flex;
+        flex-direction: column;
+        flex: 1 0 0;
+        overflow: auto;
+    }
+
+    .rbc-agenda-view table.rbc-agenda-table {
+        width: 100%;
+        border: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+        border-spacing: 0;
+        border-collapse: collapse;
+    }
+
+    .rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
+        padding: 0.3125rem 0.625rem;
+        vertical-align: top;
+    }
+
+    .rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
+        padding-left: 0.9375rem;
+        padding-right: 0.9375rem;
+        text-transform: lowercase;
+    }
+
+    .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
+        border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
+        border-left-width: 0;
+        border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
+        border-top: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
+        padding: 0.1875rem 0.3125rem;
+        text-align: left;
+        border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
+        text-align: right;
+    }
+
+    .rbc-agenda-time-cell {
+        text-transform: lowercase;
+    }
+
+    .rbc-agenda-time-cell .rbc-continues-after:after {
+        content: ' »';
+    }
+
+    .rbc-agenda-time-cell .rbc-continues-prior:before {
+        content: '« ';
+    }
+
+    .rbc-agenda-date-cell,
+    .rbc-agenda-time-cell {
+        white-space: nowrap;
+    }
+
+    .rbc-agenda-event-cell {
+        width: 100%;
+    }
+
+    .rbc-time-column {
+        display: flex;
+        flex-direction: column;
+        min-height: 100%;
+    }
+
+    .rbc-time-column .rbc-timeslot-group {
+        flex: 1;
+    }
+
+    .rbc-timeslot-group {
+        border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray6.regular};
+        min-height: 5rem;
+        display: flex;
+        flex-flow: column nowrap;
+    }
+
+    .rbc-time-gutter,
+    .rbc-header-gutter {
+        flex: none;
+    }
+
+    .rbc-label {
+        padding: 0 0.3125rem;
+    }
+
+    .rbc-day-slot {
+        position: relative;
+    }
+
+    .rbc-day-slot .rbc-events-container {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        margin-right: 0.625rem;
+        top: 0;
+    }
+
+    .rbc-day-slot .rbc-events-container.rbc-rtl {
+        left: 0.625rem;
+        right: 0;
+    }
+
+    .rbc-day-slot .rbc-event {
+        border: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+        display: flex;
+        max-height: 100%;
+        min-height: 1.25rem;
+        flex-flow: column wrap;
+        align-items: flex-start;
+        overflow: hidden;
+        position: absolute;
+    }
+
+    .rbc-day-slot .rbc-event-label {
+        flex: none;
+        padding-right: 0.3125rem;
+        width: auto;
+    }
+
+    .rbc-day-slot .rbc-event-content {
+        width: 100%;
+        flex: 1 1 0;
+        word-wrap: break-word;
+        line-height: 1;
+        height: 100%;
+        min-height: 1em;
+    }
+
+    .rbc-day-slot .rbc-time-slot {
+        border-top: 0.0625rem solid ${({ theme }): string => theme.palette.gray5.regular};
+    }
+
+    .rbc-time-view-resources .rbc-time-gutter,
+    .rbc-time-view-resources .rbc-time-header-gutter {
+        position: sticky;
+        left: 0;
+        background-color: ${({ theme }): string => theme.palette.gray6.regular};
+        border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+        z-index: 10;
+        margin-right: -0.0625rem;
+    }
+
+    .rbc-time-view-resources .rbc-time-header {
+        overflow: hidden;
+    }
+
+    .rbc-time-view-resources .rbc-time-header-content {
+        min-width: auto;
+        flex: 1 0 0;
+    }
+
+    .rbc-time-view-resources .rbc-time-header-cell-single-day {
+        display: none;
+    }
+
+    .rbc-time-view-resources .rbc-day-slot {
+        min-width: 8.75rem;
+    }
+
+    .rbc-time-view-resources .rbc-header,
+    .rbc-time-view-resources .rbc-day-bg {
+        width: 8.75rem;
+        flex: 1 1 0;
+    }
+
+    .rbc-time-header-content + .rbc-time-header-content {
+        margin-left: -0.0625rem;
+    }
+
+    .rbc-time-slot {
+        flex: 1 0 0;
+    }
+
+    .rbc-time-slot.rbc-now {
+        font-weight: bold;
+    }
+
+    .rbc-day-header {
+        text-align: center;
+    }
+
+    .rbc-allday-cell {
+        cursor: ${({ $summaryViewOpen, $action }): string =>
+					!$summaryViewOpen && !$action ? 'pointer' : 'inherit'};
+    }
+
+    .rbc-day-slot.rbc-time-column {
+        cursor: ${({ $summaryViewOpen, $action }): string =>
+					!$summaryViewOpen && !$action ? 'pointer' : 'inherit'};
+    }
+
+    .rbc-slot-selection {
+        color: ${({ $primaryCalendar }): string | undefined => $primaryCalendar?.color?.color};
+        background-color: ${({ $primaryCalendar }): string | undefined => $primaryCalendar?.color?.background};
+        border: 0.0625rem solid ${({ $primaryCalendar }): string | undefined => $primaryCalendar?.color?.color} !important;
+        z-index: 10;
+        position: absolute;
+        font-size: ${({ theme }): string => theme.sizes.font.medium};
+        width: 100%;
+        padding: ${({ theme }): string => `${theme.sizes.padding.small} ${theme.sizes.padding.extrasmall}`};
+        border-radius: 0.25rem;
+    }
+
+    .rbc-day-slot.rbc-time-column.rbc-slot-selecting {
+        cursor: ns-resize;
+    }
+
+    .rbc-time-view {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        width: 100%;
+        border: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+        min-height: 0;
+    }
+
+    .rbc-time-view .rbc-time-gutter {
+        white-space: nowrap;
+    }
+
+    .rbc-time-view .rbc-allday-cell {
+        box-sizing: content-box;
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+
+    .rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
+        border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-time-view .rbc-allday-events {
+        position: relative;
+        z-index: 4;
+    }
+
+    .rbc-time-view .rbc-row {
+        box-sizing: border-box;
+        min-height: 1.25rem;
+    }
+
+    .rbc-event-label {
+        display: none;
+    }
+
+    .rbc-button-link {
+        border: 0;
+        cursor: pointer;
+        background-color: transparent;
+        font-weight: bold;
+    }
+
+    .rbc-time-header {
+        display: flex;
+        flex: 0 0 auto;
+        flex-direction: row;
+    }
+
+    .rbc-time-header.rbc-overflowing {
+        border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-rtl .rbc-time-header.rbc-overflowing {
+        border-right-width: 0;
+        border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-time-header > .rbc-row:first-child {
+        border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-time-header > .rbc-row.rbc-row-resource {
+        border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-time-header-cell-single-day {
+        display: none;
+    }
+
+    .rbc-time-header-content {
+        flex: 1;
+        display: flex;
+        min-width: 0;
+        flex-direction: column;
+        border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-rtl .rbc-time-header-content {
+        border-left-width: 0;
+        border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+    }
+
+    .rbc-time-header-content > .rbc-row.rbc-row-resource {
+        border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular};
+        flex-shrink: 0;
+    }
+
+    .rbc-time-content {
+        display: flex;
+        flex: 1 0 0;
+        align-items: flex-start;
+        width: 100%;
+        border-top: 0.125rem solid ${({ theme }): string => theme.palette.gray3.regular};
+        overflow-y: auto;
+        position: relative;
+    }
+
+    .rbc-time-content > .rbc-time-gutter {
+        flex: none;
+    }
+
+    .rbc-time-content > * + * > * {
+        border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray6.regular};
+    }
+
+    .rbc-rtl .rbc-time-content > * + * > * {
+        border-left-width: 0;
+        border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray6.regular};
+    }
+
+    .rbc-time-content > .rbc-day-slot {
+        width: 100%;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    .rbc-current-time-indicator {
+        position: absolute;
+        z-index: 3;
+        left: 0;
+        right: 0;
+        height: 0.125rem;
+        background-color: ${({ theme }): string => theme.palette.primary.regular};
+        pointer-events: none;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-row-body {
+        position: relative;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-drag-row {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-over {
+        background-color: rgba(0, 0, 0, 0.3);
+    }
+
+    .rbc-addons-dnd .rbc-event {
+        transition: opacity 150ms;
+    }
+
+    .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ns-icon, .rbc-addons-dnd .rbc-event:hover .rbc-addons-dnd-resize-ew-icon {
+        display: block;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-dragged-event {
+        opacity: 0;
+    }
+
+    .rbc-addons-dnd.rbc-addons-dnd-is-dragging .rbc-event:not(.rbc-addons-dnd-dragged-event):not(.rbc-addons-dnd-drag-preview) {
+        opacity: .50;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-resizable {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor {
+        width: 100%;
+        text-align: center;
+        position: absolute;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:first-child {
+        z-index: 20;
+        top: 0;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor:last-child {
+        z-index: 20;
+        bottom: 0;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-resize-ns-anchor .rbc-addons-dnd-resize-ns-icon {
+        display: none;
+        border-top: 0.1875rem double;
+        margin: 0 auto;
+        width: 0.625rem;
+        cursor: ns-resize;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor {
+        position: absolute;
+        top: 0.25rem;
+        bottom: 0;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:first-child {
+        z-index: 20;
+        left: 0;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor:last-child {
+        z-index: 20;
+        right: 0;
+    }
+
+    .rbc-addons-dnd .rbc-addons-dnd-resize-ew-anchor .rbc-addons-dnd-resize-ew-icon {
+        display: none;
+        border-left: 0.1875rem double;
+        margin-top: auto;
+        margin-bottom: auto;
+        height: 0.625rem;
+        cursor: ew-resize;
+    }
+`;
diff --git a/src/view/calendar/custom-event.tsx b/src/view/calendar/custom-event.tsx
index ff548555..cb6ca1cd 100644
--- a/src/view/calendar/custom-event.tsx
+++ b/src/view/calendar/custom-event.tsx
@@ -212,7 +212,7 @@ const CustomEvent = ({ event, title }: CustomEventProps): ReactElement => {
 				>
 					<Dropdown
 						contextMenu
-						width="cal(min(100%,12.5rem))"
+						width="min(100%,12.5rem)"
 						style={{ width: '100%', height: '100%' }}
 						items={actions ?? []}
 						display="block"
diff --git a/src/view/editor/parts/editor-attachments-button.tsx b/src/view/editor/parts/editor-attachments-button.tsx
index 280f5c65..eccce01e 100644
--- a/src/view/editor/parts/editor-attachments-button.tsx
+++ b/src/view/editor/parts/editor-attachments-button.tsx
@@ -170,7 +170,12 @@ export const EditorAttachmentsButton = ({ editorId }: EditorProps): ReactElement
 	return (
 		<>
 			<Tooltip label={t('tooltip.add_attachments', 'Add attachments')}>
-				<Dropdown items={attachmentsItems} display="inline-block" width="fit" forceOpen={openDD}>
+				<Dropdown
+					items={attachmentsItems}
+					display="inline-block"
+					width="fit-content"
+					forceOpen={openDD}
+				>
 					<ResizedIconCheckbox
 						onChange={(): null => null}
 						icon="AttachOutline"
diff --git a/src/view/editor/parts/editor-attendees.tsx b/src/view/editor/parts/editor-attendees.tsx
index f564bca6..726989a9 100644
--- a/src/view/editor/parts/editor-attendees.tsx
+++ b/src/view/editor/parts/editor-attendees.tsx
@@ -165,7 +165,7 @@ export const EditorAttendees = ({ editorId }: EditorAttendeesProps): ReactElemen
 					orientation="horizontal"
 					background={'gray5'}
 					style={{ overflow: 'hidden' }}
-					padding={{ all: 'none' }}
+					padding={{ all: 0 }}
 				>
 					<Container background={'gray5'} style={{ overflow: 'hidden' }}>
 						{integrationAvailable ? (
diff --git a/src/view/editor/parts/editor-styled-components.tsx b/src/view/editor/parts/editor-styled-components.tsx
index e3bb2807..ae91c3ec 100644
--- a/src/view/editor/parts/editor-styled-components.tsx
+++ b/src/view/editor/parts/editor-styled-components.tsx
@@ -7,19 +7,13 @@ import { IconCheckbox } from '@zextras/carbonio-design-system';
 import styled from 'styled-components';
 
 export const ResizedIconCheckbox = styled(IconCheckbox)`
-	[class^='Padding__Comp'] {
-		padding: 0.375rem;
-		svg {
-			height: 1.25rem;
-			width: 1.25rem;
-			fill: ${({ disabled, theme, value }): string => {
-				if (disabled) {
-					return theme.palette.secondary.disabled;
-				}
-				return value ? theme.palette.gray6.regular : theme.palette.currentColor.regular;
-			}}
-		background: ${({ value, theme }): string =>
-			value ? theme.palette.primary.regular : theme.palette.currentColor.regular};
-		border-radius: 50%;
-	}
+  [class^='Padding__Comp'] {
+    padding: 0.375rem;
+
+    svg {
+      height: 1.25rem;
+      width: 1.25rem;
+      
+      border-radius: 50%;
+    }
 `;
diff --git a/src/view/editor/parts/recurrence/components/month-select.tsx b/src/view/editor/parts/recurrence/components/month-select.tsx
index c9c2805a..f5ce2683 100644
--- a/src/view/editor/parts/recurrence/components/month-select.tsx
+++ b/src/view/editor/parts/recurrence/components/month-select.tsx
@@ -49,7 +49,7 @@ export const MonthSelect = ({
 			label={t('label.month', 'Month')}
 			onChange={onMonthChange}
 			disablePortal
-			width="fit"
+			width="fit-content"
 			disabled={disabled}
 			selection={value}
 			data-testid={testId}
diff --git a/src/view/editor/parts/recurrence/components/ordinal-number-select.tsx b/src/view/editor/parts/recurrence/components/ordinal-number-select.tsx
index 7d339374..83aad72a 100644
--- a/src/view/editor/parts/recurrence/components/ordinal-number-select.tsx
+++ b/src/view/editor/parts/recurrence/components/ordinal-number-select.tsx
@@ -48,7 +48,7 @@ export const OrdinalNumberSelect = ({
 			label={t('label.number', 'Number')}
 			onChange={onBySetPosChange}
 			disablePortal
-			width="fit"
+			width="fit-content"
 			disabled={disabled}
 			selection={value}
 		/>
diff --git a/src/view/editor/parts/recurrence/components/weekday-select.tsx b/src/view/editor/parts/recurrence/components/weekday-select.tsx
index 4997a671..903caadb 100644
--- a/src/view/editor/parts/recurrence/components/weekday-select.tsx
+++ b/src/view/editor/parts/recurrence/components/weekday-select.tsx
@@ -65,7 +65,7 @@ const WeekdaySelect = ({
 			label={t('label.day', 'Day')}
 			onChange={onByDayChange}
 			disablePortal
-			width="fit"
+			width="fit-content"
 			disabled={disabled}
 			selection={daySelection}
 		/>
diff --git a/src/view/event-panel-view/attachment.tsx b/src/view/event-panel-view/attachment.tsx
index 49a9b5c6..2a55c569 100644
--- a/src/view/event-panel-view/attachment.tsx
+++ b/src/view/event-panel-view/attachment.tsx
@@ -52,7 +52,7 @@ const AttachmentContainer = styled(Container)<{ $disabled: boolean }>`
 	box-sizing: border-box;
 	&:hover {
 		background-color: ${({ theme, background = 'transparent', $disabled }): string =>
-			$disabled ? 'gray5' : getColor(`${background}.hover`, theme)};
+			$disabled ? theme.palette.gray5.regular : getColor(`${background}.hover`, theme)};
 		& ${AttachmentHoverBarContainer} {
 			display: flex;
 		}
diff --git a/src/view/event-panel-view/event-panel-view.tsx b/src/view/event-panel-view/event-panel-view.tsx
index 9f1c256f..4f14e556 100644
--- a/src/view/event-panel-view/event-panel-view.tsx
+++ b/src/view/event-panel-view/event-panel-view.tsx
@@ -270,7 +270,7 @@ export default function EventPanelView(): ReactElement | null {
 		<AppointmentCardContainer mainAlignment="flex-start">
 			<DisplayerHeader event={event} panelView={PANEL_VIEW.APP} />
 			<Container
-				padding={{ all: 'none' }}
+				padding={{ all: 0 }}
 				mainAlignment="flex-start"
 				height="calc(100% - 3rem)"
 				style={{ overflow: 'auto' }}
diff --git a/src/view/event-panel-view/trash-row-part.tsx b/src/view/event-panel-view/trash-row-part.tsx
index ec1f2ab3..68897d90 100644
--- a/src/view/event-panel-view/trash-row-part.tsx
+++ b/src/view/event-panel-view/trash-row-part.tsx
@@ -62,7 +62,7 @@ export const TrashRow = ({ event }: { event: EventType }): ReactElement => {
 				<Row
 					width="5%"
 					orientation="horizontal"
-					mainAlignment="baseline"
+					mainAlignment="flex-start"
 					padding={{ horizontal: 'large' }}
 				>
 					<Icon icon="Pricetags" color={event.resource.calendar.color.color} />
diff --git a/src/view/modals/delete-event-modal.tsx b/src/view/modals/delete-event-modal.tsx
index 9686fbd9..102fb95e 100644
--- a/src/view/modals/delete-event-modal.tsx
+++ b/src/view/modals/delete-event-modal.tsx
@@ -77,7 +77,7 @@ const DeleteEventModalContent = ({
 			<ModalHeader title={title} onClose={onClose} />
 			<Container
 				padding={{ vertical: 'medium' }}
-				mainAlignment="baseline"
+				mainAlignment="flex-start"
 				crossAlignment="baseline"
 			>
 				<Text overflow="break-word">{displayMessage}</Text>
diff --git a/src/view/modals/modify-standard-message-modal.tsx b/src/view/modals/modify-standard-message-modal.tsx
index 215ba474..b1f37fd2 100644
--- a/src/view/modals/modify-standard-message-modal.tsx
+++ b/src/view/modals/modify-standard-message-modal.tsx
@@ -72,7 +72,7 @@ export const ModifyStandardMessageModal = ({
 			<ModalHeader title={title} onClose={onClose} />
 			<Container
 				padding={{ vertical: 'medium' }}
-				mainAlignment="baseline"
+				mainAlignment="flex-start"
 				crossAlignment="baseline"
 			>
 				<Text overflow="break-word">{bodyText}</Text>
diff --git a/src/view/search/displayer.tsx b/src/view/search/displayer.tsx
index 6c3c19c0..96940bea 100644
--- a/src/view/search/displayer.tsx
+++ b/src/view/search/displayer.tsx
@@ -36,7 +36,7 @@ const Displayer = ({ event }: ComponentProps<any>): ReactComponentElement<any> |
 			padding={{ bottom: 'medium' }}
 		>
 			{event && (
-				<Container padding={{ all: 'none' }} mainAlignment="flex-start">
+				<Container padding={{ all: 0 }} mainAlignment="flex-start">
 					<DisplayerHeader event={event} panelView={PANEL_VIEW.SEARCH} />
 					<BodyContainer
 						mainAlignment="flex-start"
diff --git a/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx b/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx
index ca761209..bd63d038 100644
--- a/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx
+++ b/src/view/sidebar/edit-modal/parts/main-edit-modal.tsx
@@ -349,7 +349,7 @@ export const MainEditModal: FC<MainEditModalProps> = ({ folder, totalAppointment
 						<Tooltip
 							label={t('cannot_edit_name', 'You cannot edit the name of a system calendar')}
 							placement="top"
-							maxWidth="fit"
+							maxWidth="fit-content"
 						>
 							<Input
 								label={placeholder}
diff --git a/src/view/tags/use-get-tags-accordions.tsx b/src/view/tags/use-get-tags-accordions.tsx
index a23f7af4..e699ebc5 100644
--- a/src/view/tags/use-get-tags-accordions.tsx
+++ b/src/view/tags/use-get-tags-accordions.tsx
@@ -47,7 +47,13 @@ const CustomComp: FC<ItemProps> = (props) => {
 	);
 
 	return (
-		<Dropdown contextMenu items={actions} display="block" width="fit" onClick={triggerSearch}>
+		<Dropdown
+			contextMenu
+			items={actions}
+			display="block"
+			width="fit-content"
+			onClick={triggerSearch}
+		>
 			<Row mainAlignment="flex-start" height="fit" padding={{ left: 'large' }} takeAvailableSpace>
 				<Icon size="large" icon="Tag" color={ZIMBRA_STANDARD_COLORS[props?.item?.color ?? 0].hex} />
 

From 65f2563a5fdcd9fc13a76004bbc4fc03c5ee5605 Mon Sep 17 00:00:00 2001
From: Beatrice Guerra <beatrice.guerra@zextras.com>
Date: Wed, 13 Nov 2024 11:17:26 +0100
Subject: [PATCH 04/11] chore: revert changes on .idea files

---
 .idea/zapp-calendar.iml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.idea/zapp-calendar.iml b/.idea/zapp-calendar.iml
index ce15b05e..060e6cab 100644
--- a/.idea/zapp-calendar.iml
+++ b/.idea/zapp-calendar.iml
@@ -5,9 +5,10 @@
       <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/build" />
       <excludeFolder url="file://$MODULE_DIR$/pkg" />
-      <excludeFolder url="file://$MODULE_DIR$/coverage" />
-      <excludeFolder url="file://$MODULE_DIR$/dist" />
     </content>
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
+  <component name="SonarLintModuleSettings">
+    <option name="uniqueId" value="d48ba62e-61b0-4149-bc49-be0c7c76248b" />
+  </component>
 </module>
\ No newline at end of file

From d8a1a535c8f3575709edffba27cd493dd196ce83 Mon Sep 17 00:00:00 2001
From: Beatrice Guerra <beatrice.guerra@zextras.com>
Date: Wed, 13 Nov 2024 11:28:14 +0100
Subject: [PATCH 05/11] refactor: cleanup unwanted changes

---
 src/view/sidebar/share-calendar-modal.tsx | 2 +-
 tsconfig.json                             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/view/sidebar/share-calendar-modal.tsx b/src/view/sidebar/share-calendar-modal.tsx
index c782cd23..013630a6 100644
--- a/src/view/sidebar/share-calendar-modal.tsx
+++ b/src/view/sidebar/share-calendar-modal.tsx
@@ -396,7 +396,7 @@ export const ShareCalendarModal: FC<ShareCalendarModalProps> = ({
 				crossAlignment="flex-start"
 				height="fit"
 			>
-				<Select<'usr' | 'pub'>
+				<Select
 					items={shareCalendarWithOptions}
 					background={'gray5'}
 					label={t('label.share_with', 'Share with')}
diff --git a/tsconfig.json b/tsconfig.json
index dc8a39ff..26a0ff1c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,5 +12,5 @@
 		"jest-setup.ts",
 		"src/view/sidebar/custom-components/folders-component.tsx"
 	],
-	"exclude": ["./node_modules/*", "./dist/*"],
+	"exclude": ["./node_modules/*", "./dist/*"]
 }

From 723ea1d7177f43e94327d2c3b5a98c58f387519e Mon Sep 17 00:00:00 2001
From: Beatrice Guerra <beatrice.guerra@zextras.com>
Date: Thu, 21 Nov 2024 18:16:15 +0100
Subject: [PATCH 06/11] chore: update submodule

---
 src/carbonio-ui-commons | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/carbonio-ui-commons b/src/carbonio-ui-commons
index 555f1d20..582291d8 160000
--- a/src/carbonio-ui-commons
+++ b/src/carbonio-ui-commons
@@ -1 +1 @@
-Subproject commit 555f1d204501399df896bcaf2b9e6e0855b37906
+Subproject commit 582291d8585e1762fe15a77e2dca7a623039057f

From 97a4917b5c6d7f34c6adbf434144dc2c54816a19 Mon Sep 17 00:00:00 2001
From: Beatrice Guerra <beatrice.guerra@zextras.com>
Date: Fri, 22 Nov 2024 09:43:08 +0100
Subject: [PATCH 07/11] refactor: update types and custom props

Refs: CO-1609
---
 package-lock.json                             | 111 ++++++++++++------
 .../multiple-calendar-selector.tsx            |   4 +-
 .../sidebar/group-calendars-list-item.tsx     |   2 +-
 3 files changed, 80 insertions(+), 37 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 89a5dac3..767bab2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "carbonio-calendars-ui",
-	"version": "1.12.0",
+	"version": "1.13.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "carbonio-calendars-ui",
-			"version": "1.12.0",
+			"version": "1.13.1",
 			"license": "AGPL-3.0-only",
 			"dependencies": {
 				"@emotion/react": "^11.11.4",
@@ -17,7 +17,7 @@
 				"@types/webpack": "^5.28.2",
 				"@types/webpack-env": "^1.18.1",
 				"@zextras/carbonio-design-system": "9.0.0-devel.6",
-				"@zextras/carbonio-shell-ui": "devel",
+				"@zextras/carbonio-shell-ui": "9.0.0",
 				"@zextras/carbonio-ui-preview": "^3.1.0-devel.2",
 				"core-js": "^3.36.1",
 				"date-arithmetic": "^4.1.0",
@@ -63,7 +63,7 @@
 				"@types/react-widgets-moment": "^4.0.3",
 				"@types/styled-components": "^5.1.34",
 				"@zextras/carbonio-ui-configs": "^1.0.0",
-				"@zextras/carbonio-ui-sdk": "^1.7.7",
+				"@zextras/carbonio-ui-sdk": "^1.7.10",
 				"babel-plugin-styled-components": "^2.1.4",
 				"babel-plugin-transform-import-meta": "^2.2.1",
 				"eslint-plugin-jest-dom": "^4.0.3",
@@ -2416,7 +2416,8 @@
 		"node_modules/@emotion/stylis": {
 			"version": "0.8.5",
 			"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-			"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+			"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
+			"license": "MIT"
 		},
 		"node_modules/@emotion/unitless": {
 			"version": "0.10.0",
@@ -3933,6 +3934,15 @@
 				}
 			}
 		},
+		"node_modules/@remix-run/router": {
+			"version": "1.21.0",
+			"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
+			"integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
 		"node_modules/@restart/hooks": {
 			"version": "0.4.16",
 			"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
@@ -4769,6 +4779,7 @@
 			"resolved": "https://registry.npmjs.org/@types/react-widgets-moment/-/react-widgets-moment-4.0.3.tgz",
 			"integrity": "sha512-w6URZ/7x26te8AeemS4mRSfgx8r0rO09/qtByDoqFa8nL1C/zRW6sdIRWR/M1N6atHJIY0xvTFPi2LVVC2eBmw==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"moment": "^2.18.1"
 			}
@@ -5342,15 +5353,16 @@
 			}
 		},
 		"node_modules/@zextras/carbonio-shell-ui": {
-			"version": "8.0.3-devel.1729235939785",
-			"resolved": "https://registry.npmjs.org/@zextras/carbonio-shell-ui/-/carbonio-shell-ui-8.0.3-devel.1729235939785.tgz",
-			"integrity": "sha512-ZNd/RRF+A7hOxiu4tSmzrr/EN3kpbWJMGdjYPN8jdPxSkb7NHbVC7JYsK1vvs6ULcbCs4H5E8Qt/82IHkDpfjA==",
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/@zextras/carbonio-shell-ui/-/carbonio-shell-ui-9.0.0.tgz",
+			"integrity": "sha512-GL3t4n0H19zMmN5idDRyfwbBJPjSYf13TxR16PLx6gi+lli0ME98HoZ/xsZX1v8U1HZ0z2wDs6Q/ZDEkgpoK3g==",
+			"license": "AGPL-3.0-only",
 			"dependencies": {
 				"@fontsource/roboto": "^5.0.8",
 				"@sentry/browser": "^7.103.0",
 				"@tinymce/tinymce-react": "^4.3.2",
-				"@zextras/carbonio-design-system": "^8.0.0",
-				"@zextras/carbonio-ui-preview": "^3.0.0",
+				"@zextras/carbonio-design-system": "^8.1.0",
+				"@zextras/carbonio-ui-preview": "^3.1.0",
 				"darkreader": "^4.9.79",
 				"history": "^5.3.0",
 				"i18next": "^22.5.1",
@@ -5362,6 +5374,7 @@
 				"react-dom": "^18.3.1",
 				"react-i18next": "^12.3.1",
 				"react-router-dom": "^5.3.4",
+				"react-router-dom-v5-compat": "^6.28.0",
 				"styled-components": "^5.3.11",
 				"tinymce": "^6.8.4",
 				"ua-parser-js": "^1.0.37",
@@ -5372,8 +5385,8 @@
 				"npm": "v10"
 			},
 			"peerDependencies": {
-				"@zextras/carbonio-design-system": "^8.0.0",
-				"@zextras/carbonio-ui-preview": "^3.0.0",
+				"@zextras/carbonio-design-system": "^8.1.0",
+				"@zextras/carbonio-ui-preview": "^3.1.0",
 				"core-js": "^3.31.1",
 				"lodash": "^4.17.21",
 				"react": "^18.3.1",
@@ -5412,12 +5425,14 @@
 		"node_modules/@zextras/carbonio-shell-ui/node_modules/@emotion/unitless": {
 			"version": "0.7.5",
 			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-			"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+			"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+			"license": "MIT"
 		},
 		"node_modules/@zextras/carbonio-shell-ui/node_modules/@zextras/carbonio-design-system": {
 			"version": "8.1.0",
 			"resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-8.1.0.tgz",
 			"integrity": "sha512-PxiPPetc3YCKr7NsxiM83TWZhthdCsUkg6r3Njc5zOQVIE0SAMbv4fjDcPMTtDnqx8TV9e0EVZtGA0TZADmnaQ==",
+			"license": "AGPL-3.0-only",
 			"dependencies": {
 				"@floating-ui/dom": "^1.5.3",
 				"core-js": "^3.38.1",
@@ -5432,24 +5447,11 @@
 				"styled-components": "^5.3.11"
 			}
 		},
-		"node_modules/@zextras/carbonio-shell-ui/node_modules/@zextras/carbonio-ui-preview": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-3.0.0.tgz",
-			"integrity": "sha512-MJM8VVCJ4AYgmWrXHWhLdZPZakdJANF/V6Va7Wy/YRyPsaXXqGlrs27VB3kFLQGp72sGhS0AEqr6LMWnHJQajA==",
-			"dependencies": {
-				"core-js": "^3.37.1",
-				"react-pdf": "^9.1.0"
-			},
-			"peerDependencies": {
-				"@zextras/carbonio-design-system": "^8.0.0",
-				"react": "^18.0.0",
-				"react-dom": "^18.0.0"
-			}
-		},
 		"node_modules/@zextras/carbonio-shell-ui/node_modules/date-fns": {
 			"version": "2.30.0",
 			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
 			"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.21.0"
 			},
@@ -5474,6 +5476,7 @@
 			"version": "4.25.0",
 			"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz",
 			"integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==",
+			"license": "MIT",
 			"dependencies": {
 				"@popperjs/core": "^2.11.8",
 				"classnames": "^2.2.6",
@@ -5491,6 +5494,7 @@
 			"version": "5.3.11",
 			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
 			"integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+			"license": "MIT",
 			"dependencies": {
 				"@babel/helper-module-imports": "^7.0.0",
 				"@babel/traverse": "^7.4.5",
@@ -5853,9 +5857,10 @@
 			}
 		},
 		"node_modules/@zextras/carbonio-ui-preview": {
-			"version": "3.1.0-devel.2",
-			"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-3.1.0-devel.2.tgz",
-			"integrity": "sha512-z6Zb/ZlV2U0+CuAmRFR6ZoDwiAUvzFGMQYaR9RmZw0gtZ9JfY1OX/J9f9b49aJpteEXdZyuLClv0/9X7erBjKQ==",
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-3.1.0.tgz",
+			"integrity": "sha512-d1pjXDRXRo/9F98s2KUACqxT5k0M0DV6wuxXjqxs/uwAhxUkgQUNKckaa5zMzQycN9Q8cy8ERlmGvRXQnbL4Ww==",
+			"license": "AGPL-3.0-only",
 			"dependencies": {
 				"core-js": "^3.37.1",
 				"react-pdf": "^9.1.0"
@@ -5867,10 +5872,11 @@
 			}
 		},
 		"node_modules/@zextras/carbonio-ui-sdk": {
-			"version": "1.7.7",
-			"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-sdk/-/carbonio-ui-sdk-1.7.7.tgz",
-			"integrity": "sha512-FeLGgFoWfK8siBa5lfUIXxDEpnFEiuouR6wai6tgoW+7WaZF+j36G316S/PSGXZ+g53QdajGFymDhHubMq1d8A==",
+			"version": "1.7.10",
+			"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-sdk/-/carbonio-ui-sdk-1.7.10.tgz",
+			"integrity": "sha512-qP+R5pC+7lRGjuF/o+yktzZ7iqlJQrz3ZFY+s3g4sQqFbdpGyL8e8jYPOaQNUffiiIsrRz6JhadKm5kCH0m7Jg==",
 			"dev": true,
+			"license": "AGPL-3.0-only",
 			"dependencies": {
 				"babel-loader": "^9.1.0",
 				"chalk": "^4.1.2",
@@ -16707,7 +16713,8 @@
 		"node_modules/react-fast-compare": {
 			"version": "3.2.2",
 			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
-			"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+			"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+			"license": "MIT"
 		},
 		"node_modules/react-i18next": {
 			"version": "12.3.1",
@@ -16744,6 +16751,7 @@
 			"version": "6.13.1",
 			"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
 			"integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
+			"license": "MIT",
 			"funding": {
 				"type": "individual",
 				"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
@@ -16804,6 +16812,7 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
 			"integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+			"license": "MIT",
 			"dependencies": {
 				"react-fast-compare": "^3.0.1",
 				"warning": "^4.0.2"
@@ -16888,6 +16897,40 @@
 				"react": ">=15"
 			}
 		},
+		"node_modules/react-router-dom-v5-compat": {
+			"version": "6.28.0",
+			"resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.28.0.tgz",
+			"integrity": "sha512-KrTxsn2vibvoTeGstcBMEuchuT+BxXGftfa7njf1vNSlzO8t+4Y5oN2h3WeAq2rK7MyA5mFUXrE/+lMOR0ay9Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@remix-run/router": "1.21.0",
+				"history": "^5.3.0",
+				"react-router": "6.28.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.8",
+				"react-dom": ">=16.8",
+				"react-router-dom": "4 || 5"
+			}
+		},
+		"node_modules/react-router-dom-v5-compat/node_modules/react-router": {
+			"version": "6.28.0",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
+			"integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
+			"license": "MIT",
+			"dependencies": {
+				"@remix-run/router": "1.21.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.8"
+			}
+		},
 		"node_modules/react-router-dom/node_modules/history": {
 			"version": "4.10.1",
 			"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
diff --git a/src/view/sidebar/custom-components/multiple-calendar-selector.tsx b/src/view/sidebar/custom-components/multiple-calendar-selector.tsx
index 822491c6..2b1a91b8 100644
--- a/src/view/sidebar/custom-components/multiple-calendar-selector.tsx
+++ b/src/view/sidebar/custom-components/multiple-calendar-selector.tsx
@@ -184,8 +184,8 @@ export const MultipleCalendarSelector = ({
 		setSelectedCalendarsIds(updatedSelectedIds);
 	}, []);
 
-	const onCalendarsAdd = useCallback<ReactEventHandler>(
-		(ev) => {
+	const onCalendarsAdd = useCallback(
+		(ev: KeyboardEvent | React.SyntheticEvent) => {
 			ev?.stopPropagation();
 			onCalendarChange(selectedCalendars);
 			setSelectedCalendarsIds([]);
diff --git a/src/view/sidebar/group-calendars-list-item.tsx b/src/view/sidebar/group-calendars-list-item.tsx
index fcfac014..bdfbd6f3 100644
--- a/src/view/sidebar/group-calendars-list-item.tsx
+++ b/src/view/sidebar/group-calendars-list-item.tsx
@@ -42,7 +42,7 @@ export const GroupCalendarsListItem = ({
 			padding={{ right: '0.5rem' }}
 		>
 			<Row width="fit">
-				<Square data-testid="colored-square" color={color} />
+				<Square data-testid="colored-square" $color={color} />
 			</Row>
 			<Row takeAvailableSpace mainAlignment="flex-start" padding={{ bottom: '0.2rem' }}>
 				<TextWithTooltip>{calendar.name}</TextWithTooltip>

From f91bddb8bfa9b04ad4575e92a851790c28cb866c Mon Sep 17 00:00:00 2001
From: Beatrice Guerra <beatrice.guerra@zextras.com>
Date: Mon, 2 Dec 2024 11:35:40 +0100
Subject: [PATCH 08/11] chore: update submodule

---
 src/carbonio-ui-commons | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/carbonio-ui-commons b/src/carbonio-ui-commons
index 582291d8..a321a19e 160000
--- a/src/carbonio-ui-commons
+++ b/src/carbonio-ui-commons
@@ -1 +1 @@
-Subproject commit 582291d8585e1762fe15a77e2dca7a623039057f
+Subproject commit a321a19e0331f9fd7eb47a94e203d5c4b1346366

From 7868778f26537c1c1e8d5357657a6c83c917c383 Mon Sep 17 00:00:00 2001
From: Beatrice Guerra <beatrice.guerra@zextras.com>
Date: Mon, 2 Dec 2024 11:48:32 +0100
Subject: [PATCH 09/11] build(deps): update shell and ds deps

---
 package-lock.json       | 193 +++++++++-------------------------------
 package.json            |   4 +-
 src/carbonio-ui-commons |   2 +-
 3 files changed, 45 insertions(+), 154 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 767bab2f..a55aaa4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,8 +16,8 @@
 				"@reduxjs/toolkit": "^1.9.7",
 				"@types/webpack": "^5.28.2",
 				"@types/webpack-env": "^1.18.1",
-				"@zextras/carbonio-design-system": "9.0.0-devel.6",
-				"@zextras/carbonio-shell-ui": "9.0.0",
+				"@zextras/carbonio-design-system": "9.0.0-devel.7",
+				"@zextras/carbonio-shell-ui": "devel",
 				"@zextras/carbonio-ui-preview": "^3.1.0-devel.2",
 				"core-js": "^3.36.1",
 				"date-arithmetic": "^4.1.0",
@@ -98,6 +98,7 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
 				"@jridgewell/trace-mapping": "^0.3.24"
@@ -122,6 +123,7 @@
 			"version": "7.25.4",
 			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
 			"integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
+			"dev": true,
 			"engines": {
 				"node": ">=6.9.0"
 			}
@@ -130,6 +132,7 @@
 			"version": "7.25.2",
 			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
 			"integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
+			"dev": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.0",
 				"@babel/code-frame": "^7.24.7",
@@ -173,6 +176,7 @@
 			"version": "7.24.7",
 			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz",
 			"integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==",
+			"dev": true,
 			"dependencies": {
 				"@babel/types": "^7.24.7"
 			},
@@ -197,6 +201,7 @@
 			"version": "7.25.2",
 			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
 			"integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
+			"dev": true,
 			"dependencies": {
 				"@babel/compat-data": "^7.25.2",
 				"@babel/helper-validator-option": "^7.24.8",
@@ -291,6 +296,7 @@
 			"version": "7.25.2",
 			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz",
 			"integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==",
+			"dev": true,
 			"dependencies": {
 				"@babel/helper-module-imports": "^7.24.7",
 				"@babel/helper-simple-access": "^7.24.7",
@@ -320,6 +326,7 @@
 			"version": "7.24.8",
 			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
 			"integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
+			"dev": true,
 			"engines": {
 				"node": ">=6.9.0"
 			}
@@ -362,6 +369,7 @@
 			"version": "7.24.7",
 			"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
 			"integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
+			"dev": true,
 			"dependencies": {
 				"@babel/traverse": "^7.24.7",
 				"@babel/types": "^7.24.7"
@@ -403,6 +411,7 @@
 			"version": "7.24.8",
 			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
 			"integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
+			"dev": true,
 			"engines": {
 				"node": ">=6.9.0"
 			}
@@ -425,6 +434,7 @@
 			"version": "7.25.6",
 			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.6.tgz",
 			"integrity": "sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==",
+			"dev": true,
 			"dependencies": {
 				"@babel/template": "^7.25.0",
 				"@babel/types": "^7.25.6"
@@ -702,6 +712,7 @@
 			"version": "7.24.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz",
 			"integrity": "sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==",
+			"dev": true,
 			"dependencies": {
 				"@babel/helper-plugin-utils": "^7.24.7"
 			},
@@ -2413,12 +2424,6 @@
 				}
 			}
 		},
-		"node_modules/@emotion/stylis": {
-			"version": "0.8.5",
-			"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-			"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-			"license": "MIT"
-		},
 		"node_modules/@emotion/unitless": {
 			"version": "0.10.0",
 			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
@@ -5334,9 +5339,10 @@
 			"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
 		},
 		"node_modules/@zextras/carbonio-design-system": {
-			"version": "9.0.0-devel.6",
-			"resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-9.0.0-devel.6.tgz",
-			"integrity": "sha512-GqiE91YsbYh+mcMyIiMqCldA4x4aokAKLyoF8hkUKuEhIAUrbBNqc51StEyVognIRS2R/nO605DXHFMNFHdO/g==",
+			"version": "9.0.0-devel.7",
+			"resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-9.0.0-devel.7.tgz",
+			"integrity": "sha512-HOEqVm28nPSShr3uyKqzny7kodLeiXjuYy8QSEA/aFTYNyC5sBOd9q/BTpe1qHuUwSMuSNIE4ZLfMGUiu+3Pcw==",
+			"license": "AGPL-3.0-only",
 			"dependencies": {
 				"@floating-ui/dom": "^1.6.11",
 				"core-js": "^3.38.1",
@@ -5353,17 +5359,18 @@
 			}
 		},
 		"node_modules/@zextras/carbonio-shell-ui": {
-			"version": "9.0.0",
-			"resolved": "https://registry.npmjs.org/@zextras/carbonio-shell-ui/-/carbonio-shell-ui-9.0.0.tgz",
-			"integrity": "sha512-GL3t4n0H19zMmN5idDRyfwbBJPjSYf13TxR16PLx6gi+lli0ME98HoZ/xsZX1v8U1HZ0z2wDs6Q/ZDEkgpoK3g==",
+			"version": "9.0.0-devel.1733134123796",
+			"resolved": "https://registry.npmjs.org/@zextras/carbonio-shell-ui/-/carbonio-shell-ui-9.0.0-devel.1733134123796.tgz",
+			"integrity": "sha512-A7FtU7qFYdZckbxrwjywz04nHnvet3HaeV5SkwLhYLy+wD/JNUxYoMclPLvAfD3NzzNfr4uAuE7o0NbRZpoLTw==",
 			"license": "AGPL-3.0-only",
 			"dependencies": {
 				"@fontsource/roboto": "^5.0.8",
 				"@sentry/browser": "^7.103.0",
 				"@tinymce/tinymce-react": "^4.3.2",
-				"@zextras/carbonio-design-system": "^8.1.0",
-				"@zextras/carbonio-ui-preview": "^3.1.0",
+				"@zextras/carbonio-design-system": "9.0.0-devel.7",
+				"@zextras/carbonio-ui-preview": "^3.1.0-devel.2",
 				"darkreader": "^4.9.79",
+				"date-fns": "^4.1.0",
 				"history": "^5.3.0",
 				"i18next": "^22.5.1",
 				"i18next-http-backend": "^2.5.0",
@@ -5375,7 +5382,7 @@
 				"react-i18next": "^12.3.1",
 				"react-router-dom": "^5.3.4",
 				"react-router-dom-v5-compat": "^6.28.0",
-				"styled-components": "^5.3.11",
+				"styled-components": "^6.1.13",
 				"tinymce": "^6.8.4",
 				"ua-parser-js": "^1.0.37",
 				"zustand": "^4.5.1"
@@ -5385,15 +5392,15 @@
 				"npm": "v10"
 			},
 			"peerDependencies": {
-				"@zextras/carbonio-design-system": "^8.1.0",
-				"@zextras/carbonio-ui-preview": "^3.1.0",
-				"core-js": "^3.31.1",
+				"@zextras/carbonio-design-system": "9.0.0-devel.7",
+				"@zextras/carbonio-ui-preview": "3.1.0-devel.2",
+				"core-js": "^3.39.0",
 				"lodash": "^4.17.21",
 				"react": "^18.3.1",
 				"react-dom": "^18.3.1",
 				"react-i18next": "^12.3.1",
 				"react-router-dom": "^5.3.4",
-				"styled-components": "^5.3.11"
+				"styled-components": "^6.1.13"
 			},
 			"peerDependenciesMeta": {
 				"@zextras/carbonio-design-system": {
@@ -5422,47 +5429,6 @@
 				}
 			}
 		},
-		"node_modules/@zextras/carbonio-shell-ui/node_modules/@emotion/unitless": {
-			"version": "0.7.5",
-			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-			"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
-			"license": "MIT"
-		},
-		"node_modules/@zextras/carbonio-shell-ui/node_modules/@zextras/carbonio-design-system": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-8.1.0.tgz",
-			"integrity": "sha512-PxiPPetc3YCKr7NsxiM83TWZhthdCsUkg6r3Njc5zOQVIE0SAMbv4fjDcPMTtDnqx8TV9e0EVZtGA0TZADmnaQ==",
-			"license": "AGPL-3.0-only",
-			"dependencies": {
-				"@floating-ui/dom": "^1.5.3",
-				"core-js": "^3.38.1",
-				"darkreader": "^4.9.58",
-				"polished": "^4.2.2",
-				"react-datepicker": "^4.25.0"
-			},
-			"peerDependencies": {
-				"lodash": "^4.17.21",
-				"react": "^18.0.0",
-				"react-dom": "^18.0.0",
-				"styled-components": "^5.3.11"
-			}
-		},
-		"node_modules/@zextras/carbonio-shell-ui/node_modules/date-fns": {
-			"version": "2.30.0",
-			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-			"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/runtime": "^7.21.0"
-			},
-			"engines": {
-				"node": ">=0.11"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/date-fns"
-			}
-		},
 		"node_modules/@zextras/carbonio-shell-ui/node_modules/immer": {
 			"version": "10.1.1",
 			"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
@@ -5472,54 +5438,6 @@
 				"url": "https://opencollective.com/immer"
 			}
 		},
-		"node_modules/@zextras/carbonio-shell-ui/node_modules/react-datepicker": {
-			"version": "4.25.0",
-			"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz",
-			"integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==",
-			"license": "MIT",
-			"dependencies": {
-				"@popperjs/core": "^2.11.8",
-				"classnames": "^2.2.6",
-				"date-fns": "^2.30.0",
-				"prop-types": "^15.7.2",
-				"react-onclickoutside": "^6.13.0",
-				"react-popper": "^2.3.0"
-			},
-			"peerDependencies": {
-				"react": "^16.9.0 || ^17 || ^18",
-				"react-dom": "^16.9.0 || ^17 || ^18"
-			}
-		},
-		"node_modules/@zextras/carbonio-shell-ui/node_modules/styled-components": {
-			"version": "5.3.11",
-			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
-			"integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-module-imports": "^7.0.0",
-				"@babel/traverse": "^7.4.5",
-				"@emotion/is-prop-valid": "^1.1.0",
-				"@emotion/stylis": "^0.8.4",
-				"@emotion/unitless": "^0.7.4",
-				"babel-plugin-styled-components": ">= 1.12.0",
-				"css-to-react-native": "^3.0.0",
-				"hoist-non-react-statics": "^3.0.0",
-				"shallowequal": "^1.1.0",
-				"supports-color": "^5.5.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/styled-components"
-			},
-			"peerDependencies": {
-				"react": ">= 16.8.0",
-				"react-dom": ">= 16.8.0",
-				"react-is": ">= 16.8.0"
-			}
-		},
 		"node_modules/@zextras/carbonio-ui-configs": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-configs/-/carbonio-ui-configs-1.0.2.tgz",
@@ -6789,6 +6707,7 @@
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz",
 			"integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==",
+			"dev": true,
 			"dependencies": {
 				"@babel/helper-annotate-as-pure": "^7.22.5",
 				"@babel/helper-module-imports": "^7.22.5",
@@ -7635,7 +7554,8 @@
 		"node_modules/convert-source-map": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+			"dev": true
 		},
 		"node_modules/cookie": {
 			"version": "0.5.0",
@@ -7734,10 +7654,11 @@
 			}
 		},
 		"node_modules/core-js": {
-			"version": "3.38.1",
-			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
-			"integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
+			"version": "3.39.0",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
+			"integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
 			"hasInstallScript": true,
+			"license": "MIT",
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/core-js"
@@ -8168,7 +8089,6 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
 			"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
-			"peer": true,
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/kossnocorp"
@@ -10448,6 +10368,7 @@
 			"version": "1.0.0-beta.2",
 			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
 			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+			"dev": true,
 			"engines": {
 				"node": ">=6.9.0"
 			}
@@ -14160,6 +14081,7 @@
 			"version": "2.2.3",
 			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
 			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+			"dev": true,
 			"bin": {
 				"json5": "lib/cli.js"
 			},
@@ -14616,6 +14538,7 @@
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
 			"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+			"dev": true,
 			"dependencies": {
 				"yallist": "^3.0.2"
 			}
@@ -15852,6 +15775,7 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
 			"engines": {
 				"node": ">=8.6"
 			},
@@ -16710,12 +16634,6 @@
 				"react": "^18.3.1"
 			}
 		},
-		"node_modules/react-fast-compare": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
-			"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
-			"license": "MIT"
-		},
 		"node_modules/react-i18next": {
 			"version": "12.3.1",
 			"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.3.1.tgz",
@@ -16747,20 +16665,6 @@
 			"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
 			"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
 		},
-		"node_modules/react-onclickoutside": {
-			"version": "6.13.1",
-			"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
-			"integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
-			"license": "MIT",
-			"funding": {
-				"type": "individual",
-				"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
-			},
-			"peerDependencies": {
-				"react": "^15.5.x || ^16.x || ^17.x || ^18.x",
-				"react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
-			}
-		},
 		"node_modules/react-overlays": {
 			"version": "5.2.1",
 			"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.2.1.tgz",
@@ -16808,21 +16712,6 @@
 				}
 			}
 		},
-		"node_modules/react-popper": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
-			"integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
-			"license": "MIT",
-			"dependencies": {
-				"react-fast-compare": "^3.0.1",
-				"warning": "^4.0.2"
-			},
-			"peerDependencies": {
-				"@popperjs/core": "^2.0.0",
-				"react": "^16.8.0 || ^17 || ^18",
-				"react-dom": "^16.8.0 || ^17 || ^18"
-			}
-		},
 		"node_modules/react-redux": {
 			"version": "8.1.3",
 			"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
@@ -17527,6 +17416,7 @@
 			"version": "6.3.1",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
 			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
 			"bin": {
 				"semver": "bin/semver.js"
 			}
@@ -19825,7 +19715,8 @@
 		"node_modules/yallist": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+			"dev": true
 		},
 		"node_modules/yaml": {
 			"version": "1.10.2",
diff --git a/package.json b/package.json
index 12aa4479..37ba8b85 100644
--- a/package.json
+++ b/package.json
@@ -87,8 +87,8 @@
 		"@reduxjs/toolkit": "^1.9.7",
 		"@types/webpack": "^5.28.2",
 		"@types/webpack-env": "^1.18.1",
-		"@zextras/carbonio-design-system": "9.0.0-devel.6",
-		"@zextras/carbonio-shell-ui": "9.0.0",
+		"@zextras/carbonio-design-system": "9.0.0-devel.7",
+		"@zextras/carbonio-shell-ui": "devel",
 		"@zextras/carbonio-ui-preview": "^3.1.0-devel.2",
 		"core-js": "^3.36.1",
 		"date-arithmetic": "^4.1.0",
diff --git a/src/carbonio-ui-commons b/src/carbonio-ui-commons
index a321a19e..823a5714 160000
--- a/src/carbonio-ui-commons
+++ b/src/carbonio-ui-commons
@@ -1 +1 @@
-Subproject commit a321a19e0331f9fd7eb47a94e203d5c4b1346366
+Subproject commit 823a57141c56aafd824d5133d3a40ac52dd46c98

From 97a5ec787662407cc1d39ac78d42f0ffd49b7553 Mon Sep 17 00:00:00 2001
From: Luca Stauble <luca.stauble@gmail.com>
Date: Thu, 19 Dec 2024 16:50:59 +0100
Subject: [PATCH 10/11] refactor: update submodule commit to fix contact input
 default implementation

---
 src/carbonio-ui-commons | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/carbonio-ui-commons b/src/carbonio-ui-commons
index 1c62d44a..865cb679 160000
--- a/src/carbonio-ui-commons
+++ b/src/carbonio-ui-commons
@@ -1 +1 @@
-Subproject commit 1c62d44ad2a6c6e1037dcae1f2527a4606855833
+Subproject commit 865cb679e684bb413f7a1ab0140a48e551f5502a

From 84197c31fa1fe6582540267a4a8b7c1ef9b41cd2 Mon Sep 17 00:00:00 2001
From: Luca Stauble <luca.stauble@gmail.com>
Date: Thu, 19 Dec 2024 17:17:22 +0100
Subject: [PATCH 11/11] refactor: update submodule commit

---
 src/carbonio-ui-commons | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/carbonio-ui-commons b/src/carbonio-ui-commons
index 865cb679..c829da4b 160000
--- a/src/carbonio-ui-commons
+++ b/src/carbonio-ui-commons
@@ -1 +1 @@
-Subproject commit 865cb679e684bb413f7a1ab0140a48e551f5502a
+Subproject commit c829da4baf252ba5497e5b26f7595cc7f14bd699