@draftlab/auth 0.0.2 → 0.0.4

package/dist/ui/base.js

@@ -1,4 +1,422 @@
-import "../theme-CswaLtbW.js";
-import { Layout } from "../base-DRutbxgL.js";
+import { getTheme } from "../themes/theme.js";
 
+//#region src/ui/base.ts
+const css = `@import url("https://unpkg.com/tailwindcss@3.4.15/src/css/preflight.css");
+
+:root {
+	--color-background-dark: #0e0e11;
+	--color-background-light: #ffffff;
+	--color-primary-dark: #6772e5;
+	--color-primary-light: #6772e5;
+
+	--color-background-success-dark: oklch(0.3 0.04 172);
+	--color-background-success-light: oklch(
+		from var(--color-background-success-dark) 0.83 c h
+	);
+	--color-success-dark: oklch(
+		from var(--color-background-success-dark) 0.92 c h
+	);
+	--color-success-light: oklch(
+		from var(--color-background-success-dark) 0.25 c h
+	);
+
+	--color-background-error-dark: oklch(0.32 0.07 15);
+	--color-background-error-light: oklch(
+		from var(--color-background-error-dark) 0.92 c h
+	);
+	--color-error-dark: oklch(from var(--color-background-error-dark) 0.92 c h);
+	--color-error-light: oklch(from var(--color-background-error-dark) 0.25 c h);
+
+	--border-radius: 0;
+
+	--color-background: var(--color-background-dark);
+	--color-primary: var(--color-primary-dark);
+
+	--color-background-success: var(--color-background-success-dark);
+	--color-success: var(--color-success-dark);
+	--color-background-error: var(--color-background-error-dark);
+	--color-error: var(--color-error-dark);
+
+	@media (prefers-color-scheme: light) {
+		--color-background: var(--color-background-light);
+		--color-primary: var(--color-primary-light);
+
+		--color-background-success: var(--color-background-success-light);
+		--color-success: var(--color-success-light);
+		--color-background-error: var(--color-background-error-light);
+		--color-error: var(--color-error-light);
+	}
+
+	--color-high: oklch(
+		from var(--color-background) clamp(0, calc((l - 0.714) * -1000), 1) 0 0
+	);
+	--color-low: oklch(
+		from var(--color-background) clamp(0, calc((l - 0.714) * 1000), 1) 0 0
+	);
+	--lightness-high: color-mix(
+		in oklch,
+		var(--color-high) 0%,
+		oklch(var(--color-high) 0 0)
+	);
+	--lightness-low: color-mix(
+		in oklch,
+		var(--color-low) 0%,
+		oklch(var(--color-low) 0 0)
+	);
+	--font-family:
+		ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+		"Segoe UI Symbol", "Noto Color Emoji";
+	--font-scale: 1;
+
+	--font-size-xs: calc(0.75rem * var(--font-scale));
+	--font-size-sm: calc(0.875rem * var(--font-scale));
+	--font-size-md: calc(1rem * var(--font-scale));
+	--font-size-lg: calc(1.125rem * var(--font-scale));
+	--font-size-xl: calc(1.25rem * var(--font-scale));
+	--font-size-2xl: calc(1.5rem * var(--font-scale));
+}
+
+[data-component="root"] {
+	font-family: var(--font-family);
+	background-color: var(--color-background);
+	padding: 1rem;
+	color: white;
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	user-select: none;
+	color: var(--color-high);
+}
+
+[data-component="center"] {
+	width: 380px;
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+
+[data-component="center"][data-size="small"] {
+	width: 300px;
+}
+
+[data-component="link"] {
+	text-decoration: underline;
+	text-underline-offset: 0.125rem;
+	font-weight: 600;
+}
+
+[data-component="label"] {
+	display: flex;
+	gap: 0.75rem;
+	flex-direction: column;
+	font-size: var(--font-size-xs);
+}
+
+[data-component="logo"] {
+	margin: 0 auto;
+	height: 2.5rem;
+	width: auto;
+	display: none;
+}
+
+@media (prefers-color-scheme: light) {
+	[data-component="logo"][data-mode="light"] {
+		display: block;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	[data-component="logo"][data-mode="dark"] {
+		display: block;
+	}
+}
+
+[data-component="logo-default"] {
+	margin: 0 auto;
+	height: 2.5rem;
+	width: auto;
+}
+
+@media (prefers-color-scheme: light) {
+	[data-component="logo-default"] {
+		color: var(--color-high);
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	[data-component="logo-default"] {
+		color: var(--color-high);
+	}
+}
+
+[data-component="input"] {
+	width: 100%;
+	height: 2.5rem;
+	padding: 0 1rem;
+	border: 1px solid transparent;
+	--background: oklch(
+		from var(--color-background)
+			calc(l + (-0.06 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.03)) c h
+	);
+	background: var(--background);
+	border-color: oklch(
+		from var(--color-background)
+			calc(
+				clamp(
+					0.22,
+					l +
+					(-0.12 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.06),
+					0.88
+				)
+			)
+			c h
+	);
+	border-radius: calc(var(--border-radius) * 0.25rem);
+	font-size: var(--font-size-sm);
+	outline: none;
+}
+
+[data-component="input"]:focus {
+	border-color: oklch(
+		from var(--color-background)
+			calc(
+				clamp(
+					0.3,
+					l +
+					(-0.2 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.1),
+					0.7
+				)
+			)
+			c h
+	);
+}
+
+[data-component="input"]:user-invalid:not(:focus) {
+	border-color: oklch(0.4 0.09 7.91);
+}
+
+[data-component="button"] {
+	height: 2.5rem;
+	cursor: pointer;
+	border: 0;
+	font-weight: 500;
+	font-size: var(--font-size-sm);
+	border-radius: calc(var(--border-radius) * 0.25rem);
+	display: flex;
+	gap: 0.75rem;
+	align-items: center;
+	justify-content: center;
+	background: var(--color-primary);
+	color: oklch(
+		from var(--color-primary) clamp(0, calc((l - 0.714) * -1000), 1) 0 0
+	);
+}
+
+[data-component="button"][data-color="ghost"] {
+	background: transparent;
+	color: var(--color-high);
+	border: 1px solid
+		oklch(
+			from var(--color-background)
+				calc(
+					clamp(
+						0.22,
+						l +
+						(-0.12 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.06),
+						0.88
+					)
+				)
+				c h
+		);
+}
+
+[data-component="button"] [data-slot="icon"] {
+	width: 16px;
+	height: 16px;
+}
+
+[data-component="button"] [data-slot="icon"] svg {
+	width: 100%;
+	height: 100%;
+}
+
+[data-component="form"] {
+	max-width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin: 0;
+}
+
+[data-component="form-alert"] {
+	height: 2.5rem;
+	display: flex;
+	align-items: center;
+	padding: 0 1rem;
+	border-radius: calc(var(--border-radius) * 0.25rem);
+	background: var(--color-background-error);
+	color: var(--color-error);
+	text-align: left;
+	font-size: 0.75rem;
+	gap: 0.5rem;
+}
+
+[data-component="form-alert"][data-color="success"] {
+	background: var(--color-background-success);
+	color: var(--color-success);
+}
+
+[data-component="form-alert"][data-color="success"] [data-slot="icon-success"] {
+	display: block;
+}
+[data-component="form-alert"][data-color="success"] [data-slot="icon-danger"] {
+	display: none;
+}
+
+[data-component="form-alert"]:has([data-slot="message"]:empty) {
+	display: none;
+}
+
+[data-component="form-alert"] [data-slot="icon-success"],
+[data-component="form-alert"] [data-slot="icon-danger"] {
+	width: 1rem;
+	height: 1rem;
+}
+[data-component="form-alert"] [data-slot="icon-success"] {
+	display: none;
+}
+
+[data-component="form-footer"] {
+	display: flex;
+	gap: 1rem;
+	font-size: 0.75rem;
+	align-items: center;
+	justify-content: center;
+}
+
+[data-component="form-footer"]:has(> :nth-child(2)) {
+	justify-content: space-between;
+}
+`;
+/**
+* Main layout component that wraps all authentication UI screens.
+* Handles theming, logo display, and provides consistent styling.
+*
+* @param props - Layout props including children and optional size
+* @returns Complete HTML document as a string with theming and branding applied
+*/
+const Layout = (props) => {
+	const theme = getTheme();
+	/**
+	* Gets a theme value for a specific key and color mode.
+	* Handles both string values and light/dark object configurations.
+	*/
+	const getThemeValue = (key, mode) => {
+		if (!theme?.[key]) return;
+		if (typeof theme[key] === "string") return theme[key];
+		return theme[key][mode];
+	};
+	/**
+	* Calculates border radius value based on theme configuration.
+	*/
+	const getBorderRadius = () => {
+		switch (theme?.radius) {
+			case "none": return "0";
+			case "sm": return "1";
+			case "md": return "1.25";
+			case "lg": return "1.5";
+			case "full": return "1000000000001";
+			default: return "1";
+		}
+	};
+	/**
+	* Checks if both light and dark logo variants are available.
+	*/
+	const hasCustomLogo = Boolean(getThemeValue("logo", "light") && getThemeValue("logo", "dark"));
+	/**
+	* CSS custom properties for theming.
+	*/
+	const themeStyles = [
+		`--color-background-light: ${getThemeValue("background", "light") || ""}`,
+		`--color-background-dark: ${getThemeValue("background", "dark") || ""}`,
+		`--color-primary-light: ${getThemeValue("primary", "light") || ""}`,
+		`--color-primary-dark: ${getThemeValue("primary", "dark") || ""}`,
+		`--font-family: ${theme?.font?.family || ""}`,
+		`--font-scale: ${theme?.font?.scale || ""}`,
+		`--border-radius: ${getBorderRadius()}`
+	].join("; ");
+	const faviconHtml = theme?.favicon ? `<link href="${theme.favicon}" rel="icon" />` : `
+			<link href="https://openauth.js.org/favicon.ico" rel="icon" sizes="48x48" />
+			<link href="https://openauth.js.org/favicon.svg" media="(prefers-color-scheme: light)" rel="icon" />
+			<link href="https://openauth.js.org/favicon-dark.svg" media="(prefers-color-scheme: dark)" rel="icon" />
+			<link href="https://openauth.js.org/favicon.svg" rel="shortcut icon" type="image/svg+xml" />
+		  `;
+	const logoHtml = hasCustomLogo ? `
+			<img
+				alt="Logo Light"
+				data-component="logo"
+				data-mode="light"
+				src="${getThemeValue("logo", "light") || ""}"
+			/>
+			<img
+				alt="Logo Dark"
+				data-component="logo"
+				data-mode="dark"
+				src="${getThemeValue("logo", "dark") || ""}"
+			/>
+		  ` : DefaultDraftAuthLogo();
+	const childrenHtml = props.children || "";
+	return `
+		<!DOCTYPE html>
+		<html lang="en" style="${themeStyles}">
+			<head>
+				<title>${theme?.title || "Draft Auth"}</title>
+				<meta charset="utf-8" />
+				<meta content="width=device-width, initial-scale=1" name="viewport" />
+
+				${faviconHtml}
+
+				<!-- Base CSS styles -->
+				<style>${css}</style>
+
+				<!-- Custom theme CSS if provided -->
+				${theme?.css ? `<style>${theme.css}</style>` : ""}
+			</head>
+			<body>
+				<div data-component="root">
+					<div data-component="center" data-size="${props.size || ""}">
+						${logoHtml}
+						${childrenHtml}
+					</div>
+				</div>
+			</body>
+		</html>
+	`;
+};
+/**
+* Default Draft Auth logo component.
+* Used when no custom logo is provided in the theme configuration.
+*/
+const DefaultDraftAuthLogo = () => `
+	<svg
+		aria-label="Draft Auth Logo"
+		data-component="logo-default"
+		fill="none"
+		height="51"
+		viewBox="0 0 51 51"
+		width="51"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<title>Draft Auth Logo</title>
+		<path
+			d="M0 50.2303V0.12854H50.1017V50.2303H0ZM3.08002 11.8326H11.7041V3.20856H3.08002V11.8326ZM14.8526 11.8326H23.4766V3.20856H14.8526V11.8326ZM26.5566 11.8326H35.1807V3.20856H26.5566V11.8326ZM38.3292 11.8326H47.0217V3.20856H38.3292V11.8326ZM3.08002 23.6052H11.7041V14.9811H3.08002V23.6052ZM14.8526 23.6052H23.4766V14.9811H14.8526V23.6052ZM26.5566 23.6052H35.1807V14.9811H26.5566V23.6052ZM38.3292 23.6052H47.0217V14.9811H38.3292V23.6052ZM3.08002 35.3092H11.7041V26.6852H3.08002V35.3092ZM14.8526 35.3092H23.4766V26.6852H14.8526V35.3092ZM26.5566 35.3092H35.1807V26.6852H26.5566V35.3092ZM38.3292 35.3092H47.0217V26.6852H38.3292V35.3092ZM3.08002 47.1502H11.7041V38.3893H3.08002V47.1502ZM14.8526 47.1502H23.4766V38.3893H14.8526V47.1502ZM26.5566 47.1502H35.1807V38.3893H26.5566V47.1502ZM38.3292 47.1502H47.0217V38.3893H38.3292V47.1502Z"
+			fill="currentColor"
+		/>
+	</svg>
+`;
+
+//#endregion
 export { Layout };

package/dist/ui/code.d.ts

@@ -1,6 +1,4 @@
-import "../storage-CxKerLlc.js";
-import "../provider-tndlqCzp.js";
-import { CodeProviderError, CodeProviderOptions } from "../code-DJxdFR7p.js";
+import { CodeProviderError, CodeProviderOptions } from "../provider/code.js";
 
 //#region src/ui/code.d.ts
 

package/dist/ui/code.js

@@ -1,7 +1,6 @@
-import { UnknownStateError } from "../error-DgAKK7b2.js";
-import "../theme-CswaLtbW.js";
-import { Layout } from "../base-DRutbxgL.js";
-import { FormAlert } from "../form-6XKM_cOk.js";
+import { UnknownStateError } from "../error.js";
+import { Layout } from "./base.js";
+import { FormAlert } from "./form.js";
 
 //#region src/ui/code.ts
 /**

package/dist/ui/form.js

@@ -1,3 +1,61 @@
-import { FormAlert } from "../form-6XKM_cOk.js";
+//#region src/ui/form.ts
+/**
+* Success icon component showing a checkmark in a circle.
+* Used for positive feedback messages.
+*/
+const SuccessIcon = () => `
+	<svg
+		aria-hidden="true"
+		data-slot="icon-success"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.5"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+`;
+/**
+* Danger icon component showing an exclamation mark in a circle.
+* Used for error and warning messages.
+*/
+const DangerIcon = () => `
+	<svg
+		aria-hidden="true"
+		data-slot="icon-danger"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.5"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+`;
+/**
+* Form alert component that displays error or success messages.
+* Returns an HTML string for the alert or empty string if no message.
+*/
+const FormAlert = (props) => {
+	if (!props.message) return "";
+	const alertColor = props.color ?? "danger";
+	return `
+		<div aria-live="polite" data-color="${alertColor}" data-component="form-alert" role="alert">
+			${SuccessIcon()}
+			${DangerIcon()}
+			<span data-slot="message">${props.message}</span>
+		</div>
+	`;
+};
 
+//#endregion
 export { FormAlert };

package/dist/ui/icon.js

@@ -1,3 +1,192 @@
-import { ICON_EMAIL, ICON_GITHUB, ICON_GOOGLE, ICON_SLACK } from "../icon-Ci5uqGB_.js";
+//#region src/ui/icon.ts
+/**
+* Icon components for Draft Auth UI.
+* Provides SVG icons for various authentication providers and common UI elements.
+*
+* ## Usage
+*
+* ```ts
+* import { ICON_GITHUB, ICON_GOOGLE, ICON_EMAIL } from "./icon"
+*
+* // In provider buttons
+* const buttonHtml = `
+*   <button>
+*     ${ICON_GITHUB}
+*     Continue with GitHub
+*   </button>
+* `
+*
+* // In form elements
+* const formHtml = `
+*   <div>
+*     ${ICON_EMAIL}
+*     Email verification
+*   </div>
+* `
+* ```
+*
+* ## Features
+*
+* - **Consistent sizing**: All icons are properly sized and scalable
+* - **Accessibility**: Proper ARIA labels and semantic markup
+* - **Current color**: Icons inherit text color for easy theming
+* - **Optimized SVGs**: Clean, minimal SVG markup for performance
+*
+* @packageDocumentation
+*/
+/**
+* GitHub brand icon with official logo design.
+* Used for GitHub authentication provider buttons and references.
+*
+* @example
+* ```ts
+* const buttonHtml = `
+*   <button data-component="provider-button">
+*     ${ICON_GITHUB}
+*     Sign in with GitHub
+*   </button>
+* `
+* ```
+*/
+const ICON_GITHUB = `
+	<svg
+		aria-label="GitHub"
+		fill="currentColor"
+		height="250"
+		preserveAspectRatio="xMidYMid"
+		role="img"
+		viewBox="0 0 256 250"
+		width="256"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" />
+	</svg>
+`;
+/**
+* Google brand icon with official multicolor logo design.
+* Used for Google authentication provider buttons and references.
+*
+* @example
+* ```ts
+* const buttonHtml = `
+*   <button data-component="provider-button">
+*     ${ICON_GOOGLE}
+*     Continue with Google
+*   </button>
+* `
+* ```
+*/
+const ICON_GOOGLE = `
+	<svg
+		aria-label="Google"
+		height="262"
+		preserveAspectRatio="xMidYMid"
+		role="img"
+		viewBox="0 0 256 262"
+		width="256"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+			fill="#4285F4"
+		/>
+		<path
+			d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+			fill="#34A853"
+		/>
+		<path
+			d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
+			fill="#FBBC05"
+		/>
+		<path
+			d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+			fill="#EB4335"
+		/>
+	</svg>
+`;
+/**
+* Email envelope icon for email-related authentication flows.
+* Used in email verification, password reset, and contact forms.
+*
+* @example
+* ```ts
+* const inputGroupHtml = `
+*   <div data-component="input-group">
+*     ${ICON_EMAIL}
+*     <input type="email" placeholder="Enter your email" />
+*   </div>
+* `
+* ```
+*/
+const ICON_EMAIL = `
+	<svg
+		aria-label="Email"
+		fill="none"
+		role="img"
+		stroke="currentColor"
+		stroke-width="1.5"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+`;
+/**
+* Slack brand icon with official logo design.
+* Used for Slack authentication provider buttons and workplace integrations.
+*
+* @example
+* ```ts
+* const buttonHtml = `
+*   <button data-component="provider-button">
+*     ${ICON_SLACK}
+*     Continue with Slack
+*   </button>
+* `
+* ```
+*/
+const ICON_SLACK = `
+	<svg
+		aria-label="Slack"
+		fill="none"
+		height="24"
+		role="img"
+		viewBox="0 0 24 24"
+		width="24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<g>
+			<path
+				clip-rule="evenodd"
+				d="M8.79948 0C7.47279 0.000978593 6.39909 1.07547 6.40007 2.39951C6.39909 3.72355 7.47377 4.79804 8.80046 4.79902H11.2009V2.40049C11.2018 1.07645 10.1271 0.00195719 8.79948 0ZM8.79948 6.4H2.40039C1.07371 6.40098 -0.000977873 7.47547 2.67973e-06 8.79951C-0.00195842 10.1235 1.07273 11.198 2.39941 11.2H8.79948C10.1262 11.199 11.2009 10.1245 11.1999 8.80049C11.2009 7.47547 10.1262 6.40098 8.79948 6.4Z"
+				fill="currentColor"
+				fill-rule="evenodd"
+			/>
+			<path
+				clip-rule="evenodd"
+				d="M24.0007 8.79951C24.0016 7.47547 22.9269 6.40098 21.6003 6.4C20.2736 6.40098 19.1989 7.47547 19.1999 8.79951V11.2H21.6003C22.9269 11.199 24.0016 10.1245 24.0007 8.79951ZM17.6006 8.79951V2.39951C17.6016 1.07645 16.5279 0.00195719 15.2012 0C13.8745 0.000978593 12.7998 1.07547 12.8008 2.39951V8.79951C12.7988 10.1235 13.8735 11.198 15.2002 11.2C16.5269 11.199 17.6016 10.1245 17.6006 8.79951Z"
+				fill="currentColor"
+				fill-rule="evenodd"
+			/>
+			<path
+				clip-rule="evenodd"
+				d="M15.1992 23.9998C16.5259 23.9988 17.6006 22.9243 17.5996 21.6003C17.6006 20.2763 16.5259 19.2018 15.1992 19.2008H12.7988V21.6003C12.7978 22.9234 13.8725 23.9978 15.1992 23.9998ZM15.1992 17.5988H21.5993C22.926 17.5978 24.0007 16.5234 23.9997 15.1993C24.0016 13.8753 22.927 12.8008 21.6003 12.7988H15.2002C13.8735 12.7998 12.7988 13.8743 12.7998 15.1983C12.7988 16.5234 13.8725 17.5978 15.1992 17.5988Z"
+				fill="currentColor"
+				fill-rule="evenodd"
+			/>
+			<path
+				clip-rule="evenodd"
+				d="M0 15.1993C-0.000979882 16.5234 1.07371 17.5978 2.40039 17.5988C3.72708 17.5978 4.80177 16.5234 4.80079 15.1993V12.7998H2.40039C1.07371 12.8008 -0.000979882 13.8753 0 15.1993ZM6.40007 15.1993V21.5993C6.3981 22.9234 7.47279 23.9978 8.79948 23.9998C10.1262 23.9988 11.2009 22.9243 11.1999 21.6003V15.2013C11.2018 13.8772 10.1271 12.8027 8.80046 12.8008C7.47279 12.8008 6.39909 13.8753 6.40007 15.1993Z"
+				fill="currentColor"
+				fill-rule="evenodd"
+			/>
+		</g>
+	</svg>
+`;
 
+//#endregion
 export { ICON_EMAIL, ICON_GITHUB, ICON_GOOGLE, ICON_SLACK };