@payloadcms/ui 4.0.0-internal.9496957 → 4.0.0-internal.970009e

package/dist/elements/UserMenu/LanguageMenu/index.js

@@ -60,6 +60,8 @@ export const LanguageMenu = t0 => {
         className: "popup-button-list__button popup-button-list__button--submenu-trigger",
         "data-popup-prevent-close": true,
         onClick: onMobileOpen,
+        role: "menuitem",
+        tabIndex: -1,
         type: "button",
         children: [_jsx("span", {
           className: "popup-button-list__submenu-icon",
@@ -88,36 +90,19 @@ export const LanguageMenu = t0 => {
   let t1;
   if ($[3] !== t) {
     t1 = _jsx(Popup, {
-      renderButton: t2 => {
-        const {
-          active,
-          onClick,
-          onKeyDown,
-          ...aria
-        } = t2;
-        return _jsxs("button", {
-          ...aria,
-          className: ["popup-button-list__button", "popup-button-list__button--submenu-trigger", active && "popup-button-list__button--selected"].filter(Boolean).join(" "),
-          onClick,
-          onKeyDown,
-          type: "button",
-          children: [_jsx("span", {
-            className: "popup-button-list__submenu-icon",
-            children: _jsx(LanguageIcon, {
-              size: 24
-            })
-          }), _jsx("span", {
-            className: "popup-button-list__label",
-            children: t("general:language")
-          }), _jsx("span", {
-            className: "popup-button-list__chevron",
-            children: _jsx(ChevronIcon, {
-              direction: "right",
-              size: 16
-            })
-          })]
-        });
-      },
+      hoverSubmenu: true,
+      popupType: "menu",
+      renderButton: buttonProps => _jsx(PopupList.SubmenuTrigger, {
+        buttonProps,
+        icon: _jsx(LanguageIcon, {
+          size: 24
+        }),
+        trailingIcon: _jsx(ChevronIcon, {
+          direction: "right",
+          size: 16
+        }),
+        children: t("general:language")
+      }),
       side: "left",
       size: "large",
       theme: "dark",

package/dist/elements/UserMenu/LanguageMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","LanguageIcon","useTranslation","Popup","PopupList","LanguageMenuContent","$","i18n","languageOptions","switchLanguage","t0","_jsx","children","RadioGroup","map","t1","label","value","RadioGroupItem","active","language","onClick","LanguageMenu","onMobileOpen","t","_jsxs","className","type","size","direction","renderButton","t2","onKeyDown","aria","filter","Boolean","join","theme"],"sources":["../../../../src/elements/UserMenu/LanguageMenu/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../../icons/Language/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nexport const LanguageMenuContent: React.FC = () => {\n  const { i18n, languageOptions, switchLanguage } = useTranslation()\n\n  return (\n    <div data-popup-prevent-close>\n      <PopupList.RadioGroup>\n        {languageOptions?.map(({ label, value }) => (\n          <PopupList.RadioGroupItem\n            active={i18n.language === value}\n            key={value}\n            onClick={() => {\n              if (switchLanguage) {\n                void switchLanguage(value)\n              }\n            }}\n          >\n            {label}\n          </PopupList.RadioGroupItem>\n        ))}\n      </PopupList.RadioGroup>\n    </div>\n  )\n}\n\nexport const LanguageMenu: React.FC<{\n  readonly onMobileOpen?: () => void\n}> = ({ onMobileOpen }) => {\n  const { t } = useTranslation()\n\n  if (onMobileOpen) {\n    return (\n      <button\n        className=\"popup-button-list__button popup-button-list__button--submenu-trigger\"\n        data-popup-prevent-close\n        onClick={onMobileOpen}\n        type=\"button\"\n      >\n        <span className=\"popup-button-list__submenu-icon\">\n          <LanguageIcon size={24} />\n        </span>\n        <span className=\"popup-button-list__label\">{t('general:language')}</span>\n        <span className=\"popup-button-list__chevron\">\n          <ChevronIcon direction=\"right\" size={24} />\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <Popup\n      renderButton={({ active, onClick, onKeyDown, ...aria }) => (\n        <button\n          {...aria}\n          className={[\n            'popup-button-list__button',\n            'popup-button-list__button--submenu-trigger',\n            active && 'popup-button-list__button--selected',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          type=\"button\"\n        >\n          <span className=\"popup-button-list__submenu-icon\">\n            <LanguageIcon size={24} />\n          </span>\n          <span className=\"popup-button-list__label\">{t('general:language')}</span>\n          <span className=\"popup-button-list__chevron\">\n            <ChevronIcon direction=\"right\" size={16} />\n          </span>\n        </button>\n      )}\n      side=\"left\"\n      size=\"large\"\n      theme=\"dark\"\n    >\n      <LanguageMenuContent />\n    </Popup>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AAEjC,OAAO,MAAMC,mBAAA,GAAgCA,CAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAC3C;IAAAS,IAAA;IAAAC,eAAA;IAAAC;EAAA,IAAkDP,cAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAJ,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAE,eAAA,IAAAF,CAAA,QAAAG,cAAA;IAGhDC,EAAA,GAAAC,IAAA,CAAC;MAAA;MAAAC,QAAA,EACCD,IAAA,CAAAP,SAAA,CAAAS,UAAA;QAAAD,QAAA,EACGJ,eAAA,EAAAM,GAAA,CAAAC,EAAA;UAAsB;YAAAC,KAAA;YAAAC;UAAA,IAAAF,EAAgB;UAAA,OACrCJ,IAAA,CAAAP,SAAA,CAAAc,cAAA;YAAAC,MAAA,EACUZ,IAAA,CAAAa,QAAA,KAAkBH,KAAA;YAAAI,OAAA,EAAAA,CAAA;cAAA,IAGpBZ,cAAA;gBACGA,cAAA,CAAeQ,KAAA;cAAA;YAAA;YAAAL,QAAA,EAIvBI;UAAA,GAPIC,KAAA;QAAA;MAAA,C;;;;;;;;;SALbP,E;CAkBJ;AAEA,OAAO,MAAMY,YAAA,GAERZ,EAAA;EAAA,MAAAJ,CAAA,GAAAR,EAAA;EAAC;IAAAyB;EAAA,IAAAb,EAAgB;EACpB;IAAAc;EAAA,IAActB,cAAA;EAAA,IAEVqB,YAAA;IAAA,IAAAR,EAAA;IAAA,IAAAT,CAAA,QAAAiB,YAAA,IAAAjB,CAAA,QAAAkB,CAAA;MAEAT,EAAA,GAAAU,KAAA,CAAC;QAAAC,SAAA,EACW;QAAA;QAAAL,OAAA,EAEDE,YAAA;QAAAI,IAAA,EACJ;QAAAf,QAAA,GAELD,IAAA,CAAC;UAAAe,SAAA,EAAe;UAAAd,QAAA,EACdD,IAAA,CAAAV,YAAA;YAAA2B,IAAA;UAAA,C;YAEFjB,IAAA,CAAC;UAAAe,SAAA,EAAe;UAAAd,QAAA,EAA4BY,CAAA,CAAE;QAAA,C,GAC9Cb,IAAA,CAAC;UAAAe,SAAA,EAAe;UAAAd,QAAA,EACdD,IAAA,CAAAX,WAAA;YAAA6B,SAAA,EAAuB;YAAAD,IAAA;UAAA,C;;;;;;;;;WAX3Bb,E;;;;IAkBFA,EAAA,GAAAJ,IAAA,CAAAR,KAAA;MAAA2B,YAAA,EAAAC,EAAA;QACiB;UAAAZ,MAAA;UAAAE,OAAA;UAAAW,SAAA;UAAA,GAAAC;QAAA,IAAAF,EAAuC;QAAA,OACpDN,KAAA,CAAC;UAAA,GACKQ,IAAI;UAAAP,SAAA,EACG,CACT,6BACA,8CACAP,MAAA,IAAU,uCAAAe,MAAA,CAAAC,OAEF,EAAAC,IAAA,CACF;UAAAf,OAAA;UAAAW,SAAA;UAAAL,IAAA,EAGH;UAAAf,QAAA,GAELD,IAAA,CAAC;YAAAe,SAAA,EAAe;YAAAd,QAAA,EACdD,IAAA,CAAAV,YAAA;cAAA2B,IAAA;YAAA,C;cAEFjB,IAAA,CAAC;YAAAe,SAAA,EAAe;YAAAd,QAAA,EAA4BY,CAAA,CAAE;UAAA,C,GAC9Cb,IAAA,CAAC;YAAAe,SAAA,EAAe;YAAAd,QAAA,EACdD,IAAA,CAAAX,WAAA;cAAA6B,SAAA,EAAuB;cAAAD,IAAA;YAAA,C;;;;YAIxB;MAAAA,IAAA,EACA;MAAAS,KAAA,EACC;MAAAzB,QAAA,EAEND,IAAA,CAAAN,mBAAA,IAAC;IAAA,C;;;;;;SA5BHU,E;CA+BJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","LanguageIcon","useTranslation","Popup","PopupList","LanguageMenuContent","$","i18n","languageOptions","switchLanguage","t0","_jsx","children","RadioGroup","map","t1","label","value","RadioGroupItem","active","language","onClick","LanguageMenu","onMobileOpen","t","_jsxs","className","role","tabIndex","type","size","direction","hoverSubmenu","popupType","renderButton","buttonProps","SubmenuTrigger","icon","theme"],"sources":["../../../../src/elements/UserMenu/LanguageMenu/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../../icons/Language/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nexport const LanguageMenuContent: React.FC = () => {\n  const { i18n, languageOptions, switchLanguage } = useTranslation()\n\n  return (\n    <div data-popup-prevent-close>\n      <PopupList.RadioGroup>\n        {languageOptions?.map(({ label, value }) => (\n          <PopupList.RadioGroupItem\n            active={i18n.language === value}\n            key={value}\n            onClick={() => {\n              if (switchLanguage) {\n                void switchLanguage(value)\n              }\n            }}\n          >\n            {label}\n          </PopupList.RadioGroupItem>\n        ))}\n      </PopupList.RadioGroup>\n    </div>\n  )\n}\n\nexport const LanguageMenu: React.FC<{\n  readonly onMobileOpen?: () => void\n}> = ({ onMobileOpen }) => {\n  const { t } = useTranslation()\n\n  if (onMobileOpen) {\n    return (\n      <button\n        className=\"popup-button-list__button popup-button-list__button--submenu-trigger\"\n        data-popup-prevent-close\n        onClick={onMobileOpen}\n        role=\"menuitem\"\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <span className=\"popup-button-list__submenu-icon\">\n          <LanguageIcon size={24} />\n        </span>\n        <span className=\"popup-button-list__label\">{t('general:language')}</span>\n        <span className=\"popup-button-list__chevron\">\n          <ChevronIcon direction=\"right\" size={24} />\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <Popup\n      hoverSubmenu\n      popupType=\"menu\"\n      renderButton={(buttonProps) => (\n        <PopupList.SubmenuTrigger\n          buttonProps={buttonProps}\n          icon={<LanguageIcon size={24} />}\n          trailingIcon={<ChevronIcon direction=\"right\" size={16} />}\n        >\n          {t('general:language')}\n        </PopupList.SubmenuTrigger>\n      )}\n      side=\"left\"\n      size=\"large\"\n      theme=\"dark\"\n    >\n      <LanguageMenuContent />\n    </Popup>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AAEjC,OAAO,MAAMC,mBAAA,GAAgCA,CAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAC3C;IAAAS,IAAA;IAAAC,eAAA;IAAAC;EAAA,IAAkDP,cAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAJ,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAE,eAAA,IAAAF,CAAA,QAAAG,cAAA;IAGhDC,EAAA,GAAAC,IAAA,CAAC;MAAA,4BAA4B;MAAAC,QAAA,EAC3BD,IAAA,CAACP,SAAA,CAAAS,UAAoB;QAAAD,QAAA,EAClBJ,eAAA,EAAAM,GAGQ,CAHaC,EAAA;UAAC;YAAAC,KAAA;YAAAC;UAAA,IAAAF,EAAgB;UAAA,OACrCJ,IAAA,CAACP,SAAA,CAAAc,cAAwB;YAAAC,MAAA,EACfZ,IAAA,CAAAa,QAAa,KAAKH,KAAA;YAAAI,OAAA,EAEjBA,CAAA;cACP,IAAIZ,cAAA;gBACGA,cAAA,CAAeQ,KAAA;cAAA;YACtB,CACF;YAAAL,QAAA,EAECI;aAPIC,KAAA;QAAA;;;;;;;;;;SALbP,E;CAkBJ;AAEA,OAAO,MAAMY,YAAA,GAERZ,EAAA;EAAA,MAAAJ,CAAA,GAAAR,EAAA;EAAC;IAAAyB;EAAA,IAAAb,EAAgB;EACpB;IAAAc;EAAA,IAActB,cAAA;EAEd,IAAIqB,YAAA;IAAA,IAAAR,EAAA;IAAA,IAAAT,CAAA,QAAAiB,YAAA,IAAAjB,CAAA,QAAAkB,CAAA;MAEAT,EAAA,GAAAU,KAAA,CAAC;QAAAC,SAAA,EACW;QAAA,4BACc;QAAAL,OAAA,EACfE,YAAA;QAAAI,IAAA,EACJ;QAAAC,QAAA,EACK,EAAC;QAAAC,IAAA,EACN;QAAAjB,QAAA,E,CAELD,IAAA,CAAC;UAAAe,SAAA,EAAe;UAAAd,QAAA,EACdD,IAAA,CAACV,YAAA;YAAA6B,IAAA,EAAmB;;YAEtBnB,IAAA,CAAC;UAAAe,SAAA,EAAe;UAAAd,QAAA,EAA4BY,CAAA,CAAE;YAC9Cb,IAAA,CAAC;UAAAe,SAAA,EAAe;UAAAd,QAAA,EACdD,IAAA,CAACX,WAAA;YAAA+B,SAAA,EAAsB;YAAAD,IAAA,EAAc;;;;;;;;;;WAbzCf,E;;EAiBJ,IAAAA,EAAA;EAAA,IAAAT,CAAA,QAAAkB,CAAA;IAGET,EAAA,GAAAJ,IAAA,CAACR,KAAA;MAAA6B,YAAA,EACa;MAAAC,SAAA,EACF;MAAAC,YAAA,EACIC,WAAA,IACZxB,IAAA,CAACP,SAAA,CAAAgC,cAAwB;QAAAD,WAAA;QAAAE,IAAA,EAEjB1B,IAAA,CAACV,YAAA;UAAA6B,IAAA,EAAmB;;sBACZnB,IAAA,CAACX,WAAA;UAAA+B,SAAA,EAAsB;UAAAD,IAAA,EAAc;;kBAElDN,CAAA,CAAE;;YAGF;MAAAM,IAAA,EACA;MAAAQ,KAAA,EACC;MAAA1B,QAAA,EAEND,IAAA,CAACN,mBAAA;;;;;;;SAhBHU,E;CAmBJ","ignoreList":[]}

package/dist/elements/UserMenu/SettingsMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/UserMenu/SettingsMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAQvC,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CACzB,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,qBAAqB,EAAE,CAAA;IAC/B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,MAAM,EAAE,qBAAqB,EAAE,CAAA;CAAE,CAY7E,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsDpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/UserMenu/SettingsMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAQvC,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CACzB,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,qBAAqB,EAAE,CAAA;IAC/B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,MAAM,EAAE,qBAAqB,EAAE,CAAA;CAAE,CAY7E,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4CpD,CAAA"}

package/dist/elements/UserMenu/SettingsMenu/index.js

@@ -35,6 +35,8 @@ export const SettingsMenu = t0 => {
         className: "popup-button-list__button popup-button-list__button--submenu-trigger",
         "data-popup-prevent-close": true,
         onClick: onMobileOpen,
+        role: "menuitem",
+        tabIndex: -1,
         type: "button",
         children: [_jsx("span", {
           className: "popup-button-list__submenu-icon",
@@ -62,36 +64,17 @@ export const SettingsMenu = t0 => {
   }
   let t1;
   if ($[3] !== t) {
-    t1 = t2 => {
-      const {
-        active,
-        onClick,
-        onKeyDown,
-        ...aria
-      } = t2;
-      return _jsxs("button", {
-        ...aria,
-        className: ["popup-button-list__button", "popup-button-list__button--submenu-trigger", active && "popup-button-list__button--selected"].filter(Boolean).join(" "),
-        onClick,
-        onKeyDown,
-        type: "button",
-        children: [_jsx("span", {
-          className: "popup-button-list__submenu-icon",
-          children: _jsx(GearIcon, {
-            size: 24
-          })
-        }), _jsx("span", {
-          className: "popup-button-list__label",
-          children: t("general:settings")
-        }), _jsx("span", {
-          className: "popup-button-list__chevron",
-          children: _jsx(ChevronIcon, {
-            direction: "right",
-            size: 16
-          })
-        })]
-      });
-    };
+    t1 = buttonProps => _jsx(PopupList.SubmenuTrigger, {
+      buttonProps,
+      icon: _jsx(GearIcon, {
+        size: 24
+      }),
+      trailingIcon: _jsx(ChevronIcon, {
+        direction: "right",
+        size: 16
+      }),
+      children: t("general:settings")
+    });
     $[3] = t;
     $[4] = t1;
   } else {
@@ -100,6 +83,8 @@ export const SettingsMenu = t0 => {
   let t2;
   if ($[5] !== groups || $[6] !== t1) {
     t2 = _jsx(Popup, {
+      hoverSubmenu: true,
+      popupType: "menu",
       renderButton: t1,
       side: "left",
       size: "large",

package/dist/elements/UserMenu/SettingsMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Fragment","ChevronIcon","GearIcon","useTranslation","MenuSeparator","Popup","PopupList","SettingsMenuContent","groups","_jsx","_Fragment","map","group","groupIndex","_jsxs","GroupLabel","label","items","item","itemIndex","SettingsMenu","t0","$","onMobileOpen","t","t1","className","onClick","type","children","size","direction","t2","active","onKeyDown","aria","filter","Boolean","join","renderButton","theme"],"sources":["../../../../src/elements/UserMenu/SettingsMenu/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { GearIcon } from '../../../icons/Gear/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { MenuSeparator } from '../../MenuSeparator/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nexport type UserMenuSettingsGroup = {\n  group?: string\n  items: React.ReactNode[]\n}\n\ntype SettingsMenuProps = {\n  groups: UserMenuSettingsGroup[]\n  onMobileOpen?: () => void\n}\n\nexport const SettingsMenuContent: React.FC<{ groups: UserMenuSettingsGroup[] }> = ({ groups }) => (\n  <>\n    {groups.map((group, groupIndex) => (\n      <Fragment key={`settings-group-${group.group}-${groupIndex}`}>\n        {groupIndex > 0 && <MenuSeparator />}\n        {group.group && <PopupList.GroupLabel label={group.group} />}\n        {group.items.map((item, itemIndex) => (\n          <Fragment key={`settings-item-${groupIndex}-${itemIndex}`}>{item}</Fragment>\n        ))}\n      </Fragment>\n    ))}\n  </>\n)\n\nexport const SettingsMenu: React.FC<SettingsMenuProps> = ({ groups, onMobileOpen }) => {\n  const { t } = useTranslation()\n\n  if (onMobileOpen) {\n    return (\n      <button\n        className=\"popup-button-list__button popup-button-list__button--submenu-trigger\"\n        data-popup-prevent-close\n        onClick={onMobileOpen}\n        type=\"button\"\n      >\n        <span className=\"popup-button-list__submenu-icon\">\n          <GearIcon size={24} />\n        </span>\n        <span className=\"popup-button-list__label\">{t('general:settings')}</span>\n        <span className=\"popup-button-list__chevron\">\n          <ChevronIcon direction=\"right\" size={24} />\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <Popup\n      renderButton={({ active, onClick, onKeyDown, ...aria }) => (\n        <button\n          {...aria}\n          className={[\n            'popup-button-list__button',\n            'popup-button-list__button--submenu-trigger',\n            active && 'popup-button-list__button--selected',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          type=\"button\"\n        >\n          <span className=\"popup-button-list__submenu-icon\">\n            <GearIcon size={24} />\n          </span>\n          <span className=\"popup-button-list__label\">{t('general:settings')}</span>\n          <span className=\"popup-button-list__chevron\">\n            <ChevronIcon direction=\"right\" size={16} />\n          </span>\n        </button>\n      )}\n      side=\"left\"\n      size=\"large\"\n      theme=\"dark\"\n    >\n      <SettingsMenuContent groups={groups} />\n    </Popup>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,WAAW,QAAQ;AAC5B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,QAAQ;AAC9B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AAYjC,OAAO,MAAMC,mBAAA,GAAqEA,CAAC;EAAEC;AAAM,CAAE,kBAC3FC,IAAA,CAAAC,SAAA;YACGF,MAAA,CAAOG,GAAG,CAAC,CAACC,KAAA,EAAOC,UAAA,kBAClBC,KAAA,CAACd,QAAA;eACEa,UAAA,GAAa,kBAAKJ,IAAA,CAACL,aAAA,OACnBQ,KAAA,CAAMA,KAAK,iBAAIH,IAAA,CAACH,SAAA,CAAUS,UAAU;MAACC,KAAA,EAAOJ,KAAA,CAAMA;QAClDA,KAAA,CAAMK,KAAK,CAACN,GAAG,CAAC,CAACO,IAAA,EAAMC,SAAA,kBACtBV,IAAA,CAACT,QAAA;gBAA2DkB;OAA7C,iBAAiBL,UAAA,IAAcM,SAAA,EAAW;KAJ9C,kBAAkBP,KAAA,CAAMA,KAAK,IAAIC,UAAA,EAAY;;AAWlE,OAAO,MAAMO,YAAA,GAA4CC,EAAA;EAAA,MAAAC,CAAA,GAAAxB,EAAA;EAAC;IAAAU,MAAA;IAAAe;EAAA,IAAAF,EAAwB;EAChF;IAAAG;EAAA,IAAcrB,cAAA;EAAA,IAEVoB,YAAA;IAAA,IAAAE,EAAA;IAAA,IAAAH,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAE,CAAA;MAEAC,EAAA,GAAAX,KAAA,CAAC;QAAAY,SAAA,EACW;QAAA;QAAAC,OAAA,EAEDJ,YAAA;QAAAK,IAAA,EACJ;QAAAC,QAAA,GAELpB,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EACdpB,IAAA,CAAAP,QAAA;YAAA4B,IAAA;UAAA,C;YAEFrB,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EAA4BL,CAAA,CAAE;QAAA,C,GAC9Cf,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EACdpB,IAAA,CAAAR,WAAA;YAAA8B,SAAA,EAAuB;YAAAD,IAAA;UAAA,C;;;;;;;;;WAX3BL,E;;;;IAmBcA,EAAA,GAAAO,EAAA;MAAC;QAAAC,MAAA;QAAAN,OAAA;QAAAO,SAAA;QAAA,GAAAC;MAAA,IAAAH,EAAuC;MAAA,OACpDlB,KAAA,CAAC;QAAA,GACKqB,IAAI;QAAAT,SAAA,EACG,CACT,6BACA,8CACAO,MAAA,IAAU,uCAAAG,MAAA,CAAAC,OAEF,EAAAC,IAAA,CACF;QAAAX,OAAA;QAAAO,SAAA;QAAAN,IAAA,EAGH;QAAAC,QAAA,GAELpB,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EACdpB,IAAA,CAAAP,QAAA;YAAA4B,IAAA;UAAA,C;YAEFrB,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EAA4BL,CAAA,CAAE;QAAA,C,GAC9Cf,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAG,QAAA,EACdpB,IAAA,CAAAR,WAAA;YAAA8B,SAAA,EAAuB;YAAAD,IAAA;UAAA,C;;;;;;;;;;;IApB/BE,EAAA,GAAAvB,IAAA,CAAAJ,KAAA;MAAAkC,YAAA,EACgBd,E;YAuBT;MAAAK,IAAA,EACA;MAAAU,KAAA,EACC;MAAAX,QAAA,EAENpB,IAAA,CAAAF,mBAAA;QAAAC;MAAA,C;;;;;;;;SA5BFwB,E;CA+BJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","ChevronIcon","GearIcon","useTranslation","MenuSeparator","Popup","PopupList","SettingsMenuContent","groups","_jsx","_Fragment","map","group","groupIndex","_jsxs","GroupLabel","label","items","item","itemIndex","SettingsMenu","t0","$","onMobileOpen","t","t1","className","onClick","role","tabIndex","type","children","size","direction","buttonProps","SubmenuTrigger","icon","t2","hoverSubmenu","popupType","renderButton","theme"],"sources":["../../../../src/elements/UserMenu/SettingsMenu/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { GearIcon } from '../../../icons/Gear/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { MenuSeparator } from '../../MenuSeparator/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nexport type UserMenuSettingsGroup = {\n  group?: string\n  items: React.ReactNode[]\n}\n\ntype SettingsMenuProps = {\n  groups: UserMenuSettingsGroup[]\n  onMobileOpen?: () => void\n}\n\nexport const SettingsMenuContent: React.FC<{ groups: UserMenuSettingsGroup[] }> = ({ groups }) => (\n  <>\n    {groups.map((group, groupIndex) => (\n      <Fragment key={`settings-group-${group.group}-${groupIndex}`}>\n        {groupIndex > 0 && <MenuSeparator />}\n        {group.group && <PopupList.GroupLabel label={group.group} />}\n        {group.items.map((item, itemIndex) => (\n          <Fragment key={`settings-item-${groupIndex}-${itemIndex}`}>{item}</Fragment>\n        ))}\n      </Fragment>\n    ))}\n  </>\n)\n\nexport const SettingsMenu: React.FC<SettingsMenuProps> = ({ groups, onMobileOpen }) => {\n  const { t } = useTranslation()\n\n  if (onMobileOpen) {\n    return (\n      <button\n        className=\"popup-button-list__button popup-button-list__button--submenu-trigger\"\n        data-popup-prevent-close\n        onClick={onMobileOpen}\n        role=\"menuitem\"\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <span className=\"popup-button-list__submenu-icon\">\n          <GearIcon size={24} />\n        </span>\n        <span className=\"popup-button-list__label\">{t('general:settings')}</span>\n        <span className=\"popup-button-list__chevron\">\n          <ChevronIcon direction=\"right\" size={24} />\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <Popup\n      hoverSubmenu\n      popupType=\"menu\"\n      renderButton={(buttonProps) => (\n        <PopupList.SubmenuTrigger\n          buttonProps={buttonProps}\n          icon={<GearIcon size={24} />}\n          trailingIcon={<ChevronIcon direction=\"right\" size={16} />}\n        >\n          {t('general:settings')}\n        </PopupList.SubmenuTrigger>\n      )}\n      side=\"left\"\n      size=\"large\"\n      theme=\"dark\"\n    >\n      <SettingsMenuContent groups={groups} />\n    </Popup>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,WAAW,QAAQ;AAC5B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,QAAQ;AAC9B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AAYjC,OAAO,MAAMC,mBAAA,GAAqEA,CAAC;EAAEC;AAAM,CAAE,kBAC3FC,IAAA,CAAAC,SAAA;YACGF,MAAA,CAAOG,GAAG,CAAC,CAACC,KAAA,EAAOC,UAAA,kBAClBC,KAAA,CAACd,QAAA;eACEa,UAAA,GAAa,kBAAKJ,IAAA,CAACL,aAAA,OACnBQ,KAAA,CAAMA,KAAK,iBAAIH,IAAA,CAACH,SAAA,CAAUS,UAAU;MAACC,KAAA,EAAOJ,KAAA,CAAMA;QAClDA,KAAA,CAAMK,KAAK,CAACN,GAAG,CAAC,CAACO,IAAA,EAAMC,SAAA,kBACtBV,IAAA,CAACT,QAAA;gBAA2DkB;OAA7C,iBAAiBL,UAAA,IAAcM,SAAA,EAAW;KAJ9C,kBAAkBP,KAAA,CAAMA,KAAK,IAAIC,UAAA,EAAY;;AAWlE,OAAO,MAAMO,YAAA,GAA4CC,EAAA;EAAA,MAAAC,CAAA,GAAAxB,EAAA;EAAC;IAAAU,MAAA;IAAAe;EAAA,IAAAF,EAAwB;EAChF;IAAAG;EAAA,IAAcrB,cAAA;EAEd,IAAIoB,YAAA;IAAA,IAAAE,EAAA;IAAA,IAAAH,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAE,CAAA;MAEAC,EAAA,GAAAX,KAAA,CAAC;QAAAY,SAAA,EACW;QAAA,4BACc;QAAAC,OAAA,EACfJ,YAAA;QAAAK,IAAA,EACJ;QAAAC,QAAA,EACK,EAAC;QAAAC,IAAA,EACN;QAAAC,QAAA,E,CAELtB,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAK,QAAA,EACdtB,IAAA,CAACP,QAAA;YAAA8B,IAAA,EAAe;;YAElBvB,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAK,QAAA,EAA4BP,CAAA,CAAE;YAC9Cf,IAAA,CAAC;UAAAiB,SAAA,EAAe;UAAAK,QAAA,EACdtB,IAAA,CAACR,WAAA;YAAAgC,SAAA,EAAsB;YAAAD,IAAA,EAAc;;;;;;;;;;WAbzCP,E;;EAiBJ,IAAAA,EAAA;EAAA,IAAAH,CAAA,QAAAE,CAAA;IAMkBC,EAAA,GAAAS,WAAA,IACZzB,IAAA,CAACH,SAAA,CAAA6B,cAAwB;MAAAD,WAAA;MAAAE,IAAA,EAEjB3B,IAAA,CAACP,QAAA;QAAA8B,IAAA,EAAe;;oBACRvB,IAAA,CAACR,WAAA;QAAAgC,SAAA,EAAsB;QAAAD,IAAA,EAAc;;gBAElDR,CAAA,CAAE;;;;;;;;;IATTa,EAAA,GAAA5B,IAAA,CAACJ,KAAA;MAAAiC,YAAA,EACa;MAAAC,SAAA,EACF;MAAAC,YAAA,EACIf,E;YAST;MAAAO,IAAA,EACA;MAAAS,KAAA,EACC;MAAAV,QAAA,EAENtB,IAAA,CAACF,mBAAA;QAAAC;;;;;;;;;SAhBH6B,E;CAmBJ","ignoreList":[]}

package/dist/elements/UserMenu/SubMenuHeader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/UserMenu/SubMenuHeader/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,CAiBA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/UserMenu/SubMenuHeader/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,CAmBA,CAAA"}

package/dist/elements/UserMenu/SubMenuHeader/index.js

@@ -16,6 +16,8 @@ export const SubMenuHeader = ({
       "aria-label": title,
       className: "user-menu__submenu-header-row",
       onClick: onBack,
+      role: "menuitem",
+      tabIndex: -1,
       type: "button",
       children: [/*#__PURE__*/_jsx("span", {
         className: "user-menu__submenu-back",

package/dist/elements/UserMenu/SubMenuHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","ChevronIcon","MenuSeparator","SubMenuHeader","onBack","title","_jsxs","className","_jsx","onClick","type","direction","size"],"sources":["../../../../src/elements/UserMenu/SubMenuHeader/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { MenuSeparator } from '../../MenuSeparator/index.js'\n\nexport const SubMenuHeader: React.FC<{\n  readonly onBack: () => void\n  readonly title: string\n}> = ({ onBack, title }) => (\n  <div className=\"user-menu__submenu-header\" data-popup-prevent-close>\n    <div className=\"user-menu__submenu-header-wrap\">\n      <button\n        aria-label={title}\n        className=\"user-menu__submenu-header-row\"\n        onClick={onBack}\n        type=\"button\"\n      >\n        <span className=\"user-menu__submenu-back\">\n          <ChevronIcon direction=\"left\" size={24} />\n        </span>\n        <span className=\"user-menu__submenu-title\">{title}</span>\n      </button>\n    </div>\n    <MenuSeparator />\n  </div>\n)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAE9B,OAAO,MAAMC,aAAA,GAGRA,CAAC;EAAEC,MAAM;EAAEC;AAAK,CAAE,kBACrBC,KAAA,CAAC;EAAIC,SAAA,EAAU;EAA4B,0BAAwB;0BACjEC,IAAA,CAAC;IAAID,SAAA,EAAU;cACb,aAAAD,KAAA,CAAC;MACC,cAAYD,KAAA;MACZE,SAAA,EAAU;MACVE,OAAA,EAASL,MAAA;MACTM,IAAA,EAAK;8BAELF,IAAA,CAAC;QAAKD,SAAA,EAAU;kBACd,aAAAC,IAAA,CAACP,WAAA;UAAYU,SAAA,EAAU;UAAOC,IAAA,EAAM;;uBAEtCJ,IAAA,CAAC;QAAKD,SAAA,EAAU;kBAA4BF;;;mBAGhDG,IAAA,CAACN,aAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","ChevronIcon","MenuSeparator","SubMenuHeader","onBack","title","_jsxs","className","_jsx","onClick","role","tabIndex","type","direction","size"],"sources":["../../../../src/elements/UserMenu/SubMenuHeader/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { MenuSeparator } from '../../MenuSeparator/index.js'\n\nexport const SubMenuHeader: React.FC<{\n  readonly onBack: () => void\n  readonly title: string\n}> = ({ onBack, title }) => (\n  <div className=\"user-menu__submenu-header\" data-popup-prevent-close>\n    <div className=\"user-menu__submenu-header-wrap\">\n      <button\n        aria-label={title}\n        className=\"user-menu__submenu-header-row\"\n        onClick={onBack}\n        role=\"menuitem\"\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <span className=\"user-menu__submenu-back\">\n          <ChevronIcon direction=\"left\" size={24} />\n        </span>\n        <span className=\"user-menu__submenu-title\">{title}</span>\n      </button>\n    </div>\n    <MenuSeparator />\n  </div>\n)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAE9B,OAAO,MAAMC,aAAA,GAGRA,CAAC;EAAEC,MAAM;EAAEC;AAAK,CAAE,kBACrBC,KAAA,CAAC;EAAIC,SAAA,EAAU;EAA4B,0BAAwB;0BACjEC,IAAA,CAAC;IAAID,SAAA,EAAU;cACb,aAAAD,KAAA,CAAC;MACC,cAAYD,KAAA;MACZE,SAAA,EAAU;MACVE,OAAA,EAASL,MAAA;MACTM,IAAA,EAAK;MACLC,QAAA,EAAU,CAAC;MACXC,IAAA,EAAK;8BAELJ,IAAA,CAAC;QAAKD,SAAA,EAAU;kBACd,aAAAC,IAAA,CAACP,WAAA;UAAYY,SAAA,EAAU;UAAOC,IAAA,EAAM;;uBAEtCN,IAAA,CAAC;QAAKD,SAAA,EAAU;kBAA4BF;;;mBAGhDG,IAAA,CAACN,aAAA","ignoreList":[]}

package/dist/elements/UserMenu/ThemeMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/UserMenu/ThemeMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EA2BpC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CACnC,CAsDA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/UserMenu/ThemeMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EA2BpC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CACnC,CA4CA,CAAA"}

package/dist/elements/UserMenu/ThemeMenu/index.js

@@ -72,6 +72,8 @@ export const ThemeMenu = t0 => {
         className: "popup-button-list__button popup-button-list__button--submenu-trigger",
         "data-popup-prevent-close": true,
         onClick: onMobileOpen,
+        role: "menuitem",
+        tabIndex: -1,
         type: "button",
         children: [_jsx("span", {
           className: "popup-button-list__submenu-icon",
@@ -100,36 +102,19 @@ export const ThemeMenu = t0 => {
   let t1;
   if ($[3] !== t) {
     t1 = _jsx(Popup, {
-      renderButton: t2 => {
-        const {
-          active,
-          onClick,
-          onKeyDown,
-          ...aria
-        } = t2;
-        return _jsxs("button", {
-          ...aria,
-          className: ["popup-button-list__button", "popup-button-list__button--submenu-trigger", active && "popup-button-list__button--selected"].filter(Boolean).join(" "),
-          onClick,
-          onKeyDown,
-          type: "button",
-          children: [_jsx("span", {
-            className: "popup-button-list__submenu-icon",
-            children: _jsx(VariableColorIcon, {
-              size: 24
-            })
-          }), _jsx("span", {
-            className: "popup-button-list__label",
-            children: t("general:theme")
-          }), _jsx("span", {
-            className: "popup-button-list__chevron",
-            children: _jsx(ChevronIcon, {
-              direction: "right",
-              size: 16
-            })
-          })]
-        });
-      },
+      hoverSubmenu: true,
+      popupType: "menu",
+      renderButton: buttonProps => _jsx(PopupList.SubmenuTrigger, {
+        buttonProps,
+        icon: _jsx(VariableColorIcon, {
+          size: 24
+        }),
+        trailingIcon: _jsx(ChevronIcon, {
+          direction: "right",
+          size: 16
+        }),
+        children: t("general:theme")
+      }),
       side: "left",
       size: "large",
       theme: "dark",

package/dist/elements/UserMenu/ThemeMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","VariableColorIcon","useTheme","useTranslation","Popup","PopupList","ThemeMenuContent","$","autoMode","setTheme","theme","t","t0","options","label","value","activeValue","_jsx","children","RadioGroup","map","t1","RadioGroupItem","active","onClick","ThemeMenu","onMobileOpen","_jsxs","className","type","size","direction","renderButton","t2","onKeyDown","aria","filter","Boolean","join"],"sources":["../../../../src/elements/UserMenu/ThemeMenu/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { VariableColorIcon } from '../../../icons/VariableColor/index.js'\nimport { useTheme } from '../../../providers/Theme/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nexport const ThemeMenuContent: React.FC = () => {\n  const { autoMode, setTheme, theme } = useTheme()\n  const { t } = useTranslation()\n\n  const options: { label: string; value: 'auto' | 'dark' | 'light' }[] = [\n    { label: t('general:auto'), value: 'auto' },\n    { label: t('general:light'), value: 'light' },\n    { label: t('general:dark'), value: 'dark' },\n  ]\n\n  const activeValue: 'auto' | 'dark' | 'light' = autoMode ? 'auto' : theme\n\n  return (\n    <div data-popup-prevent-close>\n      <PopupList.RadioGroup>\n        {options.map(({ label, value }) => (\n          <PopupList.RadioGroupItem\n            active={activeValue === value}\n            key={value}\n            onClick={() => setTheme(value)}\n          >\n            {label}\n          </PopupList.RadioGroupItem>\n        ))}\n      </PopupList.RadioGroup>\n    </div>\n  )\n}\n\nexport const ThemeMenu: React.FC<{\n  readonly onMobileOpen?: () => void\n}> = ({ onMobileOpen }) => {\n  const { t } = useTranslation()\n\n  if (onMobileOpen) {\n    return (\n      <button\n        className=\"popup-button-list__button popup-button-list__button--submenu-trigger\"\n        data-popup-prevent-close\n        onClick={onMobileOpen}\n        type=\"button\"\n      >\n        <span className=\"popup-button-list__submenu-icon\">\n          <VariableColorIcon size={24} />\n        </span>\n        <span className=\"popup-button-list__label\">{t('general:theme')}</span>\n        <span className=\"popup-button-list__chevron\">\n          <ChevronIcon direction=\"right\" size={24} />\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <Popup\n      renderButton={({ active, onClick, onKeyDown, ...aria }) => (\n        <button\n          {...aria}\n          className={[\n            'popup-button-list__button',\n            'popup-button-list__button--submenu-trigger',\n            active && 'popup-button-list__button--selected',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          type=\"button\"\n        >\n          <span className=\"popup-button-list__submenu-icon\">\n            <VariableColorIcon size={24} />\n          </span>\n          <span className=\"popup-button-list__label\">{t('general:theme')}</span>\n          <span className=\"popup-button-list__chevron\">\n            <ChevronIcon direction=\"right\" size={16} />\n          </span>\n        </button>\n      )}\n      side=\"left\"\n      size=\"large\"\n      theme=\"dark\"\n    >\n      <ThemeMenuContent />\n    </Popup>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","VariableColorIcon","useTheme","useTranslation","Popup","PopupList","ThemeMenuContent","$","autoMode","setTheme","theme","t","t0","options","label","value","activeValue","_jsx","children","RadioGroup","map","t1","RadioGroupItem","active","onClick","ThemeMenu","onMobileOpen","_jsxs","className","role","tabIndex","type","size","direction","hoverSubmenu","popupType","renderButton","buttonProps","SubmenuTrigger","icon"],"sources":["../../../../src/elements/UserMenu/ThemeMenu/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { VariableColorIcon } from '../../../icons/VariableColor/index.js'\nimport { useTheme } from '../../../providers/Theme/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nexport const ThemeMenuContent: React.FC = () => {\n  const { autoMode, setTheme, theme } = useTheme()\n  const { t } = useTranslation()\n\n  const options: { label: string; value: 'auto' | 'dark' | 'light' }[] = [\n    { label: t('general:auto'), value: 'auto' },\n    { label: t('general:light'), value: 'light' },\n    { label: t('general:dark'), value: 'dark' },\n  ]\n\n  const activeValue: 'auto' | 'dark' | 'light' = autoMode ? 'auto' : theme\n\n  return (\n    <div data-popup-prevent-close>\n      <PopupList.RadioGroup>\n        {options.map(({ label, value }) => (\n          <PopupList.RadioGroupItem\n            active={activeValue === value}\n            key={value}\n            onClick={() => setTheme(value)}\n          >\n            {label}\n          </PopupList.RadioGroupItem>\n        ))}\n      </PopupList.RadioGroup>\n    </div>\n  )\n}\n\nexport const ThemeMenu: React.FC<{\n  readonly onMobileOpen?: () => void\n}> = ({ onMobileOpen }) => {\n  const { t } = useTranslation()\n\n  if (onMobileOpen) {\n    return (\n      <button\n        className=\"popup-button-list__button popup-button-list__button--submenu-trigger\"\n        data-popup-prevent-close\n        onClick={onMobileOpen}\n        role=\"menuitem\"\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <span className=\"popup-button-list__submenu-icon\">\n          <VariableColorIcon size={24} />\n        </span>\n        <span className=\"popup-button-list__label\">{t('general:theme')}</span>\n        <span className=\"popup-button-list__chevron\">\n          <ChevronIcon direction=\"right\" size={24} />\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <Popup\n      hoverSubmenu\n      popupType=\"menu\"\n      renderButton={(buttonProps) => (\n        <PopupList.SubmenuTrigger\n          buttonProps={buttonProps}\n          icon={<VariableColorIcon size={24} />}\n          trailingIcon={<ChevronIcon direction=\"right\" size={16} />}\n        >\n          {t('general:theme')}\n        </PopupList.SubmenuTrigger>\n      )}\n      side=\"left\"\n      size=\"large\"\n      theme=\"dark\"\n    >\n      <ThemeMenuContent />\n    </Popup>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/UserMenu/index.css

@@ -1,19 +1,35 @@
 .user-menu {
   display: inline-flex;
   align-items: center;
+  min-width: 0;
+
+  > .popup__trigger-wrap {
+    max-width: 100%;
+    min-width: 0;
+  }
 }
 
 .user-menu__trigger {
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-}
+  max-width: 100%;
+  min-width: 0;
+  font-size: var(--text-body-medium-bold-font-size);
+  font-weight: var(--text-body-medium-bold-font-weight);
+  line-height: var(--text-body-medium-bold-line-height);
+  white-space: nowrap;
 
-.user-menu__trigger--active {
-  opacity: 0.8;
+  .btn__content,
+  .btn__label {
+    min-width: 0;
+  }
+
+  .btn__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .btn__icon {
+    flex-shrink: 0;
+  }
 }
 
 .user-menu__profile {
@@ -46,11 +62,10 @@
 
 .user-menu__name,
 .user-menu__identifier {
-  font-family: var(--text-body-medium-strong-font-family);
-  font-size: var(--text-body-medium-strong-font-size);
-  font-weight: var(--text-body-medium-strong-font-weight);
-  line-height: var(--text-body-medium-strong-line-height);
-  letter-spacing: var(--text-body-medium-strong-letter-spacing);
+  font-size: var(--text-body-medium-bold-font-size);
+  font-weight: var(--text-body-medium-bold-font-weight);
+  line-height: var(--text-body-medium-bold-line-height);
+  letter-spacing: var(--text-body-medium-bold-letter-spacing);
   margin: 0;
   text-align: center;
 }
@@ -97,7 +112,6 @@
 .user-menu__submenu-title {
   margin: 0;
   color: inherit;
-  font-family: var(--text-body-medium-font-family);
   font-size: var(--text-body-medium-font-size);
   font-weight: var(--text-body-medium-font-weight);
   line-height: var(--text-body-medium-line-height);

package/dist/elements/UserMenu/index.d.ts

@@ -5,6 +5,7 @@ type UserMenuProps = {
     CustomAvatar?: React.ReactNode;
     CustomLogoutButton?: React.ReactNode;
     settingsItemGroups?: UserMenuSettingsGroup[];
+    showTitle?: boolean;
 };
 export declare const UserMenu: React.FC<UserMenuProps>;
 export {};

package/dist/elements/UserMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/UserMenu/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAcpE,OAAO,aAAa,CAAA;AAIpB,KAAK,aAAa,GAAG;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACpC,kBAAkB,CAAC,EAAE,qBAAqB,EAAE,CAAA;CAC7C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+J5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/UserMenu/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAgBpE,OAAO,aAAa,CAAA;AAIpB,KAAK,aAAa,GAAG;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACpC,kBAAkB,CAAC,EAAE,qBAAqB,EAAE,CAAA;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmM5C,CAAA"}