@thunderid/react 0.12.0 → 0.13.0

package/dist/cjs/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseLanguageSwitcher.cjs","names":["BaseLanguageSwitcher: FC<BaseLanguageSwitcherProps>","useTheme","styles: Record<string, string>","useStyles","hasMultipleLanguages: boolean","autoUpdate","currentOption: LanguageOption | undefined","ChevronDown","FloatingPortal","FloatingFocusManager","Check"],"sources":["../../../../../src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport {FC, ReactElement, ReactNode, useEffect, useState} from 'react';\nimport useStyles from './BaseLanguageSwitcher.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Check from '../../primitives/Icons/Check';\nimport ChevronDown from '../../primitives/Icons/ChevronDown';\n\n/**\n * A resolved language option with display name and emoji flag.\n */\nexport interface LanguageOption {\n  /** BCP 47 language tag (e.g. \"en\", \"fr\", \"en-US\") */\n  code: string;\n  /** Human-readable display name resolved via Intl.DisplayNames */\n  displayName: string;\n  /** Flag emoji or globe emoji for the language */\n  emoji: string;\n}\n\n/**\n * Render props exposed to consumers when using the render-prop pattern.\n */\nexport interface LanguageSwitcherRenderProps {\n  /** The currently active language code */\n  currentLanguage: string;\n  /** Whether a language switch is in progress */\n  isLoading: boolean;\n  /** Resolved language options */\n  languages: LanguageOption[];\n  /** Call this to switch to a different language */\n  onLanguageChange: (language: string) => void;\n}\n\nexport interface BaseLanguageSwitcherProps {\n  /**\n   * Render-props callback. When provided, the default dropdown UI is replaced with\n   * whatever JSX the callback returns.\n   *\n   * @example\n   * ```tsx\n   * <BaseLanguageSwitcher {...props}>\n   *   {({languages, currentLanguage, onLanguageChange}) => (\n   *     <select value={currentLanguage} onChange={e => onLanguageChange(e.target.value)}>\n   *       {languages.map(l => <option key={l.code} value={l.code}>{l.emoji} {l.displayName}</option>)}\n   *     </select>\n   *   )}\n   * </BaseLanguageSwitcher>\n   * ```\n   */\n  children?: (props: LanguageSwitcherRenderProps) => ReactNode;\n  /** Additional CSS class applied to the root element (default UI only) */\n  className?: string;\n  /** The currently active language code */\n  currentLanguage: string;\n  /** Whether a language switch is in progress */\n  isLoading?: boolean;\n  /** Resolved language options to display */\n  languages: LanguageOption[];\n  /** Called when the user selects a language */\n  onLanguageChange: (language: string) => void;\n}\n\n/**\n * Pure-UI language switcher dropdown.\n * Accepts resolved `LanguageOption[]` (code + displayName + emoji) and delegates\n * language switching to the `onLanguageChange` callback.\n *\n * Supports render props for full UI customisation.\n */\nconst BaseLanguageSwitcher: FC<BaseLanguageSwitcherProps> = ({\n  children,\n  className,\n  currentLanguage,\n  isLoading = false,\n  languages,\n  onLanguageChange,\n}: BaseLanguageSwitcherProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const [isOpen, setIsOpen] = useState(false);\n  const hasMultipleLanguages: boolean = languages.length > 1;\n\n  useEffect(() => {\n    if (!hasMultipleLanguages && isOpen) {\n      setIsOpen(false);\n    }\n  }, [hasMultipleLanguages, isOpen]);\n\n  const {refs, floatingStyles, context} = useFloating({\n    middleware: [offset(4), flip(), shift()],\n    onOpenChange: setIsOpen,\n    open: isOpen,\n    whileElementsMounted: autoUpdate,\n  });\n\n  const click: ReturnType<typeof useClick> = useClick(context, {enabled: hasMultipleLanguages});\n  const dismiss: ReturnType<typeof useDismiss> = useDismiss(context, {enabled: hasMultipleLanguages});\n  const role: ReturnType<typeof useRole> = useRole(context, {enabled: hasMultipleLanguages, role: 'listbox'});\n  const {getReferenceProps, getFloatingProps} = useInteractions([click, dismiss, role]);\n\n  const currentOption: LanguageOption | undefined = languages.find((l: LanguageOption) => l.code === currentLanguage);\n\n  if (children) {\n    return (\n      <>\n        {children({\n          currentLanguage,\n          isLoading,\n          languages,\n          onLanguageChange,\n        })}\n      </>\n    );\n  }\n\n  return (\n    <div className={cx(styles['root'], className)}>\n      <button\n        ref={refs.setReference}\n        type=\"button\"\n        disabled={isLoading}\n        aria-label=\"Switch language\"\n        {...getReferenceProps()}\n        className={styles['trigger']}\n      >\n        {currentOption && <span className={styles['triggerEmoji']}>{currentOption.emoji}</span>}\n        <span className={styles['triggerLabel']}>{currentOption?.displayName ?? currentLanguage}</span>\n        {hasMultipleLanguages && <ChevronDown />}\n      </button>\n\n      {isOpen && hasMultipleLanguages && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              style={floatingStyles}\n              {...getFloatingProps()}\n              className={styles['content']}\n              role=\"listbox\"\n              aria-label=\"Select language\"\n            >\n              {languages.map((lang: LanguageOption) => (\n                <button\n                  key={lang.code}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={lang.code === currentLanguage}\n                  className={cx(styles['option'], lang.code === currentLanguage && styles['optionActive'])}\n                  onClick={() => {\n                    onLanguageChange(lang.code);\n                    setIsOpen(false);\n                  }}\n                >\n                  <span className={styles['optionEmoji']}>{lang.emoji}</span>\n                  <span className={styles['optionLabel']}>{lang.displayName}</span>\n                  {lang.code === currentLanguage && (\n                    <span className={styles['checkIcon']}>\n                      <Check />\n                    </span>\n                  )}\n                </button>\n              ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n};\n\nexport default BaseLanguageSwitcher;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqFA,MAAMA,wBAAuD,EAC3D,UACA,WACA,iBACA,YAAY,OACZ,WACA,uBAC6C;CAC7C,MAAM,EAAC,OAAO,gBAAeC,0BAAU;CACvC,MAAMC,SAAiCC,4CAAU,OAAO,YAAY;CACpE,MAAM,CAAC,QAAQ,iCAAsB,MAAM;CAC3C,MAAMC,uBAAgC,UAAU,SAAS;AAEzD,4BAAgB;AACd,MAAI,CAAC,wBAAwB,OAC3B,WAAU,MAAM;IAEjB,CAAC,sBAAsB,OAAO,CAAC;CAElC,MAAM,EAAC,MAAM,gBAAgB,iDAAuB;EAClD,YAAY;mCAAQ,EAAE;kCAAQ;mCAAS;GAAC;EACxC,cAAc;EACd,MAAM;EACN,sBAAsBC;EACvB,CAAC;CAKF,MAAM,EAAC,mBAAmB,8DAAoC;oCAHV,SAAS,EAAC,SAAS,sBAAqB,CAAC;sCACnC,SAAS,EAAC,SAAS,sBAAqB,CAAC;mCAClD,SAAS;GAAC,SAAS;GAAsB,MAAM;GAAU,CAAC;EACvB,CAAC;CAErF,MAAMC,gBAA4C,UAAU,MAAM,MAAsB,EAAE,SAAS,gBAAgB;AAEnH,KAAI,SACF,QACE,mFACG,SAAS;EACR;EACA;EACA;EACA;EACD,CAAC,GACD;AAIP,QACE,4CAAC;EAAI,iCAAc,OAAO,SAAS,UAAU;aAC3C,4CAAC;GACC,KAAK,KAAK;GACV,MAAK;GACL,UAAU;GACV,cAAW;GACX,GAAI,mBAAmB;GACvB,WAAW,OAAO;;IAEjB,iBAAiB,2CAAC;KAAK,WAAW,OAAO;eAAkB,cAAc;MAAa;IACvF,2CAAC;KAAK,WAAW,OAAO;eAAkB,eAAe,eAAe;MAAuB;IAC9F,wBAAwB,2CAACC,gCAAc;;IACjC,EAER,UAAU,wBACT,2CAACC,gDACC,2CAACC;GAA8B;GAAS,OAAO;aAC7C,2CAAC;IACC,KAAK,KAAK;IACV,OAAO;IACP,GAAI,kBAAkB;IACtB,WAAW,OAAO;IAClB,MAAK;IACL,cAAW;cAEV,UAAU,KAAK,SACd,4CAAC;KAEC,MAAK;KACL,MAAK;KACL,iBAAe,KAAK,SAAS;KAC7B,iCAAc,OAAO,WAAW,KAAK,SAAS,mBAAmB,OAAO,gBAAgB;KACxF,eAAe;AACb,uBAAiB,KAAK,KAAK;AAC3B,gBAAU,MAAM;;;MAGlB,2CAAC;OAAK,WAAW,OAAO;iBAAiB,KAAK;QAAa;MAC3D,2CAAC;OAAK,WAAW,OAAO;iBAAiB,KAAK;QAAmB;MAChE,KAAK,SAAS,mBACb,2CAAC;OAAK,WAAW,OAAO;iBACtB,2CAACC,0BAAQ;QACJ;;OAfJ,KAAK,KAiBH,CACT;KACE;IACe,GACR;GAEf;;AAIV,mCAAe"}
+{"version":3,"file":"BaseLanguageSwitcher.cjs","names":["BaseLanguageSwitcher: FC<BaseLanguageSwitcherProps>","useTheme","styles: Record<string, string>","useStyles","hasMultipleLanguages: boolean","autoUpdate","currentOption: LanguageOption | undefined","cx","ChevronDown","FloatingPortal","FloatingFocusManager","Check"],"sources":["../../../../../src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport {FC, ReactElement, ReactNode, useEffect, useState} from 'react';\nimport useStyles from './BaseLanguageSwitcher.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Check from '../../primitives/Icons/Check';\nimport ChevronDown from '../../primitives/Icons/ChevronDown';\n\n/**\n * A resolved language option with display name and emoji flag.\n */\nexport interface LanguageOption {\n  /** BCP 47 language tag (e.g. \"en\", \"fr\", \"en-US\") */\n  code: string;\n  /** Human-readable display name resolved via Intl.DisplayNames */\n  displayName: string;\n  /** Flag emoji or globe emoji for the language */\n  emoji: string;\n}\n\n/**\n * Render props exposed to consumers when using the render-prop pattern.\n */\nexport interface LanguageSwitcherRenderProps {\n  /** The currently active language code */\n  currentLanguage: string;\n  /** Whether a language switch is in progress */\n  isLoading: boolean;\n  /** Resolved language options */\n  languages: LanguageOption[];\n  /** Call this to switch to a different language */\n  onLanguageChange: (language: string) => void;\n}\n\nexport interface BaseLanguageSwitcherProps {\n  /**\n   * Render-props callback. When provided, the default dropdown UI is replaced with\n   * whatever JSX the callback returns.\n   *\n   * @example\n   * ```tsx\n   * <BaseLanguageSwitcher {...props}>\n   *   {({languages, currentLanguage, onLanguageChange}) => (\n   *     <select value={currentLanguage} onChange={e => onLanguageChange(e.target.value)}>\n   *       {languages.map(l => <option key={l.code} value={l.code}>{l.emoji} {l.displayName}</option>)}\n   *     </select>\n   *   )}\n   * </BaseLanguageSwitcher>\n   * ```\n   */\n  children?: (props: LanguageSwitcherRenderProps) => ReactNode;\n  /** Additional CSS class applied to the root element (default UI only) */\n  className?: string;\n  /** The currently active language code */\n  currentLanguage: string;\n  /** Whether a language switch is in progress */\n  isLoading?: boolean;\n  /** Resolved language options to display */\n  languages: LanguageOption[];\n  /** Called when the user selects a language */\n  onLanguageChange: (language: string) => void;\n}\n\n/**\n * Pure-UI language switcher dropdown.\n * Accepts resolved `LanguageOption[]` (code + displayName + emoji) and delegates\n * language switching to the `onLanguageChange` callback.\n *\n * Supports render props for full UI customisation.\n */\nconst BaseLanguageSwitcher: FC<BaseLanguageSwitcherProps> = ({\n  children,\n  className,\n  currentLanguage,\n  isLoading = false,\n  languages,\n  onLanguageChange,\n}: BaseLanguageSwitcherProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const [isOpen, setIsOpen] = useState(false);\n  const hasMultipleLanguages: boolean = languages.length > 1;\n\n  useEffect(() => {\n    if (!hasMultipleLanguages && isOpen) {\n      setIsOpen(false);\n    }\n  }, [hasMultipleLanguages, isOpen]);\n\n  const {refs, floatingStyles, context} = useFloating({\n    middleware: [offset(4), flip(), shift()],\n    onOpenChange: setIsOpen,\n    open: isOpen,\n    whileElementsMounted: autoUpdate,\n  });\n\n  const click: ReturnType<typeof useClick> = useClick(context, {enabled: hasMultipleLanguages});\n  const dismiss: ReturnType<typeof useDismiss> = useDismiss(context, {enabled: hasMultipleLanguages});\n  const role: ReturnType<typeof useRole> = useRole(context, {enabled: hasMultipleLanguages, role: 'listbox'});\n  const {getReferenceProps, getFloatingProps} = useInteractions([click, dismiss, role]);\n\n  const currentOption: LanguageOption | undefined = languages.find((l: LanguageOption) => l.code === currentLanguage);\n\n  if (children) {\n    return (\n      <>\n        {children({\n          currentLanguage,\n          isLoading,\n          languages,\n          onLanguageChange,\n        })}\n      </>\n    );\n  }\n\n  return (\n    <div className={cx(styles['root'], className)}>\n      <button\n        ref={refs.setReference}\n        type=\"button\"\n        disabled={isLoading}\n        aria-label=\"Switch language\"\n        {...getReferenceProps()}\n        className={styles['trigger']}\n      >\n        {currentOption && <span className={styles['triggerEmoji']}>{currentOption.emoji}</span>}\n        <span className={styles['triggerLabel']}>{currentOption?.displayName ?? currentLanguage}</span>\n        {hasMultipleLanguages && <ChevronDown />}\n      </button>\n\n      {isOpen && hasMultipleLanguages && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              style={floatingStyles}\n              {...getFloatingProps()}\n              className={styles['content']}\n              role=\"listbox\"\n              aria-label=\"Select language\"\n            >\n              {languages.map((lang: LanguageOption) => (\n                <button\n                  key={lang.code}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={lang.code === currentLanguage}\n                  className={cx(styles['option'], lang.code === currentLanguage && styles['optionActive'])}\n                  onClick={() => {\n                    onLanguageChange(lang.code);\n                    setIsOpen(false);\n                  }}\n                >\n                  <span className={styles['optionEmoji']}>{lang.emoji}</span>\n                  <span className={styles['optionLabel']}>{lang.displayName}</span>\n                  {lang.code === currentLanguage && (\n                    <span className={styles['checkIcon']}>\n                      <Check />\n                    </span>\n                  )}\n                </button>\n              ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n};\n\nexport default BaseLanguageSwitcher;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqFA,MAAMA,wBAAuD,EAC3D,UACA,WACA,iBACA,YAAY,OACZ,WACA,uBAC6C;CAC7C,MAAM,EAAC,OAAO,gBAAeC,0BAAU;CACvC,MAAMC,SAAiCC,4CAAU,OAAO,YAAY;CACpE,MAAM,CAAC,QAAQ,iCAAsB,MAAM;CAC3C,MAAMC,uBAAgC,UAAU,SAAS;AAEzD,4BAAgB;AACd,MAAI,CAAC,wBAAwB,OAC3B,WAAU,MAAM;IAEjB,CAAC,sBAAsB,OAAO,CAAC;CAElC,MAAM,EAAC,MAAM,gBAAgB,iDAAuB;EAClD,YAAY;mCAAQ,EAAE;kCAAQ;mCAAS;GAAC;EACxC,cAAc;EACd,MAAM;EACN,sBAAsBC;EACvB,CAAC;CAKF,MAAM,EAAC,mBAAmB,8DAAoC;oCAHV,SAAS,EAAC,SAAS,sBAAqB,CAAC;sCACnC,SAAS,EAAC,SAAS,sBAAqB,CAAC;mCAClD,SAAS;GAAC,SAAS;GAAsB,MAAM;GAAU,CAAC;EACvB,CAAC;CAErF,MAAMC,gBAA4C,UAAU,MAAM,MAAsB,EAAE,SAAS,gBAAgB;AAEnH,KAAI,SACF,QACE,mFACG,SAAS;EACR;EACA;EACA;EACA;EACD,CAAC,GACD;AAIP,QACE,4CAAC;EAAI,WAAWC,mBAAG,OAAO,SAAS,UAAU;aAC3C,4CAAC;GACC,KAAK,KAAK;GACV,MAAK;GACL,UAAU;GACV,cAAW;GACX,GAAI,mBAAmB;GACvB,WAAW,OAAO;;IAEjB,iBAAiB,2CAAC;KAAK,WAAW,OAAO;eAAkB,cAAc;MAAa;IACvF,2CAAC;KAAK,WAAW,OAAO;eAAkB,eAAe,eAAe;MAAuB;IAC9F,wBAAwB,2CAACC,gCAAc;;IACjC,EAER,UAAU,wBACT,2CAACC,gDACC,2CAACC;GAA8B;GAAS,OAAO;aAC7C,2CAAC;IACC,KAAK,KAAK;IACV,OAAO;IACP,GAAI,kBAAkB;IACtB,WAAW,OAAO;IAClB,MAAK;IACL,cAAW;cAEV,UAAU,KAAK,SACd,4CAAC;KAEC,MAAK;KACL,MAAK;KACL,iBAAe,KAAK,SAAS;KAC7B,WAAWH,mBAAG,OAAO,WAAW,KAAK,SAAS,mBAAmB,OAAO,gBAAgB;KACxF,eAAe;AACb,uBAAiB,KAAK,KAAK;AAC3B,gBAAU,MAAM;;;MAGlB,2CAAC;OAAK,WAAW,OAAO;iBAAiB,KAAK;QAAa;MAC3D,2CAAC;OAAK,WAAW,OAAO;iBAAiB,KAAK;QAAmB;MAChE,KAAK,SAAS,mBACb,2CAAC;OAAK,WAAW,OAAO;iBACtB,2CAACI,0BAAQ;QACJ;;OAfJ,KAAK,KAiBH,CACT;KACE;IACe,GACR;GAEf;;AAIV,mCAAe"}

package/dist/cjs/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.cjs

@@ -1,17 +1,16 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 
 //#region src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.ts
 const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
-	const root = __emotion_css.css`
+	const root = require_emotion.css`
       display: inline-block;
       position: relative;
       font-family: ${theme.vars.typography.fontFamily};
     `;
-	const trigger = __emotion_css.css`
+	const trigger = require_emotion.css`
       display: inline-flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 0.5);
@@ -28,18 +27,18 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
         background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
       }
     `;
-	const triggerEmoji = __emotion_css.css`
+	const triggerEmoji = require_emotion.css`
       font-size: 1rem;
       line-height: 1;
     `;
-	const triggerLabel = __emotion_css.css`
+	const triggerLabel = require_emotion.css`
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font-weight: 500;
     `;
-	const content = __emotion_css.css`
+	const content = require_emotion.css`
       min-width: 200px;
       max-width: 320px;
       background-color: ${theme.vars.colors.background.surface};
@@ -50,7 +49,7 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
       z-index: 1000;
       padding: calc(${theme.vars.spacing.unit} * 0.5) 0;
     `;
-	const option = __emotion_css.css`
+	const option = require_emotion.css`
       display: flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
@@ -68,23 +67,23 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
         background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
       }
     `;
-	const optionActive = __emotion_css.css`
+	const optionActive = require_emotion.css`
       font-weight: 600;
       color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};
     `;
-	const optionEmoji = __emotion_css.css`
+	const optionEmoji = require_emotion.css`
       font-size: 1rem;
       line-height: 1;
       flex-shrink: 0;
     `;
-	const optionLabel = __emotion_css.css`
+	const optionLabel = require_emotion.css`
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
 	return {
-		checkIcon: __emotion_css.css`
+		checkIcon: require_emotion.css`
       color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};
       flex-shrink: 0;
       margin-inline-start: auto;

package/dist/cjs/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseLanguageSwitcher.styles.cjs","names":["root: string","trigger: string","triggerEmoji: string","triggerLabel: string","content: string","option: string","optionActive: string","optionEmoji: string","optionLabel: string"],"sources":["../../../../../src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const root: string = css`\n      display: inline-block;\n      position: relative;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const trigger: string = css`\n      display: inline-flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 0.5);\n      padding: calc(${theme.vars.spacing.unit} * 0.75) ${theme.vars.spacing.unit};\n      border: 1px solid ${theme.vars.colors.border};\n      background: ${theme.vars.colors.background.surface};\n      cursor: pointer;\n      border-radius: ${theme.vars.borderRadius.medium};\n      min-width: 120px;\n      font-size: 0.875rem;\n      color: ${theme.vars.colors.text.primary};\n\n      &:hover {\n        background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.04)'};\n      }\n    `;\n\n    const triggerEmoji: string = css`\n      font-size: 1rem;\n      line-height: 1;\n    `;\n\n    const triggerLabel: string = css`\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font-weight: 500;\n    `;\n\n    const content: string = css`\n      min-width: 200px;\n      max-width: 320px;\n      background-color: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.medium};\n      box-shadow: ${theme.vars.shadows.medium};\n      border: 1px solid ${theme.vars.colors.border};\n      outline: none;\n      z-index: 1000;\n      padding: calc(${theme.vars.spacing.unit} * 0.5) 0;\n    `;\n\n    const option: string = css`\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 1.5);\n      width: 100%;\n      border: none;\n      background-color: transparent;\n      cursor: pointer;\n      font-size: 0.875rem;\n      text-align: start;\n      color: ${theme.vars.colors.text.primary};\n      transition: background-color 0.15s ease-in-out;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.04)'};\n      }\n    `;\n\n    const optionActive: string = css`\n      font-weight: 600;\n      color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};\n    `;\n\n    const optionEmoji: string = css`\n      font-size: 1rem;\n      line-height: 1;\n      flex-shrink: 0;\n    `;\n\n    const optionLabel: string = css`\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const checkIcon: string = css`\n      color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};\n      flex-shrink: 0;\n      margin-inline-start: auto;\n    `;\n\n    return {\n      checkIcon,\n      content,\n      option,\n      optionActive,\n      optionEmoji,\n      optionLabel,\n      root,\n      trigger,\n      triggerEmoji,\n      triggerLabel,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.border,\n    theme.vars.borderRadius.medium,\n    theme.vars.shadows.medium,\n    theme.vars.spacing.unit,\n    theme.vars.colors.action?.hover,\n    theme.vars.typography.fontFamily,\n    theme.vars.colors.primary?.main,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;AAOA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,OAAe,iBAAG;;;qBAGP,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,UAAkB,iBAAG;;;kBAGb,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK,WAAW,MAAM,KAAK,QAAQ,KAAK;0BACvD,MAAM,KAAK,OAAO,OAAO;oBAC/B,MAAM,KAAK,OAAO,WAAW,QAAQ;;uBAElC,MAAM,KAAK,aAAa,OAAO;;;eAGvC,MAAM,KAAK,OAAO,KAAK,QAAQ;;;4BAGlB,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;;CAIjF,MAAMC,eAAuB,iBAAG;;;;CAKhC,MAAMC,eAAuB,iBAAG;;;;;;;CAQhC,MAAMC,UAAkB,iBAAG;;;0BAGL,MAAM,KAAK,OAAO,WAAW,QAAQ;uBACxC,MAAM,KAAK,aAAa,OAAO;oBAClC,MAAM,KAAK,QAAQ,OAAO;0BACpB,MAAM,KAAK,OAAO,OAAO;;;sBAG7B,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,SAAiB,iBAAG;;;aAGjB,MAAM,KAAK,QAAQ,KAAK;sBACf,MAAM,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAK,QAAQ,KAAK;;;;;;;eAOpE,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;4BAIlB,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;;CAIjF,MAAMC,eAAuB,iBAAG;;eAErB,MAAM,KAAK,OAAO,SAAS,QAAQ,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAG7E,MAAMC,cAAsB,iBAAG;;;;;CAM/B,MAAMC,cAAsB,iBAAG;;;;;;AAa/B,QAAO;EACL,WAPwB,iBAAG;eAClB,MAAM,KAAK,OAAO,SAAS,QAAQ,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;EAO3E;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,OAAO,QAAQ;CAC1B,MAAM,KAAK,WAAW;CACtB,MAAM,KAAK,OAAO,SAAS;CAC3B;CACD,CAAC;AAEJ,0CAAe"}
+{"version":3,"file":"BaseLanguageSwitcher.styles.cjs","names":["root: string","trigger: string","triggerEmoji: string","triggerLabel: string","content: string","option: string","optionActive: string","optionEmoji: string","optionLabel: string"],"sources":["../../../../../src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const root: string = css`\n      display: inline-block;\n      position: relative;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const trigger: string = css`\n      display: inline-flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 0.5);\n      padding: calc(${theme.vars.spacing.unit} * 0.75) ${theme.vars.spacing.unit};\n      border: 1px solid ${theme.vars.colors.border};\n      background: ${theme.vars.colors.background.surface};\n      cursor: pointer;\n      border-radius: ${theme.vars.borderRadius.medium};\n      min-width: 120px;\n      font-size: 0.875rem;\n      color: ${theme.vars.colors.text.primary};\n\n      &:hover {\n        background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.04)'};\n      }\n    `;\n\n    const triggerEmoji: string = css`\n      font-size: 1rem;\n      line-height: 1;\n    `;\n\n    const triggerLabel: string = css`\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font-weight: 500;\n    `;\n\n    const content: string = css`\n      min-width: 200px;\n      max-width: 320px;\n      background-color: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.medium};\n      box-shadow: ${theme.vars.shadows.medium};\n      border: 1px solid ${theme.vars.colors.border};\n      outline: none;\n      z-index: 1000;\n      padding: calc(${theme.vars.spacing.unit} * 0.5) 0;\n    `;\n\n    const option: string = css`\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 1.5);\n      width: 100%;\n      border: none;\n      background-color: transparent;\n      cursor: pointer;\n      font-size: 0.875rem;\n      text-align: start;\n      color: ${theme.vars.colors.text.primary};\n      transition: background-color 0.15s ease-in-out;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.04)'};\n      }\n    `;\n\n    const optionActive: string = css`\n      font-weight: 600;\n      color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};\n    `;\n\n    const optionEmoji: string = css`\n      font-size: 1rem;\n      line-height: 1;\n      flex-shrink: 0;\n    `;\n\n    const optionLabel: string = css`\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const checkIcon: string = css`\n      color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};\n      flex-shrink: 0;\n      margin-inline-start: auto;\n    `;\n\n    return {\n      checkIcon,\n      content,\n      option,\n      optionActive,\n      optionEmoji,\n      optionLabel,\n      root,\n      trigger,\n      triggerEmoji,\n      triggerLabel,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.border,\n    theme.vars.borderRadius.medium,\n    theme.vars.shadows.medium,\n    theme.vars.spacing.unit,\n    theme.vars.colors.action?.hover,\n    theme.vars.typography.fontFamily,\n    theme.vars.colors.primary?.main,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;AAOA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,OAAe,mBAAG;;;qBAGP,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,UAAkB,mBAAG;;;kBAGb,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK,WAAW,MAAM,KAAK,QAAQ,KAAK;0BACvD,MAAM,KAAK,OAAO,OAAO;oBAC/B,MAAM,KAAK,OAAO,WAAW,QAAQ;;uBAElC,MAAM,KAAK,aAAa,OAAO;;;eAGvC,MAAM,KAAK,OAAO,KAAK,QAAQ;;;4BAGlB,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;;CAIjF,MAAMC,eAAuB,mBAAG;;;;CAKhC,MAAMC,eAAuB,mBAAG;;;;;;;CAQhC,MAAMC,UAAkB,mBAAG;;;0BAGL,MAAM,KAAK,OAAO,WAAW,QAAQ;uBACxC,MAAM,KAAK,aAAa,OAAO;oBAClC,MAAM,KAAK,QAAQ,OAAO;0BACpB,MAAM,KAAK,OAAO,OAAO;;;sBAG7B,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,SAAiB,mBAAG;;;aAGjB,MAAM,KAAK,QAAQ,KAAK;sBACf,MAAM,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAK,QAAQ,KAAK;;;;;;;eAOpE,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;4BAIlB,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;;CAIjF,MAAMC,eAAuB,mBAAG;;eAErB,MAAM,KAAK,OAAO,SAAS,QAAQ,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAG7E,MAAMC,cAAsB,mBAAG;;;;;CAM/B,MAAMC,cAAsB,mBAAG;;;;;;AAa/B,QAAO;EACL,WAPwB,mBAAG;eAClB,MAAM,KAAK,OAAO,SAAS,QAAQ,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;EAO3E;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,OAAO,QAAQ;CAC1B,MAAM,KAAK,WAAW;CACtB,MAAM,KAAK,OAAO,SAAS;CAC3B;CACD,CAAC;AAEJ,0CAAe"}

package/dist/cjs/components/presentation/UserDropdown/BaseUserDropdown.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
 const require_Button = require('../../primitives/Button/Button.cjs');
 const require_Typography = require('../../primitives/Typography/Typography.cjs');
@@ -14,8 +15,6 @@ let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 let __floating_ui_react = require("@floating-ui/react");
 __floating_ui_react = require_rolldown_runtime.__toESM(__floating_ui_react);
 
@@ -94,10 +93,10 @@ const BaseUserDropdown = ({ fallback = null, className = "", user, isLoading = f
 		allMenuItems.push(...defaultMenuItems);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown"), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown"), className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
 			ref: refs.setReference,
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles["trigger"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles["trigger"]),
 			color: "tertiary",
 			variant: "text",
 			size: "medium",
@@ -111,7 +110,7 @@ const BaseUserDropdown = ({ fallback = null, className = "", user, isLoading = f
 			...getReferenceProps(),
 			children: showTriggerLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
 				variant: "body2",
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles["userName"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles["userName"]),
 				children: require_getDisplayName.default(mergedMappings, user)
 			})
 		}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingPortal, {
@@ -122,21 +121,20 @@ const BaseUserDropdown = ({ fallback = null, className = "", user, isLoading = f
 				initialFocus: -1,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					ref: refs.setFloating,
-					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__content"), styles["dropdownContent"]),
-					style: {
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__content"), styles["dropdownContent"], require_emotion.css({
 						...floatingStyles,
 						zIndex: 9999
-					},
+					})),
 					...getFloatingProps(),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__header"), styles["dropdownHeader"]),
+						className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__header"), styles["dropdownHeader"]),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
 							imageUrl: require_getMappedUserProfileValue.default("picture", mergedMappings, user),
 							name: require_getDisplayName.default(mergedMappings, user),
 							size: avatarSize * 1.25,
 							alt: `${require_getDisplayName.default(mergedMappings, user)}'s avatar`
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles["headerInfo"]),
+							className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles["headerInfo"]),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
 								noWrap: true,
 								className: (0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__header-name"),
@@ -152,13 +150,12 @@ const BaseUserDropdown = ({ fallback = null, className = "", user, isLoading = f
 							})]
 						})]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__menu"), styles["dropdownMenu"]),
+						className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__menu"), styles["dropdownMenu"]),
 						children: allMenuItems.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: (() => {
-							if (item.label === "") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles["divider"]) });
+							if (item.label === "") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles["divider"]) });
 							if (item.href) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 								href: item.href,
-								style: { backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent" },
-								className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles["menuItemAnchor"]),
+								className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles["menuItemAnchor"], hoveredItemIndex === index && styles["menuItemHighlighted"]),
 								onMouseEnter: () => setHoveredItemIndex(index),
 								onMouseLeave: () => setHoveredItemIndex(null),
 								onFocus: () => setHoveredItemIndex(index),
@@ -167,8 +164,7 @@ const BaseUserDropdown = ({ fallback = null, className = "", user, isLoading = f
 							});
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
 								onClick: () => handleMenuItemClick(item),
-								style: { backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent" },
-								className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles["menuItem"]),
+								className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles["menuItem"], hoveredItemIndex === index && styles["menuItemHighlighted"]),
 								color: "tertiary",
 								variant: "text",
 								size: "small",

package/dist/cjs/components/presentation/UserDropdown/BaseUserDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserDropdown.cjs","names":["BaseUserDropdown: FC<BaseUserDropdownProps>","useTheme","styles: Record<string, string>","useStyles","autoUpdate","mergedMappings: Record<string, string | string[]>","defaultMenuItems: MenuItem[]","User","LogOut","allMenuItems: MenuItem[]","Button","Avatar","getMappedUserProfileValue","getDisplayName","Typography","FloatingPortal","FloatingFocusManager"],"sources":["../../../../../src/components/presentation/UserDropdown/BaseUserDropdown.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {\n  useFloating,\n  autoUpdate,\n  offset,\n  flip,\n  shift,\n  useClick,\n  useDismiss,\n  useRole,\n  useInteractions,\n  FloatingFocusManager,\n  FloatingPortal,\n} from '@floating-ui/react';\nimport {withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useState} from 'react';\nimport useStyles from './BaseUserDropdown.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport getDisplayName from '../../../utils/getDisplayName';\nimport getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport LogOut from '../../primitives/Icons/LogOut';\nimport User from '../../primitives/Icons/User';\nimport Typography from '../../primitives/Typography/Typography';\n\ninterface MenuItem {\n  href?: string;\n  icon?: ReactNode;\n  label: ReactNode;\n  onClick?: () => void;\n}\n\nexport interface BaseUserDropdownProps {\n  /**\n   * Mapping of component attribute names to identity provider field names.\n   * Allows customizing which user profile fields should be used for each attribute.\n   */\n  attributeMapping?: {\n    [key: string]: string | string[] | undefined;\n    firstName?: string | string[];\n    lastName?: string | string[];\n    picture?: string | string[];\n    username?: string | string[];\n  };\n  /**\n   * Optional size for the avatar\n   */\n  avatarSize?: number;\n  /**\n   * Optional className for the dropdown container.\n   */\n  className?: string;\n  /**\n   * Optional element to render when no user is signed in.\n   */\n  fallback?: ReactElement | null;\n  /**\n   * Whether the user data is currently loading\n   */\n  isLoading?: boolean;\n  /**\n   * Menu items to display in the dropdown\n   */\n  menuItems?: MenuItem[];\n  /**\n   * Callback function for \"Manage Profile\" action\n   */\n  onManageProfile?: () => void;\n  /**\n   * Callback function for \"Sign Out\" action\n   */\n  onSignOut?: () => void;\n  /**\n   * The HTML element ID where the portal should be mounted\n   */\n  portalId?: string;\n  /**\n   * Show dropdown header with user information\n   */\n  showDropdownHeader?: boolean;\n  /**\n   * Show user's display name next to avatar in the trigger button\n   */\n  showTriggerLabel?: boolean;\n  /**\n   * The user object containing profile information\n   */\n  user: any;\n}\n\n/**\n * BaseUserDropdown component displays a user avatar with a dropdown menu.\n * When clicked, it shows a popover with customizable menu items.\n * This component serves as the base for framework-specific implementations.\n */\nexport const BaseUserDropdown: FC<BaseUserDropdownProps> = ({\n  fallback = null,\n  className = '',\n  user,\n  isLoading = false,\n  portalId = 'thunderid-user-dropdown',\n  menuItems = [],\n  showTriggerLabel = false,\n  avatarSize = 32,\n  onManageProfile,\n  onSignOut,\n  attributeMapping = {},\n}: BaseUserDropdownProps): ReactElement | null => {\n  const {theme, colorScheme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const [isOpen, setIsOpen] = useState(false);\n  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);\n\n  const {refs, floatingStyles, context} = useFloating({\n    middleware: [offset(5), flip({fallbackAxisSideDirection: 'end'}), shift({padding: 5})],\n    onOpenChange: setIsOpen,\n    open: isOpen,\n    placement: 'bottom-end',\n    whileElementsMounted: autoUpdate,\n  });\n\n  const click: any = useClick(context);\n  const dismiss: any = useDismiss(context);\n  const role: any = useRole(context);\n\n  const {getReferenceProps, getFloatingProps} = useInteractions([click, dismiss, role]);\n\n  const defaultAttributeMappings: Record<string, string | string[]> = {\n    email: ['emails'],\n    firstName: ['name.givenName', 'given_name'],\n    lastName: ['name.familyName', 'family_name'],\n    picture: ['profile', 'profileUrl', 'picture', 'URL'],\n    username: ['userName', 'username', 'user_name'],\n  };\n\n  const mergedMappings: Record<string, string | string[]> = Object.fromEntries(\n    Object.entries({...defaultAttributeMappings, ...attributeMapping}).filter(\n      (entry): entry is [string, string | string[]] => entry[1] !== undefined,\n    ),\n  );\n\n  if (fallback && !user && !isLoading) {\n    return fallback;\n  }\n\n  const handleMenuItemClick = (item: MenuItem): void => {\n    if (item.onClick) {\n      item.onClick();\n    }\n    setIsOpen(false);\n  };\n\n  const defaultMenuItems: MenuItem[] = [];\n\n  if (onManageProfile) {\n    defaultMenuItems.push({\n      icon: <User width=\"16\" height=\"16\" />,\n      label: 'Manage Profile',\n      onClick: onManageProfile,\n    });\n  }\n\n  if (onSignOut) {\n    defaultMenuItems.push({\n      icon: <LogOut width=\"16\" height=\"16\" />,\n      label: 'Sign Out',\n      onClick: onSignOut,\n    });\n  }\n\n  const allMenuItems: MenuItem[] = [...menuItems];\n\n  if (defaultMenuItems.length > 0) {\n    if (menuItems.length > 0) {\n      allMenuItems.push({label: '', onClick: undefined});\n    }\n\n    allMenuItems.push(...defaultMenuItems);\n  }\n\n  return (\n    <div className={cx(withVendorCSSClassPrefix('user-dropdown'), className)}>\n      <Button\n        ref={refs.setReference}\n        className={cx(withVendorCSSClassPrefix('user-dropdown__trigger'), styles['trigger'])}\n        color=\"tertiary\"\n        variant=\"text\"\n        size=\"medium\"\n        data-testid=\"thunderid-user-dropdown-trigger\"\n        startIcon={\n          <Avatar\n            imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}\n            name={getDisplayName(mergedMappings, user)}\n            size={avatarSize}\n            alt={`${getDisplayName(mergedMappings, user)}'s avatar`}\n          />\n        }\n        {...getReferenceProps()}\n      >\n        {showTriggerLabel && (\n          <Typography\n            variant=\"body2\"\n            className={cx(withVendorCSSClassPrefix('user-dropdown__trigger-label'), styles['userName'])}\n          >\n            {getDisplayName(mergedMappings, user)}\n          </Typography>\n        )}\n      </Button>\n\n      {isOpen && (\n        <FloatingPortal id={portalId}>\n          <FloatingFocusManager context={context} modal={false} initialFocus={-1}>\n            <div\n              ref={refs.setFloating}\n              className={cx(withVendorCSSClassPrefix('user-dropdown__content'), styles['dropdownContent'])}\n              style={{\n                ...floatingStyles,\n                // Floating UI doesn't set a z-index by default, so we set a high value to ensure the dropdown appears above other elements.\n                // https://floating-ui.com/docs/misc#z-index-stacking\n                zIndex: 9999,\n              }}\n              {...getFloatingProps()}\n            >\n              <div className={cx(withVendorCSSClassPrefix('user-dropdown__header'), styles['dropdownHeader'])}>\n                <Avatar\n                  imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}\n                  name={getDisplayName(mergedMappings, user)}\n                  size={avatarSize * 1.25}\n                  alt={`${getDisplayName(mergedMappings, user)}'s avatar`}\n                />\n                <div className={cx(withVendorCSSClassPrefix('user-dropdown__header-info'), styles['headerInfo'])}>\n                  <Typography\n                    noWrap\n                    className={withVendorCSSClassPrefix('user-dropdown__header-name')}\n                    variant=\"body1\"\n                    fontWeight=\"medium\"\n                  >\n                    {getDisplayName(mergedMappings, user)}\n                  </Typography>\n                  <Typography\n                    noWrap\n                    className={withVendorCSSClassPrefix('user-dropdown__header-email')}\n                    variant=\"caption\"\n                    color=\"secondary\"\n                  >\n                    {getMappedUserProfileValue('username', mergedMappings, user) ||\n                      getMappedUserProfileValue('email', mergedMappings, user)}\n                  </Typography>\n                </div>\n              </div>\n              <div className={cx(withVendorCSSClassPrefix('user-dropdown__menu'), styles['dropdownMenu'])}>\n                {allMenuItems.map((item: any, index: number) => (\n                  <div key={index}>\n                    {((): ReactElement => {\n                      if (item.label === '') {\n                        return (\n                          <div\n                            className={cx(withVendorCSSClassPrefix('user-dropdown__menu-divider'), styles['divider'])}\n                          />\n                        );\n                      }\n                      if (item.href) {\n                        return (\n                          <a\n                            href={item.href}\n                            style={{\n                              backgroundColor:\n                                hoveredItemIndex === index ? theme.vars.colors.action?.hover : 'transparent',\n                            }}\n                            className={cx(\n                              withVendorCSSClassPrefix('user-dropdown__menu-item'),\n                              styles['menuItemAnchor'],\n                            )}\n                            onMouseEnter={(): void => setHoveredItemIndex(index)}\n                            onMouseLeave={(): void => setHoveredItemIndex(null)}\n                            onFocus={(): void => setHoveredItemIndex(index)}\n                            onBlur={(): void => setHoveredItemIndex(null)}\n                          >\n                            {item.icon}\n                            <span>{item.label}</span>\n                          </a>\n                        );\n                      }\n                      return (\n                        <Button\n                          onClick={(): void => handleMenuItemClick(item)}\n                          style={{\n                            backgroundColor:\n                              hoveredItemIndex === index ? theme.vars.colors.action?.hover : 'transparent',\n                          }}\n                          className={cx(withVendorCSSClassPrefix('user-dropdown__menu-item'), styles['menuItem'])}\n                          color=\"tertiary\"\n                          variant=\"text\"\n                          size=\"small\"\n                          startIcon={item.icon}\n                          onMouseEnter={(): void => setHoveredItemIndex(index)}\n                          onMouseLeave={(): void => setHoveredItemIndex(null)}\n                        >\n                          {item.label}\n                        </Button>\n                      );\n                    })()}\n                  </div>\n                ))}\n              </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n};\n\nexport default BaseUserDropdown;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,MAAaA,oBAA+C,EAC1D,WAAW,MACX,YAAY,IACZ,MACA,YAAY,OACZ,WAAW,2BACX,YAAY,EAAE,EACd,mBAAmB,OACnB,aAAa,IACb,iBACA,WACA,mBAAmB,EAAE,OAC2B;CAChD,MAAM,EAAC,OAAO,gBAAeC,0BAAU;CACvC,MAAMC,SAAiCC,wCAAU,OAAO,YAAY;CACpE,MAAM,CAAC,QAAQ,iCAAsB,MAAM;CAC3C,MAAM,CAAC,kBAAkB,2CAA+C,KAAK;CAE7E,MAAM,EAAC,MAAM,gBAAgB,iDAAuB;EAClD,YAAY;mCAAQ,EAAE;iCAAO,EAAC,2BAA2B,OAAM,CAAC;kCAAQ,EAAC,SAAS,GAAE,CAAC;GAAC;EACtF,cAAc;EACd,MAAM;EACN,WAAW;EACX,sBAAsBC;EACvB,CAAC;CAMF,MAAM,EAAC,mBAAmB,8DAAoC;oCAJlC,QAAQ;sCACJ,QAAQ;mCACd,QAAQ;EAEkD,CAAC;CAUrF,MAAMC,iBAAoD,OAAO,YAC/D,OAAO,QAAQ;EARf,OAAO,CAAC,SAAS;EACjB,WAAW,CAAC,kBAAkB,aAAa;EAC3C,UAAU,CAAC,mBAAmB,cAAc;EAC5C,SAAS;GAAC;GAAW;GAAc;GAAW;GAAM;EACpD,UAAU;GAAC;GAAY;GAAY;GAAY;EAIF,GAAG;EAAiB,CAAC,CAAC,QAChE,UAAgD,MAAM,OAAO,OAC/D,CACF;AAED,KAAI,YAAY,CAAC,QAAQ,CAAC,UACxB,QAAO;CAGT,MAAM,uBAAuB,SAAyB;AACpD,MAAI,KAAK,QACP,MAAK,SAAS;AAEhB,YAAU,MAAM;;CAGlB,MAAMC,mBAA+B,EAAE;AAEvC,KAAI,gBACF,kBAAiB,KAAK;EACpB,MAAM,2CAACC;GAAK,OAAM;GAAK,QAAO;IAAO;EACrC,OAAO;EACP,SAAS;EACV,CAAC;AAGJ,KAAI,UACF,kBAAiB,KAAK;EACpB,MAAM,2CAACC;GAAO,OAAM;GAAK,QAAO;IAAO;EACvC,OAAO;EACP,SAAS;EACV,CAAC;CAGJ,MAAMC,eAA2B,CAAC,GAAG,UAAU;AAE/C,KAAI,iBAAiB,SAAS,GAAG;AAC/B,MAAI,UAAU,SAAS,EACrB,cAAa,KAAK;GAAC,OAAO;GAAI,SAAS;GAAU,CAAC;AAGpD,eAAa,KAAK,GAAG,iBAAiB;;AAGxC,QACE,4CAAC;EAAI,mFAAuC,gBAAgB,EAAE,UAAU;aACtE,2CAACC;GACC,KAAK,KAAK;GACV,mFAAuC,yBAAyB,EAAE,OAAO,WAAW;GACpF,OAAM;GACN,SAAQ;GACR,MAAK;GACL,eAAY;GACZ,WACE,2CAACC;IACC,UAAUC,0CAA0B,WAAW,gBAAgB,KAAK;IACpE,MAAMC,+BAAe,gBAAgB,KAAK;IAC1C,MAAM;IACN,KAAK,GAAGA,+BAAe,gBAAgB,KAAK,CAAC;KAC7C;GAEJ,GAAI,mBAAmB;aAEtB,oBACC,2CAACC;IACC,SAAQ;IACR,mFAAuC,+BAA+B,EAAE,OAAO,YAAY;cAE1FD,+BAAe,gBAAgB,KAAK;KAC1B;IAER,EAER,UACC,2CAACE;GAAe,IAAI;aAClB,2CAACC;IAA8B;IAAS,OAAO;IAAO,cAAc;cAClE,4CAAC;KACC,KAAK,KAAK;KACV,mFAAuC,yBAAyB,EAAE,OAAO,mBAAmB;KAC5F,OAAO;MACL,GAAG;MAGH,QAAQ;MACT;KACD,GAAI,kBAAkB;gBAEtB,4CAAC;MAAI,mFAAuC,wBAAwB,EAAE,OAAO,kBAAkB;iBAC7F,2CAACL;OACC,UAAUC,0CAA0B,WAAW,gBAAgB,KAAK;OACpE,MAAMC,+BAAe,gBAAgB,KAAK;OAC1C,MAAM,aAAa;OACnB,KAAK,GAAGA,+BAAe,gBAAgB,KAAK,CAAC;QAC7C,EACF,4CAAC;OAAI,mFAAuC,6BAA6B,EAAE,OAAO,cAAc;kBAC9F,2CAACC;QACC;QACA,6DAAoC,6BAA6B;QACjE,SAAQ;QACR,YAAW;kBAEVD,+BAAe,gBAAgB,KAAK;SAC1B,EACb,2CAACC;QACC;QACA,6DAAoC,8BAA8B;QAClE,SAAQ;QACR,OAAM;kBAELF,0CAA0B,YAAY,gBAAgB,KAAK,IAC1DA,0CAA0B,SAAS,gBAAgB,KAAK;SAC/C;QACT;OACF,EACN,2CAAC;MAAI,mFAAuC,sBAAsB,EAAE,OAAO,gBAAgB;gBACxF,aAAa,KAAK,MAAW,UAC5B,2CAAC,0BACuB;AACpB,WAAI,KAAK,UAAU,GACjB,QACE,2CAAC,SACC,mFAAuC,8BAA8B,EAAE,OAAO,WAAW,GACzF;AAGN,WAAI,KAAK,KACP,QACE,4CAAC;QACC,MAAM,KAAK;QACX,OAAO,EACL,iBACE,qBAAqB,QAAQ,MAAM,KAAK,OAAO,QAAQ,QAAQ,eAClE;QACD,mFAC2B,2BAA2B,EACpD,OAAO,kBACR;QACD,oBAA0B,oBAAoB,MAAM;QACpD,oBAA0B,oBAAoB,KAAK;QACnD,eAAqB,oBAAoB,MAAM;QAC/C,cAAoB,oBAAoB,KAAK;mBAE5C,KAAK,MACN,2CAAC,oBAAM,KAAK,QAAa;SACvB;AAGR,cACE,2CAACF;QACC,eAAqB,oBAAoB,KAAK;QAC9C,OAAO,EACL,iBACE,qBAAqB,QAAQ,MAAM,KAAK,OAAO,QAAQ,QAAQ,eAClE;QACD,mFAAuC,2BAA2B,EAAE,OAAO,YAAY;QACvF,OAAM;QACN,SAAQ;QACR,MAAK;QACL,WAAW,KAAK;QAChB,oBAA0B,oBAAoB,MAAM;QACpD,oBAA0B,oBAAoB,KAAK;kBAElD,KAAK;SACC;UAET,IAjDI,MAkDJ,CACN;OACE;MACF;KACe;IACR;GAEf;;AAIV,+BAAe"}
+{"version":3,"file":"BaseUserDropdown.cjs","names":["BaseUserDropdown: FC<BaseUserDropdownProps>","useTheme","styles: Record<string, string>","useStyles","autoUpdate","mergedMappings: Record<string, string | string[]>","defaultMenuItems: MenuItem[]","User","LogOut","allMenuItems: MenuItem[]","cx","Button","Avatar","getMappedUserProfileValue","getDisplayName","Typography","FloatingPortal","FloatingFocusManager","css"],"sources":["../../../../../src/components/presentation/UserDropdown/BaseUserDropdown.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  useFloating,\n  autoUpdate,\n  offset,\n  flip,\n  shift,\n  useClick,\n  useDismiss,\n  useRole,\n  useInteractions,\n  FloatingFocusManager,\n  FloatingPortal,\n} from '@floating-ui/react';\nimport {withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useState} from 'react';\nimport useStyles from './BaseUserDropdown.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {css, cx} from '../../../styles/emotion';\nimport getDisplayName from '../../../utils/getDisplayName';\nimport getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport LogOut from '../../primitives/Icons/LogOut';\nimport User from '../../primitives/Icons/User';\nimport Typography from '../../primitives/Typography/Typography';\n\ninterface MenuItem {\n  href?: string;\n  icon?: ReactNode;\n  label: ReactNode;\n  onClick?: () => void;\n}\n\nexport interface BaseUserDropdownProps {\n  /**\n   * Mapping of component attribute names to identity provider field names.\n   * Allows customizing which user profile fields should be used for each attribute.\n   */\n  attributeMapping?: {\n    [key: string]: string | string[] | undefined;\n    firstName?: string | string[];\n    lastName?: string | string[];\n    picture?: string | string[];\n    username?: string | string[];\n  };\n  /**\n   * Optional size for the avatar\n   */\n  avatarSize?: number;\n  /**\n   * Optional className for the dropdown container.\n   */\n  className?: string;\n  /**\n   * Optional element to render when no user is signed in.\n   */\n  fallback?: ReactElement | null;\n  /**\n   * Whether the user data is currently loading\n   */\n  isLoading?: boolean;\n  /**\n   * Menu items to display in the dropdown\n   */\n  menuItems?: MenuItem[];\n  /**\n   * Callback function for \"Manage Profile\" action\n   */\n  onManageProfile?: () => void;\n  /**\n   * Callback function for \"Sign Out\" action\n   */\n  onSignOut?: () => void;\n  /**\n   * The HTML element ID where the portal should be mounted\n   */\n  portalId?: string;\n  /**\n   * Show dropdown header with user information\n   */\n  showDropdownHeader?: boolean;\n  /**\n   * Show user's display name next to avatar in the trigger button\n   */\n  showTriggerLabel?: boolean;\n  /**\n   * The user object containing profile information\n   */\n  user: any;\n}\n\n/**\n * BaseUserDropdown component displays a user avatar with a dropdown menu.\n * When clicked, it shows a popover with customizable menu items.\n * This component serves as the base for framework-specific implementations.\n */\nexport const BaseUserDropdown: FC<BaseUserDropdownProps> = ({\n  fallback = null,\n  className = '',\n  user,\n  isLoading = false,\n  portalId = 'thunderid-user-dropdown',\n  menuItems = [],\n  showTriggerLabel = false,\n  avatarSize = 32,\n  onManageProfile,\n  onSignOut,\n  attributeMapping = {},\n}: BaseUserDropdownProps): ReactElement | null => {\n  const {theme, colorScheme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const [isOpen, setIsOpen] = useState(false);\n  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);\n\n  const {refs, floatingStyles, context} = useFloating({\n    middleware: [offset(5), flip({fallbackAxisSideDirection: 'end'}), shift({padding: 5})],\n    onOpenChange: setIsOpen,\n    open: isOpen,\n    placement: 'bottom-end',\n    whileElementsMounted: autoUpdate,\n  });\n\n  const click: any = useClick(context);\n  const dismiss: any = useDismiss(context);\n  const role: any = useRole(context);\n\n  const {getReferenceProps, getFloatingProps} = useInteractions([click, dismiss, role]);\n\n  const defaultAttributeMappings: Record<string, string | string[]> = {\n    email: ['emails'],\n    firstName: ['name.givenName', 'given_name'],\n    lastName: ['name.familyName', 'family_name'],\n    picture: ['profile', 'profileUrl', 'picture', 'URL'],\n    username: ['userName', 'username', 'user_name'],\n  };\n\n  const mergedMappings: Record<string, string | string[]> = Object.fromEntries(\n    Object.entries({...defaultAttributeMappings, ...attributeMapping}).filter(\n      (entry): entry is [string, string | string[]] => entry[1] !== undefined,\n    ),\n  );\n\n  if (fallback && !user && !isLoading) {\n    return fallback;\n  }\n\n  const handleMenuItemClick = (item: MenuItem): void => {\n    if (item.onClick) {\n      item.onClick();\n    }\n    setIsOpen(false);\n  };\n\n  const defaultMenuItems: MenuItem[] = [];\n\n  if (onManageProfile) {\n    defaultMenuItems.push({\n      icon: <User width=\"16\" height=\"16\" />,\n      label: 'Manage Profile',\n      onClick: onManageProfile,\n    });\n  }\n\n  if (onSignOut) {\n    defaultMenuItems.push({\n      icon: <LogOut width=\"16\" height=\"16\" />,\n      label: 'Sign Out',\n      onClick: onSignOut,\n    });\n  }\n\n  const allMenuItems: MenuItem[] = [...menuItems];\n\n  if (defaultMenuItems.length > 0) {\n    if (menuItems.length > 0) {\n      allMenuItems.push({label: '', onClick: undefined});\n    }\n\n    allMenuItems.push(...defaultMenuItems);\n  }\n\n  return (\n    <div className={cx(withVendorCSSClassPrefix('user-dropdown'), className)}>\n      <Button\n        ref={refs.setReference}\n        className={cx(withVendorCSSClassPrefix('user-dropdown__trigger'), styles['trigger'])}\n        color=\"tertiary\"\n        variant=\"text\"\n        size=\"medium\"\n        data-testid=\"thunderid-user-dropdown-trigger\"\n        startIcon={\n          <Avatar\n            imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}\n            name={getDisplayName(mergedMappings, user)}\n            size={avatarSize}\n            alt={`${getDisplayName(mergedMappings, user)}'s avatar`}\n          />\n        }\n        {...getReferenceProps()}\n      >\n        {showTriggerLabel && (\n          <Typography\n            variant=\"body2\"\n            className={cx(withVendorCSSClassPrefix('user-dropdown__trigger-label'), styles['userName'])}\n          >\n            {getDisplayName(mergedMappings, user)}\n          </Typography>\n        )}\n      </Button>\n\n      {isOpen && (\n        <FloatingPortal id={portalId}>\n          <FloatingFocusManager context={context} modal={false} initialFocus={-1}>\n            <div\n              ref={refs.setFloating}\n              className={cx(\n                withVendorCSSClassPrefix('user-dropdown__content'),\n                styles['dropdownContent'],\n                // Floating UI recomputes the position on every render, so this class is generated\n                // fresh each time rather than memoized - Emotion still injects it into the shared,\n                // nonce-tagged `<style>` element, so no inline `style` attribute is needed.\n                css({\n                  ...floatingStyles,\n                  // Floating UI doesn't set a z-index by default, so we set a high value to ensure the dropdown appears above other elements.\n                  // https://floating-ui.com/docs/misc#z-index-stacking\n                  zIndex: 9999,\n                }),\n              )}\n              {...getFloatingProps()}\n            >\n              <div className={cx(withVendorCSSClassPrefix('user-dropdown__header'), styles['dropdownHeader'])}>\n                <Avatar\n                  imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}\n                  name={getDisplayName(mergedMappings, user)}\n                  size={avatarSize * 1.25}\n                  alt={`${getDisplayName(mergedMappings, user)}'s avatar`}\n                />\n                <div className={cx(withVendorCSSClassPrefix('user-dropdown__header-info'), styles['headerInfo'])}>\n                  <Typography\n                    noWrap\n                    className={withVendorCSSClassPrefix('user-dropdown__header-name')}\n                    variant=\"body1\"\n                    fontWeight=\"medium\"\n                  >\n                    {getDisplayName(mergedMappings, user)}\n                  </Typography>\n                  <Typography\n                    noWrap\n                    className={withVendorCSSClassPrefix('user-dropdown__header-email')}\n                    variant=\"caption\"\n                    color=\"secondary\"\n                  >\n                    {getMappedUserProfileValue('username', mergedMappings, user) ||\n                      getMappedUserProfileValue('email', mergedMappings, user)}\n                  </Typography>\n                </div>\n              </div>\n              <div className={cx(withVendorCSSClassPrefix('user-dropdown__menu'), styles['dropdownMenu'])}>\n                {allMenuItems.map((item: any, index: number) => (\n                  <div key={index}>\n                    {((): ReactElement => {\n                      if (item.label === '') {\n                        return (\n                          <div\n                            className={cx(withVendorCSSClassPrefix('user-dropdown__menu-divider'), styles['divider'])}\n                          />\n                        );\n                      }\n                      if (item.href) {\n                        return (\n                          <a\n                            href={item.href}\n                            className={cx(\n                              withVendorCSSClassPrefix('user-dropdown__menu-item'),\n                              styles['menuItemAnchor'],\n                              hoveredItemIndex === index && styles['menuItemHighlighted'],\n                            )}\n                            onMouseEnter={(): void => setHoveredItemIndex(index)}\n                            onMouseLeave={(): void => setHoveredItemIndex(null)}\n                            onFocus={(): void => setHoveredItemIndex(index)}\n                            onBlur={(): void => setHoveredItemIndex(null)}\n                          >\n                            {item.icon}\n                            <span>{item.label}</span>\n                          </a>\n                        );\n                      }\n                      return (\n                        <Button\n                          onClick={(): void => handleMenuItemClick(item)}\n                          className={cx(\n                            withVendorCSSClassPrefix('user-dropdown__menu-item'),\n                            styles['menuItem'],\n                            hoveredItemIndex === index && styles['menuItemHighlighted'],\n                          )}\n                          color=\"tertiary\"\n                          variant=\"text\"\n                          size=\"small\"\n                          startIcon={item.icon}\n                          onMouseEnter={(): void => setHoveredItemIndex(index)}\n                          onMouseLeave={(): void => setHoveredItemIndex(null)}\n                        >\n                          {item.label}\n                        </Button>\n                      );\n                    })()}\n                  </div>\n                ))}\n              </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n};\n\nexport default BaseUserDropdown;\n"],"mappings":"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"}

package/dist/cjs/components/presentation/UserDropdown/BaseUserDropdown.styles.cjs

@@ -1,8 +1,7 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 
 //#region src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts
 /**
@@ -12,7 +11,7 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @returns Object containing CSS class names for component styling
 */
 const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
-	const trigger = __emotion_css.css`
+	const trigger = require_emotion.css`
       display: inline-flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} * 0.75);
@@ -42,7 +41,7 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
         box-shadow: none;
       }
     `;
-	const userName = __emotion_css.css`
+	const userName = require_emotion.css`
       color: ${theme.vars.colors.text.primary};
       font-size: 0.875rem;
       font-weight: 500;
@@ -51,7 +50,7 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-	const dropdownContent = __emotion_css.css`
+	const dropdownContent = require_emotion.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       box-shadow:
@@ -64,12 +63,15 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
       z-index: 1000;
       overflow: hidden;
     `;
-	const dropdownMenu = __emotion_css.css`
+	const dropdownMenu = require_emotion.css`
       display: flex;
       flex-direction: column;
       width: 100%;
     `;
-	const menuItem = __emotion_css.css`
+	const menuItemHighlighted = require_emotion.css`
+      background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.05)"};
+    `;
+	const menuItem = require_emotion.css`
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -99,7 +101,7 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
         box-shadow: none;
       }
     `;
-	const menuItemAnchor = __emotion_css.css`
+	const menuItemAnchor = require_emotion.css`
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -120,18 +122,18 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
         background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.05)"};
       }
     `;
-	const divider = __emotion_css.css`
+	const divider = require_emotion.css`
       margin: calc(${theme.vars.spacing.unit} * 0.5) 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-	const dropdownHeader = __emotion_css.css`
+	const dropdownHeader = require_emotion.css`
       display: flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
       padding: calc(${theme.vars.spacing.unit} * 1.5);
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
-	const headerInfo = __emotion_css.css`
+	const headerInfo = require_emotion.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
@@ -141,7 +143,7 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `;
-	const headerName = __emotion_css.css`
+	const headerName = require_emotion.css`
       color: ${theme.vars.colors.text.primary};
       font-size: 1rem;
       font-weight: 500;
@@ -155,7 +157,7 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
 		dropdownContent,
 		dropdownHeader,
 		dropdownMenu,
-		headerEmail: __emotion_css.css`
+		headerEmail: require_emotion.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
       margin: 0;
@@ -165,19 +167,20 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
     `,
 		headerInfo,
 		headerName,
-		loadingContainer: __emotion_css.css`
+		loadingContainer: require_emotion.css`
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 80px;
       gap: ${theme.vars.spacing.unit};
     `,
-		loadingText: __emotion_css.css`
+		loadingText: require_emotion.css`
       color: ${theme.vars.colors.text.secondary};
       font-size: 0.875rem;
     `,
 		menuItem,
 		menuItemAnchor,
+		menuItemHighlighted,
 		trigger,
 		userName
 	};

package/dist/cjs/components/presentation/UserDropdown/BaseUserDropdown.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserDropdown.styles.cjs","names":["trigger: string","userName: string","dropdownContent: string","dropdownMenu: string","menuItem: string","menuItemAnchor: string","divider: string","dropdownHeader: string","headerInfo: string","headerName: string"],"sources":["../../../../../src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the BaseUserDropdown component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const trigger: string = css`\n      display: inline-flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 0.75);\n      padding: calc(${theme.vars.spacing.unit} * 0.5);\n      background: none;\n      border: none;\n      cursor: pointer;\n      border-radius: ${theme.vars.borderRadius.medium};\n      transition: none;\n      box-shadow: none;\n      background-color: transparent;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};\n      }\n\n      &:focus {\n        outline: 2px solid ${theme.vars.colors.primary};\n        outline-offset: 2px;\n      }\n\n      &:hover,\n      &:focus,\n      &:active,\n      &:focus-visible {\n        transition: none;\n        box-shadow: none;\n      }\n    `;\n\n    const userName: string = css`\n      color: ${theme.vars.colors.text.primary};\n      font-size: 0.875rem;\n      font-weight: 500;\n      max-width: 150px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const dropdownContent: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      box-shadow:\n        0 4px 6px -1px rgba(0, 0, 0, 0.1),\n        0 2px 4px -1px rgba(0, 0, 0, 0.06);\n      border: 1px solid ${theme.vars.colors.border};\n      font-family: ${theme.vars.typography.fontFamily};\n      min-width: 250px;\n      max-width: 600px;\n      z-index: 1000;\n      overflow: hidden;\n    `;\n\n    const dropdownMenu: string = css`\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    `;\n\n    const menuItem: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      gap: ${theme.vars.spacing.unit};\n      padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 2);\n      width: 100%;\n      color: ${theme.vars.colors.text.primary};\n      text-decoration: none;\n      border: none;\n      cursor: pointer;\n      font-size: 0.875rem;\n      text-align: start;\n      border-radius: ${theme.vars.borderRadius.medium};\n      transition: none;\n      box-shadow: none;\n      background: transparent;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};\n      }\n\n      &:hover,\n      &:focus,\n      &:active,\n      &:focus-visible {\n        transition: none;\n        box-shadow: none;\n      }\n    `;\n\n    const menuItemAnchor: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      gap: ${theme.vars.spacing.unit};\n      padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 2);\n      width: 100%;\n      color: ${theme.vars.colors.text.primary};\n      text-decoration: none;\n      border: none;\n      background: none;\n      cursor: pointer;\n      font-size: 0.875rem;\n      text-align: start;\n      border-radius: ${theme.vars.borderRadius.medium};\n      transition: background-color 0.15s ease-in-out;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};\n      }\n    `;\n\n    const divider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 0.5) 0;\n      border-bottom: 1px solid ${theme.vars.colors.border};\n    `;\n\n    const dropdownHeader: string = css`\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      padding: calc(${theme.vars.spacing.unit} * 1.5);\n      border-bottom: 1px solid ${theme.vars.colors.border};\n    `;\n\n    const headerInfo: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} / 4);\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const headerName: string = css`\n      color: ${theme.vars.colors.text.primary};\n      font-size: 1rem;\n      font-weight: 500;\n      margin: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const headerEmail: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.875rem;\n      margin: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const loadingContainer: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 80px;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const loadingText: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.875rem;\n    `;\n\n    return {\n      divider,\n      dropdownContent,\n      dropdownHeader,\n      dropdownMenu,\n      headerEmail,\n      headerInfo,\n      headerName,\n      loadingContainer,\n      loadingText,\n      menuItem,\n      menuItemAnchor,\n      trigger,\n      userName,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.colors.border,\n    theme.vars.colors.primary,\n    theme.vars.colors.action?.hover,\n    theme.vars.borderRadius.medium,\n    theme.vars.borderRadius.large,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,UAAkB,iBAAG;;;kBAGb,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;;;;uBAIvB,MAAM,KAAK,aAAa,OAAO;;;;;;4BAM1B,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;;;6BAIxD,MAAM,KAAK,OAAO,QAAQ;;;;;;;;;;;;CAanD,MAAMC,WAAmB,iBAAG;eACjB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;CAS1C,MAAMC,kBAA0B,iBAAG;oBACnB,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;;;;0BAI3B,MAAM,KAAK,OAAO,OAAO;qBAC9B,MAAM,KAAK,WAAW,WAAW;;;;;;CAOlD,MAAMC,eAAuB,iBAAG;;;;;CAMhC,MAAMC,WAAmB,iBAAG;;;;aAInB,MAAM,KAAK,QAAQ,KAAK;sBACf,MAAM,KAAK,QAAQ,KAAK,eAAe,MAAM,KAAK,QAAQ,KAAK;;eAEtE,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;uBAMvB,MAAM,KAAK,aAAa,OAAO;;;;;;4BAM1B,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;;;;;;;;;;CAYjF,MAAMC,iBAAyB,iBAAG;;;;aAIzB,MAAM,KAAK,QAAQ,KAAK;sBACf,MAAM,KAAK,QAAQ,KAAK,eAAe,MAAM,KAAK,QAAQ,KAAK;;eAEtE,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;uBAOvB,MAAM,KAAK,aAAa,OAAO;;;;4BAI1B,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;;CAIjF,MAAMC,UAAkB,iBAAG;qBACV,MAAM,KAAK,QAAQ,KAAK;iCACZ,MAAM,KAAK,OAAO,OAAO;;CAGtD,MAAMC,iBAAyB,iBAAG;;;aAGzB,MAAM,KAAK,QAAQ,KAAK;sBACf,MAAM,KAAK,QAAQ,KAAK;iCACb,MAAM,KAAK,OAAO,OAAO;;CAGtD,MAAMC,aAAqB,iBAAG;;;kBAGhB,MAAM,KAAK,QAAQ,KAAK;;;;;;;CAQtC,MAAMC,aAAqB,iBAAG;eACnB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;AA+B1C,QAAO;EACL;EACA;EACA;EACA;EACA,aA3B0B,iBAAG;eACpB,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;;EA2B1C;EACA;EACA,kBArB+B,iBAAG;;;;;aAK3B,MAAM,KAAK,QAAQ,KAAK;;EAiB/B,aAd0B,iBAAG;eACpB,MAAM,KAAK,OAAO,KAAK,UAAU;;;EAc1C;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,OAAO,QAAQ;CAC1B,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,sCAAe"}
+{"version":3,"file":"BaseUserDropdown.styles.cjs","names":["trigger: string","userName: string","dropdownContent: string","dropdownMenu: string","menuItemHighlighted: string","menuItem: string","menuItemAnchor: string","divider: string","dropdownHeader: string","headerInfo: string","headerName: string"],"sources":["../../../../../src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the BaseUserDropdown component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const trigger: string = css`\n      display: inline-flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 0.75);\n      padding: calc(${theme.vars.spacing.unit} * 0.5);\n      background: none;\n      border: none;\n      cursor: pointer;\n      border-radius: ${theme.vars.borderRadius.medium};\n      transition: none;\n      box-shadow: none;\n      background-color: transparent;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};\n      }\n\n      &:focus {\n        outline: 2px solid ${theme.vars.colors.primary};\n        outline-offset: 2px;\n      }\n\n      &:hover,\n      &:focus,\n      &:active,\n      &:focus-visible {\n        transition: none;\n        box-shadow: none;\n      }\n    `;\n\n    const userName: string = css`\n      color: ${theme.vars.colors.text.primary};\n      font-size: 0.875rem;\n      font-weight: 500;\n      max-width: 150px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const dropdownContent: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      box-shadow:\n        0 4px 6px -1px rgba(0, 0, 0, 0.1),\n        0 2px 4px -1px rgba(0, 0, 0, 0.06);\n      border: 1px solid ${theme.vars.colors.border};\n      font-family: ${theme.vars.typography.fontFamily};\n      min-width: 250px;\n      max-width: 600px;\n      z-index: 1000;\n      overflow: hidden;\n    `;\n\n    const dropdownMenu: string = css`\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    `;\n\n    const menuItemHighlighted: string = css`\n      background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};\n    `;\n\n    const menuItem: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      gap: ${theme.vars.spacing.unit};\n      padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 2);\n      width: 100%;\n      color: ${theme.vars.colors.text.primary};\n      text-decoration: none;\n      border: none;\n      cursor: pointer;\n      font-size: 0.875rem;\n      text-align: start;\n      border-radius: ${theme.vars.borderRadius.medium};\n      transition: none;\n      box-shadow: none;\n      background: transparent;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};\n      }\n\n      &:hover,\n      &:focus,\n      &:active,\n      &:focus-visible {\n        transition: none;\n        box-shadow: none;\n      }\n    `;\n\n    const menuItemAnchor: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      gap: ${theme.vars.spacing.unit};\n      padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 2);\n      width: 100%;\n      color: ${theme.vars.colors.text.primary};\n      text-decoration: none;\n      border: none;\n      background: none;\n      cursor: pointer;\n      font-size: 0.875rem;\n      text-align: start;\n      border-radius: ${theme.vars.borderRadius.medium};\n      transition: background-color 0.15s ease-in-out;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};\n      }\n    `;\n\n    const divider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 0.5) 0;\n      border-bottom: 1px solid ${theme.vars.colors.border};\n    `;\n\n    const dropdownHeader: string = css`\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      padding: calc(${theme.vars.spacing.unit} * 1.5);\n      border-bottom: 1px solid ${theme.vars.colors.border};\n    `;\n\n    const headerInfo: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} / 4);\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const headerName: string = css`\n      color: ${theme.vars.colors.text.primary};\n      font-size: 1rem;\n      font-weight: 500;\n      margin: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const headerEmail: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.875rem;\n      margin: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const loadingContainer: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 80px;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const loadingText: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.875rem;\n    `;\n\n    return {\n      divider,\n      dropdownContent,\n      dropdownHeader,\n      dropdownMenu,\n      headerEmail,\n      headerInfo,\n      headerName,\n      loadingContainer,\n      loadingText,\n      menuItem,\n      menuItemAnchor,\n      menuItemHighlighted,\n      trigger,\n      userName,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.colors.border,\n    theme.vars.colors.primary,\n    theme.vars.colors.action?.hover,\n    theme.vars.borderRadius.medium,\n    theme.vars.borderRadius.large,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,UAAkB,mBAAG;;;kBAGb,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;;;;uBAIvB,MAAM,KAAK,aAAa,OAAO;;;;;;4BAM1B,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;;;6BAIxD,MAAM,KAAK,OAAO,QAAQ;;;;;;;;;;;;CAanD,MAAMC,WAAmB,mBAAG;eACjB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;CAS1C,MAAMC,kBAA0B,mBAAG;oBACnB,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;;;;0BAI3B,MAAM,KAAK,OAAO,OAAO;qBAC9B,MAAM,KAAK,WAAW,WAAW;;;;;;CAOlD,MAAMC,eAAuB,mBAAG;;;;;CAMhC,MAAMC,sBAA8B,mBAAG;0BACjB,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;CAG/E,MAAMC,WAAmB,mBAAG;;;;aAInB,MAAM,KAAK,QAAQ,KAAK;sBACf,MAAM,KAAK,QAAQ,KAAK,eAAe,MAAM,KAAK,QAAQ,KAAK;;eAEtE,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;uBAMvB,MAAM,KAAK,aAAa,OAAO;;;;;;4BAM1B,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;;;;;;;;;;CAYjF,MAAMC,iBAAyB,mBAAG;;;;aAIzB,MAAM,KAAK,QAAQ,KAAK;sBACf,MAAM,KAAK,QAAQ,KAAK,eAAe,MAAM,KAAK,QAAQ,KAAK;;eAEtE,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;uBAOvB,MAAM,KAAK,aAAa,OAAO;;;;4BAI1B,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;;CAIjF,MAAMC,UAAkB,mBAAG;qBACV,MAAM,KAAK,QAAQ,KAAK;iCACZ,MAAM,KAAK,OAAO,OAAO;;CAGtD,MAAMC,iBAAyB,mBAAG;;;aAGzB,MAAM,KAAK,QAAQ,KAAK;sBACf,MAAM,KAAK,QAAQ,KAAK;iCACb,MAAM,KAAK,OAAO,OAAO;;CAGtD,MAAMC,aAAqB,mBAAG;;;kBAGhB,MAAM,KAAK,QAAQ,KAAK;;;;;;;CAQtC,MAAMC,aAAqB,mBAAG;eACnB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;AA+B1C,QAAO;EACL;EACA;EACA;EACA;EACA,aA3B0B,mBAAG;eACpB,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;;EA2B1C;EACA;EACA,kBArB+B,mBAAG;;;;;aAK3B,MAAM,KAAK,QAAQ,KAAK;;EAiB/B,aAd0B,mBAAG;eACpB,MAAM,KAAK,OAAO,KAAK,UAAU;;;EAc1C;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,OAAO,QAAQ;CAC1B,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,sCAAe"}

package/dist/cjs/components/presentation/UserProfile/BaseUserProfile.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
 const require_useTranslation = require('../../../hooks/useTranslation.cjs');
 const require_Button = require('../../primitives/Button/Button.cjs');
@@ -21,8 +22,6 @@ let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 
 //#region src/components/presentation/UserProfile/BaseUserProfile.tsx
 const fieldsToSkip = [
@@ -251,7 +250,7 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 				className: styles.label,
 				children: label
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, __emotion_css.cx)(styles.value, !hasValues ? styles.valuePlaceholder : ""),
+				className: require_emotion.cx(styles.value, !hasValues ? styles.valuePlaceholder : ""),
 				children: !hasValues && isEditable$1 && onStartEdit ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
 					onClick: onStartEdit,
 					variant: "text",
@@ -322,7 +321,7 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 			className: styles.label,
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, __emotion_css.cx)(styles.value, !hasValue ? styles.valuePlaceholder : ""),
+			className: require_emotion.cx(styles.value, !hasValue ? styles.valuePlaceholder : ""),
 			children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
 				onClick: onStartEdit,
 				variant: "text",
@@ -376,7 +375,7 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 		});
 	};
 	if (!profile && !flattenedProfile) return fallback;
-	const containerClasses = (0, __emotion_css.cx)(styles.root, cardLayout ? styles.card : "", (0, __thunderid_browser.withVendorCSSClassPrefix)("user-profile"), className);
+	const containerClasses = require_emotion.cx(styles.root, cardLayout ? styles.card : "", (0, __thunderid_browser.withVendorCSSClassPrefix)("user-profile"), className);
 	const currentUser = flattenedProfile || profile;
 	const renderProfileWithoutSchemas = () => {
 		if (!currentUser) return null;
@@ -426,7 +425,7 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 		className: containerClasses,
 		children: [error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Alert.default, {
 			variant: "error",
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("user-profile", "alert")), styles.alert),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("user-profile", "alert")), styles.alert),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Title, { children: t("errors.heading") || "Error" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: error })]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: styles.infoContainer,