@thunderid/react 0.0.5 → 0.2.0

package/dist/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.js

@@ -0,0 +1,163 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
+/**
+* Creates styles for the BaseOrganizationProfile 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(() => ({
+	attributeItem: css`
+        display: flex;
+        gap: ${theme.vars.spacing.unit};
+        padding: calc(${theme.vars.spacing.unit} / 4) 0;
+        align-items: center;
+      `,
+	attributeKey: css`
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: ${theme.vars.colors.text.secondary};
+        min-width: 80px;
+        flex-shrink: 0;
+      `,
+	attributeValue: css`
+        font-size: 0.75rem;
+        color: ${theme.vars.colors.text.primary};
+        word-break: break-word;
+        flex: 1;
+      `,
+	attributesList: css`
+        display: flex;
+        flex-direction: column;
+        gap: calc(${theme.vars.spacing.unit} / 4);
+      `,
+	card: css`
+        background: ${theme.vars.colors.background.surface};
+        border-radius: ${theme.vars.borderRadius.large};
+      `,
+	editButton: css`
+        min-width: auto;
+        padding: calc(${theme.vars.spacing.unit} / 2);
+        min-height: auto;
+      `,
+	field: css`
+        display: flex;
+        align-items: flex-start;
+        padding: calc(${theme.vars.spacing.unit} / 2) 0;
+        border-bottom: 1px solid ${theme.vars.colors.border};
+        min-height: 28px;
+        gap: ${theme.vars.spacing.unit};
+      `,
+	fieldActions: css`
+        display: flex;
+        align-items: center;
+        gap: calc(${theme.vars.spacing.unit} / 2);
+      `,
+	fieldContent: css`
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: ${theme.vars.spacing.unit};
+      `,
+	fieldInput: css`
+        margin-bottom: 0;
+      `,
+	fieldLast: css`
+        border-bottom: none;
+      `,
+	handle: css`
+        font-size: 1rem;
+        color: ${theme.vars.colors.text.secondary};
+        margin: 0;
+        font-family: monospace;
+      `,
+	header: css`
+        display: flex;
+        align-items: center;
+        gap: calc(${theme.vars.spacing.unit} * 2);
+        margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+        padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+      `,
+	infoContainer: css`
+        display: flex;
+        flex-direction: column;
+        gap: ${theme.vars.spacing.unit};
+      `,
+	label: css`
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: ${theme.vars.colors.text.secondary};
+        width: 120px;
+        flex-shrink: 0;
+        line-height: 28px;
+      `,
+	name: css`
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin: 0 0 8px 0;
+        color: ${theme.vars.colors.text.primary};
+      `,
+	orgInfo: css`
+        flex: 1;
+      `,
+	permissionBadge: css`
+        padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};
+        border-radius: ${theme.vars.borderRadius.small};
+        font-size: 0.75rem;
+        background-color: ${theme.vars.colors.primary.main};
+        color: ${theme.vars.colors.primary.contrastText};
+        border: 1px solid ${theme.vars.colors.border};
+      `,
+	permissionsList: css`
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(${theme.vars.spacing.unit} / 2);
+      `,
+	placeholderButton: css`
+        font-style: italic;
+        text-decoration: underline;
+        opacity: 0.7;
+        padding: 0;
+        min-height: auto;
+      `,
+	popup: css`
+        padding: calc(${theme.vars.spacing.unit} * 2);
+      `,
+	root: css`
+        padding: calc(${theme.vars.spacing.unit} * 4);
+        min-width: 600px;
+        margin: 0 auto;
+        font-family: ${theme.vars.typography.fontFamily};
+      `,
+	statusBadge: css`
+        padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};
+        border-radius: ${theme.vars.borderRadius.small};
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: white;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      `,
+	value: css`
+        color: ${theme.vars.colors.text.primary};
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: ${theme.vars.spacing.unit};
+        overflow: hidden;
+        min-height: 28px;
+        line-height: 28px;
+        word-break: break-word;
+      `,
+	valueEmpty: css`
+        font-style: italic;
+        opacity: 0.7;
+      `
+}), [theme, colorScheme]);
+var BaseOrganizationProfile_styles_default = useStyles;
+
+//#endregion
+export { BaseOrganizationProfile_styles_default as default };
+//# sourceMappingURL=BaseOrganizationProfile.styles.js.map

package/dist/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationProfile.styles.js","names":[],"sources":["../../../../src/components/presentation/OrganizationProfile/BaseOrganizationProfile.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 BaseOrganizationProfile 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 */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(\n    () => ({\n      attributeItem: css`\n        display: flex;\n        gap: ${theme.vars.spacing.unit};\n        padding: calc(${theme.vars.spacing.unit} / 4) 0;\n        align-items: center;\n      `,\n      attributeKey: css`\n        font-size: 0.75rem;\n        font-weight: 500;\n        color: ${theme.vars.colors.text.secondary};\n        min-width: 80px;\n        flex-shrink: 0;\n      `,\n      attributeValue: css`\n        font-size: 0.75rem;\n        color: ${theme.vars.colors.text.primary};\n        word-break: break-word;\n        flex: 1;\n      `,\n      attributesList: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${theme.vars.spacing.unit} / 4);\n      `,\n      card: css`\n        background: ${theme.vars.colors.background.surface};\n        border-radius: ${theme.vars.borderRadius.large};\n      `,\n      editButton: css`\n        min-width: auto;\n        padding: calc(${theme.vars.spacing.unit} / 2);\n        min-height: auto;\n      `,\n      field: css`\n        display: flex;\n        align-items: flex-start;\n        padding: calc(${theme.vars.spacing.unit} / 2) 0;\n        border-bottom: 1px solid ${theme.vars.colors.border};\n        min-height: 28px;\n        gap: ${theme.vars.spacing.unit};\n      `,\n      fieldActions: css`\n        display: flex;\n        align-items: center;\n        gap: calc(${theme.vars.spacing.unit} / 2);\n      `,\n      fieldContent: css`\n        flex: 1;\n        display: flex;\n        align-items: center;\n        gap: ${theme.vars.spacing.unit};\n      `,\n      fieldInput: css`\n        margin-bottom: 0;\n      `,\n      fieldLast: css`\n        border-bottom: none;\n      `,\n      handle: css`\n        font-size: 1rem;\n        color: ${theme.vars.colors.text.secondary};\n        margin: 0;\n        font-family: monospace;\n      `,\n      header: css`\n        display: flex;\n        align-items: center;\n        gap: calc(${theme.vars.spacing.unit} * 2);\n        margin-bottom: calc(${theme.vars.spacing.unit} * 3);\n        padding-bottom: calc(${theme.vars.spacing.unit} * 2);\n      `,\n      infoContainer: css`\n        display: flex;\n        flex-direction: column;\n        gap: ${theme.vars.spacing.unit};\n      `,\n      label: 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      `,\n      name: css`\n        font-size: 1.5rem;\n        font-weight: 600;\n        margin: 0 0 8px 0;\n        color: ${theme.vars.colors.text.primary};\n      `,\n      orgInfo: css`\n        flex: 1;\n      `,\n      permissionBadge: css`\n        padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};\n        border-radius: ${theme.vars.borderRadius.small};\n        font-size: 0.75rem;\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n        border: 1px solid ${theme.vars.colors.border};\n      `,\n      permissionsList: css`\n        display: flex;\n        flex-wrap: wrap;\n        gap: calc(${theme.vars.spacing.unit} / 2);\n      `,\n      placeholderButton: css`\n        font-style: italic;\n        text-decoration: underline;\n        opacity: 0.7;\n        padding: 0;\n        min-height: auto;\n      `,\n      popup: css`\n        padding: calc(${theme.vars.spacing.unit} * 2);\n      `,\n      root: 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      statusBadge: css`\n        padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};\n        border-radius: ${theme.vars.borderRadius.small};\n        font-size: 0.75rem;\n        font-weight: 500;\n        color: white;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n      `,\n      value: css`\n        color: ${theme.vars.colors.text.primary};\n        flex: 1;\n        display: flex;\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      `,\n      valueEmpty: css`\n        font-style: italic;\n        opacity: 0.7;\n      `,\n    }),\n    [theme, colorScheme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,gBAC/B,eACS;CACL,eAAe,GAAG;;eAET,MAAM,KAAK,QAAQ,KAAK;wBACf,MAAM,KAAK,QAAQ,KAAK;;;CAG1C,cAAc,GAAG;;;iBAGN,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,gBAAgB,GAAG;;iBAER,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;CAI1C,gBAAgB,GAAG;;;oBAGL,MAAM,KAAK,QAAQ,KAAK;;CAEtC,MAAM,GAAG;sBACO,MAAM,KAAK,OAAO,WAAW,QAAQ;yBAClC,MAAM,KAAK,aAAa,MAAM;;CAEjD,YAAY,GAAG;;wBAEG,MAAM,KAAK,QAAQ,KAAK;;;CAG1C,OAAO,GAAG;;;wBAGQ,MAAM,KAAK,QAAQ,KAAK;mCACb,MAAM,KAAK,OAAO,OAAO;;eAE7C,MAAM,KAAK,QAAQ,KAAK;;CAEjC,cAAc,GAAG;;;oBAGH,MAAM,KAAK,QAAQ,KAAK;;CAEtC,cAAc,GAAG;;;;eAIR,MAAM,KAAK,QAAQ,KAAK;;CAEjC,YAAY,GAAG;;;CAGf,WAAW,GAAG;;;CAGd,QAAQ,GAAG;;iBAEA,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,QAAQ,GAAG;;;oBAGG,MAAM,KAAK,QAAQ,KAAK;8BACd,MAAM,KAAK,QAAQ,KAAK;+BACvB,MAAM,KAAK,QAAQ,KAAK;;CAEjD,eAAe,GAAG;;;eAGT,MAAM,KAAK,QAAQ,KAAK;;CAEjC,OAAO,GAAG;;;iBAGC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;CAK5C,MAAM,GAAG;;;;iBAIE,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAE1C,SAAS,GAAG;;;CAGZ,iBAAiB,GAAG;wBACF,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;yBACvD,MAAM,KAAK,aAAa,MAAM;;4BAE3B,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;4BAC5B,MAAM,KAAK,OAAO,OAAO;;CAE/C,iBAAiB,GAAG;;;oBAGN,MAAM,KAAK,QAAQ,KAAK;;CAEtC,mBAAmB,GAAG;;;;;;;CAOtB,OAAO,GAAG;wBACQ,MAAM,KAAK,QAAQ,KAAK;;CAE1C,MAAM,GAAG;wBACS,MAAM,KAAK,QAAQ,KAAK;;;uBAGzB,MAAM,KAAK,WAAW,WAAW;;CAElD,aAAa,GAAG;wBACE,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;yBACvD,MAAM,KAAK,aAAa,MAAM;;;;;;;CAOjD,OAAO,GAAG;iBACC,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;eAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;;CAMjC,YAAY,GAAG;;;;CAIhB,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,6CAAe"}

package/dist/components/presentation/OrganizationProfile/OrganizationProfile.js

@@ -0,0 +1,122 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import BaseOrganizationProfile_default from "./BaseOrganizationProfile.js";
+import getOrganization_default from "../../../api/getOrganization.js";
+import updateOrganization_default, { createPatchOperations } from "../../../api/updateOrganization.js";
+import { createPackageComponentLogger } from "@thunderid/browser";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
+const logger$1 = createPackageComponentLogger("@thunderid/react", "OrganizationProfile");
+/**
+* OrganizationProfile component displays organization information in a
+* structured and styled format. It automatically fetches organization details
+* using the provided organization ID and displays them using BaseOrganizationProfile.
+*
+* The component supports editing functionality, allowing users to modify organization
+* fields inline. Updates are automatically synced with the backend via the SCIM2 API.
+*
+* This component is the React-specific implementation that automatically
+* retrieves the organization data from ThunderID API.
+*
+* @example
+* ```tsx
+* // Basic usage with editing enabled (default)
+* <OrganizationProfile organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1" />
+*
+* // Read-only mode
+* <OrganizationProfile
+*   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+*   editable={false}
+* />
+*
+* // With card layout and custom fallbacks
+* <OrganizationProfile
+*   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+*   cardLayout={true}
+*   loadingFallback={<div>Loading organization...</div>}
+*   errorFallback={<div>Failed to load organization</div>}
+*   fallback={<div>No organization data available</div>}
+* />
+*
+* // With custom fields configuration and update callback
+* <OrganizationProfile
+*   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+*   fields={[
+*     { key: 'id', label: 'Organization ID', editable: false },
+*     { key: 'name', label: 'Organization Name', editable: true },
+*     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },
+*     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
+*     { key: 'lastModified', label: 'Last Modified Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
+*     { key: 'attributes', label: 'Custom Attributes', editable: true }
+*   ]}
+*   onUpdate={async (payload) => {
+*     console.log('Organization updated:', payload);
+*     // payload contains the updated field values
+*     // The component automatically converts these to patch operations
+*   }}
+* />
+*
+* // In popup mode
+* <OrganizationProfile
+*   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+*   mode="popup"
+*   open={isOpen}
+*   onOpenChange={setIsOpen}
+*   popupTitle="Edit Organization Profile"
+* />
+* ```
+*/
+const OrganizationProfile = ({ organizationId, mode = "default", open = false, onOpenChange, onUpdate, popupTitle, loadingFallback, errorFallback, preferences,...rest }) => {
+	const { baseUrl, instanceId } = useThunderID_default();
+	const { t } = useTranslation_default(preferences?.i18n);
+	const [organization, setOrganization] = useState(null);
+	const fetchOrganization = async () => {
+		if (!baseUrl || !organizationId) return;
+		try {
+			setOrganization(await getOrganization_default({
+				baseUrl,
+				instanceId,
+				organizationId
+			}));
+		} catch (err) {
+			logger$1.error("Failed to fetch organization:");
+			setOrganization(null);
+		}
+	};
+	useEffect(() => {
+		fetchOrganization();
+	}, [baseUrl, organizationId]);
+	const handleOrganizationUpdate = async (payload) => {
+		if (!baseUrl || !organizationId) return;
+		try {
+			await updateOrganization_default({
+				baseUrl,
+				instanceId,
+				operations: createPatchOperations(payload),
+				organizationId
+			});
+			await fetchOrganization();
+			if (onUpdate) await onUpdate(payload);
+		} catch (err) {
+			logger$1.error("Failed to update organization:");
+			throw err;
+		}
+	};
+	return /* @__PURE__ */ jsx(BaseOrganizationProfile_default, {
+		organization,
+		onUpdate: handleOrganizationUpdate,
+		mode: mode === "popup" ? "popup" : "inline",
+		open,
+		onOpenChange,
+		title: popupTitle || t("organization.profile.heading"),
+		preferences,
+		...rest
+	});
+};
+var OrganizationProfile_default = OrganizationProfile;
+
+//#endregion
+export { OrganizationProfile_default as default };
+//# sourceMappingURL=OrganizationProfile.js.map

package/dist/components/presentation/OrganizationProfile/OrganizationProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationProfile.js","names":["logger: ReturnType<typeof createPackageComponentLogger>","OrganizationProfile: FC<OrganizationProfileProps>","useThunderID","useTranslation","getOrganization","updateOrganization","BaseOrganizationProfile"],"sources":["../../../../src/components/presentation/OrganizationProfile/OrganizationProfile.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\nimport {OrganizationDetails, createPackageComponentLogger} from '@thunderid/browser';\nimport {FC, ReactElement, useEffect, useState} from 'react';\nimport BaseOrganizationProfile, {BaseOrganizationProfileProps} from './BaseOrganizationProfile';\nimport getOrganization from '../../../api/getOrganization';\nimport updateOrganization, {createPatchOperations} from '../../../api/updateOrganization';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../hooks/useTranslation';\n\nconst logger: ReturnType<typeof createPackageComponentLogger> = createPackageComponentLogger(\n  '@thunderid/react',\n  'OrganizationProfile',\n);\n\n/**\n * Props for the OrganizationProfile component.\n * Extends BaseOrganizationProfileProps but makes the organization prop optional\n * since it will be fetched using the organizationId\n */\nexport type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organization' | 'mode'> & {\n  /**\n   * Component to show when there's an error loading organization data.\n   */\n  errorFallback?: ReactElement;\n\n  /**\n   * Component to show while loading organization data.\n   */\n  loadingFallback?: ReactElement;\n\n  /**\n   * Display mode for the component.\n   */\n  mode?: 'default' | 'popup';\n\n  /**\n   * Callback fired when the popup should be closed (only used in popup mode).\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * Callback fired when the organization should be updated.\n   */\n  onUpdate?: (payload: any) => Promise<void>;\n\n  /**\n   * Whether the popup is open (only used in popup mode).\n   */\n  open?: boolean;\n\n  /**\n   * The ID of the organization to fetch and display.\n   */\n  organizationId: string;\n\n  /**\n   * Custom title for the popup dialog (only used in popup mode).\n   */\n  popupTitle?: string;\n};\n\n/**\n * OrganizationProfile component displays organization information in a\n * structured and styled format. It automatically fetches organization details\n * using the provided organization ID and displays them using BaseOrganizationProfile.\n *\n * The component supports editing functionality, allowing users to modify organization\n * fields inline. Updates are automatically synced with the backend via the SCIM2 API.\n *\n * This component is the React-specific implementation that automatically\n * retrieves the organization data from ThunderID API.\n *\n * @example\n * ```tsx\n * // Basic usage with editing enabled (default)\n * <OrganizationProfile organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\" />\n *\n * // Read-only mode\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   editable={false}\n * />\n *\n * // With card layout and custom fallbacks\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   cardLayout={true}\n *   loadingFallback={<div>Loading organization...</div>}\n *   errorFallback={<div>Failed to load organization</div>}\n *   fallback={<div>No organization data available</div>}\n * />\n *\n * // With custom fields configuration and update callback\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   fields={[\n *     { key: 'id', label: 'Organization ID', editable: false },\n *     { key: 'name', label: 'Organization Name', editable: true },\n *     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },\n *     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },\n *     { key: 'lastModified', label: 'Last Modified Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },\n *     { key: 'attributes', label: 'Custom Attributes', editable: true }\n *   ]}\n *   onUpdate={async (payload) => {\n *     console.log('Organization updated:', payload);\n *     // payload contains the updated field values\n *     // The component automatically converts these to patch operations\n *   }}\n * />\n *\n * // In popup mode\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   mode=\"popup\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   popupTitle=\"Edit Organization Profile\"\n * />\n * ```\n */\nconst OrganizationProfile: FC<OrganizationProfileProps> = ({\n  organizationId,\n  mode = 'default',\n  open = false,\n  onOpenChange,\n  onUpdate,\n  popupTitle,\n  loadingFallback,\n  errorFallback,\n  preferences,\n  ...rest\n}: OrganizationProfileProps): ReactElement => {\n  const {baseUrl, instanceId} = useThunderID();\n  const {t} = useTranslation(preferences?.i18n);\n  const [organization, setOrganization] = useState<OrganizationDetails | null>(null);\n\n  const fetchOrganization = async (): Promise<void> => {\n    if (!baseUrl || !organizationId) {\n      return;\n    }\n\n    try {\n      const orgData: any = await getOrganization({\n        baseUrl,\n        instanceId,\n        organizationId,\n      });\n      setOrganization(orgData);\n    } catch (err) {\n      logger.error('Failed to fetch organization:');\n      setOrganization(null);\n    }\n  };\n\n  useEffect(() => {\n    fetchOrganization();\n  }, [baseUrl, organizationId]);\n\n  const handleOrganizationUpdate = async (payload: any): Promise<void> => {\n    if (!baseUrl || !organizationId) return;\n\n    try {\n      // Convert payload to patch operations format\n      const operations: any = createPatchOperations(payload);\n\n      await updateOrganization({\n        baseUrl,\n        instanceId,\n        operations,\n        organizationId,\n      });\n      // Refetch organization data after update\n      await fetchOrganization();\n\n      // Call the optional onUpdate callback\n      if (onUpdate) {\n        await onUpdate(payload);\n      }\n    } catch (err) {\n      logger.error('Failed to update organization:');\n      throw err;\n    }\n  };\n\n  return (\n    <BaseOrganizationProfile\n      organization={organization}\n      onUpdate={handleOrganizationUpdate}\n      mode={mode === 'popup' ? 'popup' : 'inline'}\n      open={open}\n      onOpenChange={onOpenChange}\n      title={popupTitle || t('organization.profile.heading')}\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default OrganizationProfile;\n"],"mappings":";;;;;;;;;;AA0BA,MAAMA,WAA0D,6BAC9D,oBACA,sBACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GD,MAAMC,uBAAqD,EACzD,gBACA,OAAO,WACP,OAAO,OACP,cACA,UACA,YACA,iBACA,eACA,YACA,GAAG,WACyC;CAC5C,MAAM,EAAC,SAAS,eAAcC,sBAAc;CAC5C,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAM,CAAC,cAAc,mBAAmB,SAAqC,KAAK;CAElF,MAAM,oBAAoB,YAA2B;AACnD,MAAI,CAAC,WAAW,CAAC,eACf;AAGF,MAAI;AAMF,mBALqB,MAAMC,wBAAgB;IACzC;IACA;IACA;IACD,CAAC,CACsB;WACjB,KAAK;AACZ,YAAO,MAAM,gCAAgC;AAC7C,mBAAgB,KAAK;;;AAIzB,iBAAgB;AACd,qBAAmB;IAClB,CAAC,SAAS,eAAe,CAAC;CAE7B,MAAM,2BAA2B,OAAO,YAAgC;AACtE,MAAI,CAAC,WAAW,CAAC,eAAgB;AAEjC,MAAI;AAIF,SAAMC,2BAAmB;IACvB;IACA;IACA,YALsB,sBAAsB,QAAQ;IAMpD;IACD,CAAC;AAEF,SAAM,mBAAmB;AAGzB,OAAI,SACF,OAAM,SAAS,QAAQ;WAElB,KAAK;AACZ,YAAO,MAAM,iCAAiC;AAC9C,SAAM;;;AAIV,QACE,oBAACC;EACe;EACd,UAAU;EACV,MAAM,SAAS,UAAU,UAAU;EAC7B;EACQ;EACd,OAAO,cAAc,EAAE,+BAA+B;EACzC;EACb,GAAI;GACJ;;AAIN,kCAAe"}

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

@@ -79,7 +79,7 @@ export interface BaseOrganizationSwitcherProps {
     /**
      * Optional element to render when no organization is selected.
      */
-    fallback?: ReactElement;
+    fallback?: ReactElement | null;
     /**
      * Whether the component is in a loading state.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BaseOrganizationSwitcher.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAiBH,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAC,aAAa,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAW3E,UAAU,QAAQ;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,oBAAoB,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,YAAY,CAAC;IAC9C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,YAAY,CAAC;IACnC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,KAAK,YAAY,CAAC;IACvF;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CAuVtE,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"BaseOrganizationSwitcher.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAiBH,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAC,aAAa,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAW3E,UAAU,QAAQ;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,oBAAoB,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,YAAY,CAAC;IAC9C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,YAAY,CAAC;IACnC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,KAAK,YAAY,CAAC;IACvF;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CAuVtE,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

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

@@ -0,0 +1,282 @@
+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