@stack-spot/portal-layout 0.0.32 → 0.0.34

package/dist/layout.css

@@ -49,12 +49,12 @@ body {
   --toastify-font-family: 'Roboto', sans-serif;
 }
 
-#layout.menu-compact:not(.menu-compact-only-icons) {
+#layout:not(.menu-compact) {
   --menu-sections-width: 135px;
   --menu-item-height: 56px;
 }
 
-#layout.menu-compact-only-icons  {
+#layout.menu-compact  {
   --menu-sections-width: 56px;
   --menu-item-height: 56px;
 }
@@ -133,20 +133,24 @@ body {
 }
 
 #menu .toggle .expand,
-#layout.menu-compact-only-icons .toggle .collapse {
+#layout.menu-compact .toggle .collapse {
   opacity: 0;
 }
 
 #menu .toggle .collapse,
-#layout.menu-compact-only-icons .toggle .expand {
+#layout.menu-compact .toggle .expand {
   opacity: 1;
 }
 
-#layout.menu-compact-only-icons .section-label {
+#layout .section-label {
+  line-height: 0.875rem;
+}
+
+#layout.menu-compact .section-label {
   display: none;
 }
 
-#layout:not(.menu-compact-only-icons) .section-label {
+#layout:not(.menu-compact) .section-label {
   display: block;
 }
 
@@ -179,6 +183,7 @@ body {
   transition: background-color 0.2s;
   cursor: pointer;
   position: relative;
+  z-index: 2;
 }
 
 #menuSections > ul li a:before {
@@ -224,7 +229,7 @@ body {
   left: calc(var(--menu-sections-width) + 15px);
   bottom: 15px;
   background-color: var(--light-500);
-  border-radius: 0 8px 8px 0;
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -249,7 +254,7 @@ body {
   height: 0; 
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent; 
-  border-right: 12px solid var(--light-400);
+  border-right: 12px solid var(--light-500);
   position: fixed;
   /* header + menu sections padding + item height / 2 - arrow height / 2 */
   top: calc(var(--header-height) + 10px + var(--menu-item-height) / 2 - 12px);
@@ -458,6 +463,7 @@ i {
   top: 27%;
   right: 10px;
   background-color: inherit;
+  z-index: 1;
 }
 
 #menuSections .section-submenu-icon:focus-visible {

package/dist/svg/AI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AI.d.ts","sourceRoot":"","sources":["../../src/svg/AI.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,EAAE;;;6CA6BT,CAAA"}
+{"version":3,"file":"AI.d.ts","sourceRoot":"","sources":["../../src/svg/AI.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,EAAE;;;6CAgCd,CAAA"}

package/dist/svg/AI.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
 /* eslint-disable max-len */
-export const AI = ({ className, style }) => _jsxs("svg", { "aria-label": "A I", className: className, style: style, width: "139", height: "24", viewBox: "0 0 139 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_7624_1886)", children: [_jsx("path", { d: "M13.5108 20.4623C13.396 20.4623 13.2862 20.4848 13.1864 20.5222C13.1015 20.5547 13.0117 20.5746 12.9193 20.5821C12.9019 20.5821 12.8844 20.5821 12.8694 20.5821C12.2131 20.5821 11.6416 20.2128 11.3522 19.6713L11.3472 19.6638C11.3072 19.5889 11.2823 19.509 11.2673 19.4267C11.1874 18.97 10.7932 18.6256 10.314 18.6256C10.2017 18.6256 10.0944 18.6456 9.99459 18.683C9.90475 18.7155 9.81242 18.7379 9.72008 18.7454C9.70261 18.7454 9.68514 18.7454 9.67017 18.7454C8.99638 18.7454 8.42241 18.3711 8.14042 17.8096C8.10798 17.7422 8.08552 17.6698 8.07304 17.5975C7.99568 17.1383 7.59889 16.7864 7.11726 16.7864C7.00746 16.7864 6.90015 16.8064 6.80282 16.8413C6.72297 16.8688 6.64311 16.8888 6.55826 16.8937C6.53081 16.8937 6.50336 16.8962 6.4809 16.8962C5.76469 16.8962 5.14829 16.3797 4.88876 15.7583L4.85382 15.661C4.8139 15.5212 4.74652 15.3939 4.65418 15.2891C4.58181 15.2068 4.51443 15.1194 4.45454 15.0271C4.39964 14.9422 4.33975 14.8449 4.3098 14.78C4.20748 14.5554 4.12513 14.3109 4.12513 14.0838C4.12513 13.8093 4.19002 13.5497 4.30481 13.3202C4.3123 13.3052 4.32228 13.2877 4.33226 13.2703C4.39714 13.153 4.48199 13.0506 4.57932 12.9583C4.78145 12.7711 4.90373 12.4991 4.89126 12.1997C4.8688 11.6981 4.45953 11.2913 3.95793 11.2713C3.40143 11.2489 2.94475 11.6931 2.94475 12.2446C2.94475 12.5266 3.06454 12.7811 3.25669 12.9583C3.364 13.0581 3.46133 13.1729 3.5312 13.3027C3.54368 13.3276 3.55615 13.3501 3.56614 13.3676C3.66596 13.5847 3.72335 13.8268 3.72335 14.0838C3.72335 14.3408 3.70589 14.7975 3.34653 15.1344C3.10696 15.359 2.91481 15.6485 2.94725 16.0103C2.98468 16.4271 3.29163 16.7715 3.6984 16.8688C3.89804 16.9162 4.08271 16.8962 4.24991 16.8338C4.33725 16.8014 4.42709 16.7814 4.51942 16.7765C4.53689 16.7765 4.55187 16.7765 4.56434 16.7765C5.21567 16.7765 5.78964 17.1233 6.08162 17.6549C6.11905 17.7223 6.14151 17.7946 6.149 17.8695C6.2039 18.3561 6.61566 18.7329 7.11476 18.7329C7.23205 18.7329 7.34185 18.7105 7.44417 18.673C7.52652 18.6431 7.61137 18.6206 7.69871 18.6156C7.72367 18.6156 7.74363 18.6132 7.7611 18.6132C8.38498 18.6132 8.93399 18.95 9.23595 19.4516C9.23595 19.4541 9.24094 19.4591 9.24344 19.4641C9.29834 19.559 9.33827 19.6638 9.35823 19.7711C9.43809 20.2278 9.83488 20.5721 10.3115 20.5721C10.4313 20.5721 10.5436 20.5497 10.6484 20.5097C10.7457 20.4723 10.8481 20.4548 10.9529 20.4523C10.9579 20.4523 10.9628 20.4523 10.9678 20.4523C11.5867 20.4523 12.1183 20.7718 12.4177 21.2584C12.4202 21.2634 12.4227 21.2659 12.4252 21.2709C12.4901 21.3807 12.535 21.5005 12.56 21.6252C12.6498 22.0869 13.0616 22.4313 13.5532 22.4088C14.0548 22.3864 14.4616 21.9771 14.484 21.4755C14.5065 20.919 14.0623 20.4623 13.5108 20.4623ZM3.9205 9.53945C4.45704 9.53945 4.89375 9.10274 4.89375 8.5662C4.89375 8.02966 4.45704 7.59295 3.9205 7.59295C3.38396 7.59295 2.94725 8.02966 2.94725 8.5662C2.94725 9.10274 3.38396 9.53945 3.9205 9.53945ZM3.9205 5.86356C4.45704 5.86356 4.89375 5.42684 4.89375 4.8903C4.89375 4.35377 4.45704 3.91705 3.9205 3.91705C3.38396 3.91705 2.94725 4.35377 2.94725 4.8903C2.94725 5.42684 3.38396 5.86356 3.9205 5.86356Z", fill: "#FF9800" }), _jsx("path", { d: "M16.8376 18.3909C16.6479 18.3709 16.4658 18.3959 16.301 18.4558C16.2212 18.4857 16.1388 18.5107 16.0565 18.5306C15.9741 18.5506 15.8793 18.5681 15.8094 18.5681C15.3802 18.5681 15.0084 18.3235 14.8262 17.9642C14.7987 17.9118 14.7713 17.8194 14.7488 17.7421C14.7314 17.6822 14.7164 17.6198 14.7064 17.5574C14.6091 16.9834 14.1125 16.5467 13.5111 16.5467C13.3464 16.5467 13.1891 16.5816 13.0469 16.639C13.0219 16.649 12.9995 16.659 12.9745 16.669C12.8597 16.7089 12.7399 16.7314 12.6102 16.7314C12.1585 16.7314 11.7717 16.4594 11.5995 16.0726C11.5521 15.9653 11.5097 15.7257 11.5097 15.7257C11.4173 15.1492 10.9182 14.7075 10.3143 14.7075C10.1671 14.7075 10.0273 14.735 9.89755 14.7824C9.89755 14.7824 9.58811 14.8872 9.41841 14.8872C8.95175 14.8872 8.55247 14.5952 8.39275 14.186C8.35283 14.0836 8.3104 13.854 8.3104 13.854C8.258 13.577 8.11076 13.335 7.90363 13.1603C7.84624 13.1104 7.78884 13.058 7.73893 13.0006C7.68153 12.9357 7.61415 12.8558 7.57922 12.7959C7.48439 12.6337 7.43198 12.4466 7.43198 12.2469C7.43198 12.0124 7.50435 11.7952 7.62913 11.6156C7.65658 11.5781 7.7015 11.5257 7.74392 11.4808C7.79383 11.4284 7.84624 11.381 7.90114 11.3361C8.16566 11.114 8.33536 10.7821 8.33536 10.4077C8.33536 10.0334 8.16566 9.70151 7.90114 9.47941C7.84125 9.4295 7.78634 9.37959 7.73144 9.32219C7.71148 9.29973 7.69151 9.27977 7.67654 9.2623C7.52431 9.07264 7.43198 8.83057 7.43198 8.56854C7.43198 8.3714 7.48439 8.18423 7.57672 8.02452C7.61415 7.95714 7.69151 7.8673 7.7539 7.79992C7.79882 7.75001 7.84873 7.7026 7.90114 7.66018C8.18563 7.4231 8.35782 7.05626 8.33286 6.65199C8.29293 6.03559 7.78634 5.54398 7.16995 5.51902C6.47869 5.49157 5.90722 6.04558 5.90722 6.73184C5.90722 7.10368 6.07691 7.43807 6.34144 7.66018C6.39385 7.70509 6.44625 7.75251 6.49367 7.80242C6.54607 7.85732 6.60596 7.9272 6.63841 7.9796C6.74571 8.1493 6.8106 8.35393 6.8106 8.57104C6.8106 8.83307 6.71826 9.07513 6.56354 9.26479C6.54857 9.28226 6.5311 9.30223 6.51113 9.32469C6.45873 9.37959 6.40133 9.43199 6.34144 9.4819C6.07691 9.704 5.90722 10.0359 5.90722 10.4102C5.90722 10.7846 6.07691 11.119 6.34394 11.3411C6.39884 11.386 6.44875 11.4334 6.49866 11.4833C6.53359 11.5207 6.56853 11.5607 6.59099 11.5906C6.72824 11.7753 6.8106 12.0024 6.8106 12.2494C6.8106 12.479 6.74072 12.6911 6.62094 12.8683C6.59349 12.9107 6.54108 12.9681 6.49866 13.0156C6.45124 13.068 6.39884 13.1154 6.34394 13.1603C6.05945 13.3974 5.88726 13.7617 5.91221 14.1685C5.95214 14.7799 6.45124 15.2715 7.06264 15.3014C7.24482 15.3114 7.4195 15.279 7.57922 15.2141C7.68403 15.1717 7.79133 15.1392 7.90363 15.1268C7.94855 15.1218 7.99347 15.1168 8.02591 15.1168C8.40773 15.1168 8.74462 15.3114 8.94426 15.6084C8.96173 15.6358 8.9817 15.6733 9.00166 15.7157C9.06155 15.843 9.10148 15.9802 9.12394 16.12C9.21378 16.6989 9.71538 17.1431 10.3218 17.1431C10.4765 17.1431 10.6213 17.1132 10.756 17.0608C10.8508 17.0234 10.9482 16.9959 11.048 16.9809C11.1104 16.9709 11.1753 16.966 11.2202 16.966C11.617 16.966 11.9663 17.1756 12.161 17.4925C12.1884 17.5349 12.2159 17.6023 12.2408 17.6647C12.2808 17.7645 12.3057 17.8693 12.3232 17.9766C12.4205 18.5481 12.9171 18.9823 13.5185 18.9823C13.6708 18.9823 13.818 18.9524 13.9528 18.9025C14.0651 18.8601 14.1824 18.8301 14.3021 18.8126C14.3446 18.8052 14.387 18.8027 14.4194 18.8027C14.8611 18.8027 15.2405 19.0622 15.4176 19.4365C15.4376 19.4789 15.4576 19.5438 15.475 19.6037C15.495 19.6711 15.5075 19.741 15.52 19.8108C15.6148 20.3848 16.1139 20.824 16.7178 20.824C17.4165 20.824 17.978 20.2326 17.9281 19.5239C17.8882 18.9399 17.4265 18.4658 16.8476 18.4034M7.11755 4.26378C7.78634 4.26378 8.33037 3.71975 8.33037 3.05096C8.33037 2.38216 7.78634 1.83813 7.11755 1.83813C6.44875 1.83813 5.90472 2.38216 5.90472 3.05096C5.90472 3.71975 6.44875 4.26378 7.11755 4.26378Z", fill: "#FF9800" }), _jsx("path", { d: "M0.7237 14.815C1.12298 14.815 1.4474 14.4856 1.4474 14.0813C1.4474 13.6771 1.12298 13.3476 0.7237 13.3476C0.324417 13.3476 0 13.6771 0 14.0813C0 14.4856 0.324417 14.815 0.7237 14.815ZM0.7237 11.1391C1.12298 11.1391 1.4474 10.8097 1.4474 10.4054C1.4474 10.0012 1.12298 9.67175 0.7237 9.67175C0.324417 9.67175 0 10.0012 0 10.4054C0 10.8097 0.324417 11.1391 0.7237 11.1391ZM0.7237 7.46321C1.12298 7.46321 1.4474 7.13381 1.4474 6.72953C1.4474 6.32526 1.12298 5.99585 0.7237 5.99585C0.324417 5.99585 0 6.32526 0 6.72953C0 7.13381 0.324417 7.46321 0.7237 7.46321ZM10.314 22.5411C10.2865 22.5411 10.0619 22.5561 9.97957 22.5561C9.06122 22.5561 8.26765 22.0495 7.86837 21.3058C7.83842 21.2509 7.77104 21.1262 7.77104 21.1262C7.65625 20.8766 7.40669 20.7019 7.11722 20.7019C7.09226 20.7019 6.87016 20.7244 6.78032 20.7244C5.89441 20.7244 5.1233 20.2502 4.71154 19.549C4.66163 19.4642 4.56929 19.277 4.56929 19.277C4.452 19.0324 4.20744 18.8627 3.92046 18.8627C3.90049 18.8627 3.66841 18.8827 3.57109 18.8827C2.64275 18.8827 1.84169 18.3636 1.4474 17.6075C1.42744 17.5701 1.40997 17.5326 1.39499 17.4927C1.29018 17.2182 1.03065 17.0235 0.7237 17.0235C0.324417 17.0235 0 17.3529 0 17.7572C0 18.1615 0.324417 18.4909 0.7237 18.4909C0.756142 18.4909 0.985729 18.4734 1.06559 18.4734C1.90907 18.4734 2.65024 18.9027 3.07198 19.549C3.14186 19.6563 3.25915 19.8909 3.25915 19.8909C3.37144 20.1479 3.62349 20.3276 3.92046 20.3276C3.94791 20.3276 4.175 20.3151 4.25735 20.3151C5.15574 20.3151 5.93434 20.7993 6.34111 21.5155C6.38104 21.5853 6.46339 21.7401 6.46339 21.7401C6.57818 21.9921 6.82773 22.1668 7.11971 22.1668C7.14467 22.1668 7.36926 22.1518 7.45411 22.1518C8.33004 22.1518 9.09616 22.6135 9.51042 23.3023C9.56532 23.3921 9.66514 23.5917 9.66514 23.5917C9.78243 23.8363 10.027 24.0085 10.314 24.0085C10.7133 24.0085 11.0377 23.6791 11.0377 23.2748C11.0377 22.8705 10.7133 22.5411 10.314 22.5411Z", fill: "#FF9800" }), _jsx("path", { d: "M10.3141 2.41734C10.9829 2.41734 11.527 1.87332 11.527 1.20452C11.527 0.535722 10.9829 -0.00830078 10.3141 -0.00830078C9.64534 -0.00830078 9.10132 0.535722 9.10132 1.20452C9.10132 1.87332 9.64534 2.41734 10.3141 2.41734Z", fill: "#FF6633" }), _jsx("path", { d: "M10.3141 6.09556C10.9829 6.09556 11.527 5.55154 11.527 4.88274C11.527 4.21394 10.9829 3.66992 10.3141 3.66992C9.64534 3.66992 9.10132 4.21394 9.10132 4.88274C9.10132 5.55154 9.64534 6.09556 10.3141 6.09556Z", fill: "#FF6633" }), _jsx("path", { d: "M10.3141 9.77159C10.9829 9.77159 11.527 9.22757 11.527 8.55877C11.527 7.88997 10.9829 7.34595 10.3141 7.34595C9.64534 7.34595 9.10132 7.88997 9.10132 8.55877C9.10132 9.22757 9.64534 9.77159 10.3141 9.77159Z", fill: "#FF6633" }), _jsx("path", { d: "M10.3141 13.4474C10.9829 13.4474 11.527 12.9034 11.527 12.2346C11.527 11.5658 10.9829 11.0218 10.3141 11.0218C9.64534 11.0218 9.10132 11.5658 9.10132 12.2346C9.10132 12.9034 9.64534 13.4474 10.3141 13.4474Z", fill: "#FF6633" }), _jsx("path", { d: "M13.5107 4.25639C14.1795 4.25639 14.7236 3.71237 14.7236 3.04357C14.7236 2.37477 14.1795 1.83075 13.5107 1.83075C12.8419 1.83075 12.2979 2.37477 12.2979 3.04357C12.2979 3.71237 12.8419 4.25639 13.5107 4.25639Z", fill: "#FF6633" }), _jsx("path", { d: "M13.5107 7.93223C14.1795 7.93223 14.7236 7.38821 14.7236 6.71941C14.7236 6.05061 14.1795 5.50659 13.5107 5.50659C12.8419 5.50659 12.2979 6.05061 12.2979 6.71941C12.2979 7.38821 12.8419 7.93223 13.5107 7.93223Z", fill: "#FF6633" }), _jsx("path", { d: "M13.5107 11.6107C14.1795 11.6107 14.7236 11.0667 14.7236 10.3979C14.7236 9.72908 14.1795 9.18506 13.5107 9.18506C12.8419 9.18506 12.2979 9.72908 12.2979 10.3979C12.2979 11.0667 12.8419 11.6107 13.5107 11.6107Z", fill: "#FF6633" }), _jsx("path", { d: "M13.5107 15.2865C14.1795 15.2865 14.7236 14.7425 14.7236 14.0737C14.7236 13.4049 14.1795 12.8609 13.5107 12.8609C12.8419 12.8609 12.2979 13.4049 12.2979 14.0737C12.2979 14.7425 12.8419 15.2865 13.5107 15.2865Z", fill: "#FF6633" }), _jsx("path", { d: "M16.7103 6.09556C17.3791 6.09556 17.9231 5.55154 17.9231 4.88274C17.9231 4.21394 17.3791 3.66992 16.7103 3.66992C16.0415 3.66992 15.4974 4.21394 15.4974 4.88274C15.4974 5.55154 16.0415 6.09556 16.7103 6.09556Z", fill: "#FF6633" }), _jsx("path", { d: "M16.7103 9.77159C17.3791 9.77159 17.9231 9.22757 17.9231 8.55877C17.9231 7.88997 17.3791 7.34595 16.7103 7.34595C16.0415 7.34595 15.4974 7.88997 15.4974 8.55877C15.4974 9.22757 16.0415 9.77159 16.7103 9.77159Z", fill: "#FF6633" }), _jsx("path", { d: "M16.7103 13.4474C17.3791 13.4474 17.9231 12.9034 17.9231 12.2346C17.9231 11.5658 17.3791 11.0218 16.7103 11.0218C16.0415 11.0218 15.4974 11.5658 15.4974 12.2346C15.4974 12.9034 16.0415 13.4474 16.7103 13.4474Z", fill: "#FF6633" }), _jsx("path", { d: "M16.7103 17.1258C17.3791 17.1258 17.9231 16.5818 17.9231 15.913C17.9231 15.2442 17.3791 14.7001 16.7103 14.7001C16.0415 14.7001 15.4974 15.2442 15.4974 15.913C15.4974 16.5818 16.0415 17.1258 16.7103 17.1258Z", fill: "#FF6633" }), _jsx("path", { d: "M19.9065 7.93223C20.5753 7.93223 21.1194 7.38821 21.1194 6.71941C21.1194 6.05061 20.5753 5.50659 19.9065 5.50659C19.2377 5.50659 18.6937 6.05061 18.6937 6.71941C18.6937 7.38821 19.2377 7.93223 19.9065 7.93223Z", fill: "#FF6633" }), _jsx("path", { d: "M19.9065 11.6107C20.5753 11.6107 21.1194 11.0667 21.1194 10.3979C21.1194 9.72908 20.5753 9.18506 19.9065 9.18506C19.2377 9.18506 18.6937 9.72908 18.6937 10.3979C18.6937 11.0667 19.2377 11.6107 19.9065 11.6107Z", fill: "#FF6633" }), _jsx("path", { d: "M19.9065 15.2865C20.5753 15.2865 21.1194 14.7425 21.1194 14.0737C21.1194 13.4049 20.5753 12.8609 19.9065 12.8609C19.2377 12.8609 18.6937 13.4049 18.6937 14.0737C18.6937 14.7425 19.2377 15.2865 19.9065 15.2865Z", fill: "#FF6633" }), _jsx("path", { d: "M19.9065 18.9624C20.5753 18.9624 21.1194 18.4184 21.1194 17.7496C21.1194 17.0808 20.5753 16.5367 19.9065 16.5367C19.2377 16.5367 18.6937 17.0808 18.6937 17.7496C18.6937 18.4184 19.2377 18.9624 19.9065 18.9624Z", fill: "#FF6633" }), _jsx("path", { d: "M81.6431 10.8508H78.6061C77.805 10.8508 77.1512 10.1995 77.1512 9.39594C77.1512 8.59238 77.8025 7.94105 78.6061 7.94105H81.98C82.4317 7.94105 82.801 7.57172 82.801 7.12003C82.801 6.66834 82.4317 6.299 81.98 6.299H78.6061C76.8991 6.299 75.5091 7.689 75.5091 9.39594C75.5091 11.1029 76.8991 12.4929 78.6061 12.4929H81.6431C82.6388 12.4929 83.4499 13.3039 83.4499 14.2996C83.4499 15.2953 82.6388 16.1064 81.6431 16.1064H76.3301C75.8785 16.1064 75.5091 16.4732 75.5091 16.9274C75.5091 17.3816 75.876 17.7484 76.3301 17.7484H81.6431C83.5447 17.7484 85.0919 16.2012 85.0919 14.3021C85.0919 12.403 83.5447 10.8533 81.6431 10.8533V10.8508ZM60.3339 8.12822H63.1863C63.6379 8.12822 64.0073 7.75888 64.0073 7.30719C64.0073 6.8555 63.6404 6.48617 63.1863 6.48617H60.3339C57.2295 6.48617 54.704 9.01163 54.704 12.1161C54.704 15.2205 57.2295 17.7459 60.3339 17.7459H63.1863C63.6379 17.7459 64.0073 17.3766 64.0073 16.9249C64.0073 16.4732 63.6404 16.1039 63.1863 16.1039H60.3339C58.1353 16.1039 56.346 14.3146 56.346 12.1161C56.346 9.9175 58.1353 8.12822 60.3339 8.12822ZM70.1188 11.9738L74.441 7.65157C74.7605 7.33215 74.7605 6.81058 74.441 6.49116C74.2813 6.33144 74.0717 6.25159 73.8596 6.25159C73.6475 6.25159 73.4403 6.33144 73.2781 6.49116L68.3769 11.3924C68.0575 11.7118 68.0575 12.2333 68.3769 12.5528L73.3255 17.5014C73.635 17.8108 74.1765 17.8108 74.486 17.5014C74.8054 17.182 74.8054 16.6604 74.486 16.341L70.1163 11.9713L70.1188 11.9738ZM108.073 7.9136H110.783V16.9224C110.783 17.3741 111.153 17.7434 111.604 17.7434C112.056 17.7434 112.425 17.3741 112.425 16.9224V7.9136H115.135C115.587 7.9136 115.956 7.54426 115.956 7.09258C115.956 6.64089 115.587 6.27155 115.135 6.27155H108.073C107.621 6.27155 107.252 6.64089 107.252 7.09258C107.252 7.54426 107.619 7.9136 108.073 7.9136ZM33.2575 10.8483H30.2205C29.4194 10.8483 28.7656 10.197 28.7656 9.39344C28.7656 8.58989 29.4169 7.93856 30.2205 7.93856H33.5969C34.0486 7.93856 34.4179 7.56922 34.4179 7.11753C34.4179 6.66584 34.0486 6.29651 33.5969 6.29651H30.2205C28.5135 6.29651 27.1235 7.68651 27.1235 9.39344C27.1235 11.1004 28.5135 12.4904 30.2205 12.4904H33.2575C34.2532 12.4904 35.0643 13.3014 35.0643 14.2971C35.0643 15.2928 34.2532 16.1039 33.2575 16.1039H27.9446C27.4929 16.1039 27.1235 16.4707 27.1235 16.9249C27.1235 17.3791 27.4929 17.7459 27.9446 17.7459H33.2575C35.1591 17.7459 36.7063 16.1987 36.7063 14.2996C36.7063 12.4005 35.1591 10.8508 33.2575 10.8508V10.8483ZM45.9298 7.09258C45.9298 6.64089 45.5604 6.27155 45.1087 6.27155H36.4293C35.9776 6.27155 35.6083 6.64089 35.6083 7.09258C35.6083 7.54426 35.9751 7.9136 36.4293 7.9136H38.6952V16.9224C38.6952 17.3741 39.0646 17.7434 39.5163 17.7434C39.968 17.7434 40.3373 17.3741 40.3373 16.9224V7.9136H45.1087C45.5604 7.9136 45.9298 7.54426 45.9298 7.09258ZM52.1735 6.39633L52.1411 6.4088L52.1087 6.42627C52.0088 6.47369 51.934 6.5236 51.8716 6.58599L42.1141 16.3435C41.7947 16.6629 41.7947 17.1844 42.1141 17.5039C42.4236 17.8133 42.9651 17.8133 43.2745 17.5039L51.642 9.1364L51.6495 16.7852C51.6495 17.2369 52.0188 17.6037 52.4705 17.6037C52.9247 17.6037 53.2915 17.2344 53.2915 16.7827L53.2815 7.15995C53.2815 6.61344 52.745 6.17922 52.1735 6.39633ZM66.2133 6.33893C65.7616 6.33893 65.3923 6.70577 65.3923 7.15995L65.3823 16.7827C65.3823 17.2344 65.7491 17.6037 66.2008 17.6037C66.655 17.6037 67.0219 17.2369 67.0219 16.7852L67.0318 7.16245C67.0318 6.94284 66.947 6.73821 66.7923 6.581C66.6376 6.42627 66.4304 6.34143 66.2133 6.33893ZM101.962 6.26656C98.7973 6.26656 96.2219 8.84193 96.2219 12.0038C96.2219 15.1656 98.7973 17.7409 101.962 17.7409C105.126 17.7409 107.699 15.1681 107.699 12.0038C107.699 8.83944 105.126 6.26656 101.962 6.26656ZM101.962 16.1014C99.7032 16.1014 97.864 14.2647 97.864 12.0038C97.864 9.74281 99.7032 7.90611 101.962 7.90611C104.22 7.90611 106.059 9.74281 106.059 12.0038C106.059 14.2647 104.223 16.1014 101.962 16.1014ZM90.7193 6.29401H86.9885C86.5368 6.29401 86.1675 6.66335 86.1675 7.11504V16.9199C86.1675 17.3716 86.5368 17.7409 86.9885 17.7409C87.4402 17.7409 87.8095 17.3716 87.8095 16.9199V15.1331H90.7443C93.1549 15.1331 95.1389 13.1517 95.1389 10.7161C95.1389 8.28044 93.1574 6.29651 90.7193 6.29651V6.29401ZM90.7368 13.4911H87.8095V7.93606H90.7193C92.2515 7.93606 93.4968 9.18132 93.4968 10.7136C93.4968 12.2458 92.259 13.4811 90.7368 13.4911Z", fill: theme.color.light.contrastText })] }), _jsx("path", { d: "M132.351 6.30888L132.318 6.32147L132.285 6.33909C132.185 6.38693 132.109 6.43728 132.046 6.50022L122.202 16.3442C121.88 16.6665 121.88 17.1926 122.202 17.5149C122.515 17.8271 123.061 17.8271 123.373 17.5149L131.815 9.07325L131.822 16.7898C131.822 17.2455 132.195 17.6156 132.651 17.6156C133.109 17.6156 133.479 17.243 133.479 16.7873L133.469 7.07928C133.469 6.52792 132.927 6.08985 132.351 6.30888ZM137.254 6.25098C136.798 6.25098 136.425 6.62107 136.425 7.07928L136.415 16.7873C136.415 17.243 136.785 17.6156 137.241 17.6156C137.699 17.6156 138.069 17.2455 138.069 16.7898L138.079 7.0818C138.079 6.86025 137.994 6.6538 137.838 6.49519C137.682 6.33909 137.473 6.25349 137.254 6.25098Z", fill: "#FF6600" }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_7624_1886", children: _jsx("rect", { width: "115.956", height: "24.0168", fill: "white", transform: "translate(0 -0.00836182)" }) }) })] });
+export const AI = ({ className, style }) => {
+    const t = useTranslate({ en: { AI: 'AI' }, pt: { AI: 'IA' } });
+    return _jsxs("svg", { "aria-label": t.AI, className: className, style: style, width: "139", height: "24", viewBox: "0 0 139 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_7624_1886)", children: [_jsx("path", { d: "M13.5108 20.4623C13.396 20.4623 13.2862 20.4848 13.1864 20.5222C13.1015 20.5547 13.0117 20.5746 12.9193 20.5821C12.9019 20.5821 12.8844 20.5821 12.8694 20.5821C12.2131 20.5821 11.6416 20.2128 11.3522 19.6713L11.3472 19.6638C11.3072 19.5889 11.2823 19.509 11.2673 19.4267C11.1874 18.97 10.7932 18.6256 10.314 18.6256C10.2017 18.6256 10.0944 18.6456 9.99459 18.683C9.90475 18.7155 9.81242 18.7379 9.72008 18.7454C9.70261 18.7454 9.68514 18.7454 9.67017 18.7454C8.99638 18.7454 8.42241 18.3711 8.14042 17.8096C8.10798 17.7422 8.08552 17.6698 8.07304 17.5975C7.99568 17.1383 7.59889 16.7864 7.11726 16.7864C7.00746 16.7864 6.90015 16.8064 6.80282 16.8413C6.72297 16.8688 6.64311 16.8888 6.55826 16.8937C6.53081 16.8937 6.50336 16.8962 6.4809 16.8962C5.76469 16.8962 5.14829 16.3797 4.88876 15.7583L4.85382 15.661C4.8139 15.5212 4.74652 15.3939 4.65418 15.2891C4.58181 15.2068 4.51443 15.1194 4.45454 15.0271C4.39964 14.9422 4.33975 14.8449 4.3098 14.78C4.20748 14.5554 4.12513 14.3109 4.12513 14.0838C4.12513 13.8093 4.19002 13.5497 4.30481 13.3202C4.3123 13.3052 4.32228 13.2877 4.33226 13.2703C4.39714 13.153 4.48199 13.0506 4.57932 12.9583C4.78145 12.7711 4.90373 12.4991 4.89126 12.1997C4.8688 11.6981 4.45953 11.2913 3.95793 11.2713C3.40143 11.2489 2.94475 11.6931 2.94475 12.2446C2.94475 12.5266 3.06454 12.7811 3.25669 12.9583C3.364 13.0581 3.46133 13.1729 3.5312 13.3027C3.54368 13.3276 3.55615 13.3501 3.56614 13.3676C3.66596 13.5847 3.72335 13.8268 3.72335 14.0838C3.72335 14.3408 3.70589 14.7975 3.34653 15.1344C3.10696 15.359 2.91481 15.6485 2.94725 16.0103C2.98468 16.4271 3.29163 16.7715 3.6984 16.8688C3.89804 16.9162 4.08271 16.8962 4.24991 16.8338C4.33725 16.8014 4.42709 16.7814 4.51942 16.7765C4.53689 16.7765 4.55187 16.7765 4.56434 16.7765C5.21567 16.7765 5.78964 17.1233 6.08162 17.6549C6.11905 17.7223 6.14151 17.7946 6.149 17.8695C6.2039 18.3561 6.61566 18.7329 7.11476 18.7329C7.23205 18.7329 7.34185 18.7105 7.44417 18.673C7.52652 18.6431 7.61137 18.6206 7.69871 18.6156C7.72367 18.6156 7.74363 18.6132 7.7611 18.6132C8.38498 18.6132 8.93399 18.95 9.23595 19.4516C9.23595 19.4541 9.24094 19.4591 9.24344 19.4641C9.29834 19.559 9.33827 19.6638 9.35823 19.7711C9.43809 20.2278 9.83488 20.5721 10.3115 20.5721C10.4313 20.5721 10.5436 20.5497 10.6484 20.5097C10.7457 20.4723 10.8481 20.4548 10.9529 20.4523C10.9579 20.4523 10.9628 20.4523 10.9678 20.4523C11.5867 20.4523 12.1183 20.7718 12.4177 21.2584C12.4202 21.2634 12.4227 21.2659 12.4252 21.2709C12.4901 21.3807 12.535 21.5005 12.56 21.6252C12.6498 22.0869 13.0616 22.4313 13.5532 22.4088C14.0548 22.3864 14.4616 21.9771 14.484 21.4755C14.5065 20.919 14.0623 20.4623 13.5108 20.4623ZM3.9205 9.53945C4.45704 9.53945 4.89375 9.10274 4.89375 8.5662C4.89375 8.02966 4.45704 7.59295 3.9205 7.59295C3.38396 7.59295 2.94725 8.02966 2.94725 8.5662C2.94725 9.10274 3.38396 9.53945 3.9205 9.53945ZM3.9205 5.86356C4.45704 5.86356 4.89375 5.42684 4.89375 4.8903C4.89375 4.35377 4.45704 3.91705 3.9205 3.91705C3.38396 3.91705 2.94725 4.35377 2.94725 4.8903C2.94725 5.42684 3.38396 5.86356 3.9205 5.86356Z", fill: "#FF9800" }), _jsx("path", { d: "M16.8376 18.3909C16.6479 18.3709 16.4658 18.3959 16.301 18.4558C16.2212 18.4857 16.1388 18.5107 16.0565 18.5306C15.9741 18.5506 15.8793 18.5681 15.8094 18.5681C15.3802 18.5681 15.0084 18.3235 14.8262 17.9642C14.7987 17.9118 14.7713 17.8194 14.7488 17.7421C14.7314 17.6822 14.7164 17.6198 14.7064 17.5574C14.6091 16.9834 14.1125 16.5467 13.5111 16.5467C13.3464 16.5467 13.1891 16.5816 13.0469 16.639C13.0219 16.649 12.9995 16.659 12.9745 16.669C12.8597 16.7089 12.7399 16.7314 12.6102 16.7314C12.1585 16.7314 11.7717 16.4594 11.5995 16.0726C11.5521 15.9653 11.5097 15.7257 11.5097 15.7257C11.4173 15.1492 10.9182 14.7075 10.3143 14.7075C10.1671 14.7075 10.0273 14.735 9.89755 14.7824C9.89755 14.7824 9.58811 14.8872 9.41841 14.8872C8.95175 14.8872 8.55247 14.5952 8.39275 14.186C8.35283 14.0836 8.3104 13.854 8.3104 13.854C8.258 13.577 8.11076 13.335 7.90363 13.1603C7.84624 13.1104 7.78884 13.058 7.73893 13.0006C7.68153 12.9357 7.61415 12.8558 7.57922 12.7959C7.48439 12.6337 7.43198 12.4466 7.43198 12.2469C7.43198 12.0124 7.50435 11.7952 7.62913 11.6156C7.65658 11.5781 7.7015 11.5257 7.74392 11.4808C7.79383 11.4284 7.84624 11.381 7.90114 11.3361C8.16566 11.114 8.33536 10.7821 8.33536 10.4077C8.33536 10.0334 8.16566 9.70151 7.90114 9.47941C7.84125 9.4295 7.78634 9.37959 7.73144 9.32219C7.71148 9.29973 7.69151 9.27977 7.67654 9.2623C7.52431 9.07264 7.43198 8.83057 7.43198 8.56854C7.43198 8.3714 7.48439 8.18423 7.57672 8.02452C7.61415 7.95714 7.69151 7.8673 7.7539 7.79992C7.79882 7.75001 7.84873 7.7026 7.90114 7.66018C8.18563 7.4231 8.35782 7.05626 8.33286 6.65199C8.29293 6.03559 7.78634 5.54398 7.16995 5.51902C6.47869 5.49157 5.90722 6.04558 5.90722 6.73184C5.90722 7.10368 6.07691 7.43807 6.34144 7.66018C6.39385 7.70509 6.44625 7.75251 6.49367 7.80242C6.54607 7.85732 6.60596 7.9272 6.63841 7.9796C6.74571 8.1493 6.8106 8.35393 6.8106 8.57104C6.8106 8.83307 6.71826 9.07513 6.56354 9.26479C6.54857 9.28226 6.5311 9.30223 6.51113 9.32469C6.45873 9.37959 6.40133 9.43199 6.34144 9.4819C6.07691 9.704 5.90722 10.0359 5.90722 10.4102C5.90722 10.7846 6.07691 11.119 6.34394 11.3411C6.39884 11.386 6.44875 11.4334 6.49866 11.4833C6.53359 11.5207 6.56853 11.5607 6.59099 11.5906C6.72824 11.7753 6.8106 12.0024 6.8106 12.2494C6.8106 12.479 6.74072 12.6911 6.62094 12.8683C6.59349 12.9107 6.54108 12.9681 6.49866 13.0156C6.45124 13.068 6.39884 13.1154 6.34394 13.1603C6.05945 13.3974 5.88726 13.7617 5.91221 14.1685C5.95214 14.7799 6.45124 15.2715 7.06264 15.3014C7.24482 15.3114 7.4195 15.279 7.57922 15.2141C7.68403 15.1717 7.79133 15.1392 7.90363 15.1268C7.94855 15.1218 7.99347 15.1168 8.02591 15.1168C8.40773 15.1168 8.74462 15.3114 8.94426 15.6084C8.96173 15.6358 8.9817 15.6733 9.00166 15.7157C9.06155 15.843 9.10148 15.9802 9.12394 16.12C9.21378 16.6989 9.71538 17.1431 10.3218 17.1431C10.4765 17.1431 10.6213 17.1132 10.756 17.0608C10.8508 17.0234 10.9482 16.9959 11.048 16.9809C11.1104 16.9709 11.1753 16.966 11.2202 16.966C11.617 16.966 11.9663 17.1756 12.161 17.4925C12.1884 17.5349 12.2159 17.6023 12.2408 17.6647C12.2808 17.7645 12.3057 17.8693 12.3232 17.9766C12.4205 18.5481 12.9171 18.9823 13.5185 18.9823C13.6708 18.9823 13.818 18.9524 13.9528 18.9025C14.0651 18.8601 14.1824 18.8301 14.3021 18.8126C14.3446 18.8052 14.387 18.8027 14.4194 18.8027C14.8611 18.8027 15.2405 19.0622 15.4176 19.4365C15.4376 19.4789 15.4576 19.5438 15.475 19.6037C15.495 19.6711 15.5075 19.741 15.52 19.8108C15.6148 20.3848 16.1139 20.824 16.7178 20.824C17.4165 20.824 17.978 20.2326 17.9281 19.5239C17.8882 18.9399 17.4265 18.4658 16.8476 18.4034M7.11755 4.26378C7.78634 4.26378 8.33037 3.71975 8.33037 3.05096C8.33037 2.38216 7.78634 1.83813 7.11755 1.83813C6.44875 1.83813 5.90472 2.38216 5.90472 3.05096C5.90472 3.71975 6.44875 4.26378 7.11755 4.26378Z", fill: "#FF9800" }), _jsx("path", { d: "M0.7237 14.815C1.12298 14.815 1.4474 14.4856 1.4474 14.0813C1.4474 13.6771 1.12298 13.3476 0.7237 13.3476C0.324417 13.3476 0 13.6771 0 14.0813C0 14.4856 0.324417 14.815 0.7237 14.815ZM0.7237 11.1391C1.12298 11.1391 1.4474 10.8097 1.4474 10.4054C1.4474 10.0012 1.12298 9.67175 0.7237 9.67175C0.324417 9.67175 0 10.0012 0 10.4054C0 10.8097 0.324417 11.1391 0.7237 11.1391ZM0.7237 7.46321C1.12298 7.46321 1.4474 7.13381 1.4474 6.72953C1.4474 6.32526 1.12298 5.99585 0.7237 5.99585C0.324417 5.99585 0 6.32526 0 6.72953C0 7.13381 0.324417 7.46321 0.7237 7.46321ZM10.314 22.5411C10.2865 22.5411 10.0619 22.5561 9.97957 22.5561C9.06122 22.5561 8.26765 22.0495 7.86837 21.3058C7.83842 21.2509 7.77104 21.1262 7.77104 21.1262C7.65625 20.8766 7.40669 20.7019 7.11722 20.7019C7.09226 20.7019 6.87016 20.7244 6.78032 20.7244C5.89441 20.7244 5.1233 20.2502 4.71154 19.549C4.66163 19.4642 4.56929 19.277 4.56929 19.277C4.452 19.0324 4.20744 18.8627 3.92046 18.8627C3.90049 18.8627 3.66841 18.8827 3.57109 18.8827C2.64275 18.8827 1.84169 18.3636 1.4474 17.6075C1.42744 17.5701 1.40997 17.5326 1.39499 17.4927C1.29018 17.2182 1.03065 17.0235 0.7237 17.0235C0.324417 17.0235 0 17.3529 0 17.7572C0 18.1615 0.324417 18.4909 0.7237 18.4909C0.756142 18.4909 0.985729 18.4734 1.06559 18.4734C1.90907 18.4734 2.65024 18.9027 3.07198 19.549C3.14186 19.6563 3.25915 19.8909 3.25915 19.8909C3.37144 20.1479 3.62349 20.3276 3.92046 20.3276C3.94791 20.3276 4.175 20.3151 4.25735 20.3151C5.15574 20.3151 5.93434 20.7993 6.34111 21.5155C6.38104 21.5853 6.46339 21.7401 6.46339 21.7401C6.57818 21.9921 6.82773 22.1668 7.11971 22.1668C7.14467 22.1668 7.36926 22.1518 7.45411 22.1518C8.33004 22.1518 9.09616 22.6135 9.51042 23.3023C9.56532 23.3921 9.66514 23.5917 9.66514 23.5917C9.78243 23.8363 10.027 24.0085 10.314 24.0085C10.7133 24.0085 11.0377 23.6791 11.0377 23.2748C11.0377 22.8705 10.7133 22.5411 10.314 22.5411Z", fill: "#FF9800" }), _jsx("path", { d: "M10.3141 2.41734C10.9829 2.41734 11.527 1.87332 11.527 1.20452C11.527 0.535722 10.9829 -0.00830078 10.3141 -0.00830078C9.64534 -0.00830078 9.10132 0.535722 9.10132 1.20452C9.10132 1.87332 9.64534 2.41734 10.3141 2.41734Z", fill: "#FF6633" }), _jsx("path", { d: "M10.3141 6.09556C10.9829 6.09556 11.527 5.55154 11.527 4.88274C11.527 4.21394 10.9829 3.66992 10.3141 3.66992C9.64534 3.66992 9.10132 4.21394 9.10132 4.88274C9.10132 5.55154 9.64534 6.09556 10.3141 6.09556Z", fill: "#FF6633" }), _jsx("path", { d: "M10.3141 9.77159C10.9829 9.77159 11.527 9.22757 11.527 8.55877C11.527 7.88997 10.9829 7.34595 10.3141 7.34595C9.64534 7.34595 9.10132 7.88997 9.10132 8.55877C9.10132 9.22757 9.64534 9.77159 10.3141 9.77159Z", fill: "#FF6633" }), _jsx("path", { d: "M10.3141 13.4474C10.9829 13.4474 11.527 12.9034 11.527 12.2346C11.527 11.5658 10.9829 11.0218 10.3141 11.0218C9.64534 11.0218 9.10132 11.5658 9.10132 12.2346C9.10132 12.9034 9.64534 13.4474 10.3141 13.4474Z", fill: "#FF6633" }), _jsx("path", { d: "M13.5107 4.25639C14.1795 4.25639 14.7236 3.71237 14.7236 3.04357C14.7236 2.37477 14.1795 1.83075 13.5107 1.83075C12.8419 1.83075 12.2979 2.37477 12.2979 3.04357C12.2979 3.71237 12.8419 4.25639 13.5107 4.25639Z", fill: "#FF6633" }), _jsx("path", { d: "M13.5107 7.93223C14.1795 7.93223 14.7236 7.38821 14.7236 6.71941C14.7236 6.05061 14.1795 5.50659 13.5107 5.50659C12.8419 5.50659 12.2979 6.05061 12.2979 6.71941C12.2979 7.38821 12.8419 7.93223 13.5107 7.93223Z", fill: "#FF6633" }), _jsx("path", { d: "M13.5107 11.6107C14.1795 11.6107 14.7236 11.0667 14.7236 10.3979C14.7236 9.72908 14.1795 9.18506 13.5107 9.18506C12.8419 9.18506 12.2979 9.72908 12.2979 10.3979C12.2979 11.0667 12.8419 11.6107 13.5107 11.6107Z", fill: "#FF6633" }), _jsx("path", { d: "M13.5107 15.2865C14.1795 15.2865 14.7236 14.7425 14.7236 14.0737C14.7236 13.4049 14.1795 12.8609 13.5107 12.8609C12.8419 12.8609 12.2979 13.4049 12.2979 14.0737C12.2979 14.7425 12.8419 15.2865 13.5107 15.2865Z", fill: "#FF6633" }), _jsx("path", { d: "M16.7103 6.09556C17.3791 6.09556 17.9231 5.55154 17.9231 4.88274C17.9231 4.21394 17.3791 3.66992 16.7103 3.66992C16.0415 3.66992 15.4974 4.21394 15.4974 4.88274C15.4974 5.55154 16.0415 6.09556 16.7103 6.09556Z", fill: "#FF6633" }), _jsx("path", { d: "M16.7103 9.77159C17.3791 9.77159 17.9231 9.22757 17.9231 8.55877C17.9231 7.88997 17.3791 7.34595 16.7103 7.34595C16.0415 7.34595 15.4974 7.88997 15.4974 8.55877C15.4974 9.22757 16.0415 9.77159 16.7103 9.77159Z", fill: "#FF6633" }), _jsx("path", { d: "M16.7103 13.4474C17.3791 13.4474 17.9231 12.9034 17.9231 12.2346C17.9231 11.5658 17.3791 11.0218 16.7103 11.0218C16.0415 11.0218 15.4974 11.5658 15.4974 12.2346C15.4974 12.9034 16.0415 13.4474 16.7103 13.4474Z", fill: "#FF6633" }), _jsx("path", { d: "M16.7103 17.1258C17.3791 17.1258 17.9231 16.5818 17.9231 15.913C17.9231 15.2442 17.3791 14.7001 16.7103 14.7001C16.0415 14.7001 15.4974 15.2442 15.4974 15.913C15.4974 16.5818 16.0415 17.1258 16.7103 17.1258Z", fill: "#FF6633" }), _jsx("path", { d: "M19.9065 7.93223C20.5753 7.93223 21.1194 7.38821 21.1194 6.71941C21.1194 6.05061 20.5753 5.50659 19.9065 5.50659C19.2377 5.50659 18.6937 6.05061 18.6937 6.71941C18.6937 7.38821 19.2377 7.93223 19.9065 7.93223Z", fill: "#FF6633" }), _jsx("path", { d: "M19.9065 11.6107C20.5753 11.6107 21.1194 11.0667 21.1194 10.3979C21.1194 9.72908 20.5753 9.18506 19.9065 9.18506C19.2377 9.18506 18.6937 9.72908 18.6937 10.3979C18.6937 11.0667 19.2377 11.6107 19.9065 11.6107Z", fill: "#FF6633" }), _jsx("path", { d: "M19.9065 15.2865C20.5753 15.2865 21.1194 14.7425 21.1194 14.0737C21.1194 13.4049 20.5753 12.8609 19.9065 12.8609C19.2377 12.8609 18.6937 13.4049 18.6937 14.0737C18.6937 14.7425 19.2377 15.2865 19.9065 15.2865Z", fill: "#FF6633" }), _jsx("path", { d: "M19.9065 18.9624C20.5753 18.9624 21.1194 18.4184 21.1194 17.7496C21.1194 17.0808 20.5753 16.5367 19.9065 16.5367C19.2377 16.5367 18.6937 17.0808 18.6937 17.7496C18.6937 18.4184 19.2377 18.9624 19.9065 18.9624Z", fill: "#FF6633" }), _jsx("path", { d: "M81.6431 10.8508H78.6061C77.805 10.8508 77.1512 10.1995 77.1512 9.39594C77.1512 8.59238 77.8025 7.94105 78.6061 7.94105H81.98C82.4317 7.94105 82.801 7.57172 82.801 7.12003C82.801 6.66834 82.4317 6.299 81.98 6.299H78.6061C76.8991 6.299 75.5091 7.689 75.5091 9.39594C75.5091 11.1029 76.8991 12.4929 78.6061 12.4929H81.6431C82.6388 12.4929 83.4499 13.3039 83.4499 14.2996C83.4499 15.2953 82.6388 16.1064 81.6431 16.1064H76.3301C75.8785 16.1064 75.5091 16.4732 75.5091 16.9274C75.5091 17.3816 75.876 17.7484 76.3301 17.7484H81.6431C83.5447 17.7484 85.0919 16.2012 85.0919 14.3021C85.0919 12.403 83.5447 10.8533 81.6431 10.8533V10.8508ZM60.3339 8.12822H63.1863C63.6379 8.12822 64.0073 7.75888 64.0073 7.30719C64.0073 6.8555 63.6404 6.48617 63.1863 6.48617H60.3339C57.2295 6.48617 54.704 9.01163 54.704 12.1161C54.704 15.2205 57.2295 17.7459 60.3339 17.7459H63.1863C63.6379 17.7459 64.0073 17.3766 64.0073 16.9249C64.0073 16.4732 63.6404 16.1039 63.1863 16.1039H60.3339C58.1353 16.1039 56.346 14.3146 56.346 12.1161C56.346 9.9175 58.1353 8.12822 60.3339 8.12822ZM70.1188 11.9738L74.441 7.65157C74.7605 7.33215 74.7605 6.81058 74.441 6.49116C74.2813 6.33144 74.0717 6.25159 73.8596 6.25159C73.6475 6.25159 73.4403 6.33144 73.2781 6.49116L68.3769 11.3924C68.0575 11.7118 68.0575 12.2333 68.3769 12.5528L73.3255 17.5014C73.635 17.8108 74.1765 17.8108 74.486 17.5014C74.8054 17.182 74.8054 16.6604 74.486 16.341L70.1163 11.9713L70.1188 11.9738ZM108.073 7.9136H110.783V16.9224C110.783 17.3741 111.153 17.7434 111.604 17.7434C112.056 17.7434 112.425 17.3741 112.425 16.9224V7.9136H115.135C115.587 7.9136 115.956 7.54426 115.956 7.09258C115.956 6.64089 115.587 6.27155 115.135 6.27155H108.073C107.621 6.27155 107.252 6.64089 107.252 7.09258C107.252 7.54426 107.619 7.9136 108.073 7.9136ZM33.2575 10.8483H30.2205C29.4194 10.8483 28.7656 10.197 28.7656 9.39344C28.7656 8.58989 29.4169 7.93856 30.2205 7.93856H33.5969C34.0486 7.93856 34.4179 7.56922 34.4179 7.11753C34.4179 6.66584 34.0486 6.29651 33.5969 6.29651H30.2205C28.5135 6.29651 27.1235 7.68651 27.1235 9.39344C27.1235 11.1004 28.5135 12.4904 30.2205 12.4904H33.2575C34.2532 12.4904 35.0643 13.3014 35.0643 14.2971C35.0643 15.2928 34.2532 16.1039 33.2575 16.1039H27.9446C27.4929 16.1039 27.1235 16.4707 27.1235 16.9249C27.1235 17.3791 27.4929 17.7459 27.9446 17.7459H33.2575C35.1591 17.7459 36.7063 16.1987 36.7063 14.2996C36.7063 12.4005 35.1591 10.8508 33.2575 10.8508V10.8483ZM45.9298 7.09258C45.9298 6.64089 45.5604 6.27155 45.1087 6.27155H36.4293C35.9776 6.27155 35.6083 6.64089 35.6083 7.09258C35.6083 7.54426 35.9751 7.9136 36.4293 7.9136H38.6952V16.9224C38.6952 17.3741 39.0646 17.7434 39.5163 17.7434C39.968 17.7434 40.3373 17.3741 40.3373 16.9224V7.9136H45.1087C45.5604 7.9136 45.9298 7.54426 45.9298 7.09258ZM52.1735 6.39633L52.1411 6.4088L52.1087 6.42627C52.0088 6.47369 51.934 6.5236 51.8716 6.58599L42.1141 16.3435C41.7947 16.6629 41.7947 17.1844 42.1141 17.5039C42.4236 17.8133 42.9651 17.8133 43.2745 17.5039L51.642 9.1364L51.6495 16.7852C51.6495 17.2369 52.0188 17.6037 52.4705 17.6037C52.9247 17.6037 53.2915 17.2344 53.2915 16.7827L53.2815 7.15995C53.2815 6.61344 52.745 6.17922 52.1735 6.39633ZM66.2133 6.33893C65.7616 6.33893 65.3923 6.70577 65.3923 7.15995L65.3823 16.7827C65.3823 17.2344 65.7491 17.6037 66.2008 17.6037C66.655 17.6037 67.0219 17.2369 67.0219 16.7852L67.0318 7.16245C67.0318 6.94284 66.947 6.73821 66.7923 6.581C66.6376 6.42627 66.4304 6.34143 66.2133 6.33893ZM101.962 6.26656C98.7973 6.26656 96.2219 8.84193 96.2219 12.0038C96.2219 15.1656 98.7973 17.7409 101.962 17.7409C105.126 17.7409 107.699 15.1681 107.699 12.0038C107.699 8.83944 105.126 6.26656 101.962 6.26656ZM101.962 16.1014C99.7032 16.1014 97.864 14.2647 97.864 12.0038C97.864 9.74281 99.7032 7.90611 101.962 7.90611C104.22 7.90611 106.059 9.74281 106.059 12.0038C106.059 14.2647 104.223 16.1014 101.962 16.1014ZM90.7193 6.29401H86.9885C86.5368 6.29401 86.1675 6.66335 86.1675 7.11504V16.9199C86.1675 17.3716 86.5368 17.7409 86.9885 17.7409C87.4402 17.7409 87.8095 17.3716 87.8095 16.9199V15.1331H90.7443C93.1549 15.1331 95.1389 13.1517 95.1389 10.7161C95.1389 8.28044 93.1574 6.29651 90.7193 6.29651V6.29401ZM90.7368 13.4911H87.8095V7.93606H90.7193C92.2515 7.93606 93.4968 9.18132 93.4968 10.7136C93.4968 12.2458 92.259 13.4811 90.7368 13.4911Z", fill: theme.color.light.contrastText })] }), _jsx("path", { d: "M132.351 6.30888L132.318 6.32147L132.285 6.33909C132.185 6.38693 132.109 6.43728 132.046 6.50022L122.202 16.3442C121.88 16.6665 121.88 17.1926 122.202 17.5149C122.515 17.8271 123.061 17.8271 123.373 17.5149L131.815 9.07325L131.822 16.7898C131.822 17.2455 132.195 17.6156 132.651 17.6156C133.109 17.6156 133.479 17.243 133.479 16.7873L133.469 7.07928C133.469 6.52792 132.927 6.08985 132.351 6.30888ZM137.254 6.25098C136.798 6.25098 136.425 6.62107 136.425 7.07928L136.415 16.7873C136.415 17.243 136.785 17.6156 137.241 17.6156C137.699 17.6156 138.069 17.2455 138.069 16.7898L138.079 7.0818C138.079 6.86025 137.994 6.6538 137.838 6.49519C137.682 6.33909 137.473 6.25349 137.254 6.25098Z", fill: "#FF6600" }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_7624_1886", children: _jsx("rect", { width: "115.956", height: "24.0168", fill: "white", transform: "translate(0 -0.00836182)" }) }) })] });
+};
 //# sourceMappingURL=AI.js.map

package/dist/svg/AI.js.map

@@ -1 +1 @@
-{"version":3,"file":"AI.js","sourceRoot":"","sources":["../../src/svg/AI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,4BAA4B;AAC5B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAuD,EAAE,EAAE,CAAC,6BAAgB,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aACpP,aAAG,QAAQ,EAAC,uBAAuB,aACjC,eAAM,CAAC,EAAC,0/FAA0/F,EAAC,IAAI,EAAC,SAAS,GAAG,EACphG,eAAM,CAAC,EAAC,grHAAgrH,EAAC,IAAI,EAAC,SAAS,GAAG,EAC1sH,eAAM,CAAC,EAAC,k2DAAk2D,EAAC,IAAI,EAAC,SAAS,GAAG,EAC53D,eAAM,CAAC,EAAC,8NAA8N,EAAC,IAAI,EAAC,SAAS,GAAG,EACxP,eAAM,CAAC,EAAC,gNAAgN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC1O,eAAM,CAAC,EAAC,gNAAgN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC1O,eAAM,CAAC,EAAC,gNAAgN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC1O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,iNAAiN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC3O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,msIAAmsI,EAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,GAAI,IAClvI,EACJ,eAAM,CAAC,EAAC,8qBAA8qB,EAAC,IAAI,EAAC,SAAS,GAAG,EACxsB,yBACE,mBAAU,EAAE,EAAC,iBAAiB,YAC5B,eAAM,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,0BAA0B,GAAG,GAClF,GACN,IACH,CAAA"}
+{"version":3,"file":"AI.js","sourceRoot":"","sources":["../../src/svg/AI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAE3D,4BAA4B;AAC5B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAuD,EAAE,EAAE;IAC9F,MAAM,CAAC,GAAG,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,CAAA;IAC9D,OAAO,6BAAiB,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC3J,aAAG,QAAQ,EAAC,uBAAuB,aACjC,eAAM,CAAC,EAAC,0/FAA0/F,EAAC,IAAI,EAAC,SAAS,GAAG,EACphG,eAAM,CAAC,EAAC,grHAAgrH,EAAC,IAAI,EAAC,SAAS,GAAG,EAC1sH,eAAM,CAAC,EAAC,k2DAAk2D,EAAC,IAAI,EAAC,SAAS,GAAG,EAC53D,eAAM,CAAC,EAAC,8NAA8N,EAAC,IAAI,EAAC,SAAS,GAAG,EACxP,eAAM,CAAC,EAAC,gNAAgN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC1O,eAAM,CAAC,EAAC,gNAAgN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC1O,eAAM,CAAC,EAAC,gNAAgN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC1O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,iNAAiN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC3O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,mNAAmN,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7O,eAAM,CAAC,EAAC,msIAAmsI,EAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,GAAI,IAClvI,EACJ,eAAM,CAAC,EAAC,8qBAA8qB,EAAC,IAAI,EAAC,SAAS,GAAG,EACxsB,yBACE,mBAAU,EAAE,EAAC,iBAAiB,YAC5B,eAAM,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,0BAA0B,GAAG,GAClF,GACN,IACH,CAAA;AACR,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/Layout.tsx

@@ -9,7 +9,7 @@ import { MenuContent } from './components/menu/MenuContent'
 import { MenuSections } from './components/menu/MenuSections'
 import { MenuProps } from './components/menu/types'
 import { Toaster } from './components/Toaster'
-import { elementIds } from './elements'
+import { elementIds, getLayoutElements } from './elements'
 import './layout.css'
 import { overlay } from './LayoutOverlayManager'
 
@@ -27,24 +27,26 @@ interface RawProps extends WithStyle {
   menuContent?: ReactElement,
   header?: ReactElement,
   children?: ReactNode,
-  compactMenu?: boolean,
   extra?: ReactNode,
   errorDescriptor?: DescriptionFn,
   onError?: ErrorHandler,
 }
 
 export const RawLayout = (
-  { menuSections, menuContent, header, compactMenu = true, children,
+  { menuSections, menuContent, header, children,
     extra, errorDescriptor, onError, className, style }:
     RawProps,
 ) => {
   // @ts-ignore
   const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
+  const { layout } = getLayoutElements()
+  const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
+    
   const classes = [
     menuContent ? 'menu-content-visible' : undefined,
-    compactMenu ? 'menu-compact' : undefined,
     menuSections ? undefined : 'no-menu-sections',
     className,
+    isCompactedOnlyIcons ? 'menu-compact' : undefined,
   ]
 
   useEffect(() => {
@@ -90,7 +92,6 @@ export const Layout = ({ menu, header, children, extra, errorDescriptor, onError
       ? <MenuContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.content} />
       : undefined
     }
-    compactMenu={menu.compact}
     errorDescriptor={errorDescriptor}
     onError={onError}
     extra={extra}

package/src/components/PortalSwitcher.tsx

@@ -97,7 +97,7 @@ export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
         colorScheme="light"
         aria-controls={PORTAL_SWITCHER_ID}
         aria-expanded={visible}
-        aria-label={t.portalSwitcher}
+        aria-label={`${t.portalSwitcher}: ${currentPortal?.acronym} ${t.selected}`}
         onClick={() => {
           setVisible(true)
           announce(`${t.portalSwitcher} ${t.selected}`)
@@ -123,8 +123,7 @@ export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
         target: '_self',
         href: portal.url,
         active: currentPortal?.acronym == portal.acronym,
-        onClick: () => announce(`${portal.acronym} ${t.selected}`),
-        iconRight: portal.acronym === currentPortal?.acronym ? <CheckCircleFill /> : <ArrowRight />,
+        iconRight: portal.acronym === currentPortal?.acronym ? <CheckCircleFill aria-label={t.selected} /> : <ArrowRight />,
       }))}
       visible={visible}
       maxHeight="21rem"

package/src/components/SelectionList.tsx

@@ -3,7 +3,7 @@ import { ArrowLeft, Check, ChevronRight } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { ReactElement, useMemo, useState } from 'react'
+import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'
 import { styled } from 'styled-components'
 import { useKeyboardControls } from './menu/use-keyboard-controls'
 import { Action } from './types'
@@ -174,6 +174,9 @@ export const SelectionList = ({
 }: SelectionListProps) => {
   const t = useTranslate(dictionary)
   const [current, setCurrent] = useState<CurrentItemList>({ items })
+  const { keyboardControlledElement: wrapper, attachKeyboardListeners, detachKeyboardListeners } = useKeyboardControls(
+    { onPressEscape: onHide, querySelectors: 'li.action a, li.collapsible a, button' },
+  )
 
   const listItems = useMemo(
     () => current.items.map(i => renderItem(
@@ -186,7 +189,26 @@ export const SelectionList = ({
     )),
     [current],
   )
-  const wrapper = useKeyboardControls({ onHide, querySelectors: 'li.action a, li.collapsible a, button', visible })
+
+  const hide = useCallback((event: Event) => {
+    const target = (event.target as HTMLElement | null)
+    // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
+    const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target)
+    const isAction = target?.classList?.contains('action') || !!target?.closest('.action')
+    if (!isClickInsideSelectionList || isAction) onHide?.()
+  }, [])
+
+  useEffect(() => {
+    if (visible) {
+      setCurrent({ items })
+      attachKeyboardListeners()
+      if (onHide) setTimeout(() => document.addEventListener('click', hide), 50)
+    }
+    else {
+      detachKeyboardListeners()
+      document.removeEventListener('click', hide)
+    }
+  }, [visible])
 
   return (
     <SelectionBox

package/src/components/menu/MenuSections.tsx

@@ -2,6 +2,8 @@ import { Flex, IconBox, Text } from '@citric/core'
 import { ChevronRight, Cog, Collapse, Expand } from '@citric/icons'
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useMemo, useState } from 'react'
+import { getLayoutElements } from '../../elements'
+import { elementIds } from '../../elements'
 import { MenuContent } from './MenuContent'
 import { MenuProps, MenuSection } from './types'
 import { useKeyboardControls } from './use-keyboard-controls'
@@ -12,14 +14,27 @@ const MENU_OVERLAY_ID = 'menuContentOverlay'
 
 let hideOverlayTask: number | undefined
 
+// fixme: this should definitely not be handled like this...
+let attachKeyboardListenersForOverlay: () => void
+let detachKeyboardListenersForOverlay: () => void
+
 function hideOverlay() {
   if (hideOverlayTask !== undefined) return
   hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS)
 }
 
+function getAccessibilityButtonOfSectionWithActiveOverlay(): HTMLElement | null | undefined {
+  return document.getElementById(elementIds.menuSections)?.querySelector('button[aria-expanded="true"]')
+}
+
 // eslint-disable-next-line react-refresh/only-export-components
 export function hideOverlayImmediately() {
-  document.getElementById(MENU_OVERLAY_ID)?.classList.remove('visible')
+  detachKeyboardListenersForOverlay?.()
+  const overlay = document.getElementById(MENU_OVERLAY_ID)
+  overlay?.setAttribute('inert', '')
+  overlay?.setAttribute('aria-hidden', '')
+  overlay?.classList.remove('visible')
+  getAccessibilityButtonOfSectionWithActiveOverlay()?.setAttribute('aria-expanded', 'false')
 }
 
 function cancelHideOverlayTask() {
@@ -30,7 +45,11 @@ function cancelHideOverlayTask() {
 
 function showOverlay() {
   cancelHideOverlayTask()
-  document.getElementById(MENU_OVERLAY_ID)?.classList.add('visible')
+  const overlay = document.getElementById(MENU_OVERLAY_ID)
+  overlay?.removeAttribute('inert')
+  overlay?.removeAttribute('aria-hidden')
+  overlay?.classList.add('visible')
+  attachKeyboardListenersForOverlay?.()
 }
 
 function isMenuContentVisible() {
@@ -60,19 +79,20 @@ const Section = ({
     /* The overlay should appear if:
      * 1. The menu is compacted showing only the icons 
      * 2. The section has some content to render OR:
-     *   2.1 The section is active and there is a contextual menu for the active page.
-     * 3. The section is inactive OR:
-     *   2.1. The contextual menu is hidden.
+     * 3. The section is active and there is a contextual menu for the active page.
      */
-    const layout = document.getElementById('layout')
-    const isCompactedOnlyIcons = layout?.classList.contains('menu-compact-only-icons')
-    return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible())
+    const { layout } = getLayoutElements()
+    const isCompactedOnlyIcons = layout?.classList.contains('menu-compact')
+    return isCompactedOnlyIcons && (!!contentToRender || !!customContent || (hasContent && active))
   }
 
   function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.KeyboardEvent<any>) {
     if (!shouldShowOverlay()) return
     onOpen?.()
-    const rect = (event.target as HTMLElement)?.getBoundingClientRect()
+    const anchorElement = event.target as HTMLElement
+    const accessibilityButton = anchorElement?.parentElement?.querySelector('button') as HTMLElement
+    accessibilityButton?.setAttribute('aria-expanded', 'true')
+    const rect = anchorElement?.getBoundingClientRect()
     const arrow: HTMLElement | null = document.querySelector(`#${MENU_OVERLAY_ID} .arrow`)
     setCurrentOverlay(id)
     showOverlay()
@@ -104,7 +124,7 @@ const Section = ({
           {...(!href ? { 'tabIndex': 0 } : undefined)}
         >
           <Flex alignItems="center" justifyContent="center" px={5}>
-            {icon}
+            <IconBox>{icon}</IconBox>
             {typeof label === 'string' ? <Text appearance="microtext1" className="section-label" ml={3}>{label}</Text> : label.element}
           </Flex>
         </a>
@@ -113,13 +133,12 @@ const Section = ({
             as="button"
             aria-label={interpolate(t.menuOptions, label)}
             aria-controls={MENU_OVERLAY_ID}
-            aria-expanded={document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible')}
+            aria-expanded={false}
             onKeyDown={(event) => {
               if (event.key === 'Enter') {
                 showOverlayAndFixArrowPosition(event)
               }
-            }
-            }>
+            }}>
             <ChevronRight />
           </IconBox>
         }
@@ -130,7 +149,7 @@ const Section = ({
 
 const OverlayRenderer = ({ content, customContent }: Pick<MenuSection, 'content' | 'customContent'>) => {
   if (customContent) {
-    return <> {customContent} </>
+    return <div id="custom-selectable-item"> {customContent} </div>
   }
 
   const data = typeof content === 'function' ? content() : content
@@ -141,15 +160,14 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   const t = useTranslate(dictionary)
   // this is a mock state only used to force an update on the component.
   const [_, setUpdate] = useState(0)
-  const onHide = () => hideOverlay()
 
   const toggleMenu = useCallback((hasContent: boolean) => {
     const layout = document.getElementById('layout')
     if (!layout) return
-    if (layout.classList.contains('menu-compact-only-icons')) {
-      layout.classList.remove('menu-compact-only-icons')
+    if (layout.classList.contains('menu-compact')) {
+      layout.classList.remove('menu-compact')
     } else {
-      layout.classList.add('menu-compact-only-icons')
+      layout.classList.add('menu-compact')
     }
 
     if (hasContent) {
@@ -171,19 +189,19 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   )
 
   function onPressEscape() {
-    hideOverlay()
-    const items = document.getElementsByClassName('section-submenu')
-    if (!!items && !!currentOverlay && items.length > currentOverlay && items[currentOverlay].children.length > 1) {
-      (items[currentOverlay].children[1] as HTMLElement).focus()
-    }
+    getAccessibilityButtonOfSectionWithActiveOverlay()?.focus()
+    hideOverlayImmediately()
   }
 
-  const wrapper = useKeyboardControls({
-    onHide, visible: document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible') || false,
+  const { keyboardControlledElement: overlayRef, attachKeyboardListeners, detachKeyboardListeners } = useKeyboardControls({
+    onPressEscape,
     querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input',
-    onPressEscape: () => onPressEscape(),
   })
 
+  // fixme: this should definitely not be handled like this...
+  attachKeyboardListenersForOverlay = attachKeyboardListeners
+  detachKeyboardListenersForOverlay = detachKeyboardListeners
+
   /* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
   instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
   Below, the key is of extreme importance. It ensures React will consider every section content to be an entirely different
@@ -206,7 +224,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
 
       <Flex mb={7} alignItems="center">
         <button className="toggle sections-footer" onClick={() => toggleMenu(!!props.content || !!props.customContent)}
-          title={t.toggle} tabIndex={-1} aria-hidden>
+          title={t.toggle} tabIndex={-1}>
           <IconBox>
             <Expand className="expand" />
             <Collapse className="collapse" />
@@ -217,7 +235,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
           <a href={props.settings?.href} onClick={props.settings?.onClick}
             className="sections-footer"
             {...(props.settings.active ? { 'aria-current': 'page' } : undefined)}>
-            <Flex alignItems="center" >
+            <Flex alignItems="center" justifyContent="center">
               <IconBox aria-label={t.settingsIcon}>
                 <Cog />
               </IconBox>
@@ -227,7 +245,7 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
         }
       </Flex>
 
-      <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={wrapper}>
+      <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={overlayRef}>
         {renderMenuOverlay()}
         <div className="arrow"></div>
       </div>

package/src/components/menu/types.ts

@@ -81,7 +81,6 @@ export interface MenuSection extends Action {
 
 interface BaseMenuProps {
   sections?: MenuSection[],
-  compact?: boolean,
   customContent?: ReactNode,
   settings?: {
     show?: boolean,

package/src/components/menu/use-keyboard-controls.tsx

@@ -1,29 +1,34 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useRef } from 'react'
 
 interface Props {
-  onHide?: () => void,
-  visible: boolean,
+  /**
+   * A query selector that returns every html element that must be navigable through the keyboard.
+   */
   querySelectors: string,
+  /**
+   * Function to call when ESC is pressed. or when TAB is pressed at the last item in the list of items returned by the query selector.
+   */
   onPressEscape?: () => void,
+  /**
+   * Function to call when TAB is pressed at the last item in the list of items returned by the query selector. Will be the same as
+   * onPressEscape if not specified.
+   */
+  onPressLastTab?: () => void,
 }
 
-export function useKeyboardControls({ onHide, visible, querySelectors, onPressEscape }: Props) {
-  const wrapper = useRef<HTMLDivElement>(null)
-
-  const onRemoveListeners = () =>{
-    document.removeEventListener('keydown', keyboardControls)
-    document.removeEventListener('click', hide)
-  }
+export function useKeyboardControls({ querySelectors, onPressEscape, onPressLastTab = onPressEscape }: Props) {
+  const keyboardControlledElement = useRef<HTMLDivElement>(null)
+  const listeners = useRef<Pick<Props, 'onPressEscape' | 'onPressLastTab'>>({})
+  listeners.current = { onPressEscape, onPressLastTab }
 
   const keyboardControls = useCallback((event: KeyboardEvent) => {
     const target = event?.target as HTMLElement | null
 
     function getSelectableAnchors() {
-      return wrapper.current?.querySelectorAll(querySelectors) ?? []
+      return keyboardControlledElement.current?.querySelectorAll(querySelectors) ?? []
     }
 
     function handleArrows(key = event.key) {
-      
       const anchors = getSelectableAnchors()
       let i = 0
       while (i < anchors.length && document.activeElement !== anchors[i]) i++
@@ -33,56 +38,33 @@ export function useKeyboardControls({ onHide, visible, querySelectors, onPressEs
       
     const handlers: Record<string, (() => void) | undefined> = {
       Escape: () => {
-        onPressEscape?.()
-        onHide?.()
-        onRemoveListeners()
+        listeners.current.onPressEscape?.()
+        event.stopPropagation()
+        event.preventDefault()
       },
       Enter: () => {
         target?.click()
       },
       Tab: () => {
         const anchors = getSelectableAnchors()
-        if (document.activeElement === anchors[anchors.length - 1]) onHide?.()
-        else {
-          handleArrows('ArrowDown')
-          event.preventDefault()
-        }
-      },
-      ArrowUp: () => {
-        handleArrows()
-      },
-      ArrowDown: () => {
-        handleArrows()
+        if (document.activeElement === anchors[anchors.length - 1]) listeners.current.onPressLastTab?.()
+        else  handleArrows('ArrowDown')
+        event.preventDefault()
       },
+      ArrowUp: handleArrows,
+      ArrowDown: handleArrows,
     }
 
     handlers[event.key]?.()
-  }, [onPressEscape, visible])
+  }, [])
 
-  const hide = useCallback((event: Event) => {
-    const target = (event.target as HTMLElement | null)
-    // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
-    const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target)
-    const isAction = target?.classList?.contains('action') || !!target?.closest('.action')
-    if (!isClickInsideSelectionList || isAction) onHide?.()
+  const attachKeyboardListeners = useCallback(() => {
+    document.addEventListener('keydown', keyboardControls)
   }, [])
 
-  useEffect(() => {
-    if (visible) {
-      document.addEventListener('keydown', keyboardControls)
-      document.addEventListener('keydown', keyboardControls)
-      if (onHide) setTimeout(() => document.addEventListener('click', hide), 50)
-    }
-    else {
-      onRemoveListeners() 
-    }
-  
-    return () => {
-      // Remove the event listener
-      document.removeEventListener('keydown', keyboardControls)
-      document.removeEventListener('click', hide)
-    }
-  }, [visible, keyboardControls])
+  const detachKeyboardListeners = useCallback(() => {
+    document.removeEventListener('keydown', keyboardControls)
+  }, [])
 
-  return wrapper
+  return { keyboardControlledElement, attachKeyboardListeners, detachKeyboardListeners }
 }