@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-7

package/src/components/atoms/fileDropdown/index.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { FileDropdown, Props } from './index'
+
+export default {
+  component: FileDropdown,
+  title: 'Atoms/FileDropDown',
+}
+
+const Template: Story<Props> = (args) => <FileDropdown {...args} />
+
+export const Normal = Template.bind({})
+
+Normal.args = {
+  id: 'dropdown1',
+  placeholder: 'CSV file',
+  placeholderIcon: undefined,
+  value: undefined,
+  options: [
+    {
+      type: 'upload',
+      label: 'Upload',
+      value: '1',
+      icon: undefined,
+      fileAcceptedType: '*',
+      multiple: true,
+    },
+    {
+      type: 'download',
+      label: 'Download',
+      value: '2',
+      icon: undefined,
+      url: 'http://unsplash.it/16',
+    },
+  ],
+  onUploadSelected: (e: FileList) => {
+    console.log(e)
+  },
+}

package/src/components/atoms/fileDropdown/index.styled.tsx

@@ -0,0 +1,112 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledDropdown = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
+  background: url('../../../public/bgSvg/arrow-down.svg') no-repeat;
+  background-position: right 16px center;
+  border-radius: 6px;
+
+  &[data-has-icons='true'] {
+    border: none;
+    background: ${(props: ThemeProps) => props.theme.colors.gray100};
+
+    img,
+    svg {
+      display: inline-block;
+      max-width: 16px;
+      margin-right: 6px;
+    }
+
+    span {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    &:hover {
+      box-shadow: none;
+    }
+    > div {
+      position: relative;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+    }
+    > div::after {
+      content: '';
+      right: 12px;
+      top: 50%;
+      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+      width: 10px;
+      height: 8px;
+      position: absolute;
+      background-repeat: no-repeat;
+      transform: translateY(-50%);
+    }
+  }
+
+  &:hover {
+    box-shadow: 0 0 2px 2px ${(props: ThemeProps) => props.theme.colors.blue200};
+  }
+`
+
+export const StyledDropdownName = styled.div`
+  padding: 12px 18px 12px 16px;
+  cursor: pointer;
+  &[data-dropdown-open] {
+    padding: 11px 15px 11px 15px;
+    border: 1px solid ${(props: ThemeProps) => props.theme.colors.primaryBase};
+    border-radius: 6px;
+    box-shadow: 0 0 2px 2px ${(props: ThemeProps) => props.theme.colors.blue200};
+  }
+
+  & > svg {
+    height: 16px;
+    width: 16px;
+  }
+`
+
+export const StyledDropdownList = styled.ul`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  display: block;
+  margin-top: 4px;
+  background: ${(props: ThemeProps) => props.theme.colors.white};
+  border-radius: 6px;
+  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
+    -2px 2px 5px rgba(67, 86, 100, 0.123689);
+  cursor: pointer;
+
+  &[data-has-icons='true'] {
+    background: white;
+    box-shadow: none;
+    border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
+    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
+  }
+`
+
+export const StyledDropdownOption = styled.li`
+  margin: 8px;
+  padding: 12px 18px 12px 16px;
+  border-radius: 6px;
+  display: flex;
+  &:hover,
+  :active {
+    background: ${(props: ThemeProps) => props.theme.colors.gray100};
+  }
+`
+export const StyledIcon = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+
+  & > svg {
+    height: 16px;
+    width: 16px;
+  }
+`

package/src/components/atoms/fileDropdown/index.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import { render, cleanup } from '@testing-library/react'
+import 'jest-styled-components'
+
+import { FileDropdown } from '.'
+import MockTheme from '../../../misc/mockTheme'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const dropdown = render(
+    <MockTheme>
+      <FileDropdown
+        id="dropdown1"
+        placeholder="CSV file"
+        placeholderIcon={undefined}
+        value={undefined}
+        options={[
+          {
+            type: 'upload',
+            label: 'Upload',
+            value: '1',
+            icon: undefined,
+            fileAcceptedType: '*',
+            multiple: false,
+          },
+          {
+            type: 'download',
+            label: 'Download',
+            value: '2',
+            icon: undefined,
+            url: 'http://unsplash.it/16',
+          },
+        ]}
+        onUploadSelected={(e: FileList) => {
+          console.log(e)
+        }}
+      />
+    </MockTheme>,
+  )
+
+  const self = dropdown.container.firstChild
+
+  expect(self).toMatchSnapshot()
+})

package/src/components/atoms/fileDropdown/index.tsx

@@ -0,0 +1,200 @@
+import React, { useRef, useState } from 'react'
+
+import { CSSProperties } from 'styled-components'
+
+import {
+  StyledDropdown,
+  StyledDropdownName,
+  StyledDropdownList,
+  StyledDropdownOption,
+  StyledIcon,
+} from './index.styled'
+
+type Option = {
+  label: string
+  value: string
+  type: 'upload' | 'download'
+  icon?: JSX.Element
+  url?: string
+  fileAcceptedType?: string
+  multiple?: boolean
+}
+
+export type Props = {
+  options: Array<Option>
+  placeholder: string
+  id: string
+  placeholderIcon?: JSX.Element
+  onUploadSelected?: (e: FileList) => void
+  value?: Option
+  className?: string
+  style?: CSSProperties
+}
+
+const FileDropdown = ({
+  className,
+  value,
+  options,
+  onUploadSelected,
+  id,
+  placeholderIcon,
+  placeholder,
+  style,
+}: Props) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const showDropdown = () => setIsDropdownOpen(!isDropdownOpen)
+  const inputList = useRef(
+    options.map((option) => {
+      return (
+        option.type === 'upload' && (
+          <input
+            id={'uploader-dropdown-input-' + id + '-' + option.value}
+            key={'uploader-dropdown-input-' + id + '-' + option.value}
+            accept={option.fileAcceptedType}
+            multiple={option.multiple}
+            type="file"
+            style={{ display: 'none' }}
+            onChange={(e) => {
+              console.log('change')
+              onUploadSelected(e.target.files)
+            }}
+          />
+        )
+      )
+    }),
+  )
+
+  const defaultFileIcon = (
+    <svg
+      id="prefix__Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 12.17 14.83"
+    >
+      <defs>
+        <clipPath id="prefix__clip-path" transform="translate(-1.92 -1.54)">
+          <path fill="none" d="M0 .96h16v16H0z" />
+        </clipPath>
+        <style>
+          {
+            '.prefix__cls-3{fill:none;stroke:#595959;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
+          }
+        </style>
+      </defs>
+      <title>{'File'}</title>
+      <g clipPath="url(#prefix__clip-path)">
+        <path
+          className="prefix__cls-3"
+          d="M8.67 2.29H4a1.33 1.33 0 00-1.33 1.33v10.67A1.33 1.33 0 004 15.62h8a1.33 1.33 0 001.33-1.33V7z"
+          transform="translate(-1.92 -1.54)"
+        />
+        <path
+          className="prefix__cls-3"
+          d="M8.67 2.29V7h4.66"
+          transform="translate(-1.92 -1.54)"
+        />
+      </g>
+    </svg>
+  )
+
+  const downloadIcon = (
+    <svg
+      id="prefix__Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 13.5 13.5"
+    >
+      <defs>
+        <style>
+          {
+            '.prefix__cls-1{fill:none;stroke:#595959;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
+          }
+        </style>
+      </defs>
+      <title>{'download'}</title>
+      <path
+        className="prefix__cls-1"
+        d="M14 11v2.66A1.33 1.33 0 0112.67 15H3.33A1.33 1.33 0 012 13.62V11M4.67 7.62L8 11l3.33-3.34M8 11V3"
+        transform="translate(-1.25 -2.21)"
+      />
+    </svg>
+  )
+
+  const uploadIcon = (
+    <svg
+      id="prefix__Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 13.5 13.5"
+    >
+      <defs>
+        <style>
+          {
+            '.prefix__cls-1{fill:none;stroke:#595959;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
+          }
+        </style>
+      </defs>
+      <title>{'upload'}</title>
+      <path
+        className="prefix__cls-1"
+        d="M14 11v2.66A1.33 1.33 0 0112.67 15H3.33A1.33 1.33 0 012 13.62V11M11.33 6.29L8 3 4.67 6.29M8 3v8"
+        transform="translate(-1.25 -2.21)"
+      />
+    </svg>
+  )
+
+  const onUpload = (dropdownId: string) => {
+    ;(document.querySelector(dropdownId) as HTMLElement)?.click()
+  }
+
+  const onDownload = (url: string) => {
+    url && window.open(url, '_blank')
+  }
+
+  return (
+    <StyledDropdown
+      className={className}
+      data-dropdown-open={!!isDropdownOpen}
+      id={id}
+      data-has-icons
+      style={style}
+      onBlur={() => setIsDropdownOpen(false)}
+      tabIndex={0}
+    >
+      <StyledDropdownName onClick={showDropdown}>
+        {placeholderIcon || defaultFileIcon}{' '}
+        <span>{value && value.value ? value.label : placeholder}</span>
+      </StyledDropdownName>
+
+      {isDropdownOpen && (
+        <StyledDropdownList onClick={showDropdown} data-has-icons>
+          {options.map((option) => (
+            <StyledDropdownOption
+              key={`${id}-${option.value}`}
+              data-selected={
+                (value && value.value === option.value) || undefined
+              }
+              onClick={() =>
+                option.type === 'upload'
+                  ? onUpload(
+                      '#uploader-dropdown-input-' + id + '-' + option.value,
+                    )
+                  : onDownload(option.url)
+              }
+            >
+              <StyledIcon>
+                {option.icon || option.type === 'download'
+                  ? downloadIcon
+                  : uploadIcon}
+              </StyledIcon>
+              {option.label}
+            </StyledDropdownOption>
+          ))}
+        </StyledDropdownList>
+      )}
+      <>{inputList.current}</>
+    </StyledDropdown>
+  )
+}
+
+export { FileDropdown }

package/src/components/atoms/flag/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+.c0 {
+  --width: 100;
+  --height: 100;
+  width: calc(var(--width) * 1px);
+  height: calc(var(--height) * 1px);
+}
+
+.c0 img,
+.c0 svg {
+  width: calc(var(--width) * 1px);
+  height: calc(var(--height) * 1px);
+}
+
+.c0 img {
+  object-fit: contain;
+}
+
+<div
+  class="c0"
+>
+  <svg
+    fill="none"
+    viewBox="0 0 24 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      clip-path="url(#id-flag-clip-1)"
+    >
+      <rect
+        fill="#CE1126"
+        height="8"
+        width="24"
+        y="0.0166016"
+      />
+      <rect
+        fill="white"
+        height="8"
+        width="24"
+        y="8.0166"
+      />
+    </g>
+    <defs>
+      <clippath
+        id="id-flag-clip-1"
+      >
+        <rect
+          fill="white"
+          height="16"
+          rx="2"
+          width="24"
+        />
+      </clippath>
+    </defs>
+  </svg>
+</div>
+`;

package/src/components/atoms/flag/icons/cambodia.tsx

@@ -0,0 +1,24 @@
+import React, { DetailedHTMLProps, ImgHTMLAttributes } from 'react'
+
+export type Props = DetailedHTMLProps<
+  ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+>
+
+export const CambodiaRoundIcon = (props: Props) => (
+  <img
+    src="data:image/png;base64,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"
+    style={{
+      borderRadius: '50%',
+      ...props.style,
+    }}
+    {...props}
+  />
+)
+
+export const CambodiaSquareIcon = (props: Props) => (
+  <img
+    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABACAYAAADlNHIOAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAZZSURBVHgB7ZxLTFRXGMe/O48KBRStFLQ2jhWFpLZgtAmGIJiYaKsJJJqw0KULm9iIexOGRHcmYLqou25c2MYFJiaVhQkmJLIwOqQ2JQHK0NIClccY3oXx9vuf8pEbnBkelnNmkvNLLnNf5x7yvc53vnNzHVpBacW3NW6c6hxya4mcEFneGZco4pATIb+/qbvz66j3miM7oZrv87NnJhtd12kgy6bhOE7L7D8LTdHItZg6xh8If8v0VDsflJFl04FHzC8snoASfDgBy7fC1wfLujz7vWCj2i+t+C5E8cV+sujHTyd8LPwwWYyAZMfnkmNDjyE4M6r1cbpZThZDuCEfWYxiFWAYqwDDWAUYxirAMFYBhgnU//UTWczh/KJqQxZT2BBkmIxVwEwgQIM3blCspYXGsrIoUwlQhjJ58SKVXbqk9ntivLYRDlMmkpEKGMzNJSoupuHhYXU8v3Mn9eTn04FYjDKNjAxBwfPn6ZP6eioqKqJcVsan587RnitXKBNJGwUgpq81ln949qwSfm9vrzqenp6mvLq6NbVdTz86SAsFQCBbnz6lrHv3aDaQOirielZ5uQo/lZWVtH//fpqamqLdJSX0J0LTKv3Q/fv0eU8PxViB6UB6KKCqimaDQdpx6BD9evRoynt7tm+ngUePlNVD8NjA8ydPlHWn4ueCAgqGQjQ6P08Dhw9TOmB8Igar3P3yJbmuq4T6enCQcjicZC8uJrz/tzt3qObCBRV+EP8dx1FKKCsro+7Hj+nNyZPJ+3r4kLbu2aP2CwsLqXffPtoxN0cmMe4BLls8wkhfX58KK8fPnKGhJSElonBp4M3Ly+NEqFi1xTGUkJOTk7QdnlnFzxaPUcpLoSxdGE9DX7EFdnR0KAseGRmhrq4u8nFKuZK506dpsrSU8rZtU8pSFsxeAIGW85iAc1nc7lVDA+WzIoM8nngZz85WCobgsaGv/rExyuKwlczbdGDcA/Ju3qRdu3apUJK7NIjOXr/+1n05NTVU3dxMfh4DRIjwAAhf8LMCcE+ijGjH1atK6EWewbegsXHVQX+zMaYASQdh+TKYShhBWMG1ZIOqWD68BRv2JSVN1s/BI0eWQ5Vs6DtVPzow1nOMc/nPeEAFYpUQEAQJJRyMRul5ezsVLOXsEFIJ/4rgEHLwS55zGMQB4v2W1la13z86Sse5LzA2NKS8TfpBGAtxHzO3bhHdvUsmMOp/EAAECWD1AHEaGRGuHa6uXlaOWDzuE0ELECYEC8VFIhGlDAlnQW6DZyH8IMxhX54nIenvVeYPm4mxELQwMKAEAKFJZgKgAAgY17yCFoFCYFID8oJzXk/ygmdJ2PL2JcqY4DTYFMYUsPfFC/q9s1MJWSwUQsTAWrxUaBOveBfgDUMcevAsCV1AlIH/YSdnYaYwnoZK7i6egE0sWCwX5K4jTCAMeb0Hz4Z3rMyCVoYyE6RNOVoylETnMSZs5HlgI211klHlaBEqLNrrEZgVJ9rPBIwpAPl3CefmiMkIDUAmWFLnkYwIoQL3QfD4XRmOJA2VLEnmBtiQ+WDDOSAhT56xjVNWk+VpIyEIFU8f12FQCgCSoQApF+BYMhs5loEayHWhra1teV/ayH2iTPQjY4D0g2OUL2Z4MP6Y5wS6MVINneZJ0he1tcvHYp0AFu8tLyQDbXAvrBvIpGyjbf5gBUweO0a60eoBWMvdwgvpDs9qvUIXS4ZgICDvtWTAG9Y7wKZqE+c1gkn2BD/PznWWqLV6ABbOaycm3jqfDh4gPOBin87FfW0eINafyLrTwQOE+OXLNN7Sos0LtHlAMusH6eQBQKcXaFHA7NJbbHtPnUp4XQplYp1So0mFpK5Syki1GrbeNgOcUX0QDmvxAi0KGOc8+wCXl5MJNt08QKWsmtaLtYwBWPJ7xqtcyeo53twfv6/XUPeRNgDt1vKayVrb4FqRpmVK+3q6Yezr6YaxCjBM4MePviKLOQI/7P6SLOawIcgwVgGGsQowjFWAYawCDGMVYBhWgBMlixG4JBjBJ8sekMUIXJeN+Lg620oWM/gXmnzdz75pd97QbbJohUvQt7s7r0XVIDwbXwzjc7pk0YLruF3zOf99r1UpAN8wxreMrSdsPrD8+ffjNdF2z8e7vZRWNIcoHgjjg672m6L/F07U5WTH4fEWId975V/qDlmhdHIRiQAAAABJRU5ErkJggg=="
+    {...props}
+  />
+)

package/src/components/atoms/flag/icons/english.tsx

@@ -0,0 +1,195 @@
+import React, { SVGProps } from 'react'
+
+export type Props = SVGProps<SVGSVGElement>
+
+export const EnglishRoundIcon = (props: Props) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={{
+      borderRadius: '50%',
+      ...props.style,
+    }}
+    {...props}
+  >
+    <g>
+      <mask
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <circle cx="10" cy="10" r="10" fill="#C4C4C4" />
+      </mask>
+      <path
+        d="M7.49953 0.327881C5.47199 0.850891 3.69346 1.98591 2.37793 3.53444L7.49953 6.6655V0.327881Z"
+        fill="#3F51B5"
+      />
+      <path
+        d="M2.30273 16.3824C3.62476 17.9749 5.4353 19.1399 7.50034 19.6729V13.2053L2.30273 16.3824Z"
+        fill="#3F51B5"
+      />
+      <path
+        d="M0.328125 12.5C0.334625 12.526 0.341125 12.5515 0.348125 12.5775L0.474128 12.5H0.328125Z"
+        fill="white"
+      />
+      <path
+        d="M17.7871 3.73445C16.4571 2.08391 14.6131 0.872891 12.499 0.327881V6.96651L17.7871 3.73445Z"
+        fill="#3F51B5"
+      />
+      <path
+        d="M12.499 19.6722C14.6506 19.1172 16.5196 17.8707 17.8546 16.1752L12.499 12.9021V19.6722Z"
+        fill="#3F51B5"
+      />
+      <path
+        d="M0.376626 7.31055C0.359125 7.37305 0.344125 7.43705 0.328125 7.50005H0.686632L0.376626 7.31055Z"
+        fill="white"
+      />
+      <path
+        d="M19.8745 8.50006C19.827 8.18506 19.7655 7.87555 19.6895 7.57104L18.1699 8.50006H19.8745Z"
+        fill="white"
+      />
+      <path
+        d="M0.686034 7.50024H0.327527C0.243026 7.82775 0.175524 8.16076 0.124023 8.50026H2.32207L0.686034 7.50024Z"
+        fill="white"
+      />
+      <path
+        d="M19.7197 12.3148C19.7832 12.0473 19.8337 11.7752 19.8752 11.5002H18.3867L19.7197 12.3148Z"
+        fill="white"
+      />
+      <path
+        d="M2.10956 11.5002H0.124023C0.175024 11.8398 0.243026 12.1728 0.327527 12.5003H0.47403L2.10956 11.5002Z"
+        fill="white"
+      />
+      <path
+        d="M8.50002 7.27665V0.124512C8.16051 0.175513 7.82751 0.243514 7.5 0.328016V6.66564L8.50002 7.27665Z"
+        fill="white"
+      />
+      <path
+        d="M11.5 12.2913V19.8759C11.8395 19.8249 12.1725 19.7569 12.5 19.6724V12.9023L11.5 12.2913Z"
+        fill="white"
+      />
+      <path
+        d="M7.5 13.205V19.6721C7.82751 19.7566 8.16051 19.8241 8.50002 19.8756V12.594L7.5 13.205Z"
+        fill="white"
+      />
+      <path
+        d="M11.5925 7.34715L11.7345 7.43415L12.5 6.96614V0.328016C12.1725 0.243514 11.8395 0.176013 11.5 0.124512V7.49865L11.5925 7.34715Z"
+        fill="white"
+      />
+      <path
+        d="M2.32251 8.50002H7.01761L8.50014 7.594V7.277L7.50011 6.66548L2.37852 3.53442C1.95151 4.03743 1.572 4.58144 1.24949 5.16296L5.02507 7.5H2.29701L0.650482 6.47648C0.54748 6.74949 0.455478 7.02699 0.375977 7.3105L0.686483 7.5L2.32251 8.50002Z"
+        fill="white"
+      />
+      <path
+        d="M11.7344 7.43419L13.4784 8.50021H18.171L19.6905 7.57119C19.528 6.92118 19.303 6.29767 19.02 5.70516L16.139 7.50019H13.4109L18.317 4.45013C18.1515 4.20313 17.9735 3.96562 17.7875 3.73462L12.4999 6.96618L11.7344 7.43419Z"
+        fill="white"
+      />
+      <path
+        d="M5.02448 7.50013L1.2494 5.16309C1.0169 5.58259 0.821394 6.0231 0.650391 6.47661L2.29642 7.50013H5.02448Z"
+        fill="#E53935"
+      />
+      <path
+        d="M16.1392 7.50024L19.0207 5.70521C18.8132 5.2702 18.5837 4.84819 18.3177 4.45068L13.4111 7.50024H16.1392Z"
+        fill="#E53935"
+      />
+      <path
+        d="M11.5 11.5002V12.2913L12.5 12.9023L17.8556 16.1758C18.2416 15.6853 18.5836 15.1593 18.8736 14.6008L15.4856 12.5003H18.2136L19.4432 13.2673C19.5507 12.9563 19.6432 12.6393 19.7197 12.3153L18.3871 11.5002H11.5Z"
+        fill="white"
+      />
+      <path
+        d="M13.4785 8.50019L11.7345 7.43417L11.5925 7.34717L11.5 7.49867V8.50019H13.4785Z"
+        fill="white"
+      />
+      <path
+        d="M8.49934 12.5943V11.5002H2.10921L0.473182 12.5003L0.34668 12.5778C0.522683 13.2383 0.762688 13.8713 1.06319 14.4708L4.16375 12.5003H6.89181L1.80071 15.7168C1.95971 15.9448 2.12471 16.1688 2.30172 16.3823L7.49932 13.2053L8.49934 12.5943Z"
+        fill="white"
+      />
+      <path
+        d="M7.01758 8.50026H8.50011V7.59424L7.01758 8.50026Z"
+        fill="white"
+      />
+      <path
+        d="M15.4854 12.5L18.8729 14.6C19.0949 14.173 19.2834 13.727 19.4429 13.2665L18.2134 12.5H15.4854Z"
+        fill="#E53935"
+      />
+      <path
+        d="M4.16501 12.5L1.06445 14.4705C1.28196 14.9045 1.52596 15.3216 1.80197 15.7166L6.89307 12.5H4.16501Z"
+        fill="#E53935"
+      />
+      <path
+        d="M13.4785 8.5H11.5V11.5001H18.3871H19.8757C19.9497 11.0095 20.0002 10.511 20.0002 10C20.0002 9.48902 19.9497 8.99051 19.8757 8.5H18.1711H13.4785Z"
+        fill="#E53935"
+      />
+      <path
+        d="M8.50017 11.5001V8.5H7.01764H2.32255H0.124502C0.050501 8.99051 0 9.48902 0 10C0 10.511 0.050501 11.0095 0.124502 11.5001H2.11004H8.50017Z"
+        fill="#E53935"
+      />
+      <path
+        d="M11.5001 19.8759V12.2912V11.5002V8.50016V7.49865V0.124502C11.0095 0.050501 10.511 0 10 0C9.48902 0 8.99051 0.050501 8.5 0.124502V7.27664V7.59365V8.50016V11.5002V12.5942V19.8759C8.99051 19.9499 9.48902 20.0004 10 20.0004C10.511 20.0004 11.0095 19.9499 11.5001 19.8759Z"
+        fill="#E53935"
+      />
+    </g>
+  </svg>
+)
+
+export const EnglishSquareIcon = (props: Props) => (
+  <svg
+    viewBox="0 0 26 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g>
+      <mask
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="1"
+        y="5"
+        width="24"
+        height="16"
+      >
+        <path
+          d="M1.08301 7.41675C1.08301 6.31218 1.97844 5.41675 3.08301 5.41675H22.9163C24.0209 5.41675 24.9163 6.31218 24.9163 7.41675V18.5834C24.9163 19.688 24.0209 20.5834 22.9163 20.5834H3.08301C1.97844 20.5834 1.08301 19.688 1.08301 18.5834V7.41675Z"
+          fill="#3F51B5"
+        />
+      </mask>
+      <path
+        d="M1.08301 5.41675H24.9163V20.5834H1.08301V5.41675Z"
+        fill="#3F51B5"
+      />
+      <path
+        d="M1.08301 7.70041L12.3551 14.5899L14.05 11.8165L3.57901 5.41675H1.08301V7.70041Z"
+        fill="white"
+      />
+      <path
+        d="M24.9165 5.41675H22.9616L12.4912 11.816L14.1855 14.5899L24.9165 8.03083V5.41675Z"
+        fill="white"
+      />
+      <path
+        d="M14.1855 10.9802L12.4912 13.7536L23.6658 20.5834H24.9165V17.5387L14.1855 10.9802Z"
+        fill="white"
+      />
+      <path
+        d="M1.08301 17.8702V20.5834H2.87592L14.05 13.7541L12.3556 10.9802L1.08301 17.8702Z"
+        fill="white"
+      />
+      <path
+        d="M1.08301 10.8333H24.9163V15.1666H1.08301V10.8333Z"
+        fill="white"
+      />
+      <path d="M10.833 5.41675H15.1663V20.5834H10.833V5.41675Z" fill="white" />
+      <path
+        d="M9.32609 10.8334L1.08301 5.79537V7.06504L7.24826 10.8334H9.32609ZM24.0004 5.41675L15.1376 10.8334H17.2149L24.9163 6.12687V5.41675H24.0004ZM17.9191 15.1667L24.9163 19.4432V18.1735L19.9964 15.1667H17.9191ZM8.62192 15.1667L1.08301 19.7742V20.5834H1.83701L10.6992 15.1667H8.62192ZM1.08301 11.9167H24.9163V14.0834H1.08301V11.9167Z"
+        fill="#E53935"
+      />
+      <path
+        d="M11.917 5.41675H14.0837V20.5834H11.917V5.41675Z"
+        fill="#E53935"
+      />
+    </g>
+  </svg>
+)