@thunderid/react 0.0.5 → 0.2.0

package/dist/components/presentation/CreateOrganization/BaseCreateOrganization.styles.js

@@ -0,0 +1,147 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
+/**
+* Creates styles for the BaseCreateOrganization 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`
+      padding: calc(${theme.vars.spacing.unit} * 4);
+      min-width: 600px;
+      margin: 0 auto;
+      font-family: ${theme.vars.typography.fontFamily};
+    `;
+	const card = css`
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+      padding: calc(${theme.vars.spacing.unit} * 4);
+    `;
+	const content = css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const form = css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+      width: 100%;
+    `;
+	const header = css`
+      display: flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 1.5);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);
+    `;
+	const field = css`
+      display: flex;
+      align-items: center;
+      padding: ${theme.vars.spacing.unit} 0;
+      border-bottom: 1px solid ${theme.vars.colors.border};
+      min-height: 32px;
+    `;
+	const fieldGroup = css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} * 0.5);
+    `;
+	const textarea = css`
+      width: 100%;
+      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
+      border: 1px solid ${theme.vars.colors.border};
+      border-radius: ${theme.vars.borderRadius.medium};
+      font-size: ${theme.vars.typography.fontSizes.md};
+      color: ${theme.vars.colors.text.primary};
+      background-color: ${theme.vars.colors.background.surface};
+      font-family: ${theme.vars.typography.fontFamily};
+      min-height: 80px;
+      resize: vertical;
+      outline: none;
+      &:focus {
+        border-color: ${theme.vars.colors.primary.main};
+        box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;
+      }
+      &:disabled {
+        background-color: ${theme.vars.colors.background.disabled};
+        color: ${theme.vars.colors.text.secondary};
+        cursor: not-allowed;
+      }
+    `;
+	const textareaError = css`
+      border-color: ${theme.vars.colors.error.main};
+    `;
+	const input = css``;
+	const avatarContainer = css`
+      align-items: flex-start;
+      display: flex;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+      margin-bottom: ${theme.vars.spacing.unit};
+    `;
+	const actions = css`
+      display: flex;
+      gap: ${theme.vars.spacing.unit};
+      justify-content: flex-end;
+      padding-top: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const infoContainer = css`
+      display: flex;
+      flex-direction: column;
+      gap: ${theme.vars.spacing.unit};
+    `;
+	const value = css`
+      color: ${theme.vars.colors.text.primary};
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: ${theme.vars.spacing.unit};
+      overflow: hidden;
+      min-height: 32px;
+      line-height: 32px;
+    `;
+	const popup = css`
+      padding: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	return {
+		actions,
+		avatarContainer,
+		card,
+		content,
+		errorAlert: css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
+    `,
+		field,
+		fieldGroup,
+		form,
+		header,
+		infoContainer,
+		input,
+		popup,
+		root,
+		textarea,
+		textareaError,
+		value
+	};
+}, [
+	theme.vars.spacing.unit,
+	theme.vars.colors.background.surface,
+	theme.vars.colors.border,
+	theme.vars.borderRadius.large,
+	theme.vars.borderRadius.medium,
+	theme.vars.typography.fontSizes.md,
+	theme.vars.colors.text.primary,
+	theme.vars.colors.primary.main,
+	theme.vars.colors.background.disabled,
+	theme.vars.colors.text.secondary,
+	theme.vars.colors.error.main,
+	theme.vars.typography.fontFamily,
+	colorScheme
+]);
+var BaseCreateOrganization_styles_default = useStyles;
+
+//#endregion
+export { BaseCreateOrganization_styles_default as default };
+//# sourceMappingURL=BaseCreateOrganization.styles.js.map

package/dist/components/presentation/CreateOrganization/BaseCreateOrganization.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCreateOrganization.styles.js","names":["root: string","card: string","content: string","form: string","header: string","field: string","fieldGroup: string","textarea: string","textareaError: string","input: string","avatarContainer: string","actions: string","infoContainer: string","value: string","popup: string"],"sources":["../../../../src/components/presentation/CreateOrganization/BaseCreateOrganization.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 BaseCreateOrganization 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    const root: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      min-width: 600px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const content: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const form: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      width: 100%;\n    `;\n\n    const header: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);\n    `;\n\n    const field: string = css`\n      display: flex;\n      align-items: center;\n      padding: ${theme.vars.spacing.unit} 0;\n      border-bottom: 1px solid ${theme.vars.colors.border};\n      min-height: 32px;\n    `;\n\n    const fieldGroup: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 0.5);\n    `;\n\n    const textarea: string = css`\n      width: 100%;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${theme.vars.colors.border};\n      border-radius: ${theme.vars.borderRadius.medium};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${theme.vars.colors.background.surface};\n      font-family: ${theme.vars.typography.fontFamily};\n      min-height: 80px;\n      resize: vertical;\n      outline: none;\n      &:focus {\n        border-color: ${theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;\n      }\n      &:disabled {\n        background-color: ${theme.vars.colors.background.disabled};\n        color: ${theme.vars.colors.text.secondary};\n        cursor: not-allowed;\n      }\n    `;\n\n    const textareaError: string = css`\n      border-color: ${theme.vars.colors.error.main};\n    `;\n\n    const input: string = css``;\n\n    const avatarContainer: string = css`\n      align-items: flex-start;\n      display: flex;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      margin-bottom: ${theme.vars.spacing.unit};\n    `;\n\n    const actions: string = css`\n      display: flex;\n      gap: ${theme.vars.spacing.unit};\n      justify-content: flex-end;\n      padding-top: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const infoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const value: string = 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: 32px;\n      line-height: 32px;\n    `;\n\n    const popup: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const errorAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    return {\n      actions,\n      avatarContainer,\n      card,\n      content,\n      errorAlert,\n      field,\n      fieldGroup,\n      form,\n      header,\n      infoContainer,\n      input,\n      popup,\n      root,\n      textarea,\n      textareaError,\n      value,\n    };\n  }, [\n    theme.vars.spacing.unit,\n    theme.vars.colors.background.surface,\n    theme.vars.colors.border,\n    theme.vars.borderRadius.large,\n    theme.vars.borderRadius.medium,\n    theme.vars.typography.fontSizes.md,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.primary.main,\n    theme.vars.colors.background.disabled,\n    theme.vars.colors.text.secondary,\n    theme.vars.colors.error.main,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,gBAC/B,cAAc;CACZ,MAAMA,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;;;qBAGzB,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,OAAe,GAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,UAAkB,GAAG;;;kBAGb,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,OAAe,GAAG;;;kBAGV,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,SAAiB,GAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;4BACd,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,QAAgB,GAAG;;;iBAGZ,MAAM,KAAK,QAAQ,KAAK;iCACR,MAAM,KAAK,OAAO,OAAO;;;CAItD,MAAMC,aAAqB,GAAG;;;kBAGhB,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,WAAmB,GAAG;;iBAEf,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,OAAO;uBAC5B,MAAM,KAAK,aAAa,OAAO;mBACnC,MAAM,KAAK,WAAW,UAAU,GAAG;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;qBAC1C,MAAM,KAAK,WAAW,WAAW;;;;;wBAK9B,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACvB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;4BAGnC,MAAM,KAAK,OAAO,WAAW,SAAS;iBACjD,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,gBAAwB,GAAG;sBACf,MAAM,KAAK,OAAO,MAAM,KAAK;;CAG/C,MAAMC,QAAgB,GAAG;CAEzB,MAAMC,kBAA0B,GAAG;;;kBAGrB,MAAM,KAAK,QAAQ,KAAK;uBACnB,MAAM,KAAK,QAAQ,KAAK;;CAG3C,MAAMC,UAAkB,GAAG;;aAElB,MAAM,KAAK,QAAQ,KAAK;;0BAEX,MAAM,KAAK,QAAQ,KAAK;;CAG9C,MAAMC,gBAAwB,GAAG;;;aAGxB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,QAAgB,GAAG;eACd,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;aAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;CAMjC,MAAMC,QAAgB,GAAG;sBACP,MAAM,KAAK,QAAQ,KAAK;;AAO1C,QAAO;EACL;EACA;EACA;EACA;EACA,YATyB,GAAG;4BACN,MAAM,KAAK,QAAQ,KAAK;;EAS9C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,WAAW,UAAU;CAChC,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,QAAQ;CAC1B,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,MAAM;CACxB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,4CAAe"}

package/dist/components/presentation/CreateOrganization/CreateOrganization.d.ts

@@ -25,7 +25,7 @@ export interface CreateOrganizationProps extends Omit<BaseCreateOrganizationProp
     /**
      * Fallback element to render when the user is not signed in.
      */
-    fallback?: ReactElement;
+    fallback?: ReactElement | null;
     /**
      * Custom organization creation handler (will use default API if not provided).
      */

package/dist/components/presentation/CreateOrganization/CreateOrganization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateOrganization.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/CreateOrganization/CreateOrganization.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,yBAAyB,EAAC,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAC,EAAE,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AACjD,OAAO,EAAyB,2BAA2B,EAAC,MAAM,0BAA0B,CAAC;AAK7F;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,2BAA2B,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAClH;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAyE1D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"CreateOrganization.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/CreateOrganization/CreateOrganization.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,yBAAyB,EAAC,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAC,EAAE,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AACjD,OAAO,EAAyB,2BAA2B,EAAC,MAAM,0BAA0B,CAAC;AAK7F;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,2BAA2B,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAClH;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAyE1D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/presentation/CreateOrganization/CreateOrganization.js

@@ -0,0 +1,87 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import useOrganization_default from "../../../contexts/Organization/useOrganization.js";
+import { BaseCreateOrganization } from "./BaseCreateOrganization.js";
+import createOrganization_default from "../../../api/createOrganization.js";
+import { useState } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/presentation/CreateOrganization/CreateOrganization.tsx
+/**
+* CreateOrganization component that provides organization creation functionality.
+* This component automatically integrates with the ThunderID and Organization contexts.
+*
+* @example
+* ```tsx
+* import { CreateOrganization } from '@thunderid/react';
+*
+* // Basic usage - uses default API and contexts
+* <CreateOrganization
+*   onSuccess={(org) => console.log('Created:', org)}
+*   onCancel={() => navigate('/organizations')}
+* />
+*
+* // With custom organization creation handler
+* <CreateOrganization
+*   onCreateOrganization={async (payload) => {
+*     const result = await myCustomAPI.createOrganization(payload);
+*     return result;
+*   }}
+*   onSuccess={(org) => {
+*     console.log('Organization created:', org.name);
+*     // Custom success logic here
+*   }}
+* />
+*
+* // With fallback for unauthenticated users
+* <CreateOrganization
+*   fallback={<div>Please sign in to create an organization</div>}
+* />
+* ```
+*/
+const CreateOrganization = ({ onCreateOrganization, fallback = null, onSuccess, defaultParentId,...props }) => {
+	const { isSignedIn, baseUrl, instanceId } = useThunderID_default();
+	const { currentOrganization, revalidateMyOrganizations } = useOrganization_default();
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	if (!isSignedIn && fallback) return fallback;
+	if (!isSignedIn) return /* @__PURE__ */ jsx(Fragment, {});
+	const parentId = defaultParentId || currentOrganization?.id || "";
+	const handleSubmit = async (payload) => {
+		setLoading(true);
+		setError(null);
+		try {
+			let result;
+			if (onCreateOrganization) result = await onCreateOrganization(payload);
+			else {
+				if (!baseUrl) throw new Error("Base URL is required for organization creation");
+				result = await createOrganization_default({
+					baseUrl,
+					instanceId,
+					payload: {
+						...payload,
+						parentId
+					}
+				});
+			}
+			await revalidateMyOrganizations();
+			if (onSuccess) onSuccess(result);
+		} catch (createError) {
+			setError(createError instanceof Error ? createError.message : "Failed to create organization");
+			throw createError;
+		} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(BaseCreateOrganization, {
+		onSubmit: handleSubmit,
+		loading,
+		error,
+		defaultParentId: parentId,
+		onSuccess,
+		...props
+	});
+};
+
+//#endregion
+export { CreateOrganization };
+//# sourceMappingURL=CreateOrganization.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreateOrganization.js","names":["CreateOrganization: FC<CreateOrganizationProps>","useThunderID","useOrganization","parentId: string","result: any","createOrganization"],"sources":["../../../../src/components/presentation/CreateOrganization/CreateOrganization.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 {CreateOrganizationPayload} from '@thunderid/browser';\nimport {FC, ReactElement, useState} from 'react';\nimport {BaseCreateOrganization, BaseCreateOrganizationProps} from './BaseCreateOrganization';\nimport createOrganization from '../../../api/createOrganization';\nimport useOrganization from '../../../contexts/Organization/useOrganization';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\n\n/**\n * Props interface for the CreateOrganization component.\n */\nexport interface CreateOrganizationProps extends Omit<BaseCreateOrganizationProps, 'onSubmit' | 'loading' | 'error'> {\n  /**\n   * Fallback element to render when the user is not signed in.\n   */\n  fallback?: ReactElement | null;\n  /**\n   * Custom organization creation handler (will use default API if not provided).\n   */\n  onCreateOrganization?: (payload: CreateOrganizationPayload) => Promise<any>;\n}\n\n/**\n * CreateOrganization component that provides organization creation functionality.\n * This component automatically integrates with the ThunderID and Organization contexts.\n *\n * @example\n * ```tsx\n * import { CreateOrganization } from '@thunderid/react';\n *\n * // Basic usage - uses default API and contexts\n * <CreateOrganization\n *   onSuccess={(org) => console.log('Created:', org)}\n *   onCancel={() => navigate('/organizations')}\n * />\n *\n * // With custom organization creation handler\n * <CreateOrganization\n *   onCreateOrganization={async (payload) => {\n *     const result = await myCustomAPI.createOrganization(payload);\n *     return result;\n *   }}\n *   onSuccess={(org) => {\n *     console.log('Organization created:', org.name);\n *     // Custom success logic here\n *   }}\n * />\n *\n * // With fallback for unauthenticated users\n * <CreateOrganization\n *   fallback={<div>Please sign in to create an organization</div>}\n * />\n * ```\n */\nexport const CreateOrganization: FC<CreateOrganizationProps> = ({\n  onCreateOrganization,\n  fallback = null,\n  onSuccess,\n  defaultParentId,\n  ...props\n}: CreateOrganizationProps): ReactElement | null => {\n  const {isSignedIn, baseUrl, instanceId} = useThunderID();\n  const {currentOrganization, revalidateMyOrganizations} = useOrganization();\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  if (!isSignedIn && fallback) {\n    return fallback;\n  }\n\n  if (!isSignedIn) {\n    return <></>;\n  }\n\n  // Use current organization as parent if no defaultParentId provided\n  const parentId: string = defaultParentId || currentOrganization?.id || '';\n\n  const handleSubmit = async (payload: CreateOrganizationPayload): Promise<void> => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      let result: any;\n\n      if (onCreateOrganization) {\n        result = await onCreateOrganization(payload);\n      } else {\n        if (!baseUrl) {\n          throw new Error('Base URL is required for organization creation');\n        }\n\n        result = await createOrganization({\n          baseUrl,\n          instanceId,\n          payload: {\n            ...payload,\n            parentId,\n          },\n        });\n      }\n\n      await revalidateMyOrganizations();\n\n      if (onSuccess) {\n        onSuccess(result);\n      }\n    } catch (createError) {\n      const errorMessage: string = createError instanceof Error ? createError.message : 'Failed to create organization';\n\n      setError(errorMessage);\n\n      throw createError;\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <BaseCreateOrganization\n      onSubmit={handleSubmit}\n      loading={loading}\n      error={error}\n      defaultParentId={parentId}\n      onSuccess={onSuccess}\n      {...props}\n    />\n  );\n};\n\nexport default CreateOrganization;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,MAAaA,sBAAmD,EAC9D,sBACA,WAAW,MACX,WACA,gBACA,GAAG,YAC+C;CAClD,MAAM,EAAC,YAAY,SAAS,eAAcC,sBAAc;CACxD,MAAM,EAAC,qBAAqB,8BAA6BC,yBAAiB;CAC1E,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;AAEvD,KAAI,CAAC,cAAc,SACjB,QAAO;AAGT,KAAI,CAAC,WACH,QAAO,iCAAK;CAId,MAAMC,WAAmB,mBAAmB,qBAAqB,MAAM;CAEvE,MAAM,eAAe,OAAO,YAAsD;AAChF,aAAW,KAAK;AAChB,WAAS,KAAK;AAEd,MAAI;GACF,IAAIC;AAEJ,OAAI,qBACF,UAAS,MAAM,qBAAqB,QAAQ;QACvC;AACL,QAAI,CAAC,QACH,OAAM,IAAI,MAAM,iDAAiD;AAGnE,aAAS,MAAMC,2BAAmB;KAChC;KACA;KACA,SAAS;MACP,GAAG;MACH;MACD;KACF,CAAC;;AAGJ,SAAM,2BAA2B;AAEjC,OAAI,UACF,WAAU,OAAO;WAEZ,aAAa;AAGpB,YAF6B,uBAAuB,QAAQ,YAAY,UAAU,gCAE5D;AAEtB,SAAM;YACE;AACR,cAAW,MAAM;;;AAIrB,QACE,oBAAC;EACC,UAAU;EACD;EACF;EACP,iBAAiB;EACN;EACX,GAAI;GACJ"}

package/dist/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.js

@@ -0,0 +1,113 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Check_default from "../../primitives/Icons/Check.js";
+import ChevronDown_default from "../../primitives/Icons/ChevronDown.js";
+import BaseLanguageSwitcher_styles_default from "./BaseLanguageSwitcher.styles.js";
+import { useEffect, 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/LanguageSwitcher/BaseLanguageSwitcher.tsx
+/**
+* Pure-UI language switcher dropdown.
+* Accepts resolved `LanguageOption[]` (code + displayName + emoji) and delegates
+* language switching to the `onLanguageChange` callback.
+*
+* Supports render props for full UI customisation.
+*/
+const BaseLanguageSwitcher = ({ children, className, currentLanguage, isLoading = false, languages, onLanguageChange }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = BaseLanguageSwitcher_styles_default(theme, colorScheme);
+	const [isOpen, setIsOpen] = useState(false);
+	const hasMultipleLanguages = languages.length > 1;
+	useEffect(() => {
+		if (!hasMultipleLanguages && isOpen) setIsOpen(false);
+	}, [hasMultipleLanguages, isOpen]);
+	const { refs, floatingStyles, context } = useFloating({
+		middleware: [
+			offset(4),
+			flip(),
+			shift()
+		],
+		onOpenChange: setIsOpen,
+		open: isOpen,
+		whileElementsMounted: autoUpdate
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useClick(context, { enabled: hasMultipleLanguages }),
+		useDismiss(context, { enabled: hasMultipleLanguages }),
+		useRole(context, {
+			enabled: hasMultipleLanguages,
+			role: "listbox"
+		})
+	]);
+	const currentOption = languages.find((l) => l.code === currentLanguage);
+	if (children) return /* @__PURE__ */ jsx(Fragment, { children: children({
+		currentLanguage,
+		isLoading,
+		languages,
+		onLanguageChange
+	}) });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles["root"], className),
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: refs.setReference,
+			type: "button",
+			disabled: isLoading,
+			"aria-label": "Switch language",
+			...getReferenceProps(),
+			className: styles["trigger"],
+			children: [
+				currentOption && /* @__PURE__ */ jsx("span", {
+					className: styles["triggerEmoji"],
+					children: currentOption.emoji
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: styles["triggerLabel"],
+					children: currentOption?.displayName ?? currentLanguage
+				}),
+				hasMultipleLanguages && /* @__PURE__ */ jsx(ChevronDown_default, {})
+			]
+		}), isOpen && hasMultipleLanguages && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+			context,
+			modal: false,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: refs.setFloating,
+				style: floatingStyles,
+				...getFloatingProps(),
+				className: styles["content"],
+				role: "listbox",
+				"aria-label": "Select language",
+				children: languages.map((lang) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": lang.code === currentLanguage,
+					className: cx(styles["option"], lang.code === currentLanguage && styles["optionActive"]),
+					onClick: () => {
+						onLanguageChange(lang.code);
+						setIsOpen(false);
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: styles["optionEmoji"],
+							children: lang.emoji
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: styles["optionLabel"],
+							children: lang.displayName
+						}),
+						lang.code === currentLanguage && /* @__PURE__ */ jsx("span", {
+							className: styles["checkIcon"],
+							children: /* @__PURE__ */ jsx(Check_default, {})
+						})
+					]
+				}, lang.code))
+			})
+		}) })]
+	});
+};
+var BaseLanguageSwitcher_default = BaseLanguageSwitcher;
+
+//#endregion
+export { BaseLanguageSwitcher_default as default };
+//# sourceMappingURL=BaseLanguageSwitcher.js.map

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

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

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

@@ -0,0 +1,115 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.ts
+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: calc(${theme.vars.spacing.unit} * 0.5);
+      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: 120px;
+      font-size: 0.875rem;
+      color: ${theme.vars.colors.text.primary};
+
+      &:hover {
+        background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
+      }
+    `;
+	const triggerEmoji = css`
+      font-size: 1rem;
+      line-height: 1;
+    `;
+	const triggerLabel = css`
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 500;
+    `;
+	const content = css`
+      min-width: 200px;
+      max-width: 320px;
+      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;
+      padding: calc(${theme.vars.spacing.unit} * 0.5) 0;
+    `;
+	const option = css`
+      display: flex;
+      align-items: center;
+      gap: ${theme.vars.spacing.unit};
+      padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 1.5);
+      width: 100%;
+      border: none;
+      background-color: transparent;
+      cursor: pointer;
+      font-size: 0.875rem;
+      text-align: start;
+      color: ${theme.vars.colors.text.primary};
+      transition: background-color 0.15s ease-in-out;
+
+      &:hover {
+        background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
+      }
+    `;
+	const optionActive = css`
+      font-weight: 600;
+      color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};
+    `;
+	const optionEmoji = css`
+      font-size: 1rem;
+      line-height: 1;
+      flex-shrink: 0;
+    `;
+	const optionLabel = css`
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+	return {
+		checkIcon: css`
+      color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};
+      flex-shrink: 0;
+      margin-inline-start: auto;
+    `,
+		content,
+		option,
+		optionActive,
+		optionEmoji,
+		optionLabel,
+		root,
+		trigger,
+		triggerEmoji,
+		triggerLabel
+	};
+}, [
+	theme.vars.colors.background.surface,
+	theme.vars.colors.text.primary,
+	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,
+	theme.vars.colors.primary?.main,
+	colorScheme
+]);
+var BaseLanguageSwitcher_styles_default = useStyles;
+
+//#endregion
+export { BaseLanguageSwitcher_styles_default as default };
+//# sourceMappingURL=BaseLanguageSwitcher.styles.js.map

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

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

package/dist/components/presentation/LanguageSwitcher/LanguageSwitcher.js

@@ -0,0 +1,72 @@
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import BaseLanguageSwitcher_default from "./BaseLanguageSwitcher.js";
+import useFlowMeta_default from "../../../contexts/FlowMeta/useFlowMeta.js";
+import { resolveLocaleDisplayName, resolveLocaleEmoji } from "@thunderid/browser";
+import { useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/presentation/LanguageSwitcher/LanguageSwitcher.tsx
+/**
+* A v2 LanguageSwitcher component that reads available languages from `FlowMetaContext`
+* and switches both the UI language (via `I18nContext`) and the flow metadata translations
+* (by re-fetching `GET /flow/meta` with the new language).
+*
+* Must be rendered inside a `FlowMetaProvider`.
+*
+* @example
+* ```tsx
+* // Default dropdown UI
+* <LanguageSwitcher />
+*
+* // Custom UI with render props
+* <LanguageSwitcher>
+*   {({languages, currentLanguage, onLanguageChange}) => (
+*     <div>
+*       {languages.map(lang => (
+*         <button
+*           key={lang.code}
+*           onClick={() => onLanguageChange(lang.code)}
+*           style={{fontWeight: lang.code === currentLanguage ? 'bold' : 'normal'}}
+*         >
+*           {lang.emoji} {lang.displayName}
+*         </button>
+*       ))}
+*     </div>
+*   )}
+* </LanguageSwitcher>
+* ```
+*/
+const LanguageSwitcher = ({ children, className }) => {
+	const { meta, switchLanguage, isLoading } = useFlowMeta_default();
+	const { currentLanguage } = useTranslation_default();
+	const availableLanguageCodes = meta?.i18n?.languages ?? [];
+	const effectiveLanguageCodes = useMemo(() => availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage], [availableLanguageCodes, currentLanguage]);
+	const languages = useMemo(() => effectiveLanguageCodes.map((code) => ({
+		code,
+		displayName: resolveLocaleDisplayName(code, code) || code,
+		emoji: resolveLocaleEmoji(code)
+	})), [effectiveLanguageCodes]);
+	useEffect(() => {
+		if (availableLanguageCodes.length > 0 && !availableLanguageCodes.includes(currentLanguage)) switchLanguage(availableLanguageCodes[0]);
+	}, [
+		availableLanguageCodes,
+		currentLanguage,
+		switchLanguage
+	]);
+	const handleLanguageChange = (language) => {
+		if (language !== currentLanguage) switchLanguage(language);
+	};
+	return /* @__PURE__ */ jsx(BaseLanguageSwitcher_default, {
+		currentLanguage,
+		isLoading,
+		languages,
+		onLanguageChange: handleLanguageChange,
+		className,
+		children
+	});
+};
+var LanguageSwitcher_default = LanguageSwitcher;
+
+//#endregion
+export { LanguageSwitcher_default as default };
+//# sourceMappingURL=LanguageSwitcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.js","names":["LanguageSwitcher: FC<LanguageSwitcherProps>","useFlowMeta","useTranslation","availableLanguageCodes: string[]","effectiveLanguageCodes: string[]","languages: LanguageOption[]","BaseLanguageSwitcher"],"sources":["../../../../src/components/presentation/LanguageSwitcher/LanguageSwitcher.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, 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 {resolveLocaleDisplayName, resolveLocaleEmoji} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useEffect, useMemo} from 'react';\nimport BaseLanguageSwitcher, {LanguageOption, LanguageSwitcherRenderProps} from './BaseLanguageSwitcher';\nimport useFlowMeta from '../../../contexts/FlowMeta/useFlowMeta';\nimport useTranslation from '../../../hooks/useTranslation';\n\nexport type {LanguageOption, LanguageSwitcherRenderProps};\n\nexport interface LanguageSwitcherProps {\n  /**\n   * Render-props callback for fully custom UI.\n   *\n   * @example\n   * ```tsx\n   * <LanguageSwitcher>\n   *   {({languages, currentLanguage, onLanguageChange, isLoading}) => (\n   *     <select\n   *       value={currentLanguage}\n   *       disabled={isLoading}\n   *       onChange={e => onLanguageChange(e.target.value)}\n   *     >\n   *       {languages.map(l => (\n   *         <option key={l.code} value={l.code}>{l.emoji} {l.displayName}</option>\n   *       ))}\n   *     </select>\n   *   )}\n   * </LanguageSwitcher>\n   * ```\n   */\n  children?: (props: LanguageSwitcherRenderProps) => ReactNode;\n  /** Additional CSS class for the root element (default UI only) */\n  className?: string;\n}\n\n/**\n * A v2 LanguageSwitcher component that reads available languages from `FlowMetaContext`\n * and switches both the UI language (via `I18nContext`) and the flow metadata translations\n * (by re-fetching `GET /flow/meta` with the new language).\n *\n * Must be rendered inside a `FlowMetaProvider`.\n *\n * @example\n * ```tsx\n * // Default dropdown UI\n * <LanguageSwitcher />\n *\n * // Custom UI with render props\n * <LanguageSwitcher>\n *   {({languages, currentLanguage, onLanguageChange}) => (\n *     <div>\n *       {languages.map(lang => (\n *         <button\n *           key={lang.code}\n *           onClick={() => onLanguageChange(lang.code)}\n *           style={{fontWeight: lang.code === currentLanguage ? 'bold' : 'normal'}}\n *         >\n *           {lang.emoji} {lang.displayName}\n *         </button>\n *       ))}\n *     </div>\n *   )}\n * </LanguageSwitcher>\n * ```\n */\nconst LanguageSwitcher: FC<LanguageSwitcherProps> = ({children, className}: LanguageSwitcherProps): ReactElement => {\n  const {meta, switchLanguage, isLoading} = useFlowMeta();\n  const {currentLanguage} = useTranslation();\n\n  const availableLanguageCodes: string[] = meta?.i18n?.languages ?? [];\n  // Only fall back to the detected browser language when the server returns no configured languages.\n  // Do NOT inject currentLanguage unconditionally — a browser locale like \"en-GB\" must not appear\n  // in the picker when the server only supports \"en-US\".\n  const effectiveLanguageCodes: string[] = useMemo(\n    () => (availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage]),\n    [availableLanguageCodes, currentLanguage],\n  );\n\n  const languages: LanguageOption[] = useMemo(\n    () =>\n      effectiveLanguageCodes.map((code: string) => ({\n        code,\n        // Resolve each label in its own locale so option names stay stable across UI language switches.\n        displayName: resolveLocaleDisplayName(code, code) || code,\n        emoji: resolveLocaleEmoji(code),\n      })),\n    [effectiveLanguageCodes],\n  );\n\n  // If the detected language isn't supported by the server, fall back to the first available language.\n  useEffect(() => {\n    if (availableLanguageCodes.length > 0 && !availableLanguageCodes.includes(currentLanguage)) {\n      switchLanguage(availableLanguageCodes[0]);\n    }\n  }, [availableLanguageCodes, currentLanguage, switchLanguage]);\n\n  const handleLanguageChange = (language: string): void => {\n    if (language !== currentLanguage) {\n      switchLanguage(language);\n    }\n  };\n\n  return (\n    <BaseLanguageSwitcher\n      currentLanguage={currentLanguage}\n      isLoading={isLoading}\n      languages={languages}\n      onLanguageChange={handleLanguageChange}\n      className={className}\n    >\n      {children}\n    </BaseLanguageSwitcher>\n  );\n};\n\nexport default LanguageSwitcher;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,MAAMA,oBAA+C,EAAC,UAAU,gBAAoD;CAClH,MAAM,EAAC,MAAM,gBAAgB,cAAaC,qBAAa;CACvD,MAAM,EAAC,oBAAmBC,wBAAgB;CAE1C,MAAMC,yBAAmC,MAAM,MAAM,aAAa,EAAE;CAIpE,MAAMC,yBAAmC,cAChC,uBAAuB,SAAS,IAAI,yBAAyB,CAAC,gBAAgB,EACrF,CAAC,wBAAwB,gBAAgB,CAC1C;CAED,MAAMC,YAA8B,cAEhC,uBAAuB,KAAK,UAAkB;EAC5C;EAEA,aAAa,yBAAyB,MAAM,KAAK,IAAI;EACrD,OAAO,mBAAmB,KAAK;EAChC,EAAE,EACL,CAAC,uBAAuB,CACzB;AAGD,iBAAgB;AACd,MAAI,uBAAuB,SAAS,KAAK,CAAC,uBAAuB,SAAS,gBAAgB,CACxF,gBAAe,uBAAuB,GAAG;IAE1C;EAAC;EAAwB;EAAiB;EAAe,CAAC;CAE7D,MAAM,wBAAwB,aAA2B;AACvD,MAAI,aAAa,gBACf,gBAAe,SAAS;;AAI5B,QACE,oBAACC;EACkB;EACN;EACA;EACX,kBAAkB;EACP;EAEV;GACoB;;AAI3B,+BAAe"}