cozy-ui 121.5.0 → 121.6.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [121.6.0](https://github.com/cozy/cozy-ui/compare/v121.5.0...v121.6.0) (2025-03-27)
+
+
+### Features
+
+* Add Twake apps text icons ([6881702](https://github.com/cozy/cozy-ui/commit/6881702))
+* Rewritten AppTitle component ([59e37b9](https://github.com/cozy/cozy-ui/commit/59e37b9))
+
 # [121.5.0](https://github.com/cozy/cozy-ui/compare/v121.4.0...v121.5.0) (2025-03-25)
 
 

package/assets/icons/twake/illus/chat-text.svg

@@ -0,0 +1 @@
+<svg width="374" height="130" viewBox="0 0 374 130" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M63.625 129.516c-11.853 0-22.66-2.789-32.423-8.367-9.645-5.694-17.257-13.364-22.835-23.01C2.79 88.495 0 77.92 0 66.415c0-11.62 2.673-22.254 8.018-31.9 5.462-9.761 13.016-17.431 22.662-23.01 9.645-5.693 20.627-8.54 32.945-8.54 9.878 0 18.361 1.568 25.45 4.706 7.205 3.021 13.597 7.844 19.175 14.468L90.993 37.129c-7.322-7.67-16.444-11.505-27.368-11.505-7.67 0-14.41 1.86-20.22 5.578-5.811 3.603-10.285 8.542-13.423 14.817-3.137 6.16-4.706 12.958-4.706 20.395 0 7.438 1.569 14.236 4.706 20.395 3.254 6.16 7.786 11.04 13.597 14.642 5.926 3.603 12.783 5.404 20.569 5.404 11.389 0 20.685-3.951 27.89-11.853l17.781 15.165c-4.881 5.927-11.273 10.633-19.175 14.12-7.786 3.486-16.792 5.229-27.019 5.229Z" fill="url(#paint0_linear_59620_161)"/><path d="M118.031 0h23.532v49.157c4.881-9.762 14.003-14.643 27.368-14.643 6.507 0 12.376 1.57 17.605 4.707 5.23 3.021 9.355 7.38 12.377 13.074 3.021 5.578 4.532 12.085 4.532 19.523v55.432h-23.533V77.57c0-7.553-1.743-13.19-5.229-16.908-3.486-3.719-8.251-5.578-14.294-5.578-5.346 0-9.82 1.917-13.422 5.752-3.603 3.719-5.404 9.297-5.404 16.734v49.68h-23.532V0Z" fill="url(#paint1_linear_59620_161)"/><path d="M257.906 129.516c-8.134 0-15.63-2.092-22.486-6.275-6.857-4.3-12.319-10.052-16.386-17.257-3.951-7.205-5.927-15.108-5.927-23.707 0-8.6 1.976-16.502 5.927-23.707 4.067-7.321 9.529-13.132 16.386-17.432 6.856-4.3 14.352-6.45 22.486-6.45 7.438 0 13.423 1.395 17.955 4.184 4.648 2.79 8.251 6.799 10.807 12.028V36.606h23.359v90.644h-22.836v-14.817c-2.673 5.462-6.333 9.704-10.982 12.725-4.532 2.906-10.633 4.358-18.303 4.358ZM236.64 82.103c0 4.648 1.046 9.006 3.137 13.073 2.208 3.951 5.172 7.147 8.891 9.587 3.834 2.325 8.192 3.487 13.073 3.487 4.997 0 9.413-1.162 13.248-3.487 3.951-2.324 6.973-5.461 9.065-9.413 2.091-3.95 3.137-8.309 3.137-13.073 0-4.765-1.046-9.123-3.137-13.074-2.092-4.067-5.114-7.263-9.065-9.587-3.835-2.44-8.251-3.66-13.248-3.66-4.881 0-9.239 1.22-13.073 3.66-3.835 2.324-6.799 5.462-8.891 9.413-2.091 3.951-3.137 8.309-3.137 13.074Z" fill="url(#paint2_linear_59620_161)"/><path d="M358.349 127.25c-9.181 0-16.095-2.266-20.744-6.798-4.648-4.532-6.973-11.621-6.973-21.267V56.653h-12.725V36.606h12.725V18.303l23.533-2.44v20.743h19.175v20.047h-19.175v41.312c0 5.578 2.44 8.367 7.321 8.367h9.762v20.918h-12.899Z" fill="url(#paint3_linear_59620_161)"/><defs><linearGradient id="paint0_linear_59620_161" x1="187.057" y1="-44.095" x2="187.057" y2="166.905" gradientUnits="userSpaceOnUse"><stop stop-color="#B666FA"/><stop offset="1" stop-color="#A347EC"/></linearGradient><linearGradient id="paint1_linear_59620_161" x1="187.057" y1="-44.095" x2="187.057" y2="166.905" gradientUnits="userSpaceOnUse"><stop stop-color="#B666FA"/><stop offset="1" stop-color="#A347EC"/></linearGradient><linearGradient id="paint2_linear_59620_161" x1="187.057" y1="-44.095" x2="187.057" y2="166.905" gradientUnits="userSpaceOnUse"><stop stop-color="#B666FA"/><stop offset="1" stop-color="#A347EC"/></linearGradient><linearGradient id="paint3_linear_59620_161" x1="187.057" y1="-44.095" x2="187.057" y2="166.905" gradientUnits="userSpaceOnUse"><stop stop-color="#B666FA"/><stop offset="1" stop-color="#A347EC"/></linearGradient></defs></svg>

package/assets/icons/twake/illus/drive-text.svg

@@ -0,0 +1 @@
+<svg width="374" height="123" viewBox="0 0 374 123" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 3.66h41.593c13.088 0 24.068 2.496 32.941 7.487 8.984 4.991 15.695 11.868 20.131 20.63 4.437 8.762 6.655 18.855 6.655 30.28 0 11.313-2.218 21.35-6.655 30.113-4.436 8.762-11.147 15.639-20.13 20.63-8.874 4.88-19.854 7.32-32.942 7.32H0V3.66Zm38.764 95.497c13.088 0 22.738-3.327 28.95-9.982 6.321-6.766 9.482-15.805 9.482-27.118 0-11.314-3.16-20.353-9.483-27.119-6.211-6.877-15.86-10.315-28.948-10.315H23.291v74.534h15.472Z" fill="url(#paint0_linear_59620_158)"/><path d="M112.067 33.607h21.794v16.47c1.553-6.321 4.548-11.09 8.984-14.307 4.548-3.217 10.482-4.603 17.802-4.16v21.13h-3.161c-6.655 0-12.145 2.107-16.471 6.322-4.325 4.104-6.488 9.705-6.488 16.803v44.255h-22.46V33.607Z" fill="url(#paint1_linear_59620_158)"/><path d="M168.119 33.607h22.46v86.513h-22.46V33.607Zm-2.329-20.464c0-3.66 1.276-6.765 3.827-9.316C172.279 1.276 175.495 0 179.266 0c3.882 0 7.099 1.276 9.65 3.827 2.551 2.55 3.826 5.656 3.826 9.316 0 3.771-1.275 6.933-3.826 9.483-2.551 2.551-5.768 3.827-9.65 3.827-3.771 0-6.987-1.276-9.649-3.826-2.551-2.662-3.827-5.823-3.827-9.484Z" fill="url(#paint2_linear_59620_158)"/><path d="M194.713 33.607h26.619l17.303 49.412c1.553 4.215 2.773 8.818 3.66 13.809.887-4.991 2.107-9.594 3.66-13.809l17.303-49.412h26.12l-35.936 86.513h-22.627l-36.102-86.513Z" fill="url(#paint3_linear_59620_158)"/><path d="M329.45 122.283c-8.762 0-16.526-1.997-23.292-5.99-6.766-4.103-12.034-9.594-15.805-16.47-3.771-6.877-5.657-14.475-5.657-22.793 0-8.208 1.941-15.805 5.823-22.793 3.882-6.988 9.206-12.533 15.972-16.637 6.877-4.104 14.53-6.156 22.959-6.156 8.43 0 15.972 2.052 22.627 6.156 6.765 4.104 11.978 9.65 15.638 16.637 3.772 6.877 5.657 14.474 5.657 22.793 0 2.773-.222 5.435-.665 7.986h-64.719c1.331 5.213 3.827 9.427 7.487 12.644 3.771 3.105 8.429 4.658 13.975 4.658 4.658 0 8.818-1.053 12.478-3.16 3.66-2.219 6.544-5.047 8.651-8.486l17.469 13.144c-3.549 5.545-8.762 10.037-15.639 13.476-6.876 3.327-14.529 4.991-22.959 4.991Zm21.296-54.07c-1.331-4.992-3.938-9.151-7.82-12.479-3.882-3.327-8.485-4.99-13.809-4.99-5.213 0-9.76 1.608-13.642 4.824-3.771 3.217-6.267 7.431-7.487 12.644h42.758Z" fill="url(#paint4_linear_59620_158)"/><defs><linearGradient id="paint0_linear_59620_158" x1="172.182" y1="-31" x2="172.182" y2="137.5" gradientUnits="userSpaceOnUse"><stop stop-color="#FF6372"/><stop offset="1" stop-color="#FF3347"/></linearGradient><linearGradient id="paint1_linear_59620_158" x1="172.182" y1="-31" x2="172.182" y2="137.5" gradientUnits="userSpaceOnUse"><stop stop-color="#FF6372"/><stop offset="1" stop-color="#FF3347"/></linearGradient><linearGradient id="paint2_linear_59620_158" x1="172.182" y1="-31" x2="172.182" y2="137.5" gradientUnits="userSpaceOnUse"><stop stop-color="#FF6372"/><stop offset="1" stop-color="#FF3347"/></linearGradient><linearGradient id="paint3_linear_59620_158" x1="172.182" y1="-31" x2="172.182" y2="137.5" gradientUnits="userSpaceOnUse"><stop stop-color="#FF6372"/><stop offset="1" stop-color="#FF3347"/></linearGradient><linearGradient id="paint4_linear_59620_158" x1="172.182" y1="-31" x2="172.182" y2="137.5" gradientUnits="userSpaceOnUse"><stop stop-color="#FF6372"/><stop offset="1" stop-color="#FF3347"/></linearGradient></defs></svg>

package/assets/icons/twake/illus/mail-text.svg

@@ -0,0 +1 @@
+<svg width="311" height="125" viewBox="0 0 311 125" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 5.046h29.266l24.389 51.973c6.84 14.465 11.213 24.949 13.12 31.453 1.569-6.055 5.886-16.54 12.95-31.453l24.557-51.973h28.257v117.738h-23.043v-47.6c0-7.737.112-14.016.337-18.838.224-4.822.672-9.924 1.345-15.306l-39.19 81.744H60.551L21.36 41.04c.673 5.382 1.121 10.484 1.346 15.306.224 4.822.336 11.1.336 18.838v47.6H0V5.046Z" fill="url(#paint0_linear_59620_156)"/><path d="M187.488 124.97c-7.849 0-15.081-2.018-21.697-6.055-6.616-4.149-11.886-9.699-15.811-16.651-3.812-6.952-5.718-14.577-5.718-22.875s1.906-15.923 5.718-22.875c3.925-7.064 9.195-12.67 15.811-16.82 6.616-4.148 13.848-6.223 21.697-6.223 7.177 0 12.951 1.346 17.325 4.037 4.485 2.691 7.961 6.56 10.428 11.605V35.322h22.538v87.463h-22.034v-14.297c-2.579 5.27-6.111 9.363-10.596 12.278-4.373 2.804-10.26 4.205-17.661 4.205Zm-20.52-45.75c0 4.486 1.009 8.69 3.028 12.615 2.13 3.813 4.99 6.897 8.578 9.251 3.7 2.243 7.905 3.364 12.615 3.364 4.821 0 9.082-1.121 12.783-3.364 3.812-2.242 6.727-5.27 8.746-9.082 2.018-3.813 3.027-8.018 3.027-12.615 0-4.597-1.009-8.802-3.027-12.615-2.019-3.924-4.934-7.008-8.746-9.25-3.701-2.355-7.962-3.533-12.783-3.533-4.71 0-8.915 1.178-12.615 3.532-3.7 2.243-6.56 5.27-8.578 9.083-2.019 3.812-3.028 8.017-3.028 12.615Z" fill="url(#paint1_linear_59620_156)"/><path d="M251.27 35.321h22.707v87.463H251.27V35.321Zm-2.354-20.688c0-3.7 1.289-6.84 3.868-9.419 2.691-2.579 5.943-3.868 9.756-3.868 3.924 0 7.176 1.29 9.755 3.868 2.579 2.58 3.869 5.719 3.869 9.42 0 3.812-1.29 7.007-3.869 9.586-2.579 2.58-5.831 3.869-9.755 3.869-3.813 0-7.065-1.29-9.756-3.869-2.579-2.69-3.868-5.886-3.868-9.587Z" fill="url(#paint2_linear_59620_156)"/><path d="M287.406 0h22.707v122.784h-22.707V0Z" fill="url(#paint3_linear_59620_156)"/><defs><linearGradient id="paint0_linear_59620_156" x1="35.555" y1="-30.948" x2="35.555" y2="124.826" gradientUnits="userSpaceOnUse"><stop stop-color="#57B9FF"/><stop offset="1" stop-color="#0B84FF"/></linearGradient><linearGradient id="paint1_linear_59620_156" x1="35.555" y1="-30.948" x2="35.555" y2="124.826" gradientUnits="userSpaceOnUse"><stop stop-color="#57B9FF"/><stop offset="1" stop-color="#0B84FF"/></linearGradient><linearGradient id="paint2_linear_59620_156" x1="35.555" y1="-30.948" x2="35.555" y2="124.826" gradientUnits="userSpaceOnUse"><stop stop-color="#57B9FF"/><stop offset="1" stop-color="#0B84FF"/></linearGradient><linearGradient id="paint3_linear_59620_156" x1="35.555" y1="-30.948" x2="35.555" y2="124.826" gradientUnits="userSpaceOnUse"><stop stop-color="#57B9FF"/><stop offset="1" stop-color="#0B84FF"/></linearGradient></defs></svg>

package/assets/icons/twake/illus/notes-text.svg

@@ -0,0 +1 @@
+<svg width="479" height="136" viewBox="0 0 479 136" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 132.881V0h20.122l64.732 76.881c3.037 3.417 6.075 7.024 8.732 11.01-.759-5.695-.949-13.857-.949-21.64V0h24.298v132.881H99.661l-67.2-79.918c-3.037-3.417-6.075-7.024-8.732-11.01.76 5.694.949 13.857.949 21.64v69.288H0Z" fill="url(#paint0_linear_59620_144)"/><path d="M182.772 135.349c-30.562 0-52.583-23.159-52.583-51.634 0-28.474 22.021-51.824 52.583-51.824 30.563 0 52.583 23.35 52.583 51.824 0 28.475-22.02 51.634-52.583 51.634Zm-26.956-51.634c0 15.376 10.631 28.285 26.956 28.285 16.326 0 26.956-12.909 26.956-28.285s-10.63-28.474-26.956-28.474c-16.325 0-26.956 13.098-26.956 28.474Z" fill="url(#paint1_linear_59620_144)"/><path d="M278.718 132.881c-19.552 0-30.183-9.112-30.183-30.563V56h-13.857V34.17h13.857V14.236l25.627-2.657v22.59h20.882V56h-20.882v44.99c0 6.264 3.038 9.112 7.973 9.112h10.631v22.779h-14.048Z" fill="url(#paint2_linear_59620_144)"/><path d="M348.282 135.349c-30.563 0-51.064-23.159-51.064-51.634 0-28.474 21.451-52.013 51.064-52.013 29.614 0 50.115 23.539 50.115 52.013 0 2.848-.19 5.885-.759 9.112h-73.844c2.847 11.58 11.58 19.742 24.488 19.742 11.01 0 19.553-5.695 24.108-13.288l19.933 14.997c-7.973 12.339-24.488 21.071-44.041 21.071Zm-24.488-61.695h48.786c-2.847-11.01-12.149-19.932-24.678-19.932-12.149 0-21.261 8.163-24.108 19.932Z" fill="url(#paint3_linear_59620_144)"/><path d="M440.657 135.349c-16.705 0-30.183-5.695-41.004-17.275l17.275-15.756c7.213 8.163 14.807 12.15 23.159 12.15 8.732 0 13.668-4.366 13.668-10.251 0-5.126-2.468-7.973-18.034-11.58-26.386-6.264-30.373-18.224-30.373-30.752 0-17.275 13.668-30.183 36.827-30.183 15.946 0 26.577 3.986 36.638 17.084l-18.604 14.238c-4.746-7.594-10.82-10.63-17.464-10.63-7.024 0-12.339 2.657-12.339 8.731 0 3.417 1.519 6.455 13.288 9.492 28.664 7.403 35.308 18.034 35.308 32.84 0 18.224-16.515 31.892-38.345 31.892Z" fill="url(#paint4_linear_59620_144)"/><defs><linearGradient id="paint0_linear_59620_144" x1="236.012" y1="7.974" x2="236.012" y2="132.881" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC953"/><stop offset="1" stop-color="#FFB81E"/></linearGradient><linearGradient id="paint1_linear_59620_144" x1="236.012" y1="7.974" x2="236.012" y2="132.881" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC953"/><stop offset="1" stop-color="#FFB81E"/></linearGradient><linearGradient id="paint2_linear_59620_144" x1="236.012" y1="7.974" x2="236.012" y2="132.881" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC953"/><stop offset="1" stop-color="#FFB81E"/></linearGradient><linearGradient id="paint3_linear_59620_144" x1="236.012" y1="7.974" x2="236.012" y2="132.881" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC953"/><stop offset="1" stop-color="#FFB81E"/></linearGradient><linearGradient id="paint4_linear_59620_144" x1="236.012" y1="7.974" x2="236.012" y2="132.881" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC953"/><stop offset="1" stop-color="#FFB81E"/></linearGradient></defs></svg>

package/assets/icons/twake/illus/pass-text.svg

@@ -0,0 +1 @@
+<svg width="370" height="136" viewBox="0 0 370 136" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 132.881V0h44.8c29.803 0 48.027 14.047 48.027 41.953 0 28.094-18.224 42.711-48.027 42.711H26.576v48.217H0Zm26.576-72.135h16.705c14.427 0 22.59-5.885 22.59-18.604 0-12.529-8.163-18.413-22.59-18.413H26.576v37.017ZM142.826 135.349c-27.145 0-48.786-22.97-48.786-51.444 0-28.475 21.641-51.824 48.786-51.824 17.085 0 26.007 7.024 31.322 17.654V34.17h25.438v98.712h-24.868v-16.135c-5.315 11.2-14.237 18.603-31.892 18.603Zm-23.159-51.634c0 14.997 11.01 28.475 27.336 28.475 16.895 0 27.715-12.909 27.715-28.285s-10.82-28.664-27.715-28.664c-16.326 0-27.336 13.098-27.336 28.474ZM248.602 135.349c-16.705 0-30.183-5.695-41.003-17.275l17.274-15.756c7.214 8.163 14.807 12.15 23.159 12.15 8.733 0 13.668-4.366 13.668-10.251 0-5.126-2.468-7.973-18.034-11.58-26.386-6.264-30.372-18.224-30.372-30.752 0-17.275 13.667-30.183 36.827-30.183 15.945 0 26.576 3.986 36.637 17.084l-18.604 14.238c-4.745-7.594-10.82-10.63-17.464-10.63-7.024 0-12.339 2.657-12.339 8.731 0 3.417 1.519 6.455 13.288 9.492 28.665 7.403 35.309 18.034 35.309 32.84 0 18.224-16.516 31.892-38.346 31.892ZM330.726 135.349c-16.705 0-30.183-5.695-41.004-17.275l17.275-15.756c7.213 8.163 14.807 12.15 23.159 12.15 8.732 0 13.668-4.366 13.668-10.251 0-5.126-2.468-7.973-18.034-11.58-26.386-6.264-30.373-18.224-30.373-30.752 0-17.275 13.668-30.183 36.827-30.183 15.946 0 26.577 3.986 36.638 17.084l-18.604 14.238c-4.745-7.594-10.82-10.63-17.464-10.63-7.024 0-12.339 2.657-12.339 8.731 0 3.417 1.519 6.455 13.288 9.492 28.664 7.403 35.308 18.034 35.308 32.84 0 18.224-16.515 31.892-38.345 31.892Z" fill="#A4A5B8"/></svg>

package/assets/icons/twake/illus/store-text.svg

@@ -0,0 +1 @@
+<svg width="440" height="138" viewBox="0 0 440 138" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M51.78 137.863c-21.07 0-39.294-8.352-50.874-28.664l22.97-14.617c6.834 13.668 17.844 19.553 29.423 19.553 12.34 0 19.933-6.075 19.933-15.187 0-13.288-14.048-17.464-30.373-21.64-20.502-5.316-33.6-17.275-33.6-37.397C9.259 15.992 28.052.237 56.147.237c20.691 0 33.98 9.111 43.85 24.678L77.219 38.962c-6.454-10.25-12.529-14.997-22.4-14.997-10.63 0-18.413 5.695-18.413 14.617 0 9.871 9.491 13.099 21.07 16.705 15.567 4.936 42.902 11.77 42.902 42.143 0 24.108-18.413 40.433-48.596 40.433Z" fill="url(#paint0_linear_59617_306)"/><path d="M147.626 135.396c-19.553 0-30.183-9.112-30.183-30.563V58.514h-13.858v-21.83h13.858V16.752l25.627-2.658v22.59h20.881v21.83H143.07v44.99c0 6.265 3.037 9.112 7.973 9.112h10.63v22.78h-14.047Z" fill="url(#paint1_linear_59617_306)"/><path d="M218.708 137.863c-30.562 0-52.583-23.159-52.583-51.633 0-28.475 22.021-51.824 52.583-51.824 30.563 0 52.583 23.35 52.583 51.824 0 28.474-22.02 51.633-52.583 51.633ZM191.752 86.23c0 15.376 10.631 28.284 26.956 28.284 16.326 0 26.956-12.908 26.956-28.284 0-15.377-10.63-28.475-26.956-28.475-16.325 0-26.956 13.098-26.956 28.475Z" fill="url(#paint2_linear_59617_306)"/><path d="M282.634 135.396V36.684h24.867v18.793c3.417-14.237 13.478-22.02 30.563-21.071v24.108h-3.607c-14.807 0-26.196 9.872-26.196 26.387v50.495h-25.627Z" fill="url(#paint3_linear_59617_306)"/><path d="M389.038 137.863c-30.563 0-51.064-23.159-51.064-51.633 0-28.475 21.45-52.014 51.064-52.014 29.613 0 50.115 23.54 50.115 52.014 0 2.847-.19 5.884-.759 9.111H364.55c2.847 11.58 11.579 19.743 24.488 19.743 11.01 0 19.552-5.695 24.108-13.288l19.932 14.996c-7.972 12.339-24.488 21.071-44.04 21.071ZM364.55 76.169h48.786c-2.847-11.01-12.149-19.932-24.678-19.932-12.149 0-21.261 8.162-24.108 19.932Z" fill="url(#paint4_linear_59617_306)"/><defs><linearGradient id="paint0_linear_59617_306" x1="417.866" y1="296.396" x2="48.603" y2="-221.128" gradientUnits="userSpaceOnUse"><stop offset=".45" stop-color="#3D74FE"/><stop offset="1" stop-color="#91CFFF"/></linearGradient><linearGradient id="paint1_linear_59617_306" x1="417.866" y1="296.396" x2="48.603" y2="-221.128" gradientUnits="userSpaceOnUse"><stop offset=".45" stop-color="#3D74FE"/><stop offset="1" stop-color="#91CFFF"/></linearGradient><linearGradient id="paint2_linear_59617_306" x1="417.866" y1="296.396" x2="48.603" y2="-221.128" gradientUnits="userSpaceOnUse"><stop offset=".45" stop-color="#3D74FE"/><stop offset="1" stop-color="#91CFFF"/></linearGradient><linearGradient id="paint3_linear_59617_306" x1="417.866" y1="296.396" x2="48.603" y2="-221.128" gradientUnits="userSpaceOnUse"><stop offset=".45" stop-color="#3D74FE"/><stop offset="1" stop-color="#91CFFF"/></linearGradient><linearGradient id="paint4_linear_59617_306" x1="417.866" y1="296.396" x2="48.603" y2="-221.128" gradientUnits="userSpaceOnUse"><stop offset=".45" stop-color="#3D74FE"/><stop offset="1" stop-color="#91CFFF"/></linearGradient></defs></svg>

package/assets/icons/twake/illus/twake-text.svg

@@ -0,0 +1 @@
+<svg width="86" height="23" viewBox="0 0 86 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.495 5.381H.635V1.69h15.822v3.692h-5.86V22.2H6.495V5.38Z"/><path d="M13.606 6.963h4.63l1.963 8.644c.215.88.37 1.65.469 2.315.136-.84.302-1.621.498-2.344l2.227-8.615h4.541l2.374 8.615c.195.723.36 1.504.498 2.344.097-.664.254-1.436.468-2.315l2.11-8.644h4.307L32.945 22.2h-4.278l-2.49-8.673a13.054 13.054 0 0 1-.528-2.286c-.137.899-.293 1.66-.47 2.286L22.896 22.2h-4.542L13.606 6.963ZM44.766 22.58a7.12 7.12 0 0 1-3.78-1.054 8.014 8.014 0 0 1-2.754-2.9c-.664-1.212-.997-2.54-.997-3.986 0-1.445.333-2.774.997-3.985.683-1.23 1.601-2.207 2.754-2.93a6.977 6.977 0 0 1 3.78-1.084c1.25 0 2.256.234 3.018.703.781.47 1.387 1.143 1.816 2.022V6.963h3.927V22.2h-3.839v-2.49c-.449.917-1.064 1.63-1.846 2.138-.761.489-1.787.733-3.076.733Zm-3.575-7.97c0 .782.176 1.515.527 2.198.372.665.87 1.202 1.495 1.612.644.39 1.377.586 2.197.586.84 0 1.583-.195 2.227-.586a3.955 3.955 0 0 0 1.524-1.582 4.623 4.623 0 0 0 .527-2.198c0-.8-.176-1.533-.527-2.197a3.907 3.907 0 0 0-1.524-1.612c-.644-.41-1.387-.615-2.227-.615-.82 0-1.553.205-2.197.615a4.014 4.014 0 0 0-1.495 1.582 4.624 4.624 0 0 0-.527 2.198ZM59.833 14.963V22.2h-3.956V.81h3.956v12.306l5.713-6.153h5.626l-7.179 7.091 7.208 8.146h-5.245l-6.123-7.237Z"/><path d="M77.594 22.58c-1.543 0-2.91-.35-4.102-1.054a7.632 7.632 0 0 1-2.783-2.9c-.665-1.212-.997-2.55-.997-4.015a8.13 8.13 0 0 1 1.026-4.014 7.792 7.792 0 0 1 2.813-2.93c1.21-.723 2.559-1.085 4.043-1.085 1.485 0 2.813.362 3.985 1.085a7.362 7.362 0 0 1 2.755 2.93c.664 1.21.996 2.549.996 4.014 0 .488-.04.957-.117 1.406H73.815c.234.918.673 1.66 1.318 2.227.664.547 1.485.82 2.461.82.82 0 1.553-.185 2.198-.556a4.465 4.465 0 0 0 1.523-1.494l3.077 2.314c-.625.977-1.543 1.768-2.754 2.374-1.211.586-2.56.879-4.044.879Zm3.75-9.522a4.28 4.28 0 0 0-1.376-2.198c-.684-.586-1.495-.879-2.432-.879-.918 0-1.72.284-2.403.85-.664.567-1.104 1.309-1.319 2.227h7.53Z"/></svg>

package/assets/icons/twake/illus/workplace-text.svg

@@ -0,0 +1 @@
+<svg width="890" height="173" viewBox="0 0 890 173" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M745.671 136.518c-13.532 0-24.788-4.491-33.769-13.472-8.862-8.981-13.293-20.058-13.293-33.23 0-13.173 4.431-24.25 13.293-33.231 8.981-8.981 20.237-13.472 33.769-13.472 9.101 0 17.244 2.156 24.429 6.467 7.305 4.31 12.993 10.178 17.064 17.603l-13.472 7.544c-2.634-5.269-6.406-9.46-11.316-12.574-4.79-3.113-10.358-4.67-16.705-4.67-9.221 0-16.765 3.114-22.633 9.34-5.867 6.228-8.801 13.892-8.801 22.993 0 9.1 2.934 16.765 8.801 22.991 5.868 6.227 13.412 9.341 22.633 9.341 6.347 0 11.915-1.557 16.705-4.67 4.91-3.114 8.682-7.305 11.316-12.574l13.472 7.544c-4.071 7.425-9.759 13.292-17.064 17.603-7.185 4.311-15.328 6.467-24.429 6.467ZM631.164 136.516c-6.945 0-12.873-1.257-17.782-3.772-4.79-2.634-8.443-6.167-10.958-10.598-2.514-4.55-3.772-9.64-3.772-15.268 0-9.46 2.755-16.286 8.263-20.477 5.628-4.191 13.652-6.287 24.07-6.287h30.895v-6.466c0-8.143-1.856-13.772-5.568-16.885-3.593-3.114-9.041-4.67-16.346-4.67-6.826 0-11.795 1.317-14.909 3.951-3.113 2.515-4.85 5.39-5.209 8.622h-15.807c.359-5.149 2.096-9.7 5.209-13.651 3.114-4.072 7.365-7.305 12.754-9.7 5.388-2.395 11.675-3.592 18.86-3.592 7.544 0 14.071 1.197 19.579 3.592 5.509 2.275 9.76 5.928 12.754 10.957 2.993 4.91 4.49 11.436 4.49 19.58v51.911c.12 3.712.419 7.364.898 10.957h-13.831a97.401 97.401 0 0 1-.718-7.724c-.12-2.515-.18-5.329-.18-8.442-2.515 5.029-6.586 9.28-12.214 12.753-5.629 3.473-12.454 5.209-20.478 5.209Zm3.413-14.37c5.03 0 9.58-.898 13.652-2.694 4.191-1.796 7.484-4.431 9.879-7.904 2.515-3.472 3.772-7.724 3.772-12.753v-6.466h-28.201c-5.868 0-10.478 1.197-13.831 3.592-3.353 2.275-5.029 5.928-5.029 10.957 0 4.431 1.556 8.083 4.67 10.957 3.233 2.874 8.263 4.311 15.088 4.311ZM560.785 134.718V0h15.448v134.718h-15.448ZM462.78 172.263h-15.448V44.909h15.448V58.74c3.113-4.55 7.484-8.262 13.112-11.136 5.748-2.994 11.915-4.49 18.502-4.49 12.454 0 22.872 4.55 31.254 13.65 8.503 9.102 12.754 20.119 12.754 33.052s-4.251 23.949-12.754 33.05c-8.382 9.101-18.8 13.652-31.254 13.652-6.587 0-12.754-1.437-18.502-4.311-5.628-2.994-9.999-6.766-13.112-11.316v51.372Zm7.364-59.276c5.748 6.227 13.053 9.341 21.915 9.341 8.861 0 16.166-3.114 21.914-9.341 5.748-6.227 8.622-13.95 8.622-23.171s-2.874-16.945-8.622-23.172c-5.748-6.227-13.053-9.34-21.914-9.34-8.862 0-16.167 3.113-21.915 9.34-5.748 6.227-8.622 13.95-8.622 23.172 0 9.22 2.874 16.944 8.622 23.171ZM414.895 134.718l-48.678-44.906v44.906H350.77V0h15.447v79.933l39.158-35.027h20.478l-44.188 39.697 54.067 50.115h-20.837ZM283.176 134.717V44.904h15.447v17.424c1.677-5.508 4.91-9.94 9.7-13.292 4.91-3.353 10.059-5.03 15.448-5.03 2.634 0 4.97.24 7.005.719V60.71c-2.155-.958-4.969-1.437-8.442-1.437-6.227 0-11.736 2.695-16.526 8.084-4.79 5.388-7.185 12.992-7.185 22.812v44.547h-15.447ZM214.433 136.518c-13.532 0-24.788-4.491-33.77-13.472-8.861-9.101-13.292-20.178-13.292-33.23 0-13.053 4.431-24.07 13.292-33.051 8.982-9.101 20.238-13.652 33.77-13.652 13.412 0 24.548 4.55 33.41 13.652 8.981 8.98 13.472 19.998 13.472 33.05 0 13.053-4.491 24.13-13.472 33.231-8.862 8.981-19.998 13.472-33.41 13.472ZM191.8 112.807c5.868 6.227 13.412 9.341 22.633 9.341 9.22 0 16.705-3.114 22.453-9.341 5.748-6.226 8.622-13.89 8.622-22.991 0-9.101-2.874-16.765-8.622-22.992-5.748-6.227-13.233-9.34-22.453-9.34-9.221 0-16.765 3.113-22.633 9.34-5.748 6.227-8.622 13.89-8.622 22.992 0 9.1 2.874 16.765 8.622 22.991ZM112.086 134.716 80.831 48.137l-31.075 86.579H34.847L0 7.183h17.424l26.584 99.512L80.831 5.027l36.823 101.668 26.764-99.512h17.424l-34.847 127.533h-14.909ZM846.515 136.518c-13.771 0-24.968-4.431-33.59-13.292-8.622-8.862-12.933-19.998-12.933-33.41 0-13.293 4.371-24.37 13.113-33.231 8.742-8.981 19.938-13.472 33.59-13.472 12.094 0 22.213 4.072 30.356 12.215 8.263 8.023 12.394 18.98 12.394 32.87 0 1.797-.06 3.354-.179 4.671H815.62c.239 8.383 3.233 15.388 8.981 21.016 5.867 5.628 13.232 8.443 22.094 8.443 12.573 0 21.914-5.21 28.021-15.628l12.214 8.443c-8.741 14.25-22.213 21.375-40.415 21.375Zm-29.818-56.223h56.941c-1.197-7.184-4.371-12.873-9.52-17.064-5.029-4.31-11.017-6.466-17.962-6.466-7.066 0-13.412 2.155-19.041 6.466-5.508 4.191-8.981 9.88-10.418 17.064Z" fill="#DBDBDB"/></svg>

package/package.json

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

package/react/AppTitle/Readme.md

@@ -1,9 +1,22 @@
-Displays the App title in the Cozy Bar
+
+Display the app title of an app with icon, brand name and app name. Support Twake theme only.
+
+You can pass a child that will be used as default value is app is not supported.
 
 ### Default
 
 ```jsx
 import AppTitle from 'cozy-ui/transpiled/react/AppTitle';
 
-<AppTitle>Drive</AppTitle>
+const slugs = ["chat", "drive", "mail", "notes", "pass", "store", "home"];
+
+<div class="u-flex u-flex-column">
+  {
+    isTwakeTheme() && slugs.map(slug => <AppTitle slug={slug} />)
+  }
+  <AppTitle slug="coachco2" />
+  <AppTitle slug="coachco2">CoachCO2</AppTitle>
+  <AppTitle>Drive</AppTitle>
+</div>
+
 ```

package/react/AppTitle/index.jsx

@@ -1,24 +1,105 @@
-import Typography from '@material-ui/core/Typography'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import styles from './styles.styl'
+import Icon from '../Icon'
+import ChatIcon from '../Icons/Chat'
+import ChatTextIcon from '../Icons/ChatText'
+import DriveIcon from '../Icons/Drive'
+import DriveTextIcon from '../Icons/DriveText'
+import MailIcon from '../Icons/Mail'
+import MailTextIcon from '../Icons/MailText'
+import NotesIcon from '../Icons/Notes'
+import NotesTextIcon from '../Icons/NotesText'
+import PassIcon from '../Icons/Pass'
+import PassTextIcon from '../Icons/PassText'
+import StoreIcon from '../Icons/Store'
+import StoreTextIcon from '../Icons/StoreText'
+import TwakeTextIcon from '../Icons/TwakeText'
+import TwakeWorkplaceIcon from '../Icons/TwakeWorkplace'
+import WorkplaceTextIcon from '../Icons/WorkplaceText'
+import Typography from '../Typography'
+import { useCozyTheme } from '../providers/CozyTheme'
+
+const SLUG_TO_ICONS = {
+  chat: {
+    icon: ChatIcon,
+    text: ChatTextIcon
+  },
+  drive: {
+    icon: DriveIcon,
+    text: DriveTextIcon
+  },
+  mail: {
+    icon: MailIcon,
+    text: MailTextIcon
+  },
+  notes: {
+    icon: NotesIcon,
+    text: NotesTextIcon
+  },
+  pass: {
+    icon: PassIcon,
+    text: PassTextIcon
+  },
+  store: {
+    icon: StoreIcon,
+    text: StoreTextIcon
+  },
+  home: {
+    icon: TwakeWorkplaceIcon,
+    text: WorkplaceTextIcon
+  }
+}
+
+const AppTitle = ({ slug, tag, className, children, ...otherProps }) => {
+  const { isLight } = useCozyTheme()
+
+  const titleData = SLUG_TO_ICONS[slug]
+
+  if (!titleData)
+    return (
+      <Typography
+        component={tag}
+        variant="h4"
+        className={cx(styles['c-apptitle'], className)}
+        {...otherProps}
+      >
+        {children}
+      </Typography>
+    )
 
-export const AppTitle = ({ children, tag, className, ...restProps }) => {
   return (
-    <Typography
-      component={tag}
-      variant="h4"
-      className={cx(styles['c-apptitle'], className)}
-      {...restProps}
-    >
-      {children}
-    </Typography>
+    <div className="u-flex u-flex-items-center">
+      <Icon
+        icon={titleData.icon}
+        size="32"
+        className={styles['c-apptitle-app-icon']}
+      />
+      <Icon
+        icon={TwakeTextIcon}
+        width="auto"
+        height="22"
+        className={cx(
+          'u-mr-half',
+          'u-w-auto',
+          isLight ? styles['c-app-title-light'] : styles['c-app-title-dark']
+        )}
+      />
+      <Icon
+        icon={titleData.text}
+        width="auto"
+        height="22"
+        className={cx('u-w-auto', slug === 'home' ? 'u-mt-half' : undefined)}
+      />
+    </div>
   )
 }
 
 AppTitle.propTypes = {
+  slug: PropTypes.string,
+  tag: PropTypes.string,
   className: PropTypes.string
 }
 

package/react/AppTitle/styles.styl

@@ -3,3 +3,11 @@
 .c-apptitle
     @extend $apptitle
 
+.c-apptitle-light
+    fill: 'black'
+
+.c-apptitle-dark
+    fill: 'white'
+
+.c-apptitle-app-icon
+    margin-right: 4px

package/react/Icon/Readme.md

@@ -769,7 +769,7 @@ const icons = [
   PapersIcon,
   ...(isTwakeTheme() ? [PassIcon] : []),
   ShareGrey08Icon,
-  StoreIcon,
+  ...(isTwakeTheme() ? [StoreIcon] : []),
   TopSelectIcon,
   TrashDuotoneIcon,
   ...(isTwakeTheme() ? [TwakeWorkplace] : []),

package/react/Icons/ChatText.jsx

@@ -0,0 +1,73 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/illus/chat-text.svg` to regenerate;
+import React from 'react'
+
+function SvgChatText(props) {
+  return (
+    <svg viewBox="0 0 374 130" fill="none" {...props}>
+      <path
+        d="M63.625 129.516c-11.853 0-22.66-2.789-32.423-8.367-9.645-5.694-17.257-13.364-22.835-23.01C2.79 88.495 0 77.92 0 66.415c0-11.62 2.673-22.254 8.018-31.9 5.462-9.761 13.016-17.431 22.662-23.01 9.645-5.693 20.627-8.54 32.945-8.54 9.878 0 18.361 1.568 25.45 4.706 7.205 3.021 13.597 7.844 19.175 14.468l-17.257 14.99c-7.322-7.67-16.444-11.505-27.368-11.505-7.67 0-14.41 1.86-20.22 5.578-5.811 3.603-10.285 8.542-13.423 14.817-3.137 6.16-4.706 12.958-4.706 20.395 0 7.438 1.569 14.236 4.706 20.395 3.254 6.16 7.786 11.04 13.597 14.642 5.926 3.603 12.783 5.404 20.569 5.404 11.389 0 20.685-3.951 27.89-11.853l17.781 15.165c-4.881 5.927-11.273 10.633-19.175 14.12-7.786 3.486-16.792 5.229-27.019 5.229z"
+        fill="url(#chat-text_svg__paint0_linear_59620_161)"
+      />
+      <path
+        d="M118.031 0h23.532v49.157c4.881-9.762 14.003-14.643 27.368-14.643 6.507 0 12.376 1.57 17.605 4.707 5.23 3.021 9.355 7.38 12.377 13.074 3.021 5.578 4.532 12.085 4.532 19.523v55.432h-23.533V77.57c0-7.553-1.743-13.19-5.229-16.908-3.486-3.719-8.251-5.578-14.294-5.578-5.346 0-9.82 1.917-13.422 5.752-3.603 3.719-5.404 9.297-5.404 16.734v49.68h-23.532V0z"
+        fill="url(#chat-text_svg__paint1_linear_59620_161)"
+      />
+      <path
+        d="M257.906 129.516c-8.134 0-15.63-2.092-22.486-6.275-6.857-4.3-12.319-10.052-16.386-17.257-3.951-7.205-5.927-15.108-5.927-23.707 0-8.6 1.976-16.502 5.927-23.707 4.067-7.321 9.529-13.132 16.386-17.432 6.856-4.3 14.352-6.45 22.486-6.45 7.438 0 13.423 1.395 17.955 4.184 4.648 2.79 8.251 6.799 10.807 12.028V36.606h23.359v90.644h-22.836v-14.817c-2.673 5.462-6.333 9.704-10.982 12.725-4.532 2.906-10.633 4.358-18.303 4.358zM236.64 82.103c0 4.648 1.046 9.006 3.137 13.073 2.208 3.951 5.172 7.147 8.891 9.587 3.834 2.325 8.192 3.487 13.073 3.487 4.997 0 9.413-1.162 13.248-3.487 3.951-2.324 6.973-5.461 9.065-9.413 2.091-3.95 3.137-8.309 3.137-13.073 0-4.765-1.046-9.123-3.137-13.074-2.092-4.067-5.114-7.263-9.065-9.587-3.835-2.44-8.251-3.66-13.248-3.66-4.881 0-9.239 1.22-13.073 3.66-3.835 2.324-6.799 5.462-8.891 9.413-2.091 3.951-3.137 8.309-3.137 13.074z"
+        fill="url(#chat-text_svg__paint2_linear_59620_161)"
+      />
+      <path
+        d="M358.349 127.25c-9.181 0-16.095-2.266-20.744-6.798-4.648-4.532-6.973-11.621-6.973-21.267V56.653h-12.725V36.606h12.725V18.303l23.533-2.44v20.743h19.175v20.047h-19.175v41.312c0 5.578 2.44 8.367 7.321 8.367h9.762v20.918h-12.899z"
+        fill="url(#chat-text_svg__paint3_linear_59620_161)"
+      />
+      <defs>
+        <linearGradient
+          id="chat-text_svg__paint0_linear_59620_161"
+          x1={187.057}
+          y1={-44.095}
+          x2={187.057}
+          y2={166.905}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#B666FA" />
+          <stop offset={1} stopColor="#A347EC" />
+        </linearGradient>
+        <linearGradient
+          id="chat-text_svg__paint1_linear_59620_161"
+          x1={187.057}
+          y1={-44.095}
+          x2={187.057}
+          y2={166.905}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#B666FA" />
+          <stop offset={1} stopColor="#A347EC" />
+        </linearGradient>
+        <linearGradient
+          id="chat-text_svg__paint2_linear_59620_161"
+          x1={187.057}
+          y1={-44.095}
+          x2={187.057}
+          y2={166.905}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#B666FA" />
+          <stop offset={1} stopColor="#A347EC" />
+        </linearGradient>
+        <linearGradient
+          id="chat-text_svg__paint3_linear_59620_161"
+          x1={187.057}
+          y1={-44.095}
+          x2={187.057}
+          y2={166.905}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#B666FA" />
+          <stop offset={1} stopColor="#A347EC" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgChatText

package/react/Icons/DriveText.jsx

@@ -0,0 +1,88 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/illus/drive-text.svg` to regenerate;
+import React from 'react'
+
+function SvgDriveText(props) {
+  return (
+    <svg viewBox="0 0 374 123" fill="none" {...props}>
+      <path
+        d="M0 3.66h41.593c13.088 0 24.068 2.496 32.941 7.487 8.984 4.991 15.695 11.868 20.131 20.63 4.437 8.762 6.655 18.855 6.655 30.28 0 11.313-2.218 21.35-6.655 30.113-4.436 8.762-11.147 15.639-20.13 20.63-8.874 4.88-19.854 7.32-32.942 7.32H0V3.66zm38.764 95.497c13.088 0 22.738-3.327 28.95-9.982 6.321-6.766 9.482-15.805 9.482-27.118 0-11.314-3.16-20.353-9.483-27.119-6.211-6.877-15.86-10.315-28.948-10.315H23.291v74.534h15.472z"
+        fill="url(#drive-text_svg__paint0_linear_59620_158)"
+      />
+      <path
+        d="M112.067 33.607h21.794v16.47c1.553-6.321 4.548-11.09 8.984-14.307 4.548-3.217 10.482-4.603 17.802-4.16v21.13h-3.161c-6.655 0-12.145 2.107-16.471 6.322-4.325 4.104-6.488 9.705-6.488 16.803v44.255h-22.46V33.607z"
+        fill="url(#drive-text_svg__paint1_linear_59620_158)"
+      />
+      <path
+        d="M168.119 33.607h22.46v86.513h-22.46V33.607zm-2.329-20.464c0-3.66 1.276-6.765 3.827-9.316C172.279 1.276 175.495 0 179.266 0c3.882 0 7.099 1.276 9.65 3.827 2.551 2.55 3.826 5.656 3.826 9.316 0 3.771-1.275 6.933-3.826 9.483-2.551 2.551-5.768 3.827-9.65 3.827-3.771 0-6.987-1.276-9.649-3.826-2.551-2.662-3.827-5.823-3.827-9.484z"
+        fill="url(#drive-text_svg__paint2_linear_59620_158)"
+      />
+      <path
+        d="M194.713 33.607h26.619l17.303 49.412c1.553 4.215 2.773 8.818 3.66 13.809.887-4.991 2.107-9.594 3.66-13.809l17.303-49.412h26.12l-35.936 86.513h-22.627l-36.102-86.513z"
+        fill="url(#drive-text_svg__paint3_linear_59620_158)"
+      />
+      <path
+        d="M329.45 122.283c-8.762 0-16.526-1.997-23.292-5.99-6.766-4.103-12.034-9.594-15.805-16.47-3.771-6.877-5.657-14.475-5.657-22.793 0-8.208 1.941-15.805 5.823-22.793 3.882-6.988 9.206-12.533 15.972-16.637 6.877-4.104 14.53-6.156 22.959-6.156 8.43 0 15.972 2.052 22.627 6.156 6.765 4.104 11.978 9.65 15.638 16.637 3.772 6.877 5.657 14.474 5.657 22.793 0 2.773-.222 5.435-.665 7.986h-64.719c1.331 5.213 3.827 9.427 7.487 12.644 3.771 3.105 8.429 4.658 13.975 4.658 4.658 0 8.818-1.053 12.478-3.16 3.66-2.219 6.544-5.047 8.651-8.486l17.469 13.144c-3.549 5.545-8.762 10.037-15.639 13.476-6.876 3.327-14.529 4.991-22.959 4.991zm21.296-54.07c-1.331-4.992-3.938-9.151-7.82-12.479-3.882-3.327-8.485-4.99-13.809-4.99-5.213 0-9.76 1.608-13.642 4.824-3.771 3.217-6.267 7.431-7.487 12.644h42.758z"
+        fill="url(#drive-text_svg__paint4_linear_59620_158)"
+      />
+      <defs>
+        <linearGradient
+          id="drive-text_svg__paint0_linear_59620_158"
+          x1={172.182}
+          y1={-31}
+          x2={172.182}
+          y2={137.5}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FF6372" />
+          <stop offset={1} stopColor="#FF3347" />
+        </linearGradient>
+        <linearGradient
+          id="drive-text_svg__paint1_linear_59620_158"
+          x1={172.182}
+          y1={-31}
+          x2={172.182}
+          y2={137.5}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FF6372" />
+          <stop offset={1} stopColor="#FF3347" />
+        </linearGradient>
+        <linearGradient
+          id="drive-text_svg__paint2_linear_59620_158"
+          x1={172.182}
+          y1={-31}
+          x2={172.182}
+          y2={137.5}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FF6372" />
+          <stop offset={1} stopColor="#FF3347" />
+        </linearGradient>
+        <linearGradient
+          id="drive-text_svg__paint3_linear_59620_158"
+          x1={172.182}
+          y1={-31}
+          x2={172.182}
+          y2={137.5}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FF6372" />
+          <stop offset={1} stopColor="#FF3347" />
+        </linearGradient>
+        <linearGradient
+          id="drive-text_svg__paint4_linear_59620_158"
+          x1={172.182}
+          y1={-31}
+          x2={172.182}
+          y2={137.5}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FF6372" />
+          <stop offset={1} stopColor="#FF3347" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgDriveText

package/react/Icons/MailText.jsx

@@ -0,0 +1,73 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/illus/mail-text.svg` to regenerate;
+import React from 'react'
+
+function SvgMailText(props) {
+  return (
+    <svg viewBox="0 0 311 125" fill="none" {...props}>
+      <path
+        d="M0 5.046h29.266l24.389 51.973c6.84 14.465 11.213 24.949 13.12 31.453 1.569-6.055 5.886-16.54 12.95-31.453l24.557-51.973h28.257v117.738h-23.043v-47.6c0-7.737.112-14.016.337-18.838.224-4.822.672-9.924 1.345-15.306l-39.19 81.744H60.551L21.36 41.04c.673 5.382 1.121 10.484 1.346 15.306.224 4.822.336 11.1.336 18.838v47.6H0V5.046z"
+        fill="url(#mail-text_svg__paint0_linear_59620_156)"
+      />
+      <path
+        d="M187.488 124.97c-7.849 0-15.081-2.018-21.697-6.055-6.616-4.149-11.886-9.699-15.811-16.651-3.812-6.952-5.718-14.577-5.718-22.875s1.906-15.923 5.718-22.875c3.925-7.064 9.195-12.67 15.811-16.82 6.616-4.148 13.848-6.223 21.697-6.223 7.177 0 12.951 1.346 17.325 4.037 4.485 2.691 7.961 6.56 10.428 11.605V35.322h22.538v87.463h-22.034v-14.297c-2.579 5.27-6.111 9.363-10.596 12.278-4.373 2.804-10.26 4.205-17.661 4.205zm-20.52-45.75c0 4.486 1.009 8.69 3.028 12.615 2.13 3.813 4.99 6.897 8.578 9.251 3.7 2.243 7.905 3.364 12.615 3.364 4.821 0 9.082-1.121 12.783-3.364 3.812-2.242 6.727-5.27 8.746-9.082 2.018-3.813 3.027-8.018 3.027-12.615 0-4.597-1.009-8.802-3.027-12.615-2.019-3.924-4.934-7.008-8.746-9.25-3.701-2.355-7.962-3.533-12.783-3.533-4.71 0-8.915 1.178-12.615 3.532-3.7 2.243-6.56 5.27-8.578 9.083-2.019 3.812-3.028 8.017-3.028 12.615z"
+        fill="url(#mail-text_svg__paint1_linear_59620_156)"
+      />
+      <path
+        d="M251.27 35.321h22.707v87.463H251.27V35.321zm-2.354-20.688c0-3.7 1.289-6.84 3.868-9.419 2.691-2.579 5.943-3.868 9.756-3.868 3.924 0 7.176 1.29 9.755 3.868 2.579 2.58 3.869 5.719 3.869 9.42 0 3.812-1.29 7.007-3.869 9.586-2.579 2.58-5.831 3.869-9.755 3.869-3.813 0-7.065-1.29-9.756-3.869-2.579-2.69-3.868-5.886-3.868-9.587z"
+        fill="url(#mail-text_svg__paint2_linear_59620_156)"
+      />
+      <path
+        d="M287.406 0h22.707v122.784h-22.707V0z"
+        fill="url(#mail-text_svg__paint3_linear_59620_156)"
+      />
+      <defs>
+        <linearGradient
+          id="mail-text_svg__paint0_linear_59620_156"
+          x1={35.555}
+          y1={-30.948}
+          x2={35.555}
+          y2={124.826}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#57B9FF" />
+          <stop offset={1} stopColor="#0B84FF" />
+        </linearGradient>
+        <linearGradient
+          id="mail-text_svg__paint1_linear_59620_156"
+          x1={35.555}
+          y1={-30.948}
+          x2={35.555}
+          y2={124.826}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#57B9FF" />
+          <stop offset={1} stopColor="#0B84FF" />
+        </linearGradient>
+        <linearGradient
+          id="mail-text_svg__paint2_linear_59620_156"
+          x1={35.555}
+          y1={-30.948}
+          x2={35.555}
+          y2={124.826}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#57B9FF" />
+          <stop offset={1} stopColor="#0B84FF" />
+        </linearGradient>
+        <linearGradient
+          id="mail-text_svg__paint3_linear_59620_156"
+          x1={35.555}
+          y1={-30.948}
+          x2={35.555}
+          y2={124.826}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#57B9FF" />
+          <stop offset={1} stopColor="#0B84FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgMailText

package/react/Icons/NotesText.jsx

@@ -0,0 +1,88 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/illus/notes-text.svg` to regenerate;
+import React from 'react'
+
+function SvgNotesText(props) {
+  return (
+    <svg viewBox="0 0 479 136" fill="none" {...props}>
+      <path
+        d="M0 132.881V0h20.122l64.732 76.881c3.037 3.417 6.075 7.024 8.732 11.01-.759-5.695-.949-13.857-.949-21.64V0h24.298v132.881H99.661l-67.2-79.918c-3.037-3.417-6.075-7.024-8.732-11.01.76 5.694.949 13.857.949 21.64v69.288H0z"
+        fill="url(#notes-text_svg__paint0_linear_59620_144)"
+      />
+      <path
+        d="M182.772 135.349c-30.562 0-52.583-23.159-52.583-51.634 0-28.474 22.021-51.824 52.583-51.824 30.563 0 52.583 23.35 52.583 51.824 0 28.475-22.02 51.634-52.583 51.634zm-26.956-51.634c0 15.376 10.631 28.285 26.956 28.285 16.326 0 26.956-12.909 26.956-28.285s-10.63-28.474-26.956-28.474c-16.325 0-26.956 13.098-26.956 28.474z"
+        fill="url(#notes-text_svg__paint1_linear_59620_144)"
+      />
+      <path
+        d="M278.718 132.881c-19.552 0-30.183-9.112-30.183-30.563V56h-13.857V34.17h13.857V14.236l25.627-2.657v22.59h20.882V56h-20.882v44.99c0 6.264 3.038 9.112 7.973 9.112h10.631v22.779h-14.048z"
+        fill="url(#notes-text_svg__paint2_linear_59620_144)"
+      />
+      <path
+        d="M348.282 135.349c-30.563 0-51.064-23.159-51.064-51.634 0-28.474 21.451-52.013 51.064-52.013 29.614 0 50.115 23.539 50.115 52.013 0 2.848-.19 5.885-.759 9.112h-73.844c2.847 11.58 11.58 19.742 24.488 19.742 11.01 0 19.553-5.695 24.108-13.288l19.933 14.997c-7.973 12.339-24.488 21.071-44.041 21.071zm-24.488-61.695h48.786c-2.847-11.01-12.149-19.932-24.678-19.932-12.149 0-21.261 8.163-24.108 19.932z"
+        fill="url(#notes-text_svg__paint3_linear_59620_144)"
+      />
+      <path
+        d="M440.657 135.349c-16.705 0-30.183-5.695-41.004-17.275l17.275-15.756c7.213 8.163 14.807 12.15 23.159 12.15 8.732 0 13.668-4.366 13.668-10.251 0-5.126-2.468-7.973-18.034-11.58-26.386-6.264-30.373-18.224-30.373-30.752 0-17.275 13.668-30.183 36.827-30.183 15.946 0 26.577 3.986 36.638 17.084l-18.604 14.238c-4.746-7.594-10.82-10.63-17.464-10.63-7.024 0-12.339 2.657-12.339 8.731 0 3.417 1.519 6.455 13.288 9.492 28.664 7.403 35.308 18.034 35.308 32.84 0 18.224-16.515 31.892-38.345 31.892z"
+        fill="url(#notes-text_svg__paint4_linear_59620_144)"
+      />
+      <defs>
+        <linearGradient
+          id="notes-text_svg__paint0_linear_59620_144"
+          x1={236.012}
+          y1={7.974}
+          x2={236.012}
+          y2={132.881}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFC953" />
+          <stop offset={1} stopColor="#FFB81E" />
+        </linearGradient>
+        <linearGradient
+          id="notes-text_svg__paint1_linear_59620_144"
+          x1={236.012}
+          y1={7.974}
+          x2={236.012}
+          y2={132.881}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFC953" />
+          <stop offset={1} stopColor="#FFB81E" />
+        </linearGradient>
+        <linearGradient
+          id="notes-text_svg__paint2_linear_59620_144"
+          x1={236.012}
+          y1={7.974}
+          x2={236.012}
+          y2={132.881}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFC953" />
+          <stop offset={1} stopColor="#FFB81E" />
+        </linearGradient>
+        <linearGradient
+          id="notes-text_svg__paint3_linear_59620_144"
+          x1={236.012}
+          y1={7.974}
+          x2={236.012}
+          y2={132.881}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFC953" />
+          <stop offset={1} stopColor="#FFB81E" />
+        </linearGradient>
+        <linearGradient
+          id="notes-text_svg__paint4_linear_59620_144"
+          x1={236.012}
+          y1={7.974}
+          x2={236.012}
+          y2={132.881}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFC953" />
+          <stop offset={1} stopColor="#FFB81E" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgNotesText

package/react/Icons/PassText.jsx

@@ -0,0 +1,15 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/illus/pass-text.svg` to regenerate;
+import React from 'react'
+
+function SvgPassText(props) {
+  return (
+    <svg viewBox="0 0 370 136" fill="none" {...props}>
+      <path
+        d="M0 132.881V0h44.8c29.803 0 48.027 14.047 48.027 41.953 0 28.094-18.224 42.711-48.027 42.711H26.576v48.217H0zm26.576-72.135h16.705c14.427 0 22.59-5.885 22.59-18.604 0-12.529-8.163-18.413-22.59-18.413H26.576v37.017zm116.25 74.603c-27.145 0-48.786-22.97-48.786-51.444 0-28.475 21.641-51.824 48.786-51.824 17.085 0 26.007 7.024 31.322 17.654V34.17h25.438v98.712h-24.868v-16.135c-5.315 11.2-14.237 18.603-31.892 18.603zm-23.159-51.634c0 14.997 11.01 28.475 27.336 28.475 16.895 0 27.715-12.909 27.715-28.285s-10.82-28.664-27.715-28.664c-16.326 0-27.336 13.098-27.336 28.474zm128.935 51.634c-16.705 0-30.183-5.695-41.003-17.275l17.274-15.756c7.214 8.163 14.807 12.15 23.159 12.15 8.733 0 13.668-4.366 13.668-10.251 0-5.126-2.468-7.973-18.034-11.58-26.386-6.264-30.372-18.224-30.372-30.752 0-17.275 13.667-30.183 36.827-30.183 15.945 0 26.576 3.986 36.637 17.084l-18.604 14.238c-4.745-7.594-10.82-10.63-17.464-10.63-7.024 0-12.339 2.657-12.339 8.731 0 3.417 1.519 6.455 13.288 9.492 28.665 7.403 35.309 18.034 35.309 32.84 0 18.224-16.516 31.892-38.346 31.892zm82.124 0c-16.705 0-30.183-5.695-41.004-17.275l17.275-15.756c7.213 8.163 14.807 12.15 23.159 12.15 8.732 0 13.668-4.366 13.668-10.251 0-5.126-2.468-7.973-18.034-11.58-26.386-6.264-30.373-18.224-30.373-30.752 0-17.275 13.668-30.183 36.827-30.183 15.946 0 26.577 3.986 36.638 17.084l-18.604 14.238c-4.745-7.594-10.82-10.63-17.464-10.63-7.024 0-12.339 2.657-12.339 8.731 0 3.417 1.519 6.455 13.288 9.492 28.664 7.403 35.308 18.034 35.308 32.84 0 18.224-16.515 31.892-38.345 31.892z"
+        fill="#A4A5B8"
+      />
+    </svg>
+  )
+}
+
+export default SvgPassText