@seams/wallet 0.24.0 → 0.27.0

package/dist/esm/react/components/HostedSeamsAuthMenu/WalletConnectorMenu.css

@@ -0,0 +1,182 @@
+:where([data-seams-root]) .seams-wallet-connector {
+  box-sizing: border-box;
+  position: relative;
+  width: min(100%, 420px);
+  border-radius: var(--seams-shape-card, 16px);
+  background: var(--seams-colors-colorBackground);
+  box-shadow: var(--seams-shadows-md);
+  color: var(--seams-colors-textPrimary);
+  font-family: var(--seams-font-family, system-ui, sans-serif);
+  font-size: var(--seams-font-size-base, 1rem);
+  line-height: 1.5;
+  transition: height 200ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+:where([data-seams-root]) .seams-wallet-connector[data-connector-view='auth'] {
+  background: transparent;
+  box-shadow: none;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-content {
+  width: 100%;
+  min-width: 0;
+  border-radius: inherit;
+}
+
+:where([data-seams-root])
+  .seams-wallet-connector[data-connector-view='auth']
+  .seams-wallet-connector-content {
+  animation: seams-connector-enter 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-choices {
+  box-sizing: border-box;
+  padding: calc(var(--seams-spacing-lg) + var(--seams-spacing-xs)) var(--seams-spacing-lg)
+    var(--seams-spacing-lg);
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: inherit;
+}
+
+:where([data-seams-root]) .seams-wallet-connector h2 {
+  margin: 0 calc(var(--seams-spacing-lg) + var(--seams-spacing-xs))
+    calc(var(--seams-spacing-sm) + var(--seams-spacing-xs)) 0;
+  font-size: 1.375em;
+  line-height: 1.25;
+  font-weight: 500;
+  letter-spacing: -0.04em;
+  outline: none;
+}
+
+:where([data-seams-root]) .seams-wallet-connector p {
+  margin: 0 0 var(--seams-spacing-lg);
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.8125em;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-options {
+  display: grid;
+  gap: var(--seams-spacing-sm);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-option {
+  display: flex;
+  align-items: center;
+  gap: var(--seams-spacing-md);
+  width: 100%;
+  min-width: 0;
+  min-height: calc(var(--seams-shape-controlHeight, 44px) + 2 * var(--seams-spacing-md));
+  padding: var(--seams-spacing-md);
+  box-sizing: border-box;
+  border: 1px solid var(--seams-colors-secondaryButtonBorder, var(--seams-colors-borderPrimary));
+  border-radius: var(--seams-shape-control, 10px);
+  background: var(--seams-colors-secondaryButtonBackground, var(--seams-colors-surface));
+  color: var(--seams-colors-secondaryButtonText, var(--seams-colors-textPrimary));
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-option:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-icon {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  flex: none;
+}
+:where([data-seams-root]) .seams-wallet-connector-icon img {
+  display: block;
+  object-fit: contain;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-label {
+  display: grid;
+  gap: var(--seams-spacing-xs);
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-label strong {
+  font-size: 0.8125em;
+  font-weight: 500;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-label small {
+  font-size: 0.75em;
+  color: var(--seams-colors-textSecondary);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-option > svg {
+  flex: none;
+  color: var(--seams-colors-textSecondary);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-close,
+:where([data-seams-root]) .seams-wallet-connector-back {
+  position: absolute;
+  z-index: calc(var(--seams-wallet-inline-dialog-z, 0) + 1);
+  inset: 12px 12px auto auto;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: var(--seams-colors-textSecondary);
+  background: transparent;
+  cursor: pointer;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-back:has(+ .seams-wallet-connector-close) {
+  right: 52px;
+}
+
+:where([data-seams-root]) .seams-wallet-connector button:focus-visible {
+  outline: 2px solid var(--seams-colors-focus, currentColor);
+  outline-offset: 3px;
+}
+
+:where([data-seams-root]) .seams-wallet-connector p[role] {
+  margin: var(--seams-spacing-md) 0 0;
+}
+
+:where([data-seams-root]) .seams-wallet-connector .seams-wallet-connector-error {
+  color: var(--seams-colors-error);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :where([data-seams-root]) .seams-wallet-connector-option:not(:disabled):hover {
+    background: var(--seams-colors-secondaryButtonHoverBackground, var(--seams-colors-hover));
+    border-color: var(--seams-colors-borderHover);
+  }
+  :where([data-seams-root]) .seams-wallet-connector-close:hover,
+  :where([data-seams-root]) .seams-wallet-connector-back:hover {
+    background: var(--seams-colors-hover);
+  }
+}
+
+@keyframes seams-connector-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-seams-root]) .seams-wallet-connector {
+    transition: none;
+  }
+  :where([data-seams-root]) .seams-wallet-connector-content {
+    animation: none;
+  }
+}

package/dist/esm/react/components/HostedSeamsAuthMenu/WalletConnectorMenu.js

@@ -0,0 +1,315 @@
+import { nearWalletName } from "../../../externalNear/wallets.js";
+import { walletDisplayText } from "../../../core/ui/messages.js";
+import { SEAMS_STANDARD_WORDMARK_PATH } from "../../../core/signingEngine/uiConfirm/ui/seamsWordmarkPaths.js";
+import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
+import { useSeams } from "../../context/index.js";
+import { Theme, useTheme } from "../theme/ThemeProvider.js";
+import { HoverArrowIcon } from "../AccountMenuButton/icons/HoverArrowIcon.js";
+import HostedSeamsAuthMenu from "./shell.js";
+import { ExternalNearWalletIcon } from "../ExternalNearWalletIcon.js";
+import { Component, createRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./WalletConnectorMenu.css";
+//#region src/react/components/HostedSeamsAuthMenu/WalletConnectorMenu.tsx
+/** Default wallet selection UI. Authentication stays on the isolated wallet origin. */
+function WalletConnectorMenu(props) {
+	const { seams } = useSeams();
+	const { theme, tokens } = useTheme();
+	const locale = useWalletLocale();
+	return /* @__PURE__ */ jsx(Theme, {
+		tag: "div",
+		theme,
+		tokens: { [theme]: tokens },
+		children: /* @__PURE__ */ jsx(ConnectorPanel, {
+			...props,
+			locale,
+			prepareAuthMenu: seams.authMenu.prepare
+		})
+	});
+}
+var ConnectorPanel = class extends Component {
+	state = { view: {
+		kind: "choices",
+		error: null
+	} };
+	root = createRef();
+	content = createRef();
+	heading = createRef();
+	observer = null;
+	unsubscribe = null;
+	pending = null;
+	componentDidMount() {
+		this.subscribe();
+		this.observer = new ResizeObserver(this.measure);
+		if (this.content.current) this.observer.observe(this.content.current);
+		this.measure();
+	}
+	getSnapshotBeforeUpdate() {
+		return this.root.current?.offsetHeight ?? 0;
+	}
+	componentDidUpdate(previous, previousState, previousHeight) {
+		if (previous.externalNear?.controller !== this.props.externalNear?.controller) {
+			this.unsubscribe?.();
+			this.cancelPending();
+			this.subscribe();
+		}
+		if (previousState.view.kind === "auth" && this.state.view.kind === "choices") {
+			const root = this.root.current;
+			if (root) {
+				root.style.height = `${previousHeight}px`;
+				root.getBoundingClientRect();
+			}
+			this.heading.current?.focus({ preventScroll: true });
+		}
+		this.measure();
+	}
+	componentWillUnmount() {
+		this.observer?.disconnect();
+		this.unsubscribe?.();
+		this.cancelPending();
+	}
+	subscribe() {
+		this.unsubscribe = this.props.externalNear?.controller.subscribe(this.refreshWallets) ?? null;
+	}
+	refreshWallets = () => {
+		if (this.pending && !this.pending.controller.getSnapshot().wallets.includes(this.pending.wallet)) this.cancelPending();
+		this.forceUpdate();
+	};
+	cancelPending() {
+		const pending = this.pending;
+		this.pending = null;
+		pending?.controller.disconnect();
+	}
+	measure = () => {
+		const root = this.root.current;
+		const content = this.content.current;
+		if (!root || !content) return;
+		root.style.height = this.state.view.kind === "auth" ? "auto" : `${content.offsetHeight}px`;
+	};
+	prepare = () => {
+		this.props.prepareAuthMenu();
+	};
+	openAuthMenu = () => {
+		const root = this.root.current;
+		if (this.pending || !root || this.state.view.kind !== "choices") return;
+		this.setState({ view: {
+			kind: "auth",
+			initialHeightCssPx: root.offsetHeight
+		} });
+	};
+	handleOutcome = (outcome) => {
+		switch (outcome.kind) {
+			case "cancelled":
+				this.setState({ view: {
+					kind: "choices",
+					error: null
+				} });
+				this.props.onClose?.();
+				break;
+			case "failed":
+				this.setState({ view: {
+					kind: "choices",
+					error: outcome.message
+				} });
+				break;
+			case "authenticated":
+			case "registered":
+			case "account_synced": break;
+			default: return assertNever(outcome);
+		}
+		this.props.onOutcome(outcome);
+	};
+	close = () => {
+		this.cancelPending();
+		if (this.state.view.kind === "auth") this.setState({ view: {
+			kind: "choices",
+			error: null
+		} });
+		this.props.onClose?.();
+	};
+	back = () => {
+		this.setState({ view: {
+			kind: "choices",
+			error: null
+		} });
+	};
+	connect = async (wallet) => {
+		const external = this.props.externalNear;
+		if (!external || this.pending) return;
+		const pending = {
+			controller: external.controller,
+			wallet
+		};
+		this.pending = pending;
+		this.setState({ view: {
+			kind: "choices",
+			error: null
+		} });
+		const result = await external.controller.connect(wallet);
+		if (this.pending !== pending) return;
+		this.pending = null;
+		if (!result.ok) {
+			this.setState({ view: {
+				kind: "choices",
+				error: result.message
+			} });
+			return;
+		}
+		this.props.externalNear?.onConnected(result.value);
+	};
+	renderChoices() {
+		const { options, externalNear } = this.props;
+		const snapshot = externalNear?.controller.getSnapshot();
+		const busy = this.state.view.kind === "auth" || (snapshot?.busy ?? false);
+		const seamsOption = options?.seams;
+		const rows = [];
+		for (const wallet of snapshot?.wallets ?? []) {
+			const appearance = options?.[wallet];
+			const unavailable = wallet === "hot" && externalNear?.controller.network !== "mainnet";
+			rows.push(/* @__PURE__ */ jsx(ConnectorOption, {
+				label: appearance?.label ?? `Connect ${nearWalletName(wallet)}`,
+				description: unavailable ? "Mainnet only" : appearance?.description ?? "Use your existing wallet",
+				icon: appearance?.icon ?? /* @__PURE__ */ jsx(ExternalNearWalletIcon, { wallet }),
+				disabled: busy || unavailable,
+				external: true,
+				onClick: this.connect.bind(this, wallet)
+			}, wallet));
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			className: "seams-wallet-connector-choices",
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					ref: this.heading,
+					tabIndex: -1,
+					children: /* @__PURE__ */ jsx(WalletText, { copy: this.props.title ?? "Connect wallet" })
+				}),
+				/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { copy: this.props.description ?? "Choose how you’d like to get started." }) }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "seams-wallet-connector-options",
+					children: [/* @__PURE__ */ jsx(ConnectorOption, {
+						label: seamsOption?.label ?? "Create a Seams Wallet",
+						description: seamsOption?.description ?? "Get started with a passkey",
+						icon: seamsOption?.icon ?? /* @__PURE__ */ jsx(SeamsConnectorIcon, {}),
+						disabled: busy,
+						external: false,
+						onClick: this.openAuthMenu,
+						onPrepare: this.prepare
+					}), rows]
+				}),
+				snapshot?.busy && /* @__PURE__ */ jsx("p", {
+					role: "status",
+					children: /* @__PURE__ */ jsx(WalletText, { message: "Complete the request in your wallet." })
+				}),
+				this.state.view.kind === "choices" && this.state.view.error && /* @__PURE__ */ jsx("p", {
+					className: "seams-wallet-connector-error",
+					role: "alert",
+					children: this.state.view.error
+				})
+			]
+		});
+	}
+	render() {
+		let content;
+		switch (this.state.view.kind) {
+			case "choices":
+				content = this.renderChoices();
+				break;
+			case "auth":
+				content = /* @__PURE__ */ jsx(HostedSeamsAuthMenu, {
+					...this.props.authMenu,
+					initialMode: this.props.authMenu?.initialMode ?? "register",
+					initialHeightCssPx: this.state.view.initialHeightCssPx,
+					placeholder: this.renderChoices(),
+					onOutcome: this.handleOutcome
+				});
+				break;
+			default: return assertNever(this.state.view);
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			ref: this.root,
+			className: `seams-wallet-connector ${this.props.className ?? ""}`,
+			style: this.props.style,
+			"data-connector-view": this.state.view.kind,
+			children: [
+				this.state.view.kind === "auth" && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "seams-wallet-connector-back",
+					"aria-label": walletDisplayText(this.props.locale, this.props.backLabel ?? "Back to wallet selection"),
+					title: walletDisplayText(this.props.locale, this.props.backLabel ?? "Back to wallet selection"),
+					onClick: this.back,
+					children: /* @__PURE__ */ jsx(HoverArrowIcon, {
+						size: 16,
+						direction: "left"
+					})
+				}),
+				this.props.onClose && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "seams-wallet-connector-close",
+					"aria-label": walletDisplayText(this.props.locale, this.props.closeLabel ?? "Close"),
+					onClick: this.close,
+					children: /* @__PURE__ */ jsx(ConnectorCloseIcon, {})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: this.content,
+					className: "seams-wallet-connector-content",
+					children: content
+				})
+			]
+		});
+	}
+};
+function ConnectorOption(props) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "seams-wallet-connector-option",
+		disabled: props.disabled,
+		onClick: props.onClick,
+		onPointerEnter: props.onPrepare,
+		onFocus: props.onPrepare,
+		onTouchStart: props.onPrepare,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "seams-wallet-connector-icon",
+				"aria-hidden": "true",
+				children: props.icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "seams-wallet-connector-label",
+				children: [/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: props.label }) }), /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(WalletText, { copy: props.description }) })]
+			}),
+			/* @__PURE__ */ jsx(HoverArrowIcon, {
+				size: 16,
+				direction: props.external ? "up-right" : "right"
+			})
+		]
+	});
+}
+function ConnectorCloseIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "20",
+		height: "20",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "m6 6 12 12M6 18 18 6" })
+	});
+}
+function SeamsConnectorIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "36",
+		height: "36",
+		viewBox: "1130 0 300 282",
+		"aria-hidden": "true",
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("path", { d: SEAMS_STANDARD_WORDMARK_PATH })
+	});
+}
+function assertNever(value) {
+	throw new Error(`Unexpected wallet connector state: ${String(value)}`);
+}
+//#endregion
+export { WalletConnectorMenu };
+
+//# sourceMappingURL=WalletConnectorMenu.js.map

package/dist/esm/react/components/HostedSeamsAuthMenu/shell.js

@@ -78,6 +78,7 @@ function hostedAuthMenuEffectConfigKey(config) {
 		const normalized = buildHostedAuthMenuOpenRequest({
 			authMenuSessionId: configSessionId,
 			initialMode: config.initialMode,
+			initialHeightCssPx: config.initialHeightCssPx,
 			registrationAccountInput: config.registrationAccountInput,
 			showRegistrationInput: config.showRegistrationInput,
 			showProgress: config.showProgress,
@@ -86,6 +87,7 @@ function hostedAuthMenuEffectConfigKey(config) {
 		});
 		return JSON.stringify({
 			initialMode: normalized.initialMode,
+			initialHeightCssPx: normalized.initialHeightCssPx,
 			registrationAccountInput: normalized.registrationAccountInput,
 			showRegistrationInput: normalized.showRegistrationInput,
 			showProgress: normalized.showProgress,
@@ -101,6 +103,7 @@ var HostedAuthMenuSessionController = class {
 	anchorElement;
 	authMenuSessionId;
 	initialMode;
+	initialHeightCssPx;
 	registrationAccountInput;
 	showRegistrationInput;
 	showProgress;
@@ -119,6 +122,7 @@ var HostedAuthMenuSessionController = class {
 		this.anchorElement = args.anchorElement;
 		this.authMenuSessionId = args.authMenuSessionId;
 		this.initialMode = args.initialMode;
+		this.initialHeightCssPx = args.initialHeightCssPx;
 		this.registrationAccountInput = args.registrationAccountInput;
 		this.showRegistrationInput = args.showRegistrationInput;
 		this.showProgress = args.showProgress;
@@ -151,6 +155,7 @@ var HostedAuthMenuSessionController = class {
 			request = buildHostedAuthMenuOpenRequest({
 				authMenuSessionId: this.authMenuSessionId,
 				initialMode: this.initialMode,
+				initialHeightCssPx: this.initialHeightCssPx,
 				loginTarget: { kind: "discoverable" },
 				registrationAccountInput: this.registrationAccountInput,
 				showRegistrationInput: this.showRegistrationInput,
@@ -269,12 +274,13 @@ function forwardHostedAuthMenuOutcome(terminalGateRef, onOutcomeRef, outcome) {
 	if (isTerminalHostedAuthMenuSuccess(outcome) && terminalGateRef.current) terminalGateRef.current.completed = true;
 	onOutcomeRef.current(outcome);
 }
-const HostedSeamsAuthMenu = ({ initialMode = "login", registrationAccountInput = "implicit_wallet", showRegistrationInput = false, showProgress = false, copy, externalAuthBroker = null, onOutcome }) => {
+const HostedSeamsAuthMenu = ({ initialMode = "login", initialHeightCssPx, placeholder, registrationAccountInput = "implicit_wallet", showRegistrationInput = false, showProgress = false, copy, externalAuthBroker = null, onOutcome }) => {
 	const { seams, isLoggedIn } = useOptionalSeams();
 	const terminalGate = terminalGateFor(seams);
 	syncTerminalGate(terminalGate, isLoggedIn);
 	const effectConfigRef = React.useRef({
 		initialMode,
+		initialHeightCssPx,
 		registrationAccountInput,
 		showRegistrationInput,
 		showProgress,
@@ -288,6 +294,7 @@ const HostedSeamsAuthMenu = ({ initialMode = "login", registrationAccountInput =
 	const anchorRef = React.useRef(null);
 	effectConfigRef.current = {
 		initialMode,
+		initialHeightCssPx,
 		registrationAccountInput,
 		showRegistrationInput,
 		showProgress,
@@ -310,6 +317,7 @@ const HostedSeamsAuthMenu = ({ initialMode = "login", registrationAccountInput =
 			anchorElement,
 			authMenuSessionId: createHostedAuthMenuSessionId(),
 			initialMode: config.initialMode,
+			initialHeightCssPx: config.initialHeightCssPx,
 			registrationAccountInput: config.registrationAccountInput,
 			showRegistrationInput: config.showRegistrationInput,
 			showProgress: config.showProgress,
@@ -326,21 +334,28 @@ const HostedSeamsAuthMenu = ({ initialMode = "login", registrationAccountInput =
 	]);
 	return /* @__PURE__ */ jsx("span", {
 		ref: anchorRef,
+		"data-seams-root": "",
+		className: "seams-auth-menu-host",
 		"data-seams-auth-menu-host": "true",
 		"aria-hidden": "true",
 		style: {
 			display: "block",
 			width: "min(100%, 420px)",
-			minHeight: "var(--seams-auth-menu-height, 450px)",
-			position: "relative"
+			minHeight: `var(--seams-auth-menu-height, ${initialHeightCssPx ?? 450}px)`,
+			position: "relative",
+			boxSizing: "border-box",
+			margin: 0,
+			padding: 0,
+			border: 0
 		},
 		children: !terminalGate?.completed && /* @__PURE__ */ jsx("span", {
 			style: {
 				position: "absolute",
 				inset: "0 0 auto",
-				opacity: "var(--seams-auth-menu-placeholder-opacity, 1)"
+				opacity: "var(--seams-auth-menu-placeholder-opacity, 1)",
+				pointerEvents: "none"
 			},
-			children: /* @__PURE__ */ jsx(SeamsAuthMenuMock, { initialMode })
+			children: placeholder ?? /* @__PURE__ */ jsx(SeamsAuthMenuMock, { initialMode })
 		})
 	});
 };

package/dist/esm/react/components/QRCodeIcon.js

@@ -1,55 +1,49 @@
+import { lucideIconSvg } from "./AccountMenuButton/icons/lucideIcon.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/QRCodeIcon.tsx
 /**
 * QRCodeIcon — React wrapper for the lucide QR Code SVG.
 * Uses currentColor for stroke so it inherits color from context.
 */
-const QRCodeIcon = ({ className, width = 24, height = 24, strokeWidth = 2, style }) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
+const QRCodeIcon = ({ className, width = 24, height = 24, strokeWidth = 2, style }) => lucideIconSvg("qr-code", {
 	width,
 	height,
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
 	strokeWidth,
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	className: `lucide lucide-qr-code-icon lucide-qr-code${className ? ` ${className}` : ""}`,
-	style,
-	children: [
-		/* @__PURE__ */ jsx("rect", {
-			width: "5",
-			height: "5",
-			x: "3",
-			y: "3",
-			rx: "1"
-		}),
-		/* @__PURE__ */ jsx("rect", {
-			width: "5",
-			height: "5",
-			x: "16",
-			y: "3",
-			rx: "1"
-		}),
-		/* @__PURE__ */ jsx("rect", {
-			width: "5",
-			height: "5",
-			x: "3",
-			y: "16",
-			rx: "1"
-		}),
-		/* @__PURE__ */ jsx("path", { d: "M21 16h-3a2 2 0 0 0-2 2v3" }),
-		/* @__PURE__ */ jsx("path", { d: "M21 21v.01" }),
-		/* @__PURE__ */ jsx("path", { d: "M12 7v3a2 2 0 0 1-2 2H7" }),
-		/* @__PURE__ */ jsx("path", { d: "M3 12h.01" }),
-		/* @__PURE__ */ jsx("path", { d: "M12 3h.01" }),
-		/* @__PURE__ */ jsx("path", { d: "M12 16v.01" }),
-		/* @__PURE__ */ jsx("path", { d: "M16 12h1" }),
-		/* @__PURE__ */ jsx("path", { d: "M21 12v.01" }),
-		/* @__PURE__ */ jsx("path", { d: "M12 21v-1" })
-	]
-});
+	className,
+	style
+}, /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsx("rect", {
+		width: "5",
+		height: "5",
+		x: "3",
+		y: "3",
+		rx: "1"
+	}),
+	/* @__PURE__ */ jsx("rect", {
+		width: "5",
+		height: "5",
+		x: "16",
+		y: "3",
+		rx: "1"
+	}),
+	/* @__PURE__ */ jsx("rect", {
+		width: "5",
+		height: "5",
+		x: "3",
+		y: "16",
+		rx: "1"
+	}),
+	/* @__PURE__ */ jsx("path", { d: "M21 16h-3a2 2 0 0 0-2 2v3" }),
+	/* @__PURE__ */ jsx("path", { d: "M21 21v.01" }),
+	/* @__PURE__ */ jsx("path", { d: "M12 7v3a2 2 0 0 1-2 2H7" }),
+	/* @__PURE__ */ jsx("path", { d: "M3 12h.01" }),
+	/* @__PURE__ */ jsx("path", { d: "M12 3h.01" }),
+	/* @__PURE__ */ jsx("path", { d: "M12 16v.01" }),
+	/* @__PURE__ */ jsx("path", { d: "M16 12h1" }),
+	/* @__PURE__ */ jsx("path", { d: "M21 12v.01" }),
+	/* @__PURE__ */ jsx("path", { d: "M12 21v-1" })
+] }));
 //#endregion
 export { QRCodeIcon as default };