@thunderid/react 1.5.0 → 1.7.0

package/dist/components/auth/guards/SignedOut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedOut.js","names":["SignedOut: FC<PropsWithChildren<SignedOutProps>>","useThunderID"],"sources":["../../../../src/components/auth/guards/SignedOut.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, PropsWithChildren, ReactNode} from 'react';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\n\n/**\n * Props for the SignedOut component.\n */\nexport interface SignedOutProps {\n  /**\n   * Content to show when the user is signed in.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * A component that only renders its children when the user is signed out.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example\n * ```tsx\n * import { SignedOut } from '@thunderid/auth-react';\n *\n * const App = () => {\n *   return (\n *     <SignedOut fallback={<p>You are already signed in</p>}>\n *       <p>Please sign in to continue</p>\n *     </SignedOut>\n *   );\n * }\n * ```\n */\nconst SignedOut: FC<PropsWithChildren<SignedOutProps>> = ({\n  children,\n  fallback = null,\n}: PropsWithChildren<SignedOutProps>) => {\n  const {isSignedIn} = useThunderID();\n\n  if (!isSignedIn) {\n    return <>{children}</>;\n  }\n\n  return <>{fallback}</>;\n};\n\nSignedOut.displayName = 'SignedOut';\n\nexport default SignedOut;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,aAAoD,EACxD,UACA,WAAW,WAC4B;CACvC,MAAM,EAAC,eAAcC,sBAAc;AAEnC,KAAI,CAAC,WACH,QAAO,gCAAG,WAAY;AAGxB,QAAO,0CAAG,WAAY;;AAGxB,UAAU,cAAc;AAExB,wBAAe"}

package/dist/components/common/Attribution/Attribution.d.ts

@@ -0,0 +1,37 @@
+import { Preferences } from '@thunderid/browser';
+import { FC } from 'react';
+export interface AttributionProps {
+    /**
+     * How the credit is shown: a line of text, or a ribbon that hangs off the right edge of a card such
+     * as a sign-in box. The card the ribbon sits on must be `position: relative`.
+     * @default 'inline'
+     */
+    appearance?: 'inline' | 'ribbon';
+    className?: string;
+    /**
+     * Makes the attribution a link, for example to a page about how the app keeps accounts safe. It
+     * opens in a new tab.
+     */
+    href?: string;
+    preferences?: Preferences;
+    /**
+     * The words before the wordmark.
+     * @default 'secured'
+     */
+    variant?: 'powered' | 'secured';
+}
+/**
+ * A small "Secured by ThunderID" credit: a line of text for the footer of an app, or a ribbon on the
+ * edge of a sign-in card. The inline credit follows the theme's text colors, so it reads on light and
+ * dark surfaces.
+ *
+ * @example
+ * ```tsx
+ * <Attribution />
+ * <Attribution variant="powered" />
+ * <Attribution appearance="ribbon" variant="powered" />
+ * ```
+ */
+declare const Attribution: FC<AttributionProps>;
+export default Attribution;
+//# sourceMappingURL=Attribution.d.ts.map

package/dist/components/common/Attribution/Attribution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attribution.d.ts","sourceRoot":"","sources":["../../../../src/components/common/Attribution/Attribution.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,WAAW,EAAgC,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAC,EAAE,EAAe,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA4CrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/common/Attribution/Attribution.js

@@ -0,0 +1,63 @@
+import { cx } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Attribution_styles_default from "./Attribution.styles.js";
+import ThunderIDWordmark_default from "./ThunderIDWordmark.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/common/Attribution/Attribution.tsx
+/**
+* A small "Secured by ThunderID" credit: a line of text for the footer of an app, or a ribbon on the
+* edge of a sign-in card. The inline credit follows the theme's text colors, so it reads on light and
+* dark surfaces.
+*
+* @example
+* ```tsx
+* <Attribution />
+* <Attribution variant="powered" />
+* <Attribution appearance="ribbon" variant="powered" />
+* ```
+*/
+const Attribution = ({ appearance = "inline", className, href, preferences, variant = "secured" }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const { t } = useTranslation_default(preferences?.i18n);
+	const styles = Attribution_styles_default(theme, colorScheme);
+	const label = t(variant === "powered" ? "attribution.powered_by" : "attribution.secured_by");
+	const isRibbon = appearance === "ribbon";
+	const rootClassName = cx(withVendorCSSClassPrefix(bem("attribution")), isRibbon ? withVendorCSSClassPrefix(bem("attribution", null, "ribbon")) : void 0, isRibbon ? styles["ribbon"] : styles["root"], className);
+	const content = isRibbon ? /* @__PURE__ */ jsxs("span", {
+		className: styles["ribbonContent"],
+		children: [/* @__PURE__ */ jsx("span", {
+			className: styles["ribbonLabel"],
+			children: label
+		}), /* @__PURE__ */ jsx(ThunderIDWordmark_default, {
+			className: styles["ribbonWordmark"],
+			role: "img",
+			"aria-label": "ThunderID"
+		})]
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: styles["label"],
+		children: label
+	}), /* @__PURE__ */ jsx(ThunderIDWordmark_default, {
+		className: styles["wordmark"],
+		role: "img",
+		"aria-label": "ThunderID"
+	})] });
+	if (href) return /* @__PURE__ */ jsx("a", {
+		className: cx(rootClassName, isRibbon ? void 0 : styles["link"]),
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: content
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: rootClassName,
+		children: content
+	});
+};
+var Attribution_default = Attribution;
+
+//#endregion
+export { Attribution_default as default };
+//# sourceMappingURL=Attribution.js.map

package/dist/components/common/Attribution/Attribution.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attribution.js","names":["Attribution: FC<AttributionProps>","useTheme","useTranslation","styles: Record<string, string>","useStyles","label: string","isRibbon: boolean","rootClassName: string","content: ReactElement","ThunderIDWordmark"],"sources":["../../../../src/components/common/Attribution/Attribution.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Preferences, bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {FC, ReactElement} from 'react';\nimport useStyles from './Attribution.styles';\nimport ThunderIDWordmark from './ThunderIDWordmark';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\n\nexport interface AttributionProps {\n  /**\n   * How the credit is shown: a line of text, or a ribbon that hangs off the right edge of a card such\n   * as a sign-in box. The card the ribbon sits on must be `position: relative`.\n   * @default 'inline'\n   */\n  appearance?: 'inline' | 'ribbon';\n  className?: string;\n  /**\n   * Makes the attribution a link, for example to a page about how the app keeps accounts safe. It\n   * opens in a new tab.\n   */\n  href?: string;\n  preferences?: Preferences;\n  /**\n   * The words before the wordmark.\n   * @default 'secured'\n   */\n  variant?: 'powered' | 'secured';\n}\n\n/**\n * A small \"Secured by ThunderID\" credit: a line of text for the footer of an app, or a ribbon on the\n * edge of a sign-in card. The inline credit follows the theme's text colors, so it reads on light and\n * dark surfaces.\n *\n * @example\n * ```tsx\n * <Attribution />\n * <Attribution variant=\"powered\" />\n * <Attribution appearance=\"ribbon\" variant=\"powered\" />\n * ```\n */\nconst Attribution: FC<AttributionProps> = ({\n  appearance = 'inline',\n  className,\n  href,\n  preferences,\n  variant = 'secured',\n}: AttributionProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const {t} = useTranslation(preferences?.i18n);\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const label: string = t(variant === 'powered' ? 'attribution.powered_by' : 'attribution.secured_by');\n  const isRibbon: boolean = appearance === 'ribbon';\n  const rootClassName: string = cx(\n    withVendorCSSClassPrefix(bem('attribution')),\n    isRibbon ? withVendorCSSClassPrefix(bem('attribution', null, 'ribbon')) : undefined,\n    isRibbon ? styles['ribbon'] : styles['root'],\n    className,\n  );\n  const content: ReactElement = isRibbon ? (\n    <span className={styles['ribbonContent']}>\n      <span className={styles['ribbonLabel']}>{label}</span>\n      <ThunderIDWordmark className={styles['ribbonWordmark']} role=\"img\" aria-label=\"ThunderID\" />\n    </span>\n  ) : (\n    <>\n      <span className={styles['label']}>{label}</span>\n      <ThunderIDWordmark className={styles['wordmark']} role=\"img\" aria-label=\"ThunderID\" />\n    </>\n  );\n\n  if (href) {\n    return (\n      <a\n        className={cx(rootClassName, isRibbon ? undefined : styles['link'])}\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        {content}\n      </a>\n    );\n  }\n\n  return <span className={rootClassName}>{content}</span>;\n};\n\nexport default Attribution;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4CA,MAAMA,eAAqC,EACzC,aAAa,UACb,WACA,MACA,aACA,UAAU,gBAC0B;CACpC,MAAM,EAAC,OAAO,gBAAeC,kBAAU;CACvC,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAMC,SAAiCC,2BAAU,OAAO,YAAY;CACpE,MAAMC,QAAgB,EAAE,YAAY,YAAY,2BAA2B,yBAAyB;CACpG,MAAMC,WAAoB,eAAe;CACzC,MAAMC,gBAAwB,GAC5B,yBAAyB,IAAI,cAAc,CAAC,EAC5C,WAAW,yBAAyB,IAAI,eAAe,MAAM,SAAS,CAAC,GAAG,QAC1E,WAAW,OAAO,YAAY,OAAO,SACrC,UACD;CACD,MAAMC,UAAwB,WAC5B,qBAAC;EAAK,WAAW,OAAO;aACtB,oBAAC;GAAK,WAAW,OAAO;aAAiB;IAAa,EACtD,oBAACC;GAAkB,WAAW,OAAO;GAAmB,MAAK;GAAM,cAAW;IAAc;GACvF,GAEP,4CACE,oBAAC;EAAK,WAAW,OAAO;YAAW;GAAa,EAChD,oBAACA;EAAkB,WAAW,OAAO;EAAa,MAAK;EAAM,cAAW;GAAc,IACrF;AAGL,KAAI,KACF,QACE,oBAAC;EACC,WAAW,GAAG,eAAe,WAAW,SAAY,OAAO,QAAQ;EAC7D;EACN,QAAO;EACP,KAAI;YAEH;GACC;AAIR,QAAO,oBAAC;EAAK,WAAW;YAAgB;GAAe;;AAGzD,0BAAe"}

package/dist/components/common/Attribution/Attribution.styles.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@thunderid/browser';
+/**
+ * Creates the styles for the Attribution component.
+ *
+ * @param theme - The theme object containing design tokens.
+ * @param colorScheme - The current color scheme, used for memoization.
+ * @returns The CSS class names for each part of the attribution.
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => Record<string, string>;
+export default useStyles;
+//# sourceMappingURL=Attribution.styles.d.ts.map

package/dist/components/common/Attribution/Attribution.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attribution.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/common/Attribution/Attribution.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;GAMG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA2EzE,CAAC;AAEJ,eAAe,SAAS,CAAC"}

package/dist/components/common/Attribution/Attribution.styles.js

@@ -0,0 +1,86 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+
+//#region src/components/common/Attribution/Attribution.styles.ts
+/**
+* Creates the styles for the Attribution component.
+*
+* @param theme - The theme object containing design tokens.
+* @param colorScheme - The current color scheme, used for memoization.
+* @returns The CSS class names for each part of the attribution.
+*/
+const useStyles = (theme, colorScheme) => useMemo(() => ({
+	label: css`
+        white-space: nowrap;
+      `,
+	root: css`
+        display: inline-flex;
+        align-items: center;
+        gap: calc(${theme.vars.spacing.unit} * 0.75);
+        font-family: ${theme.vars.typography.fontFamily};
+        font-size: ${theme.vars.typography.fontSizes.xs};
+        color: ${theme.vars.colors.text.secondary};
+        text-decoration: none;
+        line-height: 1;
+      `,
+	link: css`
+        &:hover,
+        &:focus-visible {
+          color: ${theme.vars.colors.text.primary};
+        }
+      `,
+	ribbon: css`
+        position: absolute;
+        top: 36px;
+        right: -1px;
+        transform: translateX(100%);
+        width: 34px;
+        height: 128px;
+        overflow: hidden;
+        background: #12172a;
+        border: 1px solid ${theme.vars.colors.border};
+        border-left: none;
+        border-radius: 0 10px 10px 0;
+        box-shadow: ${theme.vars.shadows.medium};
+        text-decoration: none;
+      `,
+	ribbonContent: css`
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 112px;
+        height: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        white-space: nowrap;
+        transform: translate(-50%, -50%) rotate(90deg);
+        font-family: ${theme.vars.typography.fontFamily};
+      `,
+	ribbonLabel: css`
+        font-size: 9px;
+        font-weight: 500;
+        letter-spacing: 0.04em;
+        color: #8bf9fa;
+        opacity: 0.65;
+      `,
+	ribbonWordmark: css`
+        height: 11px;
+        width: auto;
+        display: block;
+        color: #ffffff;
+        opacity: 0.95;
+      `,
+	wordmark: css`
+        height: 1.15em;
+        width: auto;
+        display: block;
+        color: ${theme.vars.colors.text.primary};
+      `
+}), [theme, colorScheme]);
+var Attribution_styles_default = useStyles;
+
+//#endregion
+export { Attribution_styles_default as default };
+//# sourceMappingURL=Attribution.styles.js.map

package/dist/components/common/Attribution/Attribution.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attribution.styles.js","names":[],"sources":["../../../../src/components/common/Attribution/Attribution.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates the styles for the Attribution component.\n *\n * @param theme - The theme object containing design tokens.\n * @param colorScheme - The current color scheme, used for memoization.\n * @returns The CSS class names for each part of the attribution.\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(\n    () => ({\n      label: css`\n        white-space: nowrap;\n      `,\n      root: css`\n        display: inline-flex;\n        align-items: center;\n        gap: calc(${theme.vars.spacing.unit} * 0.75);\n        font-family: ${theme.vars.typography.fontFamily};\n        font-size: ${theme.vars.typography.fontSizes.xs};\n        color: ${theme.vars.colors.text.secondary};\n        text-decoration: none;\n        line-height: 1;\n      `,\n      link: css`\n        &:hover,\n        &:focus-visible {\n          color: ${theme.vars.colors.text.primary};\n        }\n      `,\n      // The ribbon: a slim tab that hangs off the right edge of a card. The card must be\n      // `position: relative`.\n      ribbon: css`\n        position: absolute;\n        top: 36px;\n        right: -1px;\n        transform: translateX(100%);\n        width: 34px;\n        height: 128px;\n        overflow: hidden;\n        background: #12172a;\n        border: 1px solid ${theme.vars.colors.border};\n        border-left: none;\n        border-radius: 0 10px 10px 0;\n        box-shadow: ${theme.vars.shadows.medium};\n        text-decoration: none;\n      `,\n      ribbonContent: css`\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 112px;\n        height: 14px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        white-space: nowrap;\n        transform: translate(-50%, -50%) rotate(90deg);\n        font-family: ${theme.vars.typography.fontFamily};\n      `,\n      ribbonLabel: css`\n        font-size: 9px;\n        font-weight: 500;\n        letter-spacing: 0.04em;\n        color: #8bf9fa;\n        opacity: 0.65;\n      `,\n      ribbonWordmark: css`\n        height: 11px;\n        width: auto;\n        display: block;\n        color: #ffffff;\n        opacity: 0.95;\n      `,\n      wordmark: css`\n        height: 1.15em;\n        width: auto;\n        display: block;\n        color: ${theme.vars.colors.text.primary};\n      `,\n    }),\n    [theme, colorScheme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAa,OAAc,gBAC/B,eACS;CACL,OAAO,GAAG;;;CAGV,MAAM,GAAG;;;oBAGK,MAAM,KAAK,QAAQ,KAAK;uBACrB,MAAM,KAAK,WAAW,WAAW;qBACnC,MAAM,KAAK,WAAW,UAAU,GAAG;iBACvC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,MAAM,GAAG;;;mBAGI,MAAM,KAAK,OAAO,KAAK,QAAQ;;;CAK5C,QAAQ,GAAG;;;;;;;;;4BASW,MAAM,KAAK,OAAO,OAAO;;;sBAG/B,MAAM,KAAK,QAAQ,OAAO;;;CAG1C,eAAe,GAAG;;;;;;;;;;;;uBAYD,MAAM,KAAK,WAAW,WAAW;;CAElD,aAAa,GAAG;;;;;;;CAOhB,gBAAgB,GAAG;;;;;;;CAOnB,UAAU,GAAG;;;;iBAIF,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAE3C,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,iCAAe"}

package/dist/components/common/Attribution/ThunderIDWordmark.d.ts

@@ -0,0 +1,8 @@
+import type { FC, SVGProps } from 'react';
+/**
+ * The ThunderID wordmark, sized by its height. The mark keeps its brand blue; the lettering follows
+ * the surrounding text color, so it reads on light and dark surfaces alike.
+ */
+declare const ThunderIDWordmark: FC<SVGProps<SVGSVGElement>>;
+export default ThunderIDWordmark;
+//# sourceMappingURL=ThunderIDWordmark.d.ts.map

package/dist/components/common/Attribution/ThunderIDWordmark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThunderIDWordmark.d.ts","sourceRoot":"","sources":["../../../../src/components/common/Attribution/ThunderIDWordmark.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,EAAE,EAAgB,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEtD;;;GAGG;AACH,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,CAMlD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/common/Attribution/ThunderIDWordmark.js

@@ -0,0 +1,23 @@
+import { ThunderIDWordmark } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/common/Attribution/ThunderIDWordmark.tsx
+/**
+* The ThunderID wordmark, sized by its height. The mark keeps its brand blue; the lettering follows
+* the surrounding text color, so it reads on light and dark surfaces alike.
+*/
+const ThunderIDWordmark$1 = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: ThunderIDWordmark.viewBox,
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: ThunderIDWordmark.paths.map(({ accent, d }) => /* @__PURE__ */ jsx("path", {
+		d,
+		fill: accent ? ThunderIDWordmark.accentColor : "currentColor"
+	}, d.slice(0, 24)))
+});
+var ThunderIDWordmark_default = ThunderIDWordmark$1;
+
+//#endregion
+export { ThunderIDWordmark_default as default };
+//# sourceMappingURL=ThunderIDWordmark.js.map

package/dist/components/common/Attribution/ThunderIDWordmark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThunderIDWordmark.js","names":["ThunderIDWordmark: FC<SVGProps<SVGSVGElement>>","WORDMARK","ThunderIDWordmark"],"sources":["../../../../src/components/common/Attribution/ThunderIDWordmark.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {ThunderIDWordmark as WORDMARK, type ThunderIDWordmarkPath} from '@thunderid/browser';\nimport type {FC, ReactElement, SVGProps} from 'react';\n\n/**\n * The ThunderID wordmark, sized by its height. The mark keeps its brand blue; the lettering follows\n * the surrounding text color, so it reads on light and dark surfaces alike.\n */\nconst ThunderIDWordmark: FC<SVGProps<SVGSVGElement>> = (props: SVGProps<SVGSVGElement>): ReactElement => (\n  <svg viewBox={WORDMARK.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    {WORDMARK.paths.map(({accent, d}: ThunderIDWordmarkPath) => (\n      <path key={d.slice(0, 24)} d={d} fill={accent ? WORDMARK.accentColor : 'currentColor'} />\n    ))}\n  </svg>\n);\n\nexport default ThunderIDWordmark;\n"],"mappings":";;;;;;;;AAUA,MAAMA,uBAAkD,UACtD,oBAAC;CAAI,SAASC,kBAAS;CAAS,MAAK;CAAO,OAAM;CAA6B,GAAI;WAChFA,kBAAS,MAAM,KAAK,EAAC,QAAQ,QAC5B,oBAAC;EAA6B;EAAG,MAAM,SAASA,kBAAS,cAAc;IAA5D,EAAE,MAAM,GAAG,GAAG,CAAgE,CACzF;EACE;AAGR,gCAAeC"}

package/dist/components/common/LanguageSwitcher/BaseLanguageSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseLanguageSwitcher.d.ts","sourceRoot":"","sources":["../../../../src/components/common/LanguageSwitcher/BaseLanguageSwitcher.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAsB,MAAM,OAAO,CAAC;AAOvE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,WAAW,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,yCAAyC;IACzC,eAAe,EAAE,MAAM,CAAC;IACxB,+CAA+C;IAC/C,SAAS,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,kDAAkD;IAClD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,WAAW,yBAAyB;IACxC;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,SAAS,CAAC;IAC7D,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,eAAe,EAAE,MAAM,CAAC;IACxB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,8CAA8C;IAC9C,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED;;;;;;GAMG;AACH,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAmGvD,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,113 @@
+import { cx } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Check_default from "../../primitives/Icons/Check.js";
+import BaseLanguageSwitcher_styles_default from "./BaseLanguageSwitcher.styles.js";
+import ChevronDown_default from "../../primitives/Icons/ChevronDown.js";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+
+//#region src/components/common/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$1, { 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/common/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/common/LanguageSwitcher/BaseLanguageSwitcher.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\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 {cx} from '../../../styles/emotion';\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":";;;;;;;;;;;;;;;;;AAqFA,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,4CACG,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/common/LanguageSwitcher/BaseLanguageSwitcher.styles.d.ts.map

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

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

@@ -0,0 +1,115 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+
+//#region src/components/common/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/common/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/common/LanguageSwitcher/BaseLanguageSwitcher.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\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":";;;;AAOA,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/common/LanguageSwitcher/LanguageSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.d.ts","sourceRoot":"","sources":["../../../../src/components/common/LanguageSwitcher/LanguageSwitcher.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAqB,MAAM,OAAO,CAAC;AACtE,OAA6B,EAAC,cAAc,EAAE,2BAA2B,EAAC,MAAM,wBAAwB,CAAC;AAIzG,YAAY,EAAC,cAAc,EAAE,2BAA2B,EAAC,CAAC;AAE1D,MAAM,WAAW,qBAAqB;IACpC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,SAAS,CAAC;IAC7D,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA8E/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/common/LanguageSwitcher/LanguageSwitcher.js

@@ -0,0 +1,80 @@
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import BaseLanguageSwitcher_default from "./BaseLanguageSwitcher.js";
+import useFlowMeta_default from "../../../contexts/FlowMeta/useFlowMeta.js";
+import { getBaseLanguage, normalizeLocaleTag, resolveLocaleDisplayName, resolveLocaleEmoji } from "@thunderid/browser";
+import { useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/common/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) return;
+		const currentBase = getBaseLanguage(currentLanguage);
+		if (availableLanguageCodes.some((code) => getBaseLanguage(code) === currentBase)) return;
+		switchLanguage(availableLanguageCodes.find((code) => getBaseLanguage(code) === "en") ?? availableLanguageCodes[0]);
+	}, [
+		availableLanguageCodes,
+		currentLanguage,
+		switchLanguage
+	]);
+	const displayLanguage = useMemo(() => {
+		const exactMatch = languages.find((option) => normalizeLocaleTag(option.code) === normalizeLocaleTag(currentLanguage));
+		if (exactMatch) return exactMatch.code;
+		return languages.find((option) => getBaseLanguage(option.code) === getBaseLanguage(currentLanguage))?.code ?? currentLanguage;
+	}, [languages, currentLanguage]);
+	const handleLanguageChange = (language) => {
+		if (language !== currentLanguage) switchLanguage(language);
+	};
+	return /* @__PURE__ */ jsx(BaseLanguageSwitcher_default, {
+		currentLanguage: displayLanguage,
+		isLoading,
+		languages,
+		onLanguageChange: handleLanguageChange,
+		className,
+		children
+	});
+};
+var LanguageSwitcher_default = LanguageSwitcher;
+
+//#endregion
+export { LanguageSwitcher_default as default };
+//# sourceMappingURL=LanguageSwitcher.js.map