@sakura-ui/sakura-ui 0.1.21 → 0.3.0

package/packages/core/src/components/MenuButton.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { cx, mod, focusableSelector, Style } from '@sakura-ui/helper'
+import { Menu, MenuMobile, Close, CloseMobile } from '@/icons'
+
+export namespace MenuButton {
+  export interface Props extends React.ComponentPropsWithRef<'button'> {}
+}
+
+export const MenuButton = ({
+  className,
+  children,
+  onChange,
+  ...rest
+}: MenuButton.Props) => {
+  // leading 16px * 1.375(snug) + padding top 12px + padding bottom 12px + border * 2 = 48px
+  const styleMenuItem = `
+    w-fit
+    py-[1px]
+    sm:py-3
+    text-base
+    leading-snug
+    ${Style.clickable}
+    ${Style.hoverUnderline}
+    ${Style.focusRoundedWithBg}
+  `
+
+  const dialogRef = React.useRef<HTMLDialogElement>(null)
+
+  React.useEffect(() => {
+    document.body.style.overflow = 'auto'
+  }, [])
+
+  const open = () => {
+    dialogRef.current?.showModal()
+    document.body.style.overflow = 'hidden'
+  }
+  const close = () => {
+    dialogRef.current?.close()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+    // Focus trap
+    if (e.key === 'Tab') {
+      e.preventDefault()
+
+      const focusables: HTMLElement[] = Array.from(
+        dialogRef.current?.querySelectorAll(focusableSelector) || []
+      )
+      if (focusables.length === 0) return
+
+      const tabIndex = focusables.findIndex(
+        (el) => el === document.activeElement
+      )
+      // If there is no focused element, focus the first element
+      if (tabIndex === -1) {
+        focusables[0].focus()
+        return
+      }
+      const nextIndex = mod(tabIndex + (e.shiftKey ? -1 : 1), focusables.length)
+      focusables[nextIndex].focus()
+
+      return
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault()
+
+      close()
+    }
+  }
+
+  const handleOnClose = (_: React.KeyboardEvent<HTMLDialogElement>) => {
+    document.body.style.overflow = 'auto'
+  }
+
+  const handleOnClick = (e: React.MouseEvent<HTMLElement>) => {
+    if ((e.target as HTMLElement).nodeName === 'DIALOG') {
+      close()
+    }
+  }
+
+  return (
+    <div className={className}>
+      <dialog
+        ref={dialogRef}
+        className="peer"
+        onKeyDown={handleKeyDown}
+        onClick={handleOnClick}
+        onClose={handleOnClose}
+      >
+        {children}
+      </dialog>
+      <button
+        className={cx(styleMenuItem, 'flex items-center peer-open:hidden')}
+        onClick={open}
+        {...rest}
+      >
+        <MenuMobile size={44} className="inline-block sm:hidden" />
+        <Menu size={22} className="hidden sm:inline-block mr-1" />
+        <span className="hidden sm:inline">Menu</span>
+      </button>
+      <button
+        className={cx(styleMenuItem, 'peer-open:flex items-center hidden')}
+        onClick={close}
+        {...rest}
+      >
+        <CloseMobile size={44} className="inline-block sm:hidden" />
+        <Close size={22} className="hidden sm:inline-block mr-1" />
+        <span className="hidden sm:inline">Close</span>
+      </button>
+    </div>
+  )
+}

package/packages/core/src/components/NavigationItem.tsx

@@ -0,0 +1,41 @@
+import React, { type ComponentProps } from 'react'
+import { cx, Style } from '@sakura-ui/helper'
+
+export namespace NavigationItem {
+  export interface Props<T extends React.ElementType> {
+    as?: T
+  }
+}
+
+export const NavigationItem = <T extends React.ElementType = 'a'>(
+  props: NavigationItem.Props<T> &
+    Omit<React.ComponentProps<T>, keyof NavigationItem.Props<T>>
+) => {
+  const { as, className, children, ...rest } = props
+
+  const Component = as || 'a'
+
+  // leading 16px * 1.375(snug) + padding top 12px + padding bottom 12px + border * 2 = 48px
+  const style = `
+      inline-block
+      w-fit
+      py-3
+      text-base
+      leading-snug
+      ${Style.clickable}
+      ${Style.hoverUnderline}
+      ${Style.focusRectWithBg}
+    `
+
+  return (
+    <Component
+      className={cx(style, className)}
+      rel="noopener noreferrer"
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+NavigationItem.displayName = 'NavigationItem'

package/packages/core/src/components/OverflowContainer.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { cx } from '@sakura-ui/helper'
+
+export namespace OverflowContainer {
+  export interface Props extends React.ComponentPropsWithoutRef<'div'> {}
+}
+
+export const OverflowContainer = (props: OverflowContainer.Props) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    w-full
+    overflow-x-auto
+    whitespace-nowrap
+    print:overflow-visible
+    print:whitespace-normal
+  `
+
+  return (
+    <div className={cx(style, className)} {...restProps}>
+      {children}
+    </div>
+  )
+}

package/packages/core/src/components/PopoverMenu.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { cx, Style } from '@sakura-ui/helper'
+import { Icon } from './Icon'
+
+export const PopoverMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>((props, ref) => {
+  const { className, children, ...rest } = props
+  const stylePopover = `
+    min-w-fit
+    w-auto
+    py-2
+    bg-white
+    shadow-1
+    rounded-lg
+    border
+    border-solid-grey-420
+    has-[>:nth-child(7)]:rounded-r-none
+  `
+
+  const style = `
+    font-normal
+    whitespace-nowrap
+    ${stylePopover}
+  `
+
+  return (
+    <ul ref={ref} role="menu" className={cx(className, style)} {...rest}>
+      {children}
+    </ul>
+  )
+})
+
+PopoverMenu.displayName = 'PopoverMenu'
+
+export const PopoverMenuItem = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<'a'>
+>((props, ref) => {
+  const { className, children, ...rest } = props
+
+  const style = `
+    py-1.5 pl-1.5 pr-4
+    flex
+    items-center
+    gap-x-1.5
+    hover:bg-solid-grey-50
+    ${Style.focusRectCondensedWithBg}
+  `
+
+  const styleSelected = `
+    !text-blue-1000
+    !bg-blue-100
+    font-bold
+  `
+
+  const current = rest['aria-current'] ?? false
+
+  return (
+    <li role="presentation">
+      <a
+        aria-current={current}
+        ref={ref}
+        role="menuitem"
+        className={cx(style, current && styleSelected)}
+        {...rest}
+      >
+        <Icon
+          opticalSize={20}
+          className={`flex-none ${!current && 'invisible'}`}
+        >
+          check
+        </Icon>
+        <span className={Style.hoverUnderline}>{children}</span>
+      </a>
+    </li>
+  )
+})
+
+PopoverMenuItem.displayName = 'PopoverMenuItem'

package/packages/core/src/components/Pre.tsx

@@ -1,14 +1,16 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
-export interface PreProps extends React.ComponentPropsWithoutRef<'pre'> {}
+export namespace Pre {
+  export interface Props extends React.ComponentPropsWithoutRef<'pre'> {}
+}
 
-export const Pre = (props: PreProps) => {
+export const Pre = (props: Pre.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     p-4
-    bg-sumi-50
+    bg-solid-gray-50
     rounded-lg
     whitespace-pre-wrap
     overflow-y-scroll

package/packages/core/src/components/Table.tsx

@@ -1,38 +1,34 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
-export interface TableProps extends React.ComponentPropsWithoutRef<'table'> {}
+export namespace Table {
+  export interface Props extends React.ComponentPropsWithoutRef<'table'> {}
+}
 
 const styleBorder = `
   border
   border-collapse
-  border-[#cccccc]
+  border-solid-grey-420
 `
 
-export const Table = (props: TableProps) => {
+export const Table = (props: Table.Props) => {
   const { className, children, ...restProps } = props
 
-  // If there is no break-all setting, the table will protrude when using a smartphone
-  const style = `
-    w-full
-    table-auto
-    break-all
-  `
-
   return (
-    <table className={cx(style, styleBorder, className)} {...restProps}>
+    <table className={cx(styleBorder, className)} {...restProps}>
       {children}
     </table>
   )
 }
 
-export interface CaptionProps
-  extends React.ComponentPropsWithoutRef<'caption'> {}
+export namespace Caption {
+  export interface Props extends React.ComponentPropsWithoutRef<'caption'> {}
+}
 
-export const Caption = (props: CaptionProps) => {
+export const Caption = (props: Caption.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `text-left`
+  const style = 'text-left'
   return (
     <caption className={cx(style, className)} {...restProps}>
       {children}
@@ -40,9 +36,11 @@ export const Caption = (props: CaptionProps) => {
   )
 }
 
-export interface TheadProps extends React.ComponentPropsWithoutRef<'thead'> {}
+export namespace Thead {
+  export interface Props extends React.ComponentPropsWithoutRef<'thead'> {}
+}
 
-export const Thead = (props: TheadProps) => {
+export const Thead = (props: Thead.Props) => {
   const { className, children, ...restProps } = props
 
   return (
@@ -52,9 +50,11 @@ export const Thead = (props: TheadProps) => {
   )
 }
 
-export interface TbodyProps extends React.ComponentPropsWithoutRef<'tbody'> {}
+export namespace Tbody {
+  export interface Props extends React.ComponentPropsWithoutRef<'tbody'> {}
+}
 
-export const Tbody = (props: TbodyProps) => {
+export const Tbody = (props: Tbody.Props) => {
   const { className, children, ...restProps } = props
 
   return (
@@ -64,15 +64,17 @@ export const Tbody = (props: TbodyProps) => {
   )
 }
 
-export interface ThProps extends React.ComponentPropsWithoutRef<'th'> {}
+export namespace Th {
+  export interface Props extends React.ComponentPropsWithoutRef<'th'> {}
+}
 
-export const Th = (props: ThProps) => {
+export const Th = (props: Th.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     p-2
     bg-[#f8f8fb]
-    text-base
+    text-label
     text-left
   `
   return (
@@ -82,12 +84,14 @@ export const Th = (props: ThProps) => {
   )
 }
 
-export interface TrProps extends React.ComponentPropsWithoutRef<'tr'> {}
+export namespace Tr {
+  export interface Props extends React.ComponentPropsWithoutRef<'tr'> {}
+}
 
-export const Tr = (props: TrProps) => {
+export const Tr = (props: Tr.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = ``
+  const style = ''
 
   return (
     <tr className={cx(style, styleBorder, className)} {...restProps}>
@@ -96,13 +100,16 @@ export const Tr = (props: TrProps) => {
   )
 }
 
-export interface TdProps extends React.ComponentPropsWithoutRef<'td'> {}
+export namespace Td {
+  export interface Props extends React.ComponentPropsWithoutRef<'td'> {}
+}
 
-export const Td = (props: TdProps) => {
+export const Td = (props: Td.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     p-2
+    text-label
   `
 
   return (

package/packages/core/src/components/buttonStyle.ts

@@ -1,4 +1,10 @@
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
+import { Style } from '@sakura-ui/helper'
+
+// Deprecated, replace to ButtonVariantV2
+export type ButtonVariantV1 = 'primary' | 'secondary' | 'tertiary'
+export type ButtonVariantV2 = 'solid-fill' | 'outline' | 'text'
+export type ButtonVariant = ButtonVariantV1 | ButtonVariantV2
+
 export type ButtonSize = 'lg' | 'md' | 'sm' | 'xs'
 
 export const base = `
@@ -12,79 +18,90 @@ export const base = `
   outline-offset-2
   border
   border-solid
-  border-sea-800
-  active:border-sea-1200
-  hover:border-sea-900
-  focus:outline
-  focus:outline-2
-  focus:outline-wood-600
-  disabled:border-sumi-500
+  border-blue-900
+  hover:border-blue-1000
+  active:border-blue-1200
+  disabled:border-solid-gray-500
   disabled:cursor-not-allowed
 `
 
-const primary = `
-  text-white-1000
-  bg-sea-800
-  active:bg-sea-1200
-  hover:bg-sea-900
-  disabled:bg-sumi-500
-  disabled:text-white-1000
+const solidFill = `
+  text-white
+  bg-blue-900
+  hover:bg-blue-1000
+  active:bg-blue-1200
+  disabled:bg-solid-gray-500
+  disabled:text-white
+  ${Style.hoverUnderline}
+  ${Style.focusRounded}
 `
 
-const secondary = `
-  text-sea-800
+const outline = `
+  text-blue-900
+  hover:text-blue-1000
+  active:text-blue-1200
   bg-transparent
-  active:bg-sea-200
-  hover:bg-sea-100
-  active:text-sea-1200
-  hover:text-sea-900
-  disabled:text-sumi-500
+  hover:bg-blue-200
+  active:bg-blue-300
   disabled:bg-transparent
+  disabled:text-solid-gray-500
+  ${Style.hoverUnderline}
+  ${Style.focusRounded}
 `
 
-const tertiary = `
-    bg-transparent
-    text-blue-900
-    underline
-    hover:bg-blue-200
-    hover:text-blue-1000
-    active:bg-blue-300
-    active:text-blue-1200
-    disabled:bg-transparent
-    disabled:text-solid-grey-420
-  `
+const text = `
+  bg-transparent
+  text-blue-900
+  hover:text-blue-1000
+  active:text-blue-1200
+  hover:bg-blue-200
+  active:bg-blue-300
+  disabled:bg-transparent
+  disabled:text-solid-gray-500
+  ${Style.underlineNoDeco}
+  ${Style.focusRoundedWithBg}
+`
 
 const styles: { [key in ButtonVariant]: string } = {
-  primary: primary,
-  secondary: secondary,
-  tertiary: tertiary
+  primary: solidFill,
+  secondary: outline,
+  tertiary: text,
+  'solid-fill': solidFill,
+  outline: outline,
+  text: text
 }
 
 const params: { [key in ButtonSize]: string } = {
+  // 16(p-4) * 2 + 22(text-button * leading-snug) + boader * 2 = 56px
   lg: `
     p-4
     text-button
+    leading-snug
     rounded-lg
   `,
+  // 12(py-3) * 2 + 22(text-button * leading-snug) + boader * 2 = 48px
   md: `
     px-4
     py-3
     text-button
+    leading-snug
     rounded-lg
   `,
+  // 6(py-1.5) * 2 + 22(text-button * leading-snug) + boader * 2 = 36px
   sm: `
     px-3
     py-1.5
     my-1
     text-button
+    leading-snug
     rounded-md
   `,
+  // 6(py-1.5) * 2 + 14(text-button-sm) + boader * 2 = 28p
   xs: `
     px-2
-    py-[7px]
+    py-1.5
     my-2
     text-button-sm
-    !leading-[14px]
     rounded
   `
 }

package/packages/core/src/components/index.ts

@@ -1,32 +1,17 @@
-export { Button, type ButtonProps } from './Button'
+export { Button } from './Button'
+export { MenuButton } from './MenuButton'
 export { Card, CardImg, CardHeader, CardBody, CardFooter } from './Card'
-export type {
-  CardProps,
-  CardImgProps,
-  CardHeaderProps,
-  CardBodyProps,
-  CardFooterProps
-} from './Card'
-export { Code, type CodeProps } from './Code'
+export { LinkCard, LinkCardHeader } from './LinkCard'
+export { Code } from './Code'
 export { Faq, Question, Answer } from './Faq'
-export type { FaqProps, QuestionProps, AnswerProps } from './Faq'
 export { H1, H2, H3, H4, H5, H6 } from './Heading'
-export type { HeadingProps } from './Heading'
-export { Icon, type IconProps } from './Icon'
-export { IconButton, type IconButtonProps } from './IconButton'
-export { Link, type LinkProps } from './Link'
-export { Ol, Ul, type OlProps, type UlProps } from './List'
-export { Pre, type PreProps } from './Pre'
+export { Icon } from './Icon'
+export { IconButton } from './IconButton'
+export { Link } from './Link'
+export { Ol, Ul } from './List'
+export { NavigationItem } from './NavigationItem'
+export { Pre } from './Pre'
 export { Table, Caption, Thead, Tbody, Th, Tr, Td } from './Table'
-export type {
-  TableProps,
-  CaptionProps,
-  TheadProps,
-  TbodyProps,
-  ThProps,
-  TrProps,
-  TdProps
-} from './Table'
-
-/** @deprecated use Card instead */
-export { InfoCard } from './InfoCard'
+export { OverflowContainer } from './OverflowContainer'
+export { LangSelector } from './LangSelector'
+export { PopoverMenu, PopoverMenuItem } from './PopoverMenu'

package/packages/core/src/icons/Close.tsx

@@ -0,0 +1,21 @@
+import type { IconProps } from './props'
+
+export const Close = (props: IconProps) => {
+  const { size, className, ...rest } = props
+  return (
+    <svg
+      aria-hidden={true}
+      className={className}
+      fill="none"
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      {...rest}
+    >
+      <path
+        d="M6.39961 18.6496L5.34961 17.5996L10.9496 11.9996L5.34961 6.39961L6.39961 5.34961L11.9996 10.9496L17.5996 5.34961L18.6496 6.39961L13.0496 11.9996L18.6496 17.5996L17.5996 18.6496L11.9996 13.0496L6.39961 18.6496Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/packages/core/src/icons/CloseMobile.tsx

@@ -0,0 +1,43 @@
+import type { IconProps } from './props'
+
+export const CloseMobile = (props: IconProps) => {
+  const { size, className, ...rest } = props
+  return (
+    <svg
+      role="img"
+      aria-label={`${rest['aria-label'] ?? 'Language'}`}
+      className={className}
+      fill="none"
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      {...rest}
+    >
+      <title>Close</title>
+      <path
+        d="M37.0023 38.8911H32.8164V31.1197H37.0023V32.121H33.941V34.3415H36.8149V35.3319H33.941V37.8789H37.0023V38.8911Z"
+        fill="currentColor"
+      />
+      <path
+        d="M31.4644 36.7904C31.4644 37.2548 31.3568 37.6503 31.1416 37.9768C30.9264 38.3034 30.6175 38.5573 30.2148 38.7387C29.8122 38.9129 29.3332 39 28.7779 39C28.5071 39 28.2468 38.9818 27.9969 38.9455C27.747 38.9165 27.5145 38.873 27.2993 38.8149C27.0841 38.7569 26.8932 38.6843 26.7266 38.5972V37.487C27.0042 37.6177 27.3305 37.7374 27.7054 37.8462C28.0802 37.9478 28.462 37.9986 28.8508 37.9986C29.184 37.9986 29.4616 37.9514 29.6838 37.8571C29.9059 37.7628 30.0725 37.6322 30.1836 37.4653C30.2947 37.2984 30.3502 37.1025 30.3502 36.8775C30.3502 36.6381 30.2912 36.4385 30.1732 36.2789C30.0621 36.112 29.8851 35.9596 29.6421 35.8217C29.4061 35.6766 29.0868 35.5242 28.6842 35.3646C28.4065 35.2558 28.1531 35.136 27.924 35.0054C27.7019 34.8675 27.504 34.7079 27.3305 34.5265C27.1639 34.3451 27.0355 34.1347 26.9452 33.8952C26.855 33.6558 26.8099 33.3764 26.8099 33.0571C26.8099 32.629 26.9105 32.2626 27.1118 31.9578C27.3201 31.653 27.6047 31.4208 27.9657 31.2612C28.3267 31.0943 28.7466 31.0109 29.2256 31.0109C29.6282 31.0109 29.9996 31.0544 30.3398 31.1415C30.6869 31.2213 31.0166 31.3338 31.329 31.4789L30.975 32.4476C30.6903 32.3242 30.4023 32.2227 30.1107 32.1428C29.8191 32.063 29.5137 32.0231 29.1944 32.0231C28.9167 32.0231 28.6842 32.0666 28.4967 32.1537C28.3093 32.2408 28.167 32.3605 28.0698 32.5129C27.9796 32.6653 27.9344 32.8431 27.9344 33.0462C27.9344 33.2857 27.9865 33.4852 28.0906 33.6449C28.1948 33.8045 28.3614 33.9533 28.5904 34.0911C28.8195 34.2217 29.1215 34.3669 29.4964 34.5265C29.9129 34.6934 30.2669 34.8748 30.5585 35.0707C30.857 35.2666 31.0826 35.5025 31.2353 35.7782C31.388 36.0467 31.4644 36.3841 31.4644 36.7904Z"
+        fill="currentColor"
+      />
+      <path
+        d="M25.6862 34.9946C25.6862 35.5968 25.6133 36.1447 25.4675 36.6381C25.3287 37.1243 25.1135 37.5451 24.8219 37.9007C24.5373 38.2562 24.1763 38.5283 23.739 38.717C23.3086 38.9057 22.8053 39 22.2292 39C21.6391 39 21.1254 38.9057 20.6881 38.717C20.2577 38.5211 19.8967 38.249 19.6052 37.9007C19.3205 37.5451 19.1088 37.1206 18.97 36.6272C18.8311 36.1338 18.7617 35.5859 18.7617 34.9837C18.7617 34.1855 18.8867 33.4889 19.1366 32.8939C19.3865 32.2989 19.7683 31.8345 20.282 31.5007C20.8026 31.1669 21.4552 31 22.2396 31C23.0032 31 23.6384 31.1669 24.1451 31.5007C24.6588 31.8272 25.0441 32.2916 25.3009 32.8939C25.5578 33.4889 25.6862 34.1891 25.6862 34.9946ZM19.9488 34.9946C19.9488 35.6186 20.0286 36.1555 20.1883 36.6054C20.3479 37.0481 20.5978 37.3927 20.938 37.6394C21.2781 37.8789 21.7085 37.9986 22.2292 37.9986C22.7567 37.9986 23.1871 37.8789 23.5203 37.6394C23.8536 37.3927 24.1 37.0481 24.2596 36.6054C24.4193 36.1555 24.4991 35.6186 24.4991 34.9946C24.4991 34.0585 24.3187 33.3292 23.9577 32.8068C23.6036 32.2771 23.0309 32.0122 22.2396 32.0122C21.712 32.0122 21.2781 32.132 20.938 32.3714C20.5978 32.6109 20.3479 32.9519 20.1883 33.3946C20.0286 33.8372 19.9488 34.3705 19.9488 34.9946Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.8516 38.8911V31.1197H14.9761V37.8789H18.152V38.8911H13.8516Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.5403 32.0231C10.1724 32.0231 9.84268 32.092 9.55112 32.2299C9.25957 32.3605 9.00966 32.5564 8.80141 32.8177C8.60009 33.0789 8.4439 33.3945 8.33283 33.7646C8.2287 34.1347 8.17664 34.5519 8.17664 35.0163C8.17664 35.6258 8.26341 36.1555 8.43696 36.6054C8.61051 37.048 8.87082 37.3891 9.21792 37.6285C9.56501 37.868 10.0023 37.9877 10.5299 37.9877C10.8492 37.9877 11.1547 37.9587 11.4462 37.9007C11.7447 37.8353 12.0467 37.7519 12.3522 37.6503V38.6626C12.0606 38.7787 11.7621 38.8621 11.4567 38.9129C11.1512 38.9709 10.7972 39 10.3946 39C9.6379 39 9.00619 38.8367 8.49944 38.5102C7.99962 38.1836 7.62477 37.7192 7.37486 37.117C7.12495 36.5147 7 35.8109 7 35.0054C7 34.4177 7.07636 33.8807 7.22908 33.3945C7.38874 32.9011 7.61782 32.4766 7.91632 32.1211C8.21482 31.7655 8.58274 31.4934 9.02007 31.3047C9.46435 31.1088 9.97458 31.0109 10.5507 31.0109C10.9256 31.0109 11.2935 31.0544 11.6545 31.1415C12.0155 31.2213 12.3417 31.3374 12.6333 31.4898L12.2168 32.4694C11.9738 32.3533 11.71 32.2517 11.4254 32.1646C11.1477 32.0703 10.8527 32.0231 10.5403 32.0231Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.8947 26L11 24.1053L20.1053 15L11 5.89474L12.8947 4L22 13.1053L31.1053 4L33 5.89474L23.8947 15L33 24.1053L31.1053 26L22 16.8947L12.8947 26Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}