PageSourceSearch

https://sv-particles.vercel.app/particles/button

html sv-particles.vercel.app collected 2026-10-03 07:49:27 UTC 202,921 bytes, 64 lines download raw bytes

1<!doctype html>
2<html lang="en">
3	<head>
4		<meta charset="utf-8" />
5		<meta name="viewport" content="width=device-width, initial-scale=1" />
6		<meta name="text-scale" content="scale" />
7		<!--12qhfyh--><link rel="icon" href="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='107'%20height='128'%20viewBox='0%200%20107%20128'%3e%3ctitle%3esvelte-logo%3c/title%3e%3cpath%20d='M94.157%2022.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282%2029.608A29.92%2029.92%200%200%200%208.764%2049.65a31.5%2031.5%200%200%200%203.108%2020.231%2030%2030%200%200%200-4.477%2011.183%2031.9%2031.9%200%200%200%205.448%2024.116c10.402%2014.887%2030.942%2019.297%2045.791%209.835l26.083-16.624A29.92%2029.92%200%200%200%2098.235%2078.35a31.53%2031.53%200%200%200-3.105-20.232%2030%2030%200%200%200%204.474-11.182%2031.88%2031.88%200%200%200-5.447-24.116'%20style='fill:%23ff3e00'/%3e%3cpath%20d='M45.817%20106.582a20.72%2020.72%200%200%201-22.237-8.243%2019.17%2019.17%200%200%201-3.277-14.503%2018%2018%200%200%201%20.624-2.435l.49-1.498%201.337.981a33.6%2033.6%200%200%200%2010.203%205.098l.97.294-.09.968a5.85%205.85%200%200%200%201.052%203.878%206.24%206.24%200%200%200%206.695%202.485%205.8%205.8%200%200%200%201.603-.704L69.27%2076.28a5.43%205.43%200%200%200%202.45-3.631%205.8%205.8%200%200%200-.987-4.371%206.24%206.24%200%200%200-6.698-2.487%205.7%205.7%200%200%200-1.6.704l-9.953%206.345a19%2019%200%200%201-5.296%202.326%2020.72%2020.72%200%200%201-22.237-8.243%2019.17%2019.17%200%200%201-3.277-14.502%2017.99%2017.99%200%200%201%208.13-12.052l26.081-16.623a19%2019%200%200%201%205.3-2.329%2020.72%2020.72%200%200%201%2022.237%208.243%2019.17%2019.17%200%200%201%203.277%2014.503%2018%2018%200%200%201-.624%202.435l-.49%201.498-1.337-.98a33.6%2033.6%200%200%200-10.203-5.1l-.97-.294.09-.968a5.86%205.86%200%200%200-1.052-3.878%206.24%206.24%200%200%200-6.696-2.485%205.8%205.8%200%200%200-1.602.704L37.73%2051.72a5.42%205.42%200%200%200-2.449%203.63%205.79%205.79%200%200%200%20.986%204.372%206.24%206.24%200%200%200%206.698%202.486%205.8%205.8%200%200%200%201.602-.704l9.952-6.342a19%2019%200%200%201%205.295-2.328%2020.72%2020.72%200%200%201%2022.237%208.242%2019.17%2019.17%200%200%201%203.277%2014.503%2018%2018%200%200%201-8.13%2012.053l-26.081%2016.622a19%2019%200%200%201-5.3%202.328'%20style='fill:%23fff'/%3e%3c/svg%3e"/><!----><!--eamsrq--><!--[-1--><!--]--> <!---->
7<script>(function setInitialMode({ defaultMode = "system", themeColors, darkClassNames = ["dark"], lightClassNames = [], defaultTheme = "", modeStorageKey = "mode-watcher-mode", themeStorageKey = "mode-watcher-theme" }) {
8	const rootEl = document.documentElement;
9	const mode = localStorage.getItem(modeStorageKey) ?? defaultMode;
10	const theme = localStorage.getItem(themeStorageKey) ?? defaultTheme;
11	const light = mode === "light" || mode === "system" && window.matchMedia("(prefers-color-scheme: light)").matches;
12	if (light) {
13		if (darkClassNames.length) rootEl.classList.remove(...darkClassNames.filter(Boolean));
14		if (lightClassNames.length) rootEl.classList.add(...lightClassNames.filter(Boolean));
15	} else {
16		if (lightClassNames.length) rootEl.classList.remove(...lightClassNames.filter(Boolean));
17		if (darkClassNames.length) rootEl.classList.add(...darkClassNames.filter(Boolean));
18	}
19	rootEl.style.colorScheme = light ? "light" : "dark";
20	if (themeColors) {
21		const themeMetaEl = document.querySelector("meta[name=\"theme-color\"]");
22		if (themeMetaEl) themeMetaEl.setAttribute("content", mode === "light" ? themeColors.light : themeColors.dark);
23	}
24	if (theme) {
25		rootEl.setAttribute("data-theme", theme);
26		localStorage.setItem(themeStorageKey, theme);
27	}
28	localStorage.setItem(modeStorageKey, mode);
29})({"defaultMode":"system","darkClassNames":["dark"],"lightClassNames":[],"defaultTheme":"","modeStorageKey":"mode-watcher-mode","themeStorageKey":"mode-watcher-theme"});</script>
29<!----><!----><!--1giyq4o--><!--[0--><!--]--> <!--[0--><meta name="robots" content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1"/><!--]--> <!--[0--><meta name="description" content="Reusable shadcn-svelte button blocks and Svelte components for primary actions, icons, toggles, and utility controls."/><!--]--> <!--[0--><link rel="canonical" href="https://sv-particles.vercel.app/particles/button"/><!--]--> <!--[0--><meta name="keywords" content="svelte shadcn blocks, svelte shadcn components, shadcn-svelte blocks, svelte 5 components, tailwind css components, shared ui patterns, typescript, svelte button blocks, button variants, icon button, action button"/><!--]--> <!--[-1--><!--]--> <!--[--><!--]--> <!--[0--><!--[0--><meta name="twitter:card" content="summary"/><!--]--> <!--[0--><meta name="twitter:site" content="@Sikandar_Bhide"/><!--]--> <!--[0--><meta name="twitter:title" content="Button Blocks"/><!--]--> <!--[0--><meta name="twitter:description" content="Reusable shadcn-svelte button blocks and Svelte components for primary actions, icons, toggles, and utility controls."/><!--]--> <!--[0--><meta name="twitter:creator" content="@Sikandar_Bhide"/><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--> <!--[-1--><!--]--><!--]--> <!--[-1--><!--]--> <!--[0--><!--[0--><meta property="og:url" content="https://sv-particles.vercel.app/particles/button"/><!--]--> <!--[0--><meta property="og:type" content="website"/> <!--[-1--><!--]--><!--]--> <!--[0--><meta property="og:title" content="Button Blocks"/><!--]--> <!--[0--><meta property="og:description" content="Reusable shadcn-svelte button blocks and Svelte components for primary actions, icons, toggles, and utility controls."/><!--]--> <!--[-1--><!--]--> <!--[--><!--]--> <!--[--><!--]--> <!--[0--><meta property="og:locale" content="en_US"/><!--]--> <!--[0--><meta property="og:site_name" content="Svelte QBlocks"/><!--]--><!--]--> <!--[--><!--]--> <!--[--><!--]--><!----><!--1a58k1i--><!--[0--><!---->
29<script type="application/ld+json">[{"@context":"https://schema.org","@type":"CollectionPage","name":"Button Blocks","description":"Reusable shadcn-svelte button blocks and Svelte components for primary actions, icons, toggles, and utility controls.","url":"https://sv-particles.vercel.app/particles/button","inLanguage":"en","isPartOf":{"@type":"CollectionPage","name":"Svelte Shadcn Blocks","url":"https://sv-particles.vercel.app/particles"},"about":{"@type":"SoftwareSourceCode","name":"Svelte QBlocks","codeRepository":"https://github.com/SikandarJODD/sv-particles","programmingLanguage":["Svelte","TypeScript"],"creator":{"@type":"Person","name":"Sikandar Bhide","url":"https://x.com/Sikandar_Bhide","sameAs":["https://x.com/Sikandar_Bhide","https://github.com/SikandarJODD/sv-particles"]}},"author":{"@type":"Person","name":"Sikandar Bhide","url":"https://x.com/Sikandar_Bhide","sameAs":["https://x.com/Sikandar_Bhide","https://github.com/SikandarJODD/sv-particles"]},"publisher":{"@type":"Organization","name":"Svelte QBlocks","url":"https://sv-particles.vercel.app","sameAs":["https://github.com/SikandarJODD/sv-particles","https://x.com/Sikandar_Bhide"]},"keywords":"svelte shadcn blocks, svelte shadcn components, shadcn-svelte blocks, svelte 5 components, tailwind css components, shared ui patterns, typescript, svelte button blocks, button variants, icon button, action button"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://sv-particles.vercel.app"},{"@type":"ListItem","position":2,"name":"Blocks","item":"https://sv-particles.vercel.app/particles"},{"@type":"ListItem","position":3,"name":"Button","item":"https://sv-particles.vercel.app/particles/button"}]}]</script>
29<!----><!--]--><!----><title>Button Blocks | Svelte QBlocks</title>
30		<link href="../_app/immutable/assets/0.CZVZfQ3F.css" rel="stylesheet">
31		<link href="../_app/immutable/assets/2.NFUAie97.css" rel="stylesheet">
32		<link href="../_app/immutable/assets/code.AY1P5tx-.css" rel="stylesheet">
33		<link href="../_app/immutable/assets/Preview.D55MUjUD.css" rel="stylesheet">
34
35		<!-- Analytics -->
36		
36<script defer src="https://assets.onedollarstats.com/stonks.js"></script>
36
37	</head>
38	<body data-sveltekit-preload-data="hover">
39		<div style="display: contents"><!--[--><!--[0--><!--[--><!--[-1--><!--]--><!----> <!--[0--><div class="sticky top-0 z-40 border-b bg-background/95 backdrop-blur md:hidden"><div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4"><a href="/" class="text-sm font-medium tracking-tight">Svelte QBlocks</a> <div class="flex items-center gap-2"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md shadow-none" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-sun scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90"><!--[--><!----><circle cx="12" cy="12" r="4"><!----></circle><!----><!----><path d="M12 2v2"><!----></path><!----><!----><path d="M12 20v2"><!----></path><!----><!----><path d="m4.93 4.93 1.41 1.41"><!----></path><!----><!----><path d="m17.66 17.66 1.41 1.41"><!----></path><!----><!----><path d="M2 12h2"><!----></path><!----><!----><path d="M20 12h2"><!----></path><!----><!----><path d="m6.34 17.66-1.41 1.41"><!----></path><!----><!----><path d="m19.07 4.93-1.41 1.41"><!----></path><!----><!--]--><!----><!----></svg><!----> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-moon absolute scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0"><!--[--><!----><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"><!----></path><!----><!--]--><!----><!----></svg><!----> <span class="sr-only">Toggle theme</span><!----></button><!--]--><!----> <!--[--><!--[--><!--[--><!--[--><!--$s1--><!--[0--><!--[-1--><button data-slot="dropdown-menu-trigger" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md" type="button" aria-expanded="false" aria-label="Open menu" id="bits-s1" aria-haspopup="menu" data-state="closed" data-dropdown-menu-trigger=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-menu h-4 w-4"><!--[--><!----><path d="M4 5h16"><!----></path><!----><!----><path d="M4 12h16"><!----></path><!----><!----><path d="M4 19h16"><!----></path><!----><!--]--><!----><!----></svg><!----></button><!--]--><!----><!--]--><!----><!--]--><!--]--> <!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!----><!----><!--]--><!--]--></div></div></div><!----> <div class="sticky top-0 z-50 hidden h-14 w-full border-b bg-background/70 backdrop-blur-md md:flex"><nav class="z-50 mx-auto flex h-full w-full max-w-5xl items-center justify-between"><div><a href="/" class="font-mono text-sm text-transparent bg-clip-text bg-linear-to-tr font-medium from-teal-600 dar
39k:from-white to-teal-500">Svelte QBlocks</a></div> <div class="flex items-center gap-1.5"><!--[--><!--[0--><a data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding text-sm focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 font-light rounded-full px-4" href="/"><!---->Home<!----></a><!--]--><!--[0--><a data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding text-sm focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 font-light rounded-full px-4" href="/particles/accordion"><!---->Components<!----></a><!--]--><!--[0--><a data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding text-sm focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 font-light rounded-full px-4" href="/demo"><!---->Demo<!----></a><!--]--><!--]--></div> <div class="flex items-center gap-1"><!--[0--><a data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground size-9" href="https://github.com/SikandarJODD/sv-particles" target="_blank"><svg viewBox="0 0 1024 1024" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 
3910.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="currentColor"></path></svg><!----></a><!--]--><!----> <!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md shadow-none" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-sun scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90"><!--[--><!----><circle cx="12" cy="12" r="4"><!----></circle><!----><!----><path d="M12 2v2"><!----></path><!----><!----><path d="M12 20v2"><!----></path><!----><!----><path d="m4.93 4.93 1.41 1.41"><!----></path><!----><!----><path d="m17.66 17.66 1.41 1.41"><!----></path><!----><!----><path d="M2 12h2"><!----></path><!----><!----><path d="M20 12h2"><!----></path><!----><!----><path d="m6.34 17.66-1.41 1.41"><!----></path><!----><!----><path d="m19.07 4.93-1.41 1.41"><!----></path><!----><!--]--><!----><!----></svg><!----> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-moon absolute scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0"><!--[--><!----><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"><!----></path><!----><!--]--><!----><!----></svg><!----> <span class="sr-only">Toggle theme</span><!----></button><!--]--><!----></div></nav></div><!----><!--]--> <!--[0--><!--[--><!----> <!--[0--><!--[-1--><!--]--><!--]--><!----> <!--[--><!--[--><!--[--><div data-slot="sidebar-wrapper" style="--sidebar-width: 15rem; --sidebar-width-icon: 3rem; " class="group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex w-full"><!--[--><!--[-1--><div class="group peer hidden text-sidebar-foreground md:block" data-state="expanded" data-collapsible="" data-variant="sidebar" data-side="left" data-slot="sidebar"><div data-slot="sidebar-gap" class="relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180 group-data-[collapsible=icon]:w-(--sidebar-width-icon)"></div> <div data-slot="sidebar-container" class="fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s mt-14"><div data-sidebar="sidebar" data-slot="sidebar-inner" class="flex size-full flex-col bg-background group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"><!--[-->
39<div data-slot="sidebar-content" data-sidebar="content" class="no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden"><!--[--><!--[--><div data-slot="sidebar-group" data-sidebar="group" class="p-2 relative flex w-full min-w-0 flex-col"><!--[--><!--[-1--><div class="text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&amp;>svg]:size-4 flex shrink-0 items-center outline-hidden [&amp;>svg]:shrink-0" data-slot="sidebar-group-label" data-sidebar="group-label"><!---->Components<!----></div><!--]--><!--]--> <!--[--><div data-slot="sidebar-group-content" data-sidebar="group-content" class="text-sm w-full"><!--[--><ul data-slot="sidebar-menu" data-sidebar="menu" class="gap-1 flex w-full min-w-0 flex-col"><!--[--><!--[--><li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative"><!--[--><!--[0--><!--[0--><a href="/particles/accordion" class="ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground rounded-md p-2 text-left transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 [&amp;>span:last-child]:truncate hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm flex w-full items-center justify-between gap-2" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active="false"><span class="min-w-0 truncate">Accordion</span> <span class="flex items-center gap-1.5"><!--[-1--><!--]--> <span class="flex size-6 items-center justify-center rounded-full font-mono text-[10px] leading-none bg-secondary text-secondary-foreground">4</span></span></a><!----><!--]--><!--]--><!--]--><!----></li><!--]--><!--[--><li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative"><!--[--><!--[0--><!--[0--><a href="/particles/alert-dialog" class="ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground rounded-md p-2 text-left transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 [&amp;>span:last-child]:truncate hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm flex w-full items-center justify-between gap-2" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active="false"><span class="min-w-0 truncate">Alert Dialog</span> <span class="flex items-center gap-1.5"><!--[-1--><!--]--> <span class="flex size-6 items-center justify-center rounded-full font-mono text-[10px] leading-none bg-secondary text-secondary-foreground">2</span></span></a><!----><!--]--><!--]--><!--]--><!----></li><!--]--><!--[--><li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative"><!--[--><!--[0--><!--[0--><a href="/particles/avatars" class="ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground rounded-md p-2 text-left transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focu
39s-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 [&amp;>span:last-child]:truncate hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm flex w-full items-center justify-between gap-2" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active="false"><span class="min-w-0 truncate">Avatars</span> <span class="flex items-center gap-1.5"><!--[-1--><!--]--> <span class="flex size-6 items-center justify-center rounded-full font-mono text-[10px] leading-none bg-secondary text-secondary-foreground">14</span></span></a><!----><!--]--><!--]--><!--]--><!----></li><!--]--><!--[--><li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative"><!--[--><!--[0--><!--[0--><a href="/particles/banner" class="ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground rounded-md p-2 text-left transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 [&amp;>span:last-child]:truncate hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm flex w-full items-center justify-between gap-2" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active="false"><span class="min-w-0 truncate">Banner</span> <span class="flex items-center gap-1.5"><!--[0--><!----><span data-slot="badge" class="inline-flex items-center justify-center font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400 py-1 rounded-full px-2 text-[10px]"><!---->New<!----><!----></span><!----><!--]--> <span class="flex size-6 items-center justify-center rounded-full font-mono text-[10px] leading-none bg-secondary text-secondary-foreground">12</span></span></a><!----><!--]--><!--]--><!--]--><!----></li><!--]--><!--[--><li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative"><!--[--><!--[0--><!--[0--><a href="/particles/button" class="ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground rounded-md p-2 text-left transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 [&amp;>span:last-child]:truncate hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm flex w-full items-center justify-between gap-2" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active="true"><span class="min-w-0 truncate">Button</span> <span class="flex items-center gap-1.5"><!--[-1--><!--]--> <span class="flex size-6 items-center justify-center rounded-full font-mono text-[10px] leading-none bg-card/50">32</span></span></a><!----><!--]--><!--]--><!--]--><!----></li><!--]--><!--[--><li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative"><!--[--><!--[0--><!--[0--><a href="/particles/input" class="ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground rounded-md p-2 text-left transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focu
39s-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 [&amp;>span:last-child]:truncate hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm flex w-full items-center justify-between gap-2" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active="false"><span class="min-w-0 truncate">Input</span> <span class="flex items-center gap-1.5"><!--[-1--><!--]--> <span class="flex size-6 items-center justify-center rounded-full font-mono text-[10px] leading-none bg-secondary text-secondary-foreground">12</span></span></a><!----><!--]--><!--]--><!--]--><!----></li><!--]--><!--[--><li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative"><!--[--><!--[0--><!--[0--><a href="/particles/input-group" class="ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground rounded-md p-2 text-left transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 [&amp;>span:last-child]:truncate hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm flex w-full items-center justify-between gap-2" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active="false"><span class="min-w-0 truncate">Input Group</span> <span class="flex items-center gap-1.5"><!--[-1--><!--]--> <span class="flex size-6 items-center justify-center rounded-full font-mono text-[10px] leading-none bg-secondary text-secondary-foreground">30</span></span></a><!----><!--]--><!--]--><!--]--><!----></li><!--]--><!--[--><li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative"><!--[--><!--[0--><!--[0--><a href="/particles/input-otp" class="ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground rounded-md p-2 text-left transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 [&amp;>span:last-child]:truncate hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm flex w-full items-center justify-between gap-2" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active="false"><span class="min-w-0 truncate">Input OTP</span> <span class="flex items-center gap-1.5"><!--[-1--><!--]--> <span class="flex size-6 items-center justify-center rounded-full font-mono text-[10px] leading-none bg-secondary text-secondary-foreground">6</span></span></a><!----><!--]--><!--]--><!--]--><!----></li><!--]--><!--[--><li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative"><!--[--><!--[0--><!--[0--><a href="/particles/menu" class="ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground rounded-md p-2 text-left transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focu
39s-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 [&amp;>span:last-child]:truncate hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm flex w-full items-center justify-between gap-2" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active="false"><span class="min-w-0 truncate">Menu</span> <span class="flex items-center gap-1.5"><!--[-1--><!--]--> <span class="flex size-6 items-center justify-center rounded-full font-mono text-[10px] leading-none bg-secondary text-secondary-foreground">7</span></span></a><!----><!--]--><!--]--><!--]--><!----></li><!--]--><!--[--><li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative"><!--[--><!--[0--><!--[0--><a href="/particles/table" class="ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground rounded-md p-2 text-left transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 [&amp;>span:last-child]:truncate hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm flex w-full items-center justify-between gap-2" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active="false"><span class="min-w-0 truncate">Table</span> <span class="flex items-center gap-1.5"><!--[0--><!----><span data-slot="badge" class="inline-flex items-center justify-center font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400 py-1 rounded-full px-2 text-[10px]"><!---->New<!----><!----></span><!----><!--]--> <span class="flex size-6 items-center justify-center rounded-full font-mono text-[10px] leading-none bg-secondary text-secondary-foreground">10</span></span></a><!----><!--]--><!--]--><!--]--><!----></li><!--]--><!--[--><li data-slot="sidebar-menu-item" data-sidebar="menu-item" class="group/menu-item relative"><!--[--><!--[0--><!--[0--><a href="/particles/data-table" class="ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground rounded-md p-2 text-left transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 [&amp;>span:last-child]:truncate hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm flex w-full items-center justify-between gap-2" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active="false"><span class="min-w-0 truncate">Data Table</span> <span class="flex items-center gap-1.5"><!--[2--><!----><span data-slot="badge" class="inline-flex items-center justify-center font-medium bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400 py-1 rounded-full px-2 text-[10px]"><!---->Beta<!----><!----></span><!----><!--]--> <span class="flex size-6 items-center justify-center rounded-full font-mono text-[10px] leading-none bg-secondary text-secondary-foreground">10</span></span></a><!----><!--]--><!--]--><!--]--><!----></li>
39<!--]--><!--]--><!----></ul><!--]--><!----></div><!--]--><!----></div><!--]--><!--]--><!----></div><!--]--> <!--[--><button data-sidebar="rail" data-slot="sidebar-rail" aria-label="Toggle Sidebar" tabindex="-1" title="Toggle Sidebar" class="hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize [[data-side=left][data-state=collapsed]_&amp;]:cursor-e-resize [[data-side=right][data-state=collapsed]_&amp;]:cursor-w-resize hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full [[data-side=left][data-collapsible=offcanvas]_&amp;]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&amp;]:-left-2"><!----></button><!--]--><!----></div></div></div><!--]--><!--]--><!----> <!--[--><main data-slot="sidebar-inset" class="bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col particles-transition-shell px-6 py-4 md:px-15 md:py-6"><div class="max-w-7xl"><!--[--><section class="space-y-2"><h1 class="text-3xl font-semibold tracking-tight">Button Blocks</h1> <p class="max-w-3xl text-sm text-muted-foreground md:text-base">This collection covers action-first button blocks ranging from simple variants to utility controls, feedback states, and small interaction-rich components.</p></section> <div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2"><!--[--><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!---->Button<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Default Button<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s2--><!--[-1--><button data-slot="drawer-trigger" id="bits-s2" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="default-button-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!---->Button<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Outline Button<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s3--><!--[-1--><button data-slot="drawer-trigger" id="bits-s3" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="outline-button-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!---->Button<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Secondary Button<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s4--><!--[-1--><button data-slot="drawer-trigger" id="bits-s4" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="secondary-button-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!---->Button<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Destructive Button<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s5-->
39<!--[-1--><button data-slot="drawer-trigger" id="bits-s5" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="destructive-button-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!---->Button<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Ghost Button<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s6--><!--[-1--><button data-slot="drawer-trigger" id="bits-s6" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="ghost-button-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[0--><a data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 text-primary underline-offset-4 hover:underline h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" href="/"><!---->Link<!----></a><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Link<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s7--><!--[-1--><button data-slot="drawer-trigger" id="bits-s7" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="link-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3" type="button"><!---->Button<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Extra Small<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s8--><!--[-1--><button data-slot="drawer-trigger" id="bits-s8" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="extra-small-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5" type="button"><!---->Button<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Small<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s9--><!--[-1--><button data-slot="drawer-trigger" id="bits-s9" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="small-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5" type="button"><!---->Button<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Large<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s10--><!--[-1--><button data-slot="drawer-trigger" id="bits-s10" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="large-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button" disabled=""><!---->Button<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Disabled Button<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s11--><!--[-1--><button data-slot="drawer-trigger" id="bits-s11" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="disabled-button-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 size-9" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-plus"><!--[--><!----><path d="M5 12h14"><!----></path><!----><!----><path d="M12 5v14"><!----></path><!----><!--]--><!----><!----></svg><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Icon<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s12--><!--[-1--><button data-slot="drawer-trigger" id="bits-s12" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="icon-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-plus"><!--[--><!----><path d="M5 12h14"><!----></path><!----><!----><path d="M12 5v14"><!----></path><!----><!--]--><!----><!----></svg><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Small Icon<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s13--><!--[-1--><button data-slot="drawer-trigger" id="bits-s13" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="small-icon-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 size-10" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-plus"><!--[--><!----><path d="M5 12h14"><!----></path><!----><!----><path d="M12 5v14"><!----></path><!----><!--]--><!----><!----></svg><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Large Icon<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s14--><!--[-1--><button data-slot="drawer-trigger" id="bits-s14" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="large-icon-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-download"><!--[--><!----><path d="M12 15V3"><!----></path><!----><!----><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"><!----></path><!----><!----><path d="m7 10 5 5 5-5"><!----></path><!----><!--]--><!----><!----></svg><!----> Download<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Button With Icon<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s15--><!--[-1-->
39<button data-slot="drawer-trigger" id="bits-s15" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="button-with-icon-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!---->Button<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Link Button<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s16--><!--[-1--><button data-slot="drawer-trigger" id="bits-s16" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="link-button-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!--[-1-->Show more<!--]--> <!--[-1--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-chevron-down -me-1"><!--[--><!----><path d="m6 9 6 6 6-6"><!----></path><!----><!--]--><!----><!----></svg><!--]--><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Show More Less Toggle<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s17--><!--[-1--><button data-slot="drawer-trigger" id="bits-s17" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="show-more-less-toggle-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 text-primary underline-offset-4 hover:underline h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-chevron-left"><!--[--><!----><path d="m15 18-6-6 6-6"><!----></path><!----><!--]--><!----><!----></svg><!----> Go back<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Back Link Chevron<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s18--><!--[-1--><button data-slot="drawer-trigger" id="bits-s18" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="back-link-chevron-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-9 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 h-auto! gap-4 px-4 py-3 text-left" type="button"><div class="flex flex-col gap-0.5"><h3>Talent Agency</h3> <p class="font-normal whitespace-break-spaces text-muted-foreground">Matches for your roster</p></div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-chevron-right transition-transform in-[[data-slot=button]:hover]:translate-x-0.5"><!--[--><!----><path d="m9 18 6-6-6-6"><!----></path><!----><!--]--><!----><!----></svg><!----><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Card Style Button<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s19--><!--[-1--><button data-slot="drawer-trigger" id="bits-s19" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="card-style-button-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><div class="inline-grid w-fit grid-cols-3 gap-1"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-9 col-start-2" type="button" aria-label="Pan camera up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-chevron-up"><!--[--><!----><path d="m18 15-6-6-6 6"><!----></path><!----><!--]--><!----><!----></svg><!----></button><!--]--><!----> <!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-9 col-start-1" type="button" aria-label="Pan camera left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-chevron-left"><!--[--><!----><path d="m15 18-6-6 6-6"><!----></path><!----><!--]--><!----><!----></svg><!----></button><!--]--><!----> <div class="flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-circle size-4 opacity-80"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!--]--><!----><!----></svg><!----></div> <!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-9" type="button" aria-label="Pan camera right"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-chevron-right"><!--[--><!----><path d="m9 18 6-6-6-6"><!----></path><!----><!--]--><!----><!----></svg><!----></button><!--]--><!----> <!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-9 col-start-2" type="button" aria-label="Pan camera down"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-chevron-down"><!--[--><!----><path d="m6 9 6 6 6-6"><!----></path><!----><!--]--><!----><!----></svg><!----></button><!--]--><!----></div><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Direction Pad Controls<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s20--><!--[-1--><button data-slot="drawer-trigger" id="bits-s20" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="direction-
39pad-controls-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 pe-0" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-thumbs-up"><!--[--><!----><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"><!----></path><!----><!----><path d="M7 10v12"><!----></path><!----><!--]--><!----><!----></svg><!----> Like <span class="relative ms-1 px-3 text-xs font-medium text-muted-foreground before:absolute before:inset-0 before:left-0 before:w-px before:bg-input">86</span><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Outline Like With Count<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s21--><!--[-1--><button data-slot="drawer-trigger" id="bits-s21" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="outline-like-with-count-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[--><div role="group" data-slot="button-group" data-orientation="horizontal" class="has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&amp;>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch [&amp;>*]:focus-visible:relative [&amp;>*]:focus-visible:z-10 [&amp;>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&amp;>input]:flex-1 [&amp;>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&amp;>[data-slot]]:rounded-r-none [&amp;>[data-slot]~[data-slot]]:rounded-l-none [&amp;>[data-slot]~[data-slot]]:border-l-0"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-qr-code"><!--[--><!----><rect width="5" height="5" x="3" y="3" rx="1"><!----></rect><!----><!----><rect width="5" height="5" x="16" y="3" rx="1"><!----></rect><!----><!----><rect width="5" height="5" x="3" y="16" rx="1"><!----></rect><!----><!----><path d="M21 16h-3a2 2 0 0 0-2 2v3"><!----></path><!----><!----><path d="M21 21v.01"><!----></path><!----><!----><path d="M12 7v3a2 2 0 0 1-2 2H7"><!----></path><!----><!----><path d="M3 12h.01"><!----></path><!----><!----><path d="M12 3h.01"><!----></path><!----><!----><path d="M12 16v.01"><!----></path><!----><!----><path d="M16 12h1"><!----></path><!----><!----><path d="M21 12v.01"><!----></path><!----><!----><path d="M12 21v-1"><!----></path><!----><!--]--><!----><!----></svg><!----></button><!--]--><!----> <!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!---->Sign In<!----></button><!--]--><!----><!----></div><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->QR Code Signin<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s22--><!--[-1--><button data-slot="drawer-trigger" id="bits-s22" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="qr-code-signin-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 rounded-full ps-1" type="button"><!--[--><!--[--><!--$s23--><!--[-1--><div data-slot="avatar" data-size="default" class="rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten size-6" id="bits-s23" data-avatar-root="" data-status="loading"><!--[--><!--[--><!--$s24--><!--[-1--><img data-slot="avatar-image" class="rounded-full aspect-square size-full object-cover" alt="@SikandarJODD" id="bits-s24" style="display: none;" data-status="loading" data-avatar-image="" src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&amp;h=96&amp;dpr=2&amp;q=80" onload="this.__e=event" onerror="this.__e=event"/><!--]--><!--]--><!--]--> <!--[--><!--[--><!--$s25--><!--[-1--><span data-slot="avatar-fallback" class="bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs" data-status="loading" data-avatar-fallback=""><!---->SB<!----></span><!--]--><!--]--><!--]--><!----></div><!--]--><!--]--><!--]--> @SikandarJODD<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->With Avatar<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s26--><!--[-1--><button data-slot="drawer-trigger" id="bits-s26" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="with-avatar-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 rounded-full" type="button"><!---->Pill Button<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Pill<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s27--><!--[-1--><button data-slot="drawer-trigger" id="bits-s27" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="pill-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!---->Get Started <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-right transition-transform in-[[data-slot=button]:hover]:translate-x-0.5"><!--[--><!----><path d="M5 12h14"><!----></path><!----><!----><path d="m12 5 7 7-7 7"><!----></path><!----><!--]--><!----><!----></svg><!----><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Get Started<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s28--><!--[-1--><button data-slot="drawer-trigger" id="bits-s28" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="get-started-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide-icon lucide lucide-printer"><!--[--><!----><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"><!----></path><!----><!----><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"><!----></path><!----><!----><rect x="6" y="14" width="12" height="8" rx="1"><!----></rect><!----><!--]--><!----><!----></svg><!----> Print <kbd data-slot="kbd-group" class="gap-1 inline-flex items-center -me-1"><kbd data-slot="kbd" class="bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&amp;_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none"><!---->⌘<!----></kbd><!----> <kbd data-slot="kbd" class="bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&amp;_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none"><!---->P<!----></kbd><!----><!----></kbd><!----><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Print Button<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s29--><!--[-1--><button data-slot="drawer-trigger" id="bits-s29" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="print-button-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!---->Messages <!----><span data-slot="badge" class="h-5 gap-1 rounded-4xl border px-2 py-0.5 text-xs font-medium has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&amp;>svg]:pointer-events-none border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground -me-1"><!---->18<!----><!----></span><!----><!----><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Message Notification<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s30--><!--[-1--><button data-slot="drawer-trigger" id="bits-s30" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="message-notification-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><div class="inline-flex items-center gap-2"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!---->Cancel<!----></button><!--]--><!----> <!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><!---->Save<!----></button><!--]--><!----></div><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Cancel Save<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s31--><!--[-1--><button data-slot="drawer-trigger" id="bits-s31" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="cancel-save-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button"><span aria-hidden="true" class="relative size-2 rounded-full bg-emerald-500 before:absolute before:inset-0 before:animate-ping before:rounded-full before:bg-emerald-400 before:opacity-75"></span> Online<!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Animated Status Dot<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s32--><!--[-1--><button data-slot="drawer-trigger" id="bits-s32" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="animated-status-dot-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-9" type="button" aria-label="Copy to clipboard"><!--[-1--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-copy"><!--[--><!----><rect width="14" height="14" x="8" y="8" rx="2" ry="2"><!----></rect><!----><!----><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"><!----></path><!----><!--]--><!----><!----></svg><!--]--><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Copy Button<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s33--><!--[-1--><button data-slot="drawer-trigger" id="bits-s33" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="copy-button-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" type="button" aria-label="Copy to clipboard"><!--[-1--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-copy"><!--[--><!----><rect width="14" height="14" x="8" y="8" rx="2" ry="2"><!----></rect><!----><!----><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"><!----></path><!----><!--]--><!----><!----></svg><!----> Copy<!--]--><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Copy With Feedback<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s34--><!--[-1--><button data-slot="drawer-trigger" id="bits-s34" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="copy-with-feedback-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-9 rounded-full before:rounded-full" type="button" aria-expanded="false" aria-label="Open menu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-plus in-aria-expanded:rotate-135 transition-transform duration-500 ease-[cubic-bezier(0.68,-0.6,0.32,1.6)]"><!--[--><!----><path d="M5 12h14"><!----></path><!----><!----><path d="M12 5v14"><!----></path><!----><!--]--><!----><!----></svg><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Rotating Toggle<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s35--><!--[-1--><button data-slot="drawer-trigger" id="bits-s35" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="rotating-toggle-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><div data-slot="frame" class="relative flex flex-col rounded-2xl p-1 *:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1 w-full overflow-hidden border bg-secondary dark:bg-card/80"><div data-slot="frame-panel" class="bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] flex min-h-80 items-center justify-center overflow-hidden border-secondary"><!--[--><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-
39px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-9" type="button" aria-expanded="false" aria-label="Open menu"><svg aria-hidden="true" class="pointer-events-none" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path class="origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] in-[[data-slot=button][aria-expanded=true]]:translate-x-0 in-[[data-slot=button][aria-expanded=true]]:translate-y-0 in-[[data-slot=button][aria-expanded=true]]:rotate-315" d="M4 12L20 12"></path><path class="origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] in-[[data-slot=button][aria-expanded=true]]:rotate-45" d="M4 12H20"></path><path class="origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] in-[[data-slot=button][aria-expanded=true]]:translate-y-0 in-[[data-slot=button][aria-expanded=true]]:rotate-135" d="M4 12H20"></path></svg><!----></button><!--]--><!--]--><!----></div><!----> <div data-slot="frame-panel-footer" class="px-5 py-4 flex items-center justify-between pt-1.5 pr-0.5 pb-1 pl-2"><div class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-info size-3.5 text-muted-foreground"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 16v-4"><!----></path><!----><!----><path d="M12 8h.01"><!----></path><!----><!--]--><!----><!----></svg><!----> <div data-slot="frame-panel-title" class="text-xs font-normal text-neutral-500 dark:text-primary!"><!---->Hamburger Menu<!----></div><!----></div> <!--[--><!--[--><!--[--><!--[--><!--[--><!--$s36--><!--[-1--><button data-slot="drawer-trigger" id="bits-s36" aria-haspopup="dialog" aria-expanded="false" data-dialog-trigger="" data-state="closed"><!--[-1--><button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&amp;_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-8 gap-1 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 rounded-lg bg-transparent text-xs hover:bg-muted!" type="button" data-s-event="hamburger-menu-button"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m18 16l1.84 1.586c.773.667 1.16 1 1.16 1.414s-.387.747-1.16 1.414L18 22m-4-6l-1.84 1.586c-.773.667-1.16 1-1.16 1.414s.387.747 1.16 1.414L14 22"></path><path d="M20 13.003V7.82c0-1.694 0-2.54-.268-3.217c-.43-1.087-1.342-1.945-2.497-2.35C16.517 2 15.617 2 13.818 2c-3.148 0-4.722 0-5.98.441c-2.02.71-3.615 2.211-4.37 4.114C3 7.74 3 9.221 3 12.185v2.546c0 3.07 0 4.605.848 5.672c.243.305.53.576.855.805c.912.643 2.147.768 4.297.792"></path><path d="M3 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057A1.67 1.67 0 0 0 9.61 7.43c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13 2"></path></g></svg> View code<!----></button><!--]--><!----></button><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!--]--><!----><!--]--><!--]--><!--]--><!----><!----></div><!----><!----></div><!--]--></div><!--]--><!----></div><!----></main><!--]--><!----></div><!----><!--]--><!--]--><!--]--><!--]--><!--]--><!----> <!--[0--><!--[-1--><!--]--><!--]--><!--]--><!--]--> <!--[-1--><!--]--><!--]-->
40			
41			
41<script>
42				{
43					__sveltekit_5o3yic = {
44						base: new URL("..", location).pathname.slice(0, -1)
45					};
46
47					const element = document.currentScript.parentElement;
48
49					Promise.all([
50						import("../_app/immutable/entry/start.UW4-kWcR.js"),
51						import("../_app/immutable/entry/app.aSKnn6a7.js")
52					]).then(([kit, app]) => {
53						kit.start(app, element, {
54							node_ids: [0, 2, 10],
55							data: [null,null,null],
56							form: null,
57							error: null
58						});
59					});
60				}
61			</script>
61
62		</div>
63	</body>
64</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.