@thunderid/react 0.12.0 → 0.13.0

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

@@ -1 +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/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":"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"}
+{"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/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/components/presentation/UserDropdown/BaseUserDropdown.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserDropdown.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC;;;;;GAKG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAuMxE,CAAC;AAEL,eAAe,SAAS,CAAC"}
+{"version":3,"file":"BaseUserDropdown.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/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/presentation/UserDropdown/BaseUserDropdown.styles.js

@@ -1,5 +1,5 @@
+import { css } from "../../../styles/emotion.js";
 import { useMemo } from "react";
-import { css } from "@emotion/css";
 
 //#region src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts
 /**
@@ -65,6 +65,9 @@ const useStyles = (theme, colorScheme) => useMemo(() => {
       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;
@@ -175,6 +178,7 @@ const useStyles = (theme, colorScheme) => useMemo(() => {
     `,
 		menuItem,
 		menuItemAnchor,
+		menuItemHighlighted,
 		trigger,
 		userName
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"BaseUserDropdown.styles.js","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,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,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;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.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/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,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/presentation/UserProfile/BaseUserProfile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,IAAI,EAAiC,WAAW,EAAY,MAAM,oBAAoB,CAAC;AAC/F,OAAO,EAAC,EAAE,EAAE,YAAY,EAAmC,MAAM,OAAO,CAAC;AAuCzE,MAAM,WAAW,oBAAoB;IACnC,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,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+BD,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAwkB7C,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"BaseUserProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,IAAI,EAAiC,WAAW,EAAY,MAAM,oBAAoB,CAAC;AAC/F,OAAO,EAAC,EAAE,EAAE,YAAY,EAAmC,MAAM,OAAO,CAAC;AAwCzE,MAAM,WAAW,oBAAoB;IACnC,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,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+BD,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAwkB7C,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1,3 +1,4 @@
+import { cx } from "../../../styles/emotion.js";
 import useTheme_default from "../../../contexts/Theme/useTheme.js";
 import useTranslation_default from "../../../hooks/useTranslation.js";
 import Button_default from "../../primitives/Button/Button.js";
@@ -17,7 +18,6 @@ import MultiInput_default from "../../primitives/MultiInput/MultiInput.js";
 import { bem, startCase, withVendorCSSClassPrefix } from "@thunderid/browser";
 import { useCallback, useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
 
 //#region src/components/presentation/UserProfile/BaseUserProfile.tsx
 const fieldsToSkip = [

package/dist/components/presentation/UserProfile/BaseUserProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserProfile.js","names":["fieldsToSkip: string[]","readonlyFields: string[]","BaseUserProfile: FC<BaseUserProfileProps>","useTheme","useTranslation","shouldShowField: any","toggleFieldEdit: any","getFieldPlaceholder: any","fieldLabel: any","formatLabel: any","styles: any","useStyles","ObjectDisplay: FC<{data: unknown}>","keys: any","current: any","i: any","key: any","handleFieldSave: any","fieldName: string","fieldValue: any","payload: Record<string, any>","handleFieldCancel: any","currentUser: any","currentUser","mergedMappings: Record<string, string | string[]>","label: any","displayValue: string","displayValue","hasValues: any","isEditable: any","isEditable","currentValue: any","fieldValues: string[]","MultiInput","Button","commonProps: any","field: ReactElement","TextField","DatePicker","Checkbox","hasValue: any","isFieldEditing: any","isReadonlyField: any","tempEditedUser: any","containerClasses: any","displayName: any","getDisplayName","profileEntries: any","getMappedUserProfileValue","Typography","Divider","schemaWithValue: any","profileContent: any","CardPrimitive","AlertPrimitive","DialogPrimitive"],"sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {User, withVendorCSSClassPrefix, bem, Preferences, startCase} from '@thunderid/browser';\nimport {FC, ReactElement, useState, useCallback, useEffect} from 'react';\nimport useStyles from './BaseUserProfile.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport getDisplayName from '../../../utils/getDisplayName';\nimport getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';\nimport AlertPrimitive from '../../primitives/Alert/Alert';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport CardPrimitive from '../../primitives/Card/Card';\nimport Checkbox from '../../primitives/Checkbox/Checkbox';\nimport DatePicker from '../../primitives/DatePicker/DatePicker';\nimport DialogPrimitive from '../../primitives/Dialog/Dialog';\nimport Divider from '../../primitives/Divider/Divider';\nimport MultiInput from '../../primitives/MultiInput/MultiInput';\nimport TextField from '../../primitives/TextField/TextField';\nimport Typography from '../../primitives/Typography/Typography';\n\ninterface ExtendedFlatSchema {\n  path?: string;\n  schemaId?: string;\n}\n\ninterface Schema extends ExtendedFlatSchema {\n  caseExact?: boolean;\n  description?: string;\n  displayName?: string;\n  displayOrder?: string;\n  multiValued?: boolean;\n  mutability?: string;\n  name?: string;\n  required?: boolean;\n  returned?: string;\n  subAttributes?: Schema[];\n  type?: string;\n  uniqueness?: string;\n  value?: any;\n}\n\nexport interface BaseUserProfileProps {\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  cardLayout?: boolean;\n  className?: string;\n  displayNameAttributes?: string[];\n  editable?: boolean;\n  error?: string | null;\n  fallback?: ReactElement | null;\n  flattenedProfile?: User;\n  hideFields?: string[];\n  isLoading?: boolean;\n  mode?: 'inline' | 'popup';\n  onOpenChange?: (open: boolean) => void;\n  onUpdate?: (payload: any) => Promise<void>;\n  open?: boolean;\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n  profile?: User;\n  showFields?: string[];\n\n  title?: string;\n}\n\n// Fields to skip based on schema.name\nconst fieldsToSkip: string[] = [\n  'roles.default',\n  'active',\n  'groups',\n  'accountLocked',\n  'accountDisabled',\n  'oneTimePassword',\n  'userSourceId',\n  'idpType',\n  'localCredentialExists',\n  'active',\n  'ResourceType',\n  'ExternalID',\n  'MetaData',\n  'verifiedMobileNumbers',\n  'verifiedEmailAddresses',\n  'phoneNumbers.mobile',\n  'emailAddresses',\n  'preferredMFAOption',\n  'attributes',\n  'picture',\n  'isReadOnly',\n  'isReadonly',\n];\n\n// Fields that should be readonly\nconst readonlyFields: string[] = ['attributes', 'id', 'isReadOnly', 'ouId', 'username'];\n\nconst BaseUserProfile: FC<BaseUserProfileProps> = ({\n  fallback = null,\n  className = '',\n  cardLayout = true,\n  profile,\n  flattenedProfile,\n  mode = 'inline',\n  title,\n  attributeMapping = {},\n  editable = true,\n  onOpenChange,\n  onUpdate,\n  open = false,\n  error = null,\n  isLoading = false,\n  preferences,\n  showFields = [],\n  hideFields = [],\n  displayNameAttributes = [],\n}: BaseUserProfileProps): ReactElement | null => {\n  const {theme, colorScheme} = useTheme();\n  const [editedUser, setEditedUser] = useState(flattenedProfile || profile);\n  const [editingFields, setEditingFields] = useState<Record<string, boolean>>({});\n  const {t} = useTranslation(preferences?.i18n);\n\n  useEffect(() => {\n    const nextUser = flattenedProfile ?? profile;\n    if (!nextUser) return;\n\n    setEditedUser((prev: any) => {\n      if (!prev) return nextUser;\n\n      const updated = {...nextUser};\n      Object.keys(prev).forEach((key) => {\n        if (editingFields[key]) {\n          updated[key] = prev[key];\n        }\n      });\n      return updated;\n    });\n  }, [flattenedProfile, profile, editingFields]);\n\n  /**\n   * Determines if a field should be visible based on showFields, hideFields, and fieldsToSkip arrays.\n   * Priority order:\n   * 1. fieldsToSkip (always hidden) - highest priority\n   * 2. hideFields (explicitly hidden)\n   * 3. showFields (explicitly shown, if array is not empty)\n   * 4. Default behavior (show all fields not in fieldsToSkip)\n   */\n  const shouldShowField: any = useCallback(\n    (fieldName: string): boolean => {\n      // Always skip fields in the hardcoded fieldsToSkip array\n      if (fieldsToSkip.includes(fieldName)) {\n        return false;\n      }\n\n      // If hideFields is provided and contains this field, hide it\n      if (hideFields.length > 0 && hideFields.includes(fieldName)) {\n        return false;\n      }\n\n      // If showFields is provided and not empty, only show fields in that array\n      if (showFields.length > 0) {\n        return showFields.includes(fieldName);\n      }\n\n      return true;\n    },\n    [showFields, hideFields],\n  );\n\n  const PencilIcon = (): any => (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" />\n    </svg>\n  );\n\n  const toggleFieldEdit: any = useCallback((fieldName: string) => {\n    setEditingFields((prev: any) => ({\n      ...prev,\n      [fieldName]: !prev[fieldName],\n    }));\n  }, []);\n\n  const getFieldPlaceholder: any = useCallback((schema: Schema): string => {\n    const {type, displayName, description, name} = schema;\n\n    const fieldLabel: any = displayName || description || name || 'value';\n\n    switch (type) {\n      case 'DATE_TIME':\n        return `Enter your ${fieldLabel.toLowerCase()}`;\n      case 'BOOLEAN':\n        return `Select ${fieldLabel.toLowerCase()}`;\n      case 'COMPLEX':\n        return `Enter ${fieldLabel.toLowerCase()} details`;\n      default:\n        return `Enter your ${fieldLabel.toLowerCase()}`;\n    }\n  }, []);\n\n  const formatLabel: any = useCallback(\n    (key: string): string =>\n      key\n        .split(/(?=[A-Z])|_/)\n        .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n        .join(' '),\n    [],\n  );\n\n  const styles: any = useStyles(theme, colorScheme);\n\n  const ObjectDisplay: FC<{data: unknown}> = ({data}: {data: unknown}): ReactElement | null => {\n    if (!data || typeof data !== 'object') return null;\n\n    return (\n      <table className={styles.value}>\n        <tbody>\n          {Object.entries(data).map(([key, value]: any) => (\n            <tr key={key}>\n              <td className={styles.objectKey}>\n                <strong>{formatLabel(key)}:</strong>\n              </td>\n              <td className={styles.objectValue}>\n                {typeof value === 'object' ? <ObjectDisplay data={value} /> : String(value)}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    );\n  };\n\n  function set(obj: Record<string, any>, path: string, value: any): void {\n    const keys: any = path.split('.');\n    let current: any = obj;\n\n    for (let i: any = 0; i < keys.length; i += 1) {\n      const key: any = keys[i];\n\n      if (i === keys.length - 1) {\n        current[key] = value;\n      } else {\n        if (!current[key] || typeof current[key] !== 'object') {\n          current[key] = {};\n        }\n        current = current[key];\n      }\n    }\n  }\n\n  const handleFieldSave: any = useCallback(\n    (schema: Schema): void => {\n      if (!onUpdate || !schema.name) return;\n\n      const fieldName: string = schema.name;\n      let fieldValue: any;\n      if (editedUser && fieldName && editedUser[fieldName] !== undefined) {\n        fieldValue = editedUser[fieldName];\n      } else if (flattenedProfile?.[fieldName] !== undefined) {\n        fieldValue = flattenedProfile[fieldName];\n      } else {\n        fieldValue = '';\n      }\n\n      if (Array.isArray(fieldValue)) {\n        fieldValue = fieldValue.filter((v: any) => v !== undefined && v !== null && v !== '');\n      }\n\n      let payload: Record<string, any> = {};\n      set(payload, fieldName, fieldValue);\n\n      onUpdate(payload);\n\n      toggleFieldEdit(fieldName);\n    },\n    [editedUser, flattenedProfile, onUpdate, toggleFieldEdit],\n  );\n\n  const handleFieldCancel: any = useCallback(\n    (fieldName: string) => {\n      const currentUser: any = flattenedProfile || profile;\n      setEditedUser((prev: any) => ({\n        ...prev,\n        [fieldName]: currentUser[fieldName],\n      }));\n      toggleFieldEdit(fieldName);\n    },\n    [flattenedProfile, profile, toggleFieldEdit],\n  );\n\n  const defaultAttributeMappings: Record<string, string | string[]> = {\n    email: ['emails', 'email'],\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  const renderSchemaField = (\n    schema: Schema,\n    isEditing: boolean,\n    onEditValue?: (value: any) => void,\n    onStartEdit?: () => void,\n  ): ReactElement | null => {\n    if (!schema) return null;\n    const {value, displayName, description, name, type, required, mutability, subAttributes, multiValued} = schema;\n    const label: any = displayName || description || (name ? startCase(name) : '');\n\n    if (subAttributes && Array.isArray(subAttributes)) {\n      return (\n        <>\n          {subAttributes.map((subAttr: any, index: any) => {\n            let displayValue: string;\n            if (Array.isArray(subAttr.value)) {\n              displayValue = subAttr.value\n                .map((item: any) => (typeof item === 'object' ? JSON.stringify(item) : String(item)))\n                .join(', ');\n            } else if (typeof subAttr.value === 'object') {\n              displayValue = JSON.stringify(subAttr.value);\n            } else {\n              displayValue = String(subAttr.value);\n            }\n\n            return (\n              <div key={index} className={styles.field}>\n                <span className={styles.label}>{subAttr.displayName || subAttr.description || ''}</span>\n                <div className={styles.value}>{displayValue}</div>\n              </div>\n            );\n          })}\n        </>\n      );\n    }\n\n    if (Array.isArray(value) || multiValued) {\n      const hasValues: any = Array.isArray(value)\n        ? value.length > 0\n        : value !== undefined && value !== null && value !== '';\n      const isEditable: any = editable && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '');\n\n      if (isEditing && onEditValue && isEditable) {\n        let currentValue: any;\n        if (editedUser && name && editedUser[name] !== undefined) {\n          currentValue = editedUser[name];\n        } else if (flattenedProfile && name && flattenedProfile[name] !== undefined) {\n          currentValue = flattenedProfile[name];\n        } else {\n          currentValue = value;\n        }\n\n        let fieldValues: string[];\n        if (Array.isArray(currentValue)) {\n          fieldValues = currentValue.map(String);\n        } else if (currentValue !== undefined && currentValue !== null && currentValue !== '') {\n          fieldValues = [String(currentValue)];\n        } else {\n          fieldValues = [];\n        }\n\n        return (\n          <>\n            <span className={styles.label}>{label}</span>\n            <div className={styles.value}>\n              <MultiInput\n                values={fieldValues}\n                onChange={(newValues: any): void => {\n                  if (multiValued || Array.isArray(currentValue)) {\n                    onEditValue(newValues);\n                  } else {\n                    onEditValue(newValues[0] || '');\n                  }\n                }}\n                placeholder={getFieldPlaceholder(schema)}\n                fieldType={type as 'STRING' | 'DATE_TIME' | 'BOOLEAN'}\n                type={type === 'DATE_TIME' ? 'date' : 'text'}\n                required={required}\n              />\n            </div>\n          </>\n        );\n      }\n\n      let displayValue: string;\n      if (hasValues) {\n        if (Array.isArray(value)) {\n          displayValue = value\n            .map((item: any) => (typeof item === 'object' ? JSON.stringify(item) : String(item)))\n            .join(', ');\n        } else {\n          displayValue = String(value);\n        }\n      } else if (isEditable) {\n        displayValue = getFieldPlaceholder(schema);\n      } else {\n        displayValue = '-';\n      }\n\n      return (\n        <>\n          <span className={styles.label}>{label}</span>\n          <div className={cx(styles.value, !hasValues ? styles.valuePlaceholder : '')}>\n            {!hasValues && isEditable && onStartEdit ? (\n              <Button\n                onClick={onStartEdit}\n                variant=\"text\"\n                color=\"secondary\"\n                size=\"small\"\n                title=\"Click to edit\"\n                className={styles.editButton}\n              >\n                {displayValue}\n              </Button>\n            ) : (\n              displayValue\n            )}\n          </div>\n        </>\n      );\n    }\n    if (type === 'COMPLEX' && typeof value === 'object') {\n      return <ObjectDisplay data={value} />;\n    }\n\n    if (isEditing && onEditValue && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '')) {\n      let fieldValue: any;\n      if (editedUser && name && editedUser[name] !== undefined) {\n        fieldValue = editedUser[name];\n      } else if (flattenedProfile && name && flattenedProfile[name] !== undefined) {\n        fieldValue = flattenedProfile[name];\n      } else {\n        fieldValue = value || '';\n      }\n\n      const commonProps: any = {\n        label: undefined,\n        onChange: (e: any) => onEditValue(e.target ? e.target.value : e),\n        placeholder: getFieldPlaceholder(schema),\n        required,\n        value: fieldValue,\n        // Removed inline style, use .styles.ts for marginBottom if needed\n      };\n      let field: ReactElement;\n      switch (type) {\n        case 'STRING':\n          field = <TextField {...commonProps} />;\n          break;\n        case 'DATE_TIME':\n          field = <DatePicker {...commonProps} />;\n          break;\n        case 'BOOLEAN':\n          field = (\n            <Checkbox\n              {...commonProps}\n              checked={!!fieldValue}\n              onChange={(e: any): void => {\n                onEditValue(e.target.checked);\n              }}\n            />\n          );\n          break;\n        case 'COMPLEX':\n          field = (\n            <textarea\n              value={fieldValue}\n              onChange={(e: any): void => onEditValue(e.target.value)}\n              placeholder={getFieldPlaceholder(schema)}\n              required={required}\n              className={styles.complexTextarea}\n            />\n          );\n          break;\n        default:\n          field = <TextField {...commonProps} />;\n      }\n      return (\n        <>\n          <span className={styles.label}>{label}</span>\n          <div className={styles.value}>{field}</div>\n        </>\n      );\n    }\n\n    const hasValue: any = value !== undefined && value !== null && value !== '';\n    const isEditable: any = editable && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '');\n\n    let displayValue: string;\n    if (hasValue) {\n      displayValue = String(value);\n    } else if (isEditable) {\n      displayValue = getFieldPlaceholder(schema);\n    } else {\n      displayValue = '-';\n    }\n\n    return (\n      <>\n        <span className={styles.label}>{label}</span>\n        <div className={cx(styles.value, !hasValue ? styles.valuePlaceholder : '')}>\n          {!hasValue && isEditable && onStartEdit ? (\n            <Button\n              onClick={onStartEdit}\n              variant=\"text\"\n              color=\"secondary\"\n              size=\"small\"\n              title=\"Click to edit\"\n              className={styles.editButton}\n            >\n              {displayValue}\n            </Button>\n          ) : (\n            displayValue\n          )}\n        </div>\n      </>\n    );\n  };\n\n  const renderUserInfo = (schema: Schema): any => {\n    if (!schema?.name) return null;\n\n    const hasValue: any = schema.value !== undefined && schema.value !== '' && schema.value !== null;\n    const isFieldEditing: any = editingFields[schema.name];\n    const isReadonlyField: any = readonlyFields.includes(schema.name);\n\n    const shouldShow: any = hasValue || isFieldEditing || (editable && schema.mutability === 'READ_WRITE');\n\n    if (!shouldShow) {\n      return null;\n    }\n\n    return (\n      <div className={styles.field}>\n        <div className={styles.fieldInner}>\n          {renderSchemaField(\n            schema,\n            isFieldEditing,\n            (value: any) => {\n              const tempEditedUser: any = {...editedUser};\n              tempEditedUser[schema.name!] = value;\n              setEditedUser(tempEditedUser);\n            },\n            () => toggleFieldEdit(schema.name),\n          )}\n        </div>\n        {editable && schema.mutability !== 'READ_ONLY' && !isReadonlyField && (\n          <div className={styles.fieldActions}>\n            {isFieldEditing && (\n              <>\n                <Button size=\"small\" color=\"primary\" variant=\"solid\" onClick={(): any => handleFieldSave(schema)}>\n                  Save\n                </Button>\n                <Button\n                  size=\"small\"\n                  color=\"secondary\"\n                  variant=\"solid\"\n                  onClick={(): any => handleFieldCancel(schema.name)}\n                >\n                  Cancel\n                </Button>\n              </>\n            )}\n            {!isFieldEditing && hasValue && (\n              <Button\n                size=\"small\"\n                color=\"tertiary\"\n                variant=\"icon\"\n                onClick={(): any => toggleFieldEdit(schema.name)}\n                title=\"Edit\"\n                className={styles.editButton}\n              >\n                <PencilIcon />\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  if (!profile && !flattenedProfile) {\n    return fallback;\n  }\n\n  const containerClasses: any = cx(\n    styles.root,\n    cardLayout ? styles.card : '',\n    withVendorCSSClassPrefix('user-profile'),\n    className,\n  );\n\n  const currentUser: any = flattenedProfile || profile;\n\n  const renderProfileWithoutSchemas = (): any => {\n    if (!currentUser) return null;\n\n    const displayName: any = getDisplayName(mergedMappings, profile!, displayNameAttributes);\n\n    const profileEntries: any = Object.entries(currentUser)\n      .filter(([key, value]: [string, any]) => {\n        if (!shouldShowField(key)) return false;\n\n        return value !== undefined && value !== '' && value !== null;\n      })\n      .sort(([a]: [string, ...any[]], [b]: [string, ...any[]]) => a.localeCompare(b));\n\n    return (\n      <>\n        <div className={styles.profileSummary}>\n          <Avatar\n            imageUrl={getMappedUserProfileValue('picture', mergedMappings, currentUser)}\n            name={displayName}\n            size={70}\n            alt={`${displayName}'s avatar`}\n            isLoading={isLoading}\n          />\n          <Typography variant=\"h3\" fontWeight=\"medium\">\n            {displayName}\n          </Typography>\n          {getMappedUserProfileValue('email', mergedMappings, currentUser) && (\n            <Typography variant=\"body2\" color=\"textSecondary\">\n              {getMappedUserProfileValue('email', mergedMappings, currentUser)}\n            </Typography>\n          )}\n        </div>\n        <Divider />\n        {profileEntries.map(([key, value]: any) => {\n          const isReadonly = readonlyFields.includes(key);\n          const schema: Schema = {name: key, mutability: isReadonly ? 'READ_ONLY' : 'READ_WRITE'};\n          const schemaWithValue: any = {...schema, value};\n\n          return (\n            <div key={key} className={styles.info}>\n              {renderUserInfo(schemaWithValue)}\n            </div>\n          );\n        })}\n      </>\n    );\n  };\n\n  const profileContent: any = (\n    <CardPrimitive className={containerClasses}>\n      {error && (\n        <AlertPrimitive\n          variant=\"error\"\n          className={cx(withVendorCSSClassPrefix(bem('user-profile', 'alert')), styles.alert)}\n        >\n          <AlertPrimitive.Title>{t('errors.heading') || 'Error'}</AlertPrimitive.Title>\n          <AlertPrimitive.Description>{error}</AlertPrimitive.Description>\n        </AlertPrimitive>\n      )}\n      <div className={styles.infoContainer}>{renderProfileWithoutSchemas()}</div>\n    </CardPrimitive>\n  );\n\n  if (mode === 'popup') {\n    return (\n      <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n        <DialogPrimitive.Content>\n          <DialogPrimitive.Heading>{title ?? t('user.profile.heading')}</DialogPrimitive.Heading>\n          <div className={styles.popup}>{profileContent}</div>\n        </DialogPrimitive.Content>\n      </DialogPrimitive>\n    );\n  }\n\n  return profileContent;\n};\n\nexport default BaseUserProfile;\n"],"mappings":"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"}
+{"version":3,"file":"BaseUserProfile.js","names":["fieldsToSkip: string[]","readonlyFields: string[]","BaseUserProfile: FC<BaseUserProfileProps>","useTheme","useTranslation","shouldShowField: any","toggleFieldEdit: any","getFieldPlaceholder: any","fieldLabel: any","formatLabel: any","styles: any","useStyles","ObjectDisplay: FC<{data: unknown}>","keys: any","current: any","i: any","key: any","handleFieldSave: any","fieldName: string","fieldValue: any","payload: Record<string, any>","handleFieldCancel: any","currentUser: any","currentUser","mergedMappings: Record<string, string | string[]>","label: any","displayValue: string","displayValue","hasValues: any","isEditable: any","isEditable","currentValue: any","fieldValues: string[]","MultiInput","Button","commonProps: any","field: ReactElement","TextField","DatePicker","Checkbox","hasValue: any","isFieldEditing: any","isReadonlyField: any","tempEditedUser: any","containerClasses: any","displayName: any","getDisplayName","profileEntries: any","getMappedUserProfileValue","Typography","Divider","schemaWithValue: any","profileContent: any","CardPrimitive","AlertPrimitive","DialogPrimitive"],"sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {User, withVendorCSSClassPrefix, bem, Preferences, startCase} from '@thunderid/browser';\nimport {FC, ReactElement, useState, useCallback, useEffect} from 'react';\nimport useStyles from './BaseUserProfile.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\nimport getDisplayName from '../../../utils/getDisplayName';\nimport getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';\nimport AlertPrimitive from '../../primitives/Alert/Alert';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport CardPrimitive from '../../primitives/Card/Card';\nimport Checkbox from '../../primitives/Checkbox/Checkbox';\nimport DatePicker from '../../primitives/DatePicker/DatePicker';\nimport DialogPrimitive from '../../primitives/Dialog/Dialog';\nimport Divider from '../../primitives/Divider/Divider';\nimport MultiInput from '../../primitives/MultiInput/MultiInput';\nimport TextField from '../../primitives/TextField/TextField';\nimport Typography from '../../primitives/Typography/Typography';\n\ninterface ExtendedFlatSchema {\n  path?: string;\n  schemaId?: string;\n}\n\ninterface Schema extends ExtendedFlatSchema {\n  caseExact?: boolean;\n  description?: string;\n  displayName?: string;\n  displayOrder?: string;\n  multiValued?: boolean;\n  mutability?: string;\n  name?: string;\n  required?: boolean;\n  returned?: string;\n  subAttributes?: Schema[];\n  type?: string;\n  uniqueness?: string;\n  value?: any;\n}\n\nexport interface BaseUserProfileProps {\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  cardLayout?: boolean;\n  className?: string;\n  displayNameAttributes?: string[];\n  editable?: boolean;\n  error?: string | null;\n  fallback?: ReactElement | null;\n  flattenedProfile?: User;\n  hideFields?: string[];\n  isLoading?: boolean;\n  mode?: 'inline' | 'popup';\n  onOpenChange?: (open: boolean) => void;\n  onUpdate?: (payload: any) => Promise<void>;\n  open?: boolean;\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n  profile?: User;\n  showFields?: string[];\n\n  title?: string;\n}\n\n// Fields to skip based on schema.name\nconst fieldsToSkip: string[] = [\n  'roles.default',\n  'active',\n  'groups',\n  'accountLocked',\n  'accountDisabled',\n  'oneTimePassword',\n  'userSourceId',\n  'idpType',\n  'localCredentialExists',\n  'active',\n  'ResourceType',\n  'ExternalID',\n  'MetaData',\n  'verifiedMobileNumbers',\n  'verifiedEmailAddresses',\n  'phoneNumbers.mobile',\n  'emailAddresses',\n  'preferredMFAOption',\n  'attributes',\n  'picture',\n  'isReadOnly',\n  'isReadonly',\n];\n\n// Fields that should be readonly\nconst readonlyFields: string[] = ['attributes', 'id', 'isReadOnly', 'ouId', 'username'];\n\nconst BaseUserProfile: FC<BaseUserProfileProps> = ({\n  fallback = null,\n  className = '',\n  cardLayout = true,\n  profile,\n  flattenedProfile,\n  mode = 'inline',\n  title,\n  attributeMapping = {},\n  editable = true,\n  onOpenChange,\n  onUpdate,\n  open = false,\n  error = null,\n  isLoading = false,\n  preferences,\n  showFields = [],\n  hideFields = [],\n  displayNameAttributes = [],\n}: BaseUserProfileProps): ReactElement | null => {\n  const {theme, colorScheme} = useTheme();\n  const [editedUser, setEditedUser] = useState(flattenedProfile || profile);\n  const [editingFields, setEditingFields] = useState<Record<string, boolean>>({});\n  const {t} = useTranslation(preferences?.i18n);\n\n  useEffect(() => {\n    const nextUser = flattenedProfile ?? profile;\n    if (!nextUser) return;\n\n    setEditedUser((prev: any) => {\n      if (!prev) return nextUser;\n\n      const updated = {...nextUser};\n      Object.keys(prev).forEach((key) => {\n        if (editingFields[key]) {\n          updated[key] = prev[key];\n        }\n      });\n      return updated;\n    });\n  }, [flattenedProfile, profile, editingFields]);\n\n  /**\n   * Determines if a field should be visible based on showFields, hideFields, and fieldsToSkip arrays.\n   * Priority order:\n   * 1. fieldsToSkip (always hidden) - highest priority\n   * 2. hideFields (explicitly hidden)\n   * 3. showFields (explicitly shown, if array is not empty)\n   * 4. Default behavior (show all fields not in fieldsToSkip)\n   */\n  const shouldShowField: any = useCallback(\n    (fieldName: string): boolean => {\n      // Always skip fields in the hardcoded fieldsToSkip array\n      if (fieldsToSkip.includes(fieldName)) {\n        return false;\n      }\n\n      // If hideFields is provided and contains this field, hide it\n      if (hideFields.length > 0 && hideFields.includes(fieldName)) {\n        return false;\n      }\n\n      // If showFields is provided and not empty, only show fields in that array\n      if (showFields.length > 0) {\n        return showFields.includes(fieldName);\n      }\n\n      return true;\n    },\n    [showFields, hideFields],\n  );\n\n  const PencilIcon = (): any => (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" />\n    </svg>\n  );\n\n  const toggleFieldEdit: any = useCallback((fieldName: string) => {\n    setEditingFields((prev: any) => ({\n      ...prev,\n      [fieldName]: !prev[fieldName],\n    }));\n  }, []);\n\n  const getFieldPlaceholder: any = useCallback((schema: Schema): string => {\n    const {type, displayName, description, name} = schema;\n\n    const fieldLabel: any = displayName || description || name || 'value';\n\n    switch (type) {\n      case 'DATE_TIME':\n        return `Enter your ${fieldLabel.toLowerCase()}`;\n      case 'BOOLEAN':\n        return `Select ${fieldLabel.toLowerCase()}`;\n      case 'COMPLEX':\n        return `Enter ${fieldLabel.toLowerCase()} details`;\n      default:\n        return `Enter your ${fieldLabel.toLowerCase()}`;\n    }\n  }, []);\n\n  const formatLabel: any = useCallback(\n    (key: string): string =>\n      key\n        .split(/(?=[A-Z])|_/)\n        .map((word: any) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n        .join(' '),\n    [],\n  );\n\n  const styles: any = useStyles(theme, colorScheme);\n\n  const ObjectDisplay: FC<{data: unknown}> = ({data}: {data: unknown}): ReactElement | null => {\n    if (!data || typeof data !== 'object') return null;\n\n    return (\n      <table className={styles.value}>\n        <tbody>\n          {Object.entries(data).map(([key, value]: any) => (\n            <tr key={key}>\n              <td className={styles.objectKey}>\n                <strong>{formatLabel(key)}:</strong>\n              </td>\n              <td className={styles.objectValue}>\n                {typeof value === 'object' ? <ObjectDisplay data={value} /> : String(value)}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    );\n  };\n\n  function set(obj: Record<string, any>, path: string, value: any): void {\n    const keys: any = path.split('.');\n    let current: any = obj;\n\n    for (let i: any = 0; i < keys.length; i += 1) {\n      const key: any = keys[i];\n\n      if (i === keys.length - 1) {\n        current[key] = value;\n      } else {\n        if (!current[key] || typeof current[key] !== 'object') {\n          current[key] = {};\n        }\n        current = current[key];\n      }\n    }\n  }\n\n  const handleFieldSave: any = useCallback(\n    (schema: Schema): void => {\n      if (!onUpdate || !schema.name) return;\n\n      const fieldName: string = schema.name;\n      let fieldValue: any;\n      if (editedUser && fieldName && editedUser[fieldName] !== undefined) {\n        fieldValue = editedUser[fieldName];\n      } else if (flattenedProfile?.[fieldName] !== undefined) {\n        fieldValue = flattenedProfile[fieldName];\n      } else {\n        fieldValue = '';\n      }\n\n      if (Array.isArray(fieldValue)) {\n        fieldValue = fieldValue.filter((v: any) => v !== undefined && v !== null && v !== '');\n      }\n\n      let payload: Record<string, any> = {};\n      set(payload, fieldName, fieldValue);\n\n      onUpdate(payload);\n\n      toggleFieldEdit(fieldName);\n    },\n    [editedUser, flattenedProfile, onUpdate, toggleFieldEdit],\n  );\n\n  const handleFieldCancel: any = useCallback(\n    (fieldName: string) => {\n      const currentUser: any = flattenedProfile || profile;\n      setEditedUser((prev: any) => ({\n        ...prev,\n        [fieldName]: currentUser[fieldName],\n      }));\n      toggleFieldEdit(fieldName);\n    },\n    [flattenedProfile, profile, toggleFieldEdit],\n  );\n\n  const defaultAttributeMappings: Record<string, string | string[]> = {\n    email: ['emails', 'email'],\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  const renderSchemaField = (\n    schema: Schema,\n    isEditing: boolean,\n    onEditValue?: (value: any) => void,\n    onStartEdit?: () => void,\n  ): ReactElement | null => {\n    if (!schema) return null;\n    const {value, displayName, description, name, type, required, mutability, subAttributes, multiValued} = schema;\n    const label: any = displayName || description || (name ? startCase(name) : '');\n\n    if (subAttributes && Array.isArray(subAttributes)) {\n      return (\n        <>\n          {subAttributes.map((subAttr: any, index: any) => {\n            let displayValue: string;\n            if (Array.isArray(subAttr.value)) {\n              displayValue = subAttr.value\n                .map((item: any) => (typeof item === 'object' ? JSON.stringify(item) : String(item)))\n                .join(', ');\n            } else if (typeof subAttr.value === 'object') {\n              displayValue = JSON.stringify(subAttr.value);\n            } else {\n              displayValue = String(subAttr.value);\n            }\n\n            return (\n              <div key={index} className={styles.field}>\n                <span className={styles.label}>{subAttr.displayName || subAttr.description || ''}</span>\n                <div className={styles.value}>{displayValue}</div>\n              </div>\n            );\n          })}\n        </>\n      );\n    }\n\n    if (Array.isArray(value) || multiValued) {\n      const hasValues: any = Array.isArray(value)\n        ? value.length > 0\n        : value !== undefined && value !== null && value !== '';\n      const isEditable: any = editable && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '');\n\n      if (isEditing && onEditValue && isEditable) {\n        let currentValue: any;\n        if (editedUser && name && editedUser[name] !== undefined) {\n          currentValue = editedUser[name];\n        } else if (flattenedProfile && name && flattenedProfile[name] !== undefined) {\n          currentValue = flattenedProfile[name];\n        } else {\n          currentValue = value;\n        }\n\n        let fieldValues: string[];\n        if (Array.isArray(currentValue)) {\n          fieldValues = currentValue.map(String);\n        } else if (currentValue !== undefined && currentValue !== null && currentValue !== '') {\n          fieldValues = [String(currentValue)];\n        } else {\n          fieldValues = [];\n        }\n\n        return (\n          <>\n            <span className={styles.label}>{label}</span>\n            <div className={styles.value}>\n              <MultiInput\n                values={fieldValues}\n                onChange={(newValues: any): void => {\n                  if (multiValued || Array.isArray(currentValue)) {\n                    onEditValue(newValues);\n                  } else {\n                    onEditValue(newValues[0] || '');\n                  }\n                }}\n                placeholder={getFieldPlaceholder(schema)}\n                fieldType={type as 'STRING' | 'DATE_TIME' | 'BOOLEAN'}\n                type={type === 'DATE_TIME' ? 'date' : 'text'}\n                required={required}\n              />\n            </div>\n          </>\n        );\n      }\n\n      let displayValue: string;\n      if (hasValues) {\n        if (Array.isArray(value)) {\n          displayValue = value\n            .map((item: any) => (typeof item === 'object' ? JSON.stringify(item) : String(item)))\n            .join(', ');\n        } else {\n          displayValue = String(value);\n        }\n      } else if (isEditable) {\n        displayValue = getFieldPlaceholder(schema);\n      } else {\n        displayValue = '-';\n      }\n\n      return (\n        <>\n          <span className={styles.label}>{label}</span>\n          <div className={cx(styles.value, !hasValues ? styles.valuePlaceholder : '')}>\n            {!hasValues && isEditable && onStartEdit ? (\n              <Button\n                onClick={onStartEdit}\n                variant=\"text\"\n                color=\"secondary\"\n                size=\"small\"\n                title=\"Click to edit\"\n                className={styles.editButton}\n              >\n                {displayValue}\n              </Button>\n            ) : (\n              displayValue\n            )}\n          </div>\n        </>\n      );\n    }\n    if (type === 'COMPLEX' && typeof value === 'object') {\n      return <ObjectDisplay data={value} />;\n    }\n\n    if (isEditing && onEditValue && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '')) {\n      let fieldValue: any;\n      if (editedUser && name && editedUser[name] !== undefined) {\n        fieldValue = editedUser[name];\n      } else if (flattenedProfile && name && flattenedProfile[name] !== undefined) {\n        fieldValue = flattenedProfile[name];\n      } else {\n        fieldValue = value || '';\n      }\n\n      const commonProps: any = {\n        label: undefined,\n        onChange: (e: any) => onEditValue(e.target ? e.target.value : e),\n        placeholder: getFieldPlaceholder(schema),\n        required,\n        value: fieldValue,\n        // Removed inline style, use .styles.ts for marginBottom if needed\n      };\n      let field: ReactElement;\n      switch (type) {\n        case 'STRING':\n          field = <TextField {...commonProps} />;\n          break;\n        case 'DATE_TIME':\n          field = <DatePicker {...commonProps} />;\n          break;\n        case 'BOOLEAN':\n          field = (\n            <Checkbox\n              {...commonProps}\n              checked={!!fieldValue}\n              onChange={(e: any): void => {\n                onEditValue(e.target.checked);\n              }}\n            />\n          );\n          break;\n        case 'COMPLEX':\n          field = (\n            <textarea\n              value={fieldValue}\n              onChange={(e: any): void => onEditValue(e.target.value)}\n              placeholder={getFieldPlaceholder(schema)}\n              required={required}\n              className={styles.complexTextarea}\n            />\n          );\n          break;\n        default:\n          field = <TextField {...commonProps} />;\n      }\n      return (\n        <>\n          <span className={styles.label}>{label}</span>\n          <div className={styles.value}>{field}</div>\n        </>\n      );\n    }\n\n    const hasValue: any = value !== undefined && value !== null && value !== '';\n    const isEditable: any = editable && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '');\n\n    let displayValue: string;\n    if (hasValue) {\n      displayValue = String(value);\n    } else if (isEditable) {\n      displayValue = getFieldPlaceholder(schema);\n    } else {\n      displayValue = '-';\n    }\n\n    return (\n      <>\n        <span className={styles.label}>{label}</span>\n        <div className={cx(styles.value, !hasValue ? styles.valuePlaceholder : '')}>\n          {!hasValue && isEditable && onStartEdit ? (\n            <Button\n              onClick={onStartEdit}\n              variant=\"text\"\n              color=\"secondary\"\n              size=\"small\"\n              title=\"Click to edit\"\n              className={styles.editButton}\n            >\n              {displayValue}\n            </Button>\n          ) : (\n            displayValue\n          )}\n        </div>\n      </>\n    );\n  };\n\n  const renderUserInfo = (schema: Schema): any => {\n    if (!schema?.name) return null;\n\n    const hasValue: any = schema.value !== undefined && schema.value !== '' && schema.value !== null;\n    const isFieldEditing: any = editingFields[schema.name];\n    const isReadonlyField: any = readonlyFields.includes(schema.name);\n\n    const shouldShow: any = hasValue || isFieldEditing || (editable && schema.mutability === 'READ_WRITE');\n\n    if (!shouldShow) {\n      return null;\n    }\n\n    return (\n      <div className={styles.field}>\n        <div className={styles.fieldInner}>\n          {renderSchemaField(\n            schema,\n            isFieldEditing,\n            (value: any) => {\n              const tempEditedUser: any = {...editedUser};\n              tempEditedUser[schema.name!] = value;\n              setEditedUser(tempEditedUser);\n            },\n            () => toggleFieldEdit(schema.name),\n          )}\n        </div>\n        {editable && schema.mutability !== 'READ_ONLY' && !isReadonlyField && (\n          <div className={styles.fieldActions}>\n            {isFieldEditing && (\n              <>\n                <Button size=\"small\" color=\"primary\" variant=\"solid\" onClick={(): any => handleFieldSave(schema)}>\n                  Save\n                </Button>\n                <Button\n                  size=\"small\"\n                  color=\"secondary\"\n                  variant=\"solid\"\n                  onClick={(): any => handleFieldCancel(schema.name)}\n                >\n                  Cancel\n                </Button>\n              </>\n            )}\n            {!isFieldEditing && hasValue && (\n              <Button\n                size=\"small\"\n                color=\"tertiary\"\n                variant=\"icon\"\n                onClick={(): any => toggleFieldEdit(schema.name)}\n                title=\"Edit\"\n                className={styles.editButton}\n              >\n                <PencilIcon />\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  if (!profile && !flattenedProfile) {\n    return fallback;\n  }\n\n  const containerClasses: any = cx(\n    styles.root,\n    cardLayout ? styles.card : '',\n    withVendorCSSClassPrefix('user-profile'),\n    className,\n  );\n\n  const currentUser: any = flattenedProfile || profile;\n\n  const renderProfileWithoutSchemas = (): any => {\n    if (!currentUser) return null;\n\n    const displayName: any = getDisplayName(mergedMappings, profile!, displayNameAttributes);\n\n    const profileEntries: any = Object.entries(currentUser)\n      .filter(([key, value]: [string, any]) => {\n        if (!shouldShowField(key)) return false;\n\n        return value !== undefined && value !== '' && value !== null;\n      })\n      .sort(([a]: [string, ...any[]], [b]: [string, ...any[]]) => a.localeCompare(b));\n\n    return (\n      <>\n        <div className={styles.profileSummary}>\n          <Avatar\n            imageUrl={getMappedUserProfileValue('picture', mergedMappings, currentUser)}\n            name={displayName}\n            size={70}\n            alt={`${displayName}'s avatar`}\n            isLoading={isLoading}\n          />\n          <Typography variant=\"h3\" fontWeight=\"medium\">\n            {displayName}\n          </Typography>\n          {getMappedUserProfileValue('email', mergedMappings, currentUser) && (\n            <Typography variant=\"body2\" color=\"textSecondary\">\n              {getMappedUserProfileValue('email', mergedMappings, currentUser)}\n            </Typography>\n          )}\n        </div>\n        <Divider />\n        {profileEntries.map(([key, value]: any) => {\n          const isReadonly = readonlyFields.includes(key);\n          const schema: Schema = {name: key, mutability: isReadonly ? 'READ_ONLY' : 'READ_WRITE'};\n          const schemaWithValue: any = {...schema, value};\n\n          return (\n            <div key={key} className={styles.info}>\n              {renderUserInfo(schemaWithValue)}\n            </div>\n          );\n        })}\n      </>\n    );\n  };\n\n  const profileContent: any = (\n    <CardPrimitive className={containerClasses}>\n      {error && (\n        <AlertPrimitive\n          variant=\"error\"\n          className={cx(withVendorCSSClassPrefix(bem('user-profile', 'alert')), styles.alert)}\n        >\n          <AlertPrimitive.Title>{t('errors.heading') || 'Error'}</AlertPrimitive.Title>\n          <AlertPrimitive.Description>{error}</AlertPrimitive.Description>\n        </AlertPrimitive>\n      )}\n      <div className={styles.infoContainer}>{renderProfileWithoutSchemas()}</div>\n    </CardPrimitive>\n  );\n\n  if (mode === 'popup') {\n    return (\n      <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n        <DialogPrimitive.Content>\n          <DialogPrimitive.Heading>{title ?? t('user.profile.heading')}</DialogPrimitive.Heading>\n          <div className={styles.popup}>{profileContent}</div>\n        </DialogPrimitive.Content>\n      </DialogPrimitive>\n    );\n  }\n\n  return profileContent;\n};\n\nexport default BaseUserProfile;\n"],"mappings":"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"}

package/dist/components/presentation/UserProfile/BaseUserProfile.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserProfile.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,EAA2B,MAAM,oBAAoB,CAAC;AAGnE;;;;;GAKG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA6N3E,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"BaseUserProfile.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAA2B,MAAM,oBAAoB,CAAC;AAInE;;;;;GAKG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA6N3E,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/presentation/UserProfile/BaseUserProfile.styles.js

@@ -1,6 +1,6 @@
+import { css } from "../../../styles/emotion.js";
 import { withVendorCSSClassPrefix } from "@thunderid/browser";
 import { useMemo } from "react";
-import { css } from "@emotion/css";
 
 //#region src/components/presentation/UserProfile/BaseUserProfile.styles.ts
 /**

package/dist/components/presentation/UserProfile/BaseUserProfile.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserProfile.styles.js","names":["valuePlaceholder: string","editButton: string","fieldInner: string","fieldActions: string","complexTextarea: string","objectKey: string","objectValue: string","root: string","card: string","header: string","profileInfo: string","name: string","profileSummary: string","sectionRow: string","sectionLabel: string","sectionValue: string","infoContainer: string","info: string","field: string","lastField: string","label: string","value: string","popup: string"],"sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the BaseUserProfile 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  const valuePlaceholder: string = css`\n    font-style: italic;\n    opacity: 0.7;\n  `;\n\n  const editButton: string = css`\n    font-style: italic;\n    text-decoration: underline;\n    opacity: 0.7;\n    padding: 0;\n    min-height: auto;\n\n    &:hover:not(:disabled) {\n      background-color: transparent;\n    }\n  `;\n\n  const fieldInner: string = css`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: ${theme.vars.spacing.unit};\n  `;\n\n  const fieldActions: string = css`\n    display: flex;\n    gap: calc(${theme.vars.spacing.unit} / 2);\n    align-items: center;\n    margin-inline-start: calc(${theme.vars.spacing.unit} * 4);\n  `;\n\n  const complexTextarea: string = css`\n    min-height: 60px;\n    width: 100%;\n    padding: 8px;\n    border: 1px solid ${theme.vars.colors.border};\n    border-radius: ${theme.vars.borderRadius.small};\n    resize: vertical;\n  `;\n\n  const objectKey: string = css`\n    padding: ${theme.vars.spacing.unit};\n    vertical-align: top;\n  `;\n\n  const objectValue: string = css`\n    padding: ${theme.vars.spacing.unit};\n    vertical-align: top;\n  `;\n\n  return useMemo(() => {\n    const root: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      min-width: 600px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n    `;\n\n    const header: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);\n    `;\n\n    const profileInfo: string = css`\n      flex: 1;\n    `;\n\n    const name: string = css`\n      font-size: 1.5rem;\n      font-weight: 600;\n      margin: 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const profileSummary: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    `;\n\n    const sectionRow: string = css`\n      display: flex;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const sectionLabel: string = css`\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: ${theme.vars.colors.text.primary};\n      width: 160px;\n      flex-shrink: 0;\n    `;\n\n    const sectionValue: string = css`\n      flex: 1;\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      font-size: 0.875rem;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const infoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n    `;\n\n    const info: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 1.5) 0;\n      border-bottom: 1px solid ${theme.vars.colors.border};\n    `;\n\n    const field: string = css`\n      display: flex;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} / 2) 0;\n      min-height: 28px;\n    `;\n\n    const lastField: string = css`\n      border-bottom: none;\n    `;\n\n    const label: string = css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${theme.vars.colors.text.secondary};\n      width: 120px;\n      flex-shrink: 0;\n      line-height: 28px;\n      text-align: start;\n    `;\n\n    const value: string = css`\n      color: ${theme.vars.colors.text.primary};\n      flex: 1;\n      display: inline-block;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      overflow: hidden;\n      min-height: 28px;\n      line-height: 28px;\n      word-break: break-word;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 350px;\n      text-align: start;\n\n      .${withVendorCSSClassPrefix('form-control')} {\n        margin-bottom: 0;\n      }\n\n      input {\n        margin: 0;\n      }\n\n      table {\n        background-color: ${theme.vars.colors.background.surface};\n        border-radius: ${theme.vars.borderRadius.medium};\n        white-space: normal;\n      }\n\n      td {\n        border-color: ${theme.vars.colors.border};\n      }\n    `;\n\n    const popup: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const alert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 3);\n    `;\n\n    return {\n      alert,\n      card,\n      complexTextarea,\n      editButton,\n      field,\n      fieldActions,\n      fieldInner,\n      header,\n      info,\n      infoContainer,\n      label,\n      lastField,\n      name,\n      objectKey,\n      objectValue,\n      popup,\n      profileInfo,\n      profileSummary,\n      root,\n      sectionLabel,\n      sectionRow,\n      sectionValue,\n      value,\n      valuePlaceholder,\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.borderRadius.large,\n    theme.vars.borderRadius.medium,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n};\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,gBAAgD;CAC/E,MAAMA,mBAA2B,GAAG;;;;CAKpC,MAAMC,aAAqB,GAAG;;;;;;;;;;;CAY9B,MAAMC,aAAqB,GAAG;;;;WAIrB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,eAAuB,GAAG;;gBAElB,MAAM,KAAK,QAAQ,KAAK;;gCAER,MAAM,KAAK,QAAQ,KAAK;;CAGtD,MAAMC,kBAA0B,GAAG;;;;wBAIb,MAAM,KAAK,OAAO,OAAO;qBAC5B,MAAM,KAAK,aAAa,MAAM;;;CAIjD,MAAMC,YAAoB,GAAG;eAChB,MAAM,KAAK,QAAQ,KAAK;;;CAIrC,MAAMC,cAAsB,GAAG;eAClB,MAAM,KAAK,QAAQ,KAAK;;;AAIrC,QAAO,cAAc;EACnB,MAAMC,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;;;qBAGzB,MAAM,KAAK,WAAW,WAAW;;EAGlD,MAAMC,OAAe,GAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;;EAGjD,MAAMC,SAAiB,GAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;4BACd,MAAM,KAAK,QAAQ,KAAK;;EAGhD,MAAMC,cAAsB,GAAG;;;EAI/B,MAAMC,OAAe,GAAG;;;;eAIb,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,iBAAyB,GAAG;;;;;EAMlC,MAAMC,aAAqB,GAAG;;;sBAGZ,MAAM,KAAK,QAAQ,KAAK;;EAG1C,MAAMC,eAAuB,GAAG;;;eAGrB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;EAK1C,MAAMC,eAAuB,GAAG;;;;kBAIlB,MAAM,KAAK,QAAQ,KAAK;;eAE3B,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,gBAAwB,GAAG;;;;EAKjC,MAAMC,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;iCACb,MAAM,KAAK,OAAO,OAAO;;EAGtD,MAAMC,QAAgB,GAAG;;;sBAGP,MAAM,KAAK,QAAQ,KAAK;;;EAI1C,MAAMC,YAAoB,GAAG;;;EAI7B,MAAMC,QAAgB,GAAG;;;eAGd,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;EAO5C,MAAMC,QAAgB,GAAG;eACd,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;aAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;;;;;;SAU5B,yBAAyB,eAAe,CAAC;;;;;;;;;4BAStB,MAAM,KAAK,OAAO,WAAW,QAAQ;yBACxC,MAAM,KAAK,aAAa,OAAO;;;;;wBAKhC,MAAM,KAAK,OAAO,OAAO;;;EAI7C,MAAMC,QAAgB,GAAG;sBACP,MAAM,KAAK,QAAQ,KAAK;;AAO1C,SAAO;GACL,OALoB,GAAG;4BACD,MAAM,KAAK,QAAQ,KAAK;;GAK9C;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;IACA;EACD,MAAM,KAAK,OAAO,WAAW;EAC7B,MAAM,KAAK,OAAO,KAAK;EACvB,MAAM,KAAK,OAAO,KAAK;EACvB,MAAM,KAAK,OAAO;EAClB,MAAM,KAAK,aAAa;EACxB,MAAM,KAAK,aAAa;EACxB,MAAM,KAAK,QAAQ;EACnB,MAAM,KAAK,WAAW;EACtB;EACD,CAAC;;AAGJ,qCAAe"}
+{"version":3,"file":"BaseUserProfile.styles.js","names":["valuePlaceholder: string","editButton: string","fieldInner: string","fieldActions: string","complexTextarea: string","objectKey: string","objectValue: string","root: string","card: string","header: string","profileInfo: string","name: string","profileSummary: string","sectionRow: string","sectionLabel: string","sectionValue: string","infoContainer: string","info: string","field: string","lastField: string","label: string","value: string","popup: string"],"sources":["../../../../src/components/presentation/UserProfile/BaseUserProfile.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the BaseUserProfile 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  const valuePlaceholder: string = css`\n    font-style: italic;\n    opacity: 0.7;\n  `;\n\n  const editButton: string = css`\n    font-style: italic;\n    text-decoration: underline;\n    opacity: 0.7;\n    padding: 0;\n    min-height: auto;\n\n    &:hover:not(:disabled) {\n      background-color: transparent;\n    }\n  `;\n\n  const fieldInner: string = css`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: ${theme.vars.spacing.unit};\n  `;\n\n  const fieldActions: string = css`\n    display: flex;\n    gap: calc(${theme.vars.spacing.unit} / 2);\n    align-items: center;\n    margin-inline-start: calc(${theme.vars.spacing.unit} * 4);\n  `;\n\n  const complexTextarea: string = css`\n    min-height: 60px;\n    width: 100%;\n    padding: 8px;\n    border: 1px solid ${theme.vars.colors.border};\n    border-radius: ${theme.vars.borderRadius.small};\n    resize: vertical;\n  `;\n\n  const objectKey: string = css`\n    padding: ${theme.vars.spacing.unit};\n    vertical-align: top;\n  `;\n\n  const objectValue: string = css`\n    padding: ${theme.vars.spacing.unit};\n    vertical-align: top;\n  `;\n\n  return useMemo(() => {\n    const root: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      min-width: 600px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n    `;\n\n    const header: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);\n    `;\n\n    const profileInfo: string = css`\n      flex: 1;\n    `;\n\n    const name: string = css`\n      font-size: 1.5rem;\n      font-weight: 600;\n      margin: 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const profileSummary: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    `;\n\n    const sectionRow: string = css`\n      display: flex;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const sectionLabel: string = css`\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: ${theme.vars.colors.text.primary};\n      width: 160px;\n      flex-shrink: 0;\n    `;\n\n    const sectionValue: string = css`\n      flex: 1;\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      font-size: 0.875rem;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const infoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n    `;\n\n    const info: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 1.5) 0;\n      border-bottom: 1px solid ${theme.vars.colors.border};\n    `;\n\n    const field: string = css`\n      display: flex;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} / 2) 0;\n      min-height: 28px;\n    `;\n\n    const lastField: string = css`\n      border-bottom: none;\n    `;\n\n    const label: string = css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${theme.vars.colors.text.secondary};\n      width: 120px;\n      flex-shrink: 0;\n      line-height: 28px;\n      text-align: start;\n    `;\n\n    const value: string = css`\n      color: ${theme.vars.colors.text.primary};\n      flex: 1;\n      display: inline-block;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      overflow: hidden;\n      min-height: 28px;\n      line-height: 28px;\n      word-break: break-word;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 350px;\n      text-align: start;\n\n      .${withVendorCSSClassPrefix('form-control')} {\n        margin-bottom: 0;\n      }\n\n      input {\n        margin: 0;\n      }\n\n      table {\n        background-color: ${theme.vars.colors.background.surface};\n        border-radius: ${theme.vars.borderRadius.medium};\n        white-space: normal;\n      }\n\n      td {\n        border-color: ${theme.vars.colors.border};\n      }\n    `;\n\n    const popup: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const alert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 3);\n    `;\n\n    return {\n      alert,\n      card,\n      complexTextarea,\n      editButton,\n      field,\n      fieldActions,\n      fieldInner,\n      header,\n      info,\n      infoContainer,\n      label,\n      lastField,\n      name,\n      objectKey,\n      objectValue,\n      popup,\n      profileInfo,\n      profileSummary,\n      root,\n      sectionLabel,\n      sectionRow,\n      sectionValue,\n      value,\n      valuePlaceholder,\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.borderRadius.large,\n    theme.vars.borderRadius.medium,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n};\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,gBAAgD;CAC/E,MAAMA,mBAA2B,GAAG;;;;CAKpC,MAAMC,aAAqB,GAAG;;;;;;;;;;;CAY9B,MAAMC,aAAqB,GAAG;;;;WAIrB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,eAAuB,GAAG;;gBAElB,MAAM,KAAK,QAAQ,KAAK;;gCAER,MAAM,KAAK,QAAQ,KAAK;;CAGtD,MAAMC,kBAA0B,GAAG;;;;wBAIb,MAAM,KAAK,OAAO,OAAO;qBAC5B,MAAM,KAAK,aAAa,MAAM;;;CAIjD,MAAMC,YAAoB,GAAG;eAChB,MAAM,KAAK,QAAQ,KAAK;;;CAIrC,MAAMC,cAAsB,GAAG;eAClB,MAAM,KAAK,QAAQ,KAAK;;;AAIrC,QAAO,cAAc;EACnB,MAAMC,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;;;qBAGzB,MAAM,KAAK,WAAW,WAAW;;EAGlD,MAAMC,OAAe,GAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;;EAGjD,MAAMC,SAAiB,GAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;4BACd,MAAM,KAAK,QAAQ,KAAK;;EAGhD,MAAMC,cAAsB,GAAG;;;EAI/B,MAAMC,OAAe,GAAG;;;;eAIb,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,iBAAyB,GAAG;;;;;EAMlC,MAAMC,aAAqB,GAAG;;;sBAGZ,MAAM,KAAK,QAAQ,KAAK;;EAG1C,MAAMC,eAAuB,GAAG;;;eAGrB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;EAK1C,MAAMC,eAAuB,GAAG;;;;kBAIlB,MAAM,KAAK,QAAQ,KAAK;;eAE3B,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,gBAAwB,GAAG;;;;EAKjC,MAAMC,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;iCACb,MAAM,KAAK,OAAO,OAAO;;EAGtD,MAAMC,QAAgB,GAAG;;;sBAGP,MAAM,KAAK,QAAQ,KAAK;;;EAI1C,MAAMC,YAAoB,GAAG;;;EAI7B,MAAMC,QAAgB,GAAG;;;eAGd,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;EAO5C,MAAMC,QAAgB,GAAG;eACd,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;aAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;;;;;;SAU5B,yBAAyB,eAAe,CAAC;;;;;;;;;4BAStB,MAAM,KAAK,OAAO,WAAW,QAAQ;yBACxC,MAAM,KAAK,aAAa,OAAO;;;;;wBAKhC,MAAM,KAAK,OAAO,OAAO;;;EAI7C,MAAMC,QAAgB,GAAG;sBACP,MAAM,KAAK,QAAQ,KAAK;;AAO1C,SAAO;GACL,OALoB,GAAG;4BACD,MAAM,KAAK,QAAQ,KAAK;;GAK9C;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;IACA;EACD,MAAM,KAAK,OAAO,WAAW;EAC7B,MAAM,KAAK,OAAO,KAAK;EACvB,MAAM,KAAK,OAAO,KAAK;EACvB,MAAM,KAAK,OAAO;EAClB,MAAM,KAAK,aAAa;EACxB,MAAM,KAAK,aAAa;EACxB,MAAM,KAAK,QAAQ;EACnB,MAAM,KAAK,WAAW;EACtB;EACD,CAAC;;AAGJ,qCAAe"}

package/dist/components/presentation/auth/AcceptInvite/BaseAcceptInvite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAcceptInvite.d.ts","sourceRoot":"","sources":["../../../../../src/components/presentation/auth/AcceptInvite/BaseAcceptInvite.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseAcceptInvite.d.ts","sourceRoot":"","sources":["../../../../../src/components/presentation/auth/AcceptInvite/BaseAcceptInvite.tsx"],"names":[],"mappings":"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"}

package/dist/components/presentation/auth/AcceptInvite/BaseAcceptInvite.js

@@ -1,3 +1,4 @@
+import { cx } from "../../../../styles/emotion.js";
 import ComponentRendererContext_default from "../../../../contexts/ComponentRenderer/ComponentRendererContext.js";
 import useThunderID_default from "../../../../contexts/ThunderID/useThunderID.js";
 import useTheme_default from "../../../../contexts/Theme/useTheme.js";
@@ -15,7 +16,6 @@ import BaseAcceptInvite_styles_default from "./BaseAcceptInvite.styles.js";
 import { ConsentConstants, buildValidatorFromRules } from "@thunderid/browser";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
 
 //#region src/components/presentation/auth/AcceptInvite/BaseAcceptInvite.tsx
 /**
@@ -427,13 +427,7 @@ const BaseAcceptInvite = ({ executionId, inviteToken, onSubmit, onComplete, onEr
 		className: cx(className, styles.card),
 		variant,
 		children: /* @__PURE__ */ jsx(Card_default.Content, { children: /* @__PURE__ */ jsxs("div", {
-			style: {
-				alignItems: "center",
-				display: "flex",
-				flexDirection: "column",
-				gap: "1rem",
-				padding: "2rem"
-			},
+			className: styles["tokenValidationContainer"],
 			children: [/* @__PURE__ */ jsx(Spinner_default, { size: "medium" }), /* @__PURE__ */ jsx(Typography_default, {
 				variant: "body1",
 				children: "Validating your invite link..."
@@ -454,11 +448,7 @@ const BaseAcceptInvite = ({ executionId, inviteToken, onSubmit, onComplete, onEr
 			variant: "error",
 			children: [/* @__PURE__ */ jsx(Alert_default.Title, { children: "Unable to verify invite" }), /* @__PURE__ */ jsx(Alert_default.Description, { children: apiError?.message || "This invite link is invalid or has expired. Please contact your administrator for a new invite." })]
 		}), onGoToSignIn && /* @__PURE__ */ jsx("div", {
-			style: {
-				display: "flex",
-				justifyContent: "center",
-				marginTop: "1.5rem"
-			},
+			className: styles["goToSignInContainer"],
 			children: /* @__PURE__ */ jsx(Button_default, {
 				variant: "outline",
 				onClick: onGoToSignIn,
@@ -482,7 +472,7 @@ const BaseAcceptInvite = ({ executionId, inviteToken, onSubmit, onComplete, onEr
 			})]
 		}), /* @__PURE__ */ jsxs(Card_default.Content, { children: [
 			apiError && /* @__PURE__ */ jsx("div", {
-				style: { marginBottom: "1rem" },
+				className: styles["errorContainer"],
 				children: /* @__PURE__ */ jsx(Alert_default, {
 					variant: "error",
 					children: /* @__PURE__ */ jsx(Alert_default.Description, { children: apiError.message })
@@ -502,18 +492,11 @@ const BaseAcceptInvite = ({ executionId, inviteToken, onSubmit, onComplete, onEr
 					children: "No form components available"
 				})
 			}), isLoading && /* @__PURE__ */ jsx("div", {
-				style: {
-					display: "flex",
-					justifyContent: "center",
-					padding: "1rem"
-				},
+				className: styles["centeredSpinnerContainerSmall"],
 				children: /* @__PURE__ */ jsx(Spinner_default, { size: "small" })
 			})] }),
 			onGoToSignIn && /* @__PURE__ */ jsx("div", {
-				style: {
-					marginTop: "1.5rem",
-					textAlign: "center"
-				},
+				className: styles["alreadyHaveAccountContainer"],
 				children: /* @__PURE__ */ jsxs(Typography_default, {
 					variant: "body2",
 					children: [
@@ -522,10 +505,7 @@ const BaseAcceptInvite = ({ executionId, inviteToken, onSubmit, onComplete, onEr
 						/* @__PURE__ */ jsx(Button_default, {
 							variant: "text",
 							onClick: onGoToSignIn,
-							style: {
-								minWidth: "auto",
-								padding: 0
-							},
+							className: styles["signInInlineButton"],
 							children: "Sign In"
 						})
 					]