@thunderid/react 0.12.0 → 0.13.1

package/dist/cjs/components/adapters/GoogleButton.cjs

@@ -5,6 +5,430 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/components/adapters/GoogleButton.tsx
+/** Google's gradient "G" mark, matching the icon shipped in `@thunderid/console`'s `GoogleIcon`. */
+const GoogleGlyph = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "18",
+	height: "18",
+	viewBox: "0 0 268.1522 273.8827",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("defs", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+			id: "google-btn-a",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+				offset: "0",
+				stopColor: "#0fbc5c"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+				offset: "1",
+				stopColor: "#0cba65"
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+			id: "google-btn-g",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".2312727",
+					stopColor: "#0fbc5f"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".3115468",
+					stopColor: "#0fbc5f"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".3660131",
+					stopColor: "#0fbc5e"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".4575163",
+					stopColor: "#0fbc5d"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".540305",
+					stopColor: "#12bc58"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".6993464",
+					stopColor: "#28bf3c"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".7712418",
+					stopColor: "#38c02b"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".8605665",
+					stopColor: "#52c218"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".9150327",
+					stopColor: "#67c30f"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: "1",
+					stopColor: "#86c504"
+				})
+			]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+			id: "google-btn-h",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".1416122",
+					stopColor: "#1abd4d"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".2475151",
+					stopColor: "#6ec30d"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".3115468",
+					stopColor: "#8ac502"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".3660131",
+					stopColor: "#a2c600"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".4456735",
+					stopColor: "#c8c903"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".540305",
+					stopColor: "#ebcb03"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".6156363",
+					stopColor: "#f7cd07"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".6993454",
+					stopColor: "#fdcd04"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".7712418",
+					stopColor: "#fdce05"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".8605661",
+					stopColor: "#ffce0a"
+				})
+			]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+			id: "google-btn-f",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".3159041",
+					stopColor: "#ff4c3c"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".6038179",
+					stopColor: "#ff692c"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".7268366",
+					stopColor: "#ff7825"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".884534",
+					stopColor: "#ff8d1b"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: "1",
+					stopColor: "#ff9f13"
+				})
+			]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+			id: "google-btn-b",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".2312727",
+					stopColor: "#ff4541"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".3115468",
+					stopColor: "#ff4540"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".4575163",
+					stopColor: "#ff4640"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".540305",
+					stopColor: "#ff473f"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".6993464",
+					stopColor: "#ff5138"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".7712418",
+					stopColor: "#ff5b33"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".8605665",
+					stopColor: "#ff6c29"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: "1",
+					stopColor: "#ff8c18"
+				})
+			]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+			id: "google-btn-d",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+				offset: ".4084578",
+				stopColor: "#fb4e5a"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+				offset: "1",
+				stopColor: "#ff4540"
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+			id: "google-btn-c",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".1315461",
+					stopColor: "#0cba65"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".2097843",
+					stopColor: "#0bb86d"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".2972969",
+					stopColor: "#09b479"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".3962575",
+					stopColor: "#08ad93"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".4771242",
+					stopColor: "#0aa6a9"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".5684245",
+					stopColor: "#0d9cc6"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".667385",
+					stopColor: "#1893dd"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".7687273",
+					stopColor: "#258bf1"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".8585063",
+					stopColor: "#3086ff"
+				})
+			]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+			id: "google-btn-e",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".3660131",
+					stopColor: "#ff4e3a"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".4575163",
+					stopColor: "#ff8a1b"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".540305",
+					stopColor: "#ffa312"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".6156363",
+					stopColor: "#ffb60c"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".7712418",
+					stopColor: "#ffcd0a"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".8605665",
+					stopColor: "#fecf0a"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: ".9150327",
+					stopColor: "#fecf08"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+					offset: "1",
+					stopColor: "#fdcd01"
+				})
+			]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("linearGradient", {
+			href: "#google-btn-a",
+			id: "google-btn-s",
+			x1: "219.6997",
+			y1: "329.5351",
+			x2: "254.4673",
+			y2: "329.5351",
+			gradientUnits: "userSpaceOnUse"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("radialGradient", {
+			href: "#google-btn-b",
+			id: "google-btn-m",
+			gradientUnits: "userSpaceOnUse",
+			gradientTransform: "matrix(-1.936885,1.043001,1.455731,2.555422,290.5254,-400.6338)",
+			cx: "109.6267",
+			cy: "135.8619",
+			fx: "109.6267",
+			fy: "135.8619",
+			r: "71.46001"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("radialGradient", {
+			href: "#google-btn-c",
+			id: "google-btn-n",
+			gradientUnits: "userSpaceOnUse",
+			gradientTransform: "matrix(-3.512595,-4.45809,-1.692547,1.260616,870.8006,191.554)",
+			cx: "45.25866",
+			cy: "279.2738",
+			fx: "45.25866",
+			fy: "279.2738",
+			r: "71.46001"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("radialGradient", {
+			href: "#google-btn-d",
+			id: "google-btn-l",
+			cx: "304.0166",
+			cy: "118.0089",
+			fx: "304.0166",
+			fy: "118.0089",
+			r: "47.85445",
+			gradientTransform: "matrix(2.064353,-4.926832e-6,-2.901531e-6,2.592041,-297.6788,-151.7469)",
+			gradientUnits: "userSpaceOnUse"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("radialGradient", {
+			href: "#google-btn-e",
+			id: "google-btn-o",
+			gradientUnits: "userSpaceOnUse",
+			gradientTransform: "matrix(-0.2485783,2.083138,2.962486,0.3341668,-255.1463,-331.1636)",
+			cx: "181.001",
+			cy: "177.2013",
+			fx: "181.001",
+			fy: "177.2013",
+			r: "71.46001"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("radialGradient", {
+			href: "#google-btn-f",
+			id: "google-btn-p",
+			cx: "207.6733",
+			cy: "108.0972",
+			fx: "207.6733",
+			fy: "108.0972",
+			r: "41.1025",
+			gradientTransform: "matrix(-1.249206,1.343263,-3.896837,-3.425693,880.5011,194.9051)",
+			gradientUnits: "userSpaceOnUse"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("radialGradient", {
+			href: "#google-btn-g",
+			id: "google-btn-r",
+			gradientUnits: "userSpaceOnUse",
+			gradientTransform: "matrix(-1.936885,-1.043001,1.455731,-2.555422,290.5254,838.6834)",
+			cx: "109.6267",
+			cy: "135.8619",
+			fx: "109.6267",
+			fy: "135.8619",
+			r: "71.46001"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("radialGradient", {
+			href: "#google-btn-h",
+			id: "google-btn-j",
+			gradientUnits: "userSpaceOnUse",
+			gradientTransform: "matrix(-0.081402,-1.93722,2.926737,-0.1162508,-215.1345,632.8606)",
+			cx: "154.8697",
+			cy: "145.9691",
+			fx: "154.8697",
+			fy: "145.9691",
+			r: "71.46001"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("filter", {
+			id: "google-btn-q",
+			x: "-.04842873",
+			y: "-.0582241",
+			width: "1.096857",
+			height: "1.116448",
+			colorInterpolationFilters: "sRGB",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", { stdDeviation: "1.700914" })
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("filter", {
+			id: "google-btn-k",
+			x: "-.01670084",
+			y: "-.01009856",
+			width: "1.033402",
+			height: "1.020197",
+			colorInterpolationFilters: "sRGB",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", { stdDeviation: ".2419367" })
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
+			clipPathUnits: "userSpaceOnUse",
+			id: "google-btn-i",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M371.3784 193.2406H237.0825v53.4375h77.167c-1.2405 7.5627-4.0259 15.0024-8.1049 21.7862-4.6734 7.7723-10.4511 13.6895-16.373 18.1957-17.7389 13.4983-38.42 16.2584-52.7828 16.2584-36.2824 0-67.2833-23.2865-79.2844-54.9287-.4843-1.1482-.8059-2.3344-1.1975-3.5068-2.652-8.0533-4.101-16.5825-4.101-25.4474 0-9.226 1.5691-18.0575 4.4301-26.3985 11.2851-32.8967 42.9849-57.4674 80.1789-57.4674 7.4811 0 14.6854.8843 21.5173 2.6481 15.6135 4.0309 26.6578 11.9698 33.4252 18.2494l40.834-39.7111c-24.839-22.616-57.2194-36.3201-95.8444-36.3201-30.8782-.00066-59.3863 9.55308-82.7477 25.6992-18.9454 13.0941-34.4833 30.6254-44.9695 50.9861-9.75366 18.8785-15.09441 39.7994-15.09441 62.2934 0 22.495 5.34891 43.6334 15.10261 62.3374v.126c10.3023 19.8567 25.3678 36.9537 43.6783 49.9878 15.9962 11.3866 44.6789 26.5516 84.0307 26.5516 22.6301 0 42.6867-4.0517 60.3748-11.6447 12.76-5.4775 24.0655-12.6217 34.3012-21.8036 13.5247-12.1323 24.1168-27.1388 31.3465-44.4041 7.2297-17.2654 11.097-36.7895 11.097-57.957 0-9.858-.9971-19.8694-2.6881-28.9684Z",
+				fill: "#000"
+			})
+		})
+	] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+		transform: "matrix(0.957922,0,0,0.985255,-90.17436,-78.85577)",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+			clipPath: "url(#google-btn-i)",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M92.07563 219.9585c.14844 22.14 6.5014 44.983 16.11767 63.4234v.1269c6.9482 13.3919 16.4444 23.9704 27.2604 34.4518l65.326-23.67c-12.3593-6.2344-14.2452-10.0546-23.1048-17.0253-9.0537-9.0658-15.8015-19.4735-20.0038-31.677h-.1693l.1693-.1269c-2.7646-8.0587-3.0373-16.6129-3.1393-25.5029Z",
+					fill: "url(#google-btn-j)",
+					filter: "url(#google-btn-k)"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M237.0835 79.02491c-6.4568 22.52569-3.988 44.42139 0 57.16129 7.4561.0055 14.6388.8881 21.4494 2.6464 15.6135 4.0309 26.6566 11.97 33.424 18.2496l41.8794-40.7256c-24.8094-22.58904-54.6663-37.2961-96.7528-37.33169Z",
+					fill: "url(#google-btn-l)",
+					filter: "url(#google-btn-k)"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M236.9434 78.84678c-31.6709-.00068-60.9107 9.79833-84.8718 26.35902-8.8968 6.149-17.0612 13.2521-24.3311 21.1509-1.9045 17.7429 14.2569 39.5507 46.2615 39.3702 15.5284-17.9373 38.4946-29.5427 64.0561-29.5427.0233 0 .046.0019.0693.002l-1.0439-57.33536c-.0472-.00003-.0929-.00406-.1401-.00406Z",
+					fill: "url(#google-btn-m)",
+					filter: "url(#google-btn-k)"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "m341.4751 226.3788-28.2685 19.2848c-1.2405 7.5627-4.0278 15.0023-8.1068 21.7861-4.6734 7.7723-10.4506 13.6898-16.3725 18.196-17.7022 13.4704-38.3286 16.2439-52.6877 16.2553-14.8415 25.1018-17.4435 37.6749 1.0439 57.9342 22.8762-.0167 43.157-4.1174 61.0458-11.7965 12.9312-5.551 24.3879-12.7913 34.7609-22.0964 13.7061-12.295 24.4421-27.5034 31.7688-45.0003 7.3267-17.497 11.2446-37.2822 11.2446-58.7336Z",
+					fill: "url(#google-btn-n)",
+					filter: "url(#google-btn-k)"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M234.9956 191.2104v57.4981h136.0062c1.1962-7.8745 5.1523-18.0644 5.1523-26.5001 0-9.858-.9963-21.899-2.6873-30.998Z",
+					fill: "#3086ff",
+					filter: "url(#google-btn-k)"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M128.3894 124.3268c-8.393 9.1191-15.5632 19.326-21.2483 30.3646-9.75351 18.8785-15.09402 41.8295-15.09402 64.3235 0 .317.02642.6271.02855.9436 4.31953 8.2244 59.66647 6.6495 62.45617 0-.0035-.3103-.0387-.6128-.0387-.9238 0-9.226 1.5696-16.0262 4.4306-24.3672 3.5294-10.2885 9.0557-19.7628 16.1223-27.9257 1.6019-2.0309 5.8748-6.3969 7.1214-9.0157.4749-.9975-.8621-1.5574-.9369-1.9085-.0836-.3927-1.8762-.0769-2.2778-.3694-1.2751-.9288-3.8001-1.4138-5.3334-1.8449-3.2772-.9215-8.7085-2.9536-11.7252-5.0601-9.5357-6.6586-24.417-14.6122-33.5047-24.2164Z",
+					fill: "url(#google-btn-o)",
+					filter: "url(#google-btn-k)"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M162.0989 155.8569c22.1123 13.3013 28.4714-6.7139 43.173-12.9771L179.698 90.21568c-9.4075 3.92642-18.2957 8.80465-26.5426 14.50442-12.316 8.5122-23.192 18.8995-32.1763 30.7204Z",
+					fill: "url(#google-btn-p)",
+					filter: "url(#google-btn-q)"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M171.0987 290.222c-29.6829 10.6413-34.3299 11.023-37.0622 29.2903 5.2213 5.0597 10.8312 9.74 16.7926 13.9835 15.9962 11.3867 46.766 26.5517 86.1178 26.5517.0462 0 .0904-.004.1366-.004v-59.1574c-.0298.0001-.064.002-.0938.002-14.7359 0-26.5113-3.8435-38.5848-10.5273-2.9768-1.6479-8.3775 2.7772-11.1229.799-3.7865-2.7284-12.8991 2.3508-16.1833-.9378Z",
+					fill: "url(#google-btn-r)",
+					filter: "url(#google-btn-k)"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M219.6997 299.0227v59.9959c5.506.6402 11.2361 1.0289 17.2472 1.0289 6.0259 0 11.8556-.3073 17.5204-.8723v-59.7481c-6.3482 1.0777-12.3272 1.461-17.4776 1.461-5.9318 0-11.7005-.6858-17.29-1.8654Z",
+					opacity: ".5",
+					fill: "url(#google-btn-s)",
+					filter: "url(#google-btn-k)"
+				})
+			]
+		})
+	})]
+});
 /**
 * Google Sign-In Button Component.
 * Handles authentication with Google identity provider.
@@ -18,37 +442,7 @@ const GoogleButton = ({ isLoading, preferences, children,...rest }) => {
 		color: "secondary",
 		variant: "solid",
 		disabled: isLoading,
-		startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-			width: "18",
-			height: "18",
-			viewBox: "0 0 67.91 67.901",
-			xmlns: "http://www.w3.org/2000/svg",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
-				transform: "translate(-0.001 -0.001)",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-						d: "M15.049,160.965l-2.364,8.824-8.639.183a34.011,34.011,0,0,1-.25-31.7h0l7.691,1.41,3.369,7.645a20.262,20.262,0,0,0,.19,13.642Z",
-						transform: "translate(0 -119.93)",
-						fill: "#fbbb00"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-						d: "M294.24,208.176A33.939,33.939,0,0,1,282.137,241h0l-9.687-.494-1.371-8.559a20.235,20.235,0,0,0,8.706-10.333H261.628V208.176Z",
-						transform: "translate(-226.93 -180.567)",
-						fill: "#518ef8"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-						d: "M81.668,328.8h0a33.962,33.962,0,0,1-51.161-10.387l11-9.006a20.192,20.192,0,0,0,29.1,10.338Z",
-						transform: "translate(-26.463 -268.374)",
-						fill: "#28b446"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-						d: "M80.451,7.816l-11,9A20.19,20.19,0,0,0,39.686,27.393l-11.06-9.055h0A33.959,33.959,0,0,1,80.451,7.816Z",
-						transform: "translate(-24.828)",
-						fill: "#f14336"
-					})
-				]
-			})
-		}),
+		startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GoogleGlyph, {}),
 		children: children ?? t("elements.buttons.google.text")
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"GoogleButton.cjs","names":["GoogleButton: FC<GoogleButtonProps & HTMLAttributes<HTMLButtonElement>>","useTranslation","Button"],"sources":["../../../../src/components/adapters/GoogleButton.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {WithPreferences} from '@thunderid/browser';\nimport {FC, HTMLAttributes} from 'react';\nimport useTranslation from '../../hooks/useTranslation';\nimport Button from '../primitives/Button/Button';\n\nexport interface GoogleButtonProps extends WithPreferences {\n  /**\n   * Whether the component is in loading state.\n   */\n  isLoading?: boolean;\n}\n\n/**\n * Google Sign-In Button Component.\n * Handles authentication with Google identity provider.\n */\nconst GoogleButton: FC<GoogleButtonProps & HTMLAttributes<HTMLButtonElement>> = ({\n  isLoading,\n  preferences,\n  children,\n  ...rest\n}: GoogleButtonProps & HTMLAttributes<HTMLButtonElement>) => {\n  const {t} = useTranslation(preferences?.i18n);\n\n  return (\n    <Button\n      {...rest}\n      fullWidth\n      type=\"button\"\n      color=\"secondary\"\n      variant=\"solid\"\n      disabled={isLoading}\n      startIcon={\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 67.91 67.901\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g transform=\"translate(-0.001 -0.001)\">\n            <path\n              d=\"M15.049,160.965l-2.364,8.824-8.639.183a34.011,34.011,0,0,1-.25-31.7h0l7.691,1.41,3.369,7.645a20.262,20.262,0,0,0,.19,13.642Z\"\n              transform=\"translate(0 -119.93)\"\n              fill=\"#fbbb00\"\n            />\n            <path\n              d=\"M294.24,208.176A33.939,33.939,0,0,1,282.137,241h0l-9.687-.494-1.371-8.559a20.235,20.235,0,0,0,8.706-10.333H261.628V208.176Z\"\n              transform=\"translate(-226.93 -180.567)\"\n              fill=\"#518ef8\"\n            />\n            <path\n              d=\"M81.668,328.8h0a33.962,33.962,0,0,1-51.161-10.387l11-9.006a20.192,20.192,0,0,0,29.1,10.338Z\"\n              transform=\"translate(-26.463 -268.374)\"\n              fill=\"#28b446\"\n            />\n            <path\n              d=\"M80.451,7.816l-11,9A20.19,20.19,0,0,0,39.686,27.393l-11.06-9.055h0A33.959,33.959,0,0,1,80.451,7.816Z\"\n              transform=\"translate(-24.828)\"\n              fill=\"#f14336\"\n            />\n          </g>\n        </svg>\n      }\n    >\n      {children ?? t('elements.buttons.google.text')}\n    </Button>\n  );\n};\n\nexport default GoogleButton;\n"],"mappings":";;;;;;;;;;;AAmBA,MAAMA,gBAA2E,EAC/E,WACA,aACA,SACA,GAAG,WACwD;CAC3D,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;AAE7C,QACE,2CAACC;EACC,GAAI;EACJ;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,UAAU;EACV,WACE,2CAAC;GAAI,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAmB,OAAM;aAC3D,4CAAC;IAAE,WAAU;;KACX,2CAAC;MACC,GAAE;MACF,WAAU;MACV,MAAK;OACL;KACF,2CAAC;MACC,GAAE;MACF,WAAU;MACV,MAAK;OACL;KACF,2CAAC;MACC,GAAE;MACF,WAAU;MACV,MAAK;OACL;KACF,2CAAC;MACC,GAAE;MACF,WAAU;MACV,MAAK;OACL;;KACA;IACA;YAGP,YAAY,EAAE,+BAA+B;GACvC;;AAIb,2BAAe"}
+{"version":3,"file":"GoogleButton.cjs","names":["GoogleGlyph: FC","GoogleButton: FC<GoogleButtonProps & HTMLAttributes<HTMLButtonElement>>","useTranslation","Button"],"sources":["../../../../src/components/adapters/GoogleButton.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {WithPreferences} from '@thunderid/browser';\nimport {FC, HTMLAttributes} from 'react';\nimport useTranslation from '../../hooks/useTranslation';\nimport Button from '../primitives/Button/Button';\n\nexport interface GoogleButtonProps extends WithPreferences {\n  /**\n   * Whether the component is in loading state.\n   */\n  isLoading?: boolean;\n}\n\n/** Google's gradient \"G\" mark, matching the icon shipped in `@thunderid/console`'s `GoogleIcon`. */\nconst GoogleGlyph: FC = () => (\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 268.1522 273.8827\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n      <linearGradient id=\"google-btn-a\">\n        <stop offset=\"0\" stopColor=\"#0fbc5c\" />\n        <stop offset=\"1\" stopColor=\"#0cba65\" />\n      </linearGradient>\n      <linearGradient id=\"google-btn-g\">\n        <stop offset=\".2312727\" stopColor=\"#0fbc5f\" />\n        <stop offset=\".3115468\" stopColor=\"#0fbc5f\" />\n        <stop offset=\".3660131\" stopColor=\"#0fbc5e\" />\n        <stop offset=\".4575163\" stopColor=\"#0fbc5d\" />\n        <stop offset=\".540305\" stopColor=\"#12bc58\" />\n        <stop offset=\".6993464\" stopColor=\"#28bf3c\" />\n        <stop offset=\".7712418\" stopColor=\"#38c02b\" />\n        <stop offset=\".8605665\" stopColor=\"#52c218\" />\n        <stop offset=\".9150327\" stopColor=\"#67c30f\" />\n        <stop offset=\"1\" stopColor=\"#86c504\" />\n      </linearGradient>\n      <linearGradient id=\"google-btn-h\">\n        <stop offset=\".1416122\" stopColor=\"#1abd4d\" />\n        <stop offset=\".2475151\" stopColor=\"#6ec30d\" />\n        <stop offset=\".3115468\" stopColor=\"#8ac502\" />\n        <stop offset=\".3660131\" stopColor=\"#a2c600\" />\n        <stop offset=\".4456735\" stopColor=\"#c8c903\" />\n        <stop offset=\".540305\" stopColor=\"#ebcb03\" />\n        <stop offset=\".6156363\" stopColor=\"#f7cd07\" />\n        <stop offset=\".6993454\" stopColor=\"#fdcd04\" />\n        <stop offset=\".7712418\" stopColor=\"#fdce05\" />\n        <stop offset=\".8605661\" stopColor=\"#ffce0a\" />\n      </linearGradient>\n      <linearGradient id=\"google-btn-f\">\n        <stop offset=\".3159041\" stopColor=\"#ff4c3c\" />\n        <stop offset=\".6038179\" stopColor=\"#ff692c\" />\n        <stop offset=\".7268366\" stopColor=\"#ff7825\" />\n        <stop offset=\".884534\" stopColor=\"#ff8d1b\" />\n        <stop offset=\"1\" stopColor=\"#ff9f13\" />\n      </linearGradient>\n      <linearGradient id=\"google-btn-b\">\n        <stop offset=\".2312727\" stopColor=\"#ff4541\" />\n        <stop offset=\".3115468\" stopColor=\"#ff4540\" />\n        <stop offset=\".4575163\" stopColor=\"#ff4640\" />\n        <stop offset=\".540305\" stopColor=\"#ff473f\" />\n        <stop offset=\".6993464\" stopColor=\"#ff5138\" />\n        <stop offset=\".7712418\" stopColor=\"#ff5b33\" />\n        <stop offset=\".8605665\" stopColor=\"#ff6c29\" />\n        <stop offset=\"1\" stopColor=\"#ff8c18\" />\n      </linearGradient>\n      <linearGradient id=\"google-btn-d\">\n        <stop offset=\".4084578\" stopColor=\"#fb4e5a\" />\n        <stop offset=\"1\" stopColor=\"#ff4540\" />\n      </linearGradient>\n      <linearGradient id=\"google-btn-c\">\n        <stop offset=\".1315461\" stopColor=\"#0cba65\" />\n        <stop offset=\".2097843\" stopColor=\"#0bb86d\" />\n        <stop offset=\".2972969\" stopColor=\"#09b479\" />\n        <stop offset=\".3962575\" stopColor=\"#08ad93\" />\n        <stop offset=\".4771242\" stopColor=\"#0aa6a9\" />\n        <stop offset=\".5684245\" stopColor=\"#0d9cc6\" />\n        <stop offset=\".667385\" stopColor=\"#1893dd\" />\n        <stop offset=\".7687273\" stopColor=\"#258bf1\" />\n        <stop offset=\".8585063\" stopColor=\"#3086ff\" />\n      </linearGradient>\n      <linearGradient id=\"google-btn-e\">\n        <stop offset=\".3660131\" stopColor=\"#ff4e3a\" />\n        <stop offset=\".4575163\" stopColor=\"#ff8a1b\" />\n        <stop offset=\".540305\" stopColor=\"#ffa312\" />\n        <stop offset=\".6156363\" stopColor=\"#ffb60c\" />\n        <stop offset=\".7712418\" stopColor=\"#ffcd0a\" />\n        <stop offset=\".8605665\" stopColor=\"#fecf0a\" />\n        <stop offset=\".9150327\" stopColor=\"#fecf08\" />\n        <stop offset=\"1\" stopColor=\"#fdcd01\" />\n      </linearGradient>\n      <linearGradient\n        href=\"#google-btn-a\"\n        id=\"google-btn-s\"\n        x1=\"219.6997\"\n        y1=\"329.5351\"\n        x2=\"254.4673\"\n        y2=\"329.5351\"\n        gradientUnits=\"userSpaceOnUse\"\n      />\n      <radialGradient\n        href=\"#google-btn-b\"\n        id=\"google-btn-m\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"matrix(-1.936885,1.043001,1.455731,2.555422,290.5254,-400.6338)\"\n        cx=\"109.6267\"\n        cy=\"135.8619\"\n        fx=\"109.6267\"\n        fy=\"135.8619\"\n        r=\"71.46001\"\n      />\n      <radialGradient\n        href=\"#google-btn-c\"\n        id=\"google-btn-n\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"matrix(-3.512595,-4.45809,-1.692547,1.260616,870.8006,191.554)\"\n        cx=\"45.25866\"\n        cy=\"279.2738\"\n        fx=\"45.25866\"\n        fy=\"279.2738\"\n        r=\"71.46001\"\n      />\n      <radialGradient\n        href=\"#google-btn-d\"\n        id=\"google-btn-l\"\n        cx=\"304.0166\"\n        cy=\"118.0089\"\n        fx=\"304.0166\"\n        fy=\"118.0089\"\n        r=\"47.85445\"\n        gradientTransform=\"matrix(2.064353,-4.926832e-6,-2.901531e-6,2.592041,-297.6788,-151.7469)\"\n        gradientUnits=\"userSpaceOnUse\"\n      />\n      <radialGradient\n        href=\"#google-btn-e\"\n        id=\"google-btn-o\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"matrix(-0.2485783,2.083138,2.962486,0.3341668,-255.1463,-331.1636)\"\n        cx=\"181.001\"\n        cy=\"177.2013\"\n        fx=\"181.001\"\n        fy=\"177.2013\"\n        r=\"71.46001\"\n      />\n      <radialGradient\n        href=\"#google-btn-f\"\n        id=\"google-btn-p\"\n        cx=\"207.6733\"\n        cy=\"108.0972\"\n        fx=\"207.6733\"\n        fy=\"108.0972\"\n        r=\"41.1025\"\n        gradientTransform=\"matrix(-1.249206,1.343263,-3.896837,-3.425693,880.5011,194.9051)\"\n        gradientUnits=\"userSpaceOnUse\"\n      />\n      <radialGradient\n        href=\"#google-btn-g\"\n        id=\"google-btn-r\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"matrix(-1.936885,-1.043001,1.455731,-2.555422,290.5254,838.6834)\"\n        cx=\"109.6267\"\n        cy=\"135.8619\"\n        fx=\"109.6267\"\n        fy=\"135.8619\"\n        r=\"71.46001\"\n      />\n      <radialGradient\n        href=\"#google-btn-h\"\n        id=\"google-btn-j\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"matrix(-0.081402,-1.93722,2.926737,-0.1162508,-215.1345,632.8606)\"\n        cx=\"154.8697\"\n        cy=\"145.9691\"\n        fx=\"154.8697\"\n        fy=\"145.9691\"\n        r=\"71.46001\"\n      />\n      <filter\n        id=\"google-btn-q\"\n        x=\"-.04842873\"\n        y=\"-.0582241\"\n        width=\"1.096857\"\n        height=\"1.116448\"\n        colorInterpolationFilters=\"sRGB\"\n      >\n        <feGaussianBlur stdDeviation=\"1.700914\" />\n      </filter>\n      <filter\n        id=\"google-btn-k\"\n        x=\"-.01670084\"\n        y=\"-.01009856\"\n        width=\"1.033402\"\n        height=\"1.020197\"\n        colorInterpolationFilters=\"sRGB\"\n      >\n        <feGaussianBlur stdDeviation=\".2419367\" />\n      </filter>\n      <clipPath clipPathUnits=\"userSpaceOnUse\" id=\"google-btn-i\">\n        <path\n          d=\"M371.3784 193.2406H237.0825v53.4375h77.167c-1.2405 7.5627-4.0259 15.0024-8.1049 21.7862-4.6734 7.7723-10.4511 13.6895-16.373 18.1957-17.7389 13.4983-38.42 16.2584-52.7828 16.2584-36.2824 0-67.2833-23.2865-79.2844-54.9287-.4843-1.1482-.8059-2.3344-1.1975-3.5068-2.652-8.0533-4.101-16.5825-4.101-25.4474 0-9.226 1.5691-18.0575 4.4301-26.3985 11.2851-32.8967 42.9849-57.4674 80.1789-57.4674 7.4811 0 14.6854.8843 21.5173 2.6481 15.6135 4.0309 26.6578 11.9698 33.4252 18.2494l40.834-39.7111c-24.839-22.616-57.2194-36.3201-95.8444-36.3201-30.8782-.00066-59.3863 9.55308-82.7477 25.6992-18.9454 13.0941-34.4833 30.6254-44.9695 50.9861-9.75366 18.8785-15.09441 39.7994-15.09441 62.2934 0 22.495 5.34891 43.6334 15.10261 62.3374v.126c10.3023 19.8567 25.3678 36.9537 43.6783 49.9878 15.9962 11.3866 44.6789 26.5516 84.0307 26.5516 22.6301 0 42.6867-4.0517 60.3748-11.6447 12.76-5.4775 24.0655-12.6217 34.3012-21.8036 13.5247-12.1323 24.1168-27.1388 31.3465-44.4041 7.2297-17.2654 11.097-36.7895 11.097-57.957 0-9.858-.9971-19.8694-2.6881-28.9684Z\"\n          fill=\"#000\"\n        />\n      </clipPath>\n    </defs>\n    <g transform=\"matrix(0.957922,0,0,0.985255,-90.17436,-78.85577)\">\n      <g clipPath=\"url(#google-btn-i)\">\n        <path\n          d=\"M92.07563 219.9585c.14844 22.14 6.5014 44.983 16.11767 63.4234v.1269c6.9482 13.3919 16.4444 23.9704 27.2604 34.4518l65.326-23.67c-12.3593-6.2344-14.2452-10.0546-23.1048-17.0253-9.0537-9.0658-15.8015-19.4735-20.0038-31.677h-.1693l.1693-.1269c-2.7646-8.0587-3.0373-16.6129-3.1393-25.5029Z\"\n          fill=\"url(#google-btn-j)\"\n          filter=\"url(#google-btn-k)\"\n        />\n        <path\n          d=\"M237.0835 79.02491c-6.4568 22.52569-3.988 44.42139 0 57.16129 7.4561.0055 14.6388.8881 21.4494 2.6464 15.6135 4.0309 26.6566 11.97 33.424 18.2496l41.8794-40.7256c-24.8094-22.58904-54.6663-37.2961-96.7528-37.33169Z\"\n          fill=\"url(#google-btn-l)\"\n          filter=\"url(#google-btn-k)\"\n        />\n        <path\n          d=\"M236.9434 78.84678c-31.6709-.00068-60.9107 9.79833-84.8718 26.35902-8.8968 6.149-17.0612 13.2521-24.3311 21.1509-1.9045 17.7429 14.2569 39.5507 46.2615 39.3702 15.5284-17.9373 38.4946-29.5427 64.0561-29.5427.0233 0 .046.0019.0693.002l-1.0439-57.33536c-.0472-.00003-.0929-.00406-.1401-.00406Z\"\n          fill=\"url(#google-btn-m)\"\n          filter=\"url(#google-btn-k)\"\n        />\n        <path\n          d=\"m341.4751 226.3788-28.2685 19.2848c-1.2405 7.5627-4.0278 15.0023-8.1068 21.7861-4.6734 7.7723-10.4506 13.6898-16.3725 18.196-17.7022 13.4704-38.3286 16.2439-52.6877 16.2553-14.8415 25.1018-17.4435 37.6749 1.0439 57.9342 22.8762-.0167 43.157-4.1174 61.0458-11.7965 12.9312-5.551 24.3879-12.7913 34.7609-22.0964 13.7061-12.295 24.4421-27.5034 31.7688-45.0003 7.3267-17.497 11.2446-37.2822 11.2446-58.7336Z\"\n          fill=\"url(#google-btn-n)\"\n          filter=\"url(#google-btn-k)\"\n        />\n        <path\n          d=\"M234.9956 191.2104v57.4981h136.0062c1.1962-7.8745 5.1523-18.0644 5.1523-26.5001 0-9.858-.9963-21.899-2.6873-30.998Z\"\n          fill=\"#3086ff\"\n          filter=\"url(#google-btn-k)\"\n        />\n        <path\n          d=\"M128.3894 124.3268c-8.393 9.1191-15.5632 19.326-21.2483 30.3646-9.75351 18.8785-15.09402 41.8295-15.09402 64.3235 0 .317.02642.6271.02855.9436 4.31953 8.2244 59.66647 6.6495 62.45617 0-.0035-.3103-.0387-.6128-.0387-.9238 0-9.226 1.5696-16.0262 4.4306-24.3672 3.5294-10.2885 9.0557-19.7628 16.1223-27.9257 1.6019-2.0309 5.8748-6.3969 7.1214-9.0157.4749-.9975-.8621-1.5574-.9369-1.9085-.0836-.3927-1.8762-.0769-2.2778-.3694-1.2751-.9288-3.8001-1.4138-5.3334-1.8449-3.2772-.9215-8.7085-2.9536-11.7252-5.0601-9.5357-6.6586-24.417-14.6122-33.5047-24.2164Z\"\n          fill=\"url(#google-btn-o)\"\n          filter=\"url(#google-btn-k)\"\n        />\n        <path\n          d=\"M162.0989 155.8569c22.1123 13.3013 28.4714-6.7139 43.173-12.9771L179.698 90.21568c-9.4075 3.92642-18.2957 8.80465-26.5426 14.50442-12.316 8.5122-23.192 18.8995-32.1763 30.7204Z\"\n          fill=\"url(#google-btn-p)\"\n          filter=\"url(#google-btn-q)\"\n        />\n        <path\n          d=\"M171.0987 290.222c-29.6829 10.6413-34.3299 11.023-37.0622 29.2903 5.2213 5.0597 10.8312 9.74 16.7926 13.9835 15.9962 11.3867 46.766 26.5517 86.1178 26.5517.0462 0 .0904-.004.1366-.004v-59.1574c-.0298.0001-.064.002-.0938.002-14.7359 0-26.5113-3.8435-38.5848-10.5273-2.9768-1.6479-8.3775 2.7772-11.1229.799-3.7865-2.7284-12.8991 2.3508-16.1833-.9378Z\"\n          fill=\"url(#google-btn-r)\"\n          filter=\"url(#google-btn-k)\"\n        />\n        <path\n          d=\"M219.6997 299.0227v59.9959c5.506.6402 11.2361 1.0289 17.2472 1.0289 6.0259 0 11.8556-.3073 17.5204-.8723v-59.7481c-6.3482 1.0777-12.3272 1.461-17.4776 1.461-5.9318 0-11.7005-.6858-17.29-1.8654Z\"\n          opacity=\".5\"\n          fill=\"url(#google-btn-s)\"\n          filter=\"url(#google-btn-k)\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\n/**\n * Google Sign-In Button Component.\n * Handles authentication with Google identity provider.\n */\nconst GoogleButton: FC<GoogleButtonProps & HTMLAttributes<HTMLButtonElement>> = ({\n  isLoading,\n  preferences,\n  children,\n  ...rest\n}: GoogleButtonProps & HTMLAttributes<HTMLButtonElement>) => {\n  const {t} = useTranslation(preferences?.i18n);\n\n  return (\n    <Button\n      {...rest}\n      fullWidth\n      type=\"button\"\n      color=\"secondary\"\n      variant=\"solid\"\n      disabled={isLoading}\n      startIcon={<GoogleGlyph />}\n    >\n      {children ?? t('elements.buttons.google.text')}\n    </Button>\n  );\n};\n\nexport default GoogleButton;\n"],"mappings":"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IACd;EACF,2CAAC;GACC,MAAK;GACL,IAAG;GACH,eAAc;GACd,mBAAkB;GAClB,IAAG;GACH,IAAG;GACH,IAAG;GACH,IAAG;GACH,GAAE;IACF;EACF,2CAAC;GACC,MAAK;GACL,IAAG;GACH,eAAc;GACd,mBAAkB;GAClB,IAAG;GACH,IAAG;GACH,IAAG;GACH,IAAG;GACH,GAAE;IACF;EACF,2CAAC;GACC,MAAK;GACL,IAAG;GACH,IAAG;GACH,IAAG;GACH,IAAG;GACH,IAAG;GACH,GAAE;GACF,mBAAkB;GAClB,eAAc;IACd;EACF,2CAAC;GACC,MAAK;GACL,IAAG;GACH,eAAc;GACd,mBAAkB;GAClB,IAAG;GACH,IAAG;GACH,IAAG;GACH,IAAG;GACH,GAAE;IACF;EACF,2CAAC;GACC,MAAK;GACL,IAAG;GACH,IAAG;GACH,IAAG;GACH,IAAG;GACH,IAAG;GACH,GAAE;GACF,mBAAkB;GAClB,eAAc;IACd;EACF,2CAAC;GACC,MAAK;GACL,IAAG;GACH,eAAc;GACd,mBAAkB;GAClB,IAAG;GACH,IAAG;GACH,IAAG;GACH,IAAG;GACH,GAAE;IACF;EACF,2CAAC;GACC,MAAK;GACL,IAAG;GACH,eAAc;GACd,mBAAkB;GAClB,IAAG;GACH,IAAG;GACH,IAAG;GACH,IAAG;GACH,GAAE;IACF;EACF,2CAAC;GACC,IAAG;GACH,GAAE;GACF,GAAE;GACF,OAAM;GACN,QAAO;GACP,2BAA0B;aAE1B,2CAAC,oBAAe,cAAa,aAAa;IACnC;EACT,2CAAC;GACC,IAAG;GACH,GAAE;GACF,GAAE;GACF,OAAM;GACN,QAAO;GACP,2BAA0B;aAE1B,2CAAC,oBAAe,cAAa,aAAa;IACnC;EACT,2CAAC;GAAS,eAAc;GAAiB,IAAG;aAC1C,2CAAC;IACC,GAAE;IACF,MAAK;KACL;IACO;KACN,EACP,2CAAC;EAAE,WAAU;YACX,4CAAC;GAAE,UAAS;;IACV,2CAAC;KACC,GAAE;KACF,MAAK;KACL,QAAO;MACP;IACF,2CAAC;KACC,GAAE;KACF,MAAK;KACL,QAAO;MACP;IACF,2CAAC;KACC,GAAE;KACF,MAAK;KACL,QAAO;MACP;IACF,2CAAC;KACC,GAAE;KACF,MAAK;KACL,QAAO;MACP;IACF,2CAAC;KACC,GAAE;KACF,MAAK;KACL,QAAO;MACP;IACF,2CAAC;KACC,GAAE;KACF,MAAK;KACL,QAAO;MACP;IACF,2CAAC;KACC,GAAE;KACF,MAAK;KACL,QAAO;MACP;IACF,2CAAC;KACC,GAAE;KACF,MAAK;KACL,QAAO;MACP;IACF,2CAAC;KACC,GAAE;KACF,SAAQ;KACR,MAAK;KACL,QAAO;MACP;;IACA;GACF;EACA;;;;;AAOR,MAAMC,gBAA2E,EAC/E,WACA,aACA,SACA,GAAG,WACwD;CAC3D,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;AAE7C,QACE,2CAACC;EACC,GAAI;EACJ;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,UAAU;EACV,WAAW,2CAAC,gBAAc;YAEzB,YAAY,EAAE,+BAA+B;GACvC;;AAIb,2BAAe"}

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

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../styles/emotion.cjs');
 const require_useTheme = require('../../contexts/Theme/useTheme.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
@@ -12,6 +13,11 @@ const DEFAULT_EMOJI_CONTAINER_HEIGHT = "4em";
 */
 const ImageComponent = ({ component }) => {
 	const { theme } = require_useTheme.default();
+	const centerClass = require_emotion.css({ textAlign: "center" });
+	const emojiGlyphClass = require_emotion.css({
+		fontSize: "100cqmin",
+		lineHeight: 1
+	});
 	const config = component.config || {};
 	const src = config["src"] || "";
 	const alt = config["alt"] || config["label"] || "Image";
@@ -23,6 +29,7 @@ const ImageComponent = ({ component }) => {
 		display: "block",
 		margin: variant === "image_block" ? "1rem auto" : "0"
 	};
+	const imageClass = require_emotion.css(imageStyle);
 	if (!src) return null;
 	const resolvedIcon = (0, __thunderid_browser.resolveLogoUri)(src, alt);
 	if (resolvedIcon.kind === "emoji") {
@@ -35,36 +42,33 @@ const ImageComponent = ({ component }) => {
 		else if (isConcrete(cssWidth)) containerHeight = cssWidth;
 		else containerHeight = DEFAULT_EMOJI_CONTAINER_HEIGHT;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style: { textAlign: "center" },
+			className: centerClass,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				style: {
+				className: require_emotion.css({
 					...imageStyle,
 					containerType: "size",
 					display: "inline-grid",
 					height: containerHeight,
 					placeItems: "center",
 					width: cssWidth
-				},
+				}),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"aria-label": alt,
 					role: "img",
-					style: {
-						fontSize: "100cqmin",
-						lineHeight: 1
-					},
+					className: emojiGlyphClass,
 					children: resolvedIcon.glyph
 				})
 			})
 		}, component.id);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		style: { textAlign: "center" },
+		className: centerClass,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 			src: resolvedIcon.imgSrc,
 			alt,
 			height,
 			width,
-			style: imageStyle,
+			className: imageClass,
 			onError: (e) => {
 				e.currentTarget.style.display = "none";
 			}

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","resolvedIcon: ResolvedLogo","cssWidth: string","cssHeight: string","containerHeight: string"],"sources":["../../../../src/components/adapters/ImageComponent.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\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":";;;;;;;;AAQA,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"}
+{"version":3,"file":"ImageComponent.cjs","names":["ImageComponent: FC<AdapterProps>","useTheme","centerClass: string","css","emojiGlyphClass: string","config: Record<string, unknown>","src: string","alt: string","width: string","height: string","variant: string","imageClass: string","resolvedIcon: ResolvedLogo","cssWidth: string","cssHeight: string","containerHeight: string"],"sources":["../../../../src/components/adapters/ImageComponent.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC, SyntheticEvent} from 'react';\nimport useTheme from '../../contexts/Theme/useTheme';\nimport {AdapterProps} from '../../models/adapters';\nimport {css} from '../../styles/emotion';\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  // Computed per render (not at module scope): a CSP nonce configured on <ThunderIDProvider>\n  // isn't known until the provider renders, and Emotion needs it applied before any style\n  // insertion happens. These are static, so Emotion's own cache dedupes the repeat calls to a\n  // no-op after the first render — this isn't a real per-render cost.\n  const centerClass: string = css({textAlign: 'center'});\n  const emojiGlyphClass: string = css({fontSize: '100cqmin', lineHeight: 1});\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 = {\n    borderRadius: theme.vars.borderRadius.small,\n    display: 'block',\n    margin: variant === 'image_block' ? '1rem auto' : '0',\n  };\n\n  const imageClass: string = css(imageStyle);\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    const emojiContainerClass: string = css({\n      ...imageStyle,\n      containerType: 'size',\n      display: 'inline-grid',\n      height: containerHeight,\n      placeItems: 'center',\n      width: cssWidth,\n    });\n\n    return (\n      <div key={component.id} className={centerClass}>\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 className={emojiContainerClass}>\n          <span aria-label={alt} role=\"img\" className={emojiGlyphClass}>\n            {resolvedIcon.glyph}\n          </span>\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div key={component.id} className={centerClass}>\n      <img\n        src={resolvedIcon.imgSrc}\n        alt={alt}\n        height={height}\n        width={width}\n        className={imageClass}\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":";;;;;;;;;AASA,MAAM,iCAAiC;;;;AAKvC,MAAMA,kBAAoC,EAAC,gBAA6B;CACtE,MAAM,EAAC,UAASC,0BAAU;CAK1B,MAAMC,cAAsBC,oBAAI,EAAC,WAAW,UAAS,CAAC;CACtD,MAAMC,kBAA0BD,oBAAI;EAAC,UAAU;EAAY,YAAY;EAAE,CAAC;CAC1E,MAAME,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,MAAM,aAAa;EACjB,cAAc,MAAM,KAAK,aAAa;EACtC,SAAS;EACT,QAAQ,YAAY,gBAAgB,cAAc;EACnD;CAED,MAAMC,aAAqBR,oBAAI,WAAW;AAE1C,KAAI,CAAC,IACH,QAAO;CAGT,MAAMS,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;AAYpB,SACE,2CAAC;GAAuB,WAAW;aAMjC,2CAAC;IAAK,WAhB0BZ,oBAAI;KACtC,GAAG;KACH,eAAe;KACf,SAAS;KACT,QAAQ;KACR,YAAY;KACZ,OAAO;KACR,CAAC;cAUI,2CAAC;KAAK,cAAY;KAAK,MAAK;KAAM,WAAW;eAC1C,aAAa;MACT;KACF;KAVC,UAAU,GAWd;;AAIV,QACE,2CAAC;EAAuB,WAAW;YACjC,2CAAC;GACC,KAAK,aAAa;GACb;GACG;GACD;GACP,WAAW;GACX,UAAU,MAA8C;AAEtD,MAAE,cAAc,MAAM,UAAU;;IAElC;IAXM,UAAU,GAYd;;AAIV,6BAAe"}

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

@@ -1,4 +1,5 @@
 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_BaseLanguageSwitcher_styles = require('./BaseLanguageSwitcher.styles.cjs');
 const require_Check = require('../../primitives/Icons/Check.cjs');
@@ -7,8 +8,6 @@ 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 __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 let __floating_ui_react = require("@floating-ui/react");
 __floating_ui_react = require_rolldown_runtime.__toESM(__floating_ui_react);
 
@@ -54,7 +53,7 @@ const BaseLanguageSwitcher = ({ children, className, currentLanguage, isLoading
 		onLanguageChange
 	}) });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __emotion_css.cx)(styles["root"], className),
+		className: require_emotion.cx(styles["root"], className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			ref: refs.setReference,
 			type: "button",
@@ -87,7 +86,7 @@ const BaseLanguageSwitcher = ({ children, className, currentLanguage, isLoading
 					type: "button",
 					role: "option",
 					"aria-selected": lang.code === currentLanguage,
-					className: (0, __emotion_css.cx)(styles["option"], lang.code === currentLanguage && styles["optionActive"]),
+					className: require_emotion.cx(styles["option"], lang.code === currentLanguage && styles["optionActive"]),
 					onClick: () => {
 						onLanguageChange(lang.code);
 						setIsOpen(false);