@thunderid/react 0.3.0 → 0.3.4

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.js

@@ -1,282 +0,0 @@
-import useTheme_default from "../../../contexts/Theme/useTheme.js";
-import useTranslation_default from "../../../hooks/useTranslation.js";
-import Button_default from "../../primitives/Button/Button.js";
-import Typography_default from "../../primitives/Typography/Typography.js";
-import { Avatar } from "../../primitives/Avatar/Avatar.js";
-import BaseOrganizationSwitcher_styles_default from "./BaseOrganizationSwitcher.styles.js";
-import Building_default from "../../primitives/Icons/Building.js";
-import Check_default from "../../primitives/Icons/Check.js";
-import ChevronDown_default from "../../primitives/Icons/ChevronDown.js";
-import { useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
-import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
-
-//#region src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
-/**
-* BaseOrganizationSwitcher component displays an organization selector with a dropdown menu.
-* When clicked, it shows a popover with available organizations to switch between.
-* This component serves as the base for framework-specific implementations.
-*/
-const BaseOrganizationSwitcher = ({ organizations, currentOrganization, loading = false, error, onOrganizationSwitch, onManageProfile, className = "", style, renderOrganization, renderLoading, renderError, showRole = false, showMemberCount = true, menuItems = [], portalId = "thunderid-organization-switcher", showTriggerLabel = true, avatarSize = 24, fallback = null, preferences }) => {
-	const { theme, colorScheme, direction } = useTheme_default();
-	const styles = BaseOrganizationSwitcher_styles_default(theme, colorScheme);
-	const [isOpen, setIsOpen] = useState(false);
-	const [hoveredItemIndex, setHoveredItemIndex] = useState(null);
-	const { t } = useTranslation_default(preferences?.i18n);
-	const isRTL = direction === "rtl";
-	const { refs, floatingStyles, context } = useFloating({
-		middleware: [
-			offset(5),
-			flip({ fallbackAxisSideDirection: "end" }),
-			shift({ padding: 5 })
-		],
-		onOpenChange: setIsOpen,
-		open: isOpen,
-		placement: "bottom-end",
-		whileElementsMounted: autoUpdate
-	});
-	const { getReferenceProps, getFloatingProps } = useInteractions([
-		useClick(context),
-		useDismiss(context),
-		useRole(context)
-	]);
-	if (fallback && !currentOrganization && !loading && organizations.length === 0) return fallback;
-	const handleOrganizationSwitch = (organization) => {
-		onOrganizationSwitch(organization);
-		setIsOpen(false);
-	};
-	const handleMenuItemClick = (item) => {
-		if (item.onClick) item.onClick();
-		setIsOpen(false);
-	};
-	const switchableOrganizations = organizations.filter((org) => org.id !== currentOrganization?.id);
-	const defaultRenderOrganization = (organization, isSelected) => /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Avatar, {
-			variant: "square",
-			imageUrl: organization.avatar,
-			name: organization.name,
-			size: avatarSize * 1.25,
-			alt: `${organization.name} avatar`
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: cx(styles["organizationInfo"]),
-			children: [/* @__PURE__ */ jsx(Typography_default, {
-				variant: "body2",
-				fontWeight: "medium",
-				className: cx(styles["organizationName"]),
-				children: organization.name
-			}), /* @__PURE__ */ jsxs("div", {
-				className: cx(styles["organizationMeta"]),
-				children: [
-					showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
-						organization.memberCount,
-						" ",
-						organization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members")
-					] }),
-					showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx("span", { children: " • " }),
-					showRole && organization.role && /* @__PURE__ */ jsx("span", {
-						className: cx(styles["roleCapitalized"]),
-						children: organization.role
-					})
-				]
-			})]
-		}),
-		isSelected && /* @__PURE__ */ jsx(Check_default, {
-			width: "16",
-			height: "16",
-			color: theme.vars.colors.text.primary
-		})
-	] });
-	const defaultRenderLoading = () => /* @__PURE__ */ jsx("div", {
-		className: cx(styles["loadingContainer"]),
-		children: /* @__PURE__ */ jsx(Typography_default, {
-			variant: "caption",
-			className: cx(styles["loadingText"]),
-			children: t("organization.switcher.loading.placeholder.organizations")
-		})
-	});
-	const defaultRenderError = (errorMessage) => /* @__PURE__ */ jsx("div", {
-		className: cx(styles["errorContainer"]),
-		children: /* @__PURE__ */ jsx(Typography_default, {
-			variant: "caption",
-			className: cx(styles["errorText"]),
-			children: errorMessage
-		})
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx(styles["root"], className),
-		style,
-		children: [/* @__PURE__ */ jsxs(Button_default, {
-			ref: refs.setReference,
-			className: cx(styles["trigger"]),
-			color: "tertiary",
-			variant: "outline",
-			size: "medium",
-			...getReferenceProps(),
-			children: [currentOrganization ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Avatar, {
-				variant: "square",
-				imageUrl: currentOrganization.avatar,
-				name: currentOrganization.name,
-				size: avatarSize,
-				alt: `${currentOrganization.name} avatar`
-			}), showTriggerLabel && /* @__PURE__ */ jsx(Typography_default, {
-				variant: "body2",
-				className: cx(styles["triggerLabel"]),
-				children: currentOrganization.name
-			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Building_default, {
-				width: avatarSize,
-				height: avatarSize
-			}), showTriggerLabel && /* @__PURE__ */ jsx(Typography_default, {
-				variant: "body2",
-				className: cx(styles["triggerLabel"]),
-				children: t("elements.fields.organization.select.label")
-			})] }), /* @__PURE__ */ jsx("span", {
-				style: {
-					display: "inline-flex",
-					transform: isRTL ? "scaleX(-1)" : "none"
-				},
-				children: /* @__PURE__ */ jsx(ChevronDown_default, {
-					width: "16",
-					height: "16"
-				})
-			})]
-		}), isOpen && /* @__PURE__ */ jsx(FloatingPortal, {
-			id: portalId,
-			children: /* @__PURE__ */ jsx(FloatingFocusManager, {
-				context,
-				modal: false,
-				initialFocus: -1,
-				children: /* @__PURE__ */ jsxs("div", {
-					ref: refs.setFloating,
-					className: cx(styles["content"]),
-					style: floatingStyles,
-					...getFloatingProps(),
-					children: [
-						currentOrganization && /* @__PURE__ */ jsxs("div", {
-							className: cx(styles["header"]),
-							children: [
-								/* @__PURE__ */ jsx(Avatar, {
-									variant: "square",
-									imageUrl: currentOrganization.avatar,
-									name: currentOrganization.name,
-									size: avatarSize * 1.5,
-									alt: `${currentOrganization.name} avatar`
-								}),
-								/* @__PURE__ */ jsxs("div", {
-									className: cx(styles["headerInfo"]),
-									children: [/* @__PURE__ */ jsx(Typography_default, {
-										noWrap: true,
-										className: cx(styles["headerName"]),
-										variant: "body1",
-										fontWeight: "medium",
-										children: currentOrganization.name
-									}), /* @__PURE__ */ jsxs("div", {
-										className: cx(styles["headerMeta"]),
-										children: [showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ jsxs(Typography_default, {
-											noWrap: true,
-											variant: "caption",
-											color: "secondary",
-											children: [
-												currentOrganization.memberCount,
-												" ",
-												currentOrganization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members"),
-												showRole && currentOrganization.role && /* @__PURE__ */ jsxs("span", { children: [" • ", currentOrganization.role] })
-											]
-										}), showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx(Typography_default, {
-											noWrap: true,
-											className: cx(styles["headerRole"]),
-											variant: "caption",
-											color: "secondary",
-											children: currentOrganization.role
-										})]
-									})]
-								}),
-								onManageProfile && /* @__PURE__ */ jsx(Button_default, {
-									onClick: onManageProfile,
-									color: "tertiary",
-									variant: "outline",
-									size: "small",
-									"aria-label": "Manage Organization Profile",
-									className: cx(styles["manageButton"]),
-									endIcon: /* @__PURE__ */ jsxs("svg", {
-										width: "16",
-										height: "16",
-										viewBox: "0 0 24 24",
-										fill: "none",
-										stroke: "currentColor",
-										strokeWidth: "2",
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										children: [/* @__PURE__ */ jsx("circle", {
-											cx: "12",
-											cy: "12",
-											r: "3"
-										}), /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })]
-									}),
-									children: t("organization.switcher.buttons.manage.text")
-								})
-							]
-						}),
-						organizations.length > 1 && /* @__PURE__ */ jsx("div", {
-							className: cx(styles["header"], styles["sectionHeaderContainer"]),
-							style: { borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : "none" },
-							children: /* @__PURE__ */ jsx(Typography_default, {
-								variant: "caption",
-								fontWeight: 600,
-								className: cx(styles["sectionHeader"]),
-								children: t("organization.switcher.switch.organization")
-							})
-						}),
-						/* @__PURE__ */ jsx("div", {
-							className: cx(styles["menu"]),
-							children: (() => {
-								if (loading) return renderLoading ? renderLoading() : defaultRenderLoading();
-								if (error) return renderError ? renderError(error) : defaultRenderError(error);
-								return /* @__PURE__ */ jsxs(Fragment, { children: [switchableOrganizations.map((organization) => {
-									const isSelected = false;
-									return /* @__PURE__ */ jsx(Button_default, {
-										onClick: () => handleOrganizationSwitch(organization),
-										className: cx(styles["menuItem"]),
-										color: "tertiary",
-										variant: "text",
-										size: "small",
-										style: { backgroundColor: hoveredItemIndex === switchableOrganizations.indexOf(organization) ? theme.vars.colors.action?.hover : "transparent" },
-										onMouseEnter: () => setHoveredItemIndex(switchableOrganizations.indexOf(organization)),
-										onMouseLeave: () => setHoveredItemIndex(null),
-										children: renderOrganization ? renderOrganization(organization, isSelected) : defaultRenderOrganization(organization, isSelected)
-									}, organization.id);
-								}), menuItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: cx(styles["menuDivider"]) }), menuItems.map((item, index) => /* @__PURE__ */ jsx("div", { children: item.href ? /* @__PURE__ */ jsxs("a", {
-									href: item.href,
-									style: { backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent" },
-									className: cx(styles["menuItem"]),
-									onMouseEnter: () => setHoveredItemIndex(switchableOrganizations.length + index),
-									onMouseLeave: () => setHoveredItemIndex(null),
-									onFocus: () => setHoveredItemIndex(switchableOrganizations.length + index),
-									onBlur: () => setHoveredItemIndex(null),
-									children: [item.icon, /* @__PURE__ */ jsx("span", { children: item.label })]
-								}) : /* @__PURE__ */ jsx(Button_default, {
-									onClick: () => handleMenuItemClick(item),
-									style: { backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent" },
-									className: cx(styles["menuItem"]),
-									color: "tertiary",
-									variant: "text",
-									size: "small",
-									startIcon: item.icon,
-									onMouseEnter: () => setHoveredItemIndex(switchableOrganizations.length + index),
-									onMouseLeave: () => setHoveredItemIndex(null),
-									children: item.label
-								}) }, index))] })] });
-							})()
-						})
-					]
-				})
-			})
-		})]
-	});
-};
-var BaseOrganizationSwitcher_default = BaseOrganizationSwitcher;
-
-//#endregion
-export { BaseOrganizationSwitcher, BaseOrganizationSwitcher_default as default };
-//# sourceMappingURL=BaseOrganizationSwitcher.js.map

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseOrganizationSwitcher.js","names":["BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","isRTL: boolean","switchableOrganizations: Organization[]","Typography","Check","Button","Building","ChevronDown"],"sources":["../../../../src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\n// Removed BEM and vendor prefix utilities\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 {Preferences} from '@thunderid/browser';\nimport {CSSProperties, FC, ReactElement, ReactNode, useState} from 'react';\nimport useStyles from './BaseOrganizationSwitcher.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport Building from '../../primitives/Icons/Building';\nimport Check from '../../primitives/Icons/Check';\nimport ChevronDown from '../../primitives/Icons/ChevronDown';\nimport Typography from '../../primitives/Typography/Typography';\n\ninterface MenuItem {\n  href?: string;\n  icon?: ReactNode;\n  label: ReactNode;\n  onClick?: () => void;\n}\n\n/**\n * Interface for organization data.\n */\nexport interface Organization {\n  /**\n   * Avatar URL for the organization.\n   */\n  avatar?: string;\n  /**\n   * Unique identifier for the organization.\n   */\n  id: string;\n  /**\n   * Number of members in the organization.\n   */\n  memberCount?: number;\n  /**\n   * Additional metadata for the organization.\n   */\n  metadata?: Record<string, any>;\n  /**\n   * Display name of the organization.\n   */\n  name: string;\n  /**\n   * User's role in the organization.\n   */\n  role?: 'owner' | 'admin' | 'member';\n  /**\n   * URL slug for the organization.\n   */\n  slug?: string;\n}\n\n/**\n * Props interface for the BaseOrganizationSwitcher component.\n */\nexport interface BaseOrganizationSwitcherProps {\n  /**\n   * Optional size for the avatar\n   */\n  avatarSize?: number;\n  /**\n   * Custom class name for styling.\n   */\n  className?: string;\n  /**\n   * Currently selected organization.\n   */\n  currentOrganization?: Organization;\n  /**\n   * Error message to display.\n   */\n  error?: string;\n  /**\n   * Optional element to render when no organization is selected.\n   */\n  fallback?: ReactElement | null;\n  /**\n   * Whether the component is in a loading state.\n   */\n  loading?: boolean;\n  /**\n   * Additional menu items to display at the bottom of the dropdown.\n   */\n  menuItems?: MenuItem[];\n  /**\n   * Handler for when the manage profile button is clicked.\n   */\n  onManageProfile?: () => void;\n  /**\n   * Handler for when an organization is selected.\n   */\n  onOrganizationSwitch: (organization: Organization) => void;\n  /**\n   * List of available organizations.\n   */\n  organizations: Organization[];\n  /**\n   * The HTML element ID where the portal should be mounted\n   */\n  portalId?: string;\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  /**\n   * Custom render function for the error state.\n   */\n  renderError?: (error: string) => ReactElement;\n  /**\n   * Custom render function for the loading state.\n   */\n  renderLoading?: () => ReactElement;\n  /**\n   * Custom render function for the organization item.\n   */\n  renderOrganization?: (organization: Organization, isSelected: boolean) => ReactElement;\n  /**\n   * Whether to show the member count.\n   */\n  showMemberCount?: boolean;\n  /**\n   * Whether to show the role badge.\n   */\n  showRole?: boolean;\n  /**\n   * Show organization name next to avatar in the trigger button\n   */\n  showTriggerLabel?: boolean;\n\n  /**\n   * Custom styles for the component.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * BaseOrganizationSwitcher component displays an organization selector with a dropdown menu.\n * When clicked, it shows a popover with available organizations to switch between.\n * This component serves as the base for framework-specific implementations.\n */\nexport const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({\n  organizations,\n  currentOrganization,\n  loading = false,\n  error,\n  onOrganizationSwitch,\n  onManageProfile,\n  className = '',\n  style,\n  renderOrganization,\n  renderLoading,\n  renderError,\n  showRole = false,\n  showMemberCount = true,\n  menuItems = [],\n  portalId = 'thunderid-organization-switcher',\n  showTriggerLabel = true,\n  avatarSize = 24,\n  fallback = null,\n  preferences,\n}: BaseOrganizationSwitcherProps): ReactElement | null => {\n  const {theme, colorScheme, direction} = 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  const {t} = useTranslation(preferences?.i18n);\n  const isRTL: boolean = direction === 'rtl';\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  if (fallback && !currentOrganization && !loading && organizations.length === 0) {\n    return fallback;\n  }\n\n  const handleOrganizationSwitch = (organization: Organization): void => {\n    onOrganizationSwitch(organization);\n    setIsOpen(false);\n  };\n\n  const handleMenuItemClick = (item: MenuItem): void => {\n    if (item.onClick) {\n      item.onClick();\n    }\n    setIsOpen(false);\n  };\n\n  // Filter out current organization from switchable list\n  const switchableOrganizations: Organization[] = organizations.filter(\n    (org: Organization): boolean => org.id !== currentOrganization?.id,\n  );\n\n  const defaultRenderOrganization = (organization: Organization, isSelected: boolean): ReactElement => (\n    <>\n      <Avatar\n        variant=\"square\"\n        imageUrl={organization.avatar}\n        name={organization.name}\n        size={avatarSize * 1.25}\n        alt={`${organization.name} avatar`}\n      />\n      <div className={cx(styles['organizationInfo'])}>\n        <Typography variant=\"body2\" fontWeight=\"medium\" className={cx(styles['organizationName'])}>\n          {organization.name}\n        </Typography>\n        <div className={cx(styles['organizationMeta'])}>\n          {showMemberCount && organization.memberCount !== undefined && (\n            <span>\n              {organization.memberCount}{' '}\n              {organization.memberCount === 1 ? t('organization.switcher.member') : t('organization.switcher.members')}\n            </span>\n          )}\n          {showRole && organization.role && showMemberCount && organization.memberCount !== undefined && (\n            <span> • </span>\n          )}\n          {showRole && organization.role && <span className={cx(styles['roleCapitalized'])}>{organization.role}</span>}\n        </div>\n      </div>\n      {isSelected && <Check width=\"16\" height=\"16\" color={theme.vars.colors.text.primary} />}\n    </>\n  );\n\n  const defaultRenderLoading = (): ReactElement => (\n    <div className={cx(styles['loadingContainer'])}>\n      <Typography variant=\"caption\" className={cx(styles['loadingText'])}>\n        {t('organization.switcher.loading.placeholder.organizations')}\n      </Typography>\n    </div>\n  );\n\n  const defaultRenderError = (errorMessage: string): ReactElement => (\n    <div className={cx(styles['errorContainer'])}>\n      <Typography variant=\"caption\" className={cx(styles['errorText'])}>\n        {errorMessage}\n      </Typography>\n    </div>\n  );\n\n  return (\n    <div className={cx(styles['root'], className)} style={style}>\n      <Button\n        ref={refs.setReference}\n        className={cx(styles['trigger'])}\n        color=\"tertiary\"\n        variant=\"outline\"\n        size=\"medium\"\n        {...getReferenceProps()}\n      >\n        {currentOrganization ? (\n          <>\n            <Avatar\n              variant=\"square\"\n              imageUrl={currentOrganization.avatar}\n              name={currentOrganization.name}\n              size={avatarSize}\n              alt={`${currentOrganization.name} avatar`}\n            />\n            {showTriggerLabel && (\n              <Typography variant=\"body2\" className={cx(styles['triggerLabel'])}>\n                {currentOrganization.name}\n              </Typography>\n            )}\n          </>\n        ) : (\n          <>\n            <Building width={avatarSize} height={avatarSize} />\n            {showTriggerLabel && (\n              <Typography variant=\"body2\" className={cx(styles['triggerLabel'])}>\n                {t('elements.fields.organization.select.label')}\n              </Typography>\n            )}\n          </>\n        )}\n        <span style={{display: 'inline-flex', transform: isRTL ? 'scaleX(-1)' : 'none'}}>\n          <ChevronDown width=\"16\" height=\"16\" />\n        </span>\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(styles['content'])}\n              style={floatingStyles}\n              {...getFloatingProps()}\n            >\n              {/* Header - Current Organization */}\n              {currentOrganization && (\n                <div className={cx(styles['header'])}>\n                  <Avatar\n                    variant=\"square\"\n                    imageUrl={currentOrganization.avatar}\n                    name={currentOrganization.name}\n                    size={avatarSize * 1.5}\n                    alt={`${currentOrganization.name} avatar`}\n                  />\n                  <div className={cx(styles['headerInfo'])}>\n                    <Typography noWrap className={cx(styles['headerName'])} variant=\"body1\" fontWeight=\"medium\">\n                      {currentOrganization.name}\n                    </Typography>\n                    <div className={cx(styles['headerMeta'])}>\n                      {showMemberCount && currentOrganization.memberCount !== undefined && (\n                        <Typography\n                          noWrap\n                          // ...existing code...\n                          variant=\"caption\"\n                          color=\"secondary\"\n                        >\n                          {currentOrganization.memberCount}{' '}\n                          {currentOrganization.memberCount === 1\n                            ? t('organization.switcher.member')\n                            : t('organization.switcher.members')}\n                          {showRole && currentOrganization.role && <span> • {currentOrganization.role}</span>}\n                        </Typography>\n                      )}\n                      {showRole &&\n                        currentOrganization.role &&\n                        (!showMemberCount || currentOrganization.memberCount === undefined) && (\n                          <Typography noWrap className={cx(styles['headerRole'])} variant=\"caption\" color=\"secondary\">\n                            {currentOrganization.role}\n                          </Typography>\n                        )}\n                    </div>\n                  </div>\n                  {onManageProfile && (\n                    <Button\n                      onClick={onManageProfile}\n                      color=\"tertiary\"\n                      variant=\"outline\"\n                      size=\"small\"\n                      aria-label=\"Manage Organization Profile\"\n                      className={cx(styles['manageButton'])}\n                      endIcon={\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                          <circle cx=\"12\" cy=\"12\" r=\"3\" />\n                          <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\" />\n                        </svg>\n                      }\n                    >\n                      {t('organization.switcher.buttons.manage.text')}\n                    </Button>\n                  )}\n                </div>\n              )}\n\n              {/* Section Header for Other Organizations */}\n              {organizations.length > 1 && (\n                <div\n                  className={cx(styles['header'], styles['sectionHeaderContainer'])}\n                  style={{\n                    borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : 'none',\n                  }}\n                >\n                  <Typography variant=\"caption\" fontWeight={600} className={cx(styles['sectionHeader'])}>\n                    {t('organization.switcher.switch.organization')}\n                  </Typography>\n                </div>\n              )}\n\n              {/* Content */}\n              <div className={cx(styles['menu'])}>\n                {((): ReactElement => {\n                  if (loading) {\n                    return renderLoading ? renderLoading() : defaultRenderLoading();\n                  }\n                  if (error) {\n                    return renderError ? renderError(error) : defaultRenderError(error);\n                  }\n                  return (\n                    <>\n                      {switchableOrganizations.map((organization: Organization): ReactElement => {\n                        const isSelected = false; // Never selected since we exclude current org\n                        return (\n                          <Button\n                            key={organization.id}\n                            onClick={(): void => handleOrganizationSwitch(organization)}\n                            className={cx(styles['menuItem'])}\n                            color=\"tertiary\"\n                            variant=\"text\"\n                            size=\"small\"\n                            style={{\n                              backgroundColor:\n                                hoveredItemIndex === switchableOrganizations.indexOf(organization)\n                                  ? theme.vars.colors.action?.hover\n                                  : 'transparent',\n                            }}\n                            onMouseEnter={(): void =>\n                              setHoveredItemIndex(switchableOrganizations.indexOf(organization))\n                            }\n                            onMouseLeave={(): void => setHoveredItemIndex(null)}\n                          >\n                            {renderOrganization\n                              ? renderOrganization(organization, isSelected)\n                              : defaultRenderOrganization(organization, isSelected)}\n                          </Button>\n                        );\n                      })}\n\n                      {/* Menu Items */}\n                      {menuItems.length > 0 && (\n                        <>\n                          <div className={cx(styles['menuDivider'])} />\n                          {menuItems.map(\n                            (item: any, index: number): ReactElement => (\n                              <div key={index}>\n                                {item.href ? (\n                                  <a\n                                    href={item.href}\n                                    style={{\n                                      backgroundColor:\n                                        hoveredItemIndex === switchableOrganizations.length + index\n                                          ? theme.vars.colors.action?.hover\n                                          : 'transparent',\n                                    }}\n                                    className={cx(styles['menuItem'])}\n                                    onMouseEnter={(): void =>\n                                      setHoveredItemIndex(switchableOrganizations.length + index)\n                                    }\n                                    onMouseLeave={(): void => setHoveredItemIndex(null)}\n                                    onFocus={(): void => setHoveredItemIndex(switchableOrganizations.length + index)}\n                                    onBlur={(): void => setHoveredItemIndex(null)}\n                                  >\n                                    {item.icon}\n                                    <span>{item.label}</span>\n                                  </a>\n                                ) : (\n                                  <Button\n                                    onClick={(): void => handleMenuItemClick(item)}\n                                    style={{\n                                      backgroundColor:\n                                        hoveredItemIndex === switchableOrganizations.length + index\n                                          ? theme.vars.colors.action?.hover\n                                          : 'transparent',\n                                    }}\n                                    className={cx(styles['menuItem'])}\n                                    color=\"tertiary\"\n                                    variant=\"text\"\n                                    size=\"small\"\n                                    startIcon={item.icon}\n                                    onMouseEnter={(): void =>\n                                      setHoveredItemIndex(switchableOrganizations.length + index)\n                                    }\n                                    onMouseLeave={(): void => setHoveredItemIndex(null)}\n                                  >\n                                    {item.label}\n                                  </Button>\n                                )}\n                              </div>\n                            ),\n                          )}\n                        </>\n                      )}\n                    </>\n                  );\n                })()}\n              </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n};\n\nexport default BaseOrganizationSwitcher;\n"],"mappings":"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"}

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.d.ts

@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Theme } from '@thunderid/browser';
-/**
- * Creates styles for the BaseOrganizationSwitcher component using BEM methodology
- * @param theme - The theme object containing design tokens
- * @param colorScheme - The current color scheme (used for memoization)
- * @returns Object containing CSS class names for component styling
- */
-declare const useStyles: (theme: Theme, colorScheme: string) => Record<string, string>;
-export default useStyles;
-//# sourceMappingURL=BaseOrganizationSwitcher.styles.d.ts.map

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseOrganizationSwitcher.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC;;;;;GAKG;AAEH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAmPxE,CAAC;AAEL,eAAe,SAAS,CAAC"}

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.js

@@ -1,234 +0,0 @@
-import { useMemo } from "react";
-import { css } from "@emotion/css";
-
-//#region src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.ts
-/**
-* Creates styles for the BaseOrganizationSwitcher component using BEM methodology
-* @param theme - The theme object containing design tokens
-* @param colorScheme - The current color scheme (used for memoization)
-* @returns Object containing CSS class names for component styling
-*/
-const useStyles = (theme, colorScheme) => useMemo(() => {
-	const root = css`
-      display: inline-block;
-      position: relative;
-      font-family: ${theme.vars.typography.fontFamily};
-    `;
-	const trigger = css`
-      display: inline-flex;
-      align-items: center;
-      gap: ${theme.vars.spacing.unit};
-      padding: calc(${theme.vars.spacing.unit} * 0.75) ${theme.vars.spacing.unit};
-      border: 1px solid ${theme.vars.colors.border};
-      background: ${theme.vars.colors.background.surface};
-      cursor: pointer;
-      border-radius: ${theme.vars.borderRadius.medium};
-      min-width: 160px;
-
-      > span {
-        width: 100%;
-        gap: ${theme.vars.spacing.unit};
-      }
-
-      &:hover {
-        background-color: ${theme.vars.colors.background.surface};
-      }
-    `;
-	const triggerLabel = css`
-      color: ${theme.vars.colors.text.primary};
-      font-weight: 500;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      flex: 1;
-    `;
-	const content = css`
-      min-width: 280px;
-      max-width: 400px;
-      background-color: ${theme.vars.colors.background.surface};
-      border-radius: ${theme.vars.borderRadius.medium};
-      box-shadow: ${theme.vars.shadows.medium};
-      border: 1px solid ${theme.vars.colors.border};
-      outline: none;
-      z-index: 1000;
-    `;
-	const header = css`
-      display: flex;
-      align-items: center;
-      gap: ${theme.vars.spacing.unit};
-      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 2);
-    `;
-	const headerInfo = css`
-      display: flex;
-      flex-direction: column;
-      gap: calc(${theme.vars.spacing.unit} / 4);
-      flex: 1;
-      min-width: 0;
-      overflow: hidden;
-    `;
-	const headerName = css`
-      color: ${theme.vars.colors.text.primary};
-      font-size: 0.875rem;
-      font-weight: 500;
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `;
-	const headerMeta = css`
-      color: ${theme.vars.colors.text.secondary};
-      font-size: 0.75rem;
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `;
-	const headerRole = css`
-      color: ${theme.vars.colors.text.secondary};
-      font-size: 0.75rem;
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      text-transform: capitalize;
-    `;
-	const manageButton = css`
-      min-width: auto;
-      margin-inline-start: auto;
-    `;
-	const menu = css`
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    `;
-	const menuItem = css`
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      gap: ${theme.vars.spacing.unit};
-      padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 2);
-      width: 100%;
-      color: ${theme.vars.colors.text.primary};
-      text-decoration: none;
-      border: none;
-      background-color: transparent;
-      cursor: pointer;
-      font-size: 0.875rem;
-      text-align: start;
-      border-radius: ${theme.vars.borderRadius.medium};
-      transition: background-color 0.15s ease-in-out;
-
-      > span {
-        gap: ${theme.vars.spacing.unit};
-      }
-
-      &:hover {
-        background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
-      }
-    `;
-	const menuDivider = css`
-      margin: calc(${theme.vars.spacing.unit} * 0.5) 0;
-      border-bottom: 1px solid ${theme.vars.colors.border};
-    `;
-	const organizationInfo = css`
-      display: flex;
-      flex-direction: column;
-      gap: calc(${theme.vars.spacing.unit} / 4);
-      flex: 1;
-      min-width: 0;
-      overflow: hidden;
-    `;
-	const organizationName = css`
-      color: ${theme.vars.colors.text.primary};
-      font-size: 0.875rem;
-      font-weight: 500;
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `;
-	const organizationMeta = css`
-      color: ${theme.vars.colors.text.secondary};
-      font-size: 0.75rem;
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `;
-	const loadingContainer = css`
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 80px;
-      gap: ${theme.vars.spacing.unit};
-    `;
-	const loadingText = css`
-      color: ${theme.vars.colors.text.secondary};
-      font-size: 0.875rem;
-    `;
-	const errorContainer = css`
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 80px;
-      padding: calc(${theme.vars.spacing.unit} * 2);
-    `;
-	const errorText = css`
-      color: ${theme.vars.colors.text.secondary};
-      font-size: 0.875rem;
-      text-align: center;
-    `;
-	const sectionHeader = css`
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: ${theme.vars.colors.text.secondary};
-    `;
-	const sectionHeaderContainer = css`
-      border-top: none;
-      border-bottom: none;
-      padding-bottom: calc(${theme.vars.spacing.unit} / 2);
-    `;
-	return {
-		content,
-		errorContainer,
-		errorText,
-		header,
-		headerInfo,
-		headerMeta,
-		headerName,
-		headerRole,
-		loadingContainer,
-		loadingText,
-		manageButton,
-		menu,
-		menuDivider,
-		menuItem,
-		organizationInfo,
-		organizationMeta,
-		organizationName,
-		roleCapitalized: css`
-      text-transform: capitalize;
-    `,
-		root,
-		sectionHeader,
-		sectionHeaderContainer,
-		trigger,
-		triggerLabel
-	};
-}, [
-	theme.vars.colors.background.surface,
-	theme.vars.colors.text.primary,
-	theme.vars.colors.text.secondary,
-	theme.vars.colors.border,
-	theme.vars.borderRadius.medium,
-	theme.vars.shadows.medium,
-	theme.vars.spacing.unit,
-	theme.vars.colors.action?.hover,
-	theme.vars.typography.fontFamily,
-	colorScheme
-]);
-var BaseOrganizationSwitcher_styles_default = useStyles;
-
-//#endregion
-export { BaseOrganizationSwitcher_styles_default as default };
-//# sourceMappingURL=BaseOrganizationSwitcher.styles.js.map

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseOrganizationSwitcher.styles.js","names":["root: string","trigger: string","triggerLabel: string","content: string","header: string","headerInfo: string","headerName: string","headerMeta: string","headerRole: string","manageButton: string","menu: string","menuItem: string","menuDivider: string","organizationInfo: string","organizationName: string","organizationMeta: string","loadingContainer: string","loadingText: string","errorContainer: string","errorText: string","sectionHeader: string","sectionHeaderContainer: string"],"sources":["../../../../src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the BaseOrganizationSwitcher component using BEM methodology\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 */\n\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const root: string = css`\n      display: inline-block;\n      position: relative;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const trigger: string = css`\n      display: inline-flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      padding: calc(${theme.vars.spacing.unit} * 0.75) ${theme.vars.spacing.unit};\n      border: 1px solid ${theme.vars.colors.border};\n      background: ${theme.vars.colors.background.surface};\n      cursor: pointer;\n      border-radius: ${theme.vars.borderRadius.medium};\n      min-width: 160px;\n\n      > span {\n        width: 100%;\n        gap: ${theme.vars.spacing.unit};\n      }\n\n      &:hover {\n        background-color: ${theme.vars.colors.background.surface};\n      }\n    `;\n\n    const triggerLabel: string = css`\n      color: ${theme.vars.colors.text.primary};\n      font-weight: 500;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      flex: 1;\n    `;\n\n    const content: string = css`\n      min-width: 280px;\n      max-width: 400px;\n      background-color: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.medium};\n      box-shadow: ${theme.vars.shadows.medium};\n      border: 1px solid ${theme.vars.colors.border};\n      outline: none;\n      z-index: 1000;\n    `;\n\n    const header: string = css`\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 2);\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    `;\n\n    const headerName: string = css`\n      color: ${theme.vars.colors.text.primary};\n      font-size: 0.875rem;\n      font-weight: 500;\n      margin: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const headerMeta: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.75rem;\n      margin: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const headerRole: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.75rem;\n      margin: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      text-transform: capitalize;\n    `;\n\n    const manageButton: string = css`\n      min-width: auto;\n      margin-inline-start: auto;\n    `;\n\n    const menu: 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      background-color: transparent;\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      > span {\n        gap: ${theme.vars.spacing.unit};\n      }\n\n      &:hover {\n        background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.04)'};\n      }\n    `;\n\n    const menuDivider: 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 organizationInfo: 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    `;\n\n    const organizationName: string = css`\n      color: ${theme.vars.colors.text.primary};\n      font-size: 0.875rem;\n      font-weight: 500;\n      margin: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const organizationMeta: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.75rem;\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    const errorContainer: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 80px;\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const errorText: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.875rem;\n      text-align: center;\n    `;\n\n    const sectionHeader: string = css`\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const sectionHeaderContainer: string = css`\n      border-top: none;\n      border-bottom: none;\n      padding-bottom: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const roleCapitalized: string = css`\n      text-transform: capitalize;\n    `;\n\n    return {\n      content,\n      errorContainer,\n      errorText,\n      header,\n      headerInfo,\n      headerMeta,\n      headerName,\n      headerRole,\n      loadingContainer,\n      loadingText,\n      manageButton,\n      menu,\n      menuDivider,\n      menuItem,\n      organizationInfo,\n      organizationMeta,\n      organizationName,\n      roleCapitalized,\n      root,\n      sectionHeader,\n      sectionHeaderContainer,\n      trigger,\n      triggerLabel,\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.medium,\n    theme.vars.shadows.medium,\n    theme.vars.spacing.unit,\n    theme.vars.colors.action?.hover,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":"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"}