love-ui 1.2.17 → 1.2.18

package/registry/default/blocks/auth2/components/ui/auth-divider.tsx

@@ -0,0 +1,16 @@
+import type React from "react";
+
+export function AuthDivider({
+	children,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div className="relative flex w-full items-center" {...props}>
+			<div className="w-full border-t" />
+			<div className="flex w-max justify-center text-nowrap px-2 text-muted-foreground text-xs">
+				{children}
+			</div>
+			<div className="w-full border-t" />
+		</div>
+	);
+}

package/registry/default/blocks/auth2/components/ui/decor-icon.tsx

@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const DecorIconVariants = cva(
+	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
+	{
+		variants: {
+			position: {
+				"top-left":
+					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
+				"top-right":
+					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
+				"bottom-right":
+					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
+				"bottom-left":
+					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
+			},
+		},
+		defaultVariants: {
+			position: "top-left",
+		},
+	}
+);
+
+type DecorIconProps = React.ComponentProps<"svg"> &
+	VariantProps<typeof DecorIconVariants>;
+
+export function DecorIcon({ position, className, ...props }: DecorIconProps) {
+	return (
+		<svg
+			aria-hidden="true"
+			className={cn(DecorIconVariants({ position, className }))}
+			fill="none"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path d="M5 12h14" />
+			<path d="M12 5v14" />
+		</svg>
+	);
+}

package/registry/default/blocks/auth3/app/page.tsx

@@ -0,0 +1,5 @@
+import { AuthPage } from "../components/auth-page";
+
+export default function DemoPage() {
+	return <AuthPage />;
+}

package/registry/default/blocks/auth3/components/auth-page.tsx

@@ -0,0 +1,84 @@
+import { cn } from "@/lib/utils";
+import { GithubIcon } from "./icons/github-icon";
+import { GoogleIcon } from "./icons/google-icon";
+import { Logo } from "./logo";
+import { Button } from "@/registry/default/ui/button";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupInput,
+} from "@/registry/default/ui/input-group";
+import { AuthDivider } from "./ui/auth-divider";
+import { AtSignIcon } from "lucide-react";
+
+export function AuthPage() {
+	return (
+		<div className="relative w-full overflow-hidden md:h-screen">
+			<div
+				className={cn(
+					"relative mx-auto flex min-h-screen w-full max-w-sm flex-col justify-between p-6 md:p-8"
+				)}
+			>
+				<div className="flex justify-center">
+					<a href="#">
+						<Logo className="h-4.5" />
+					</a>
+				</div>
+
+				<div className="fade-in slide-in-from-bottom-4 w-full animate-in space-y-4 duration-600">
+						<div className="flex flex-col space-y-1">
+							<h1 className="font-bold text-2xl tracking-wide">Join Now!</h1>
+							<p className="text-base text-muted-foreground">
+							Sign in or create your LoveUI account.
+							</p>
+						</div>
+					<form className="space-y-2">
+						<InputGroup>
+							<InputGroupInput
+								placeholder="your.email@example.com"
+								type="email"
+							/>
+							<InputGroupAddon align="inline-start">
+								<AtSignIcon
+								/>
+							</InputGroupAddon>
+						</InputGroup>
+
+						<Button className="w-full" size="sm" type="button">
+							Continue With Email
+						</Button>
+					</form>
+					<AuthDivider>OR CONTINUE WITH</AuthDivider>
+					<div className="space-y-2">
+						<Button className="w-full" type="button" variant="outline">
+							<GoogleIcon data-icon="inline-start" />
+							Google
+						</Button>
+						<Button className="w-full" type="button" variant="outline">
+							<GithubIcon data-icon="inline-start" />
+							GitHub
+						</Button>
+					</div>
+				</div>
+
+				<p className="text-center text-muted-foreground text-sm">
+					This site is protected by reCAPTCHA and the Google{" "}
+					<a
+						className="underline underline-offset-4 hover:text-primary"
+						href="#"
+					>
+						Privacy Policy
+					</a>{" "}
+					and{" "}
+					<a
+						className="underline underline-offset-4 hover:text-primary"
+						href="#"
+					>
+						Terms of Service
+					</a>{" "}
+					apply.
+				</p>
+			</div>
+		</div>
+	);
+}

package/registry/default/blocks/auth3/components/icons/github-icon.tsx

@@ -0,0 +1,10 @@
+export function GithubIcon(props: React.ComponentProps<"svg">) {
+	return (
+		<svg viewBox="0 0 438.549 438.549" {...props}>
+			<path
+				d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}

package/registry/default/blocks/auth3/components/icons/google-icon.tsx

@@ -0,0 +1,14 @@
+export function GoogleIcon(props: React.ComponentProps<"svg">) {
+	return (
+		<svg
+			fill="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<g>
+				<path d="M12.479,14.265v-3.279h11.049c0.108,0.571,0.164,1.247,0.164,1.979c0,2.46-0.672,5.502-2.84,7.669C18.744,22.829,16.051,24,12.483,24C5.869,24,0.308,18.613,0.308,12S5.869,0,12.483,0c3.659,0,6.265,1.436,8.223,3.307L18.392,5.62c-1.404-1.317-3.307-2.341-5.913-2.341C7.65,3.279,3.873,7.171,3.873,12s3.777,8.721,8.606,8.721c3.132,0,4.916-1.258,6.059-2.401c0.927-0.927,1.537-2.251,1.777-4.059L12.479,14.265z" />
+			</g>
+		</svg>
+	);
+}

package/registry/default/blocks/auth3/components/logo.tsx

@@ -0,0 +1,88 @@
+export const Logo = (props: React.ComponentProps<"svg">) => (
+  <svg
+  width="220"
+  height="48"
+  viewBox="0 0 220 48"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <defs>
+    <linearGradient id="loveui-blue" x1="0" y1="0" x2="48" y2="48">
+      <stop stopColor="#38A3FF" />
+      <stop offset="0.55" stopColor="#1266F1" />
+      <stop offset="1" stopColor="#0B3FD8" />
+    </linearGradient>
+
+    <linearGradient id="loveui-shine" x1="0" y1="0" x2="1" y2="1">
+      <stop stopColor="#FFFFFF" stopOpacity="0.9" />
+      <stop offset="1" stopColor="#BBD8FF" stopOpacity="0.4" />
+    </linearGradient>
+  </defs>
+
+  <g transform="translate(0 0)">
+    <rect
+      x="0"
+      y="0"
+      width="48"
+      height="48"
+      rx="12"
+      fill="url(#loveui-blue)"
+    />
+
+    <path
+      d="
+        M12 10
+        C12 8.3 13.3 7 15 7
+        H18
+        C19.7 7 21 8.3 21 10
+        V25
+        C21 27.2 22.8 29 25 29
+        H35
+        C36.7 29 38 30.3 38 32
+        V34
+        C38 35.7 36.7 37 35 37
+        H15
+        C13.3 37 12 35.7 12 34
+        Z"
+      fill="white"
+    />
+
+    <rect
+      x="28"
+      y="14"
+      width="9"
+      height="9"
+      rx="3"
+      fill="white"
+    />
+
+    <path
+      d="
+        M21 25
+        C21 27.2 22.8 29 25 29
+        H27
+        V34
+        C27 35.7 25.7 37 24 37
+        H15
+        C13.3 37 12 35.7 12 34
+        V29
+        H18
+        C19.7 29 21 27.7 21 25
+        Z"
+      fill="url(#loveui-shine)"
+      opacity="0.5"
+    />
+  </g>
+  <text
+    x="62"
+    y="31"
+    fontFamily="Inter, Geist, sans-serif"
+    fontSize="24"
+    fontWeight="700"
+    letterSpacing="-0.04em"
+    fill="currentColor"
+  >
+    LoveUI
+  </text>
+</svg>
+);

package/registry/default/blocks/auth3/components/ui/auth-divider.tsx

@@ -0,0 +1,16 @@
+import type React from "react";
+
+export function AuthDivider({
+	children,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div className="relative flex w-full items-center" {...props}>
+			<div className="w-full border-t" />
+			<div className="flex w-max justify-center text-nowrap px-2 text-muted-foreground text-xs">
+				{children}
+			</div>
+			<div className="w-full border-t" />
+		</div>
+	);
+}

package/registry/default/blocks/auth3/components/ui/decor-icon.tsx

@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const DecorIconVariants = cva(
+	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
+	{
+		variants: {
+			position: {
+				"top-left":
+					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
+				"top-right":
+					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
+				"bottom-right":
+					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
+				"bottom-left":
+					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
+			},
+		},
+		defaultVariants: {
+			position: "top-left",
+		},
+	}
+);
+
+type DecorIconProps = React.ComponentProps<"svg"> &
+	VariantProps<typeof DecorIconVariants>;
+
+export function DecorIcon({ position, className, ...props }: DecorIconProps) {
+	return (
+		<svg
+			aria-hidden="true"
+			className={cn(DecorIconVariants({ position, className }))}
+			fill="none"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path d="M5 12h14" />
+			<path d="M12 5v14" />
+		</svg>
+	);
+}

package/registry/default/blocks/blogs1/app/page.tsx

@@ -0,0 +1,5 @@
+import { BlogsSection } from "../components/blogs";
+
+export default function DemoPage() {
+	return <BlogsSection />;
+}

package/registry/default/blocks/blogs1/components/blogs.tsx

@@ -0,0 +1,97 @@
+import { cn } from "@/lib/utils";
+import { FullWidthDivider } from "./full-width-divider";
+
+const blogs = [
+	{
+		title: "Why LoveUI Ships Source",
+		date: "May 20 2026",
+		description:
+			"How editable components give teams more control than a black-box UI package.",
+		href: "#",
+	},
+	{
+		title: "Blocks That Feel Finished",
+		date: "May 14 2026",
+		description: "Design notes from building polished sections on top of primitives.",
+		href: "#",
+	},
+	{
+		title: "A Better Registry Workflow",
+		date: "Apr 19 2026",
+		description: "Install only the files you need, then shape them around your product.",
+		href: "#",
+	},
+	{
+		title: "Designing for AI Agents",
+		date: "Apr 12 2026",
+		description: "Why LoveUI pairs components with guidance for better interface work.",
+		href: "#",
+	},
+	{
+		title: "Composing Product Screens",
+		date: "Mar 23 2026",
+		description: "How examples, blocks, and primitives work together in LoveUI.",
+		href: "#",
+	},
+];
+
+export function BlogsSection() {
+	return (
+		<div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col justify-start md:border-x">
+			<div className="space-y-2 px-4 py-8 md:py-12">
+				<h1 className="font-semibold text-2xl tracking-wide md:text-4xl">
+					Latest LoveUI Notes
+				</h1>
+				<p className="text-muted-foreground text-sm">
+					Updates on editable UI source, production blocks, and design system
+					workflows.
+				</p>
+			</div>
+
+			<div className="relative">
+				<FullWidthDivider />
+				<div className="divide-y">
+					{blogs.map((blog) => (
+						<BlogCard {...blog} key={blog.title} />
+					))}
+				</div>
+				<FullWidthDivider />
+			</div>
+		</div>
+	);
+}
+
+function BlogCard({
+	title,
+	date,
+	description,
+	className,
+	...props
+}: React.ComponentProps<"a"> & {
+	title: string;
+	date: string;
+	description: string;
+}) {
+	return (
+		<a
+			className={cn(
+				"group flex h-24 w-full flex-col justify-center gap-y-1 p-4 hover:cursor-pointer hover:bg-accent/30 active:bg-accent dark:active:bg-accent/50",
+				className
+			)}
+			{...props}
+		>
+			<div className="relative flex items-end justify-center gap-2">
+				<h3 className="whitespace-nowrap font-medium text-foreground text-lg md:text-xl">
+					{title}
+				</h3>
+				<span className="mb-[6px] w-full border-b-2 border-dashed" />
+				<span className="whitespace-nowrap font-mono text-muted-foreground text-xs uppercase group-hover:text-foreground md:text-sm">
+					{date}
+				</span>
+			</div>
+			<div className="max-w-sm text-muted-foreground text-sm group-hover:text-foreground md:max-w-full md:text-base">
+				{description}
+			</div>
+		</a>
+	);
+}

package/registry/default/blocks/blogs1/components/full-width-divider.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+type FullWidthDividerProps = React.ComponentProps<"div"> & {
+	contained?: boolean;
+	position?: "top" | "bottom";
+};
+
+export function FullWidthDivider({
+	className,
+	contained = false,
+	position,
+	...props
+}: FullWidthDividerProps) {
+	return (
+		<div
+			aria-hidden="true"
+			className={cn(
+				"pointer-events-none absolute h-px bg-border",
+				// full-bleed (default)
+				"data-[contained=false]:left-1/2 data-[contained=false]:w-screen data-[contained=false]:-translate-x-1/2",
+				// contained
+				"data-[contained=true]:inset-x-0 data-[contained=true]:w-full",
+				// position
+				position &&
+					"data-[position=top]:-top-px data-[position=bottom]:-bottom-px",
+				className
+			)}
+			data-contained={contained}
+			data-position={position}
+			{...props}
+		/>
+	);
+}

package/registry/default/blocks/blogs2/app/page.tsx

@@ -0,0 +1,5 @@
+import { BlogsSection } from "../components/blogs";
+
+export default function DemoPage() {
+	return <BlogsSection />;
+}

package/registry/default/blocks/blogs2/components/blogs.tsx

@@ -0,0 +1,158 @@
+import { cn } from "@/lib/utils";
+import { FullWidthDivider } from "./full-width-divider";
+import { GridFiller } from "./grid-filler";
+
+type BlogType = {
+	title: string;
+	date: string;
+	description: string;
+	category: string;
+	author: string;
+	href: string;
+};
+
+const blogs: BlogType[] = [
+	{
+		title: "Why LoveUI Ships Components as Editable Source",
+		date: "May 20 2026",
+		category: "Registry",
+		author: "Connor Love",
+		description:
+			"A closer look at why LoveUI copies code into your app instead of hiding interface decisions inside a package.",
+		href: "#",
+	},
+	{
+		title: "Designing Blocks That Feel Ready to Ship",
+		date: "May 14 2026",
+		category: "Blocks",
+		author: "Connor Love",
+		description:
+			"How LoveUI turns common product sections into polished starting points while keeping the implementation easy to reshape.",
+		href: "#",
+	},
+	{
+		title: "Building Better Interfaces with Agent Skills",
+		date: "Apr 29 2026",
+		category: "AI",
+		author: "Connor Love",
+		description:
+			"Why the LoveUI skill pack gives coding agents concrete design rules instead of vague instructions.",
+		href: "#",
+	},
+	{
+		title: "Composing Product Pages from Small Primitives",
+		date: "Apr 12 2026",
+		category: "Components",
+		author: "Connor Love",
+		description:
+			"How buttons, empty states, accordions, and layout helpers become complete product surfaces inside LoveUI.",
+		href: "#",
+	},
+	{
+		title: "Keeping a Design System Close to the App",
+		date: "Mar 23 2026",
+		category: "Systems",
+		author: "Connor Love",
+		description:
+			"LoveUI is designed so teams can review, version, and customize interface code like any other source file.",
+		href: "#",
+	},
+	{
+		title: "What Makes a Registry Example Useful",
+		date: "Mar 05 2026",
+		category: "Docs",
+		author: "Connor Love",
+		description:
+			"Examples should show real composition patterns, not isolated screenshots. That principle shapes the LoveUI docs.",
+		href: "#",
+	},
+	{
+		title: "From Single Component to Full Section",
+		date: "Feb 18 2026",
+		category: "Engineering",
+		author: "Connor Love",
+		description:
+			"The practical patterns behind moving from reusable primitives to full CTA, FAQ, pricing, and testimonial blocks.",
+		href: "#",
+	},
+	{
+		title: "The Case for Owning Your UI",
+		date: "Feb 02 2026",
+		category: "Workflow",
+		author: "Connor Love",
+		description:
+			"When product details matter, copied source gives teams the confidence to adjust behavior, styling, and structure directly.",
+		href: "#",
+	},
+];
+
+export function BlogsSection() {
+	return (
+		<div className="mx-auto w-full max-w-5xl py-4 lg:border-x">
+			<div className="space-y-2 px-4 py-8 md:py-12">
+				<h1 className="font-semibold text-2xl tracking-wide md:text-4xl">
+					Latest LoveUI Writing
+				</h1>
+				<p className="text-muted-foreground text-sm">
+					Notes from Connor Love on components, blocks, registries, and
+					source-first interface systems.
+				</p>
+			</div>
+			<FullWidthDivider contained={true} />
+			<div className="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 md:grid-cols-3">
+				{blogs.map((blog) => (
+					<BlogCard {...blog} key={blog.title} />
+				))}
+				<GridFiller
+					className="bg-background"
+					mdColumns={3}
+					smColumns={4}
+					totalItems={blogs.length}
+				/>
+			</div>
+			<FullWidthDivider contained={true} />
+		</div>
+	);
+}
+
+function BlogCard({
+	title,
+	date,
+	description,
+	category,
+	author,
+	className,
+	...props
+}: React.ComponentProps<"a"> & BlogType) {
+	return (
+		<a
+			className={cn(
+				"group w-full bg-background px-6 py-12 text-muted-foreground hover:cursor-pointer hover:text-foreground active:bg-accent md:px-8 active:dark:bg-accent/50",
+				className
+			)}
+			{...props}
+		>
+			<h3 className="mb-3 line-clamp-2 font-medium text-foreground text-lg md:text-xl">
+				{title}
+			</h3>
+			<div className="mb-3 flex items-center gap-2">
+				<span className="text-muted-foreground text-xs group-hover:text-foreground">
+					{category}
+				</span>
+				<div className="inline-flex size-1 rounded-full bg-muted-foreground" />
+				<span className="text-muted-foreground text-xs group-hover:text-foreground">
+					{date}
+				</span>
+			</div>
+			<p className="mb-8 line-clamp-3 text-muted-foreground text-sm tracking-wide group-hover:text-foreground">
+				{description}
+			</p>
+			<div className="flex items-center gap-1.5">
+				by
+				<span className="font-medium font-mono text-foreground/80 text-xs group-hover:text-foreground md:text-sm">
+					{author}
+				</span>
+			</div>
+		</a>
+	);
+}

package/registry/default/blocks/blogs2/components/full-width-divider.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+type FullWidthDividerProps = React.ComponentProps<"div"> & {
+	contained?: boolean;
+	position?: "top" | "bottom";
+};
+
+export function FullWidthDivider({
+	className,
+	contained = false,
+	position,
+	...props
+}: FullWidthDividerProps) {
+	return (
+		<div
+			aria-hidden="true"
+			className={cn(
+				"pointer-events-none absolute h-px bg-border",
+				// full-bleed (default)
+				"data-[contained=false]:left-1/2 data-[contained=false]:w-screen data-[contained=false]:-translate-x-1/2",
+				// contained
+				"data-[contained=true]:inset-x-0 data-[contained=true]:w-full",
+				// position
+				position &&
+					"data-[position=top]:-top-px data-[position=bottom]:-bottom-px",
+				className
+			)}
+			data-contained={contained}
+			data-position={position}
+			{...props}
+		/>
+	);
+}