retail-design-system 1.0.0

package/apps/web/app/(sidebar)/experiments/2025-10-22/page.tsx

@@ -0,0 +1,167 @@
+import { Dialog as BaseDialog } from "@base-ui/react"
+import { IconCrossLarge, IconSquareArrowTopRight } from "@pump-fun/icons-line"
+import { Button } from "@pump-fun/retail-design-system"
+import { MayhemModeCardBadge } from "@/app/(sidebar)/experiments/2025-10-22/mayhem-mode-card-badge"
+import { MayhemModeCoinActiveBadge } from "@/app/(sidebar)/experiments/2025-10-22/mayhem-mode-coin-active-badge"
+import { MayhemModeCoinInactiveBadge } from "@/app/(sidebar)/experiments/2025-10-22/mayhem-mode-coin-inactive-badge"
+import { MayhemModeCreateCoin } from "@/app/(sidebar)/experiments/2025-10-22/mayhem-mode-create-coin"
+import { MayhemModeDialogIcon } from "@/app/(sidebar)/experiments/2025-10-22/mayhem-mode-dialog-icon"
+import { Dialog } from "@/components/dialog"
+
+export default function Page() {
+  return (
+    <div className="flex flex-col gap-y-16">
+      <p>Dialogs</p>
+      <MayhemModeIntroDialog />
+      <MayhemModeDialog isActive isEnabled />
+      <MayhemModeDialog isActive={false} isEnabled />
+      <MayhemModeDialog isActive={false} isEnabled={false} />
+      <div className="h-16 shrink-0" />
+      <p>Badges</p>
+      <MayhemModeCardBadge />
+      <MayhemModeCoinActiveBadge />
+      <MayhemModeCoinInactiveBadge />
+      <div className="h-16 shrink-0" />
+      <p>Components</p>
+      <div className="max-w-448">
+        <MayhemModeCreateCoin />
+      </div>
+    </div>
+  )
+}
+
+// oxlint-disable eslint-plugin-react(no-multi-comp)
+function MayhemModeDialog(props: { isActive: boolean; isEnabled: boolean }) {
+  const { isActive, isEnabled } = props
+
+  return (
+    <BaseDialog.Root>
+      <BaseDialog.Trigger
+        render={<Button>{isEnabled ? (isActive ? "Active" : "Inactive") : "Off"} dialog</Button>}
+      />
+      <Dialog className="max-w-448!">
+        {/* Close button */}
+        <BaseDialog.Close
+          render={
+            <Button className="absolute! top-8 right-8" isIconOnly variant="ghost">
+              <IconCrossLarge size={16} />
+            </Button>
+          }
+        />
+
+        {/* Title */}
+        <BaseDialog.Title className="font-600 text-18">What is Mayhem mode?</BaseDialog.Title>
+        <div className="h-16 shrink-0" />
+
+        {/* Detail */}
+        <div className="rounded-12 bg-bg-tertiary flex items-center gap-x-12 p-12">
+          <div className="shrink-0">
+            <MayhemModeDialogIcon />
+          </div>
+          <div className="flex w-full flex-col gap-y-2">
+            <div className="flex justify-between">
+              <p className="font-600 text-14 text-text-primary">Mayhem mode</p>
+              {isEnabled && (
+                <p
+                  className="font-600 text-14 data-[is-active=false]:text-text-error data-[is-active=true]:text-text-success tabular-nums"
+                  data-is-active={isActive}
+                >
+                  {isActive ? "68:45:32" : "Inactive"}
+                </p>
+              )}
+            </div>
+            <div className="flex w-full justify-between">
+              <p className="text-12 text-text-tertiary">Temporary increased volatility.</p>
+              {isEnabled && <p className="text-12 text-text-tertiary">Time remaining</p>}
+            </div>
+          </div>
+        </div>
+        <div className="h-16 shrink-0" />
+
+        {/* Description */}
+        <div className="flex flex-col gap-y-16">
+          {isEnabled && (
+            <p className="text-14 text-text-primary">
+              This coin has mayhem mode enabled and is{" "}
+              <span
+                className="data-[is-active=false]:text-text-error data-[is-active=true]:text-text-success"
+                data-is-active={isActive}
+              >
+                {isActive ? "active" : "inactive"}
+              </span>
+              .
+            </p>
+          )}
+          <p className="text-14 text-text-muted">
+            Mayhem mode adds life to coins with increased volatility through random transactions.
+          </p>
+          <p className="text-14 text-text-muted">
+            Coins with mayhem mode enabled may have mayhem mode activated at any time, for a
+            duration of 72 hours.
+          </p>
+          <p className="text-14 text-text-muted">
+            Mayhem mode can only be enabled during coin creation.
+          </p>
+          {isEnabled && <p className="text-14 text-text-muted">Previously active: 5d ago.</p>}
+          {/* oxlint-disable-next-line oxceslint-plugin-jsx-a11y(anchor-is-valid): Demo purposes */}
+          <a
+            className="text-14 text-text-accent flex w-fit items-center gap-x-4 hover:underline"
+            href="#"
+          >
+            Read more <IconSquareArrowTopRight size={14} />
+          </a>
+        </div>
+        <div className="h-16 shrink-0" />
+
+        {/* Button group */}
+        <div className="flex items-center justify-between">
+          <BaseDialog.Close render={<Button variant="secondary">Done</Button>} />
+          <BaseDialog.Close render={<Button>{isEnabled ? "Trade Pnut" : "Try it now"}</Button>} />
+        </div>
+      </Dialog>
+    </BaseDialog.Root>
+  )
+}
+
+function MayhemModeIntroDialog() {
+  return (
+    <BaseDialog.Root>
+      <BaseDialog.Trigger render={<Button>Intro dialog</Button>} />
+      <Dialog className="bg-bg-secondary!">
+        {/* Banner */}
+        <div className="aspect-16-9 rounded-8 border-border-secondary bg-bg-primary w-full overflow-hidden border select-none">
+          <img
+            alt="Mayhem mode banner"
+            className="h-full w-full object-cover"
+            draggable={false}
+            src="/2025-10-22-dialog-banner.png"
+          />
+        </div>
+        <div className="h-24 shrink-0" />
+
+        {/* Title with badge */}
+        <div className="flex items-center justify-center">
+          <div className="rounded-6 bg-bg-accent font-600 text-12 text-text-on-accent mr-8 inline-flex h-20 items-center justify-center px-8">
+            New
+          </div>
+          <BaseDialog.Title className="font-600 text-20 items-center">
+            <span className="text-text-accent">Mayhem</span> 🔥 - fresh coins lighting up the chart
+          </BaseDialog.Title>
+        </div>
+        <div className="h-16 shrink-0" />
+
+        {/* Description */}
+        <BaseDialog.Description className="text-14 text-text-muted text-center">
+          Increased volatility for 72 hour periods with random transactions.
+        </BaseDialog.Description>
+        <div className="h-24 shrink-0" />
+
+        {/* Button group */}
+        <div className="flex items-center justify-between">
+          <BaseDialog.Close render={<Button variant="secondary">Skip</Button>} />
+          <BaseDialog.Close render={<Button>View Mayhem coins</Button>} />
+        </div>
+      </Dialog>
+    </BaseDialog.Root>
+  )
+}

package/apps/web/app/(sidebar)/experiments/2025-11-04/filters.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import { Button, Spacer } from "@pump-fun/retail-design-system"
+import { parseAsStringLiteral, useQueryState } from "nuqs"
+
+interface Filter {
+  label: FilterLabel
+  value: FilterValue
+}
+
+type FilterLabel = (typeof FILTER)[keyof typeof FILTER]["LABEL"]
+type FilterValue = (typeof FILTER)[keyof typeof FILTER]["VALUE"]
+
+export function Filters() {
+  const [sort, setSort] = useQueryState(
+    "sort",
+    parseAsStringLiteral([
+      FILTER.FEATURED.VALUE,
+      FILTER.LATEST.VALUE,
+      FILTER.MARKET_CAP.VALUE,
+      FILTER.MOVERS.VALUE,
+    ]).withDefault(FILTER.FEATURED.VALUE),
+  )
+
+  function onClick(value: FilterValue) {
+    setSort(value)
+  }
+
+  return (
+    <>
+      <div className="border-border-secondary flex max-w-384 scroll-px-64 flex-col overflow-x-scroll border py-64">
+        <div className="flex gap-x-8">
+          {filters.map((filter) => (
+            <Button
+              key={filter.value}
+              onClick={() => onClick(filter.value)}
+              variant={filter.value === sort ? "primary" : "secondary"}
+            >
+              {filter.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <Spacer className="h-8" />
+
+      <p className="text-14">
+        sort: <span className="bg-amber-950 font-mono">{sort}</span>
+      </p>
+    </>
+  )
+}
+
+const FILTER = {
+  FEATURED: {
+    LABEL: "🌟 Featured",
+    VALUE: "featured",
+  },
+  LATEST: {
+    LABEL: "🌱 Recently created",
+    VALUE: "latest",
+  },
+  MARKET_CAP: {
+    LABEL: "💰 Most valuable",
+    VALUE: "market_cap",
+  },
+  MOVERS: {
+    LABEL: "📈 Movers",
+    VALUE: "movers",
+  },
+} as const
+
+const filters: Filter[] = [
+  {
+    label: FILTER.FEATURED.LABEL,
+    value: FILTER.FEATURED.VALUE,
+  },
+  {
+    label: FILTER.MOVERS.LABEL,
+    value: FILTER.MOVERS.VALUE,
+  },
+  {
+    label: FILTER.MARKET_CAP.LABEL,
+    value: FILTER.MARKET_CAP.VALUE,
+  },
+  {
+    label: FILTER.LATEST.LABEL,
+    value: FILTER.LATEST.VALUE,
+  },
+]

package/apps/web/app/(sidebar)/experiments/2025-11-04/page.tsx

@@ -0,0 +1,18 @@
+import { Spacer } from "@pump-fun/retail-design-system"
+import { Suspense } from "react"
+import { Filters } from "@/app/(sidebar)/experiments/2025-11-04/filters"
+
+export default function Page() {
+  return (
+    <div>
+      <h1 className="font-500 text-24">2025/11/04</h1>
+      <Spacer className="h-16" />
+      <p>Try scrolling on the filters</p>
+      <Spacer className="h-8" />
+
+      <Suspense>
+        <Filters />
+      </Suspense>
+    </div>
+  )
+}

package/apps/web/app/(sidebar)/layout.tsx

@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from "react"
+import { SidebarServer } from "@/components/sidebar-server"
+
+export default function SidebarLayout(props: PropsWithChildren) {
+  const { children } = props
+
+  return (
+    <div className="flex size-full">
+      <SidebarServer />
+      <main className="w-full min-w-0">
+        <div className="relative mx-auto flex w-full max-w-768 flex-col px-16 py-80">
+          {children}
+        </div>
+      </main>
+    </div>
+  )
+}

package/apps/web/app/(sidebar)/primitives/colors/page.tsx

@@ -0,0 +1,49 @@
+// oxlint-disable react/no-multi-comp
+
+import { composite, primitive } from "@pump-fun/retail-design-system"
+
+export default function ColorsPage() {
+  return (
+    <>
+      <h1 className="font-400 text-24">Colors</h1>
+      <div className="h-16 shrink-0" />
+
+      <h2 className="font-400 text-20">Primitives</h2>
+      <div className="h-16 shrink-0" />
+
+      <div className="flex flex-wrap gap-32">
+        {Object.entries(primitive).map(([name, color]) => (
+          <Badge hex={color.hex} key={name} name={color.name} />
+        ))}
+      </div>
+      <div className="h-32 shrink-0" />
+
+      <h2 className="font-400 text-20">Semantics</h2>
+      <div className="h-16 shrink-0" />
+
+      <div className="flex flex-wrap gap-32">
+        {Object.entries(composite).map(([name, color]) => (
+          <Badge hex={color.color.hex} key={name} name={color.name} variable={color.color.name} />
+        ))}
+      </div>
+    </>
+  )
+}
+
+function Badge(props: { hex: string; name: string; variable?: string }) {
+  const { hex = "", name = "", variable = "" } = props
+
+  return (
+    <div className="flex items-center gap-x-8">
+      <div
+        className="rounded-8 border-border-primary size-32 border"
+        style={{ backgroundColor: hex }}
+      />
+
+      <div className="flex flex-col">
+        <p className="text-14 text-text-primary">{name}</p>
+        <p className="text-14 text-text-tertiary font-mono">{variable || hex}</p>
+      </div>
+    </div>
+  )
+}

package/apps/web/app/layout.tsx

@@ -0,0 +1,39 @@
+import { Column } from "@pump-fun/retail-design-system"
+import type { Metadata } from "next"
+import { Inter as sans, JetBrains_Mono as mono } from "next/font/google"
+import type { PropsWithChildren } from "react"
+import { Providers } from "@/app/providers"
+import "@/styles/global.css"
+import { Topbar } from "@/components/topbar"
+
+const fontMono = mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+})
+
+const fontSans = sans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+})
+
+export default function Layout(props: PropsWithChildren) {
+  const { children } = props
+
+  return (
+    <html lang="en">
+      <body className={`${fontMono.variable} ${fontSans.variable}`}>
+        <Providers>
+          <Column className="size-full">
+            <Topbar />
+            {children}
+          </Column>
+        </Providers>
+      </body>
+    </html>
+  )
+}
+
+export const metadata: Metadata = {
+  description: "React Components",
+  title: "React Components",
+}

package/apps/web/app/page.tsx

@@ -0,0 +1,14 @@
+import { ButtonLink, Column, Spacer } from "@pump-fun/retail-design-system"
+import Link from "next/link"
+
+export default function Page() {
+  return (
+    <Column className="px-24">
+      <p>Welcome to Retail React Components</p>
+      <Spacer height={16} />
+      <ButtonLink as={Link} href="/components/button">
+        Go to components
+      </ButtonLink>
+    </Column>
+  )
+}

package/apps/web/app/providers.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import { NuqsAdapter } from "nuqs/adapters/next/app"
+import type { PropsWithChildren } from "react"
+import { TooltipProvider } from "@/components/tooltip"
+
+export function Providers(props: PropsWithChildren) {
+  const { children } = props
+
+  return (
+    <NuqsAdapter>
+      <TooltipProvider>{children}</TooltipProvider>
+    </NuqsAdapter>
+  )
+}

package/apps/web/components/dialog.tsx

@@ -0,0 +1,21 @@
+import { Dialog as BaseDialog } from "@base-ui/react"
+import type { PropsWithChildren } from "react"
+
+interface DialogProps extends PropsWithChildren {
+  className?: string
+}
+
+export function Dialog(props: DialogProps) {
+  const { children = "", className = "" } = props
+
+  return (
+    <BaseDialog.Portal>
+      <BaseDialog.Backdrop className="backdrop-blur-4 fixed inset-0 z-30 min-h-dvh bg-[rgba(0,0,0,0.5)] transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
+      <BaseDialog.Popup
+        className={`rounded-10 border-border-secondary bg-bg-primary outline-bg-accent fixed top-1/2 left-1/2 z-30 flex w-full max-w-672 -translate-x-1/2 -translate-y-1/2 flex-col border p-24 outline-offset-2 transition-all duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0 ${className}`}
+      >
+        {children}
+      </BaseDialog.Popup>
+    </BaseDialog.Portal>
+  )
+}

package/apps/web/components/logo.tsx

@@ -0,0 +1,11 @@
+import { Logomark } from "@/components/logomark"
+import { Logotype } from "@/components/logotype"
+
+export function Logo() {
+  return (
+    <div className="flex shrink-0 items-center gap-x-8">
+      <Logomark className="text-text-accent" />
+      <Logotype className="text-text-primary" />
+    </div>
+  )
+}

package/apps/web/components/logomark.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react"
+
+interface LogomarkProps extends ComponentProps<"svg"> {}
+
+export function Logomark(props: LogomarkProps) {
+  const { ...rest } = props
+
+  return (
+    <svg
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M11.9995 21.9412C9.25446 24.6863 4.80385 24.6863 2.05879 21.9412C-0.686264 19.1962 -0.686264 14.7455 2.05879 12.0005L7.03012 7.02915L16.9708 16.9699L11.9995 21.9412Z" />
+      <path d="M12.0005 2.05879C14.7455 -0.686264 19.1962 -0.686264 21.9412 2.05879C24.6863 4.80385 24.6863 9.25446 21.9412 11.9995L16.9708 16.9699L14.9827 14.9817L19.9531 10.0114C21.6001 8.36434 21.6001 5.69397 19.9531 4.04694C18.306 2.3999 15.6357 2.3999 13.9886 4.04694L9.01827 9.0173L7.03012 7.02915L12.0005 2.05879Z" />
+    </svg>
+  )
+}

package/apps/web/components/logotype.tsx

@@ -0,0 +1,25 @@
+import type { ComponentProps } from "react"
+
+interface LogotypeProps extends ComponentProps<"svg"> {}
+
+export function Logotype(props: LogotypeProps) {
+  const { ...rest } = props
+
+  return (
+    <svg
+      fill="currentColor"
+      height="16"
+      viewBox="0 0 57 16"
+      width="57"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M0 16V3.75975H1.90372V4.8725H2.02271C2.17002 4.63646 2.36832 4.41166 2.61762 4.1981C2.87825 3.98455 3.1842 3.81595 3.53549 3.69231C3.88677 3.55743 4.27771 3.48999 4.70831 3.48999C5.50153 3.48999 6.20976 3.68669 6.83301 4.08008C7.46758 4.46224 7.96617 4.99614 8.32879 5.68177C8.70273 6.3674 8.88971 7.15982 8.88971 8.05901C8.88971 8.9582 8.70273 9.75061 8.32879 10.4362C7.96617 11.1219 7.46758 11.6614 6.83301 12.0548C6.20976 12.437 5.50153 12.628 4.70831 12.628C4.07374 12.628 3.52415 12.4932 3.05955 12.2234C2.59496 11.9424 2.24934 11.6221 2.02271 11.2624H1.90372L2.02271 12.4763V16H0ZM4.38536 10.7734C4.8273 10.7734 5.23524 10.6667 5.60918 10.4531C5.98313 10.2283 6.28342 9.91359 6.51005 9.50896C6.74802 9.09308 6.867 8.60976 6.867 8.05901C6.867 7.49701 6.74802 7.01932 6.51005 6.62592C6.28342 6.22129 5.98313 5.91219 5.60918 5.69863C5.23524 5.47383 4.8273 5.36143 4.38536 5.36143C3.95476 5.36143 3.54682 5.47383 3.16154 5.69863C2.78759 5.91219 2.48164 6.22129 2.24367 6.62592C2.01704 7.03056 1.90372 7.50825 1.90372 8.05901C1.90372 8.60976 2.01704 9.08746 2.24367 9.4921C2.48164 9.89673 2.78759 10.2115 3.16154 10.4362C3.54682 10.661 3.95476 10.7734 4.38536 10.7734Z" />
+      <path d="M13.3446 12.628C12.2795 12.628 11.4806 12.3077 10.948 11.667C10.4154 11.0263 10.1491 10.1496 10.1491 9.03688V3.75975H12.1718V8.78398C12.1718 9.4359 12.3305 9.93045 12.6478 10.2677C12.965 10.6048 13.3673 10.7734 13.8546 10.7734C14.3078 10.7734 14.6988 10.661 15.0274 10.4362C15.356 10.2002 15.6053 9.89111 15.7753 9.50896C15.9453 9.1268 16.0303 8.71092 16.0303 8.26133V3.75975H18.07V12.3583H16.1492V11.2287H16.0303C15.8716 11.4984 15.6506 11.7401 15.3674 11.9536C15.0954 12.1672 14.7894 12.3302 14.4495 12.4426C14.1095 12.5662 13.7413 12.628 13.3446 12.628Z" />
+      <path d="M19.8532 12.3583V3.75975H21.757V4.88936H21.8759C22.0573 4.6196 22.2782 4.37794 22.5388 4.16438C22.7995 3.95083 23.0998 3.78785 23.4397 3.67545C23.7797 3.55181 24.1423 3.48999 24.5276 3.48999C25.1621 3.48999 25.7061 3.64173 26.1593 3.94521C26.6126 4.23744 26.9355 4.60274 27.1282 5.0411C27.3888 4.61398 27.7628 4.24868 28.25 3.94521C28.7373 3.64173 29.3379 3.48999 30.0518 3.48999C31.0603 3.48999 31.8138 3.79909 32.3124 4.41728C32.811 5.02424 33.0603 5.82789 33.0603 6.82824V12.3583H31.0546V7.1823C31.0546 6.5641 30.913 6.10889 30.6297 5.81665C30.3464 5.51317 29.9611 5.36143 29.4738 5.36143C29.0772 5.36143 28.7259 5.47383 28.42 5.69863C28.1254 5.91219 27.8931 6.21005 27.7231 6.5922C27.5645 6.96312 27.4851 7.39586 27.4851 7.89041V12.3583H25.4454V7.19916C25.4454 6.56972 25.3038 6.10889 25.0205 5.81665C24.7372 5.51317 24.3349 5.36143 23.8137 5.36143C23.4284 5.36143 23.0884 5.47383 22.7938 5.69863C22.4992 5.91219 22.2726 6.21005 22.1139 6.5922C21.9553 6.97436 21.8759 7.41271 21.8759 7.90727V12.3583H19.8532Z" />
+      <path d="M34.8011 16V3.75975H36.7048V4.8725H36.8238C36.9711 4.63646 37.1694 4.41166 37.4187 4.1981C37.6793 3.98455 37.9853 3.81595 38.3366 3.69231C38.6879 3.55743 39.0788 3.48999 39.5094 3.48999C40.3026 3.48999 41.0109 3.68669 41.6341 4.08008C42.2687 4.46224 42.7673 4.99614 43.1299 5.68177C43.5038 6.3674 43.6908 7.15982 43.6908 8.05901C43.6908 8.9582 43.5038 9.75061 43.1299 10.4362C42.7673 11.1219 42.2687 11.6614 41.6341 12.0548C41.0109 12.437 40.3026 12.628 39.5094 12.628C38.8748 12.628 38.3253 12.4932 37.8607 12.2234C37.3961 11.9424 37.0504 11.6221 36.8238 11.2624H36.7048L36.8238 12.4763V16H34.8011ZM39.1865 10.7734C39.6284 10.7734 40.0363 10.6667 40.4103 10.4531C40.7842 10.2283 41.0845 9.91359 41.3112 9.50896C41.5491 9.09308 41.6681 8.60976 41.6681 8.05901C41.6681 7.49701 41.5491 7.01932 41.3112 6.62592C41.0845 6.22129 40.7842 5.91219 40.4103 5.69863C40.0363 5.47383 39.6284 5.36143 39.1865 5.36143C38.7559 5.36143 38.3479 5.47383 37.9626 5.69863C37.5887 5.91219 37.2827 6.22129 37.0448 6.62592C36.8181 7.03056 36.7048 7.50825 36.7048 8.05901C36.7048 8.60976 36.8181 9.08746 37.0448 9.4921C37.2827 9.89673 37.5887 10.2115 37.9626 10.4362C38.3479 10.661 38.7559 10.7734 39.1865 10.7734Z" />
+      <path d="M48.1457 12.628C47.0806 12.628 46.2817 12.3077 45.7491 11.667C45.2165 11.0263 44.9502 10.1496 44.9502 9.03688V3.75975H46.9729V8.78398C46.9729 9.4359 47.1316 9.93045 47.4489 10.2677C47.7661 10.6048 48.1684 10.7734 48.6557 10.7734C49.1089 10.7734 49.4999 10.661 49.8285 10.4362C50.1571 10.2002 50.4064 9.89111 50.5764 9.50896C50.7464 9.1268 50.8314 8.71092 50.8314 8.26133V3.75975H52.8711V12.3583H50.9503V11.2287H50.8314C50.6727 11.4984 50.4517 11.7401 50.1685 11.9536C49.8965 12.1672 49.5905 12.3302 49.2506 12.4426C48.9106 12.5662 48.5424 12.628 48.1457 12.628Z" />
+      <path d="M54.6543 12.3583V3.75975H56.677V12.3583H54.6543ZM55.6742 2.647C55.3002 2.647 54.983 2.51774 54.7223 2.25922C54.4617 2.0007 54.3314 1.68599 54.3314 1.31507C54.3314 0.955392 54.4617 0.646294 54.7223 0.387777C54.983 0.129259 55.3002 0 55.6742 0C56.0368 0 56.3484 0.129259 56.6091 0.387777C56.8697 0.646294 57 0.955392 57 1.31507C57 1.68599 56.8697 2.0007 56.6091 2.25922C56.3484 2.51774 56.0368 2.647 55.6742 2.647Z" />
+    </svg>
+  )
+}