@thunderid/react 1.5.0 → 1.7.0

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

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

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

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

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

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

package/dist/cjs/components/common/LanguageSwitcher/BaseLanguageSwitcher.cjs.map

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

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

@@ -0,0 +1,117 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/components/common/LanguageSwitcher/BaseLanguageSwitcher.styles.ts
+const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
+	const root = require_emotion.css`
+      display: inline-block;
+      position: relative;
+      font-family: ${theme.vars.typography.fontFamily};
+    `;
+	const trigger = require_emotion.css`
+      display: inline-flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 0.5);
+      padding: calc(${theme.vars.spacing.unit} * 0.75) ${theme.vars.spacing.unit};
+      border: 1px solid ${theme.vars.colors.border};
+      background: ${theme.vars.colors.background.surface};
+      cursor: pointer;
+      border-radius: ${theme.vars.borderRadius.medium};
+      min-width: 120px;
+      font-size: 0.875rem;
+      color: ${theme.vars.colors.text.primary};
+
+      &:hover {
+        background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
+      }
+    `;
+	const triggerEmoji = require_emotion.css`
+      font-size: 1rem;
+      line-height: 1;
+    `;
+	const triggerLabel = require_emotion.css`
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 500;
+    `;
+	const content = require_emotion.css`
+      min-width: 200px;
+      max-width: 320px;
+      background-color: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.medium};
+      box-shadow: ${theme.vars.shadows.medium};
+      border: 1px solid ${theme.vars.colors.border};
+      outline: none;
+      z-index: 1000;
+      padding: calc(${theme.vars.spacing.unit} * 0.5) 0;
+    `;
+	const option = require_emotion.css`
+      display: flex;
+      align-items: center;
+      gap: ${theme.vars.spacing.unit};
+      padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 1.5);
+      width: 100%;
+      border: none;
+      background-color: transparent;
+      cursor: pointer;
+      font-size: 0.875rem;
+      text-align: start;
+      color: ${theme.vars.colors.text.primary};
+      transition: background-color 0.15s ease-in-out;
+
+      &:hover {
+        background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
+      }
+    `;
+	const optionActive = require_emotion.css`
+      font-weight: 600;
+      color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};
+    `;
+	const optionEmoji = require_emotion.css`
+      font-size: 1rem;
+      line-height: 1;
+      flex-shrink: 0;
+    `;
+	const optionLabel = require_emotion.css`
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+	return {
+		checkIcon: require_emotion.css`
+      color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};
+      flex-shrink: 0;
+      margin-inline-start: auto;
+    `,
+		content,
+		option,
+		optionActive,
+		optionEmoji,
+		optionLabel,
+		root,
+		trigger,
+		triggerEmoji,
+		triggerLabel
+	};
+}, [
+	theme.vars.colors.background.surface,
+	theme.vars.colors.text.primary,
+	theme.vars.colors.border,
+	theme.vars.borderRadius.medium,
+	theme.vars.shadows.medium,
+	theme.vars.spacing.unit,
+	theme.vars.colors.action?.hover,
+	theme.vars.typography.fontFamily,
+	theme.vars.colors.primary?.main,
+	colorScheme
+]);
+var BaseLanguageSwitcher_styles_default = useStyles;
+
+//#endregion
+exports.default = BaseLanguageSwitcher_styles_default;
+//# sourceMappingURL=BaseLanguageSwitcher.styles.cjs.map

package/dist/cjs/components/common/LanguageSwitcher/BaseLanguageSwitcher.styles.cjs.map

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

package/dist/cjs/components/common/LanguageSwitcher/LanguageSwitcher.cjs

@@ -0,0 +1,84 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_BaseLanguageSwitcher = require('./BaseLanguageSwitcher.cjs');
+const require_useFlowMeta = require('../../../contexts/FlowMeta/useFlowMeta.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);
+
+//#region src/components/common/LanguageSwitcher/LanguageSwitcher.tsx
+/**
+* A v2 LanguageSwitcher component that reads available languages from `FlowMetaContext`
+* and switches both the UI language (via `I18nContext`) and the flow metadata translations
+* (by re-fetching `GET /flow/meta` with the new language).
+*
+* Must be rendered inside a `FlowMetaProvider`.
+*
+* @example
+* ```tsx
+* // Default dropdown UI
+* <LanguageSwitcher />
+*
+* // Custom UI with render props
+* <LanguageSwitcher>
+*   {({languages, currentLanguage, onLanguageChange}) => (
+*     <div>
+*       {languages.map(lang => (
+*         <button
+*           key={lang.code}
+*           onClick={() => onLanguageChange(lang.code)}
+*           style={{fontWeight: lang.code === currentLanguage ? 'bold' : 'normal'}}
+*         >
+*           {lang.emoji} {lang.displayName}
+*         </button>
+*       ))}
+*     </div>
+*   )}
+* </LanguageSwitcher>
+* ```
+*/
+const LanguageSwitcher = ({ children, className }) => {
+	const { meta, switchLanguage, isLoading } = require_useFlowMeta.default();
+	const { currentLanguage } = require_useTranslation.default();
+	const availableLanguageCodes = meta?.i18n?.languages ?? [];
+	const effectiveLanguageCodes = (0, react.useMemo)(() => availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage], [availableLanguageCodes, currentLanguage]);
+	const languages = (0, react.useMemo)(() => effectiveLanguageCodes.map((code) => ({
+		code,
+		displayName: (0, __thunderid_browser.resolveLocaleDisplayName)(code, code) || code,
+		emoji: (0, __thunderid_browser.resolveLocaleEmoji)(code)
+	})), [effectiveLanguageCodes]);
+	(0, react.useEffect)(() => {
+		if (availableLanguageCodes.length === 0) return;
+		const currentBase = (0, __thunderid_browser.getBaseLanguage)(currentLanguage);
+		if (availableLanguageCodes.some((code) => (0, __thunderid_browser.getBaseLanguage)(code) === currentBase)) return;
+		switchLanguage(availableLanguageCodes.find((code) => (0, __thunderid_browser.getBaseLanguage)(code) === "en") ?? availableLanguageCodes[0]);
+	}, [
+		availableLanguageCodes,
+		currentLanguage,
+		switchLanguage
+	]);
+	const displayLanguage = (0, react.useMemo)(() => {
+		const exactMatch = languages.find((option) => (0, __thunderid_browser.normalizeLocaleTag)(option.code) === (0, __thunderid_browser.normalizeLocaleTag)(currentLanguage));
+		if (exactMatch) return exactMatch.code;
+		return languages.find((option) => (0, __thunderid_browser.getBaseLanguage)(option.code) === (0, __thunderid_browser.getBaseLanguage)(currentLanguage))?.code ?? currentLanguage;
+	}, [languages, currentLanguage]);
+	const handleLanguageChange = (language) => {
+		if (language !== currentLanguage) switchLanguage(language);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseLanguageSwitcher.default, {
+		currentLanguage: displayLanguage,
+		isLoading,
+		languages,
+		onLanguageChange: handleLanguageChange,
+		className,
+		children
+	});
+};
+var LanguageSwitcher_default = LanguageSwitcher;
+
+//#endregion
+exports.default = LanguageSwitcher_default;
+//# sourceMappingURL=LanguageSwitcher.cjs.map

package/dist/cjs/components/common/LanguageSwitcher/LanguageSwitcher.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.cjs","names":["LanguageSwitcher: FC<LanguageSwitcherProps>","useFlowMeta","useTranslation","availableLanguageCodes: string[]","effectiveLanguageCodes: string[]","languages: LanguageOption[]","currentBase: string","displayLanguage: string","exactMatch: LanguageOption | undefined","BaseLanguageSwitcher"],"sources":["../../../../../src/components/common/LanguageSwitcher/LanguageSwitcher.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {getBaseLanguage, normalizeLocaleTag, resolveLocaleDisplayName, resolveLocaleEmoji} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useEffect, useMemo} from 'react';\nimport BaseLanguageSwitcher, {LanguageOption, LanguageSwitcherRenderProps} from './BaseLanguageSwitcher';\nimport useFlowMeta from '../../../contexts/FlowMeta/useFlowMeta';\nimport useTranslation from '../../../hooks/useTranslation';\n\nexport type {LanguageOption, LanguageSwitcherRenderProps};\n\nexport interface LanguageSwitcherProps {\n  /**\n   * Render-props callback for fully custom UI.\n   *\n   * @example\n   * ```tsx\n   * <LanguageSwitcher>\n   *   {({languages, currentLanguage, onLanguageChange, isLoading}) => (\n   *     <select\n   *       value={currentLanguage}\n   *       disabled={isLoading}\n   *       onChange={e => onLanguageChange(e.target.value)}\n   *     >\n   *       {languages.map(l => (\n   *         <option key={l.code} value={l.code}>{l.emoji} {l.displayName}</option>\n   *       ))}\n   *     </select>\n   *   )}\n   * </LanguageSwitcher>\n   * ```\n   */\n  children?: (props: LanguageSwitcherRenderProps) => ReactNode;\n  /** Additional CSS class for the root element (default UI only) */\n  className?: string;\n}\n\n/**\n * A v2 LanguageSwitcher component that reads available languages from `FlowMetaContext`\n * and switches both the UI language (via `I18nContext`) and the flow metadata translations\n * (by re-fetching `GET /flow/meta` with the new language).\n *\n * Must be rendered inside a `FlowMetaProvider`.\n *\n * @example\n * ```tsx\n * // Default dropdown UI\n * <LanguageSwitcher />\n *\n * // Custom UI with render props\n * <LanguageSwitcher>\n *   {({languages, currentLanguage, onLanguageChange}) => (\n *     <div>\n *       {languages.map(lang => (\n *         <button\n *           key={lang.code}\n *           onClick={() => onLanguageChange(lang.code)}\n *           style={{fontWeight: lang.code === currentLanguage ? 'bold' : 'normal'}}\n *         >\n *           {lang.emoji} {lang.displayName}\n *         </button>\n *       ))}\n *     </div>\n *   )}\n * </LanguageSwitcher>\n * ```\n */\nconst LanguageSwitcher: FC<LanguageSwitcherProps> = ({children, className}: LanguageSwitcherProps): ReactElement => {\n  const {meta, switchLanguage, isLoading} = useFlowMeta();\n  const {currentLanguage} = useTranslation();\n\n  const availableLanguageCodes: string[] = meta?.i18n?.languages ?? [];\n  // Only fall back to the detected browser language when the server returns no configured languages.\n  // Do NOT inject currentLanguage unconditionally — a browser locale like \"en-GB\" must not appear\n  // in the picker when the server only supports \"en-US\".\n  const effectiveLanguageCodes: string[] = useMemo(\n    () => (availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage]),\n    [availableLanguageCodes, currentLanguage],\n  );\n\n  const languages: LanguageOption[] = useMemo(\n    () =>\n      effectiveLanguageCodes.map((code: string) => ({\n        code,\n        // Resolve each label in its own locale so option names stay stable across UI language switches.\n        displayName: resolveLocaleDisplayName(code, code) || code,\n        emoji: resolveLocaleEmoji(code),\n      })),\n    [effectiveLanguageCodes],\n  );\n\n  // If the detected language isn't supported by the server, fall back to English (matched by base\n  // language, e.g. browser \"en-US\" against server \"en\"), or the first available language if the\n  // server doesn't offer English either.\n  useEffect(() => {\n    if (availableLanguageCodes.length === 0) {\n      return;\n    }\n    const currentBase: string = getBaseLanguage(currentLanguage);\n    const isSupported: boolean = availableLanguageCodes.some(\n      (code: string): boolean => getBaseLanguage(code) === currentBase,\n    );\n    if (isSupported) {\n      return;\n    }\n    const englishCode: string | undefined = availableLanguageCodes.find(\n      (code: string): boolean => getBaseLanguage(code) === 'en',\n    );\n    switchLanguage(englishCode ?? availableLanguageCodes[0]);\n  }, [availableLanguageCodes, currentLanguage, switchLanguage]);\n\n  // Prefer an exact dialect match (e.g. \"en-IN\" against a supported \"en-IN\") over a base-language\n  // one, so a specific regional variant isn't silently collapsed to \"en\" when it's actually offered.\n  // Only fall back to a base-language match (e.g. \"en-US\" against a supported \"en\") when the exact\n  // dialect isn't available, and to the raw code if neither is.\n  const displayLanguage: string = useMemo(() => {\n    const exactMatch: LanguageOption | undefined = languages.find(\n      (option: LanguageOption): boolean => normalizeLocaleTag(option.code) === normalizeLocaleTag(currentLanguage),\n    );\n    if (exactMatch) {\n      return exactMatch.code;\n    }\n    const baseMatch: LanguageOption | undefined = languages.find(\n      (option: LanguageOption): boolean => getBaseLanguage(option.code) === getBaseLanguage(currentLanguage),\n    );\n    return baseMatch?.code ?? currentLanguage;\n  }, [languages, currentLanguage]);\n\n  const handleLanguageChange = (language: string): void => {\n    if (language !== currentLanguage) {\n      switchLanguage(language);\n    }\n  };\n\n  return (\n    <BaseLanguageSwitcher\n      currentLanguage={displayLanguage}\n      isLoading={isLoading}\n      languages={languages}\n      onLanguageChange={handleLanguageChange}\n      className={className}\n    >\n      {children}\n    </BaseLanguageSwitcher>\n  );\n};\n\nexport default LanguageSwitcher;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,MAAMA,oBAA+C,EAAC,UAAU,gBAAoD;CAClH,MAAM,EAAC,MAAM,gBAAgB,cAAaC,6BAAa;CACvD,MAAM,EAAC,oBAAmBC,gCAAgB;CAE1C,MAAMC,yBAAmC,MAAM,MAAM,aAAa,EAAE;CAIpE,MAAMC,kDACG,uBAAuB,SAAS,IAAI,yBAAyB,CAAC,gBAAgB,EACrF,CAAC,wBAAwB,gBAAgB,CAC1C;CAED,MAAMC,qCAEF,uBAAuB,KAAK,UAAkB;EAC5C;EAEA,+DAAsC,MAAM,KAAK,IAAI;EACrD,mDAA0B,KAAK;EAChC,EAAE,EACL,CAAC,uBAAuB,CACzB;AAKD,4BAAgB;AACd,MAAI,uBAAuB,WAAW,EACpC;EAEF,MAAMC,uDAAsC,gBAAgB;AAI5D,MAH6B,uBAAuB,MACjD,kDAA0C,KAAK,KAAK,YACtD,CAEC;AAKF,iBAHwC,uBAAuB,MAC5D,kDAA0C,KAAK,KAAK,KACtD,IAC6B,uBAAuB,GAAG;IACvD;EAAC;EAAwB;EAAiB;EAAe,CAAC;CAM7D,MAAMC,2CAAwC;EAC5C,MAAMC,aAAyC,UAAU,MACtD,uDAAuD,OAAO,KAAK,iDAAwB,gBAAgB,CAC7G;AACD,MAAI,WACF,QAAO,WAAW;AAKpB,SAH8C,UAAU,MACrD,oDAAoD,OAAO,KAAK,8CAAqB,gBAAgB,CACvG,EACiB,QAAQ;IACzB,CAAC,WAAW,gBAAgB,CAAC;CAEhC,MAAM,wBAAwB,aAA2B;AACvD,MAAI,aAAa,gBACf,gBAAe,SAAS;;AAI5B,QACE,2CAACC;EACC,iBAAiB;EACN;EACA;EACX,kBAAkB;EACP;EAEV;GACoB;;AAI3B,+BAAe"}

package/dist/cjs/components/primitives/AuthFlowSelect/AuthFlowSelect.cjs

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-const require_useFetchAuthFlows = require('../../../hooks/useFetchAuthFlows.cjs');
+const require_useFetchAuthFlows = require('../../../hooks/auth/useFetchAuthFlows.cjs');
 const require_BaseAuthFlowSelect = require('./BaseAuthFlowSelect.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

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

@@ -1 +1 @@
-{"version":3,"file":"AuthFlowSelect.cjs","names":["AuthFlowSelect: FC<AuthFlowSelectProps>","BaseAuthFlowSelect","useFetchAuthFlows"],"sources":["../../../../../src/components/primitives/AuthFlowSelect/AuthFlowSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC} from 'react';\nimport BaseAuthFlowSelect, {BaseAuthFlowSelectProps} from './BaseAuthFlowSelect';\nimport useFetchAuthFlows from '../../../hooks/useFetchAuthFlows';\n\nexport type AuthFlowSelectProps = Omit<BaseAuthFlowSelectProps, 'fetchAuthFlows'>;\n\n/**\n * Authentication-flow picker for signed-in screens. It loads the authentication flows itself with the\n * signed-in user's access token and submits the chosen flow's ID, so it takes no data source. For any\n * other data source use `Select` with `useInfiniteOptions`.\n */\nconst AuthFlowSelect: FC<AuthFlowSelectProps> = (props: AuthFlowSelectProps) => (\n  <BaseAuthFlowSelect {...props} fetchAuthFlows={useFetchAuthFlows()} />\n);\n\nexport default AuthFlowSelect;\n"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,kBAA2C,UAC/C,2CAACC;CAAmB,GAAI;CAAO,gBAAgBC,mCAAmB;EAAI;AAGxE,6BAAe"}
+{"version":3,"file":"AuthFlowSelect.cjs","names":["AuthFlowSelect: FC<AuthFlowSelectProps>","BaseAuthFlowSelect","useFetchAuthFlows"],"sources":["../../../../../src/components/primitives/AuthFlowSelect/AuthFlowSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC} from 'react';\nimport BaseAuthFlowSelect, {BaseAuthFlowSelectProps} from './BaseAuthFlowSelect';\nimport useFetchAuthFlows from '../../../hooks/auth/useFetchAuthFlows';\n\nexport type AuthFlowSelectProps = Omit<BaseAuthFlowSelectProps, 'fetchAuthFlows'>;\n\n/**\n * Authentication-flow picker for signed-in screens. It loads the authentication flows itself with the\n * signed-in user's access token and submits the chosen flow's ID, so it takes no data source. For any\n * other data source use `Select` with `useInfiniteOptions`.\n */\nconst AuthFlowSelect: FC<AuthFlowSelectProps> = (props: AuthFlowSelectProps) => (\n  <BaseAuthFlowSelect {...props} fetchAuthFlows={useFetchAuthFlows()} />\n);\n\nexport default AuthFlowSelect;\n"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,kBAA2C,UAC/C,2CAACC;CAAmB,GAAI;CAAO,gBAAgBC,mCAAmB;EAAI;AAGxE,6BAAe"}

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":["Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>","useTheme","styles: Record<string, string | null>","useStyles","isIconVariant: boolean","spinnerWidth: string","cx","Spinner"],"sources":["../../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ButtonHTMLAttributes, forwardRef, ReactNode, ForwardRefExoticComponent, RefAttributes, Ref} from 'react';\nimport useStyles from './Button.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Spinner, {SpinnerSize} from '../Spinner/Spinner';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /**\n   * The button color that determines the color scheme\n   */\n  color?: ButtonColor;\n  /**\n   * Icon to display after the button text\n   */\n  endIcon?: ReactNode;\n  /**\n   * Whether the button should take the full width of its container\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether the button is in a loading state\n   */\n  loading?: boolean;\n  /**\n   * The shape of the button: square or round\n   */\n  shape?: 'square' | 'round';\n  /**\n   * The size of the button\n   */\n  size?: ButtonSize;\n  /**\n   * Icon to display before the button text\n   */\n  startIcon?: ReactNode;\n  /**\n   * The button variant that determines the visual style\n   */\n  variant?: ButtonVariant;\n}\n\nconst getSpinnerWidth = (sizeVal: ButtonSize, spacingUnit: string): string => {\n  if (sizeVal === 'small') {\n    return `calc(${spacingUnit} * 1.5)`;\n  }\n  if (sizeVal === 'medium') {\n    return `calc(${spacingUnit} * 2)`;\n  }\n  return `calc(${spacingUnit} * 2.5)`;\n};\n\n/**\n * Button component with multiple variants and types.\n *\n * @example\n * ```tsx\n * // Primary solid button\n * <Button color=\"primary\" variant=\"solid\">\n *   Click me\n * </Button>\n *\n * // Secondary outline button\n * <Button color=\"secondary\" variant=\"outline\" size=\"large\">\n *   Cancel\n * </Button>\n *\n * // Text button with loading state\n * <Button color=\"tertiary\" variant=\"text\" loading>\n *   Loading...\n * </Button>\n *\n * // Button with icons\n * <Button\n *   color=\"primary\"\n *   startIcon={<Icon />}\n *   endIcon={<Arrow />}\n * >\n *   Save and Continue\n * </Button>\n * ```\n */\nconst Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(\n  (\n    {\n      color = 'primary',\n      variant = 'solid',\n      size = 'medium',\n      fullWidth = false,\n      loading = false,\n      startIcon,\n      endIcon,\n      children,\n      className,\n      disabled,\n      style,\n      shape = 'square',\n      ...rest\n    }: ButtonProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string | null> = useStyles(\n      theme,\n      colorScheme,\n      color,\n      variant,\n      size,\n      fullWidth,\n      disabled || false,\n      loading,\n      shape,\n    );\n\n    const isIconVariant: boolean = variant === 'icon';\n\n    const spinnerWidth: string = getSpinnerWidth(size, theme.vars.spacing.unit);\n\n    return (\n      <button\n        ref={ref}\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('button')),\n          withVendorCSSClassPrefix(bem('button', variant)),\n          withVendorCSSClassPrefix(bem('button', color)),\n          withVendorCSSClassPrefix(bem('button', size)),\n          withVendorCSSClassPrefix(bem('button', shape)),\n          fullWidth ? withVendorCSSClassPrefix(bem('button', 'fullWidth')) : undefined,\n          loading ? withVendorCSSClassPrefix(bem('button', 'loading')) : undefined,\n          disabled || loading ? withVendorCSSClassPrefix(bem('button', 'disabled')) : undefined,\n          styles['button'],\n          styles['size'],\n          styles['variant'],\n          styles['fullWidth'],\n          styles['loading'],\n          styles['shape'],\n          className,\n        )}\n        disabled={disabled || loading}\n        {...rest}\n      >\n        {loading && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'spinner')), styles['spinner'])}>\n            <Spinner size={size as SpinnerSize} color=\"currentColor\" widthOverride={spinnerWidth} />\n          </span>\n        )}\n        {!loading && isIconVariant && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'icon')), styles['icon'])}>\n            {children || startIcon || endIcon}\n          </span>\n        )}\n        {!loading && !isIconVariant && startIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'start-icon')), styles['startIcon'])}>\n            {startIcon}\n          </span>\n        )}\n        {!isIconVariant && children && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'content')), styles['content'])}>{children}</span>\n        )}\n        {!loading && !isIconVariant && endIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'end-icon')), styles['endIcon'])}>{endIcon}</span>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;AAiDA,MAAM,mBAAmB,SAAqB,gBAAgC;AAC5E,KAAI,YAAY,QACd,QAAO,QAAQ,YAAY;AAE7B,KAAI,YAAY,SACd,QAAO,QAAQ,YAAY;AAE7B,QAAO,QAAQ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiC7B,MAAMA,gCAKF,EACE,QAAQ,WACR,UAAU,SACV,OAAO,UACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,WACA,UACA,OACA,QAAQ,SACR,GAAG,QAEL,QACG;CACH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAwCC,8BAC5C,OACA,aACA,OACA,SACA,MACA,WACA,YAAY,OACZ,SACA,MACD;CAED,MAAMC,gBAAyB,YAAY;CAE3C,MAAMC,eAAuB,gBAAgB,MAAM,MAAM,KAAK,QAAQ,KAAK;AAE3E,QACE,4CAAC;EACM;EACE;EACP,WAAWC,kGACoB,SAAS,CAAC,iFACV,UAAU,QAAQ,CAAC,iFACnB,UAAU,MAAM,CAAC,iFACjB,UAAU,KAAK,CAAC,iFAChB,UAAU,MAAM,CAAC,EAC9C,2FAAyC,UAAU,YAAY,CAAC,GAAG,QACnE,yFAAuC,UAAU,UAAU,CAAC,GAAG,QAC/D,YAAY,yFAAuC,UAAU,WAAW,CAAC,GAAG,QAC5E,OAAO,WACP,OAAO,SACP,OAAO,YACP,OAAO,cACP,OAAO,YACP,OAAO,UACP,UACD;EACD,UAAU,YAAY;EACtB,GAAI;;GAEH,WACC,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;cACxF,2CAACC;KAAc;KAAqB,OAAM;KAAe,eAAe;MAAgB;KACnF;GAER,CAAC,WAAW,iBACX,2CAAC;IAAK,WAAWD,kGAAgC,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;cACjF,YAAY,aAAa;KACrB;GAER,CAAC,WAAW,CAAC,iBAAiB,aAC7B,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,aAAa,CAAC,EAAE,OAAO,aAAa;cAC5F;KACI;GAER,CAAC,iBAAiB,YACjB,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAgB;GAE9G,CAAC,WAAW,CAAC,iBAAiB,WAC7B,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,WAAW,CAAC,EAAE,OAAO,WAAW;cAAG;KAAe;;GAExG;EAGd;AAED,OAAO,cAAc;AAErB,qBAAe"}
+{"version":3,"file":"Button.cjs","names":["Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>","useTheme","styles: Record<string, string | null>","useStyles","isIconVariant: boolean","spinnerWidth: string","cx","Spinner"],"sources":["../../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ButtonHTMLAttributes, forwardRef, ReactNode, ForwardRefExoticComponent, RefAttributes, Ref} from 'react';\nimport useStyles from './Button.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Spinner, {SpinnerSize} from '../Spinner/Spinner';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /**\n   * The button color that determines the color scheme\n   */\n  color?: ButtonColor;\n  /**\n   * Icon to display after the button text\n   */\n  endIcon?: ReactNode;\n  /**\n   * Whether the button should take the full width of its container\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether the button is in a loading state\n   */\n  loading?: boolean;\n  /**\n   * The shape of the button: square or round\n   */\n  shape?: 'square' | 'round';\n  /**\n   * The size of the button\n   */\n  size?: ButtonSize;\n  /**\n   * Icon to display before the button text\n   */\n  startIcon?: ReactNode;\n  /**\n   * The button variant that determines the visual style\n   */\n  variant?: ButtonVariant;\n}\n\nconst getSpinnerWidth = (sizeVal: ButtonSize, spacingUnit: string): string => {\n  if (sizeVal === 'small') {\n    return `calc(${spacingUnit} * 1.5)`;\n  }\n  if (sizeVal === 'medium') {\n    return `calc(${spacingUnit} * 2)`;\n  }\n  return `calc(${spacingUnit} * 2.5)`;\n};\n\n/**\n * Button component with multiple variants and types.\n *\n * @example\n * ```tsx\n * // Primary solid button\n * <Button color=\"primary\" variant=\"solid\">\n *   Click me\n * </Button>\n *\n * // Secondary outline button\n * <Button color=\"secondary\" variant=\"outline\" size=\"large\">\n *   Cancel\n * </Button>\n *\n * // Text button with loading state\n * <Button color=\"tertiary\" variant=\"text\" loading>\n *   Loading...\n * </Button>\n *\n * // Button with icons\n * <Button\n *   color=\"primary\"\n *   startIcon={<Icon />}\n *   endIcon={<Arrow />}\n * >\n *   Save and Continue\n * </Button>\n * ```\n */\nconst Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(\n  (\n    {\n      color = 'primary',\n      variant = 'solid',\n      size = 'medium',\n      fullWidth = false,\n      loading = false,\n      startIcon,\n      endIcon,\n      children,\n      className,\n      disabled,\n      style,\n      shape = 'square',\n      ...rest\n    }: ButtonProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string | null> = useStyles(\n      theme,\n      colorScheme,\n      color,\n      variant,\n      size,\n      fullWidth,\n      disabled || false,\n      loading,\n      shape,\n    );\n\n    const isIconVariant: boolean = variant === 'icon';\n\n    const spinnerWidth: string = getSpinnerWidth(size, theme.vars.spacing.unit);\n\n    return (\n      <button\n        ref={ref}\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('button')),\n          withVendorCSSClassPrefix(bem('button', variant)),\n          withVendorCSSClassPrefix(bem('button', color)),\n          withVendorCSSClassPrefix(bem('button', size)),\n          withVendorCSSClassPrefix(bem('button', shape)),\n          fullWidth ? withVendorCSSClassPrefix(bem('button', 'fullWidth')) : undefined,\n          loading ? withVendorCSSClassPrefix(bem('button', 'loading')) : undefined,\n          disabled || loading ? withVendorCSSClassPrefix(bem('button', 'disabled')) : undefined,\n          styles['button'],\n          styles['size'],\n          styles['variant'],\n          styles['fullWidth'],\n          styles['loading'],\n          styles['shape'],\n          className,\n        )}\n        disabled={disabled || loading}\n        {...rest}\n      >\n        {loading && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'spinner')), styles['spinner'])}>\n            <Spinner size={size as SpinnerSize} color=\"currentColor\" widthOverride={spinnerWidth} />\n          </span>\n        )}\n        {!loading && isIconVariant && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'icon')), styles['icon'])}>\n            {children || startIcon || endIcon}\n          </span>\n        )}\n        {!loading && !isIconVariant && startIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'start-icon')), styles['startIcon'])}>\n            {startIcon}\n          </span>\n        )}\n        {!isIconVariant && children && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'content')), styles['content'])}>{children}</span>\n        )}\n        {!loading && !isIconVariant && endIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'end-icon')), styles['endIcon'])}>{endIcon}</span>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;AAiDA,MAAM,mBAAmB,SAAqB,gBAAgC;AAC5E,KAAI,YAAY,QACd,QAAO,QAAQ,YAAY;AAE7B,KAAI,YAAY,SACd,QAAO,QAAQ,YAAY;AAE7B,QAAO,QAAQ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiC7B,MAAMA,gCAKF,EACE,QAAQ,WACR,UAAU,SACV,OAAO,UACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,WACA,UACA,OACA,QAAQ,SACR,GAAG,QAEL,QACG;CACH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAwCC,8BAC5C,OACA,aACA,OACA,SACA,MACA,WACA,YAAY,OACZ,SACA,MACD;CAED,MAAMC,gBAAyB,YAAY;CAE3C,MAAMC,eAAuB,gBAAgB,MAAM,MAAM,KAAK,QAAQ,KAAK;AAE3E,QACE,4CAAC;EACM;EACE;EACP,WAAWC,kGACoB,SAAS,CAAC,iFACV,UAAU,QAAQ,CAAC,iFACnB,UAAU,MAAM,CAAC,iFACjB,UAAU,KAAK,CAAC,iFAChB,UAAU,MAAM,CAAC,EAC9C,2FAAyC,UAAU,YAAY,CAAC,GAAG,QACnE,yFAAuC,UAAU,UAAU,CAAC,GAAG,QAC/D,YAAY,yFAAuC,UAAU,WAAW,CAAC,GAAG,QAC5E,OAAO,WACP,OAAO,SACP,OAAO,YACP,OAAO,cACP,OAAO,YACP,OAAO,UACP,UACD;EACD,UAAU,YAAY;EACtB,GAAI;;GAEH,WACC,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;cACxF,2CAACC;KAAc;KAAqB,OAAM;KAAe,eAAe;MAAgB;KACnF;GAER,CAAC,WAAW,iBACX,2CAAC;IAAK,WAAWD,kGAAgC,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;cACjF,YAAY,aAAa;KACrB;GAER,CAAC,WAAW,CAAC,iBAAiB,aAC7B,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,aAAa,CAAC,EAAE,OAAO,aAAa;cAC5F;KACI;GAER,CAAC,iBAAiB,YACjB,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAgB;GAE9G,CAAC,WAAW,CAAC,iBAAiB,WAC7B,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,WAAW,CAAC,EAAE,OAAO,WAAW;cAAG;KAAe;;GAExG;EAGd;AAED,OAAO,cAAc;AAErB,qBAAe"}

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

@@ -294,6 +294,34 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           color: ${theme.vars.colors.text.primary};
           outline: none;
         }
+      `,
+		"error-outline": require_emotion.css`
+        background-color: transparent;
+        color: ${theme.vars.colors.error.main};
+        border-color: ${theme.vars.colors.error.main};
+        &:hover:not(:disabled),
+        &:focus-visible:not(:disabled) {
+          background-color: ${theme.vars.colors.error.main};
+          color: ${theme.vars.colors.error.contrastText};
+        }
+      `,
+		"error-solid": require_emotion.css`
+        background-color: ${theme.vars.colors.error.main};
+        color: ${theme.vars.colors.error.contrastText};
+        border-color: ${theme.vars.colors.error.main};
+        &:hover:not(:disabled),
+        &:focus-visible:not(:disabled) {
+          opacity: 0.9;
+        }
+      `,
+		"error-text": require_emotion.css`
+        background-color: transparent;
+        color: ${theme.vars.colors.error.main};
+        border-color: transparent;
+        &:hover:not(:disabled),
+        &:focus-visible:not(:disabled) {
+          background-color: ${theme.vars.colors.action.hover};
+        }
       `
 	};
 	const spinnerStyles = require_emotion.css`

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.cjs","names":["iconSizeMap: Record<string, string>","iconDimension: string","baseButton: string","sizeStyles: Record<string, string>","variantStyles: Record<string, string>","spinnerStyles: string","iconStyles: string"],"sources":["../../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Button 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 color - The button color\n * @param variant - The button variant\n * @param size - The button size\n * @param fullWidth - Whether the button should take full width\n * @param disabled - Whether the button is disabled\n * @param loading - Whether the button is in loading state\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  color: ButtonColor,\n  variant: ButtonVariant,\n  size: ButtonSize,\n  fullWidth: boolean,\n  disabled: boolean,\n  loading: boolean,\n  shape: 'square' | 'round' = 'square',\n): Record<string, string | null> =>\n  useMemo(() => {\n    const iconSizeMap: Record<string, string> = {\n      large: `calc(${theme.vars.spacing.unit} * 5)`,\n      medium: `calc(${theme.vars.spacing.unit} * 4)`,\n      small: `calc(${theme.vars.spacing.unit} * 3)`,\n    };\n\n    const iconDimension: string = iconSizeMap[size] || iconSizeMap['medium'];\n\n    const baseButton: string = css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n      border-radius: ${shape === 'round'\n        ? '50%'\n        : theme.vars.components?.Button?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-weight: 500;\n      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};\n      outline: none;\n      text-decoration: none;\n      white-space: nowrap;\n      width: ${fullWidth ? '100%' : 'auto'};\n      opacity: ${disabled || loading ? 0.6 : 1};\n      font-family: ${theme.vars.typography.fontFamily};\n      border-width: 1px;\n      border-style: solid;\n      ${variant === 'icon'\n        ? `\n        padding: 0;\n        min-width: unset;\n        min-height: unset;\n        width: ${iconDimension};\n        height: ${iconDimension};\n        justify-content: center;\n        align-items: center;\n      `\n        : ''}\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.lg};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);\n             font-size: ${theme.vars.typography.fontSizes.lg};\n             min-height: calc(${theme.vars.spacing.unit} * 5);`}\n      `,\n      medium: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.md};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 2);\n             font-size: ${theme.vars.typography.fontSizes.md};\n             min-height: calc(${theme.vars.spacing.unit} * 4);`}\n      `,\n      small: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.sm};`\n          : `padding: calc(${theme.vars.spacing.unit} * 0.5) calc(${theme.vars.spacing.unit} * 1);\n             font-size: ${theme.vars.typography.fontSizes.sm};\n             min-height: calc(${theme.vars.spacing.unit} * 3);`}\n      `,\n    };\n\n    const variantStyles: Record<string, string> = {\n      'primary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.primary.dark};\n          outline: none;\n        }\n      `,\n      'primary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'primary-solid': css`\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n      `,\n      'primary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'secondary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.secondary.dark};\n          outline: none;\n        }\n      `,\n      'secondary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'secondary-solid': css`\n        background-color: ${theme.vars.colors.secondary.main};\n        color: ${theme.vars.colors.secondary.contrastText};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n      `,\n      'secondary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'tertiary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n      'tertiary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: ${theme.vars.colors.border};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.action.hover};\n          border-color: ${theme.vars.colors.text.secondary};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.action.selected};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.action.focus};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n      `,\n      'tertiary-solid': css`\n        background-color: ${theme.vars.colors.text.secondary};\n        color: ${theme.vars.colors.background.surface};\n        border-color: ${theme.vars.colors.text.secondary};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n      `,\n      'tertiary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n    };\n\n    const spinnerStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const iconStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const contentStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    return {\n      button: baseButton,\n      content: contentStyles,\n      endIcon: iconStyles,\n      fullWidth: fullWidth\n        ? css`\n            width: 100%;\n          `\n        : null,\n      icon: iconStyles,\n      loading: loading\n        ? css`\n            pointer-events: none;\n          `\n        : null,\n      shape:\n        shape === 'round'\n          ? css`\n              border-radius: 50%;\n            `\n          : null,\n      size: sizeStyles[size],\n      spinner: spinnerStyles,\n      startIcon: iconStyles,\n      variant: variantStyles[`${color}-${variant}`] || variantStyles['primary-solid'],\n    };\n  }, [theme, colorScheme, color, variant, size, fullWidth, disabled, loading]);\n\nexport default useStyles;\n"],"mappings":"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"}
+{"version":3,"file":"Button.styles.cjs","names":["iconSizeMap: Record<string, string>","iconDimension: string","baseButton: string","sizeStyles: Record<string, string>","variantStyles: Record<string, string>","spinnerStyles: string","iconStyles: string"],"sources":["../../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Button 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 color - The button color\n * @param variant - The button variant\n * @param size - The button size\n * @param fullWidth - Whether the button should take full width\n * @param disabled - Whether the button is disabled\n * @param loading - Whether the button is in loading state\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  color: ButtonColor,\n  variant: ButtonVariant,\n  size: ButtonSize,\n  fullWidth: boolean,\n  disabled: boolean,\n  loading: boolean,\n  shape: 'square' | 'round' = 'square',\n): Record<string, string | null> =>\n  useMemo(() => {\n    const iconSizeMap: Record<string, string> = {\n      large: `calc(${theme.vars.spacing.unit} * 5)`,\n      medium: `calc(${theme.vars.spacing.unit} * 4)`,\n      small: `calc(${theme.vars.spacing.unit} * 3)`,\n    };\n\n    const iconDimension: string = iconSizeMap[size] || iconSizeMap['medium'];\n\n    const baseButton: string = css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n      border-radius: ${shape === 'round'\n        ? '50%'\n        : theme.vars.components?.Button?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-weight: 500;\n      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};\n      outline: none;\n      text-decoration: none;\n      white-space: nowrap;\n      width: ${fullWidth ? '100%' : 'auto'};\n      opacity: ${disabled || loading ? 0.6 : 1};\n      font-family: ${theme.vars.typography.fontFamily};\n      border-width: 1px;\n      border-style: solid;\n      ${variant === 'icon'\n        ? `\n        padding: 0;\n        min-width: unset;\n        min-height: unset;\n        width: ${iconDimension};\n        height: ${iconDimension};\n        justify-content: center;\n        align-items: center;\n      `\n        : ''}\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.lg};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);\n             font-size: ${theme.vars.typography.fontSizes.lg};\n             min-height: calc(${theme.vars.spacing.unit} * 5);`}\n      `,\n      medium: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.md};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 2);\n             font-size: ${theme.vars.typography.fontSizes.md};\n             min-height: calc(${theme.vars.spacing.unit} * 4);`}\n      `,\n      small: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.sm};`\n          : `padding: calc(${theme.vars.spacing.unit} * 0.5) calc(${theme.vars.spacing.unit} * 1);\n             font-size: ${theme.vars.typography.fontSizes.sm};\n             min-height: calc(${theme.vars.spacing.unit} * 3);`}\n      `,\n    };\n\n    const variantStyles: Record<string, string> = {\n      'primary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.primary.dark};\n          outline: none;\n        }\n      `,\n      'primary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'primary-solid': css`\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n      `,\n      'primary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'secondary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.secondary.dark};\n          outline: none;\n        }\n      `,\n      'secondary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'secondary-solid': css`\n        background-color: ${theme.vars.colors.secondary.main};\n        color: ${theme.vars.colors.secondary.contrastText};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n      `,\n      'secondary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'tertiary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n      'tertiary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: ${theme.vars.colors.border};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.action.hover};\n          border-color: ${theme.vars.colors.text.secondary};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.action.selected};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.action.focus};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n      `,\n      'tertiary-solid': css`\n        background-color: ${theme.vars.colors.text.secondary};\n        color: ${theme.vars.colors.background.surface};\n        border-color: ${theme.vars.colors.text.secondary};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n      `,\n      'tertiary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n      'error-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.error.main};\n        border-color: ${theme.vars.colors.error.main};\n        &:hover:not(:disabled),\n        &:focus-visible:not(:disabled) {\n          background-color: ${theme.vars.colors.error.main};\n          color: ${theme.vars.colors.error.contrastText};\n        }\n      `,\n      'error-solid': css`\n        background-color: ${theme.vars.colors.error.main};\n        color: ${theme.vars.colors.error.contrastText};\n        border-color: ${theme.vars.colors.error.main};\n        &:hover:not(:disabled),\n        &:focus-visible:not(:disabled) {\n          opacity: 0.9;\n        }\n      `,\n      'error-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.error.main};\n        border-color: transparent;\n        &:hover:not(:disabled),\n        &:focus-visible:not(:disabled) {\n          background-color: ${theme.vars.colors.action.hover};\n        }\n      `,\n    };\n\n    const spinnerStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const iconStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const contentStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    return {\n      button: baseButton,\n      content: contentStyles,\n      endIcon: iconStyles,\n      fullWidth: fullWidth\n        ? css`\n            width: 100%;\n          `\n        : null,\n      icon: iconStyles,\n      loading: loading\n        ? css`\n            pointer-events: none;\n          `\n        : null,\n      shape:\n        shape === 'round'\n          ? css`\n              border-radius: 50%;\n            `\n          : null,\n      size: sizeStyles[size],\n      spinner: spinnerStyles,\n      startIcon: iconStyles,\n      variant: variantStyles[`${color}-${variant}`] || variantStyles['primary-solid'],\n    };\n  }, [theme, colorScheme, color, variant, size, fullWidth, disabled, loading]);\n\nexport default useStyles;\n"],"mappings":"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"}