@thunderid/react 1.5.0 → 1.7.0

package/dist/components/account/UserAvatar/BaseUserAvatar.js

@@ -0,0 +1,61 @@
+import { Avatar } from "../../primitives/Avatar/Avatar.js";
+import { pickAnonymousAvatarName } from "@thunderid/browser";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/account/UserAvatar/BaseUserAvatar.tsx
+/**
+* Resolves the profile picture URL from common user claim fields.
+*/
+const resolvePicture = (user) => {
+	for (const key of [
+		"picture",
+		"profileUrl",
+		"profile",
+		"URL",
+		"avatarUrl",
+		"avatar"
+	]) {
+		const val = user[key];
+		if (typeof val === "string" && val) return val;
+	}
+};
+/**
+* Resolves a display name suitable for generating avatar initials.
+*/
+const resolveName = (user) => {
+	const given = user["givenName"] || user["given_name"] || "";
+	const family = user["familyName"] || user["family_name"] || "";
+	if (given && family) return `${given} ${family}`;
+	return user["displayName"] || user["name"] || given || user["username"] || user["email"] || void 0;
+};
+/**
+* Base `UserAvatar` component. Renders an avatar derived from a user object
+* without any context dependency — pass the `user` prop explicitly.
+*
+* For the context-aware version that reads the signed-in user automatically,
+* use `UserAvatar`.
+*
+* @example
+* ```tsx
+* <BaseUserAvatar user={user} size={48} />
+* <BaseUserAvatar user={null} anonymousAvatarSeed={sessionId} size={48} />
+* ```
+*/
+const BaseUserAvatar = ({ user, size = 40, className, anonymousAvatarSeed = void 0 }) => {
+	return /* @__PURE__ */ jsx(Avatar, {
+		imageUrl: useMemo(() => {
+			if (user) return resolvePicture(user);
+			return `avatar:variant=anonymous_animal,content=${pickAnonymousAvatarName(anonymousAvatarSeed)}`;
+		}, [user, anonymousAvatarSeed]),
+		name: user ? resolveName(user) : void 0,
+		size,
+		className
+	});
+};
+BaseUserAvatar.displayName = "BaseUserAvatar";
+var BaseUserAvatar_default = BaseUserAvatar;
+
+//#endregion
+export { BaseUserAvatar_default as default };
+//# sourceMappingURL=BaseUserAvatar.js.map

package/dist/components/account/UserAvatar/BaseUserAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserAvatar.js","names":["val: unknown","given: string","family: string","BaseUserAvatar: FC<BaseUserAvatarProps>"],"sources":["../../../../src/components/account/UserAvatar/BaseUserAvatar.tsx"],"sourcesContent":["// Copyright 2025-2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {pickAnonymousAvatarName, User} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\n\nexport interface BaseUserAvatarProps {\n  /**\n   * Seed used to deterministically pick the anonymous avatar shown when `user` is `null`\n   * (e.g. a session or device identifier, so the same anonymous session keeps the same\n   * avatar across renders). Falls back to a random pick when omitted.\n   */\n  anonymousAvatarSeed?: string;\n  /**\n   * Optional CSS class name for the avatar container.\n   */\n  className?: string;\n  /**\n   * Size of the avatar in pixels.\n   * @default 40\n   */\n  size?: number;\n  /**\n   * The user object. When provided, the avatar derives the image URL and\n   * initials from the user's profile fields automatically. When `null`, a\n   * curated anonymous avatar is shown instead.\n   */\n  user: User | null;\n}\n\n/**\n * Resolves the profile picture URL from common user claim fields.\n */\nconst resolvePicture = (user: User): string | undefined => {\n  for (const key of ['picture', 'profileUrl', 'profile', 'URL', 'avatarUrl', 'avatar']) {\n    const val: unknown = user[key];\n    if (typeof val === 'string' && val) return val;\n  }\n  return undefined;\n};\n\n/**\n * Resolves a display name suitable for generating avatar initials.\n */\nconst resolveName = (user: User): string | undefined => {\n  const given: string = user['givenName'] || user['given_name'] || '';\n  const family: string = user['familyName'] || user['family_name'] || '';\n  if (given && family) return `${given} ${family}`;\n\n  return user['displayName'] || user['name'] || given || user['username'] || user['email'] || undefined;\n};\n\n/**\n * Base `UserAvatar` component. Renders an avatar derived from a user object\n * without any context dependency — pass the `user` prop explicitly.\n *\n * For the context-aware version that reads the signed-in user automatically,\n * use `UserAvatar`.\n *\n * @example\n * ```tsx\n * <BaseUserAvatar user={user} size={48} />\n * <BaseUserAvatar user={null} anonymousAvatarSeed={sessionId} size={48} />\n * ```\n */\nconst BaseUserAvatar: FC<BaseUserAvatarProps> = ({\n  user,\n  size = 40,\n  className,\n  anonymousAvatarSeed = undefined,\n}: BaseUserAvatarProps): JSX.Element => {\n  const imageUrl: string | undefined = useMemo(() => {\n    if (user) return resolvePicture(user);\n    return `avatar:variant=anonymous_animal,content=${pickAnonymousAvatarName(anonymousAvatarSeed)}`;\n  }, [user, anonymousAvatarSeed]);\n  const name: string | undefined = user ? resolveName(user) : undefined;\n\n  return <Avatar imageUrl={imageUrl} name={name} size={size} className={className} />;\n};\n\nBaseUserAvatar.displayName = 'BaseUserAvatar';\n\nexport default BaseUserAvatar;\n"],"mappings":";;;;;;;;;AAkCA,MAAM,kBAAkB,SAAmC;AACzD,MAAK,MAAM,OAAO;EAAC;EAAW;EAAc;EAAW;EAAO;EAAa;EAAS,EAAE;EACpF,MAAMA,MAAe,KAAK;AAC1B,MAAI,OAAO,QAAQ,YAAY,IAAK,QAAO;;;;;;AAQ/C,MAAM,eAAe,SAAmC;CACtD,MAAMC,QAAgB,KAAK,gBAAgB,KAAK,iBAAiB;CACjE,MAAMC,SAAiB,KAAK,iBAAiB,KAAK,kBAAkB;AACpE,KAAI,SAAS,OAAQ,QAAO,GAAG,MAAM,GAAG;AAExC,QAAO,KAAK,kBAAkB,KAAK,WAAW,SAAS,KAAK,eAAe,KAAK,YAAY;;;;;;;;;;;;;;;AAgB9F,MAAMC,kBAA2C,EAC/C,MACA,OAAO,IACP,WACA,sBAAsB,aACgB;AAOtC,QAAO,oBAAC;EAAO,UANsB,cAAc;AACjD,OAAI,KAAM,QAAO,eAAe,KAAK;AACrC,UAAO,2CAA2C,wBAAwB,oBAAoB;KAC7F,CAAC,MAAM,oBAAoB,CAAC;EAGI,MAFF,OAAO,YAAY,KAAK,GAAG;EAEP;EAAiB;GAAa;;AAGrF,eAAe,cAAc;AAE7B,6BAAe"}

package/dist/components/account/UserAvatar/UserAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserAvatar/UserAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,EAAE,EAAM,MAAM,OAAO,CAAC;AAE9B,OAAuB,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAGnC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/components/account/UserAvatar/UserAvatar.js

@@ -0,0 +1,34 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import BaseUserAvatar_default from "./BaseUserAvatar.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/account/UserAvatar/UserAvatar.tsx
+/**
+* Context-aware avatar component. Renders an avatar for the currently
+* signed-in user without requiring an explicit `user` prop.
+*
+* Derives the profile picture and initials from the user's token claims,
+* with graceful fallback to generated initials when no image is available.
+*
+* @example
+* ```tsx
+* // Auto-reads from context
+* <UserAvatar size={48} />
+*
+* // Override with a specific user
+* <UserAvatar user={someUser} size={32} />
+* ```
+*/
+const UserAvatar = ({ user: userProp,...rest }) => {
+	const { user } = useThunderID_default();
+	return /* @__PURE__ */ jsx(BaseUserAvatar_default, {
+		user: userProp ?? user,
+		...rest
+	});
+};
+UserAvatar.displayName = "UserAvatar";
+var UserAvatar_default = UserAvatar;
+
+//#endregion
+export { UserAvatar_default as default };
+//# sourceMappingURL=UserAvatar.js.map

package/dist/components/account/UserAvatar/UserAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.js","names":["UserAvatar: FC<UserAvatarProps>","useThunderID","BaseUserAvatar"],"sources":["../../../../src/components/account/UserAvatar/UserAvatar.tsx"],"sourcesContent":["// Copyright 2025-2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {User} from '@thunderid/browser';\nimport {FC, JSX} from 'react';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport BaseUserAvatar, {BaseUserAvatarProps} from './BaseUserAvatar';\n\nexport interface UserAvatarProps extends Omit<BaseUserAvatarProps, 'user'> {\n  /**\n   * Override the user to render. When omitted the signed-in user from\n   * ThunderID context is used automatically.\n   */\n  user?: User | null;\n}\n\n/**\n * Context-aware avatar component. Renders an avatar for the currently\n * signed-in user without requiring an explicit `user` prop.\n *\n * Derives the profile picture and initials from the user's token claims,\n * with graceful fallback to generated initials when no image is available.\n *\n * @example\n * ```tsx\n * // Auto-reads from context\n * <UserAvatar size={48} />\n *\n * // Override with a specific user\n * <UserAvatar user={someUser} size={32} />\n * ```\n */\nconst UserAvatar: FC<UserAvatarProps> = ({user: userProp, ...rest}: UserAvatarProps): JSX.Element => {\n  const {user} = useThunderID();\n  return <BaseUserAvatar user={userProp ?? user} {...rest} />;\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\nexport default UserAvatar;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgCA,MAAMA,cAAmC,EAAC,MAAM,SAAU,GAAG,WAAwC;CACnG,MAAM,EAAC,SAAQC,sBAAc;AAC7B,QAAO,oBAACC;EAAe,MAAM,YAAY;EAAM,GAAI;GAAQ;;AAG7D,WAAW,cAAc;AAEzB,yBAAe"}

package/dist/components/account/UserDropdown/BaseUserDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserDropdown/BaseUserDropdown.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAY5D,UAAU,QAAQ;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE;QACjB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;QAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;KAC9B,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC;CACX;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA4NtD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/account/UserDropdown/BaseUserDropdown.js

@@ -0,0 +1,182 @@
+import { css, cx } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Button_default from "../../primitives/Button/Button.js";
+import Typography_default from "../../primitives/Typography/Typography.js";
+import LogOut_default from "../../primitives/Icons/LogOut.js";
+import User_default from "../../primitives/Icons/User.js";
+import getMappedUserProfileValue_default from "../../../utils/getMappedUserProfileValue.js";
+import getDisplayName_default from "../../../utils/getDisplayName.js";
+import { Avatar } from "../../primitives/Avatar/Avatar.js";
+import BaseUserDropdown_styles_default from "./BaseUserDropdown.styles.js";
+import { withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+
+//#region src/components/account/UserDropdown/BaseUserDropdown.tsx
+/**
+* BaseUserDropdown component displays a user avatar with a dropdown menu.
+* When clicked, it shows a popover with customizable menu items.
+* This component serves as the base for framework-specific implementations.
+*/
+const BaseUserDropdown = ({ fallback = null, className = "", user, isLoading = false, portalId = "thunderid-user-dropdown", menuItems = [], showTriggerLabel = false, avatarSize = 32, manageProfileLabel = "Manage Profile", onManageProfile, onSignOut, attributeMapping = {} }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = BaseUserDropdown_styles_default(theme, colorScheme);
+	const [isOpen, setIsOpen] = useState(false);
+	const [hoveredItemIndex, setHoveredItemIndex] = useState(null);
+	const { refs, floatingStyles, context } = useFloating({
+		middleware: [
+			offset(5),
+			flip({ fallbackAxisSideDirection: "end" }),
+			shift({ padding: 5 })
+		],
+		onOpenChange: setIsOpen,
+		open: isOpen,
+		placement: "bottom-end",
+		whileElementsMounted: autoUpdate
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useClick(context),
+		useDismiss(context),
+		useRole(context)
+	]);
+	const mergedMappings = Object.fromEntries(Object.entries({
+		email: ["emails"],
+		firstName: ["name.givenName", "given_name"],
+		lastName: ["name.familyName", "family_name"],
+		picture: [
+			"profile",
+			"profileUrl",
+			"picture",
+			"URL"
+		],
+		username: [
+			"userName",
+			"username",
+			"user_name"
+		],
+		...attributeMapping
+	}).filter((entry) => entry[1] !== void 0));
+	if (fallback && !user && !isLoading) return fallback;
+	const handleMenuItemClick = (item) => {
+		if (item.onClick) item.onClick();
+		setIsOpen(false);
+	};
+	const defaultMenuItems = [];
+	if (onManageProfile) defaultMenuItems.push({
+		icon: /* @__PURE__ */ jsx(User_default, {
+			width: "16",
+			height: "16"
+		}),
+		label: manageProfileLabel,
+		onClick: onManageProfile
+	});
+	if (onSignOut) defaultMenuItems.push({
+		icon: /* @__PURE__ */ jsx(LogOut_default, {
+			width: "16",
+			height: "16"
+		}),
+		label: "Sign Out",
+		onClick: onSignOut
+	});
+	const allMenuItems = [...menuItems];
+	if (defaultMenuItems.length > 0) {
+		if (menuItems.length > 0) allMenuItems.push({
+			label: "",
+			onClick: void 0
+		});
+		allMenuItems.push(...defaultMenuItems);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(withVendorCSSClassPrefix("user-dropdown"), className),
+		children: [/* @__PURE__ */ jsx(Button_default, {
+			ref: refs.setReference,
+			className: cx(withVendorCSSClassPrefix("user-dropdown__trigger"), styles["trigger"]),
+			color: "tertiary",
+			variant: "text",
+			size: "medium",
+			"data-testid": "thunderid-user-dropdown-trigger",
+			startIcon: /* @__PURE__ */ jsx(Avatar, {
+				imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
+				name: getDisplayName_default(mergedMappings, user),
+				size: avatarSize,
+				alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
+			}),
+			...getReferenceProps(),
+			children: showTriggerLabel && /* @__PURE__ */ jsx(Typography_default, {
+				variant: "body2",
+				className: cx(withVendorCSSClassPrefix("user-dropdown__trigger-label"), styles["userName"]),
+				children: getDisplayName_default(mergedMappings, user)
+			})
+		}), isOpen && /* @__PURE__ */ jsx(FloatingPortal, {
+			id: portalId,
+			children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+				context,
+				modal: false,
+				initialFocus: -1,
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: refs.setFloating,
+					className: cx(withVendorCSSClassPrefix("user-dropdown__content"), styles["dropdownContent"], css({
+						...floatingStyles,
+						zIndex: 9999
+					})),
+					...getFloatingProps(),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cx(withVendorCSSClassPrefix("user-dropdown__header"), styles["dropdownHeader"]),
+						children: [/* @__PURE__ */ jsx(Avatar, {
+							imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
+							name: getDisplayName_default(mergedMappings, user),
+							size: avatarSize * 1.25,
+							alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
+						}), /* @__PURE__ */ jsxs("div", {
+							className: cx(withVendorCSSClassPrefix("user-dropdown__header-info"), styles["headerInfo"]),
+							children: [/* @__PURE__ */ jsx(Typography_default, {
+								noWrap: true,
+								className: withVendorCSSClassPrefix("user-dropdown__header-name"),
+								variant: "body1",
+								fontWeight: "medium",
+								children: getDisplayName_default(mergedMappings, user)
+							}), /* @__PURE__ */ jsx(Typography_default, {
+								noWrap: true,
+								className: withVendorCSSClassPrefix("user-dropdown__header-email"),
+								variant: "caption",
+								color: "secondary",
+								children: getMappedUserProfileValue_default("username", mergedMappings, user) || getMappedUserProfileValue_default("email", mergedMappings, user)
+							})]
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: cx(withVendorCSSClassPrefix("user-dropdown__menu"), styles["dropdownMenu"]),
+						children: allMenuItems.map((item, index) => /* @__PURE__ */ jsx("div", { children: (() => {
+							if (item.label === "") return /* @__PURE__ */ jsx("div", { className: cx(withVendorCSSClassPrefix("user-dropdown__menu-divider"), styles["divider"]) });
+							if (item.href) return /* @__PURE__ */ jsxs("a", {
+								href: item.href,
+								className: cx(withVendorCSSClassPrefix("user-dropdown__menu-item"), styles["menuItemAnchor"], hoveredItemIndex === index && styles["menuItemHighlighted"]),
+								onMouseEnter: () => setHoveredItemIndex(index),
+								onMouseLeave: () => setHoveredItemIndex(null),
+								onFocus: () => setHoveredItemIndex(index),
+								onBlur: () => setHoveredItemIndex(null),
+								children: [item.icon, /* @__PURE__ */ jsx("span", { children: item.label })]
+							});
+							return /* @__PURE__ */ jsx(Button_default, {
+								onClick: () => handleMenuItemClick(item),
+								className: cx(withVendorCSSClassPrefix("user-dropdown__menu-item"), styles["menuItem"], hoveredItemIndex === index && styles["menuItemHighlighted"]),
+								color: "tertiary",
+								variant: "text",
+								size: "small",
+								startIcon: item.icon,
+								onMouseEnter: () => setHoveredItemIndex(index),
+								onMouseLeave: () => setHoveredItemIndex(null),
+								children: item.label
+							});
+						})() }, index))
+					})]
+				})
+			})
+		})]
+	});
+};
+var BaseUserDropdown_default = BaseUserDropdown;
+
+//#endregion
+export { BaseUserDropdown, BaseUserDropdown_default as default };
+//# sourceMappingURL=BaseUserDropdown.js.map

package/dist/components/account/UserDropdown/BaseUserDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserDropdown.js","names":["BaseUserDropdown: FC<BaseUserDropdownProps>","useTheme","styles: Record<string, string>","useStyles","mergedMappings: Record<string, string | string[]>","defaultMenuItems: MenuItem[]","User","LogOut","allMenuItems: MenuItem[]","Button","getMappedUserProfileValue","getDisplayName","Typography"],"sources":["../../../../src/components/account/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   * Label for the \"Manage Profile\" menu item. Defaults to `'Manage Profile'`; set this\n   * to relabel the action (e.g. `'Manage Account'`) without replacing the whole item.\n   */\n  manageProfileLabel?: string;\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  manageProfileLabel = 'Manage Profile',\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: manageProfileLabel,\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/components/account/UserDropdown/BaseUserDropdown.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserDropdown.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserDropdown/BaseUserDropdown.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;GAKG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA4MxE,CAAC;AAEL,eAAe,SAAS,CAAC"}

package/dist/components/account/UserDropdown/BaseUserDropdown.styles.js

@@ -0,0 +1,202 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+
+//#region src/components/account/UserDropdown/BaseUserDropdown.styles.ts
+/**
+* Creates styles for the BaseUserDropdown component
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => useMemo(() => {
+	const trigger = css`
+      display: inline-flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 0.75);
+      padding: calc(${theme.vars.spacing.unit} * 0.5);
+      background: none;
+      border: none;
+      cursor: pointer;
+      border-radius: ${theme.vars.borderRadius.medium};
+      transition: none;
+      box-shadow: none;
+      background-color: transparent;
+
+      &:hover {
+        background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.05)"};
+      }
+
+      &:focus {
+        outline: 2px solid ${theme.vars.colors.primary};
+        outline-offset: 2px;
+      }
+
+      &:hover,
+      &:focus,
+      &:active,
+      &:focus-visible {
+        transition: none;
+        box-shadow: none;
+      }
+    `;
+	const userName = css`
+      color: ${theme.vars.colors.text.primary};
+      font-size: 0.875rem;
+      font-weight: 500;
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+	const dropdownContent = css`
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+      box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      border: 1px solid ${theme.vars.colors.border};
+      font-family: ${theme.vars.typography.fontFamily};
+      min-width: 250px;
+      max-width: 600px;
+      z-index: 1000;
+      overflow: hidden;
+    `;
+	const dropdownMenu = css`
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    `;
+	const menuItemHighlighted = css`
+      background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.05)"};
+    `;
+	const menuItem = css`
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: ${theme.vars.spacing.unit};
+      padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 2);
+      width: 100%;
+      color: ${theme.vars.colors.text.primary};
+      text-decoration: none;
+      border: none;
+      cursor: pointer;
+      font-size: 0.875rem;
+      text-align: start;
+      border-radius: ${theme.vars.borderRadius.medium};
+      transition: none;
+      box-shadow: none;
+      background: transparent;
+
+      &:hover {
+        background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.05)"};
+      }
+
+      &:hover,
+      &:focus,
+      &:active,
+      &:focus-visible {
+        transition: none;
+        box-shadow: none;
+      }
+    `;
+	const menuItemAnchor = css`
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: ${theme.vars.spacing.unit};
+      padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 2);
+      width: 100%;
+      color: ${theme.vars.colors.text.primary};
+      text-decoration: none;
+      border: none;
+      background: none;
+      cursor: pointer;
+      font-size: 0.875rem;
+      text-align: start;
+      border-radius: ${theme.vars.borderRadius.medium};
+      transition: background-color 0.15s ease-in-out;
+
+      &:hover {
+        background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.05)"};
+      }
+    `;
+	const divider = css`
+      margin: calc(${theme.vars.spacing.unit} * 0.5) 0;
+      border-bottom: 1px solid ${theme.vars.colors.border};
+    `;
+	const dropdownHeader = 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 = css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} / 4);
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+	const headerName = css`
+      color: ${theme.vars.colors.text.primary};
+      font-size: 1rem;
+      font-weight: 500;
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+	return {
+		divider,
+		dropdownContent,
+		dropdownHeader,
+		dropdownMenu,
+		headerEmail: css`
+      color: ${theme.vars.colors.text.secondary};
+      font-size: 0.875rem;
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+		headerInfo,
+		headerName,
+		loadingContainer: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 80px;
+      gap: ${theme.vars.spacing.unit};
+    `,
+		loadingText: css`
+      color: ${theme.vars.colors.text.secondary};
+      font-size: 0.875rem;
+    `,
+		menuItem,
+		menuItemAnchor,
+		menuItemHighlighted,
+		trigger,
+		userName
+	};
+}, [
+	theme.vars.colors.background.surface,
+	theme.vars.colors.text.primary,
+	theme.vars.colors.text.secondary,
+	theme.vars.colors.border,
+	theme.vars.colors.primary,
+	theme.vars.colors.action?.hover,
+	theme.vars.borderRadius.medium,
+	theme.vars.borderRadius.large,
+	theme.vars.spacing.unit,
+	theme.vars.typography.fontFamily,
+	colorScheme
+]);
+var BaseUserDropdown_styles_default = useStyles;
+
+//#endregion
+export { BaseUserDropdown_styles_default as default };
+//# sourceMappingURL=BaseUserDropdown.styles.js.map

package/dist/components/account/UserDropdown/BaseUserDropdown.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserDropdown.styles.js","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/account/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,gBAC/B,cAAc;CACZ,MAAMA,UAAkB,GAAG;;;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,GAAG;eACjB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;CAS1C,MAAMC,kBAA0B,GAAG;oBACnB,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;;;;0BAI3B,MAAM,KAAK,OAAO,OAAO;qBAC9B,MAAM,KAAK,WAAW,WAAW;;;;;;CAOlD,MAAMC,eAAuB,GAAG;;;;;CAMhC,MAAMC,sBAA8B,GAAG;0BACjB,MAAM,KAAK,OAAO,QAAQ,SAAS,sBAAsB;;CAG/E,MAAMC,WAAmB,GAAG;;;;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,GAAG;;;;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,GAAG;qBACV,MAAM,KAAK,QAAQ,KAAK;iCACZ,MAAM,KAAK,OAAO,OAAO;;CAGtD,MAAMC,iBAAyB,GAAG;;;aAGzB,MAAM,KAAK,QAAQ,KAAK;sBACf,MAAM,KAAK,QAAQ,KAAK;iCACb,MAAM,KAAK,OAAO,OAAO;;CAGtD,MAAMC,aAAqB,GAAG;;;kBAGhB,MAAM,KAAK,QAAQ,KAAK;;;;;;;CAQtC,MAAMC,aAAqB,GAAG;eACnB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;AA+B1C,QAAO;EACL;EACA;EACA;EACA;EACA,aA3B0B,GAAG;eACpB,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;;EA2B1C;EACA;EACA,kBArB+B,GAAG;;;;;aAK3B,MAAM,KAAK,QAAQ,KAAK;;EAiB/B,aAd0B,GAAG;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/components/account/UserDropdown/UserDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserDropdown/UserDropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAW,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAgD,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAIxG;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,2CAA2C;IAC3C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,aAAa,EAAE,OAAO,CAAC;IACvB,6FAA6F;IAC7F,IAAI,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClC,+CAA+C;IAC/C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,GAAG,CAAC;CACX;AAED;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,iBAAiB,CAAC,GAAG;IACxF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;IACzD;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAC/D;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAyFvC,CAAC;AAEF,eAAe,YAAY,CAAC"}