untitledui 0.1.1

package/templates/default/eslint.config.mjs

@@ -0,0 +1,58 @@
+import tsPlugin from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import prettierConfig from "eslint-config-prettier";
+import prettierPlugin from "eslint-plugin-prettier";
+import unusedImports from "eslint-plugin-unused-imports";
+
+export default [
+    {
+        ignores: ["node_modules/*"],
+    },
+    {
+        files: ["**/*.{js,jsx,ts,tsx}"],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                ecmaVersion: "latest",
+                sourceType: "module",
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+        },
+        plugins: {
+            "@typescript-eslint": tsPlugin,
+            prettier: prettierPlugin,
+            "unused-imports": unusedImports,
+        },
+        rules: {
+            "unused-imports/no-unused-imports": "error",
+
+            "@typescript-eslint/consistent-type-imports": [
+                "error",
+                {
+                    prefer: "type-imports",
+                    fixStyle: "separate-type-imports",
+                    disallowTypeAnnotations: true,
+                },
+            ],
+            "prettier/prettier": [
+                "error",
+                {},
+                {
+                    usePrettierrc: true,
+                },
+            ],
+            "react/react-in-jsx-scope": "off",
+            "react/display-name": "off",
+            "react/jsx-keys": "off",
+            "react/no-unescaped-entities": "off",
+            "no-unused-vars": "off",
+            "no-undef": "off",
+            "no-redeclare": "warn",
+            "max-len": "off",
+            "jsx-a11y/alt-text": "off",
+        },
+    },
+    prettierConfig,
+];

package/templates/default/next.config.ts

@@ -0,0 +1,6 @@
+import type { NextConfig } from "next";
+
+
+const nextConfig: NextConfig = {}
+
+export default nextConfig;

package/templates/default/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "basic-form",
+  "version": "0.1.0",
+  "repository": "https://github.com/a-peak-works/starter-kits.git",
+  "author": "a-peak-works",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@designbycode/tailwindcss-mask-image": "^2.0.3",
+    "@react-aria/utils": "^3.27.0",
+    "@react-stately/utils": "^3.10.5",
+    "@tailwindcss/postcss": "^4.0.4",
+    "@tailwindcss/typography": "^0.5.16",
+    "@untitledui/icons": "^0.0.15",
+    "input-otp": "^1.4.2",
+    "motion": "^11.18.2",
+    "next": "15.0.3",
+    "next-themes": "^0.4.4",
+    "qr-code-styling": "^1.9.1",
+    "react": "19.0.0",
+    "react-aria": "^3.37.0",
+    "react-aria-components": "^1.6.0",
+    "react-dom": "19.0.0",
+    "react-hotkeys-hook": "^4.6.1",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss": "^4.0.4",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-react-aria-components": "^3.0.0-nightly-fee532d6a-241217"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/node": "^20.17.17",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
+    "eslint": "^9.21.0",
+    "eslint-config-next": "15.0.3",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "postcss": "^8.5.1",
+    "postcss-loader": "^8.1.1",
+    "prettier": "^3.5.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "typescript": "^5.7.3"
+  }
+}

package/templates/default/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        "@tailwindcss/postcss": {},
+    },
+};

package/templates/default/src/app/home-screen.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import type { FormEvent } from "react";
+import { Fragment } from "react";
+import { ArrowRight } from "@untitledui/icons";
+import { useTheme } from "next-themes";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import Link from "next/link";
+import { toast } from "sonner";
+import { BadgeGroup } from "@/components/shared/badges/badge-groups";
+import Button from "@/components/shared/buttons/button";
+import { Form } from "@/components/shared/inputs/form/form";
+import { Input } from "@/components/shared/inputs/input";
+import { cx } from "@/components/utils";
+import Spiral from "../../public/marketing/spirals.webp";
+
+const Header = dynamic(() => import("@/components/marketing/header-navigation/components/header").then((mod) => mod.Header));
+
+export const HomeScreen = () => {
+    const { systemTheme } = useTheme();
+    console.log(systemTheme);
+
+    const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+
+        const data = new FormData(event.currentTarget);
+
+        toast.custom((t) => (
+            <div
+                key={t}
+                className={cx(
+                    "light-mode relative z-[var(--z-index)] flex max-w-full flex-col gap-4 rounded-xl border border-primary bg-primary p-4 shadow-lg xs:w-[var(--width)] xs:flex-row",
+                    systemTheme === "dark" && "dark-mode",
+                )}
+            >
+                <pre className="w-full rounded-lg bg-secondary p-4 text-primary">
+                    <code>{JSON.stringify(data, null, 2)}</code>
+                </pre>
+            </div>
+        ));
+    };
+
+    return (
+        <Fragment>
+            <Header />
+
+            <section className="relative bg-primary py-16 lg:flex lg:min-h-[720px] lg:items-center lg:py-24">
+                <div className="mx-auto flex w-full max-w-container items-center px-4 md:px-8">
+                    <div className="flex flex-col items-start md:max-w-3xl lg:w-1/2 lg:pr-8">
+                        <Link href="#" className="rounded-[10px] focus:outline-2 focus:outline-offset-2 focus:outline-focus-ring">
+                            <BadgeGroup className="hidden md:flex" size="lg" addonText="We're hiring!" iconTrailing={ArrowRight} theme="modern" color="brand">
+                                Join our remote team
+                            </BadgeGroup>
+                            <BadgeGroup className="md:hidden" size="md" addonText="We're hiring!" iconTrailing={ArrowRight} theme="modern" color="brand">
+                                Join our remote team
+                            </BadgeGroup>
+                        </Link>
+
+                        <h1 className="mt-4 td-md-semi text-primary md:td-lg-semi lg:td-xl-semi">People who care about your growth</h1>
+                        <p className="mt-4 tt-lg text-tertiary md:mt-6 md:max-w-lg md:tt-xl">
+                            Powerful, self-serve product and growth analytics to help you convert, engage, and retain more.
+                        </p>
+
+                        <Form
+                            onSubmit={onSubmit}
+                            className="mt-8 flex w-full flex-col items-stretch gap-4 md:mt-12 md:max-w-[480px] md:flex-row md:items-start"
+                        >
+                            <Input
+                                isRequired
+                                size="md"
+                                name="email"
+                                type="email"
+                                wrapperClassName="py-0.5"
+                                placeholder="Enter your email"
+                                validate={(value) => value.includes("@") || "Please enter a valid email"}
+                                hint={
+                                    <span>
+                                        We care about your data in our{" "}
+                                        <a
+                                            href="#"
+                                            className="rounded-sm underline underline-offset-3 focus:outline-2 focus:outline-offset-2 focus:outline-focus-ring"
+                                        >
+                                            privacy policy
+                                        </a>
+                                        .
+                                    </span>
+                                }
+                            />
+                            <Button type="submit" size="xl">
+                                Get started
+                            </Button>
+                        </Form>
+                    </div>
+                </div>
+                <div className="relative mt-16 h-[240px] w-full px-4 md:h-[380px] md:px-8 lg:absolute lg:inset-y-0 lg:right-0 lg:mt-0 lg:h-full lg:w-1/2 lg:px-0">
+                    <Image
+                        fill
+                        className="inset-0 size-full object-cover lg:absolute"
+                        src={Spiral}
+                        alt="Spirals"
+                        priority
+                        sizes="(min-width: 1024px) 50vw, 100vw"
+                    />
+                </div>
+            </section>
+        </Fragment>
+    );
+};

package/templates/default/src/app/layout.tsx

@@ -0,0 +1,42 @@
+import type { Metadata, Viewport } from "next";
+import localFont from "next/font/local";
+import { cx } from "@/components/utils";
+import { Theme } from "@/providers/theme";
+import "@/styles/globals.css";
+
+const geistSans = localFont({
+    src: "../fonts/GeistVF.woff",
+    variable: "--font-geist-sans",
+    weight: "100 900",
+    display: "swap",
+});
+const geistMono = localFont({
+    src: "../fonts/GeistMonoVF.woff",
+    variable: "--font-geist-mono",
+    weight: "100 900",
+    display: "swap",
+});
+
+export const metadata: Metadata = {
+    title: "Create Next App",
+    description: "Generated by create next app",
+};
+
+export const viewport: Viewport = {
+    themeColor: "#7f56d9",
+    colorScheme: "light dark",
+};
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en" suppressHydrationWarning>
+            <body className={cx(geistSans.variable, geistMono.variable, "bg-primary antialiased dark:dark-mode")}>
+                <Theme>{children}</Theme>
+            </body>
+        </html>
+    );
+}

package/templates/default/src/app/not-found.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { ArrowLeft } from "@untitledui/icons";
+import { useRouter } from "next/navigation";
+import Button from "@/components/shared/buttons/button";
+
+export default function NotFound() {
+    const router = useRouter();
+
+    return (
+        <section className="flex min-h-screen items-start bg-primary py-16 md:items-center md:py-24">
+            <div className="mx-auto max-w-container grow px-4 md:px-8">
+                <div className="flex w-full max-w-3xl flex-col gap-8 md:gap-12">
+                    <div className="flex flex-col gap-4 md:gap-6">
+                        <div className="flex flex-col gap-3">
+                            <span className="tt-md-semi text-brand-secondary">404 error</span>
+                            <h1 className="td-md-semi text-primary md:td-lg-semi lg:td-xl-semi">We can’t find that page</h1>
+                        </div>
+                        <p className="tt-lg text-tertiary md:tt-xl">Sorry, the page you are looking for doesn't exist or has been moved.</p>
+                    </div>
+
+                    <div className="flex flex-col-reverse gap-3 sm:flex-row">
+                        <Button onClick={() => router.back()} color="secondary" size="xl" className="lg:hidden" iconLeading={ArrowLeft}>
+                            Go back
+                        </Button>
+                        <Button onClick={() => router.back()} color="secondary" size="2xl" className="hidden lg:flex" iconLeading={ArrowLeft}>
+                            Go back
+                        </Button>
+                        <Button href="/" size="xl" className="lg:hidden">
+                            Take me home
+                        </Button>
+                        <Button href="/" size="2xl" className="hidden lg:flex">
+                            Take me home
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

package/templates/default/src/app/page.tsx

@@ -0,0 +1,3 @@
+import { HomeScreen } from "./home-screen";
+
+export default HomeScreen;

package/templates/default/src/components/foundations/dot-icon.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import type { HTMLAttributes } from "react";
+
+const sizes = {
+    sm: {
+        wh: 8,
+        c: 4,
+        r: 3,
+    },
+    md: {
+        wh: 10,
+        c: 5,
+        r: 4,
+    },
+};
+
+const Dot = (props: HTMLAttributes<HTMLOrSVGElement> & { size?: "sm" | "md" }) => {
+    const { size = "md" } = props;
+    return (
+        <svg width={sizes[size].wh} height={sizes[size].wh} viewBox={`0 0 ${sizes[size].wh} ${sizes[size].wh}`} fill="none" {...props}>
+            <circle cx={sizes[size].c} cy={sizes[size].c} r={sizes[size].r} fill="currentColor" stroke="currentColor" />
+        </svg>
+    );
+};
+
+export default Dot;

package/templates/default/src/components/foundations/featured-icon/featured-icons.tsx

@@ -0,0 +1,153 @@
+import type { FC, ReactNode, Ref } from "react";
+import { isValidElement } from "react";
+import { cx, sortCx } from "@/components/utils";
+import { isReactComponent } from "@/components/utils/isReactComponent";
+
+const iconsSizes = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6",
+    xl: "size-7",
+};
+
+const styles = sortCx({
+    light: {
+        base: "rounded-full",
+        sizes: {
+            sm: "size-8",
+            md: "size-10",
+            lg: "size-12",
+            xl: "size-14",
+        },
+        colors: {
+            brand: "bg-brand-secondary text-featured-icon-light-fg-brand",
+            gray: "bg-tertiary text-featured-icon-light-fg-gray",
+            error: "bg-error-secondary text-featured-icon-light-fg-error",
+            warning: "bg-warning-secondary text-featured-icon-light-fg-warning",
+            success: "bg-success-secondary text-featured-icon-light-fg-success",
+        },
+    },
+
+    gradient: {
+        base: "rounded-full text-fg-white before:absolute before:inset-0 before:size-full before:rounded-full before:border before:mask-image-b after:absolute after:block after:rounded-full",
+        sizes: {
+            sm: "size-8 after:size-6",
+            md: "size-10 after:size-7",
+            lg: "size-12 after:size-8",
+            xl: "size-14 after:size-10",
+        },
+        colors: {
+            brand: "before:border-utility-brand-200 before:bg-utility-brand-50 after:bg-brand-solid",
+            gray: "before:border-utility-gray-200 before:bg-utility-gray-50 after:bg-secondary-solid",
+            error: "before:border-utility-error-200 before:bg-utility-error-50 after:bg-error-solid",
+            warning: "before:border-utility-warning-200 before:bg-utility-warning-50 after:bg-warning-solid",
+            success: "before:border-utility-success-200 before:bg-utility-success-50 after:bg-success-solid",
+        },
+    },
+
+    dark: {
+        base: "text-fg-white shadow-xs-skeumorphic before:absolute before:inset-px before:border before:border-white/12 before:mask-image-b",
+        sizes: {
+            sm: "size-8 rounded-md before:rounded-[5px]",
+            md: "size-10 rounded-lg before:rounded-[7px]",
+            lg: "size-12 rounded-[10px] before:rounded-[9px]",
+            xl: "size-14 rounded-xl before:rounded-[11px]",
+        },
+        colors: {
+            brand: "bg-brand-solid before:border-utility-brand-200/12",
+            gray: "bg-secondary-solid before:border-utility-gray-200/12",
+            error: "bg-error-solid before:border-utility-error-200/12",
+            warning: "bg-warning-solid before:border-utility-warning-200/12",
+            success: "bg-success-solid before:border-utility-success-200/12",
+        },
+    },
+
+    modern: {
+        base: "bg-primary shadow-xs-skeumorphic ring-1 ring-inset",
+        sizes: {
+            sm: "size-8 rounded-md",
+            md: "size-10 rounded-lg",
+            lg: "size-12 rounded-[10px]",
+            xl: "size-14 rounded-xl",
+        },
+        colors: {
+            brand: "",
+            gray: "text-fg-secondary ring-border-primary",
+            error: "",
+            warning: "",
+            success: "",
+        },
+    },
+    "modern-neue": {
+        base: [
+            "bg-primary_alt ring-1 ring-inset before:absolute before:inset-1",
+            // Shadow
+            "before:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1),0px_3px_3px_0px_rgba(0,0,0,0.09),1px_8px_5px_0px_rgba(0,0,0,0.05),2px_21px_6px_0px_rgba(0,0,0,0),0px_0px_0px_1px_rgba(0,0,0,0.08),1px_13px_5px_0px_rgba(0,0,0,0.01),0px_-2px_2px_0px_rgba(0,0,0,0.13)_inset] before:ring-1 before:ring-border-secondary_alt",
+        ].join(" "),
+        sizes: {
+            sm: "size-8 rounded-[8px] before:rounded-[4px]",
+            md: "size-10 rounded-[10px] before:rounded-[6px]",
+            lg: "size-12 rounded-[12px] before:rounded-[8px]",
+            xl: "size-14 rounded-[14px] before:rounded-[10px]",
+        },
+        colors: {
+            brand: "",
+            gray: "text-fg-secondary ring-border-primary",
+            error: "",
+            warning: "",
+            success: "",
+        },
+    },
+
+    outline: {
+        base: "before:absolute before:rounded-full before:border-2 after:absolute after:rounded-full after:border-2",
+        sizes: {
+            sm: "size-4 before:size-6 after:size-8.5",
+            md: "size-5 before:size-7 after:size-9.5",
+            lg: "size-6 before:size-8 after:size-10.5",
+            xl: "size-7 before:size-9 after:size-11.5",
+        },
+        colors: {
+            brand: "text-fg-brand-primary before:border-fg-brand-primary/30 after:border-fg-brand-primary/10",
+            gray: "text-fg-tertiary before:border-fg-tertiary/30 after:border-fg-tertiary/10",
+            error: "text-fg-error-primary before:border-fg-error-primary/30 after:border-fg-error-primary/10",
+            warning: "text-fg-warning-primary before:border-fg-warning-primary/30 after:border-fg-warning-primary/10",
+            success: "text-fg-success-primary before:border-fg-success-primary/30 after:border-fg-success-primary/10",
+        },
+    },
+});
+
+interface FeaturedIconProps {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    className?: string;
+    icon?: FC<{ className?: string }> | ReactNode;
+    size?: "sm" | "md" | "lg" | "xl";
+    color: "brand" | "gray" | "success" | "warning" | "error";
+    theme?: "light" | "gradient" | "dark" | "outline" | "modern" | "modern-neue";
+}
+
+export const FeaturedIcon = (props: FeaturedIconProps) => {
+    const { size = "sm", theme: variant = "light", color = "brand", icon: Icon } = props;
+
+    return (
+        <div
+            {...props}
+            data-featured-icon
+            className={cx(
+                "relative flex shrink-0 items-center justify-center",
+
+                styles[variant].base,
+                styles[variant].sizes[size],
+                styles[variant].colors[color],
+
+                props.className,
+            )}
+        >
+            {isReactComponent(Icon) && <Icon className={cx("z-1", iconsSizes[size])} />}
+            {isValidElement(Icon) && <div className="z-1">{Icon}</div>}
+
+            {props.children}
+        </div>
+    );
+};

package/templates/default/src/components/foundations/logo/UntitledLogo.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import type { HTMLAttributes } from "react";
+import { cx } from "../../utils";
+import UntitledLogoMinimal from "./UntitledLogoMinimal";
+
+const UntitledLogo = (props: HTMLAttributes<HTMLOrSVGElement>) => {
+    return (
+        <svg width="139" height="32" viewBox="0 0 139 32" {...props} className={cx("overflow-visible", props.className)}>
+            <foreignObject width="100%" height="100%" x="0" y="0" className="overflow-visible">
+                <div className="flex items-center gap-2.5">
+                    {/* Minimal logo */}
+                    <UntitledLogoMinimal className="size-8" />
+
+                    {/* Logomark */}
+                    <svg width="97" height="32" viewBox="0 0 97 32" fill="none">
+                        <path
+                            d="M33.9101 10.2372C34.2321 10.5355 34.6179 10.6847 35.0678 10.6847C35.5176 10.6847 35.9011 10.5355 36.2183 10.2372C36.5403 9.9342 36.7013 9.57199 36.7013 9.15058C36.7013 8.73392 36.5403 8.37644 36.2183 8.07814C35.9011 7.77511 35.5176 7.6236 35.0678 7.6236C34.6179 7.6236 34.2321 7.77511 33.9101 8.07814C33.5928 8.37644 33.4342 8.73392 33.4342 9.15058C33.4342 9.57199 33.5928 9.9342 33.9101 10.2372Z"
+                            className="fill-fg-primary"
+                        />
+                        <path
+                            d="M11.2997 20.6847C11.8063 19.8892 12.0597 18.9612 12.0597 17.9006V8.45456H8.98438V17.6378C8.98438 18.1918 8.86127 18.6842 8.61506 19.1151C8.37358 19.5459 8.0303 19.8845 7.58523 20.1307C7.14489 20.3769 6.62642 20.5 6.02983 20.5C5.43797 20.5 4.91951 20.3769 4.47443 20.1307C4.02936 19.8845 3.68371 19.5459 3.4375 19.1151C3.19602 18.6842 3.07528 18.1918 3.07528 17.6378V8.45456H0V17.9006C0 18.9612 0.250947 19.8892 0.752841 20.6847C1.25473 21.4801 1.95786 22.1004 2.86222 22.5455C3.76657 22.9858 4.82244 23.206 6.02983 23.206C7.23248 23.206 8.28599 22.9858 9.19034 22.5455C10.0947 22.1004 10.7978 21.4801 11.2997 20.6847Z"
+                            className="fill-fg-primary"
+                        />
+                        <path
+                            d="M18.3589 12.51C17.7907 12.8793 17.3859 13.3812 17.1444 14.0156H17.0165V12.0909H14.133V23H17.1586V16.6932C17.1633 16.2244 17.2509 15.8244 17.4214 15.4929C17.5966 15.1567 17.838 14.9011 18.1458 14.7259C18.4583 14.5507 18.8182 14.4631 19.2254 14.4631C19.8314 14.4631 20.3073 14.6525 20.6529 15.0313C20.9986 15.4053 21.169 15.9262 21.1643 16.5938V23H24.1898V16.054C24.1898 15.2065 24.0336 14.4773 23.7211 13.8665C23.4086 13.251 22.9706 12.7775 22.4072 12.446C21.8437 12.1146 21.1832 11.9489 20.4256 11.9489C19.616 11.9489 18.9271 12.1359 18.3589 12.51Z"
+                            className="fill-fg-primary"
+                        />
+                        <path
+                            d="M27.3463 21.821C27.0433 21.3523 26.8941 20.7604 26.8989 20.0455V14.3637H25.4074V12.0909H26.8989V9.47729H29.9244V12.0909H31.977V14.3637H29.9244V19.6477C29.9244 19.9271 29.967 20.1449 30.0523 20.3012C30.1375 20.4527 30.2559 20.5592 30.4074 20.6208C30.5636 20.6823 30.7436 20.7131 30.9472 20.7131C31.0892 20.7131 31.2313 20.7012 31.3733 20.6776C31.5153 20.6492 31.6242 20.6279 31.7 20.6137L32.1759 22.8651C32.0243 22.9124 31.8113 22.9669 31.5366 23.0284C31.262 23.0947 30.9282 23.135 30.5352 23.1492C29.8061 23.1776 29.1669 23.0805 28.6176 22.858C28.0731 22.6354 27.6493 22.2898 27.3463 21.821Z"
+                            className="fill-fg-primary"
+                        />
+                        <path
+                            d="M39.769 21.821C39.4659 21.3523 39.3168 20.7604 39.3215 20.0455V14.3637H37.83V12.0909H39.3215V9.47729H42.3471V12.0909H44.3996V14.3637H42.3471V19.6477C42.3471 19.9271 42.3897 20.1449 42.4749 20.3012C42.5602 20.4527 42.6785 20.5592 42.83 20.6208C42.9863 20.6823 43.1662 20.7131 43.3698 20.7131C43.5119 20.7131 43.6539 20.7012 43.796 20.6776C43.938 20.6492 44.0469 20.6279 44.1227 20.6137L44.5985 22.8651C44.447 22.9124 44.2339 22.9669 43.9593 23.0284C43.6847 23.0947 43.3509 23.135 42.9579 23.1492C42.2287 23.1776 41.5895 23.0805 41.0403 22.858C40.4958 22.6354 40.072 22.2898 39.769 21.821Z"
+                            className="fill-fg-primary"
+                        />
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M56.2257 23.2131C55.1035 23.2131 54.1376 22.9858 53.328 22.5313C52.5231 22.072 51.9028 21.4233 51.4672 20.5852C51.0316 19.7424 50.8138 18.7458 50.8138 17.5952C50.8138 16.473 51.0316 15.4882 51.4672 14.6406C51.9028 13.7931 52.516 13.1326 53.3067 12.6591C54.1021 12.1856 55.0349 11.9489 56.105 11.9489C56.8247 11.9489 57.4946 12.0649 58.1149 12.2969C58.7399 12.5242 59.2844 12.8674 59.7484 13.3267C60.2172 13.786 60.5818 14.3637 60.8422 15.0597C61.1026 15.751 61.2328 16.5606 61.2328 17.4887V18.3196H53.8038V18.3267C53.8038 18.8665 53.9033 19.3329 54.1021 19.7259C54.3057 20.1189 54.5922 20.4219 54.9615 20.635C55.3308 20.848 55.7688 20.9546 56.2754 20.9546C56.6116 20.9546 56.9194 20.9072 57.1987 20.8125C57.4781 20.7178 57.7172 20.5758 57.916 20.3864C58.1149 20.197 58.2664 19.965 58.3706 19.6904L61.1689 19.875C61.0268 20.5474 60.7357 21.1345 60.2953 21.6364C59.8597 22.1335 59.2963 22.5218 58.605 22.8012C57.9184 23.0758 57.1253 23.2131 56.2257 23.2131ZM54.1092 15.3722C53.9258 15.6954 53.8249 16.0529 53.8067 16.4446H58.3848C58.3848 16.009 58.2901 15.6231 58.1007 15.2869C57.9113 14.9508 57.6485 14.688 57.3124 14.4986C56.9809 14.3045 56.595 14.2074 56.1547 14.2074C55.6954 14.2074 55.2882 14.3139 54.9331 14.527C54.5827 14.7353 54.3081 15.0171 54.1092 15.3722Z"
+                            className="fill-fg-primary"
+                        />
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M64.5757 22.5384C65.2481 22.9645 65.9985 23.1776 66.8271 23.1776C67.4143 23.1776 67.9114 23.0805 68.3186 22.8864C68.7305 22.6923 69.0643 22.4484 69.32 22.1548C69.5804 21.8566 69.7817 21.5559 69.9237 21.2529H70.0516V23H73.0345V8.45456H70.0161V13.9233H69.9237C69.7911 13.6298 69.597 13.3315 69.3413 13.0284C69.0904 12.7207 68.7589 12.465 68.347 12.2614C67.9398 12.053 67.4308 11.9489 66.82 11.9489C66.0198 11.9489 65.2836 12.1572 64.6112 12.5739C63.9436 12.9858 63.4086 13.6084 63.0061 14.4418C62.6036 15.2704 62.4024 16.3097 62.4024 17.5597C62.4024 18.7765 62.5965 19.804 62.9848 20.6421C63.3778 21.4754 63.9081 22.1075 64.5757 22.5384ZM69.0217 20.3722C68.6856 20.6373 68.2736 20.7699 67.7859 20.7699C67.2888 20.7699 66.8698 20.635 66.5288 20.3651C66.1927 20.0905 65.9346 19.7117 65.7547 19.2287C65.5795 18.741 65.4919 18.1799 65.4919 17.5455C65.4919 16.9157 65.5795 16.3618 65.7547 15.8835C65.9299 15.4053 66.1879 15.0313 66.5288 14.7614C66.8698 14.4915 67.2888 14.3566 67.7859 14.3566C68.2736 14.3566 68.6879 14.4868 69.0288 14.7472C69.3698 15.0076 69.6302 15.3769 69.8101 15.8551C69.99 16.3334 70.08 16.8968 70.08 17.5455C70.08 18.1941 69.9876 18.76 69.803 19.2429C69.6231 19.7259 69.3626 20.1023 69.0217 20.3722Z"
+                            className="fill-fg-primary"
+                        />
+                        <path
+                            d="M88.0229 19.1151C88.2691 18.6842 88.3922 18.1918 88.3922 17.6378V8.45456H91.4675V17.9006C91.4675 18.9612 91.2142 19.8892 90.7075 20.6847C90.2056 21.4801 89.5025 22.1004 88.5982 22.5455C87.6938 22.9858 86.6403 23.206 85.4376 23.206C84.2303 23.206 83.1744 22.9858 82.27 22.5455C81.3657 22.1004 80.6625 21.4801 80.1607 20.6847C79.6588 19.8892 79.4078 18.9612 79.4078 17.9006V8.45456H82.4831V17.6378C82.4831 18.1918 82.6038 18.6842 82.8453 19.1151C83.0915 19.5459 83.4372 19.8845 83.8822 20.1307C84.3273 20.3769 84.8458 20.5 85.4376 20.5C86.0342 20.5 86.5527 20.3769 86.993 20.1307C87.4381 19.8845 87.7814 19.5459 88.0229 19.1151Z"
+                            className="fill-fg-primary"
+                        />
+                        <path d="M33.5479 12.0909V23H36.5734V12.0909H33.5479Z" className="fill-fg-primary" />
+                        <path d="M49.2305 23V8.45456H46.2049V23H49.2305Z" className="fill-fg-primary" />
+                        <path d="M96.6729 23V8.45456H93.5977V23H96.6729Z" className="fill-fg-primary" />
+                    </svg>
+                </div>
+            </foreignObject>
+        </svg>
+    );
+};
+
+export default UntitledLogo;