npm - @memori.ai/memori-react - Versions diffs - 8.38.4 → 9.0.0-alpha.0 - Mend

@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (921) hide show

package/src/components/Header/__snapshots__/Header.test.tsx.snap CHANGED Viewed

@@ -5,95 +5,205 @@ exports[`renders Header for board of experts unchanged 1`] = `
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--chat-history"
-      title="write_and_speak.chatHistory"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--experts"
-      disabled=""
-      title="widget.showExpertsInTheBoard"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="none"
-          focusable="false"
-          height="16"
-          role="img"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 640 512"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M211.2 96a64 64 0 10-128 0 64 64 0 10128 0zM32 256c0 17.7 14.3 32 32 32h85.6c10.1-39.4 38.6-71.5 75.8-86.6-9.7-6-21.2-9.4-33.4-9.4H96c-35.3 0-64 28.7-64 64zm461.6 32H576c17.7 0 32-14.3 32-32 0-35.3-28.7-64-64-64h-96c-11.7 0-22.7 3.1-32.1 8.6 38.1 14.8 67.4 47.3 77.7 87.4zm-102.4-61.6c-6.9-1.6-14.2-2.4-21.6-2.4h-96c-8.5 0-16.7 1.1-24.5 3.1-30.8 8.1-55.6 31.1-66.1 60.9-3.5 10-5.5 20.8-5.5 32 0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32 0-11.2-1.9-22-5.5-32-10.8-30.7-36.8-54.2-68.9-61.6zM563.2 96a64 64 0 10-128 0 64 64 0 10128 0zm-241.6 96a80 80 0 100-160 80 80 0 100 160zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32h576c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
-      </span>
-    </button>
+    <span
+      class="styles-module__root___-ALla"
+    >
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r2a:"
+      >
+        <span
+          style="display: inline-flex;"
+        >
+          <button
+            aria-label="write_and_speak.chatHistory"
+            class="memori-button memori-button--ghost memori-button--md memori-header--chat-history-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-message-circle"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"
+                />
+              </svg>
+            </span>
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.chatHistory
+            </span>
+          </button>
+        </span>
+      </span>
+    </span>
+    <span
+      class="styles-module__root___-ALla"
+    >
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r2c:"
+      >
+        <span
+          style="display: inline-flex;"
+        >
+          <button
+            aria-label="widget.showExpertsInTheBoard"
+            class="memori-button memori-button--ghost memori-button--md memori-button--disabled memori-button--icon-only"
+            data-disabled=""
+            disabled=""
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-users"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="9"
+                  cy="7"
+                  r="4"
+                />
+                <path
+                  d="M22 21v-2a4 4 0 0 0-3-3.87"
+                />
+                <path
+                  d="M16 3.13a4 4 0 0 1 0 7.75"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </span>
+    </span>
+    <span
+      class="styles-module__root___-ALla"
+    >
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r2e:"
+      >
+        <span
+          style="display: inline-flex;"
+        >
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </span>
+    </span>
+    <span
+      class="styles-module__root___-ALla"
+    >
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r2g:"
+      >
+        <span
+          style="display: inline-flex;"
+        >
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </span>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -102,94 +212,203 @@ exports[`renders Header for board of experts with session open unchanged 1`] = `
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--chat-history"
-      title="write_and_speak.chatHistory"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--experts"
-      title="widget.showExpertsInTheBoard"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="none"
-          focusable="false"
-          height="16"
-          role="img"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 640 512"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M211.2 96a64 64 0 10-128 0 64 64 0 10128 0zM32 256c0 17.7 14.3 32 32 32h85.6c10.1-39.4 38.6-71.5 75.8-86.6-9.7-6-21.2-9.4-33.4-9.4H96c-35.3 0-64 28.7-64 64zm461.6 32H576c17.7 0 32-14.3 32-32 0-35.3-28.7-64-64-64h-96c-11.7 0-22.7 3.1-32.1 8.6 38.1 14.8 67.4 47.3 77.7 87.4zm-102.4-61.6c-6.9-1.6-14.2-2.4-21.6-2.4h-96c-8.5 0-16.7 1.1-24.5 3.1-30.8 8.1-55.6 31.1-66.1 60.9-3.5 10-5.5 20.8-5.5 32 0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32 0-11.2-1.9-22-5.5-32-10.8-30.7-36.8-54.2-68.9-61.6zM563.2 96a64 64 0 10-128 0 64 64 0 10128 0zm-241.6 96a80 80 0 100-160 80 80 0 100 160zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32h576c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
-      </span>
-    </button>
+    <span
+      class="styles-module__root___-ALla"
+    >
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r2i:"
+      >
+        <span
+          style="display: inline-flex;"
+        >
+          <button
+            aria-label="write_and_speak.chatHistory"
+            class="memori-button memori-button--ghost memori-button--md memori-header--chat-history-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-message-circle"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"
+                />
+              </svg>
+            </span>
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.chatHistory
+            </span>
+          </button>
+        </span>
+      </span>
+    </span>
+    <span
+      class="styles-module__root___-ALla"
+    >
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r2k:"
+      >
+        <span
+          style="display: inline-flex;"
+        >
+          <button
+            aria-label="widget.showExpertsInTheBoard"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-users"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="9"
+                  cy="7"
+                  r="4"
+                />
+                <path
+                  d="M22 21v-2a4 4 0 0 0-3-3.87"
+                />
+                <path
+                  d="M16 3.13a4 4 0 0 1 0 7.75"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </span>
+    </span>
+    <span
+      class="styles-module__root___-ALla"
+    >
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r2m:"
+      >
+        <span
+          style="display: inline-flex;"
+        >
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </span>
+    </span>
+    <span
+      class="styles-module__root___-ALla"
+    >
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r2o:"
+      >
+        <span
+          style="display: inline-flex;"
+        >
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </span>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -198,47 +417,107 @@ exports[`renders Header unchanged 1`] = `
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r3:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -247,27 +526,61 @@ exports[`renders Header with audio disabled unchanged 1`] = `
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:ri:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -276,67 +589,165 @@ exports[`renders Header with clear button unchanged 1`] = `
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--clear"
-      title="clearHistory"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r14:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6c-.3 1.5-.4 3-.4 4.4 0 14.4 11.6 26 26 26h723c1.5 0 3-.1 4.4-.4 14.2-2.4 23.7-15.9 21.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
-          />
-        </svg>
+          <button
+            aria-label="clearHistory"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-trash2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 6h18"
+                />
+                <path
+                  d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                />
+                <path
+                  d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+                />
+                <line
+                  x1="10"
+                  x2="10"
+                  y1="11"
+                  y2="17"
+                />
+                <line
+                  x1="14"
+                  x2="14"
+                  y1="11"
+                  y2="17"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r16:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r18:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -345,67 +756,152 @@ exports[`renders Header with deep thought and session open unchanged 1`] = `
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--chat-history"
-      title="write_and_speak.chatHistory"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r24:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
-          />
-        </svg>
+          <button
+            aria-label="write_and_speak.chatHistory"
+            class="memori-button memori-button--ghost memori-button--md memori-header--chat-history-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-message-circle"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"
+                />
+              </svg>
+            </span>
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.chatHistory
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r26:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r28:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -414,75 +910,160 @@ exports[`renders Header with deep thought logged but without permission flag unc
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--chat-history"
-      title="write_and_speak.chatHistory"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1i:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
-          />
-        </svg>
+          <button
+            aria-label="write_and_speak.chatHistory"
+            class="memori-button memori-button--ghost memori-button--md memori-header--chat-history-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-message-circle"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"
+                />
+              </svg>
+            </span>
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.chatHistory
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1k:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <div
-      class="memori-dropdown"
+    </span>
+    <span
+      class="styles-module__root___kBCdl memori-header--dropdown"
     >
-      <div
-        class="memori-dropdown--trigger"
+      <span
+        class="styles-module__root___-ALla"
       >
-        <button
-          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-          title="login.user"
+        <span
+          class="styles-module__trigger___V2aIF"
+          id="base-ui-:r1p:"
         >
           <span
-            class="memori-button--icon"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-              />
-            </svg>
+            style="display: inline-flex;"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="dialog"
+              aria-label="login.user"
+              class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-dropdown--user-trigger-button"
+              data-base-ui-click-trigger=""
+              id="base-ui-:r1n:"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="memori-button__icon"
+              >
+                <svg
+                  class="lucide lucide-user"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                  />
+                  <circle
+                    cx="12"
+                    cy="7"
+                    r="4"
+                  />
+                </svg>
+              </span>
+            </button>
           </span>
-        </button>
-      </div>
-    </div>
+        </span>
+      </span>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -491,119 +1072,160 @@ exports[`renders Header with deep thought logged with permission flag unchanged
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--chat-history"
-      title="write_and_speak.chatHistory"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--knownfacts"
-      disabled=""
-      title="knownFacts.title"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="none"
-          focusable="false"
-          height="20"
-          role="img"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="3"
-          viewBox="0 0 48 48"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.106 48v-2.745a2.213 2.213 0 012.213-2.212h6.11a2.392 2.392 0 002.326-2.466v-3.223a1.834 1.834 0 01.459-1.145 2.912 2.912 0 00.712-1.926l-.007-.667a1.016 1.016 0 01.651-.952h1.067a1.363 1.363 0 001.051-.456 1.304 1.304 0 00.19-1.395 67.032 67.032 0 01-3.037-7.51 4.767 4.767 0 01-.217-1.507l-.002-4.994a14.513 14.513 0 00-.552-3.963l-.006-.022a13.959 13.959 0 00-3.137-5.702q-.479-.516-1.006-1.003a17.67 17.67 0 00-.677-.623A18.303 18.303 0 0024.194 1a19.617 19.617 0 00-12.539 4.489 17.555 17.555 0 00-3.945 21.69C9.945 31.507 11.694 38.622 12.14 46v2"
-            stroke-miterlimit="10"
-          />
-          <path
-            d="M27.917 12L31.417 12"
-          />
-          <path
-            d="M27.917 26L31.417 26"
-          />
-          <path
-            d="M29.667 12L29.667 26"
-          />
-          <path
-            d="M23.992 26L19.904 12 19.226 12 15.159 26"
-          />
-          <path
-            d="M16.854 21.133L22.276 21.133"
-          />
-        </svg>
-      </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
-      </span>
-    </button>
-    <div
-      class="memori-dropdown"
+    <span
+      class="styles-module__root___-ALla"
+    >
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1r:"
+      >
+        <span
+          style="display: inline-flex;"
+        >
+          <button
+            aria-label="write_and_speak.chatHistory"
+            class="memori-button memori-button--ghost memori-button--md memori-header--chat-history-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-message-circle"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"
+                />
+              </svg>
+            </span>
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.chatHistory
+            </span>
+          </button>
+        </span>
+      </span>
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
-      <div
-        class="memori-dropdown--trigger"
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1t:"
       >
-        <button
-          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-          title="login.user"
+        <span
+          style="display: inline-flex;"
+        >
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </span>
+    </span>
+    <span
+      class="styles-module__root___kBCdl memori-header--dropdown"
+    >
+      <span
+        class="styles-module__root___-ALla"
+      >
+        <span
+          class="styles-module__trigger___V2aIF"
+          id="base-ui-:r22:"
         >
           <span
-            class="memori-button--icon"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-              />
-            </svg>
+            style="display: inline-flex;"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="dialog"
+              aria-label="login.user"
+              class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-dropdown--user-trigger-button"
+              data-base-ui-click-trigger=""
+              id="base-ui-:r20:"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="memori-button__icon"
+              >
+                <svg
+                  class="lucide lucide-user"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                  />
+                  <circle
+                    cx="12"
+                    cy="7"
+                    r="4"
+                  />
+                </svg>
+              </span>
+            </button>
           </span>
-        </button>
-      </div>
-    </div>
+        </span>
+      </span>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -612,47 +1234,107 @@ exports[`renders Header with deep thought unlogged unchanged 1`] = `
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1e:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1g:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -665,73 +1347,161 @@ exports[`renders Header with position unchanged 1`] = `
       class="memori-header--position"
     >
       <span
-        class="memori-header--position-placeName"
-      >
-        Berlin
-      </span>
-      <button
-        class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--position"
-        title="widget.position"
+        class="styles-module__root___-ALla"
       >
         <span
-          class="memori-button--icon"
+          class="styles-module__trigger___V2aIF"
+          id="base-ui-:r5:"
         >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 384 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            style="display: inline-flex;"
           >
-            <path
-              d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
-              fill="currentColor"
-            />
-          </svg>
+            <span
+              class="styles-module__root___kBCdl"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="dialog"
+                aria-label="widget.position"
+                class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button--position memori-header--button--position--active"
+                data-base-ui-click-trigger=""
+                id="base-ui-:r8:"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="memori-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="lucide lucide-map-pin"
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="10"
+                      r="3"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </span>
+          </span>
         </span>
-      </button>
+      </span>
     </div>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:ra:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:rc:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -740,47 +1510,107 @@ exports[`renders Header with settings button unchanged 1`] = `
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r10:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r12:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -789,77 +1619,175 @@ exports[`renders Header with share button unchanged 1`] = `
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:rk:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
+    </span>
     <div
-      class="memori-share-button memori-share-button--align-left"
-      data-headlessui-state=""
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori-header--button memori-header--button-share memori-button--primary"
-        data-headlessui-state=""
-        id="headlessui-menu-button-:r0:"
-        title="widget.share"
-        type="button"
-      >
-        <div
-          class="memori-button--icon"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 0 0 0-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"
-            />
-          </svg>
-        </div>
-      </button>
+      class="memori-dropdown memori-share-button memori-share-button--align-left"
+    >
+      <span
+        class="styles-module__root___-ALla"
+      >
+        <span
+          class="styles-module__trigger___V2aIF"
+          id="base-ui-:rq:"
+        >
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            aria-label="widget.share"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            id="base-ui-:rr:"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                aria-hidden="true"
+                class="lucide lucide-share2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="18"
+                  cy="5"
+                  r="3"
+                />
+                <circle
+                  cx="6"
+                  cy="12"
+                  r="3"
+                />
+                <circle
+                  cx="18"
+                  cy="19"
+                  r="3"
+                />
+                <line
+                  x1="8.59"
+                  x2="15.42"
+                  y1="13.51"
+                  y2="17.49"
+                />
+                <line
+                  x1="15.41"
+                  x2="8.59"
+                  y1="6.51"
+                  y2="10.49"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </span>
     </div>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:ru:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -868,49 +1796,113 @@ exports[`renders Header with speaker muted unchanged 1`] = `
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker memori-header--button--speaker-muted"
-      title="widget.sound"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:re:"
       >
-        <svg
-          aria-hidden="true"
-          fill="none"
-          focusable="false"
-          role="img"
-          viewBox="0 0 40 36"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M25.085.277c-.264 0-.531.071-.777.236L8.482 10.857H1.161a.716.716 0 00-.715.714V24.43c0 .392.322.714.715.714h7.321l15.826 10.344c.246.16.518.236.777.236.745 0 1.433-.593 1.433-1.433V1.71c0-.84-.688-1.433-1.433-1.433zM23.304 30.99l-13.063-8.54-.803-.522H3.66V14.07h5.777l.799-.522 13.067-8.54V30.99zM39.534 15.148L36.967 18l2.567 2.852a1.09 1.09 0 010 1.427l-1.283 1.426a.845.845 0 01-1.284 0L34.4 20.852l-2.567 2.852a.845.845 0 01-1.283 0l-1.284-1.426a1.09 1.09 0 010-1.426L31.833 18l-2.567-2.852a1.09 1.09 0 010-1.426l1.283-1.427a.845.845 0 011.284 0l2.567 2.853 2.567-2.853a.845.845 0 011.284 0l1.283 1.427a1.09 1.09 0 010 1.426z"
-            fill="currentColor"
-          />
-        </svg>
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume-x"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <line
+                  x1="22"
+                  x2="16"
+                  y1="9"
+                  y2="15"
+                />
+                <line
+                  x1="16"
+                  x2="22"
+                  y1="9"
+                  y2="15"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:rg:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;
@@ -919,46 +1911,106 @@ exports[`renders Header with user activated speak unchanged 1`] = `
   <div
     class="memori-header"
   >
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
-      title="widget.sound"
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1a:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"
-          />
-        </svg>
+          <button
+            aria-label="widget.sound"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-volume2"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                />
+                <path
+                  d="M16 9a5 5 0 0 1 0 6"
+                />
+                <path
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.login"
+    </span>
+    <span
+      class="styles-module__root___-ALla"
     >
       <span
-        class="memori-button--icon"
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1c:"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          style="display: inline-flex;"
         >
-          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-          />
-        </svg>
+          <button
+            aria-label="login.login"
+            class="memori-button memori-button--ghost memori-button--md memori-button--icon-only memori-header--button memori-header--button-login"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__icon"
+            >
+              <svg
+                class="lucide lucide-user"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+                />
+                <circle
+                  cx="12"
+                  cy="7"
+                  r="4"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
       </span>
-    </button>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;