@payloadcms/ui 4.0.0-canary.0 → 4.0.0-canary.1

package/dist/elements/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useIntersect","TooltipCaret","$","clipId","useId","t0","_jsxs","className","height","viewBox","width","children","_jsx","id","x","y","clipPath","d","Tooltip","props","alignCaret","boundingRef","delay","position","positionFromProps","show","showFromProps","staticPositioning","setShow","useState","setPosition","ref","intersectionEntry","root","current","rootMargin","threshold","timerID","setTimeout","clearTimeout","isIntersecting","Fragment","filter","Boolean","join","style","opacity"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.css'\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement | null>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  position?: 'bottom' | 'left' | 'right' | 'top'\n  show?: boolean\n  /**\n   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false\n   */\n  staticPositioning?: boolean\n}\n\nconst TooltipCaret: React.FC = () => {\n  const clipId = React.useId()\n\n  return (\n    <svg aria-hidden=\"true\" className=\"tooltip__caret\" height=\"14\" viewBox=\"0 0 14 14\" width=\"15\">\n      <clipPath id={clipId}>\n        <rect height=\"14\" width=\"15\" x=\"-0.5\" y=\"0.5\" />\n      </clipPath>\n      {/* Border stroke - clipped to hide top edge */}\n      <path\n        className=\"tooltip__caret-stroke\"\n        clipPath={`url(#${clipId})`}\n        d=\"M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z\"\n      />\n      {/* Fill path */}\n      <path className=\"tooltip__caret-fill\" d=\"M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z\" />\n    </svg>\n  )\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 500,\n    position: positionFromProps,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'left' | 'right' | 'top'>('top')\n\n  const [ref, intersectionEntry] = useIntersect(\n    {\n      root: boundingRef?.current || null,\n      rootMargin: '-145px 0px 0px 100px',\n      threshold: 0,\n    },\n    staticPositioning,\n  )\n\n  useEffect(() => {\n    let timerID: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerID = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerID) {\n        clearTimeout(timerID)\n      }\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) {\n      return\n    }\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry, staticPositioning])\n\n  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.\n  return (\n    <React.Fragment>\n      {!staticPositioning && (\n        <aside\n          aria-hidden=\"true\"\n          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n            .filter(Boolean)\n            .join(' ')}\n          ref={ref}\n          style={{ opacity: '0' }}\n        >\n          <TooltipCaret />\n          <div className=\"tooltip-content\">{children}</div>\n        </aside>\n      )}\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${positionFromProps || position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <TooltipCaret />\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","useLayoutEffect","useState","useIntersect","EDGE_GUTTER","getClipBoundary","el","current","parentElement","overflowX","window","getComputedStyle","getBoundingClientRect","TooltipCaret","$","clipId","useId","t0","_jsxs","className","height","viewBox","width","children","_jsx","id","x","y","clipPath","d","Tooltip","props","alignCaret","boundingRef","delay","position","positionFromProps","show","showFromProps","staticPositioning","setShow","setPosition","shiftX","setShiftX","maxWidth","setMaxWidth","ref","intersectionEntry","node","root","rootMargin","threshold","timerID","setTimeout","clearTimeout","isIntersecting","computeShift","usesHorizontalCenter","rect","boundary","undefined","leftEdge","left","rightEdge","right","innerWidth","available","nextMaxWidth","center","effectiveWidth","effectiveLeft","effectiveRight","shift","addEventListener","removeEventListener","Fragment","filter","Boolean","join","style","opacity"],"sources":["../../../src/elements/Tooltip/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect, useLayoutEffect, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport './index.css'\n\n// Breathing room (px) between a shifted tooltip and its clipping edge. Maps to `--spacer-1`.\nconst EDGE_GUTTER = 4\n\nconst getClipBoundary = (el: HTMLElement | null): DOMRect | null => {\n  let current = el?.parentElement || null\n\n  while (current) {\n    const { overflowX } = window.getComputedStyle(current)\n    if (\n      overflowX === 'auto' ||\n      overflowX === 'clip' ||\n      overflowX === 'hidden' ||\n      overflowX === 'scroll'\n    ) {\n      return current.getBoundingClientRect()\n    }\n    current = current.parentElement\n  }\n\n  return null\n}\n\nexport type Props = {\n  alignCaret?: 'center' | 'left' | 'right'\n  boundingRef?: React.RefObject<HTMLElement | null>\n  children: React.ReactNode\n  className?: string\n  delay?: number\n  position?: 'bottom' | 'left' | 'right' | 'top'\n  show?: boolean\n  /**\n   * If the tooltip position should not change depending on if the toolbar is outside the boundingRef. @default false\n   */\n  staticPositioning?: boolean\n}\n\nconst TooltipCaret: React.FC = () => {\n  const clipId = React.useId()\n\n  return (\n    <svg aria-hidden=\"true\" className=\"tooltip__caret\" height=\"14\" viewBox=\"0 0 14 14\" width=\"15\">\n      <clipPath id={clipId}>\n        <rect height=\"14\" width=\"15\" x=\"-0.5\" y=\"0.5\" />\n      </clipPath>\n      {/* Border stroke - clipped to hide top edge */}\n      <path\n        className=\"tooltip__caret-stroke\"\n        clipPath={`url(#${clipId})`}\n        d=\"M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z\"\n      />\n      {/* Fill path */}\n      <path className=\"tooltip__caret-fill\" d=\"M0,0 H14 L7.875,6.125 Q7,7 6.125,6.125 Z\" />\n    </svg>\n  )\n}\n\nexport const Tooltip: React.FC<Props> = (props) => {\n  const {\n    alignCaret = 'center',\n    boundingRef,\n    children,\n    className,\n    delay = 500,\n    position: positionFromProps,\n    show: showFromProps = true,\n    staticPositioning = false,\n  } = props\n\n  const [show, setShow] = React.useState(showFromProps)\n  const [position, setPosition] = React.useState<'bottom' | 'left' | 'right' | 'top'>('top')\n  const [shiftX, setShiftX] = useState(0)\n  const [maxWidth, setMaxWidth] = useState<null | number>(null)\n\n  const [ref, intersectionEntry, node] = useIntersect(\n    {\n      root: boundingRef?.current || null,\n      rootMargin: '-145px 0px 0px 100px',\n      threshold: 0,\n    },\n    staticPositioning,\n  )\n\n  useEffect(() => {\n    let timerID: NodeJS.Timeout\n\n    // do not use the delay on transition-out\n    if (delay && showFromProps) {\n      timerID = setTimeout(() => {\n        setShow(showFromProps)\n      }, delay)\n    } else {\n      setShow(showFromProps)\n    }\n\n    return () => {\n      if (timerID) {\n        clearTimeout(timerID)\n      }\n    }\n  }, [showFromProps, delay])\n\n  useEffect(() => {\n    if (staticPositioning) {\n      return\n    }\n    setPosition(intersectionEntry?.isIntersecting ? 'top' : 'bottom')\n  }, [intersectionEntry, staticPositioning])\n\n  // Keep a horizontally-centered tooltip (top/bottom) inside its boundary by\n  // shifting it inward by exactly the amount it would overflow. The hidden\n  // measuring aside (`node`) provides the natural, unshifted geometry.\n  const computeShift = useCallback(() => {\n    const usesHorizontalCenter =\n      (positionFromProps || position) === 'top' || (positionFromProps || position) === 'bottom'\n\n    if (staticPositioning || !node || !usesHorizontalCenter) {\n      setShiftX(0)\n      setMaxWidth(null)\n      return\n    }\n\n    const rect = node.getBoundingClientRect()\n    const boundary =\n      boundingRef?.current?.getBoundingClientRect() ?? getClipBoundary(node) ?? undefined\n    const leftEdge = (boundary?.left ?? 0) + EDGE_GUTTER\n    const rightEdge = (boundary?.right ?? window.innerWidth) - EDGE_GUTTER\n    const available = rightEdge - leftEdge\n\n    // When the tooltip can't fit even at full boundary width, cap it so it wraps.\n    const nextMaxWidth = rect.width > available ? available : null\n    setMaxWidth(nextMaxWidth)\n\n    // Compute the shift against the clamped box, kept centered on the anchor.\n    const center = rect.left + rect.width / 2\n    const effectiveWidth = nextMaxWidth ?? rect.width\n    const effectiveLeft = center - effectiveWidth / 2\n    const effectiveRight = center + effectiveWidth / 2\n\n    let shift = 0\n    if (effectiveRight > rightEdge) {\n      shift = rightEdge - effectiveRight\n    }\n    if (effectiveLeft + shift < leftEdge) {\n      shift = leftEdge - effectiveLeft\n    }\n\n    setShiftX(shift)\n  }, [boundingRef, node, position, positionFromProps, staticPositioning])\n\n  useLayoutEffect(() => {\n    if (!show) {\n      return\n    }\n\n    computeShift()\n    window.addEventListener('resize', computeShift)\n\n    return () => {\n      window.removeEventListener('resize', computeShift)\n    }\n  }, [show, computeShift])\n\n  // The first aside is always on top. The purpose of that is that it can reliably be used for the interaction observer (as it's not moving around), to calculate the position of the actual tooltip.\n  return (\n    <React.Fragment>\n      {!staticPositioning && (\n        <aside\n          aria-hidden=\"true\"\n          className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']\n            .filter(Boolean)\n            .join(' ')}\n          ref={ref}\n          style={{ opacity: '0' }}\n        >\n          <TooltipCaret />\n          <div className=\"tooltip-content\">{children}</div>\n        </aside>\n      )}\n      <aside\n        className={[\n          'tooltip',\n          className,\n          show && 'tooltip--show',\n          maxWidth && 'tooltip--wrap',\n          `tooltip--caret-${alignCaret}`,\n          `tooltip--position-${positionFromProps || position}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        style={\n          {\n            ...(maxWidth ? { '--tooltip-max-width': `${maxWidth}px` } : {}),\n            ...(shiftX\n              ? {\n                  '--tooltip-caret-x': `${-shiftX}px`,\n                  '--tooltip-x': `calc(-50% + ${shiftX}px)`,\n                }\n              : {}),\n          } as React.CSSProperties\n        }\n      >\n        <TooltipCaret />\n        <div className=\"tooltip-content\">{children}</div>\n      </aside>\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const LanguageMenuContent: React.FC;
+export declare const LanguageMenu: React.FC<{
+    readonly onMobileOpen?: () => void;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/UserMenu/LanguageMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAsBvC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CACnC,CAsDA,CAAA"}

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

@@ -0,0 +1,133 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
+import { LanguageIcon } from '../../../icons/Language/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Popup, PopupList } from '../../Popup/index.js';
+export const LanguageMenuContent = () => {
+  const $ = _c(4);
+  const {
+    i18n,
+    languageOptions,
+    switchLanguage
+  } = useTranslation();
+  let t0;
+  if ($[0] !== i18n || $[1] !== languageOptions || $[2] !== switchLanguage) {
+    t0 = _jsx("div", {
+      "data-popup-prevent-close": true,
+      children: _jsx(PopupList.RadioGroup, {
+        children: languageOptions?.map(t1 => {
+          const {
+            label,
+            value
+          } = t1;
+          return _jsx(PopupList.RadioGroupItem, {
+            active: i18n.language === value,
+            onClick: () => {
+              if (switchLanguage) {
+                switchLanguage(value);
+              }
+            },
+            children: label
+          }, value);
+        })
+      })
+    });
+    $[0] = i18n;
+    $[1] = languageOptions;
+    $[2] = switchLanguage;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+};
+export const LanguageMenu = t0 => {
+  const $ = _c(5);
+  const {
+    onMobileOpen
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  if (onMobileOpen) {
+    let t1;
+    if ($[0] !== onMobileOpen || $[1] !== t) {
+      t1 = _jsxs("button", {
+        className: "popup-button-list__button popup-button-list__button--submenu-trigger",
+        "data-popup-prevent-close": true,
+        onClick: onMobileOpen,
+        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: 24
+          })
+        })]
+      });
+      $[0] = onMobileOpen;
+      $[1] = t;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    return t1;
+  }
+  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: 24
+            })
+          })]
+        });
+      },
+      side: "left",
+      size: "large",
+      theme: "dark",
+      children: _jsx(LanguageMenuContent, {})
+    });
+    $[3] = t;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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={24} />\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":[]}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type SettingsMenuProps = {
+    items: React.ReactNode[];
+    onMobileOpen?: () => void;
+};
+export declare const SettingsMenuContent: React.FC<{
+    items: React.ReactNode[];
+}>;
+export declare const SettingsMenu: React.FC<SettingsMenuProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/UserMenu/SettingsMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CAAE,CAMtE,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsDpD,CAAA"}

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

@@ -0,0 +1,114 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { Fragment } from 'react';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
+import { GearIcon } from '../../../icons/Gear/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Popup } from '../../Popup/index.js';
+export const SettingsMenuContent = ({
+  items
+}) => /*#__PURE__*/_jsx(_Fragment, {
+  children: items.map((item, i) => /*#__PURE__*/_jsx(Fragment, {
+    children: item
+  }, `settings-item-${i}`))
+});
+export const SettingsMenu = t0 => {
+  const $ = _c(8);
+  const {
+    items,
+    onMobileOpen
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  if (onMobileOpen) {
+    let t1;
+    if ($[0] !== onMobileOpen || $[1] !== t) {
+      t1 = _jsxs("button", {
+        className: "popup-button-list__button popup-button-list__button--submenu-trigger",
+        "data-popup-prevent-close": true,
+        onClick: onMobileOpen,
+        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: 24
+          })
+        })]
+      });
+      $[0] = onMobileOpen;
+      $[1] = t;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    return t1;
+  }
+  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: 24
+          })
+        })]
+      });
+    };
+    $[3] = t;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== items || $[6] !== t1) {
+    t2 = _jsx(Popup, {
+      renderButton: t1,
+      side: "left",
+      size: "large",
+      theme: "dark",
+      children: _jsx(SettingsMenuContent, {
+        items
+      })
+    });
+    $[5] = items;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","ChevronIcon","GearIcon","useTranslation","Popup","SettingsMenuContent","items","_jsx","_Fragment","map","item","i","SettingsMenu","t0","$","onMobileOpen","t","t1","_jsxs","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 { Popup } from '../../Popup/index.js'\n\ntype SettingsMenuProps = {\n  items: React.ReactNode[]\n  onMobileOpen?: () => void\n}\n\nexport const SettingsMenuContent: React.FC<{ items: React.ReactNode[] }> = ({ items }) => (\n  <>\n    {items.map((item, i) => (\n      <Fragment key={`settings-item-${i}`}>{item}</Fragment>\n    ))}\n  </>\n)\n\nexport const SettingsMenu: React.FC<SettingsMenuProps> = ({ items, 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={24} />\n          </span>\n        </button>\n      )}\n      side=\"left\"\n      size=\"large\"\n      theme=\"dark\"\n    >\n      <SettingsMenuContent items={items} />\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,KAAK,QAAQ;AAOtB,OAAO,MAAMC,mBAAA,GAA8DA,CAAC;EAAEC;AAAK,CAAE,kBACnFC,IAAA,CAAAC,SAAA;YACGF,KAAA,CAAMG,GAAG,CAAC,CAACC,IAAA,EAAMC,CAAA,kBAChBJ,IAAA,CAACP,QAAA;cAAqCU;KAAvB,iBAAiBC,CAAA,EAAG;;AAKzC,OAAO,MAAMC,YAAA,GAA4CC,EAAA;EAAA,MAAAC,CAAA,GAAAhB,EAAA;EAAC;IAAAQ,KAAA;IAAAS;EAAA,IAAAF,EAAuB;EAC/E;IAAAG;EAAA,IAAcb,cAAA;EAAA,IAEVY,YAAA;IAAA,IAAAE,EAAA;IAAA,IAAAH,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAE,CAAA;MAEAC,EAAA,GAAAC,KAAA,CAAC;QAAAC,SAAA,EACW;QAAA;QAAAC,OAAA,EAEDL,YAAA;QAAAM,IAAA,EACJ;QAAAC,QAAA,GAELf,IAAA,CAAC;UAAAY,SAAA,EAAe;UAAAG,QAAA,EACdf,IAAA,CAAAL,QAAA;YAAAqB,IAAA;UAAA,C;YAEFhB,IAAA,CAAC;UAAAY,SAAA,EAAe;UAAAG,QAAA,EAA4BN,CAAA,CAAE;QAAA,C,GAC9CT,IAAA,CAAC;UAAAY,SAAA,EAAe;UAAAG,QAAA,EACdf,IAAA,CAAAN,WAAA;YAAAuB,SAAA,EAAuB;YAAAD,IAAA;UAAA,C;;;;;;;;;WAX3BN,E;;;;IAmBcA,EAAA,GAAAQ,EAAA;MAAC;QAAAC,MAAA;QAAAN,OAAA;QAAAO,SAAA;QAAA,GAAAC;MAAA,IAAAH,EAAuC;MAAA,OACpDP,KAAA,CAAC;QAAA,GACKU,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,GAELf,IAAA,CAAC;UAAAY,SAAA,EAAe;UAAAG,QAAA,EACdf,IAAA,CAAAL,QAAA;YAAAqB,IAAA;UAAA,C;YAEFhB,IAAA,CAAC;UAAAY,SAAA,EAAe;UAAAG,QAAA,EAA4BN,CAAA,CAAE;QAAA,C,GAC9CT,IAAA,CAAC;UAAAY,SAAA,EAAe;UAAAG,QAAA,EACdf,IAAA,CAAAN,WAAA;YAAAuB,SAAA,EAAuB;YAAAD,IAAA;UAAA,C;;;;;;;;;;;IApB/BE,EAAA,GAAAlB,IAAA,CAAAH,KAAA;MAAA4B,YAAA,EACgBf,E;YAuBT;MAAAM,IAAA,EACA;MAAAU,KAAA,EACC;MAAAX,QAAA,EAENf,IAAA,CAAAF,mBAAA;QAAAC;MAAA,C;;;;;;;;SA5BFmB,E;CA+BJ","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const SubMenuHeader: React.FC<{
+    readonly onBack: () => void;
+    readonly title: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
+import { Button } from '../../Button/index.js';
+import { MenuSeparator } from '../../MenuSeparator/index.js';
+export const SubMenuHeader = ({
+  onBack,
+  title
+}) => /*#__PURE__*/_jsxs("div", {
+  className: "user-menu__submenu-header",
+  "data-popup-prevent-close": true,
+  children: [/*#__PURE__*/_jsx("div", {
+    className: "user-menu__submenu-header-wrap",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "user-menu__submenu-header-row",
+      children: [/*#__PURE__*/_jsx(Button, {
+        "aria-label": title,
+        buttonStyle: "ghost",
+        className: "user-menu__submenu-back",
+        icon: /*#__PURE__*/_jsx(ChevronIcon, {
+          direction: "left",
+          size: 24
+        }),
+        onClick: onBack
+      }), /*#__PURE__*/_jsx("p", {
+        className: "user-menu__submenu-title",
+        children: title
+      })]
+    })
+  }), /*#__PURE__*/_jsx(MenuSeparator, {})]
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","ChevronIcon","Button","MenuSeparator","SubMenuHeader","onBack","title","_jsxs","className","_jsx","buttonStyle","icon","direction","size","onClick"],"sources":["../../../../src/elements/UserMenu/SubMenuHeader/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { Button } from '../../Button/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      <div className=\"user-menu__submenu-header-row\">\n        <Button\n          aria-label={title}\n          buttonStyle=\"ghost\"\n          className=\"user-menu__submenu-back\"\n          icon={<ChevronIcon direction=\"left\" size={24} />}\n          onClick={onBack}\n        />\n        <p className=\"user-menu__submenu-title\">{title}</p>\n      </div>\n    </div>\n    <MenuSeparator />\n  </div>\n)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,MAAM,QAAQ;AACvB,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;MAAIC,SAAA,EAAU;8BACbC,IAAA,CAACP,MAAA;QACC,cAAYI,KAAA;QACZI,WAAA,EAAY;QACZF,SAAA,EAAU;QACVG,IAAA,eAAMF,IAAA,CAACR,WAAA;UAAYW,SAAA,EAAU;UAAOC,IAAA,EAAM;;QAC1CC,OAAA,EAAST;uBAEXI,IAAA,CAAC;QAAED,SAAA,EAAU;kBAA4BF;;;mBAG7CG,IAAA,CAACN,aAAA","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ThemeMenuContent: React.FC;
+export declare const ThemeMenu: React.FC<{
+    readonly onMobileOpen?: () => void;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,145 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
+import { VariableColorIcon } from '../../../icons/VariableColor/index.js';
+import { useTheme } from '../../../providers/Theme/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Popup, PopupList } from '../../Popup/index.js';
+export const ThemeMenuContent = () => {
+  const $ = _c(5);
+  const {
+    autoMode,
+    setTheme,
+    theme
+  } = useTheme();
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== autoMode || $[1] !== setTheme || $[2] !== t || $[3] !== theme) {
+    const options = [{
+      label: t("general:auto"),
+      value: "auto"
+    }, {
+      label: t("general:light"),
+      value: "light"
+    }, {
+      label: t("general:dark"),
+      value: "dark"
+    }];
+    const activeValue = autoMode ? "auto" : theme;
+    t0 = _jsx("div", {
+      "data-popup-prevent-close": true,
+      children: _jsx(PopupList.RadioGroup, {
+        children: options.map(t1 => {
+          const {
+            label,
+            value
+          } = t1;
+          return _jsx(PopupList.RadioGroupItem, {
+            active: activeValue === value,
+            onClick: () => setTheme(value),
+            children: label
+          }, value);
+        })
+      })
+    });
+    $[0] = autoMode;
+    $[1] = setTheme;
+    $[2] = t;
+    $[3] = theme;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
+};
+export const ThemeMenu = t0 => {
+  const $ = _c(5);
+  const {
+    onMobileOpen
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  if (onMobileOpen) {
+    let t1;
+    if ($[0] !== onMobileOpen || $[1] !== t) {
+      t1 = _jsxs("button", {
+        className: "popup-button-list__button popup-button-list__button--submenu-trigger",
+        "data-popup-prevent-close": true,
+        onClick: onMobileOpen,
+        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: 24
+          })
+        })]
+      });
+      $[0] = onMobileOpen;
+      $[1] = t;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    return t1;
+  }
+  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: 24
+            })
+          })]
+        });
+      },
+      side: "left",
+      size: "large",
+      theme: "dark",
+      children: _jsx(ThemeMenuContent, {})
+    });
+    $[3] = t;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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={24} />\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":[]}

package/dist/elements/UserMenu/index.css

@@ -0,0 +1,80 @@
+.user-menu {
+  display: inline-flex;
+  align-items: center;
+}
+
+.user-menu__trigger {
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.user-menu__trigger--active {
+  opacity: 0.8;
+}
+
+.user-menu__profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--spacer-3) var(--spacer-2);
+  gap: var(--spacer-2);
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.user-menu__avatar {
+  width: var(--spacer-6);
+  height: var(--spacer-6);
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.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);
+  margin: 0;
+  text-align: center;
+}
+
+.user-menu__name + .user-menu__identifier {
+  color: var(--color-text-secondary);
+}
+
+.user-menu__submenu-header-wrap {
+  padding: 0 var(--spacer-2);
+}
+
+.user-menu__submenu-header-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-1);
+}
+
+.user-menu__submenu-title {
+  margin: 0;
+  color: var(--color-text);
+  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);
+  letter-spacing: var(--text-letter-spacing);
+}