@speakeasy-api/moonshine 1.33.4 → 2.0.0-alpha.2

package/src/components/LoggedInUserMenu/index.tsx

@@ -0,0 +1,116 @@
+import { Icon } from '../Icon'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../Dropdown'
+import { Stack } from '../Stack'
+import { UserAvatar } from '../UserAvatar'
+import { UserAvatarProps } from '../UserAvatar'
+import React, { Children, Fragment, ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+
+export interface LoggedInUserProps extends UserAvatarProps {
+  email: string
+  children?: ReactNode | ReactNode[]
+  onSignOut: () => void
+}
+
+const Root: React.FC<LoggedInUserProps> = ({
+  email,
+  name,
+  onSignOut,
+  imageUrl,
+  size = 'small',
+  children,
+}) => {
+  const validChildren = Children.toArray(children).filter(
+    (child) =>
+      React.isValidElement(child) &&
+      (child.type === MenuItem || child.type === Seperator)
+  )
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className="cursor-pointer outline-none"
+        aria-label="open menu"
+      >
+        <UserAvatar name={name} imageUrl={imageUrl} size={size} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="mt-2 max-w-64 p-0">
+        <LoggedInMenuContent name={name} email={email} onSignOut={onSignOut}>
+          {validChildren}
+        </LoggedInMenuContent>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+Root.displayName = 'LoggedInUserMenu'
+
+interface LoggedInMenuContentProps extends Omit<LoggedInUserProps, 'imageUrl'> {
+  email: string
+  children?: ReactNode | ReactNode[]
+  onSignOut: () => void
+}
+
+const LoggedInMenuContent: React.FC<LoggedInMenuContentProps> = ({
+  email,
+  name,
+  children,
+  onSignOut,
+}) => {
+  return (
+    <>
+      <Stack padding={3}>
+        <div className="truncate text-sm font-semibold">{name}</div>
+        <div className="text-body truncate text-sm" title={email}>
+          {email}
+        </div>
+      </Stack>
+      <Seperator />
+      {Children.map(children, (child, index) => (
+        <Fragment key={index}>{child}</Fragment>
+      ))}
+      <MenuItem onSelect={onSignOut}>
+        <Icon name="log-out" />
+        Logout
+      </MenuItem>
+    </>
+  )
+}
+
+interface LoggedInMenuItemProps {
+  onSelect: () => void
+  children?: ReactNode | ReactNode[]
+  className?: string
+}
+
+const MenuItem: React.FC<LoggedInMenuItemProps> = ({
+  onSelect,
+  children,
+  className,
+}) => {
+  return (
+    <DropdownMenuItem
+      onSelect={onSelect}
+      className={cn('cursor-pointer p-3', className)}
+    >
+      {children}
+    </DropdownMenuItem>
+  )
+}
+MenuItem.displayName = 'LoggedInUserMenu.MenuItem'
+
+const Seperator: React.FC = () => {
+  return (
+    <DropdownMenuSeparator data-component="separator" className="peer my-0" />
+  )
+}
+
+export const LoggedInUserMenu = Object.assign(Root, {
+  MenuItem,
+  Seperator,
+})

package/src/components/Logo/Animated.tsx

@@ -0,0 +1,191 @@
+import { useTheme } from '../../hooks/useTheme'
+import { cn } from '../../lib/utils'
+import {
+  Fit,
+  Layout,
+  useRive,
+  useViewModelInstanceBoolean,
+} from '@rive-app/react-canvas-lite'
+import { cva } from 'class-variance-authority'
+import { FC, useEffect, useState } from 'react'
+import riveFileUrl from './speakeasy-logo.riv'
+
+const stackLogoClass = cva('relative', {
+  variants: {
+    size: {
+      xl: 'size-20',
+      lg: 'size-16',
+      md: 'size-8',
+      sm: 'size-6',
+    },
+  },
+})
+
+type Size = 'sm' | 'md' | 'lg' | 'xl'
+
+type StateMachine = 'loop-dark' | 'loop-light'
+
+const lettersLogoClass = cva('hidden mt-px md:block', {
+  variants: {
+    size: {
+      xl: 'ml-4 w-[22rem] h-auto',
+      lg: 'ml-3 w-[19.75rem] h-auto',
+      md: 'ml-2 w-[9.75rem] h-auto',
+      sm: 'ml-2 w-[8.75rem] h-auto',
+    },
+  },
+})
+
+export const AnimatedLogo = ({
+  className,
+  size = 'md',
+  variant = 'icon',
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}: {
+  className?: string
+  size?: Size
+  variant?: 'icon' | 'icon-with-wordmark'
+} & React.HTMLAttributes<HTMLDivElement>) => {
+  const [riveLoaded, setRiveLoaded] = useState(false)
+  const theme = useTheme()
+  const [stateMachine, setStateMachine] = useState<StateMachine>('loop-dark')
+  const { rive, RiveComponent } = useRive({
+    src: riveFileUrl,
+    stateMachines: stateMachine,
+    autoplay: true,
+    layout: new Layout({
+      fit: Fit.Contain,
+    }),
+    onLoad: () => {
+      setRiveLoaded(true)
+    },
+  })
+
+  const { setValue: setIsHovered } = useViewModelInstanceBoolean(
+    'isHovered',
+    rive?.viewModelInstance
+  )
+
+  useEffect(() => {
+    setStateMachine(theme === 'dark' ? 'loop-dark' : 'loop-light')
+  }, [theme])
+
+  useEffect(() => {
+    return () => {
+      rive?.cleanup()
+    }
+  }, [rive])
+
+  return (
+    <div
+      className={cn('flex items-center', className)}
+      onMouseEnter={(e) => {
+        setIsHovered(true)
+        onMouseEnter?.(e)
+      }}
+      onMouseLeave={(e) => {
+        setIsHovered(false)
+        onMouseLeave?.(e)
+      }}
+      {...rest}
+    >
+      <div className={cn(stackLogoClass({ size }))}>
+        <LogoSvg
+          aria-hidden
+          className={cn(
+            'pointer-events-none absolute top-0 left-0 size-full scale-[0.87] transition-opacity duration-100',
+            {
+              'opacity-0': riveLoaded,
+            }
+          )}
+        />
+        <RiveComponent key={stateMachine} className="size-full" />
+      </div>
+      {variant === 'icon-with-wordmark' && <WordmarkSvg size={size} />}
+    </div>
+  )
+}
+
+const WordmarkSvg: FC<{ size: Size }> = ({ size = 'md' }) => (
+  <>
+    <p className="sr-only">Speakeasy Logo</p>
+    <svg
+      width="106"
+      height="22"
+      viewBox="0 0 106 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={lettersLogoClass({ size })}
+    >
+      <path
+        d="M102.372 4.72596L98.9819 13.7316L95.4811 4.72596H93.1875L97.8247 16.2969L97.2496 17.6066C97.087 17.995 96.9453 18.2702 96.8328 18.4212L96.8231 18.4347C96.7314 18.5885 96.6105 18.6937 96.4535 18.7557C96.2882 18.8232 96.0284 18.8569 95.6811 18.8569H93.8696V20.7964H96.2549C96.8106 20.7964 97.2634 20.7087 97.6038 20.5361C97.9455 20.3621 98.2345 20.091 98.4596 19.7295C98.6763 19.3829 98.9277 18.8596 99.2042 18.1731L104.665 4.72461H102.37L102.372 4.72596Z"
+        fill="var(--foreground)"
+      />
+      <path
+        d="M91.0858 9.92009C90.4231 9.71103 89.566 9.54378 88.538 9.42509C87.8114 9.33742 87.2613 9.25515 86.9001 9.18232C86.575 9.11353 86.3041 8.9827 86.0944 8.79253C85.8929 8.61044 85.7943 8.35148 85.7943 8.00081C85.7943 7.52604 86.0138 7.15513 86.4681 6.86515C86.9307 6.55629 87.553 6.39983 88.3143 6.39983C89.0756 6.39983 89.6855 6.58461 90.1786 6.95012C90.6718 7.31699 90.9469 7.76747 91.0191 8.32855L91.0344 8.44724H93.1863L93.1752 8.30158C93.0807 7.10928 92.5764 6.17729 91.6762 5.53393C90.7996 4.89597 89.6466 4.57227 88.2463 4.57227C87.3905 4.57227 86.607 4.72602 85.9207 5.02815C85.2289 5.31813 84.6704 5.73759 84.2592 6.27575C83.8619 6.8166 83.6605 7.44107 83.6605 8.13433C83.6605 8.90717 83.873 9.52895 84.2939 9.98483C84.7065 10.4164 85.2511 10.7347 85.9138 10.9344C86.5598 11.1286 87.4016 11.2877 88.413 11.4064C89.1228 11.4941 89.673 11.5831 90.0494 11.6708C90.419 11.753 90.7204 11.9068 90.9455 12.124C91.1705 12.3411 91.272 12.6459 91.272 13.0519C91.272 13.5267 91.0372 13.9043 90.5565 14.2064C90.0772 14.5018 89.4312 14.6529 88.6366 14.6529C87.7392 14.6529 86.996 14.4452 86.4278 14.0351C85.8763 13.6265 85.5943 13.1139 85.5651 12.4679L85.5595 12.3384H83.4062V12.4746C83.4243 13.729 83.9119 14.723 84.8621 15.4298C85.8137 16.1271 87.0835 16.4804 88.6366 16.4804C89.5063 16.4804 90.3106 16.3348 91.0274 16.0475C91.7498 15.7575 92.3319 15.3394 92.7584 14.8039C93.1877 14.2631 93.4058 13.6292 93.4058 12.9184C93.4058 12.1024 93.1863 11.4442 92.7542 10.9613C92.3416 10.4839 91.7804 10.1332 91.0872 9.91874L91.0858 9.92009Z"
+        fill="var(--foreground)"
+      />
+      <path
+        d="M82.037 14.2455C81.9314 14.1349 81.8786 13.9568 81.8786 13.7194V8.82345C81.8786 7.4693 81.4465 6.41592 80.595 5.69703C79.7628 4.96601 78.5667 4.59375 77.0414 4.59375C75.6119 4.59375 74.4283 4.91745 73.5211 5.55406C72.6223 6.19742 72.0944 7.10514 71.9527 8.25023L71.9346 8.40129H74.0837L74.106 8.29339C74.2213 7.74579 74.5172 7.32228 75.0117 6.99723C75.5202 6.6587 76.1731 6.4874 76.9511 6.4874C77.8304 6.4874 78.5167 6.68567 78.9946 7.07951C79.485 7.472 79.7239 8.0061 79.7239 8.7115V9.35486H76.4246C74.8714 9.35486 73.6628 9.67182 72.8432 10.2882L72.8307 10.2949C72.0041 10.9275 71.5859 11.846 71.5859 13.0275C71.5859 14.0903 71.9971 14.9414 72.8098 15.5605C73.6253 16.1701 74.7103 16.479 76.0342 16.479C77.6512 16.479 78.9321 15.9206 79.8462 14.8173C79.9142 15.257 80.0865 15.609 80.3616 15.8626C80.7075 16.1823 81.2798 16.3455 82.062 16.3455H83.2317V14.406H82.5204C82.2995 14.406 82.1412 14.3534 82.0384 14.2441L82.037 14.2455ZM79.7211 11.1622V11.583C79.7211 12.5042 79.4044 13.2568 78.7807 13.8206C78.1527 14.3736 77.2747 14.6528 76.1703 14.6528C75.4257 14.6528 74.8297 14.4896 74.3977 14.1686C73.9712 13.8516 73.7642 13.4429 73.7642 12.9183C73.7642 12.3275 73.9601 11.8986 74.3616 11.6073C74.77 11.3119 75.4021 11.1608 76.2384 11.1608H79.7211V11.1622Z"
+        fill="var(--foreground)"
+      />
+      <path
+        d="M67.9452 5.25464C67.1033 4.8163 66.1253 4.59375 65.0376 4.59375C63.9498 4.59375 62.9371 4.84732 62.0786 5.34636C61.22 5.83191 60.5379 6.53056 60.0545 7.42479C59.5877 8.31632 59.3516 9.36295 59.3516 10.5364C59.3516 11.7098 59.5961 12.7416 60.0795 13.6493C60.5782 14.5422 61.2826 15.2489 62.173 15.7493C63.0608 16.2335 64.1096 16.479 65.2904 16.479C66.6463 16.479 67.8091 16.1013 68.7496 15.3568C69.6873 14.5975 70.2819 13.6129 70.5166 12.43L70.5486 12.2695H68.3717L68.3439 12.3693C68.155 13.0612 67.7716 13.6129 67.2062 14.0081C66.6519 14.3898 65.9614 14.584 65.1543 14.584C64.1138 14.584 63.2594 14.2603 62.6176 13.6237C61.9744 12.9844 61.6326 12.1171 61.6021 11.0462V11.026H70.6681L70.6792 10.9019C70.7097 10.5377 70.725 10.2801 70.725 10.1088C70.6945 8.99474 70.4333 8.00745 69.9512 7.17527C69.4664 6.34039 68.7926 5.69434 67.948 5.25329L67.9452 5.25464ZM68.4814 9.24561H61.7327C61.8452 8.44715 62.2092 7.78626 62.8135 7.27912C63.4567 6.73962 64.2124 6.46582 65.0612 6.46582C66.0156 6.46582 66.8102 6.72479 67.4229 7.23462C68.0147 7.71612 68.3703 8.39185 68.4801 9.24561H68.4814Z"
+        fill="var(--foreground)"
+      />
+      <path
+        d="M59.6949 4.72835H57.0679L51.3291 10.6224V0.5H49.1716V14.4084H47.5879C47.3671 14.4084 47.2087 14.3558 47.1059 14.2465C47.0003 14.1359 46.9475 13.9579 46.9475 13.7205V8.82453C46.9475 7.47037 46.5155 6.417 45.6639 5.69811C44.8317 4.96708 43.6356 4.59483 42.1103 4.59483C40.6808 4.59483 39.4972 4.91853 38.59 5.55514C37.6912 6.1985 37.1633 7.10621 37.0216 8.2513L37.0036 8.40237H39.1527L39.1749 8.29447C39.2902 7.74687 39.5861 7.32336 40.0806 6.99831C40.5891 6.65977 41.242 6.48713 42.02 6.48713C42.8994 6.48713 43.5856 6.6854 44.0635 7.07924C44.5539 7.47172 44.7928 8.00448 44.7928 8.71123V9.35459H41.4935C39.9403 9.35459 38.7317 9.67155 37.901 10.296C37.0744 10.9286 36.6562 11.8471 36.6562 13.0286C36.6562 14.0914 37.0675 14.9425 37.8801 15.5616C38.6956 16.1712 39.7806 16.4801 41.1045 16.4801C42.7215 16.4801 44.0024 15.9217 44.9165 14.8184C44.9846 15.2581 45.1568 15.6088 45.4319 15.8637C45.7778 16.1833 46.3501 16.3465 47.1323 16.3465H49.1744H51.3319V13.2606L53.5143 11.0378L57.3138 16.2885L57.3555 16.3465H59.963L55.0619 9.52588L59.6977 4.727L59.6949 4.72835ZM39.4305 11.6084C39.8389 11.313 40.471 11.1619 41.3073 11.1619H44.7901V11.5827C44.7901 12.5039 44.4733 13.2565 43.8496 13.8203C43.2216 14.3733 42.3437 14.6525 41.2392 14.6525C40.4946 14.6525 39.8987 14.4893 39.4666 14.1683C39.0401 13.8513 38.8331 13.4427 38.8331 12.918C38.8331 12.3272 39.029 11.8983 39.4305 11.607V11.6084Z"
+        fill="var(--foreground)"
+      />
+      <path
+        d="M33.0116 5.25464C32.1698 4.8163 31.1918 4.59375 30.104 4.59375C29.0163 4.59375 28.0035 4.84732 27.145 5.34636C26.2851 5.83191 25.6044 6.53056 25.1209 7.42479C24.6541 8.31632 24.418 9.36295 24.418 10.5364C24.418 11.7098 24.6625 12.7416 25.1459 13.6493C25.6446 14.5422 26.349 15.2489 27.2395 15.7493C28.1272 16.2335 29.176 16.479 30.3555 16.479C31.7113 16.479 32.8755 16.1013 33.8146 15.3568C34.7523 14.5975 35.3469 13.6129 35.5817 12.43L35.6136 12.2695H33.4367L33.4089 12.3693C33.22 13.0612 32.8366 13.6129 32.2712 14.0081C31.7169 14.3898 31.0264 14.584 30.2193 14.584C29.1788 14.584 28.3244 14.2603 27.6826 13.6237C27.0394 12.9844 26.6977 12.1171 26.6685 11.0462V11.026H35.7345L35.7456 10.9019C35.7761 10.5377 35.7914 10.2801 35.7914 10.1088C35.7609 8.99339 35.4997 8.00745 35.0176 7.17527C34.5328 6.34039 33.859 5.69434 33.0144 5.25329L33.0116 5.25464ZM33.5479 9.24561H26.7991C26.9116 8.44715 27.2756 7.78626 27.8799 7.27912C28.5231 6.73962 29.2788 6.46582 30.1276 6.46582C31.082 6.46582 31.8766 6.72479 32.4893 7.23462C33.0811 7.71612 33.4367 8.39185 33.5465 9.24561H33.5479Z"
+        fill="var(--foreground)"
+      />
+      <path
+        d="M20.7354 5.3005C19.8783 4.83113 18.8836 4.59375 17.7792 4.59375C16.1593 4.59375 14.8424 5.18451 13.8616 6.34848L13.6379 4.72728H11.75V20.7977H13.9074V14.8942C14.2714 15.3326 14.734 15.6954 15.2855 15.9759H15.2883C15.9774 16.3118 16.8151 16.4803 17.7806 16.4803C18.8711 16.4803 19.8658 16.2268 20.7396 15.7277C21.6134 15.2274 22.3024 14.5206 22.7859 13.6277C23.2832 12.7362 23.5361 11.6963 23.5361 10.5377C23.5361 9.31845 23.2832 8.24888 22.7859 7.3587C22.301 6.46448 21.612 5.77121 20.7368 5.30185L20.7354 5.3005ZM21.33 10.5377C21.33 11.73 20.9799 12.7173 20.2881 13.4753C19.6157 14.2131 18.7099 14.5867 17.5958 14.5867C16.8762 14.5867 16.2219 14.414 15.6523 14.0728C15.0966 13.7316 14.659 13.2487 14.352 12.6377C14.0422 12.0065 13.8838 11.2849 13.8838 10.4932C13.8838 9.70149 14.0408 9.01767 14.3506 8.41613C14.6576 7.80514 15.0952 7.32903 15.6509 7.00263C16.2219 6.66139 16.8762 6.48875 17.5958 6.48875C18.7099 6.48875 19.6157 6.87045 20.2895 7.62441C20.9799 8.36622 21.3314 9.34677 21.3314 10.5377H21.33Z"
+        fill="var(--foreground)"
+      />
+      <path
+        d="M8.1483 9.92009C7.48565 9.71103 6.6285 9.54378 5.60049 9.42509C4.87532 9.33742 4.32381 9.25515 3.96261 9.18232C3.63754 9.11353 3.36664 8.9827 3.15687 8.79253C2.95544 8.61044 2.8568 8.35148 2.8568 8.00081C2.8568 7.52604 3.0763 7.15513 3.53057 6.86515C3.99318 6.55629 4.61554 6.39983 5.37683 6.39983C6.13812 6.39983 6.74798 6.58461 7.24115 6.95012C7.73431 7.31564 8.00938 7.76747 8.08162 8.32855L8.0969 8.44724H10.2488L10.2377 8.30158C10.1432 7.10928 9.63892 6.17729 8.73871 5.53393C7.86212 4.89597 6.70908 4.57227 5.30875 4.57227C4.453 4.57227 3.66949 4.72602 2.98322 5.02815C2.29139 5.31813 1.73293 5.73759 1.32173 6.27575C0.924413 6.81525 0.722976 7.44107 0.722976 8.13433C0.722976 8.90717 0.935526 9.52895 1.35646 9.98483C1.76905 10.4164 2.31362 10.7347 2.97627 10.9344C3.62226 11.1286 4.46412 11.2877 5.47546 11.4064C6.18535 11.4941 6.73547 11.5831 7.11195 11.6708C7.48148 11.753 7.78294 11.9068 8.00799 12.124C8.22471 12.3344 8.33445 12.6459 8.33445 13.0519C8.33445 13.5267 8.09968 13.9043 7.61901 14.2064C7.13973 14.5018 6.49375 14.6529 5.69912 14.6529C4.80169 14.6529 4.05847 14.4452 3.49028 14.0351C2.93876 13.6265 2.65676 13.1139 2.62758 12.4679L2.62202 12.3384H0.46875V12.4746C0.485421 13.729 0.974422 14.723 1.92325 15.4298C2.87486 16.1271 4.14599 16.4804 5.69774 16.4804C6.56738 16.4804 7.37173 16.3348 8.08856 16.0475C8.81095 15.7575 9.39303 15.3394 9.81952 14.8039C10.2488 14.2631 10.4669 13.6278 10.4669 12.9184C10.4669 12.1024 10.2474 11.4442 9.81535 10.9613C9.40276 10.4839 8.84152 10.1332 8.14691 9.91874L8.1483 9.92009Z"
+        fill="var(--foreground)"
+      />
+    </svg>
+  </>
+)
+
+const LogoSvg: FC<JSX.IntrinsicElements['svg']> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
+      fill="none"
+      {...props}
+    >
+      <title>Speakeasy Logo</title>
+      <path
+        fill="var(--foreground)"
+        d="m20.639 27.548-19.17-2.724L0 26.1l20.639 2.931 8.456-7.336-1.468-.208-6.988 6.062Z"
+      />
+      <path
+        fill="var(--foreground)"
+        d="m20.639 23.1 8.456-7.336-1.468-.207-6.988 6.06-6.84-.972-9.394-1.333-2.936-.417L0 20.169l2.937.416L0 23.132l20.639 2.931 8.456-7.334-1.468-.208-6.986 6.062-9.78-1.39 1.468-1.273 8.31 1.18Z"
+      />
+      <path
+        fill="var(--foreground)"
+        d="m20.639 18.65-19.17-2.724L0 17.201l20.639 2.931 8.456-7.334-1.468-.208-6.988 6.06Z"
+      />
+      <path
+        fill="var(--foreground)"
+        d="M27.627 6.658 24.69 9.205 20.64 12.72l-7.923-1.126L1.469 9.996 0 11.271l11.246 1.596-1.467 1.275-8.311-1.181L0 14.235l20.639 2.932 8.456-7.334-2.937-.418 2.937-2.549-1.468-.208Z"
+      />
+      <path
+        fill="var(--foreground)"
+        d="M29.095 3.902 8.456.971 0 8.305l20.639 2.934 8.456-7.337Z"
+      />
+    </svg>
+  )
+}

package/src/components/Logo/index.tsx

@@ -0,0 +1,17 @@
+import * as svgs from './svgs'
+
+type LogoVariant = 'wordmark' | 'icon'
+
+export interface LogoProps extends React.SVGProps<SVGSVGElement> {
+  variant: LogoVariant
+  muted?: boolean
+}
+
+export function Logo({ variant, className, ...props }: LogoProps) {
+  switch (variant) {
+    case 'wordmark':
+      return <svgs.Wordmark {...props} className={className} />
+    case 'icon':
+      return <svgs.Logo className={className} {...props} />
+  }
+}

package/src/components/Logo/svgs/index.tsx

@@ -0,0 +1,126 @@
+import { cn } from '../../../lib/utils'
+
+interface SvgProps extends React.SVGProps<SVGSVGElement> {
+  muted?: boolean
+}
+
+export function Wordmark({ className, muted, ...props }: SvgProps) {
+  return (
+    <svg
+      aria-label="Speakeasy Logo"
+      xmlns="http://www.w3.org/2000/svg"
+      shapeRendering="geometricPrecision"
+      textRendering="optimizeLegibility"
+      viewBox={`0 0 140 24`}
+      preserveAspectRatio="xMidYMid meet"
+      className={cn(
+        muted ? 'text-foreground/80' : 'text-foreground dark:text-primary',
+        className
+      )}
+      {...props}
+    >
+      <g opacity="1">
+        <path
+          d="M16.0663 19.6857L1.58654 17.6882L0.476562 18.6229L16.0663 20.7728L22.4539 15.3926L21.3453 15.2402L16.0663 19.6857Z"
+          fill="currentColor"
+        />
+        <path
+          d="M16.0663 16.4252L22.4539 11.045L21.3453 10.8926L16.0663 15.3367L10.8998 14.6246L3.80372 13.6467L1.58654 13.3406L0.476563 14.2753L2.69513 14.5801L0.476562 16.4481L16.0663 18.598L22.4539 13.2192L21.3453 13.0668L16.0677 17.5123L8.68123 16.4926L9.78982 15.5593L16.0663 16.4252Z"
+          fill="currentColor"
+        />
+        <path
+          d="M16.0663 13.161L1.58654 11.1634L0.476562 12.0981L16.0663 14.248L22.4539 8.86921L21.3453 8.7168L16.0663 13.161Z"
+          fill="currentColor"
+        />
+        <path
+          d="M21.3453 4.36719L19.1267 6.23522L16.0663 8.81269L10.0816 7.98725L1.58654 6.81518L0.476562 7.74987L8.97158 8.92059L7.86299 9.85528L1.58515 8.98938L0.476563 9.92406L16.0663 12.074L22.4539 6.69514L20.2353 6.38897L22.4539 4.5196L21.3453 4.36719Z"
+          fill="currentColor"
+        />
+        <path
+          d="M22.4539 2.34523L6.86415 0.195312L0.476562 5.57415L16.0663 7.72542L22.4539 2.34523Z"
+          fill="currentColor"
+        />
+
+        {/* Text part - hidden on mobile */}
+        <g>
+          <path
+            d="M134.145 4.5619L130.755 13.5675L127.255 4.5619H124.961L129.598 16.1329L129.023 17.4425C128.86 17.831 128.719 18.1061 128.606 18.2572L128.597 18.2707C128.505 18.4244 128.384 18.5296 128.227 18.5917C128.062 18.6591 127.802 18.6928 127.455 18.6928H125.643V20.6323H128.028C128.584 20.6323 129.037 20.5447 129.377 20.372C129.719 20.198 130.008 19.9269 130.233 19.5655C130.45 19.2188 130.701 18.6955 130.978 18.009L136.439 4.56055H134.144L134.145 4.5619Z"
+            fill="currentColor"
+          />
+          <path
+            d="M122.859 9.75602C122.197 9.54697 121.339 9.37972 120.311 9.26103C119.585 9.17336 119.035 9.09109 118.674 9.01825C118.348 8.94947 118.078 8.81864 117.868 8.62846C117.666 8.44638 117.568 8.18742 117.568 7.83674C117.568 7.36198 117.787 6.99107 118.242 6.70109C118.704 6.39222 119.326 6.23577 120.088 6.23577C120.849 6.23577 121.459 6.42055 121.952 6.78606C122.445 7.15292 122.72 7.60341 122.793 8.16449L122.808 8.28318H124.96L124.949 8.13752C124.854 6.94521 124.35 6.01322 123.45 5.36987C122.573 4.7319 121.42 4.4082 120.02 4.4082C119.164 4.4082 118.38 4.56196 117.694 4.86408C117.002 5.15407 116.444 5.57353 116.033 6.11168C115.635 6.65253 115.434 7.27701 115.434 7.97027C115.434 8.74311 115.646 9.36488 116.067 9.82076C116.48 10.2524 117.025 10.5707 117.687 10.7703C118.333 10.9645 119.175 11.1237 120.186 11.2424C120.896 11.33 121.446 11.419 121.823 11.5067C122.192 11.589 122.494 11.7427 122.719 11.9599C122.944 12.177 123.045 12.4819 123.045 12.8878C123.045 13.3626 122.811 13.7403 122.33 14.0424C121.851 14.3378 121.205 14.4888 120.41 14.4888C119.513 14.4888 118.769 14.2811 118.201 13.8711C117.65 13.4624 117.368 12.9499 117.339 12.3038L117.333 12.1743H115.18V12.3106C115.198 13.5649 115.685 14.5589 116.636 15.2657C117.587 15.963 118.857 16.3164 120.41 16.3164C121.28 16.3164 122.084 16.1707 122.801 15.8834C123.523 15.5934 124.105 15.1753 124.532 14.6399C124.961 14.099 125.179 13.4651 125.179 12.7543C125.179 11.9383 124.96 11.2801 124.528 10.7973C124.115 10.3198 123.554 9.96913 122.861 9.75467L122.859 9.75602Z"
+            fill="currentColor"
+          />
+          <path
+            d="M113.81 14.0814C113.705 13.9708 113.652 13.7928 113.652 13.5554V8.65939C113.652 7.30524 113.22 6.25186 112.368 5.53297C111.536 4.80194 110.34 4.42969 108.815 4.42969C107.385 4.42969 106.202 4.75339 105.295 5.39C104.396 6.03336 103.868 6.94107 103.726 8.08617L103.708 8.23723H105.857L105.879 8.12933C105.995 7.58173 106.291 7.15822 106.785 6.83317C107.294 6.49463 107.947 6.32334 108.725 6.32334C109.604 6.32334 110.29 6.52161 110.768 6.91545C111.258 7.30793 111.497 7.84204 111.497 8.54744V9.1908H108.198C106.645 9.1908 105.436 9.50776 104.617 10.1241L104.604 10.1309C103.778 10.7634 103.359 11.682 103.359 12.8635C103.359 13.9263 103.771 14.7773 104.583 15.3964C105.399 16.0061 106.484 16.3149 107.808 16.3149C109.425 16.3149 110.706 15.7565 111.62 14.6533C111.688 15.093 111.86 15.445 112.135 15.6986C112.481 16.0182 113.053 16.1814 113.835 16.1814H115.005V14.2419H114.294C114.073 14.2419 113.915 14.1893 113.812 14.08L113.81 14.0814ZM111.495 10.9981V11.4189C111.495 12.3401 111.178 13.0928 110.554 13.6565C109.926 14.2095 109.048 14.4887 107.944 14.4887C107.199 14.4887 106.603 14.3255 106.171 14.0045C105.745 13.6876 105.538 13.2789 105.538 12.7542C105.538 12.1635 105.734 11.7346 106.135 11.4432C106.543 11.1478 107.176 10.9968 108.012 10.9968H111.495V10.9981Z"
+            fill="currentColor"
+          />
+          <path
+            d="M99.7186 5.09058C98.8768 4.65223 97.8988 4.42969 96.811 4.42969C95.7233 4.42969 94.7105 4.68325 93.852 5.18229C92.9935 5.66785 92.3114 6.3665 91.8279 7.26073C91.3612 8.15226 91.125 9.19889 91.125 10.3723C91.125 11.5457 91.3695 12.5775 91.8529 13.4852C92.3517 14.3781 93.056 15.0849 93.9465 15.5853C94.8342 16.0695 95.883 16.3149 97.0639 16.3149C98.4197 16.3149 99.5825 15.9373 100.523 15.1928C101.461 14.4334 102.055 13.4488 102.29 12.266L102.322 12.1055H100.145L100.117 12.2053C99.9284 12.8972 99.545 13.4488 98.9796 13.844C98.4253 14.2257 97.7349 14.4199 96.9277 14.4199C95.8872 14.4199 95.0328 14.0962 94.391 13.4596C93.7478 12.8203 93.4061 11.9531 93.3755 10.8821V10.8619H102.442L102.453 10.7378C102.483 10.3737 102.498 10.116 102.498 9.94475C102.468 8.83068 102.207 7.84339 101.725 7.01121C101.24 6.17633 100.566 5.53027 99.7214 5.08923L99.7186 5.09058ZM100.255 9.08155H93.5061C93.6186 8.28309 93.9826 7.62219 94.5869 7.11506C95.2301 6.57556 95.9858 6.30176 96.8347 6.30176C97.789 6.30176 98.5837 6.56072 99.1963 7.07055C99.7881 7.55206 100.144 8.22779 100.253 9.08155H100.255Z"
+            fill="currentColor"
+          />
+          <path
+            d="M91.4683 4.56429H88.8413L83.1025 10.4584V0.335938H80.9451V14.2443H79.3614C79.1405 14.2443 78.9821 14.1917 78.8793 14.0825C78.7737 13.9719 78.7209 13.7938 78.7209 13.5565V8.66046C78.7209 7.30631 78.2889 6.25293 77.4373 5.53405C76.6052 4.80302 75.4091 4.43076 73.8837 4.43076C72.4542 4.43076 71.2706 4.75446 70.3635 5.39108C69.4646 6.03443 68.9367 6.94215 68.795 8.08724L68.777 8.2383H70.9261L70.9483 8.1304C71.0636 7.58281 71.3595 7.1593 71.8541 6.83425C72.3625 6.49571 73.0155 6.32307 73.7934 6.32307C74.6728 6.32307 75.3591 6.52134 75.837 6.91517C76.3273 7.30766 76.5663 7.84042 76.5663 8.54717V9.19053H73.2669C71.7138 9.19053 70.5052 9.50748 69.6744 10.132C68.8478 10.7645 68.4297 11.683 68.4297 12.8645C68.4297 13.9274 68.8409 14.7784 69.6536 15.3975C70.469 16.0071 71.554 16.316 72.8779 16.316C74.495 16.316 75.7758 15.7576 76.6899 14.6543C76.758 15.094 76.9303 15.4447 77.2053 15.6996C77.5512 16.0193 78.1236 16.1825 78.9057 16.1825H80.9478H83.1053V13.0965L85.2877 10.8738L89.0872 16.1245L89.1289 16.1825H91.7364L86.8353 9.36182L91.4711 4.56294L91.4683 4.56429ZM71.2039 11.4443C71.6124 11.1489 72.2445 10.9979 73.0808 10.9979H76.5635V11.4187C76.5635 12.3399 76.2468 13.0925 75.623 13.6563C74.9951 14.2092 74.1171 14.4884 73.0127 14.4884C72.2681 14.4884 71.6721 14.3252 71.2401 14.0042C70.8136 13.6873 70.6066 13.2786 70.6066 12.7539C70.6066 12.1632 70.8025 11.7343 71.2039 11.4429V11.4443Z"
+            fill="currentColor"
+          />
+          <path
+            d="M64.7851 5.09058C63.9432 4.65223 62.9652 4.42969 61.8774 4.42969C60.7897 4.42969 59.777 4.68325 58.9184 5.18229C58.0585 5.66785 57.3778 6.3665 56.8943 7.26073C56.4276 8.15226 56.1914 9.19889 56.1914 10.3723C56.1914 11.5457 56.4359 12.5775 56.9194 13.4852C57.4181 14.3781 58.1224 15.0849 59.0129 15.5853C59.9006 16.0695 60.9495 16.3149 62.1289 16.3149C63.4848 16.3149 64.6489 15.9373 65.588 15.1928C66.5257 14.4334 67.1203 13.4488 67.3551 12.266L67.387 12.1055H65.2102L65.1824 12.2053C64.9934 12.8972 64.61 13.4488 64.0446 13.844C63.4903 14.2257 62.7999 14.4199 61.9927 14.4199C60.9522 14.4199 60.0979 14.0962 59.456 13.4596C58.8128 12.8203 58.4711 11.9531 58.4419 10.8821V10.8619H67.5079L67.519 10.7378C67.5496 10.3737 67.5649 10.116 67.5649 9.94475C67.5343 8.82933 67.2731 7.84339 66.7911 7.01121C66.3062 6.17633 65.6325 5.53027 64.7878 5.08923L64.7851 5.09058ZM65.3213 9.08155H58.5725C58.685 8.28309 59.049 7.62219 59.6533 7.11506C60.2965 6.57556 61.0522 6.30176 61.9011 6.30176C62.8554 6.30176 63.6501 6.56072 64.2627 7.07055C64.8545 7.55206 65.2102 8.22779 65.3199 9.08155H65.3213Z"
+            fill="currentColor"
+          />
+          <path
+            d="M52.5088 5.13644C51.6517 4.66707 50.657 4.42969 49.5526 4.42969C47.9328 4.42969 46.6158 5.02044 45.635 6.18442L45.4114 4.56321H43.5234V20.6337H45.6809V14.7301C46.0449 15.1685 46.5075 15.5313 47.059 15.8118H47.0617C47.7508 16.1477 48.5885 16.3163 49.554 16.3163C50.6445 16.3163 51.6392 16.0627 52.513 15.5637C53.3868 15.0633 54.0759 14.3565 54.5593 13.4637C55.0566 12.5721 55.3095 11.5322 55.3095 10.3737C55.3095 9.15438 55.0566 8.08482 54.5593 7.19464C54.0745 6.30041 53.3854 5.60715 52.5102 5.13778L52.5088 5.13644ZM53.1034 10.3737C53.1034 11.566 52.7533 12.5533 52.0615 13.3113C51.3891 14.049 50.4834 14.4226 49.3692 14.4226C48.6496 14.4226 47.9953 14.25 47.4257 13.9088C46.87 13.5675 46.4324 13.0847 46.1254 12.4737C45.8156 11.8425 45.6573 11.1209 45.6573 10.3292C45.6573 9.53743 45.8142 8.85361 46.124 8.25206C46.431 7.64108 46.8687 7.16497 47.4243 6.83857C47.9953 6.49733 48.6496 6.32469 49.3692 6.32469C50.4834 6.32469 51.3891 6.70639 52.0629 7.46034C52.7533 8.20216 53.1048 9.18271 53.1048 10.3737H53.1034Z"
+            fill="currentColor"
+          />
+          <path
+            d="M39.9217 9.75602C39.2591 9.54697 38.4019 9.37972 37.3739 9.26103C36.6488 9.17336 36.0972 9.09109 35.7361 9.01825C35.411 8.94947 35.1401 8.81864 34.9303 8.62846C34.7289 8.44638 34.6302 8.18742 34.6302 7.83674C34.6302 7.36198 34.8497 6.99107 35.304 6.70109C35.7666 6.39222 36.389 6.23577 37.1503 6.23577C37.9116 6.23577 38.5214 6.42055 39.0146 6.78606C39.5078 7.15157 39.7828 7.60341 39.8551 8.16449L39.8703 8.28318H42.0222L42.0111 8.13752C41.9166 6.94521 41.4124 6.01322 40.5122 5.36987C39.6356 4.7319 38.4825 4.4082 37.0822 4.4082C36.2264 4.4082 35.4429 4.56196 34.7567 4.86408C34.0648 5.15407 33.5064 5.57353 33.0952 6.11168C32.6979 6.65119 32.4964 7.27701 32.4964 7.97027C32.4964 8.74311 32.709 9.36488 33.1299 9.82076C33.5425 10.2524 34.0871 10.5707 34.7497 10.7703C35.3957 10.9645 36.2376 11.1237 37.2489 11.2424C37.9588 11.33 38.5089 11.419 38.8854 11.5067C39.2549 11.589 39.5564 11.7427 39.7814 11.9599C39.9981 12.1703 40.1079 12.4819 40.1079 12.8878C40.1079 13.3626 39.8731 13.7403 39.3924 14.0424C38.9132 14.3378 38.2672 14.4888 37.4726 14.4888C36.5751 14.4888 35.8319 14.2811 35.2637 13.8711C34.7122 13.4624 34.4302 12.9499 34.401 12.3038L34.3955 12.1743H32.2422V12.3106C32.2589 13.5649 32.7479 14.5589 33.6967 15.2657C34.6483 15.963 35.9194 16.3164 37.4712 16.3164C38.3408 16.3164 39.1452 16.1707 39.862 15.8834C40.5844 15.5934 41.1665 15.1753 41.593 14.6399C42.0222 14.099 42.2403 13.4638 42.2403 12.7543C42.2403 11.9383 42.0208 11.2801 41.5888 10.7973C41.1762 10.3198 40.615 9.96913 39.9204 9.75467L39.9217 9.75602Z"
+            fill="currentColor"
+          />
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+export function Logo({ className, muted, ...props }: SvgProps) {
+  return (
+    <svg
+      width={24}
+      height={24}
+      shapeRendering="geometricPrecision"
+      textRendering="optimizeLegibility"
+      viewBox={`0 0 24 24`}
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      className={cn(
+        muted
+          ? 'text-foreground/80 h-[24px] w-[24px]'
+          : 'dark:text-primary text-black',
+        className
+      )}
+      {...props}
+    >
+      <g clipPath="url(#clip0)">
+        <path
+          d="M16.0663 19.6857L1.58654 17.6882L0.476562 18.6229L16.0663 20.7728L22.4539 15.3926L21.3453 15.2402L16.0663 19.6857Z"
+          fill="currentColor"
+        />
+        <path
+          d="M16.0663 16.4252L22.4539 11.045L21.3453 10.8926L16.0663 15.3367L10.8998 14.6246L3.80372 13.6467L1.58654 13.3406L0.476563 14.2753L2.69513 14.5801L0.476562 16.4481L16.0663 18.598L22.4539 13.2192L21.3453 13.0668L16.0677 17.5123L8.68123 16.4926L9.78982 15.5593L16.0663 16.4252Z"
+          fill="currentColor"
+        />
+        <path
+          d="M16.0663 13.161L1.58654 11.1634L0.476562 12.0981L16.0663 14.248L22.4539 8.86921L21.3453 8.7168L16.0663 13.161Z"
+          fill="currentColor"
+        />
+        <path
+          d="M21.3453 4.36719L19.1267 6.23522L16.0663 8.81269L10.0816 7.98725L1.58654 6.81518L0.476562 7.74987L8.97158 8.92059L7.86299 9.85528L1.58515 8.98938L0.476563 9.92406L16.0663 12.074L22.4539 6.69514L20.2353 6.38897L22.4539 4.5196L21.3453 4.36719Z"
+          fill="currentColor"
+        />
+        <path
+          d="M22.4539 2.34523L6.86415 0.195312L0.476562 5.57415L16.0663 7.72542L22.4539 2.34523Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  )
+}

package/src/components/Modal/index.tsx

@@ -0,0 +1,104 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+} from '@radix-ui/react-dialog'
+import { useModal } from '../../hooks/useModal'
+import { cn } from '../../lib/utils'
+import { IconButton } from '../IconButton'
+import { Icon } from '../Icon'
+import { Screen } from '../../context/ModalContext'
+
+export interface ModalProps {
+  closable?: boolean
+  className?: string
+  layout: 'default' | 'custom'
+  onClose?: (currentScreen: Screen) => void
+}
+
+export const Modal = ({
+  closable = false,
+  className,
+  layout = 'default',
+  onClose,
+}: ModalProps) => {
+  const { screens, currentIndex, isOpen, close } = useModal()
+  const currentScreen = screens[currentIndex]
+
+  const handleOpenChange = (open: boolean) => {
+    if (closable && !open) {
+      close()
+      onClose?.(currentScreen)
+    }
+  }
+
+  if (!isOpen) return null
+  if (!currentScreen) return null
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogPortal>
+        <DialogOverlay className="bg-surface-secondary fixed top-0 z-10 h-screen w-screen opacity-85" />
+
+        {layout === 'default' ? (
+          <DialogContent
+            className={cn(
+              'bg-surface-primary border-neutral-default fixed top-1/2 left-1/2 z-20 flex h-auto max-h-[85vh] min-h-[40vh] w-[90vw] max-w-[800px] -translate-x-1/2 -translate-y-1/2 flex-col gap-3 overflow-y-auto rounded-md p-10 shadow-lg outline-none',
+              className
+            )}
+          >
+            {closable && (
+              <DialogClose asChild>
+                <IconButton
+                  variant="tertiary"
+                  icon={
+                    <Icon
+                      name="x"
+                      className="text-neutral-default hover:text-neutral-default/80 size-7 focus:outline-none"
+                    />
+                  }
+                  aria-label="Close modal"
+                  className="absolute top-4 right-4 focus:ring-0 focus:outline-none focus-visible:ring-0"
+                />
+              </DialogClose>
+            )}
+            {currentScreen.title && (
+              <DialogTitle className="text-display-sm">
+                {currentScreen.title}
+              </DialogTitle>
+            )}
+            <DialogDescription>{currentScreen.component}</DialogDescription>
+          </DialogContent>
+        ) : (
+          <DialogContent
+            className={cn(
+              'bg-surface-primary border-neutral-default fixed top-1/2 left-1/2 z-20 flex h-auto max-h-[85vh] min-h-[40vh] w-[90vw] max-w-[800px] -translate-x-1/2 -translate-y-1/2 flex-col gap-3 overflow-y-auto rounded-md p-10 shadow-lg outline-none',
+              className
+            )}
+          >
+            {closable && (
+              <DialogClose asChild>
+                <IconButton
+                  variant="tertiary"
+                  icon={
+                    <Icon
+                      name="x"
+                      className="text-neutral-default hover:text-neutral-default/80 size-7 focus:outline-none"
+                    />
+                  }
+                  aria-label="Close modal"
+                  className="absolute top-4 right-4 focus:ring-0 focus:outline-none focus-visible:ring-0"
+                />
+              </DialogClose>
+            )}
+            {currentScreen.component}
+          </DialogContent>
+        )}
+      </DialogPortal>
+    </Dialog>
+  )
+}