@thunderid/react 0.6.1 → 0.8.0

package/dist/cjs/components/adapters/ImageComponent.cjs

@@ -24,7 +24,8 @@ const ImageComponent = ({ component }) => {
 		margin: variant === "image_block" ? "1rem auto" : "0"
 	};
 	if (!src) return null;
-	if ((0, __thunderid_browser.isEmojiUri)(src)) {
+	const resolvedIcon = (0, __thunderid_browser.resolveLogoUri)(src, alt);
+	if (resolvedIcon.kind === "emoji") {
 		const toCSSLength = (value) => /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value;
 		const cssWidth = toCSSLength(width);
 		const cssHeight = toCSSLength(height);
@@ -51,7 +52,7 @@ const ImageComponent = ({ component }) => {
 						fontSize: "100cqmin",
 						lineHeight: 1
 					},
-					children: (0, __thunderid_browser.extractEmojiFromUri)(src)
+					children: resolvedIcon.glyph
 				})
 			})
 		}, component.id);
@@ -59,7 +60,7 @@ const ImageComponent = ({ component }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		style: { textAlign: "center" },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-			src,
+			src: resolvedIcon.imgSrc,
 			alt,
 			height,
 			width,

package/dist/cjs/components/adapters/ImageComponent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageComponent.cjs","names":["ImageComponent: FC<AdapterProps>","useTheme","config: Record<string, unknown>","src: string","alt: string","width: string","height: string","variant: string","imageStyle: CSSProperties","cssWidth: string","cssHeight: string","containerHeight: string"],"sources":["../../../../src/components/adapters/ImageComponent.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 {extractEmojiFromUri, isEmojiUri} from '@thunderid/browser';\nimport {CSSProperties, FC, SyntheticEvent} from 'react';\nimport useTheme from '../../contexts/Theme/useTheme';\nimport {AdapterProps} from '../../models/adapters';\n\nconst DEFAULT_EMOJI_CONTAINER_HEIGHT = '4em';\n\n/**\n * Image component for sign-up forms.\n */\nconst ImageComponent: FC<AdapterProps> = ({component}: AdapterProps) => {\n  const {theme} = useTheme();\n  const config: Record<string, unknown> = component.config || {};\n  const src: string = (config['src'] as string) || '';\n  const alt: string = (config['alt'] as string) || (config['label'] as string) || 'Image';\n  const width: string = (config['width'] as string) || '100%';\n  const height: string = (config['height'] as string) || 'auto';\n  const variant: string = component.variant?.toLowerCase() || 'image_block';\n\n  const imageStyle: CSSProperties = {\n    borderRadius: theme.vars.borderRadius.small,\n    display: 'block',\n    margin: variant === 'image_block' ? '1rem auto' : '0',\n  };\n\n  if (!src) {\n    return null;\n  }\n\n  if (isEmojiUri(src)) {\n    // Bare numbers (e.g. \"48\") are valid for <img> width/height attributes but\n    // are unit-less and ignored as CSS properties — normalize them to px.\n    const toCSSLength = (value: string): string => (/^\\d+(\\.\\d+)?$/.test(value) ? `${value}px` : value);\n    const cssWidth: string = toCSSLength(width);\n    const cssHeight: string = toCSSLength(height);\n\n    // container-type: size needs a concrete block dimension — percentage and\n    // 'auto' values both collapse to 0 when the parent has no defined height.\n    // Priority: explicit height → explicit width (square) → fallback constant.\n    const isConcrete = (v: string): boolean => v !== 'auto' && !v.endsWith('%');\n    let containerHeight: string;\n    if (isConcrete(cssHeight)) {\n      containerHeight = cssHeight;\n    } else if (isConcrete(cssWidth)) {\n      containerHeight = cssWidth;\n    } else {\n      containerHeight = DEFAULT_EMOJI_CONTAINER_HEIGHT;\n    }\n\n    return (\n      <div key={component.id} style={{textAlign: 'center'}}>\n        {/*\n         * container-type: size lets the inner span use cqmin (= min(cqw, cqh))\n         * so the emoji font-size tracks the rendered container dimensions\n         * rather than the parent's font-size.\n         */}\n        <span\n          style={{\n            ...imageStyle,\n            containerType: 'size',\n            display: 'inline-grid',\n            height: containerHeight,\n            placeItems: 'center',\n            width: cssWidth,\n          }}\n        >\n          <span aria-label={alt} role=\"img\" style={{fontSize: '100cqmin', lineHeight: 1}}>\n            {extractEmojiFromUri(src)}\n          </span>\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div key={component.id} style={{textAlign: 'center'}}>\n      <img\n        src={src}\n        alt={alt}\n        height={height}\n        width={width}\n        style={imageStyle}\n        onError={(e: SyntheticEvent<HTMLImageElement>): void => {\n          // Hide broken images\n          e.currentTarget.style.display = 'none';\n        }}\n      />\n    </div>\n  );\n};\n\nexport default ImageComponent;\n"],"mappings":";;;;;;;;AAuBA,MAAM,iCAAiC;;;;AAKvC,MAAMA,kBAAoC,EAAC,gBAA6B;CACtE,MAAM,EAAC,UAASC,0BAAU;CAC1B,MAAMC,SAAkC,UAAU,UAAU,EAAE;CAC9D,MAAMC,MAAe,OAAO,UAAqB;CACjD,MAAMC,MAAe,OAAO,UAAsB,OAAO,YAAuB;CAChF,MAAMC,QAAiB,OAAO,YAAuB;CACrD,MAAMC,SAAkB,OAAO,aAAwB;CACvD,MAAMC,UAAkB,UAAU,SAAS,aAAa,IAAI;CAE5D,MAAMC,aAA4B;EAChC,cAAc,MAAM,KAAK,aAAa;EACtC,SAAS;EACT,QAAQ,YAAY,gBAAgB,cAAc;EACnD;AAED,KAAI,CAAC,IACH,QAAO;AAGT,yCAAe,IAAI,EAAE;EAGnB,MAAM,eAAe,UAA2B,gBAAgB,KAAK,MAAM,GAAG,GAAG,MAAM,MAAM;EAC7F,MAAMC,WAAmB,YAAY,MAAM;EAC3C,MAAMC,YAAoB,YAAY,OAAO;EAK7C,MAAM,cAAc,MAAuB,MAAM,UAAU,CAAC,EAAE,SAAS,IAAI;EAC3E,IAAIC;AACJ,MAAI,WAAW,UAAU,CACvB,mBAAkB;WACT,WAAW,SAAS,CAC7B,mBAAkB;MAElB,mBAAkB;AAGpB,SACE,2CAAC;GAAuB,OAAO,EAAC,WAAW,UAAS;aAMlD,2CAAC;IACC,OAAO;KACL,GAAG;KACH,eAAe;KACf,SAAS;KACT,QAAQ;KACR,YAAY;KACZ,OAAO;KACR;cAED,2CAAC;KAAK,cAAY;KAAK,MAAK;KAAM,OAAO;MAAC,UAAU;MAAY,YAAY;MAAE;4DACvD,IAAI;MACpB;KACF;KAnBC,UAAU,GAoBd;;AAIV,QACE,2CAAC;EAAuB,OAAO,EAAC,WAAW,UAAS;YAClD,2CAAC;GACM;GACA;GACG;GACD;GACP,OAAO;GACP,UAAU,MAA8C;AAEtD,MAAE,cAAc,MAAM,UAAU;;IAElC;IAXM,UAAU,GAYd;;AAIV,6BAAe"}
+{"version":3,"file":"ImageComponent.cjs","names":["ImageComponent: FC<AdapterProps>","useTheme","config: Record<string, unknown>","src: string","alt: string","width: string","height: string","variant: string","imageStyle: CSSProperties","resolvedIcon: ResolvedLogo","cssWidth: string","cssHeight: string","containerHeight: string"],"sources":["../../../../src/components/adapters/ImageComponent.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 {resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {CSSProperties, FC, SyntheticEvent} from 'react';\nimport useTheme from '../../contexts/Theme/useTheme';\nimport {AdapterProps} from '../../models/adapters';\n\nconst DEFAULT_EMOJI_CONTAINER_HEIGHT = '4em';\n\n/**\n * Image component for sign-up forms.\n */\nconst ImageComponent: FC<AdapterProps> = ({component}: AdapterProps) => {\n  const {theme} = useTheme();\n  const config: Record<string, unknown> = component.config || {};\n  const src: string = (config['src'] as string) || '';\n  const alt: string = (config['alt'] as string) || (config['label'] as string) || 'Image';\n  const width: string = (config['width'] as string) || '100%';\n  const height: string = (config['height'] as string) || 'auto';\n  const variant: string = component.variant?.toLowerCase() || 'image_block';\n\n  const imageStyle: CSSProperties = {\n    borderRadius: theme.vars.borderRadius.small,\n    display: 'block',\n    margin: variant === 'image_block' ? '1rem auto' : '0',\n  };\n\n  if (!src) {\n    return null;\n  }\n\n  const resolvedIcon: ResolvedLogo = resolveLogoUri(src, alt);\n\n  if (resolvedIcon.kind === 'emoji') {\n    // Bare numbers (e.g. \"48\") are valid for <img> width/height attributes but\n    // are unit-less and ignored as CSS properties — normalize them to px.\n    const toCSSLength = (value: string): string => (/^\\d+(\\.\\d+)?$/.test(value) ? `${value}px` : value);\n    const cssWidth: string = toCSSLength(width);\n    const cssHeight: string = toCSSLength(height);\n\n    // container-type: size needs a concrete block dimension — percentage and\n    // 'auto' values both collapse to 0 when the parent has no defined height.\n    // Priority: explicit height → explicit width (square) → fallback constant.\n    const isConcrete = (v: string): boolean => v !== 'auto' && !v.endsWith('%');\n    let containerHeight: string;\n    if (isConcrete(cssHeight)) {\n      containerHeight = cssHeight;\n    } else if (isConcrete(cssWidth)) {\n      containerHeight = cssWidth;\n    } else {\n      containerHeight = DEFAULT_EMOJI_CONTAINER_HEIGHT;\n    }\n\n    return (\n      <div key={component.id} style={{textAlign: 'center'}}>\n        {/*\n         * container-type: size lets the inner span use cqmin (= min(cqw, cqh))\n         * so the emoji font-size tracks the rendered container dimensions\n         * rather than the parent's font-size.\n         */}\n        <span\n          style={{\n            ...imageStyle,\n            containerType: 'size',\n            display: 'inline-grid',\n            height: containerHeight,\n            placeItems: 'center',\n            width: cssWidth,\n          }}\n        >\n          <span aria-label={alt} role=\"img\" style={{fontSize: '100cqmin', lineHeight: 1}}>\n            {resolvedIcon.glyph}\n          </span>\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div key={component.id} style={{textAlign: 'center'}}>\n      <img\n        src={resolvedIcon.imgSrc}\n        alt={alt}\n        height={height}\n        width={width}\n        style={imageStyle}\n        onError={(e: SyntheticEvent<HTMLImageElement>): void => {\n          // Hide broken images\n          e.currentTarget.style.display = 'none';\n        }}\n      />\n    </div>\n  );\n};\n\nexport default ImageComponent;\n"],"mappings":";;;;;;;;AAuBA,MAAM,iCAAiC;;;;AAKvC,MAAMA,kBAAoC,EAAC,gBAA6B;CACtE,MAAM,EAAC,UAASC,0BAAU;CAC1B,MAAMC,SAAkC,UAAU,UAAU,EAAE;CAC9D,MAAMC,MAAe,OAAO,UAAqB;CACjD,MAAMC,MAAe,OAAO,UAAsB,OAAO,YAAuB;CAChF,MAAMC,QAAiB,OAAO,YAAuB;CACrD,MAAMC,SAAkB,OAAO,aAAwB;CACvD,MAAMC,UAAkB,UAAU,SAAS,aAAa,IAAI;CAE5D,MAAMC,aAA4B;EAChC,cAAc,MAAM,KAAK,aAAa;EACtC,SAAS;EACT,QAAQ,YAAY,gBAAgB,cAAc;EACnD;AAED,KAAI,CAAC,IACH,QAAO;CAGT,MAAMC,uDAA4C,KAAK,IAAI;AAE3D,KAAI,aAAa,SAAS,SAAS;EAGjC,MAAM,eAAe,UAA2B,gBAAgB,KAAK,MAAM,GAAG,GAAG,MAAM,MAAM;EAC7F,MAAMC,WAAmB,YAAY,MAAM;EAC3C,MAAMC,YAAoB,YAAY,OAAO;EAK7C,MAAM,cAAc,MAAuB,MAAM,UAAU,CAAC,EAAE,SAAS,IAAI;EAC3E,IAAIC;AACJ,MAAI,WAAW,UAAU,CACvB,mBAAkB;WACT,WAAW,SAAS,CAC7B,mBAAkB;MAElB,mBAAkB;AAGpB,SACE,2CAAC;GAAuB,OAAO,EAAC,WAAW,UAAS;aAMlD,2CAAC;IACC,OAAO;KACL,GAAG;KACH,eAAe;KACf,SAAS;KACT,QAAQ;KACR,YAAY;KACZ,OAAO;KACR;cAED,2CAAC;KAAK,cAAY;KAAK,MAAK;KAAM,OAAO;MAAC,UAAU;MAAY,YAAY;MAAE;eAC3E,aAAa;MACT;KACF;KAnBC,UAAU,GAoBd;;AAIV,QACE,2CAAC;EAAuB,OAAO,EAAC,WAAW,UAAS;YAClD,2CAAC;GACC,KAAK,aAAa;GACb;GACG;GACD;GACP,OAAO;GACP,UAAU,MAA8C;AAEtD,MAAE,cAAc,MAAM,UAAU;;IAElC;IAXM,UAAU,GAYd;;AAIV,6BAAe"}

package/dist/cjs/components/presentation/UserAvatar/BaseUserAvatar.cjs

@@ -1,5 +1,9 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
 const require_Avatar = require('../../primitives/Avatar/Avatar.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
@@ -39,11 +43,15 @@ const resolveName = (user) => {
 * @example
 * ```tsx
 * <BaseUserAvatar user={user} size={48} />
+* <BaseUserAvatar user={null} anonymousAvatarSeed={sessionId} size={48} />
 * ```
 */
-const BaseUserAvatar = ({ user, size = 40, className }) => {
+const BaseUserAvatar = ({ user, size = 40, className, anonymousAvatarSeed = void 0 }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
-		imageUrl: user ? resolvePicture(user) : void 0,
+		imageUrl: (0, react.useMemo)(() => {
+			if (user) return resolvePicture(user);
+			return `avatar:variant=anonymous_animal,content=${(0, __thunderid_browser.pickAnonymousAvatarName)(anonymousAvatarSeed)}`;
+		}, [user, anonymousAvatarSeed]),
 		name: user ? resolveName(user) : void 0,
 		size,
 		className

package/dist/cjs/components/presentation/UserAvatar/BaseUserAvatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserAvatar.cjs","names":["val: unknown","given: string","family: string","BaseUserAvatar: FC<BaseUserAvatarProps>","Avatar"],"sources":["../../../../../src/components/presentation/UserAvatar/BaseUserAvatar.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 {User} from '@thunderid/browser';\nimport {FC, JSX} from 'react';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\n\nexport interface BaseUserAvatarProps {\n  /**\n   * Optional CSS class name for the avatar container.\n   */\n  className?: string;\n  /**\n   * Size of the avatar in pixels.\n   * @default 40\n   */\n  size?: number;\n  /**\n   * The user object. When provided, the avatar derives the image URL and\n   * initials from the user's profile fields automatically.\n   */\n  user: User | null;\n}\n\n/**\n * Resolves the profile picture URL from common user claim fields.\n */\nconst resolvePicture = (user: User): string | undefined => {\n  for (const key of ['picture', 'profileUrl', 'profile', 'URL', 'avatarUrl', 'avatar']) {\n    const val: unknown = user[key];\n    if (typeof val === 'string' && val) return val;\n  }\n  return undefined;\n};\n\n/**\n * Resolves a display name suitable for generating avatar initials.\n */\nconst resolveName = (user: User): string | undefined => {\n  const given: string = user['givenName'] || user['given_name'] || '';\n  const family: string = user['familyName'] || user['family_name'] || '';\n  if (given && family) return `${given} ${family}`;\n\n  return user['displayName'] || user['name'] || given || user['username'] || user['email'] || undefined;\n};\n\n/**\n * Base `UserAvatar` component. Renders an avatar derived from a user object\n * without any context dependency — pass the `user` prop explicitly.\n *\n * For the context-aware version that reads the signed-in user automatically,\n * use `UserAvatar`.\n *\n * @example\n * ```tsx\n * <BaseUserAvatar user={user} size={48} />\n * ```\n */\nconst BaseUserAvatar: FC<BaseUserAvatarProps> = ({user, size = 40, className}: BaseUserAvatarProps): JSX.Element => {\n  const imageUrl: string | undefined = user ? resolvePicture(user) : undefined;\n  const name: string | undefined = user ? resolveName(user) : undefined;\n\n  return <Avatar imageUrl={imageUrl} name={name} size={size} className={className} />;\n};\n\nBaseUserAvatar.displayName = 'BaseUserAvatar';\n\nexport default BaseUserAvatar;\n"],"mappings":";;;;;;;;;AA0CA,MAAM,kBAAkB,SAAmC;AACzD,MAAK,MAAM,OAAO;EAAC;EAAW;EAAc;EAAW;EAAO;EAAa;EAAS,EAAE;EACpF,MAAMA,MAAe,KAAK;AAC1B,MAAI,OAAO,QAAQ,YAAY,IAAK,QAAO;;;;;;AAQ/C,MAAM,eAAe,SAAmC;CACtD,MAAMC,QAAgB,KAAK,gBAAgB,KAAK,iBAAiB;CACjE,MAAMC,SAAiB,KAAK,iBAAiB,KAAK,kBAAkB;AACpE,KAAI,SAAS,OAAQ,QAAO,GAAG,MAAM,GAAG;AAExC,QAAO,KAAK,kBAAkB,KAAK,WAAW,SAAS,KAAK,eAAe,KAAK,YAAY;;;;;;;;;;;;;;AAe9F,MAAMC,kBAA2C,EAAC,MAAM,OAAO,IAAI,gBAAiD;AAIlH,QAAO,2CAACC;EAAO,UAHsB,OAAO,eAAe,KAAK,GAAG;EAGhC,MAFF,OAAO,YAAY,KAAK,GAAG;EAEP;EAAiB;GAAa;;AAGrF,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"BaseUserAvatar.cjs","names":["val: unknown","given: string","family: string","BaseUserAvatar: FC<BaseUserAvatarProps>","Avatar"],"sources":["../../../../../src/components/presentation/UserAvatar/BaseUserAvatar.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 {pickAnonymousAvatarName, User} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\n\nexport interface BaseUserAvatarProps {\n  /**\n   * Seed used to deterministically pick the anonymous avatar shown when `user` is `null`\n   * (e.g. a session or device identifier, so the same anonymous session keeps the same\n   * avatar across renders). Falls back to a random pick when omitted.\n   */\n  anonymousAvatarSeed?: string;\n  /**\n   * Optional CSS class name for the avatar container.\n   */\n  className?: string;\n  /**\n   * Size of the avatar in pixels.\n   * @default 40\n   */\n  size?: number;\n  /**\n   * The user object. When provided, the avatar derives the image URL and\n   * initials from the user's profile fields automatically. When `null`, a\n   * curated anonymous avatar is shown instead.\n   */\n  user: User | null;\n}\n\n/**\n * Resolves the profile picture URL from common user claim fields.\n */\nconst resolvePicture = (user: User): string | undefined => {\n  for (const key of ['picture', 'profileUrl', 'profile', 'URL', 'avatarUrl', 'avatar']) {\n    const val: unknown = user[key];\n    if (typeof val === 'string' && val) return val;\n  }\n  return undefined;\n};\n\n/**\n * Resolves a display name suitable for generating avatar initials.\n */\nconst resolveName = (user: User): string | undefined => {\n  const given: string = user['givenName'] || user['given_name'] || '';\n  const family: string = user['familyName'] || user['family_name'] || '';\n  if (given && family) return `${given} ${family}`;\n\n  return user['displayName'] || user['name'] || given || user['username'] || user['email'] || undefined;\n};\n\n/**\n * Base `UserAvatar` component. Renders an avatar derived from a user object\n * without any context dependency — pass the `user` prop explicitly.\n *\n * For the context-aware version that reads the signed-in user automatically,\n * use `UserAvatar`.\n *\n * @example\n * ```tsx\n * <BaseUserAvatar user={user} size={48} />\n * <BaseUserAvatar user={null} anonymousAvatarSeed={sessionId} size={48} />\n * ```\n */\nconst BaseUserAvatar: FC<BaseUserAvatarProps> = ({\n  user,\n  size = 40,\n  className,\n  anonymousAvatarSeed = undefined,\n}: BaseUserAvatarProps): JSX.Element => {\n  const imageUrl: string | undefined = useMemo(() => {\n    if (user) return resolvePicture(user);\n    return `avatar:variant=anonymous_animal,content=${pickAnonymousAvatarName(anonymousAvatarSeed)}`;\n  }, [user, anonymousAvatarSeed]);\n  const name: string | undefined = user ? resolveName(user) : undefined;\n\n  return <Avatar imageUrl={imageUrl} name={name} size={size} className={className} />;\n};\n\nBaseUserAvatar.displayName = 'BaseUserAvatar';\n\nexport default BaseUserAvatar;\n"],"mappings":";;;;;;;;;;;;;AAiDA,MAAM,kBAAkB,SAAmC;AACzD,MAAK,MAAM,OAAO;EAAC;EAAW;EAAc;EAAW;EAAO;EAAa;EAAS,EAAE;EACpF,MAAMA,MAAe,KAAK;AAC1B,MAAI,OAAO,QAAQ,YAAY,IAAK,QAAO;;;;;;AAQ/C,MAAM,eAAe,SAAmC;CACtD,MAAMC,QAAgB,KAAK,gBAAgB,KAAK,iBAAiB;CACjE,MAAMC,SAAiB,KAAK,iBAAiB,KAAK,kBAAkB;AACpE,KAAI,SAAS,OAAQ,QAAO,GAAG,MAAM,GAAG;AAExC,QAAO,KAAK,kBAAkB,KAAK,WAAW,SAAS,KAAK,eAAe,KAAK,YAAY;;;;;;;;;;;;;;;AAgB9F,MAAMC,kBAA2C,EAC/C,MACA,OAAO,IACP,WACA,sBAAsB,aACgB;AAOtC,QAAO,2CAACC;EAAO,mCANoC;AACjD,OAAI,KAAM,QAAO,eAAe,KAAK;AACrC,UAAO,4FAAmE,oBAAoB;KAC7F,CAAC,MAAM,oBAAoB,CAAC;EAGI,MAFF,OAAO,YAAY,KAAK,GAAG;EAEP;EAAiB;GAAa;;AAGrF,eAAe,cAAc;AAE7B,6BAAe"}

package/dist/cjs/components/primitives/Avatar/Avatar.cjs

@@ -13,6 +13,12 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 //#region src/components/primitives/Avatar/Avatar.tsx
 const Avatar = ({ alt = "User avatar", background = "random", className = "", imageUrl, name, size = 64, variant = "circular", isLoading = false }) => {
 	const { theme, colorScheme } = require_useTheme.default();
+	const resolvedIcon = (0, react.useMemo)(() => imageUrl ? (0, __thunderid_browser.resolveLogoUri)(imageUrl, name ?? alt) : void 0, [
+		imageUrl,
+		name,
+		alt
+	]);
+	const hasImage = resolvedIcon?.kind !== "emoji" && Boolean(resolvedIcon?.imgSrc);
 	const generateBackgroundColor = (inputString) => {
 		const hash = inputString.split("").reduce((acc, char) => {
 			const charCode = char.charCodeAt(0);
@@ -28,20 +34,25 @@ const Avatar = ({ alt = "User avatar", background = "random", className = "", im
 		return `linear-gradient(${45 + seed % 91}deg, ${generateColor(seed)})`;
 	};
 	const styles = require_Avatar_styles.default(theme, colorScheme, size, variant, (0, react.useMemo)(() => {
-		if (!name || imageUrl) return;
+		if (!name || hasImage) return;
 		if (background === "random") return generateBackgroundColor(name);
 		if (background === "none") return;
 		return background;
 	}, [
 		background,
 		name,
-		imageUrl
+		hasImage
 	]));
 	const isDefaultState = !imageUrl && !name && !isLoading;
 	const getInitials = (fullName) => fullName.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
 	const renderContent = () => {
-		if (imageUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-			src: imageUrl,
+		if (resolvedIcon?.kind === "emoji") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			role: "img",
+			"aria-label": alt,
+			children: resolvedIcon.glyph
+		});
+		if (hasImage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src: resolvedIcon?.imgSrc,
 			alt,
 			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar", "image")), styles["image"])
 		});

package/dist/cjs/components/primitives/Avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","names":["Avatar: FC<AvatarProps>","useTheme","hash: number","charCode: number","seed: number","hue1: number","hue2: number","saturation: number","styles: ReturnType<typeof useStyles>","useStyles","isDefaultState: boolean"],"sources":["../../../../../src/components/primitives/Avatar/Avatar.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 {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport useStyles from './Avatar.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface AvatarProps {\n  /**\n   * Alternative text for the avatar image\n   */\n  alt?: string;\n  /**\n   * Background generation strategy\n   * - 'random': Generate background color based on ASCII values of the name\n   * - 'none': Use default theme background\n   * - string: Use custom background color\n   * @default 'random'\n   */\n  background?: 'random' | 'none' | string;\n  /**\n   * Optional className for the avatar\n   */\n  className?: string;\n  /**\n   * The URL of the avatar image\n   */\n  imageUrl?: string;\n  /**\n   * Loading state of the avatar\n   */\n  isLoading?: boolean;\n  /**\n   * The name to use for generating initials when no image is provided\n   */\n  name?: string;\n  /**\n   * The size of the avatar in pixels\n   */\n  size?: number;\n  /**\n   * The variant of the avatar shape\n   * @default 'circular'\n   */\n  variant?: 'circular' | 'square';\n}\n\nexport const Avatar: FC<AvatarProps> = ({\n  alt = 'User avatar',\n  background = 'random',\n  className = '',\n  imageUrl,\n  name,\n  size = 64,\n  variant = 'circular',\n  isLoading = false,\n}: AvatarProps): JSX.Element => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n\n  const generateBackgroundColor = (inputString: string): string => {\n    const hash: number = inputString.split('').reduce((acc: number, char: string) => {\n      const charCode: number = char.charCodeAt(0);\n\n      return ((acc << 5) - acc + charCode) & 0xffffffff;\n    }, 0);\n\n    const seed: number = Math.abs(hash);\n\n    const generateColor = (offset: number): string => {\n      const hue1: number = (seed + offset) % 360;\n      const hue2: number = (hue1 + 60 + (seed % 120)) % 360;\n\n      const saturation: number = 70 + (seed % 20);\n      const lightness1: number = 55 + (seed % 15);\n      const lightness2: number = 60 + ((seed + offset) % 15);\n\n      return `hsl(${hue1}, ${saturation}%, ${lightness1}%), hsl(${hue2}, ${saturation}%, ${lightness2}%)`;\n    };\n\n    const angle: number = 45 + (seed % 91);\n\n    const colors: string = generateColor(seed);\n    return `linear-gradient(${angle}deg, ${colors})`;\n  };\n\n  const backgroundColor: string | undefined = useMemo(() => {\n    if (!name || imageUrl) {\n      return undefined;\n    }\n\n    if (background === 'random') {\n      return generateBackgroundColor(name);\n    }\n\n    if (background === 'none') {\n      return undefined;\n    }\n\n    return background;\n  }, [background, name, imageUrl]);\n\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, size, variant, backgroundColor);\n\n  // Determine if we're in the default state (no image, no name, not loading)\n  const isDefaultState: boolean = !imageUrl && !name && !isLoading;\n\n  const getInitials = (fullName: string): string =>\n    fullName\n      .split(' ')\n      .map((part: string) => part[0])\n      .slice(0, 2)\n      .join('')\n      .toUpperCase();\n\n  const renderContent = (): JSX.Element | string => {\n    if (imageUrl) {\n      return (\n        <img\n          src={imageUrl}\n          alt={alt}\n          className={cx(withVendorCSSClassPrefix(bem('avatar', 'image')), styles['image'])}\n        />\n      );\n    }\n\n    if (name) {\n      return getInitials(name);\n    }\n\n    if (isLoading) {\n      return <div className={cx(withVendorCSSClassPrefix(bem('avatar', 'skeleton')), styles['skeleton'])} />;\n    }\n\n    // Default user icon\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 640 640\"\n        className={cx(withVendorCSSClassPrefix(bem('avatar', 'icon')), styles['icon'])}\n      >\n        <path d=\"M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z\" />\n      </svg>\n    );\n  };\n\n  return (\n    <div\n      className={cx(\n        withVendorCSSClassPrefix(bem('avatar')),\n        styles['avatar'],\n        styles['variant'],\n        withVendorCSSClassPrefix(bem('avatar', null, variant)),\n        isDefaultState && withVendorCSSClassPrefix(bem('avatar', 'default')),\n        className,\n      )}\n    >\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;AAgEA,MAAaA,UAA2B,EACtC,MAAM,eACN,aAAa,UACb,YAAY,IACZ,UACA,MACA,OAAO,IACP,UAAU,YACV,YAAY,YACkB;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CAEpE,MAAM,2BAA2B,gBAAgC;EAC/D,MAAMC,OAAe,YAAY,MAAM,GAAG,CAAC,QAAQ,KAAa,SAAiB;GAC/E,MAAMC,WAAmB,KAAK,WAAW,EAAE;AAE3C,WAAS,OAAO,KAAK,MAAM,WAAY;KACtC,EAAE;EAEL,MAAMC,OAAe,KAAK,IAAI,KAAK;EAEnC,MAAM,iBAAiB,WAA2B;GAChD,MAAMC,QAAgB,OAAO,UAAU;GACvC,MAAMC,QAAgB,OAAO,KAAM,OAAO,OAAQ;GAElD,MAAMC,aAAqB,KAAM,OAAO;AAIxC,UAAO,OAAO,KAAK,IAAI,WAAW,KAHP,KAAM,OAAO,GAGU,UAAU,KAAK,IAAI,WAAW,KAFrD,MAAO,OAAO,UAAU,GAE6C;;AAMlG,SAAO,mBAHe,KAAM,OAAO,GAGH,OADT,cAAc,KAAK,CACI;;CAmBhD,MAAMC,SAAuCC,8BAAU,OAAO,aAAa,MAAM,kCAhBvB;AACxD,MAAI,CAAC,QAAQ,SACX;AAGF,MAAI,eAAe,SACjB,QAAO,wBAAwB,KAAK;AAGtC,MAAI,eAAe,OACjB;AAGF,SAAO;IACN;EAAC;EAAY;EAAM;EAAS,CAAC,CAE0E;CAG1G,MAAMC,iBAA0B,CAAC,YAAY,CAAC,QAAQ,CAAC;CAEvD,MAAM,eAAe,aACnB,SACG,MAAM,IAAI,CACV,KAAK,SAAiB,KAAK,GAAG,CAC9B,MAAM,GAAG,EAAE,CACX,KAAK,GAAG,CACR,aAAa;CAElB,MAAM,sBAA4C;AAChD,MAAI,SACF,QACE,2CAAC;GACC,KAAK;GACA;GACL,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;IAChF;AAIN,MAAI,KACF,QAAO,YAAY,KAAK;AAG1B,MAAI,UACF,QAAO,2CAAC,SAAI,gHAA2C,UAAU,WAAW,CAAC,EAAE,OAAO,YAAY,GAAI;AAIxG,SACE,2CAAC;GACC,OAAM;GACN,SAAQ;GACR,gHAA2C,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;aAE9E,2CAAC,UAAK,GAAE,ygBAAygB;IAC7gB;;AAIV,QACE,2CAAC;EACC,gHAC+B,SAAS,CAAC,EACvC,OAAO,WACP,OAAO,2FACsB,UAAU,MAAM,QAAQ,CAAC,EACtD,iGAA+C,UAAU,UAAU,CAAC,EACpE,UACD;YAEA,eAAe;GACZ"}
+{"version":3,"file":"Avatar.cjs","names":["Avatar: FC<AvatarProps>","useTheme","resolvedIcon: ResolvedLogo | undefined","hasImage: boolean","hash: number","charCode: number","seed: number","hue1: number","hue2: number","saturation: number","styles: ReturnType<typeof useStyles>","useStyles","isDefaultState: boolean"],"sources":["../../../../../src/components/primitives/Avatar/Avatar.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 {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem, resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport useStyles from './Avatar.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface AvatarProps {\n  /**\n   * Alternative text for the avatar image\n   */\n  alt?: string;\n  /**\n   * Background generation strategy\n   * - 'random': Generate background color based on ASCII values of the name\n   * - 'none': Use default theme background\n   * - string: Use custom background color\n   * @default 'random'\n   */\n  background?: 'random' | 'none' | string;\n  /**\n   * Optional className for the avatar\n   */\n  className?: string;\n  /**\n   * The avatar image. Accepts a plain URL, or any `resolveLogoUri`-compatible\n   * spec (`emoji:<glyph>`, or `avatar:shape=...,variant=...,content=...,colors=...,bg=...`).\n   */\n  imageUrl?: string;\n  /**\n   * Loading state of the avatar\n   */\n  isLoading?: boolean;\n  /**\n   * The name to use for generating initials when no image is provided\n   */\n  name?: string;\n  /**\n   * The size of the avatar in pixels\n   */\n  size?: number;\n  /**\n   * The variant of the avatar shape\n   * @default 'circular'\n   */\n  variant?: 'circular' | 'square';\n}\n\nexport const Avatar: FC<AvatarProps> = ({\n  alt = 'User avatar',\n  background = 'random',\n  className = '',\n  imageUrl,\n  name,\n  size = 64,\n  variant = 'circular',\n  isLoading = false,\n}: AvatarProps): JSX.Element => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n\n  const resolvedIcon: ResolvedLogo | undefined = useMemo(\n    () => (imageUrl ? resolveLogoUri(imageUrl, name ?? alt) : undefined),\n    [imageUrl, name, alt],\n  );\n\n  const hasImage: boolean = resolvedIcon?.kind !== 'emoji' && Boolean(resolvedIcon?.imgSrc);\n\n  const generateBackgroundColor = (inputString: string): string => {\n    const hash: number = inputString.split('').reduce((acc: number, char: string) => {\n      const charCode: number = char.charCodeAt(0);\n\n      return ((acc << 5) - acc + charCode) & 0xffffffff;\n    }, 0);\n\n    const seed: number = Math.abs(hash);\n\n    const generateColor = (offset: number): string => {\n      const hue1: number = (seed + offset) % 360;\n      const hue2: number = (hue1 + 60 + (seed % 120)) % 360;\n\n      const saturation: number = 70 + (seed % 20);\n      const lightness1: number = 55 + (seed % 15);\n      const lightness2: number = 60 + ((seed + offset) % 15);\n\n      return `hsl(${hue1}, ${saturation}%, ${lightness1}%), hsl(${hue2}, ${saturation}%, ${lightness2}%)`;\n    };\n\n    const angle: number = 45 + (seed % 91);\n\n    const colors: string = generateColor(seed);\n    return `linear-gradient(${angle}deg, ${colors})`;\n  };\n\n  const backgroundColor: string | undefined = useMemo(() => {\n    if (!name || hasImage) {\n      return undefined;\n    }\n\n    if (background === 'random') {\n      return generateBackgroundColor(name);\n    }\n\n    if (background === 'none') {\n      return undefined;\n    }\n\n    return background;\n  }, [background, name, hasImage]);\n\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, size, variant, backgroundColor);\n\n  // Determine if we're in the default state (no image, no name, not loading)\n  const isDefaultState: boolean = !imageUrl && !name && !isLoading;\n\n  const getInitials = (fullName: string): string =>\n    fullName\n      .split(' ')\n      .map((part: string) => part[0])\n      .slice(0, 2)\n      .join('')\n      .toUpperCase();\n\n  const renderContent = (): JSX.Element | string => {\n    if (resolvedIcon?.kind === 'emoji') {\n      return (\n        <span role=\"img\" aria-label={alt}>\n          {resolvedIcon.glyph}\n        </span>\n      );\n    }\n\n    if (hasImage) {\n      return (\n        <img\n          src={resolvedIcon?.imgSrc}\n          alt={alt}\n          className={cx(withVendorCSSClassPrefix(bem('avatar', 'image')), styles['image'])}\n        />\n      );\n    }\n\n    if (name) {\n      return getInitials(name);\n    }\n\n    if (isLoading) {\n      return <div className={cx(withVendorCSSClassPrefix(bem('avatar', 'skeleton')), styles['skeleton'])} />;\n    }\n\n    // Default user icon\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 640 640\"\n        className={cx(withVendorCSSClassPrefix(bem('avatar', 'icon')), styles['icon'])}\n      >\n        <path d=\"M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z\" />\n      </svg>\n    );\n  };\n\n  return (\n    <div\n      className={cx(\n        withVendorCSSClassPrefix(bem('avatar')),\n        styles['avatar'],\n        styles['variant'],\n        withVendorCSSClassPrefix(bem('avatar', null, variant)),\n        isDefaultState && withVendorCSSClassPrefix(bem('avatar', 'default')),\n        className,\n      )}\n    >\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;AAiEA,MAAaA,UAA2B,EACtC,MAAM,eACN,aAAa,UACb,YAAY,IACZ,UACA,MACA,OAAO,IACP,UAAU,YACV,YAAY,YACkB;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CAEpE,MAAMC,wCACG,mDAA0B,UAAU,QAAQ,IAAI,GAAG,QAC1D;EAAC;EAAU;EAAM;EAAI,CACtB;CAED,MAAMC,WAAoB,cAAc,SAAS,WAAW,QAAQ,cAAc,OAAO;CAEzF,MAAM,2BAA2B,gBAAgC;EAC/D,MAAMC,OAAe,YAAY,MAAM,GAAG,CAAC,QAAQ,KAAa,SAAiB;GAC/E,MAAMC,WAAmB,KAAK,WAAW,EAAE;AAE3C,WAAS,OAAO,KAAK,MAAM,WAAY;KACtC,EAAE;EAEL,MAAMC,OAAe,KAAK,IAAI,KAAK;EAEnC,MAAM,iBAAiB,WAA2B;GAChD,MAAMC,QAAgB,OAAO,UAAU;GACvC,MAAMC,QAAgB,OAAO,KAAM,OAAO,OAAQ;GAElD,MAAMC,aAAqB,KAAM,OAAO;AAIxC,UAAO,OAAO,KAAK,IAAI,WAAW,KAHP,KAAM,OAAO,GAGU,UAAU,KAAK,IAAI,WAAW,KAFrD,MAAO,OAAO,UAAU,GAE6C;;AAMlG,SAAO,mBAHe,KAAM,OAAO,GAGH,OADT,cAAc,KAAK,CACI;;CAmBhD,MAAMC,SAAuCC,8BAAU,OAAO,aAAa,MAAM,kCAhBvB;AACxD,MAAI,CAAC,QAAQ,SACX;AAGF,MAAI,eAAe,SACjB,QAAO,wBAAwB,KAAK;AAGtC,MAAI,eAAe,OACjB;AAGF,SAAO;IACN;EAAC;EAAY;EAAM;EAAS,CAAC,CAE0E;CAG1G,MAAMC,iBAA0B,CAAC,YAAY,CAAC,QAAQ,CAAC;CAEvD,MAAM,eAAe,aACnB,SACG,MAAM,IAAI,CACV,KAAK,SAAiB,KAAK,GAAG,CAC9B,MAAM,GAAG,EAAE,CACX,KAAK,GAAG,CACR,aAAa;CAElB,MAAM,sBAA4C;AAChD,MAAI,cAAc,SAAS,QACzB,QACE,2CAAC;GAAK,MAAK;GAAM,cAAY;aAC1B,aAAa;IACT;AAIX,MAAI,SACF,QACE,2CAAC;GACC,KAAK,cAAc;GACd;GACL,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;IAChF;AAIN,MAAI,KACF,QAAO,YAAY,KAAK;AAG1B,MAAI,UACF,QAAO,2CAAC,SAAI,gHAA2C,UAAU,WAAW,CAAC,EAAE,OAAO,YAAY,GAAI;AAIxG,SACE,2CAAC;GACC,OAAM;GACN,SAAQ;GACR,gHAA2C,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;aAE9E,2CAAC,UAAK,GAAE,ygBAAygB;IAC7gB;;AAIV,QACE,2CAAC;EACC,gHAC+B,SAAS,CAAC,EACvC,OAAO,WACP,OAAO,2FACsB,UAAU,MAAM,QAAQ,CAAC,EACtD,iGAA+C,UAAU,UAAU,CAAC,EACpE,UACD;YAEA,eAAe;GACZ"}

package/dist/cjs/components/primitives/Logo/Logo.cjs

@@ -19,12 +19,20 @@ const Logo = ({ className, src, alt, title, size = "medium" }) => {
 	const { theme, colorScheme } = require_useTheme.default();
 	const styles = require_Logo_styles.default(theme, colorScheme, size);
 	const logoConfig = theme.images?.logo;
-	const logoSrc = src || logoConfig?.["url"];
+	const logoSpec = src || logoConfig?.["url"];
 	const logoAlt = alt || logoConfig?.["alt"] || "Logo";
 	const logoTitle = title || logoConfig?.["title"];
-	if (!logoSrc) return null;
+	if (!logoSpec) return null;
+	const resolvedLogo = (0, __thunderid_browser.resolveLogoUri)(logoSpec, logoAlt);
+	if (resolvedLogo.kind === "emoji") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		role: "img",
+		"aria-label": logoAlt,
+		title: logoTitle,
+		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo", size)), styles["emoji"], styles["emojiSize"], className),
+		children: resolvedLogo.glyph
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: logoSrc,
+		src: resolvedLogo.imgSrc,
 		alt: logoAlt,
 		title: logoTitle,
 		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo", size)), styles["logo"], styles["size"], className)

package/dist/cjs/components/primitives/Logo/Logo.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.cjs","names":["Logo: FC<LogoProps>","useTheme","styles: Record<string, string>","useStyles","logoConfig: Record<string, string> | undefined","logoSrc: string | undefined","logoAlt: string","logoTitle: string | undefined"],"sources":["../../../../../src/components/primitives/Logo/Logo.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 {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC} from 'react';\nimport useStyles from './Logo.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Props for the Logo component.\n */\nexport interface LogoProps {\n  /**\n   * Custom alt text for the logo.\n   */\n  alt?: string;\n  /**\n   * Custom CSS class name for the logo.\n   */\n  className?: string;\n  /**\n   * Size of the logo.\n   */\n  size?: LogoSize;\n  /**\n   * Custom logo URL to override theme logo.\n   */\n  src?: string;\n  /**\n   * Custom title for the logo.\n   */\n  title?: string;\n}\n\n/**\n * Logo component that displays the brand logo from theme or custom source.\n *\n * @param props - The props for the Logo component.\n * @returns The rendered Logo component.\n */\nconst Logo: FC<LogoProps> = ({className, src, alt, title, size = 'medium'}: LogoProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, size);\n\n  const logoConfig: Record<string, string> | undefined = theme.images?.logo as Record<string, string> | undefined;\n\n  const logoSrc: string | undefined = src || logoConfig?.['url'];\n\n  const logoAlt: string = alt || logoConfig?.['alt'] || 'Logo';\n\n  const logoTitle: string | undefined = title || logoConfig?.['title'];\n\n  if (!logoSrc) {\n    return null;\n  }\n\n  return (\n    <img\n      src={logoSrc}\n      alt={logoAlt}\n      title={logoTitle}\n      className={cx(\n        withVendorCSSClassPrefix(bem('logo')),\n        withVendorCSSClassPrefix(bem('logo', size)),\n        styles['logo'],\n        styles['size'],\n        className,\n      )}\n    />\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;;;;;;;;AA0DA,MAAMA,QAAuB,EAAC,WAAW,KAAK,KAAK,OAAO,OAAO,eAAyB;CACxF,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,4BAAU,OAAO,aAAa,KAAK;CAE1E,MAAMC,aAAiD,MAAM,QAAQ;CAErE,MAAMC,UAA8B,OAAO,aAAa;CAExD,MAAMC,UAAkB,OAAO,aAAa,UAAU;CAEtD,MAAMC,YAAgC,SAAS,aAAa;AAE5D,KAAI,CAAC,QACH,QAAO;AAGT,QACE,2CAAC;EACC,KAAK;EACL,KAAK;EACL,OAAO;EACP,gHAC+B,OAAO,CAAC,iFACR,QAAQ,KAAK,CAAC,EAC3C,OAAO,SACP,OAAO,SACP,UACD;GACD;;AAIN,mBAAe"}
+{"version":3,"file":"Logo.cjs","names":["Logo: FC<LogoProps>","useTheme","styles: Record<string, string>","useStyles","logoConfig: Record<string, string> | undefined","logoSpec: string | undefined","logoAlt: string","logoTitle: string | undefined","resolvedLogo: ResolvedLogo"],"sources":["../../../../../src/components/primitives/Logo/Logo.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 {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem, resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC} from 'react';\nimport useStyles from './Logo.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Props for the Logo component.\n */\nexport interface LogoProps {\n  /**\n   * Custom alt text for the logo.\n   */\n  alt?: string;\n  /**\n   * Custom CSS class name for the logo.\n   */\n  className?: string;\n  /**\n   * Size of the logo.\n   */\n  size?: LogoSize;\n  /**\n   * Custom logo URL to override theme logo.\n   */\n  src?: string;\n  /**\n   * Custom title for the logo.\n   */\n  title?: string;\n}\n\n/**\n * Logo component that displays the brand logo from theme or custom source.\n *\n * @param props - The props for the Logo component.\n * @returns The rendered Logo component.\n */\nconst Logo: FC<LogoProps> = ({className, src, alt, title, size = 'medium'}: LogoProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, size);\n\n  const logoConfig: Record<string, string> | undefined = theme.images?.logo as Record<string, string> | undefined;\n\n  const logoSpec: string | undefined = src || logoConfig?.['url'];\n\n  const logoAlt: string = alt || logoConfig?.['alt'] || 'Logo';\n\n  const logoTitle: string | undefined = title || logoConfig?.['title'];\n\n  if (!logoSpec) {\n    return null;\n  }\n\n  const resolvedLogo: ResolvedLogo = resolveLogoUri(logoSpec, logoAlt);\n\n  if (resolvedLogo.kind === 'emoji') {\n    return (\n      <span\n        role=\"img\"\n        aria-label={logoAlt}\n        title={logoTitle}\n        className={cx(\n          withVendorCSSClassPrefix(bem('logo')),\n          withVendorCSSClassPrefix(bem('logo', size)),\n          styles['emoji'],\n          styles['emojiSize'],\n          className,\n        )}\n      >\n        {resolvedLogo.glyph}\n      </span>\n    );\n  }\n\n  return (\n    <img\n      src={resolvedLogo.imgSrc}\n      alt={logoAlt}\n      title={logoTitle}\n      className={cx(\n        withVendorCSSClassPrefix(bem('logo')),\n        withVendorCSSClassPrefix(bem('logo', size)),\n        styles['logo'],\n        styles['size'],\n        className,\n      )}\n    />\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;;;;;;;;AA0DA,MAAMA,QAAuB,EAAC,WAAW,KAAK,KAAK,OAAO,OAAO,eAAyB;CACxF,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,4BAAU,OAAO,aAAa,KAAK;CAE1E,MAAMC,aAAiD,MAAM,QAAQ;CAErE,MAAMC,WAA+B,OAAO,aAAa;CAEzD,MAAMC,UAAkB,OAAO,aAAa,UAAU;CAEtD,MAAMC,YAAgC,SAAS,aAAa;AAE5D,KAAI,CAAC,SACH,QAAO;CAGT,MAAMC,uDAA4C,UAAU,QAAQ;AAEpE,KAAI,aAAa,SAAS,QACxB,QACE,2CAAC;EACC,MAAK;EACL,cAAY;EACZ,OAAO;EACP,gHAC+B,OAAO,CAAC,iFACR,QAAQ,KAAK,CAAC,EAC3C,OAAO,UACP,OAAO,cACP,UACD;YAEA,aAAa;GACT;AAIX,QACE,2CAAC;EACC,KAAK,aAAa;EAClB,KAAK;EACL,OAAO;EACP,gHAC+B,OAAO,CAAC,iFACR,QAAQ,KAAK,CAAC,EAC3C,OAAO,SACP,OAAO,SACP,UACD;GACD;;AAIN,mBAAe"}

package/dist/cjs/components/primitives/Logo/Logo.styles.cjs

@@ -30,15 +30,39 @@ const useStyles = (theme, colorScheme, size) => (0, react.useMemo)(() => {
       height: 64px;
       max-width: 240px;
     `;
+	const sizeStyles = {
+		large: largeLogo,
+		medium: mediumLogo,
+		small: smallLogo
+	};
 	return {
+		emoji: __emotion_css.css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+    `,
+		emojiSize: {
+			large: __emotion_css.css`
+        width: 64px;
+        height: 64px;
+        font-size: 36px;
+      `,
+			medium: __emotion_css.css`
+        width: 48px;
+        height: 48px;
+        font-size: 28px;
+      `,
+			small: __emotion_css.css`
+        width: 32px;
+        height: 32px;
+        font-size: 20px;
+      `
+		}[size],
 		large: largeLogo,
 		logo: baseLogo,
 		medium: mediumLogo,
-		size: {
-			large: largeLogo,
-			medium: mediumLogo,
-			small: smallLogo
-		}[size],
+		size: sizeStyles[size],
 		small: smallLogo
 	};
 }, [

package/dist/cjs/components/primitives/Logo/Logo.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.styles.cjs","names":["baseLogo: string","smallLogo: string","mediumLogo: string","largeLogo: string"],"sources":["../../../../../src/components/primitives/Logo/Logo.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\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Logo component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the logo\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: LogoSize): Record<string, string> =>\n  useMemo(() => {\n    const baseLogo: string = css`\n      width: auto;\n      object-fit: contain;\n      display: block;\n    `;\n\n    const smallLogo: string = css`\n      height: 32px;\n      max-width: 120px;\n    `;\n\n    const mediumLogo: string = css`\n      height: 48px;\n      max-width: 180px;\n    `;\n\n    const largeLogo: string = css`\n      height: 64px;\n      max-width: 240px;\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: largeLogo,\n      medium: mediumLogo,\n      small: smallLogo,\n    };\n\n    return {\n      large: largeLogo,\n      logo: baseLogo,\n      medium: mediumLogo,\n      size: sizeStyles[size],\n      small: smallLogo,\n    };\n  }, [theme, colorScheme, size]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AA+BA,MAAM,aAAa,OAAc,aAAqB,kCACtC;CACZ,MAAMA,WAAmB,iBAAG;;;;;CAM5B,MAAMC,YAAoB,iBAAG;;;;CAK7B,MAAMC,aAAqB,iBAAG;;;;CAK9B,MAAMC,YAAoB,iBAAG;;;;AAW7B,QAAO;EACL,OAAO;EACP,MAAM;EACN,QAAQ;EACR,MAVyC;GACzC,OAAO;GACP,QAAQ;GACR,OAAO;GACR,CAMkB;EACjB,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAK,CAAC;AAEhC,0BAAe"}
+{"version":3,"file":"Logo.styles.cjs","names":["baseLogo: string","smallLogo: string","mediumLogo: string","largeLogo: string","sizeStyles: Record<string, string>"],"sources":["../../../../../src/components/primitives/Logo/Logo.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\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Logo component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the logo\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: LogoSize): Record<string, string> =>\n  useMemo(() => {\n    const baseLogo: string = css`\n      width: auto;\n      object-fit: contain;\n      display: block;\n    `;\n\n    const smallLogo: string = css`\n      height: 32px;\n      max-width: 120px;\n    `;\n\n    const mediumLogo: string = css`\n      height: 48px;\n      max-width: 180px;\n    `;\n\n    const largeLogo: string = css`\n      height: 64px;\n      max-width: 240px;\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: largeLogo,\n      medium: mediumLogo,\n      small: smallLogo,\n    };\n\n    const baseEmoji: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n    `;\n\n    const emojiSizeStyles: Record<LogoSize, string> = {\n      large: css`\n        width: 64px;\n        height: 64px;\n        font-size: 36px;\n      `,\n      medium: css`\n        width: 48px;\n        height: 48px;\n        font-size: 28px;\n      `,\n      small: css`\n        width: 32px;\n        height: 32px;\n        font-size: 20px;\n      `,\n    };\n\n    return {\n      emoji: baseEmoji,\n      emojiSize: emojiSizeStyles[size],\n      large: largeLogo,\n      logo: baseLogo,\n      medium: mediumLogo,\n      size: sizeStyles[size],\n      small: smallLogo,\n    };\n  }, [theme, colorScheme, size]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AA+BA,MAAM,aAAa,OAAc,aAAqB,kCACtC;CACZ,MAAMA,WAAmB,iBAAG;;;;;CAM5B,MAAMC,YAAoB,iBAAG;;;;CAK7B,MAAMC,aAAqB,iBAAG;;;;CAK9B,MAAMC,YAAoB,iBAAG;;;;CAK7B,MAAMC,aAAqC;EACzC,OAAO;EACP,QAAQ;EACR,OAAO;EACR;AA2BD,QAAO;EACL,OA1BwB,iBAAG;;;;;;EA2B3B,WApBgD;GAChD,OAAO,iBAAG;;;;;GAKV,QAAQ,iBAAG;;;;;GAKX,OAAO,iBAAG;;;;;GAKX,CAI4B;EAC3B,OAAO;EACP,MAAM;EACN,QAAQ;EACR,MAAM,WAAW;EACjB,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAK,CAAC;AAEhC,0BAAe"}

package/dist/cjs/index.cjs

@@ -311,6 +311,12 @@ Object.defineProperty(exports, 'resolveLocaleEmoji', {
     return __thunderid_browser.resolveLocaleEmoji;
   }
 });
+Object.defineProperty(exports, 'resolveLogoUri', {
+  enumerable: true,
+  get: function () {
+    return __thunderid_browser.resolveLogoUri;
+  }
+});
 Object.defineProperty(exports, 'resolveMeta', {
   enumerable: true,
   get: function () {

package/dist/components/adapters/ImageComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageComponent.d.ts","sourceRoot":"","sources":["../../../src/components/adapters/ImageComponent.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAgB,EAAE,EAAiB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAInD;;GAEG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CA+EpC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ImageComponent.d.ts","sourceRoot":"","sources":["../../../src/components/adapters/ImageComponent.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAgB,EAAE,EAAiB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAInD;;GAEG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CAiFpC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/adapters/ImageComponent.js

@@ -1,5 +1,5 @@
 import useTheme_default from "../../contexts/Theme/useTheme.js";
-import { extractEmojiFromUri, isEmojiUri } from "@thunderid/browser";
+import { resolveLogoUri } from "@thunderid/browser";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/adapters/ImageComponent.tsx
@@ -21,7 +21,8 @@ const ImageComponent = ({ component }) => {
 		margin: variant === "image_block" ? "1rem auto" : "0"
 	};
 	if (!src) return null;
-	if (isEmojiUri(src)) {
+	const resolvedIcon = resolveLogoUri(src, alt);
+	if (resolvedIcon.kind === "emoji") {
 		const toCSSLength = (value) => /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value;
 		const cssWidth = toCSSLength(width);
 		const cssHeight = toCSSLength(height);
@@ -48,7 +49,7 @@ const ImageComponent = ({ component }) => {
 						fontSize: "100cqmin",
 						lineHeight: 1
 					},
-					children: extractEmojiFromUri(src)
+					children: resolvedIcon.glyph
 				})
 			})
 		}, component.id);
@@ -56,7 +57,7 @@ const ImageComponent = ({ component }) => {
 	return /* @__PURE__ */ jsx("div", {
 		style: { textAlign: "center" },
 		children: /* @__PURE__ */ jsx("img", {
-			src,
+			src: resolvedIcon.imgSrc,
 			alt,
 			height,
 			width,

package/dist/components/adapters/ImageComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageComponent.js","names":["ImageComponent: FC<AdapterProps>","useTheme","config: Record<string, unknown>","src: string","alt: string","width: string","height: string","variant: string","imageStyle: CSSProperties","cssWidth: string","cssHeight: string","containerHeight: string"],"sources":["../../../src/components/adapters/ImageComponent.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 {extractEmojiFromUri, isEmojiUri} from '@thunderid/browser';\nimport {CSSProperties, FC, SyntheticEvent} from 'react';\nimport useTheme from '../../contexts/Theme/useTheme';\nimport {AdapterProps} from '../../models/adapters';\n\nconst DEFAULT_EMOJI_CONTAINER_HEIGHT = '4em';\n\n/**\n * Image component for sign-up forms.\n */\nconst ImageComponent: FC<AdapterProps> = ({component}: AdapterProps) => {\n  const {theme} = useTheme();\n  const config: Record<string, unknown> = component.config || {};\n  const src: string = (config['src'] as string) || '';\n  const alt: string = (config['alt'] as string) || (config['label'] as string) || 'Image';\n  const width: string = (config['width'] as string) || '100%';\n  const height: string = (config['height'] as string) || 'auto';\n  const variant: string = component.variant?.toLowerCase() || 'image_block';\n\n  const imageStyle: CSSProperties = {\n    borderRadius: theme.vars.borderRadius.small,\n    display: 'block',\n    margin: variant === 'image_block' ? '1rem auto' : '0',\n  };\n\n  if (!src) {\n    return null;\n  }\n\n  if (isEmojiUri(src)) {\n    // Bare numbers (e.g. \"48\") are valid for <img> width/height attributes but\n    // are unit-less and ignored as CSS properties — normalize them to px.\n    const toCSSLength = (value: string): string => (/^\\d+(\\.\\d+)?$/.test(value) ? `${value}px` : value);\n    const cssWidth: string = toCSSLength(width);\n    const cssHeight: string = toCSSLength(height);\n\n    // container-type: size needs a concrete block dimension — percentage and\n    // 'auto' values both collapse to 0 when the parent has no defined height.\n    // Priority: explicit height → explicit width (square) → fallback constant.\n    const isConcrete = (v: string): boolean => v !== 'auto' && !v.endsWith('%');\n    let containerHeight: string;\n    if (isConcrete(cssHeight)) {\n      containerHeight = cssHeight;\n    } else if (isConcrete(cssWidth)) {\n      containerHeight = cssWidth;\n    } else {\n      containerHeight = DEFAULT_EMOJI_CONTAINER_HEIGHT;\n    }\n\n    return (\n      <div key={component.id} style={{textAlign: 'center'}}>\n        {/*\n         * container-type: size lets the inner span use cqmin (= min(cqw, cqh))\n         * so the emoji font-size tracks the rendered container dimensions\n         * rather than the parent's font-size.\n         */}\n        <span\n          style={{\n            ...imageStyle,\n            containerType: 'size',\n            display: 'inline-grid',\n            height: containerHeight,\n            placeItems: 'center',\n            width: cssWidth,\n          }}\n        >\n          <span aria-label={alt} role=\"img\" style={{fontSize: '100cqmin', lineHeight: 1}}>\n            {extractEmojiFromUri(src)}\n          </span>\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div key={component.id} style={{textAlign: 'center'}}>\n      <img\n        src={src}\n        alt={alt}\n        height={height}\n        width={width}\n        style={imageStyle}\n        onError={(e: SyntheticEvent<HTMLImageElement>): void => {\n          // Hide broken images\n          e.currentTarget.style.display = 'none';\n        }}\n      />\n    </div>\n  );\n};\n\nexport default ImageComponent;\n"],"mappings":";;;;;AAuBA,MAAM,iCAAiC;;;;AAKvC,MAAMA,kBAAoC,EAAC,gBAA6B;CACtE,MAAM,EAAC,UAASC,kBAAU;CAC1B,MAAMC,SAAkC,UAAU,UAAU,EAAE;CAC9D,MAAMC,MAAe,OAAO,UAAqB;CACjD,MAAMC,MAAe,OAAO,UAAsB,OAAO,YAAuB;CAChF,MAAMC,QAAiB,OAAO,YAAuB;CACrD,MAAMC,SAAkB,OAAO,aAAwB;CACvD,MAAMC,UAAkB,UAAU,SAAS,aAAa,IAAI;CAE5D,MAAMC,aAA4B;EAChC,cAAc,MAAM,KAAK,aAAa;EACtC,SAAS;EACT,QAAQ,YAAY,gBAAgB,cAAc;EACnD;AAED,KAAI,CAAC,IACH,QAAO;AAGT,KAAI,WAAW,IAAI,EAAE;EAGnB,MAAM,eAAe,UAA2B,gBAAgB,KAAK,MAAM,GAAG,GAAG,MAAM,MAAM;EAC7F,MAAMC,WAAmB,YAAY,MAAM;EAC3C,MAAMC,YAAoB,YAAY,OAAO;EAK7C,MAAM,cAAc,MAAuB,MAAM,UAAU,CAAC,EAAE,SAAS,IAAI;EAC3E,IAAIC;AACJ,MAAI,WAAW,UAAU,CACvB,mBAAkB;WACT,WAAW,SAAS,CAC7B,mBAAkB;MAElB,mBAAkB;AAGpB,SACE,oBAAC;GAAuB,OAAO,EAAC,WAAW,UAAS;aAMlD,oBAAC;IACC,OAAO;KACL,GAAG;KACH,eAAe;KACf,SAAS;KACT,QAAQ;KACR,YAAY;KACZ,OAAO;KACR;cAED,oBAAC;KAAK,cAAY;KAAK,MAAK;KAAM,OAAO;MAAC,UAAU;MAAY,YAAY;MAAE;eAC3E,oBAAoB,IAAI;MACpB;KACF;KAnBC,UAAU,GAoBd;;AAIV,QACE,oBAAC;EAAuB,OAAO,EAAC,WAAW,UAAS;YAClD,oBAAC;GACM;GACA;GACG;GACD;GACP,OAAO;GACP,UAAU,MAA8C;AAEtD,MAAE,cAAc,MAAM,UAAU;;IAElC;IAXM,UAAU,GAYd;;AAIV,6BAAe"}
+{"version":3,"file":"ImageComponent.js","names":["ImageComponent: FC<AdapterProps>","useTheme","config: Record<string, unknown>","src: string","alt: string","width: string","height: string","variant: string","imageStyle: CSSProperties","resolvedIcon: ResolvedLogo","cssWidth: string","cssHeight: string","containerHeight: string"],"sources":["../../../src/components/adapters/ImageComponent.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 {resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {CSSProperties, FC, SyntheticEvent} from 'react';\nimport useTheme from '../../contexts/Theme/useTheme';\nimport {AdapterProps} from '../../models/adapters';\n\nconst DEFAULT_EMOJI_CONTAINER_HEIGHT = '4em';\n\n/**\n * Image component for sign-up forms.\n */\nconst ImageComponent: FC<AdapterProps> = ({component}: AdapterProps) => {\n  const {theme} = useTheme();\n  const config: Record<string, unknown> = component.config || {};\n  const src: string = (config['src'] as string) || '';\n  const alt: string = (config['alt'] as string) || (config['label'] as string) || 'Image';\n  const width: string = (config['width'] as string) || '100%';\n  const height: string = (config['height'] as string) || 'auto';\n  const variant: string = component.variant?.toLowerCase() || 'image_block';\n\n  const imageStyle: CSSProperties = {\n    borderRadius: theme.vars.borderRadius.small,\n    display: 'block',\n    margin: variant === 'image_block' ? '1rem auto' : '0',\n  };\n\n  if (!src) {\n    return null;\n  }\n\n  const resolvedIcon: ResolvedLogo = resolveLogoUri(src, alt);\n\n  if (resolvedIcon.kind === 'emoji') {\n    // Bare numbers (e.g. \"48\") are valid for <img> width/height attributes but\n    // are unit-less and ignored as CSS properties — normalize them to px.\n    const toCSSLength = (value: string): string => (/^\\d+(\\.\\d+)?$/.test(value) ? `${value}px` : value);\n    const cssWidth: string = toCSSLength(width);\n    const cssHeight: string = toCSSLength(height);\n\n    // container-type: size needs a concrete block dimension — percentage and\n    // 'auto' values both collapse to 0 when the parent has no defined height.\n    // Priority: explicit height → explicit width (square) → fallback constant.\n    const isConcrete = (v: string): boolean => v !== 'auto' && !v.endsWith('%');\n    let containerHeight: string;\n    if (isConcrete(cssHeight)) {\n      containerHeight = cssHeight;\n    } else if (isConcrete(cssWidth)) {\n      containerHeight = cssWidth;\n    } else {\n      containerHeight = DEFAULT_EMOJI_CONTAINER_HEIGHT;\n    }\n\n    return (\n      <div key={component.id} style={{textAlign: 'center'}}>\n        {/*\n         * container-type: size lets the inner span use cqmin (= min(cqw, cqh))\n         * so the emoji font-size tracks the rendered container dimensions\n         * rather than the parent's font-size.\n         */}\n        <span\n          style={{\n            ...imageStyle,\n            containerType: 'size',\n            display: 'inline-grid',\n            height: containerHeight,\n            placeItems: 'center',\n            width: cssWidth,\n          }}\n        >\n          <span aria-label={alt} role=\"img\" style={{fontSize: '100cqmin', lineHeight: 1}}>\n            {resolvedIcon.glyph}\n          </span>\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div key={component.id} style={{textAlign: 'center'}}>\n      <img\n        src={resolvedIcon.imgSrc}\n        alt={alt}\n        height={height}\n        width={width}\n        style={imageStyle}\n        onError={(e: SyntheticEvent<HTMLImageElement>): void => {\n          // Hide broken images\n          e.currentTarget.style.display = 'none';\n        }}\n      />\n    </div>\n  );\n};\n\nexport default ImageComponent;\n"],"mappings":";;;;;AAuBA,MAAM,iCAAiC;;;;AAKvC,MAAMA,kBAAoC,EAAC,gBAA6B;CACtE,MAAM,EAAC,UAASC,kBAAU;CAC1B,MAAMC,SAAkC,UAAU,UAAU,EAAE;CAC9D,MAAMC,MAAe,OAAO,UAAqB;CACjD,MAAMC,MAAe,OAAO,UAAsB,OAAO,YAAuB;CAChF,MAAMC,QAAiB,OAAO,YAAuB;CACrD,MAAMC,SAAkB,OAAO,aAAwB;CACvD,MAAMC,UAAkB,UAAU,SAAS,aAAa,IAAI;CAE5D,MAAMC,aAA4B;EAChC,cAAc,MAAM,KAAK,aAAa;EACtC,SAAS;EACT,QAAQ,YAAY,gBAAgB,cAAc;EACnD;AAED,KAAI,CAAC,IACH,QAAO;CAGT,MAAMC,eAA6B,eAAe,KAAK,IAAI;AAE3D,KAAI,aAAa,SAAS,SAAS;EAGjC,MAAM,eAAe,UAA2B,gBAAgB,KAAK,MAAM,GAAG,GAAG,MAAM,MAAM;EAC7F,MAAMC,WAAmB,YAAY,MAAM;EAC3C,MAAMC,YAAoB,YAAY,OAAO;EAK7C,MAAM,cAAc,MAAuB,MAAM,UAAU,CAAC,EAAE,SAAS,IAAI;EAC3E,IAAIC;AACJ,MAAI,WAAW,UAAU,CACvB,mBAAkB;WACT,WAAW,SAAS,CAC7B,mBAAkB;MAElB,mBAAkB;AAGpB,SACE,oBAAC;GAAuB,OAAO,EAAC,WAAW,UAAS;aAMlD,oBAAC;IACC,OAAO;KACL,GAAG;KACH,eAAe;KACf,SAAS;KACT,QAAQ;KACR,YAAY;KACZ,OAAO;KACR;cAED,oBAAC;KAAK,cAAY;KAAK,MAAK;KAAM,OAAO;MAAC,UAAU;MAAY,YAAY;MAAE;eAC3E,aAAa;MACT;KACF;KAnBC,UAAU,GAoBd;;AAIV,QACE,oBAAC;EAAuB,OAAO,EAAC,WAAW,UAAS;YAClD,oBAAC;GACC,KAAK,aAAa;GACb;GACG;GACD;GACP,OAAO;GACP,UAAU,MAA8C;AAEtD,MAAE,cAAc,MAAM,UAAU;;IAElC;IAXM,UAAU,GAYd;;AAIV,6BAAe"}

package/dist/components/presentation/UserAvatar/BaseUserAvatar.d.ts

@@ -18,6 +18,12 @@
 import { User } from '@thunderid/browser';
 import { FC } from 'react';
 export interface BaseUserAvatarProps {
+    /**
+     * Seed used to deterministically pick the anonymous avatar shown when `user` is `null`
+     * (e.g. a session or device identifier, so the same anonymous session keeps the same
+     * avatar across renders). Falls back to a random pick when omitted.
+     */
+    anonymousAvatarSeed?: string;
     /**
      * Optional CSS class name for the avatar container.
      */
@@ -29,7 +35,8 @@ export interface BaseUserAvatarProps {
     size?: number;
     /**
      * The user object. When provided, the avatar derives the image URL and
-     * initials from the user's profile fields automatically.
+     * initials from the user's profile fields automatically. When `null`, a
+     * curated anonymous avatar is shown instead.
      */
     user: User | null;
 }
@@ -43,6 +50,7 @@ export interface BaseUserAvatarProps {
  * @example
  * ```tsx
  * <BaseUserAvatar user={user} size={48} />
+ * <BaseUserAvatar user={null} anonymousAvatarSeed={sessionId} size={48} />
  * ```
  */
 declare const BaseUserAvatar: FC<BaseUserAvatarProps>;

package/dist/components/presentation/UserAvatar/BaseUserAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserAvatar.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserAvatar/BaseUserAvatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,EAAE,EAAM,MAAM,OAAO,CAAC;AAG9B,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB;AAwBD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAK3C,CAAC;AAIF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"BaseUserAvatar.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/UserAvatar/BaseUserAvatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAA0B,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAC,EAAE,EAAe,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB;AAwBD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAa3C,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/dist/components/presentation/UserAvatar/BaseUserAvatar.js

@@ -1,4 +1,6 @@
 import { Avatar } from "../../primitives/Avatar/Avatar.js";
+import { pickAnonymousAvatarName } from "@thunderid/browser";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/presentation/UserAvatar/BaseUserAvatar.tsx
@@ -37,11 +39,15 @@ const resolveName = (user) => {
 * @example
 * ```tsx
 * <BaseUserAvatar user={user} size={48} />
+* <BaseUserAvatar user={null} anonymousAvatarSeed={sessionId} size={48} />
 * ```
 */
-const BaseUserAvatar = ({ user, size = 40, className }) => {
+const BaseUserAvatar = ({ user, size = 40, className, anonymousAvatarSeed = void 0 }) => {
 	return /* @__PURE__ */ jsx(Avatar, {
-		imageUrl: user ? resolvePicture(user) : void 0,
+		imageUrl: useMemo(() => {
+			if (user) return resolvePicture(user);
+			return `avatar:variant=anonymous_animal,content=${pickAnonymousAvatarName(anonymousAvatarSeed)}`;
+		}, [user, anonymousAvatarSeed]),
 		name: user ? resolveName(user) : void 0,
 		size,
 		className

package/dist/components/presentation/UserAvatar/BaseUserAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserAvatar.js","names":["val: unknown","given: string","family: string","BaseUserAvatar: FC<BaseUserAvatarProps>"],"sources":["../../../../src/components/presentation/UserAvatar/BaseUserAvatar.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 {User} from '@thunderid/browser';\nimport {FC, JSX} from 'react';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\n\nexport interface BaseUserAvatarProps {\n  /**\n   * Optional CSS class name for the avatar container.\n   */\n  className?: string;\n  /**\n   * Size of the avatar in pixels.\n   * @default 40\n   */\n  size?: number;\n  /**\n   * The user object. When provided, the avatar derives the image URL and\n   * initials from the user's profile fields automatically.\n   */\n  user: User | null;\n}\n\n/**\n * Resolves the profile picture URL from common user claim fields.\n */\nconst resolvePicture = (user: User): string | undefined => {\n  for (const key of ['picture', 'profileUrl', 'profile', 'URL', 'avatarUrl', 'avatar']) {\n    const val: unknown = user[key];\n    if (typeof val === 'string' && val) return val;\n  }\n  return undefined;\n};\n\n/**\n * Resolves a display name suitable for generating avatar initials.\n */\nconst resolveName = (user: User): string | undefined => {\n  const given: string = user['givenName'] || user['given_name'] || '';\n  const family: string = user['familyName'] || user['family_name'] || '';\n  if (given && family) return `${given} ${family}`;\n\n  return user['displayName'] || user['name'] || given || user['username'] || user['email'] || undefined;\n};\n\n/**\n * Base `UserAvatar` component. Renders an avatar derived from a user object\n * without any context dependency — pass the `user` prop explicitly.\n *\n * For the context-aware version that reads the signed-in user automatically,\n * use `UserAvatar`.\n *\n * @example\n * ```tsx\n * <BaseUserAvatar user={user} size={48} />\n * ```\n */\nconst BaseUserAvatar: FC<BaseUserAvatarProps> = ({user, size = 40, className}: BaseUserAvatarProps): JSX.Element => {\n  const imageUrl: string | undefined = user ? resolvePicture(user) : undefined;\n  const name: string | undefined = user ? resolveName(user) : undefined;\n\n  return <Avatar imageUrl={imageUrl} name={name} size={size} className={className} />;\n};\n\nBaseUserAvatar.displayName = 'BaseUserAvatar';\n\nexport default BaseUserAvatar;\n"],"mappings":";;;;;;;AA0CA,MAAM,kBAAkB,SAAmC;AACzD,MAAK,MAAM,OAAO;EAAC;EAAW;EAAc;EAAW;EAAO;EAAa;EAAS,EAAE;EACpF,MAAMA,MAAe,KAAK;AAC1B,MAAI,OAAO,QAAQ,YAAY,IAAK,QAAO;;;;;;AAQ/C,MAAM,eAAe,SAAmC;CACtD,MAAMC,QAAgB,KAAK,gBAAgB,KAAK,iBAAiB;CACjE,MAAMC,SAAiB,KAAK,iBAAiB,KAAK,kBAAkB;AACpE,KAAI,SAAS,OAAQ,QAAO,GAAG,MAAM,GAAG;AAExC,QAAO,KAAK,kBAAkB,KAAK,WAAW,SAAS,KAAK,eAAe,KAAK,YAAY;;;;;;;;;;;;;;AAe9F,MAAMC,kBAA2C,EAAC,MAAM,OAAO,IAAI,gBAAiD;AAIlH,QAAO,oBAAC;EAAO,UAHsB,OAAO,eAAe,KAAK,GAAG;EAGhC,MAFF,OAAO,YAAY,KAAK,GAAG;EAEP;EAAiB;GAAa;;AAGrF,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"BaseUserAvatar.js","names":["val: unknown","given: string","family: string","BaseUserAvatar: FC<BaseUserAvatarProps>"],"sources":["../../../../src/components/presentation/UserAvatar/BaseUserAvatar.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 {pickAnonymousAvatarName, User} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\n\nexport interface BaseUserAvatarProps {\n  /**\n   * Seed used to deterministically pick the anonymous avatar shown when `user` is `null`\n   * (e.g. a session or device identifier, so the same anonymous session keeps the same\n   * avatar across renders). Falls back to a random pick when omitted.\n   */\n  anonymousAvatarSeed?: string;\n  /**\n   * Optional CSS class name for the avatar container.\n   */\n  className?: string;\n  /**\n   * Size of the avatar in pixels.\n   * @default 40\n   */\n  size?: number;\n  /**\n   * The user object. When provided, the avatar derives the image URL and\n   * initials from the user's profile fields automatically. When `null`, a\n   * curated anonymous avatar is shown instead.\n   */\n  user: User | null;\n}\n\n/**\n * Resolves the profile picture URL from common user claim fields.\n */\nconst resolvePicture = (user: User): string | undefined => {\n  for (const key of ['picture', 'profileUrl', 'profile', 'URL', 'avatarUrl', 'avatar']) {\n    const val: unknown = user[key];\n    if (typeof val === 'string' && val) return val;\n  }\n  return undefined;\n};\n\n/**\n * Resolves a display name suitable for generating avatar initials.\n */\nconst resolveName = (user: User): string | undefined => {\n  const given: string = user['givenName'] || user['given_name'] || '';\n  const family: string = user['familyName'] || user['family_name'] || '';\n  if (given && family) return `${given} ${family}`;\n\n  return user['displayName'] || user['name'] || given || user['username'] || user['email'] || undefined;\n};\n\n/**\n * Base `UserAvatar` component. Renders an avatar derived from a user object\n * without any context dependency — pass the `user` prop explicitly.\n *\n * For the context-aware version that reads the signed-in user automatically,\n * use `UserAvatar`.\n *\n * @example\n * ```tsx\n * <BaseUserAvatar user={user} size={48} />\n * <BaseUserAvatar user={null} anonymousAvatarSeed={sessionId} size={48} />\n * ```\n */\nconst BaseUserAvatar: FC<BaseUserAvatarProps> = ({\n  user,\n  size = 40,\n  className,\n  anonymousAvatarSeed = undefined,\n}: BaseUserAvatarProps): JSX.Element => {\n  const imageUrl: string | undefined = useMemo(() => {\n    if (user) return resolvePicture(user);\n    return `avatar:variant=anonymous_animal,content=${pickAnonymousAvatarName(anonymousAvatarSeed)}`;\n  }, [user, anonymousAvatarSeed]);\n  const name: string | undefined = user ? resolveName(user) : undefined;\n\n  return <Avatar imageUrl={imageUrl} name={name} size={size} className={className} />;\n};\n\nBaseUserAvatar.displayName = 'BaseUserAvatar';\n\nexport default BaseUserAvatar;\n"],"mappings":";;;;;;;;;AAiDA,MAAM,kBAAkB,SAAmC;AACzD,MAAK,MAAM,OAAO;EAAC;EAAW;EAAc;EAAW;EAAO;EAAa;EAAS,EAAE;EACpF,MAAMA,MAAe,KAAK;AAC1B,MAAI,OAAO,QAAQ,YAAY,IAAK,QAAO;;;;;;AAQ/C,MAAM,eAAe,SAAmC;CACtD,MAAMC,QAAgB,KAAK,gBAAgB,KAAK,iBAAiB;CACjE,MAAMC,SAAiB,KAAK,iBAAiB,KAAK,kBAAkB;AACpE,KAAI,SAAS,OAAQ,QAAO,GAAG,MAAM,GAAG;AAExC,QAAO,KAAK,kBAAkB,KAAK,WAAW,SAAS,KAAK,eAAe,KAAK,YAAY;;;;;;;;;;;;;;;AAgB9F,MAAMC,kBAA2C,EAC/C,MACA,OAAO,IACP,WACA,sBAAsB,aACgB;AAOtC,QAAO,oBAAC;EAAO,UANsB,cAAc;AACjD,OAAI,KAAM,QAAO,eAAe,KAAK;AACrC,UAAO,2CAA2C,wBAAwB,oBAAoB;KAC7F,CAAC,MAAM,oBAAoB,CAAC;EAGI,MAFF,OAAO,YAAY,KAAK,GAAG;EAEP;EAAiB;GAAa;;AAGrF,eAAe,cAAc;AAE7B,6BAAe"}

package/dist/components/primitives/Avatar/Avatar.d.ts

@@ -34,7 +34,8 @@ export interface AvatarProps {
      */
     className?: string;
     /**
-     * The URL of the avatar image
+     * The avatar image. Accepts a plain URL, or any `resolveLogoUri`-compatible
+     * spec (`emoji:<glyph>`, or `avatar:shape=...,variant=...,content=...,colors=...,bg=...`).
      */
     imageUrl?: string;
     /**

package/dist/components/primitives/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,EAAC,EAAE,EAAe,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;CACjC;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAgHlC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,EAAC,EAAE,EAAe,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;CACjC;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA+HlC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/primitives/Avatar/Avatar.js

@@ -1,6 +1,6 @@
 import useTheme_default from "../../../contexts/Theme/useTheme.js";
 import Avatar_styles_default from "./Avatar.styles.js";
-import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { bem, resolveLogoUri, withVendorCSSClassPrefix } from "@thunderid/browser";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "@emotion/css";
@@ -8,6 +8,12 @@ import { cx } from "@emotion/css";
 //#region src/components/primitives/Avatar/Avatar.tsx
 const Avatar = ({ alt = "User avatar", background = "random", className = "", imageUrl, name, size = 64, variant = "circular", isLoading = false }) => {
 	const { theme, colorScheme } = useTheme_default();
+	const resolvedIcon = useMemo(() => imageUrl ? resolveLogoUri(imageUrl, name ?? alt) : void 0, [
+		imageUrl,
+		name,
+		alt
+	]);
+	const hasImage = resolvedIcon?.kind !== "emoji" && Boolean(resolvedIcon?.imgSrc);
 	const generateBackgroundColor = (inputString) => {
 		const hash = inputString.split("").reduce((acc, char) => {
 			const charCode = char.charCodeAt(0);
@@ -23,20 +29,25 @@ const Avatar = ({ alt = "User avatar", background = "random", className = "", im
 		return `linear-gradient(${45 + seed % 91}deg, ${generateColor(seed)})`;
 	};
 	const styles = Avatar_styles_default(theme, colorScheme, size, variant, useMemo(() => {
-		if (!name || imageUrl) return;
+		if (!name || hasImage) return;
 		if (background === "random") return generateBackgroundColor(name);
 		if (background === "none") return;
 		return background;
 	}, [
 		background,
 		name,
-		imageUrl
+		hasImage
 	]));
 	const isDefaultState = !imageUrl && !name && !isLoading;
 	const getInitials = (fullName) => fullName.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
 	const renderContent = () => {
-		if (imageUrl) return /* @__PURE__ */ jsx("img", {
-			src: imageUrl,
+		if (resolvedIcon?.kind === "emoji") return /* @__PURE__ */ jsx("span", {
+			role: "img",
+			"aria-label": alt,
+			children: resolvedIcon.glyph
+		});
+		if (hasImage) return /* @__PURE__ */ jsx("img", {
+			src: resolvedIcon?.imgSrc,
 			alt,
 			className: cx(withVendorCSSClassPrefix(bem("avatar", "image")), styles["image"])
 		});

package/dist/components/primitives/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["Avatar: FC<AvatarProps>","useTheme","hash: number","charCode: number","seed: number","hue1: number","hue2: number","saturation: number","styles: ReturnType<typeof useStyles>","useStyles","isDefaultState: boolean"],"sources":["../../../../src/components/primitives/Avatar/Avatar.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 {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport useStyles from './Avatar.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface AvatarProps {\n  /**\n   * Alternative text for the avatar image\n   */\n  alt?: string;\n  /**\n   * Background generation strategy\n   * - 'random': Generate background color based on ASCII values of the name\n   * - 'none': Use default theme background\n   * - string: Use custom background color\n   * @default 'random'\n   */\n  background?: 'random' | 'none' | string;\n  /**\n   * Optional className for the avatar\n   */\n  className?: string;\n  /**\n   * The URL of the avatar image\n   */\n  imageUrl?: string;\n  /**\n   * Loading state of the avatar\n   */\n  isLoading?: boolean;\n  /**\n   * The name to use for generating initials when no image is provided\n   */\n  name?: string;\n  /**\n   * The size of the avatar in pixels\n   */\n  size?: number;\n  /**\n   * The variant of the avatar shape\n   * @default 'circular'\n   */\n  variant?: 'circular' | 'square';\n}\n\nexport const Avatar: FC<AvatarProps> = ({\n  alt = 'User avatar',\n  background = 'random',\n  className = '',\n  imageUrl,\n  name,\n  size = 64,\n  variant = 'circular',\n  isLoading = false,\n}: AvatarProps): JSX.Element => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n\n  const generateBackgroundColor = (inputString: string): string => {\n    const hash: number = inputString.split('').reduce((acc: number, char: string) => {\n      const charCode: number = char.charCodeAt(0);\n\n      return ((acc << 5) - acc + charCode) & 0xffffffff;\n    }, 0);\n\n    const seed: number = Math.abs(hash);\n\n    const generateColor = (offset: number): string => {\n      const hue1: number = (seed + offset) % 360;\n      const hue2: number = (hue1 + 60 + (seed % 120)) % 360;\n\n      const saturation: number = 70 + (seed % 20);\n      const lightness1: number = 55 + (seed % 15);\n      const lightness2: number = 60 + ((seed + offset) % 15);\n\n      return `hsl(${hue1}, ${saturation}%, ${lightness1}%), hsl(${hue2}, ${saturation}%, ${lightness2}%)`;\n    };\n\n    const angle: number = 45 + (seed % 91);\n\n    const colors: string = generateColor(seed);\n    return `linear-gradient(${angle}deg, ${colors})`;\n  };\n\n  const backgroundColor: string | undefined = useMemo(() => {\n    if (!name || imageUrl) {\n      return undefined;\n    }\n\n    if (background === 'random') {\n      return generateBackgroundColor(name);\n    }\n\n    if (background === 'none') {\n      return undefined;\n    }\n\n    return background;\n  }, [background, name, imageUrl]);\n\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, size, variant, backgroundColor);\n\n  // Determine if we're in the default state (no image, no name, not loading)\n  const isDefaultState: boolean = !imageUrl && !name && !isLoading;\n\n  const getInitials = (fullName: string): string =>\n    fullName\n      .split(' ')\n      .map((part: string) => part[0])\n      .slice(0, 2)\n      .join('')\n      .toUpperCase();\n\n  const renderContent = (): JSX.Element | string => {\n    if (imageUrl) {\n      return (\n        <img\n          src={imageUrl}\n          alt={alt}\n          className={cx(withVendorCSSClassPrefix(bem('avatar', 'image')), styles['image'])}\n        />\n      );\n    }\n\n    if (name) {\n      return getInitials(name);\n    }\n\n    if (isLoading) {\n      return <div className={cx(withVendorCSSClassPrefix(bem('avatar', 'skeleton')), styles['skeleton'])} />;\n    }\n\n    // Default user icon\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 640 640\"\n        className={cx(withVendorCSSClassPrefix(bem('avatar', 'icon')), styles['icon'])}\n      >\n        <path d=\"M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z\" />\n      </svg>\n    );\n  };\n\n  return (\n    <div\n      className={cx(\n        withVendorCSSClassPrefix(bem('avatar')),\n        styles['avatar'],\n        styles['variant'],\n        withVendorCSSClassPrefix(bem('avatar', null, variant)),\n        isDefaultState && withVendorCSSClassPrefix(bem('avatar', 'default')),\n        className,\n      )}\n    >\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;AAgEA,MAAaA,UAA2B,EACtC,MAAM,eACN,aAAa,UACb,YAAY,IACZ,UACA,MACA,OAAO,IACP,UAAU,YACV,YAAY,YACkB;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CAEpE,MAAM,2BAA2B,gBAAgC;EAC/D,MAAMC,OAAe,YAAY,MAAM,GAAG,CAAC,QAAQ,KAAa,SAAiB;GAC/E,MAAMC,WAAmB,KAAK,WAAW,EAAE;AAE3C,WAAS,OAAO,KAAK,MAAM,WAAY;KACtC,EAAE;EAEL,MAAMC,OAAe,KAAK,IAAI,KAAK;EAEnC,MAAM,iBAAiB,WAA2B;GAChD,MAAMC,QAAgB,OAAO,UAAU;GACvC,MAAMC,QAAgB,OAAO,KAAM,OAAO,OAAQ;GAElD,MAAMC,aAAqB,KAAM,OAAO;AAIxC,UAAO,OAAO,KAAK,IAAI,WAAW,KAHP,KAAM,OAAO,GAGU,UAAU,KAAK,IAAI,WAAW,KAFrD,MAAO,OAAO,UAAU,GAE6C;;AAMlG,SAAO,mBAHe,KAAM,OAAO,GAGH,OADT,cAAc,KAAK,CACI;;CAmBhD,MAAMC,SAAuCC,sBAAU,OAAO,aAAa,MAAM,SAhBrC,cAAc;AACxD,MAAI,CAAC,QAAQ,SACX;AAGF,MAAI,eAAe,SACjB,QAAO,wBAAwB,KAAK;AAGtC,MAAI,eAAe,OACjB;AAGF,SAAO;IACN;EAAC;EAAY;EAAM;EAAS,CAAC,CAE0E;CAG1G,MAAMC,iBAA0B,CAAC,YAAY,CAAC,QAAQ,CAAC;CAEvD,MAAM,eAAe,aACnB,SACG,MAAM,IAAI,CACV,KAAK,SAAiB,KAAK,GAAG,CAC9B,MAAM,GAAG,EAAE,CACX,KAAK,GAAG,CACR,aAAa;CAElB,MAAM,sBAA4C;AAChD,MAAI,SACF,QACE,oBAAC;GACC,KAAK;GACA;GACL,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;IAChF;AAIN,MAAI,KACF,QAAO,YAAY,KAAK;AAG1B,MAAI,UACF,QAAO,oBAAC,SAAI,WAAW,GAAG,yBAAyB,IAAI,UAAU,WAAW,CAAC,EAAE,OAAO,YAAY,GAAI;AAIxG,SACE,oBAAC;GACC,OAAM;GACN,SAAQ;GACR,WAAW,GAAG,yBAAyB,IAAI,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;aAE9E,oBAAC,UAAK,GAAE,ygBAAygB;IAC7gB;;AAIV,QACE,oBAAC;EACC,WAAW,GACT,yBAAyB,IAAI,SAAS,CAAC,EACvC,OAAO,WACP,OAAO,YACP,yBAAyB,IAAI,UAAU,MAAM,QAAQ,CAAC,EACtD,kBAAkB,yBAAyB,IAAI,UAAU,UAAU,CAAC,EACpE,UACD;YAEA,eAAe;GACZ"}
+{"version":3,"file":"Avatar.js","names":["Avatar: FC<AvatarProps>","useTheme","resolvedIcon: ResolvedLogo | undefined","hasImage: boolean","hash: number","charCode: number","seed: number","hue1: number","hue2: number","saturation: number","styles: ReturnType<typeof useStyles>","useStyles","isDefaultState: boolean"],"sources":["../../../../src/components/primitives/Avatar/Avatar.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 {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem, resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport useStyles from './Avatar.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface AvatarProps {\n  /**\n   * Alternative text for the avatar image\n   */\n  alt?: string;\n  /**\n   * Background generation strategy\n   * - 'random': Generate background color based on ASCII values of the name\n   * - 'none': Use default theme background\n   * - string: Use custom background color\n   * @default 'random'\n   */\n  background?: 'random' | 'none' | string;\n  /**\n   * Optional className for the avatar\n   */\n  className?: string;\n  /**\n   * The avatar image. Accepts a plain URL, or any `resolveLogoUri`-compatible\n   * spec (`emoji:<glyph>`, or `avatar:shape=...,variant=...,content=...,colors=...,bg=...`).\n   */\n  imageUrl?: string;\n  /**\n   * Loading state of the avatar\n   */\n  isLoading?: boolean;\n  /**\n   * The name to use for generating initials when no image is provided\n   */\n  name?: string;\n  /**\n   * The size of the avatar in pixels\n   */\n  size?: number;\n  /**\n   * The variant of the avatar shape\n   * @default 'circular'\n   */\n  variant?: 'circular' | 'square';\n}\n\nexport const Avatar: FC<AvatarProps> = ({\n  alt = 'User avatar',\n  background = 'random',\n  className = '',\n  imageUrl,\n  name,\n  size = 64,\n  variant = 'circular',\n  isLoading = false,\n}: AvatarProps): JSX.Element => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n\n  const resolvedIcon: ResolvedLogo | undefined = useMemo(\n    () => (imageUrl ? resolveLogoUri(imageUrl, name ?? alt) : undefined),\n    [imageUrl, name, alt],\n  );\n\n  const hasImage: boolean = resolvedIcon?.kind !== 'emoji' && Boolean(resolvedIcon?.imgSrc);\n\n  const generateBackgroundColor = (inputString: string): string => {\n    const hash: number = inputString.split('').reduce((acc: number, char: string) => {\n      const charCode: number = char.charCodeAt(0);\n\n      return ((acc << 5) - acc + charCode) & 0xffffffff;\n    }, 0);\n\n    const seed: number = Math.abs(hash);\n\n    const generateColor = (offset: number): string => {\n      const hue1: number = (seed + offset) % 360;\n      const hue2: number = (hue1 + 60 + (seed % 120)) % 360;\n\n      const saturation: number = 70 + (seed % 20);\n      const lightness1: number = 55 + (seed % 15);\n      const lightness2: number = 60 + ((seed + offset) % 15);\n\n      return `hsl(${hue1}, ${saturation}%, ${lightness1}%), hsl(${hue2}, ${saturation}%, ${lightness2}%)`;\n    };\n\n    const angle: number = 45 + (seed % 91);\n\n    const colors: string = generateColor(seed);\n    return `linear-gradient(${angle}deg, ${colors})`;\n  };\n\n  const backgroundColor: string | undefined = useMemo(() => {\n    if (!name || hasImage) {\n      return undefined;\n    }\n\n    if (background === 'random') {\n      return generateBackgroundColor(name);\n    }\n\n    if (background === 'none') {\n      return undefined;\n    }\n\n    return background;\n  }, [background, name, hasImage]);\n\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, size, variant, backgroundColor);\n\n  // Determine if we're in the default state (no image, no name, not loading)\n  const isDefaultState: boolean = !imageUrl && !name && !isLoading;\n\n  const getInitials = (fullName: string): string =>\n    fullName\n      .split(' ')\n      .map((part: string) => part[0])\n      .slice(0, 2)\n      .join('')\n      .toUpperCase();\n\n  const renderContent = (): JSX.Element | string => {\n    if (resolvedIcon?.kind === 'emoji') {\n      return (\n        <span role=\"img\" aria-label={alt}>\n          {resolvedIcon.glyph}\n        </span>\n      );\n    }\n\n    if (hasImage) {\n      return (\n        <img\n          src={resolvedIcon?.imgSrc}\n          alt={alt}\n          className={cx(withVendorCSSClassPrefix(bem('avatar', 'image')), styles['image'])}\n        />\n      );\n    }\n\n    if (name) {\n      return getInitials(name);\n    }\n\n    if (isLoading) {\n      return <div className={cx(withVendorCSSClassPrefix(bem('avatar', 'skeleton')), styles['skeleton'])} />;\n    }\n\n    // Default user icon\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 640 640\"\n        className={cx(withVendorCSSClassPrefix(bem('avatar', 'icon')), styles['icon'])}\n      >\n        <path d=\"M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z\" />\n      </svg>\n    );\n  };\n\n  return (\n    <div\n      className={cx(\n        withVendorCSSClassPrefix(bem('avatar')),\n        styles['avatar'],\n        styles['variant'],\n        withVendorCSSClassPrefix(bem('avatar', null, variant)),\n        isDefaultState && withVendorCSSClassPrefix(bem('avatar', 'default')),\n        className,\n      )}\n    >\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;AAiEA,MAAaA,UAA2B,EACtC,MAAM,eACN,aAAa,UACb,YAAY,IACZ,UACA,MACA,OAAO,IACP,UAAU,YACV,YAAY,YACkB;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CAEpE,MAAMC,eAAyC,cACtC,WAAW,eAAe,UAAU,QAAQ,IAAI,GAAG,QAC1D;EAAC;EAAU;EAAM;EAAI,CACtB;CAED,MAAMC,WAAoB,cAAc,SAAS,WAAW,QAAQ,cAAc,OAAO;CAEzF,MAAM,2BAA2B,gBAAgC;EAC/D,MAAMC,OAAe,YAAY,MAAM,GAAG,CAAC,QAAQ,KAAa,SAAiB;GAC/E,MAAMC,WAAmB,KAAK,WAAW,EAAE;AAE3C,WAAS,OAAO,KAAK,MAAM,WAAY;KACtC,EAAE;EAEL,MAAMC,OAAe,KAAK,IAAI,KAAK;EAEnC,MAAM,iBAAiB,WAA2B;GAChD,MAAMC,QAAgB,OAAO,UAAU;GACvC,MAAMC,QAAgB,OAAO,KAAM,OAAO,OAAQ;GAElD,MAAMC,aAAqB,KAAM,OAAO;AAIxC,UAAO,OAAO,KAAK,IAAI,WAAW,KAHP,KAAM,OAAO,GAGU,UAAU,KAAK,IAAI,WAAW,KAFrD,MAAO,OAAO,UAAU,GAE6C;;AAMlG,SAAO,mBAHe,KAAM,OAAO,GAGH,OADT,cAAc,KAAK,CACI;;CAmBhD,MAAMC,SAAuCC,sBAAU,OAAO,aAAa,MAAM,SAhBrC,cAAc;AACxD,MAAI,CAAC,QAAQ,SACX;AAGF,MAAI,eAAe,SACjB,QAAO,wBAAwB,KAAK;AAGtC,MAAI,eAAe,OACjB;AAGF,SAAO;IACN;EAAC;EAAY;EAAM;EAAS,CAAC,CAE0E;CAG1G,MAAMC,iBAA0B,CAAC,YAAY,CAAC,QAAQ,CAAC;CAEvD,MAAM,eAAe,aACnB,SACG,MAAM,IAAI,CACV,KAAK,SAAiB,KAAK,GAAG,CAC9B,MAAM,GAAG,EAAE,CACX,KAAK,GAAG,CACR,aAAa;CAElB,MAAM,sBAA4C;AAChD,MAAI,cAAc,SAAS,QACzB,QACE,oBAAC;GAAK,MAAK;GAAM,cAAY;aAC1B,aAAa;IACT;AAIX,MAAI,SACF,QACE,oBAAC;GACC,KAAK,cAAc;GACd;GACL,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;IAChF;AAIN,MAAI,KACF,QAAO,YAAY,KAAK;AAG1B,MAAI,UACF,QAAO,oBAAC,SAAI,WAAW,GAAG,yBAAyB,IAAI,UAAU,WAAW,CAAC,EAAE,OAAO,YAAY,GAAI;AAIxG,SACE,oBAAC;GACC,OAAM;GACN,SAAQ;GACR,WAAW,GAAG,yBAAyB,IAAI,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;aAE9E,oBAAC,UAAK,GAAE,ygBAAygB;IAC7gB;;AAIV,QACE,oBAAC;EACC,WAAW,GACT,yBAAyB,IAAI,SAAS,CAAC,EACvC,OAAO,WACP,OAAO,YACP,yBAAyB,IAAI,UAAU,MAAM,QAAQ,CAAC,EACtD,kBAAkB,yBAAyB,IAAI,UAAU,UAAU,CAAC,EACpE,UACD;YAEA,eAAe;GACZ"}

package/dist/components/primitives/Logo/Logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Logo/Logo.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA8BvB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Logo/Logo.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAmDvB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/primitives/Logo/Logo.js

@@ -1,6 +1,6 @@
 import useTheme_default from "../../../contexts/Theme/useTheme.js";
 import Logo_styles_default from "./Logo.styles.js";
-import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { bem, resolveLogoUri, withVendorCSSClassPrefix } from "@thunderid/browser";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "@emotion/css";
 
@@ -15,12 +15,20 @@ const Logo = ({ className, src, alt, title, size = "medium" }) => {
 	const { theme, colorScheme } = useTheme_default();
 	const styles = Logo_styles_default(theme, colorScheme, size);
 	const logoConfig = theme.images?.logo;
-	const logoSrc = src || logoConfig?.["url"];
+	const logoSpec = src || logoConfig?.["url"];
 	const logoAlt = alt || logoConfig?.["alt"] || "Logo";
 	const logoTitle = title || logoConfig?.["title"];
-	if (!logoSrc) return null;
+	if (!logoSpec) return null;
+	const resolvedLogo = resolveLogoUri(logoSpec, logoAlt);
+	if (resolvedLogo.kind === "emoji") return /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": logoAlt,
+		title: logoTitle,
+		className: cx(withVendorCSSClassPrefix(bem("logo")), withVendorCSSClassPrefix(bem("logo", size)), styles["emoji"], styles["emojiSize"], className),
+		children: resolvedLogo.glyph
+	});
 	return /* @__PURE__ */ jsx("img", {
-		src: logoSrc,
+		src: resolvedLogo.imgSrc,
 		alt: logoAlt,
 		title: logoTitle,
 		className: cx(withVendorCSSClassPrefix(bem("logo")), withVendorCSSClassPrefix(bem("logo", size)), styles["logo"], styles["size"], className)

package/dist/components/primitives/Logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","names":["Logo: FC<LogoProps>","useTheme","styles: Record<string, string>","useStyles","logoConfig: Record<string, string> | undefined","logoSrc: string | undefined","logoAlt: string","logoTitle: string | undefined"],"sources":["../../../../src/components/primitives/Logo/Logo.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 {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC} from 'react';\nimport useStyles from './Logo.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Props for the Logo component.\n */\nexport interface LogoProps {\n  /**\n   * Custom alt text for the logo.\n   */\n  alt?: string;\n  /**\n   * Custom CSS class name for the logo.\n   */\n  className?: string;\n  /**\n   * Size of the logo.\n   */\n  size?: LogoSize;\n  /**\n   * Custom logo URL to override theme logo.\n   */\n  src?: string;\n  /**\n   * Custom title for the logo.\n   */\n  title?: string;\n}\n\n/**\n * Logo component that displays the brand logo from theme or custom source.\n *\n * @param props - The props for the Logo component.\n * @returns The rendered Logo component.\n */\nconst Logo: FC<LogoProps> = ({className, src, alt, title, size = 'medium'}: LogoProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, size);\n\n  const logoConfig: Record<string, string> | undefined = theme.images?.logo as Record<string, string> | undefined;\n\n  const logoSrc: string | undefined = src || logoConfig?.['url'];\n\n  const logoAlt: string = alt || logoConfig?.['alt'] || 'Logo';\n\n  const logoTitle: string | undefined = title || logoConfig?.['title'];\n\n  if (!logoSrc) {\n    return null;\n  }\n\n  return (\n    <img\n      src={logoSrc}\n      alt={logoAlt}\n      title={logoTitle}\n      className={cx(\n        withVendorCSSClassPrefix(bem('logo')),\n        withVendorCSSClassPrefix(bem('logo', size)),\n        styles['logo'],\n        styles['size'],\n        className,\n      )}\n    />\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;;;;AA0DA,MAAMA,QAAuB,EAAC,WAAW,KAAK,KAAK,OAAO,OAAO,eAAyB;CACxF,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,oBAAU,OAAO,aAAa,KAAK;CAE1E,MAAMC,aAAiD,MAAM,QAAQ;CAErE,MAAMC,UAA8B,OAAO,aAAa;CAExD,MAAMC,UAAkB,OAAO,aAAa,UAAU;CAEtD,MAAMC,YAAgC,SAAS,aAAa;AAE5D,KAAI,CAAC,QACH,QAAO;AAGT,QACE,oBAAC;EACC,KAAK;EACL,KAAK;EACL,OAAO;EACP,WAAW,GACT,yBAAyB,IAAI,OAAO,CAAC,EACrC,yBAAyB,IAAI,QAAQ,KAAK,CAAC,EAC3C,OAAO,SACP,OAAO,SACP,UACD;GACD;;AAIN,mBAAe"}
+{"version":3,"file":"Logo.js","names":["Logo: FC<LogoProps>","useTheme","styles: Record<string, string>","useStyles","logoConfig: Record<string, string> | undefined","logoSpec: string | undefined","logoAlt: string","logoTitle: string | undefined","resolvedLogo: ResolvedLogo"],"sources":["../../../../src/components/primitives/Logo/Logo.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 {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem, resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC} from 'react';\nimport useStyles from './Logo.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Props for the Logo component.\n */\nexport interface LogoProps {\n  /**\n   * Custom alt text for the logo.\n   */\n  alt?: string;\n  /**\n   * Custom CSS class name for the logo.\n   */\n  className?: string;\n  /**\n   * Size of the logo.\n   */\n  size?: LogoSize;\n  /**\n   * Custom logo URL to override theme logo.\n   */\n  src?: string;\n  /**\n   * Custom title for the logo.\n   */\n  title?: string;\n}\n\n/**\n * Logo component that displays the brand logo from theme or custom source.\n *\n * @param props - The props for the Logo component.\n * @returns The rendered Logo component.\n */\nconst Logo: FC<LogoProps> = ({className, src, alt, title, size = 'medium'}: LogoProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, size);\n\n  const logoConfig: Record<string, string> | undefined = theme.images?.logo as Record<string, string> | undefined;\n\n  const logoSpec: string | undefined = src || logoConfig?.['url'];\n\n  const logoAlt: string = alt || logoConfig?.['alt'] || 'Logo';\n\n  const logoTitle: string | undefined = title || logoConfig?.['title'];\n\n  if (!logoSpec) {\n    return null;\n  }\n\n  const resolvedLogo: ResolvedLogo = resolveLogoUri(logoSpec, logoAlt);\n\n  if (resolvedLogo.kind === 'emoji') {\n    return (\n      <span\n        role=\"img\"\n        aria-label={logoAlt}\n        title={logoTitle}\n        className={cx(\n          withVendorCSSClassPrefix(bem('logo')),\n          withVendorCSSClassPrefix(bem('logo', size)),\n          styles['emoji'],\n          styles['emojiSize'],\n          className,\n        )}\n      >\n        {resolvedLogo.glyph}\n      </span>\n    );\n  }\n\n  return (\n    <img\n      src={resolvedLogo.imgSrc}\n      alt={logoAlt}\n      title={logoTitle}\n      className={cx(\n        withVendorCSSClassPrefix(bem('logo')),\n        withVendorCSSClassPrefix(bem('logo', size)),\n        styles['logo'],\n        styles['size'],\n        className,\n      )}\n    />\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;;;;AA0DA,MAAMA,QAAuB,EAAC,WAAW,KAAK,KAAK,OAAO,OAAO,eAAyB;CACxF,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,oBAAU,OAAO,aAAa,KAAK;CAE1E,MAAMC,aAAiD,MAAM,QAAQ;CAErE,MAAMC,WAA+B,OAAO,aAAa;CAEzD,MAAMC,UAAkB,OAAO,aAAa,UAAU;CAEtD,MAAMC,YAAgC,SAAS,aAAa;AAE5D,KAAI,CAAC,SACH,QAAO;CAGT,MAAMC,eAA6B,eAAe,UAAU,QAAQ;AAEpE,KAAI,aAAa,SAAS,QACxB,QACE,oBAAC;EACC,MAAK;EACL,cAAY;EACZ,OAAO;EACP,WAAW,GACT,yBAAyB,IAAI,OAAO,CAAC,EACrC,yBAAyB,IAAI,QAAQ,KAAK,CAAC,EAC3C,OAAO,UACP,OAAO,cACP,UACD;YAEA,aAAa;GACT;AAIX,QACE,oBAAC;EACC,KAAK,aAAa;EAClB,KAAK;EACL,OAAO;EACP,WAAW,GACT,yBAAyB,IAAI,OAAO,CAAC,EACrC,yBAAyB,IAAI,QAAQ,KAAK,CAAC,EAC3C,OAAO,SACP,OAAO,SACP,UACD;GACD;;AAIN,mBAAe"}

package/dist/components/primitives/Logo/Logo.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Logo/Logo.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD;;;;;;GAMG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,EAAE,MAAM,QAAQ,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAoC5D,CAAC;AAEjC,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Logo.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Logo/Logo.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD;;;;;;GAMG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,EAAE,MAAM,QAAQ,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA+D5D,CAAC;AAEjC,eAAe,SAAS,CAAC"}

package/dist/components/primitives/Logo/Logo.styles.js

@@ -27,15 +27,39 @@ const useStyles = (theme, colorScheme, size) => useMemo(() => {
       height: 64px;
       max-width: 240px;
     `;
+	const sizeStyles = {
+		large: largeLogo,
+		medium: mediumLogo,
+		small: smallLogo
+	};
 	return {
+		emoji: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+    `,
+		emojiSize: {
+			large: css`
+        width: 64px;
+        height: 64px;
+        font-size: 36px;
+      `,
+			medium: css`
+        width: 48px;
+        height: 48px;
+        font-size: 28px;
+      `,
+			small: css`
+        width: 32px;
+        height: 32px;
+        font-size: 20px;
+      `
+		}[size],
 		large: largeLogo,
 		logo: baseLogo,
 		medium: mediumLogo,
-		size: {
-			large: largeLogo,
-			medium: mediumLogo,
-			small: smallLogo
-		}[size],
+		size: sizeStyles[size],
 		small: smallLogo
 	};
 }, [

package/dist/components/primitives/Logo/Logo.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.styles.js","names":["baseLogo: string","smallLogo: string","mediumLogo: string","largeLogo: string"],"sources":["../../../../src/components/primitives/Logo/Logo.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\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Logo component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the logo\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: LogoSize): Record<string, string> =>\n  useMemo(() => {\n    const baseLogo: string = css`\n      width: auto;\n      object-fit: contain;\n      display: block;\n    `;\n\n    const smallLogo: string = css`\n      height: 32px;\n      max-width: 120px;\n    `;\n\n    const mediumLogo: string = css`\n      height: 48px;\n      max-width: 180px;\n    `;\n\n    const largeLogo: string = css`\n      height: 64px;\n      max-width: 240px;\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: largeLogo,\n      medium: mediumLogo,\n      small: smallLogo,\n    };\n\n    return {\n      large: largeLogo,\n      logo: baseLogo,\n      medium: mediumLogo,\n      size: sizeStyles[size],\n      small: smallLogo,\n    };\n  }, [theme, colorScheme, size]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,aAAa,OAAc,aAAqB,SACpD,cAAc;CACZ,MAAMA,WAAmB,GAAG;;;;;CAM5B,MAAMC,YAAoB,GAAG;;;;CAK7B,MAAMC,aAAqB,GAAG;;;;CAK9B,MAAMC,YAAoB,GAAG;;;;AAW7B,QAAO;EACL,OAAO;EACP,MAAM;EACN,QAAQ;EACR,MAVyC;GACzC,OAAO;GACP,QAAQ;GACR,OAAO;GACR,CAMkB;EACjB,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAK,CAAC;AAEhC,0BAAe"}
+{"version":3,"file":"Logo.styles.js","names":["baseLogo: string","smallLogo: string","mediumLogo: string","largeLogo: string","sizeStyles: Record<string, string>"],"sources":["../../../../src/components/primitives/Logo/Logo.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\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Logo component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the logo\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: LogoSize): Record<string, string> =>\n  useMemo(() => {\n    const baseLogo: string = css`\n      width: auto;\n      object-fit: contain;\n      display: block;\n    `;\n\n    const smallLogo: string = css`\n      height: 32px;\n      max-width: 120px;\n    `;\n\n    const mediumLogo: string = css`\n      height: 48px;\n      max-width: 180px;\n    `;\n\n    const largeLogo: string = css`\n      height: 64px;\n      max-width: 240px;\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: largeLogo,\n      medium: mediumLogo,\n      small: smallLogo,\n    };\n\n    const baseEmoji: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n    `;\n\n    const emojiSizeStyles: Record<LogoSize, string> = {\n      large: css`\n        width: 64px;\n        height: 64px;\n        font-size: 36px;\n      `,\n      medium: css`\n        width: 48px;\n        height: 48px;\n        font-size: 28px;\n      `,\n      small: css`\n        width: 32px;\n        height: 32px;\n        font-size: 20px;\n      `,\n    };\n\n    return {\n      emoji: baseEmoji,\n      emojiSize: emojiSizeStyles[size],\n      large: largeLogo,\n      logo: baseLogo,\n      medium: mediumLogo,\n      size: sizeStyles[size],\n      small: smallLogo,\n    };\n  }, [theme, colorScheme, size]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,aAAa,OAAc,aAAqB,SACpD,cAAc;CACZ,MAAMA,WAAmB,GAAG;;;;;CAM5B,MAAMC,YAAoB,GAAG;;;;CAK7B,MAAMC,aAAqB,GAAG;;;;CAK9B,MAAMC,YAAoB,GAAG;;;;CAK7B,MAAMC,aAAqC;EACzC,OAAO;EACP,QAAQ;EACR,OAAO;EACR;AA2BD,QAAO;EACL,OA1BwB,GAAG;;;;;;EA2B3B,WApBgD;GAChD,OAAO,GAAG;;;;;GAKV,QAAQ,GAAG;;;;;GAKX,OAAO,GAAG;;;;;GAKX,CAI4B;EAC3B,OAAO;EACP,MAAM;EACN,QAAQ;EACR,MAAM,WAAW;EACjB,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAK,CAAC;AAEhC,0BAAe"}

package/dist/index.d.ts

@@ -166,5 +166,5 @@ export { default as updateMeProfile } from './api/updateMeProfile';
 export type { UpdateMeProfileConfig } from './api/updateMeProfile';
 export { default as getMeProfile } from './api/getUsersMe';
 export * from './api/getUsersMe';
-export { ThunderIDRuntimeError, http, getActiveTheme, navigate, resolveEmojiUrisInHtml, isEmojiUri, EMOJI_URI_SCHEME, extractEmojiFromUri, resolveMeta, resolveFlowTemplateLiterals, countryCodeToFlagEmoji, resolveLocaleDisplayName, resolveLocaleEmoji, EmbeddedFlowComponentType, EmbeddedFlowActionVariant, EmbeddedFlowTextVariant, EmbeddedFlowEventType, type EmbeddedFlowComponent, type EmbeddedFlowResponseData, type EmbeddedFlowExecuteRequestConfig, EmbeddedSignInFlowStatus, EmbeddedSignInFlowType, type ExtendedEmbeddedSignInFlowResponse, type EmbeddedSignInFlowResponse, type EmbeddedSignInFlowCompleteResponse, type EmbeddedSignInFlowInitiateRequest, type EmbeddedSignInFlowRequest, EmbeddedSignUpFlowStatus, EmbeddedSignUpFlowType, type ExtendedEmbeddedSignUpFlowResponse, type EmbeddedSignUpFlowResponse, type EmbeddedSignUpFlowCompleteResponse, type EmbeddedSignUpFlowInitiateRequest, type EmbeddedSignUpFlowRequest, type EmbeddedSignUpFlowErrorResponse, type ComponentRenderContext, type ComponentsExtensions, type ComponentRenderer, EmbeddedRecoveryFlowStatus, EmbeddedRecoveryFlowType, type EmbeddedRecoveryFlowResponse, type EmbeddedRecoveryFlowInitiateRequest, type EmbeddedRecoveryFlowRequest, type EmbeddedRecoveryFlowErrorResponse, } from '@thunderid/browser';
+export { ThunderIDRuntimeError, http, getActiveTheme, navigate, resolveEmojiUrisInHtml, isEmojiUri, EMOJI_URI_SCHEME, extractEmojiFromUri, resolveLogoUri, type ResolvedLogo, resolveMeta, resolveFlowTemplateLiterals, countryCodeToFlagEmoji, resolveLocaleDisplayName, resolveLocaleEmoji, EmbeddedFlowComponentType, EmbeddedFlowActionVariant, EmbeddedFlowTextVariant, EmbeddedFlowEventType, type EmbeddedFlowComponent, type EmbeddedFlowResponseData, type EmbeddedFlowExecuteRequestConfig, EmbeddedSignInFlowStatus, EmbeddedSignInFlowType, type ExtendedEmbeddedSignInFlowResponse, type EmbeddedSignInFlowResponse, type EmbeddedSignInFlowCompleteResponse, type EmbeddedSignInFlowInitiateRequest, type EmbeddedSignInFlowRequest, EmbeddedSignUpFlowStatus, EmbeddedSignUpFlowType, type ExtendedEmbeddedSignUpFlowResponse, type EmbeddedSignUpFlowResponse, type EmbeddedSignUpFlowCompleteResponse, type EmbeddedSignUpFlowInitiateRequest, type EmbeddedSignUpFlowRequest, type EmbeddedSignUpFlowErrorResponse, type ComponentRenderContext, type ComponentsExtensions, type ComponentRenderer, EmbeddedRecoveryFlowStatus, EmbeddedRecoveryFlowType, type EmbeddedRecoveryFlowResponse, type EmbeddedRecoveryFlowInitiateRequest, type EmbeddedRecoveryFlowRequest, type EmbeddedRecoveryFlowErrorResponse, } from '@thunderid/browser';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,MAAM,wCAAwC,CAAC;AACpF,cAAc,wCAAwC,CAAC;AAEvD,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,uCAAuC,CAAC;AAClF,cAAc,uCAAuC,CAAC;AAEtD,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAE1E,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,6BAA6B,CAAC;AACnE,cAAc,6BAA6B,CAAC;AAE5C,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,8BAA8B,CAAC;AACrE,cAAc,8BAA8B,CAAC;AAE7C,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,6BAA6B,CAAC;AACnE,YAAY,EAAC,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAC,MAAM,6BAA6B,CAAC;AAEzF,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,8BAA8B,CAAC;AACrE,YAAY,EAAC,iBAAiB,EAAC,MAAM,8BAA8B,CAAC;AAEpE,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,sCAAsC,CAAC;AACjF,YAAY,EAAC,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AAEhF,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,6BAA6B,CAAC;AACnE,cAAc,6BAA6B,CAAC;AAE5C,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,8BAA8B,CAAC;AACrE,cAAc,8BAA8B,CAAC;AAE7C,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,+BAA+B,CAAC;AACtE,cAAc,+BAA+B,CAAC;AAE9C,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,gCAAgC,CAAC;AACxE,cAAc,gCAAgC,CAAC;AAE/C,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,2BAA2B,CAAC;AAE9D,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAC/D,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,wBAAwB,CAAC;AACjE,cAAc,wBAAwB,CAAC;AAEvC,OAAO,EAAC,qBAAqB,EAAE,mBAAmB,EAAC,MAAM,yBAAyB,CAAC;AAEnF,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AAC/F,cAAc,oDAAoD,CAAC;AAEnE,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gDAAgD,CAAC;AACvF,cAAc,gDAAgD,CAAC;AAE/D,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,MAAM,sDAAsD,CAAC;AAClG,cAAc,sDAAsD,CAAC;AAErE,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,kDAAkD,CAAC;AAC1F,cAAc,kDAAkD,CAAC;AAEjE,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AAC/F,cAAc,oDAAoD,CAAC;AAEnE,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gDAAgD,CAAC;AACvF,cAAc,gDAAgD,CAAC;AAE/D,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,+BAA+B,CAAC;AAClE,cAAc,+BAA+B,CAAC;AAE9C,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,gCAAgC,CAAC;AACpE,cAAc,gCAAgC,CAAC;AAE/C,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,8BAA8B,CAAC;AAChE,cAAc,8BAA8B,CAAC;AAE7C,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,kDAAkD,CAAC;AACvF,cAAc,kDAAkD,CAAC;AAEjE,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,8CAA8C,CAAC;AAC/E,cAAc,8CAA8C,CAAC;AAE7D,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,kDAAkD,CAAC;AACvF,cAAc,kDAAkD,CAAC;AAEjE,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,8CAA8C,CAAC;AAC/E,cAAc,8CAA8C,CAAC;AAE7D,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,sDAAsD,CAAC;AAC7F,cAAc,sDAAsD,CAAC;AAErE,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,kDAAkD,CAAC;AACrF,cAAc,kDAAkD,CAAC;AAEjE,cAAc,2CAA2C,CAAC;AAE1D,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,6CAA6C,CAAC;AAC3F,YAAY,EAAC,wBAAwB,EAAC,MAAM,6CAA6C,CAAC;AAE1F,cAAc,qCAAqC,CAAC;AACpD,cAAc,0CAA0C,CAAC;AACzD,cAAc,0CAA0C,CAAC;AAEzD,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAC,OAAO,IAAI,wBAAwB,EAAC,MAAM,gDAAgD,CAAC;AAEnG,OAAO,EAAC,gBAAgB,EAAC,MAAM,0BAA0B,CAAC;AAC1D,YAAY,EAAC,uBAAuB,EAAE,oBAAoB,EAAC,MAAM,0BAA0B,CAAC;AAE5F,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,iCAAiC,CAAC;AACrE,cAAc,iCAAiC,CAAC;AAEhD,OAAO,EAAC,OAAO,IAAI,mBAAmB,EAAC,MAAM,2CAA2C,CAAC;AACzF,cAAc,2CAA2C,CAAC;AAE1D,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,+BAA+B,CAAC;AACjE,cAAc,+BAA+B,CAAC;AAE9C,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,yCAAyC,CAAC;AAC5E,cAAc,yCAAyC,CAAC;AAExD,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,qCAAqC,CAAC;AACpE,cAAc,qCAAqC,CAAC;AAEpD,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,MAAM,uDAAuD,CAAC;AACjG,cAAc,uDAAuD,CAAC;AAEtE,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,mDAAmD,CAAC;AACzF,cAAc,mDAAmD,CAAC;AAElE,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,qDAAqD,CAAC;AAC9F,cAAc,qDAAqD,CAAC;AAEpE,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,iDAAiD,CAAC;AACtF,cAAc,iDAAiD,CAAC;AAEhE,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,yDAAyD,CAAC;AACpG,YAAY,EAAC,qBAAqB,EAAC,MAAM,yDAAyD,CAAC;AAEnG,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,qDAAqD,CAAC;AAC5F,cAAc,qDAAqD,CAAC;AAEpE,OAAO,EAAC,OAAO,IAAI,oBAAoB,EAAC,MAAM,iEAAiE,CAAC;AAChH,YAAY,EACV,yBAAyB,EACzB,cAAc,EACd,2BAA2B,GAC5B,MAAM,iEAAiE,CAAC;AAEzE,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,6DAA6D,CAAC;AACxG,YAAY,EAAC,qBAAqB,EAAC,MAAM,6DAA6D,CAAC;AAEvG,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,uCAAuC,CAAC;AACxE,cAAc,uCAAuC,CAAC;AAEtD,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,mCAAmC,CAAC;AAElE,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,qCAAqC,CAAC;AAErE,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,2CAA2C,CAAC;AAC9E,cAAc,2CAA2C,CAAC;AAE1D,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,6CAA6C,CAAC;AACjF,cAAc,6CAA6C,CAAC;AAE5D,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,+CAA+C,CAAC;AACpF,cAAc,+CAA+C,CAAC;AAE9D,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,qDAAqD,CAAC;AAC7F,cAAc,qDAAqD,CAAC;AAEpE,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,uCAAuC,CAAC;AACxE,cAAc,uCAAuC,CAAC;AAEtD,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,+CAA+C,CAAC;AACpF,cAAc,+CAA+C,CAAC;AAE9D,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,2CAA2C,CAAC;AAC9E,cAAc,2CAA2C,CAAC;AAE1D,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,uCAAuC,CAAC;AACxE,cAAc,uCAAuC,CAAC;AAEtD,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,iDAAiD,CAAC;AACvF,cAAc,iDAAiD,CAAC;AAEhE,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,+CAA+C,CAAC;AACpF,cAAc,+CAA+C,CAAC;AAE9D,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,qDAAqD,CAAC;AAC7F,cAAc,qDAAqD,CAAC;AAEpE,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,+CAA+C,CAAC;AACpF,cAAc,+CAA+C,CAAC;AAE9D,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,yCAAyC,CAAC;AAC3E,cAAc,yCAAyC,CAAC;AAExD,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,mCAAmC,CAAC;AAClE,cAAc,mCAAmC,CAAC;AAElD,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,yCAAyC,CAAC;AAC3E,cAAc,yCAAyC,CAAC;AAExD,OAAO,EAAC,OAAO,IAAI,GAAG,EAAC,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,sCAAsC,CAAC;AAEvE,OAAO,EAAC,WAAW,EAAE,YAAY,EAAE,kBAAkB,EAAC,MAAM,qCAAqC,CAAC;AAElG,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,2CAA2C,CAAC;AAEjF,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,MAAM,uBAAuB,CAAC;AACjE,YAAY,EAAC,qBAAqB,EAAC,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACzD,cAAc,kBAAkB,CAAC;AAEjC,OAAO,EACL,qBAAqB,EACrB,IAAI,EACJ,cAAc,EACd,QAAQ,EACR,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACX,2BAA2B,EAC3B,sBAAsB,EACtB,wBAAwB,EACxB,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACvB,qBAAqB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,gCAAgC,EACrC,wBAAwB,EACxB,sBAAsB,EACtB,KAAK,kCAAkC,EACvC,KAAK,0BAA0B,EAC/B,KAAK,kCAAkC,EACvC,KAAK,iCAAiC,EACtC,KAAK,yBAAyB,EAC9B,wBAAwB,EACxB,sBAAsB,EACtB,KAAK,kCAAkC,EACvC,KAAK,0BAA0B,EAC/B,KAAK,kCAAkC,EACvC,KAAK,iCAAiC,EACtC,KAAK,yBAAyB,EAC9B,KAAK,+BAA+B,EACpC,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,0BAA0B,EAC1B,wBAAwB,EACxB,KAAK,4BAA4B,EACjC,KAAK,mCAAmC,EACxC,KAAK,2BAA2B,EAChC,KAAK,iCAAiC,GACvC,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -90,6 +90,6 @@ import BaseLanguageSwitcher_default from "./components/presentation/LanguageSwit
 import LanguageSwitcher_default from "./components/presentation/LanguageSwitcher/LanguageSwitcher.js";
 import KeyValueInput_default from "./components/primitives/KeyValueInput/KeyValueInput.js";
 import BuildingAlt_default from "./components/primitives/Icons/BuildingAlt.js";
-import { EMOJI_URI_SCHEME, EmbeddedFlowActionVariant, EmbeddedFlowComponentType, EmbeddedFlowEventType, EmbeddedFlowTextVariant, EmbeddedRecoveryFlowStatus, EmbeddedRecoveryFlowType, EmbeddedSignInFlowStatus, EmbeddedSignInFlowType, EmbeddedSignUpFlowStatus, EmbeddedSignUpFlowType, ThunderIDRuntimeError, countryCodeToFlagEmoji, extractEmojiFromUri, getActiveTheme, http, isEmojiUri, navigate, resolveEmojiUrisInHtml, resolveFlowTemplateLiterals, resolveLocaleDisplayName, resolveLocaleEmoji, resolveMeta } from "@thunderid/browser";
+import { EMOJI_URI_SCHEME, EmbeddedFlowActionVariant, EmbeddedFlowComponentType, EmbeddedFlowEventType, EmbeddedFlowTextVariant, EmbeddedRecoveryFlowStatus, EmbeddedRecoveryFlowType, EmbeddedSignInFlowStatus, EmbeddedSignInFlowType, EmbeddedSignUpFlowStatus, EmbeddedSignUpFlowType, ThunderIDRuntimeError, countryCodeToFlagEmoji, extractEmojiFromUri, getActiveTheme, http, isEmojiUri, navigate, resolveEmojiUrisInHtml, resolveFlowTemplateLiterals, resolveLocaleDisplayName, resolveLocaleEmoji, resolveLogoUri, resolveMeta } from "@thunderid/browser";
 
-export { AcceptInvite_default as AcceptInvite, Alert_default as Alert, BaseAcceptInvite_default as BaseAcceptInvite, BaseInviteUser_default as BaseInviteUser, BaseLanguageSwitcher_default as BaseLanguageSwitcher, BaseRecovery_default as BaseRecovery, BaseSignIn_default as BaseSignIn, BaseSignInButton_default as BaseSignInButton, BaseSignOutButton_default as BaseSignOutButton, BaseSignUp_default as BaseSignUp, BaseSignUpButton_default as BaseSignUpButton, BaseUser_default as BaseUser, BaseUserAvatar_default as BaseUserAvatar, BaseUserDropdown_default as BaseUserDropdown, BaseUserProfile_default as BaseUserProfile, BuildingAlt_default as BuildingAlt, Button_default as Button, Callback, Card_default as Card, Checkbox_default as Checkbox, CircleAlert_default as CircleAlert, CircleCheck_default as CircleCheck, Consent_default as Consent, ConsentCheckboxList_default as ConsentCheckboxList, DatePicker_default as DatePicker, Divider_default as Divider, EMOJI_URI_SCHEME, EmbeddedFlowActionVariant, EmbeddedFlowComponentType, EmbeddedFlowEventType, EmbeddedFlowTextVariant, EmbeddedRecoveryFlowStatus, EmbeddedRecoveryFlowType, EmbeddedSignInFlowStatus, EmbeddedSignInFlowType, EmbeddedSignUpFlowStatus, EmbeddedSignUpFlowType, Eye_default as Eye, EyeOff_default as EyeOff, FacebookButton_default as FacebookButton, FieldFactory, FlowContext_default as FlowContext, FlowMetaProvider_default as FlowMetaProvider, FlowProvider_default as FlowProvider, FlowTimer_default as FlowTimer, FormControl_default as FormControl, GitHubButton_default as GitHubButton, GoogleButton_default as GoogleButton, I18nContext_default as I18nContext, I18nProvider_default as I18nProvider, Info_default as Info, InputLabel_default as InputLabel, InviteUser_default as InviteUser, KeyValueInput_default as KeyValueInput, LanguageSwitcher_default as LanguageSwitcher, LinkedInButton_default as LinkedInButton, Loading_default as Loading, LogOut_default as LogOut, Logo_default as Logo, MicrosoftButton_default as MicrosoftButton, MultiInput_default as MultiInput, OAuthCallback, OtpField_default as OtpField, PasswordField_default as PasswordField, Recovery_default as Recovery, Select_default as Select, SignIn_default as SignIn, SignInButton_default as SignInButton, SignInWithEthereumButton_default as SignInWithEthereumButton, SignOutButton_default as SignOutButton, SignUp_default as SignUp, SignUpButton_default as SignUpButton, SignedIn_default as SignedIn, SignedOut_default as SignedOut, Spinner_default as Spinner, TextField_default as TextField, ThemeContext_default as ThemeContext, ThemeProvider_default as ThemeProvider, ThunderIDContext_default as ThunderIDContext, ThunderIDProvider_default as ThunderIDProvider, ThunderIDRuntimeError, Toggle_default as Toggle, TokenCallback, TriangleAlert_default as TriangleAlert, Typography_default as Typography, User_default as User, UserAvatar_default as UserAvatar, UserContext_default as UserContext, UserDropdown_default as UserDropdown, User_default$1 as UserIcon, UserProfile_default as UserProfile, UserProvider_default as UserProvider, countryCodeToFlagEmoji, createField, extractEmojiFromUri, extractErrorMessage, getActiveTheme, getConsentOptionalKey, getUsersMe_default as getMeProfile, http, isEmojiUri, navigate, normalizeFlowResponse, resolveEmojiUrisInHtml, resolveFlowTemplateLiterals, resolveLocaleDisplayName, resolveLocaleEmoji, resolveMeta, updateMeProfile_default as updateMeProfile, useBrowserUrl_default as useBrowserUrl, useFlow_default as useFlow, useForm_default as useForm, useI18n_default as useI18n, useOAuthCallback, useTheme_default as useTheme, useThunderID_default as useThunderID, useTranslation_default as useTranslation, useUser_default as useUser, validateFieldValue };
+export { AcceptInvite_default as AcceptInvite, Alert_default as Alert, BaseAcceptInvite_default as BaseAcceptInvite, BaseInviteUser_default as BaseInviteUser, BaseLanguageSwitcher_default as BaseLanguageSwitcher, BaseRecovery_default as BaseRecovery, BaseSignIn_default as BaseSignIn, BaseSignInButton_default as BaseSignInButton, BaseSignOutButton_default as BaseSignOutButton, BaseSignUp_default as BaseSignUp, BaseSignUpButton_default as BaseSignUpButton, BaseUser_default as BaseUser, BaseUserAvatar_default as BaseUserAvatar, BaseUserDropdown_default as BaseUserDropdown, BaseUserProfile_default as BaseUserProfile, BuildingAlt_default as BuildingAlt, Button_default as Button, Callback, Card_default as Card, Checkbox_default as Checkbox, CircleAlert_default as CircleAlert, CircleCheck_default as CircleCheck, Consent_default as Consent, ConsentCheckboxList_default as ConsentCheckboxList, DatePicker_default as DatePicker, Divider_default as Divider, EMOJI_URI_SCHEME, EmbeddedFlowActionVariant, EmbeddedFlowComponentType, EmbeddedFlowEventType, EmbeddedFlowTextVariant, EmbeddedRecoveryFlowStatus, EmbeddedRecoveryFlowType, EmbeddedSignInFlowStatus, EmbeddedSignInFlowType, EmbeddedSignUpFlowStatus, EmbeddedSignUpFlowType, Eye_default as Eye, EyeOff_default as EyeOff, FacebookButton_default as FacebookButton, FieldFactory, FlowContext_default as FlowContext, FlowMetaProvider_default as FlowMetaProvider, FlowProvider_default as FlowProvider, FlowTimer_default as FlowTimer, FormControl_default as FormControl, GitHubButton_default as GitHubButton, GoogleButton_default as GoogleButton, I18nContext_default as I18nContext, I18nProvider_default as I18nProvider, Info_default as Info, InputLabel_default as InputLabel, InviteUser_default as InviteUser, KeyValueInput_default as KeyValueInput, LanguageSwitcher_default as LanguageSwitcher, LinkedInButton_default as LinkedInButton, Loading_default as Loading, LogOut_default as LogOut, Logo_default as Logo, MicrosoftButton_default as MicrosoftButton, MultiInput_default as MultiInput, OAuthCallback, OtpField_default as OtpField, PasswordField_default as PasswordField, Recovery_default as Recovery, Select_default as Select, SignIn_default as SignIn, SignInButton_default as SignInButton, SignInWithEthereumButton_default as SignInWithEthereumButton, SignOutButton_default as SignOutButton, SignUp_default as SignUp, SignUpButton_default as SignUpButton, SignedIn_default as SignedIn, SignedOut_default as SignedOut, Spinner_default as Spinner, TextField_default as TextField, ThemeContext_default as ThemeContext, ThemeProvider_default as ThemeProvider, ThunderIDContext_default as ThunderIDContext, ThunderIDProvider_default as ThunderIDProvider, ThunderIDRuntimeError, Toggle_default as Toggle, TokenCallback, TriangleAlert_default as TriangleAlert, Typography_default as Typography, User_default as User, UserAvatar_default as UserAvatar, UserContext_default as UserContext, UserDropdown_default as UserDropdown, User_default$1 as UserIcon, UserProfile_default as UserProfile, UserProvider_default as UserProvider, countryCodeToFlagEmoji, createField, extractEmojiFromUri, extractErrorMessage, getActiveTheme, getConsentOptionalKey, getUsersMe_default as getMeProfile, http, isEmojiUri, navigate, normalizeFlowResponse, resolveEmojiUrisInHtml, resolveFlowTemplateLiterals, resolveLocaleDisplayName, resolveLocaleEmoji, resolveLogoUri, resolveMeta, updateMeProfile_default as updateMeProfile, useBrowserUrl_default as useBrowserUrl, useFlow_default as useFlow, useForm_default as useForm, useI18n_default as useI18n, useOAuthCallback, useTheme_default as useTheme, useThunderID_default as useThunderID, useTranslation_default as useTranslation, useUser_default as useUser, validateFieldValue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thunderid/react",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "React SDK for ThunderID",
   "keywords": [
     "thunderid",
@@ -62,7 +62,7 @@
     "@floating-ui/react": "0.27.12",
     "dompurify": "3.4.11",
     "tslib": "2.8.1",
-    "@thunderid/browser": "^0.6.1"
+    "@thunderid/browser": "^0.8.0"
   },
   "publishConfig": {
     "access": "public"