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

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

@@ -0,0 +1,24 @@
+import React, { DetailedHTMLProps, ImgHTMLAttributes } from 'react'
+
+export type Props = DetailedHTMLProps<
+  ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+>
+
+export const IndiaRoundIcon = (props: Props) => (
+  <img
+    src="data:image/png;base64,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"
+    style={{
+      borderRadius: '50%',
+      ...props.style,
+    }}
+    {...props}
+  />
+)
+
+export const IndiaSquareIcon = (props: Props) => (
+  <img
+    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABACAYAAADlNHIOAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAURSURBVHgB7Zy/jxtFFMff7Dmxr8E2xSEhkWwKqILOVoIUiaA4RDQgFOcvuLsOKjtlKtsV6WJXQULCTkEEBeTcUHHkIoKEFCT7CNWlsA8aLkKyHSR0DjkP832bWUyoENzNrPQ+kr27M7uR8r7zfsxb6xQ9g/6oUCK9UCatLxKpkIT/jqK++e7T/pGGev+74d+nnqLbpRw9flQzQ1USDhDVpKNPGmqtP+YrfEXG/23TnC6TcPDAI47sn4cIAQ/wyhfjHxqaCvQ4BZuT0tfPhBT8MSDh8Jmp84Exfp0ENyzMygEpJaHHFVpdDEy5WSDBFWFAglNEAMeIAI4RARwjAjhGBHCMCOAYEcAxIoBjRADHpOjFUyS4Q2kDCc6QEOSYFCWM8XhK6+vbtLMzoeHwEY+F4XN07twxKpWOUdJITAgaDie0tvYlbW7+FI8VCkuEF6yYG4/3KJfLULn8MtVqrxtRspQEEiFAq/U9VasbZoW/xEa+du0CH+fp93ep0bgbewXugRjeoz2nXr9rFshVXSp9okejPR4bDMZ8fvv2Dl/3ervx/UYIHYbX+Rk86zteC2CN32zeY4Pj0+v9wnM4QgCM3bq1zWNWEIxVKl/xs3bMV7ytghDXjQAcdiqV0+Z6bMJO2oSah5yI79z5mSaTKcf+KCFP+DnMYaxeP2tyxAt06dIXPOYr3gpw+fLXnGRrtbN8HYY5unHjvonrr3BOgJFhdAgCYRD/YfBudztOwM3mm4Qk3WrdI1/xMgnDsCdOfEirqyep3X7HlJ0PeByCwPjArmoIgXEYHWJAMIgAMZaXl6hY7LD3jEZ+/uLSSwE6nfvGAzbYaDA0VjhEaTS+5Zp/Ptyg9sc1PjA6/jvV6mvxM7inWGxTr7fK877hZQja2nrIRxvPcd3tPuCVbstMgPNmM/KIaE+g2RMQqiDifKlq/03f8HInjFAyv6vNZtMcTpBssbJBp/MjiwMQoqL7dRyO8MG8Pbde4xteeoBdudbYNt5ns5nYqHbO3hd9MiYEqX9s0qQK+pfkcke55RDF/wyvXqx+fCxY8ZiDGNZbonC1y0kYXgTm2xQ+4qUAzyZLtBTQbIMhcYQ4SMaokqrV0yyUTcJgZeXVuA0xmURhCiHMR7ysgmDQfL4Zl6FYzUpFucDW+3YfABCaisUlFgb324YdPANlKO4dDN4jH/E0BKWflpdRxYPEevx4lishGNgCb4AYMD7EwB4AFRCeteUpjL+ycpK8RXsKejhRE+4mX9sekO3/tNs/aPNegBtz6BXhiHswZ5t1hcLH3JjDta9424rACkZfH+EEtT5aESCfz7CH5PNpDklIrvAOJGOlFM/hHDtmhC60pb1+N6A9p1b7hj2hXP48Xsn2aNvQONpWNY62HY1nfScRL2TQFY3aEFnOB1jV0X4g8gq7IcMbM1t+tttvJ+KFTKJeSaICwg4YIPRErYlJ3LLAWKVyKu4FJYHE/SzFtqCx4bJlKDzDVkRJMbxFfhfkGPldkGPUuzffEg9wiHr+aloEcIiEIMeIAI4RARwjAjhGBHCMCOAYEcAxIoBjRADHiACOgQBDEtygdD8gTV0S3KCpHwSk1klwwkwHjYXfN54MFy+k8qToDAmHhtLUGl2ZfspJeDad1uEOJBwOmrb2p4t1nC7ga2+T9tJv7H+mFlKL4gkHC1b+bLq4Oq6P//rj3fPkPsiEAc3qZmrZzMrfFP1/GKLYQb799YpZ7nP8CZLS5lD+sCLsAAAAAElFTkSuQmCC"
+    {...props}
+  />
+)

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

@@ -0,0 +1,55 @@
+import React, { SVGProps, useRef } from 'react'
+
+export type Props = SVGProps<SVGSVGElement> & {
+  isTesting?: boolean
+}
+
+export const IndonesiaRoundIcon = ({ isTesting, ...rest }: Props) => {
+  const maskId = useRef('id-flag-round-mask-' + (isTesting ? 1 : Math.random()))
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <mask
+        id={maskId.current}
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <circle cx="10" cy="10" r="10" fill="#C4C4C4" />
+      </mask>
+      <g mask={`url(#${maskId.current})`}>
+        <rect width="20" height="10" fill="#CE1126" />
+        <rect y="10" width="20" height="10" fill="white" />
+      </g>
+    </svg>
+  )
+}
+
+export const IndonesiaSquareIcon = ({ isTesting, ...rest }: Props) => {
+  const clipPathId = useRef('id-flag-clip-' + (isTesting ? 1 : Math.random()))
+  return (
+    <svg
+      viewBox="0 0 24 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <g clipPath={`url(#${clipPathId.current})`}>
+        <rect y="0.0166016" width="24" height="8" fill="#CE1126" />
+        <rect y="8.0166" width="24" height="8" fill="white" />
+      </g>
+      <defs>
+        <clipPath id={clipPathId.current}>
+          <rect width="24" height="16" rx="2" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

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

@@ -0,0 +1,89 @@
+import React, { SVGProps } from 'react'
+
+export type Props = SVGProps<SVGSVGElement>
+
+export const MalaysiaRoundIcon = (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>
+      <rect y="1" width="20" height="20" fill="#CC0001" />
+      <rect y="16.106" width="20" height="1.02041" fill="white" />
+      <rect y="16" width="20" height="1.02041" fill="white" />
+      <rect y="18" width="20" height="1.02041" fill="white" />
+      <rect y="14.0652" width="20" height="1.02041" fill="white" />
+      <rect y="12.0242" width="20" height="1.02041" fill="white" />
+      <rect y="9.9834" width="20" height="1.02041" fill="white" />
+      <rect y="7.94263" width="20" height="1.02041" fill="white" />
+      <rect y="5.90186" width="20" height="1.02041" fill="white" />
+      <rect y="3.86084" width="20" height="1.02041" fill="white" />
+      <rect y="2" width="20" height="1.02041" fill="white" />
+      <rect width="20" height="1.02041" fill="white" />
+      <rect y="-1" width="10" height="12" fill="#010066" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.11387 3.86084C2.92711 3.86084 1.96387 5.23232 1.96387 6.92206C1.96387 8.6118 2.92711 9.98329 4.11387 9.98329C4.54263 9.98329 4.94211 9.80406 5.27763 9.4957C5.08225 9.59203 4.87256 9.64471 4.65427 9.64471C3.60193 9.64471 2.74786 8.42866 2.74786 6.93032C2.74786 5.43198 3.60193 4.21594 4.65427 4.21594C4.88682 4.21594 5.10959 4.27527 5.31571 4.38397C4.97256 4.0538 4.5589 3.86084 4.11387 3.86084Z"
+        fill="#FFCC00"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.67935 8.51573L6.7737 7.8407L7.04147 9.22221L6.43573 8.06657L6.24676 9.47313L6.0609 8.06576L5.4526 9.2188L5.72343 7.83844L4.81629 8.50957L5.49017 7.42963L4.46387 7.48593L5.40732 6.9203L4.46512 6.35062L5.4913 6.41133L4.81981 5.3285L5.72546 6.00353L5.45769 4.62202L6.06343 5.77766L6.25241 4.37109L6.43827 5.77847L7.04656 4.62543L6.77574 6.00579L7.68287 5.33466L7.00899 6.4146L8.0353 6.3583L7.09184 6.92392L8.03404 7.49361L7.00786 7.43289L7.67935 8.51573Z"
+        fill="#FFCC00"
+      />
+    </g>
+  </svg>
+)
+
+export const MalaysiaSquareIcon = (props: Props) => (
+  <svg
+    viewBox="0 0 24 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect width="24" height="16" rx="2" fill="#CC0001" />
+    <rect y="12.2712" width="24" height="0.777454" fill="white" />
+    <rect y="12.1904" width="24" height="0.777454" fill="white" />
+    <rect y="13.7144" width="24" height="0.777454" fill="white" />
+    <rect y="10.7161" width="24" height="0.777454" fill="white" />
+    <rect y="9.16138" width="24" height="0.777454" fill="white" />
+    <rect y="7.60645" width="24" height="0.777454" fill="white" />
+    <rect y="6.05127" width="24" height="0.777454" fill="white" />
+    <rect y="4.49658" width="24" height="0.777454" fill="white" />
+    <rect y="2.94141" width="24" height="0.777454" fill="white" />
+    <rect y="1.52393" width="24" height="0.777454" fill="white" />
+    <rect width="24" height="0.777454" fill="white" />
+    <path d="M0 2C0 0.895431 0.895431 0 2 0H12V8.38095H0V2Z" fill="#010066" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.93644 1.52393C3.51233 1.52393 2.35645 2.56887 2.35645 3.85629C2.35645 5.14371 3.51233 6.18865 4.93644 6.18865C5.45096 6.18865 5.93034 6.05209 6.33296 5.81716C6.09851 5.89054 5.84688 5.93068 5.58492 5.93068C4.32212 5.93068 3.29724 5.00417 3.29724 3.86258C3.29724 2.72099 4.32212 1.79448 5.58492 1.79448C5.86399 1.79448 6.13132 1.83968 6.37865 1.9225C5.96688 1.67094 5.47049 1.52393 4.93644 1.52393Z"
+      fill="#FFCC00"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.216 5.07041L8.12923 4.55611L8.45055 5.60869L7.72366 4.72819L7.49689 5.79987L7.27386 4.72758L6.5439 5.60609L6.86889 4.55439L5.78033 5.06572L6.58899 4.24291L5.35742 4.28581L6.48957 3.85485L5.35893 3.42081L6.59034 3.46707L5.78456 2.64205L6.87133 3.15636L6.55001 2.10378L7.2769 2.98427L7.50367 1.9126L7.7267 2.98488L8.45666 2.10638L8.13166 3.15808L9.22022 2.64674L8.41157 3.46955L9.64314 3.42666L8.51099 3.85761L9.64163 4.29165L8.41022 4.2454L9.216 5.07041Z"
+      fill="#FFCC00"
+    />
+  </svg>
+)

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

@@ -0,0 +1,105 @@
+import React, { SVGProps } from 'react'
+
+export type Props = SVGProps<SVGSVGElement>
+
+export const MyanmarRoundIcon = (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>
+      <rect x="-4" y="-1" width="28" height="11" fill="#FECB00" />
+      <rect x="-4" y="10" width="28" height="10" fill="#EA2839" />
+      <rect x="-4" y="6.7041" width="28" height="6.47773" fill="#34B233" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.56543 10.3272L10.1796 5.15527L11.7938 10.3272H8.56543Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.5292 11.2775L7.18336 14.5129L8.91745 9.37991L11.5292 11.2775Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.75181 11.8648L5.33182 8.73143L10.7494 8.79447L9.75181 11.8648Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.6105 8.78962L15.0281 8.72658L10.6081 11.86L9.6105 8.78962Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.4424 9.37686L13.1765 14.5098L8.83064 11.2744L11.4424 9.37686Z"
+        fill="white"
+      />
+    </g>
+  </svg>
+)
+
+export const MyanmarSquareIcon = (props: Props) => (
+  <svg
+    viewBox="0 0 24 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect width="24" height="16" rx="2" fill="#FECB00" />
+    <rect y="8.3811" width="24" height="7.61905" rx="2" fill="#EA2839" />
+    <rect y="5.86987" width="24" height="4.93542" fill="#34B233" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.7705 8.63046L12.1541 4.68994L13.5377 8.63046H10.7705Z"
+      fill="white"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.3108 9.35502L9.58574 11.8201L11.0721 7.90925L13.3108 9.35502Z"
+      fill="white"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.7874 9.80216L7.99884 7.41482L12.6425 7.46285L11.7874 9.80216Z"
+      fill="white"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.6667 7.4589L16.3104 7.41087L12.5218 9.79821L11.6667 7.4589Z"
+      fill="white"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.2361 7.90629L14.7225 11.8171L10.9974 9.35207L13.2361 7.90629Z"
+      fill="white"
+    />
+  </svg>
+)

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

@@ -0,0 +1,24 @@
+import React, { DetailedHTMLProps, ImgHTMLAttributes } from 'react'
+
+export type Props = DetailedHTMLProps<
+  ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+>
+
+export const PhilippinesRoundIcon = (props: Props) => (
+  <img
+    src="data:image/png;base64,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"
+    style={{
+      borderRadius: '50%',
+      ...props.style,
+    }}
+    {...props}
+  />
+)
+
+export const PhilippinesSquareIcon = (props: Props) => (
+  <img
+    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABACAYAAADlNHIOAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUySURBVHgB7ZxPaBxVHMe/b2LW1koSoSIKabc3oUoj+P9i4kVKBduTigcroj0oFsFDBaEJeKkemkUFqZWmJ5McpD1IxUuCNFEEyUoTGlckq22J2mI2ccPGLDuvv9/bnWWS7GY2u/MmuzPvA5uZ2Xl5LL/v7/d77/fbYQXW8+RXvRDiMCReoKs4DI0jkCR7JgE5gB9fTrtvWc6JlLKLXqdPvv7wGA0+DmN8/5Doob9HSYk5PDFyGr3nupxbQt0n49NhnF4H+Do9v4yBL2cw9M0cDBrgiLgz14fx1zJOBJxEyfhM/P5dOPfB4+rF5waf4YjI3cU2hyDvj9NxU1fvPztDETENg9/IPhZgiM5e9RrKaendwSQufH8dBp8QSLAAU3TaU+v/8LrA6wMLYmiYNAsgsUUy2TwGzk5jcCQFQ2PUJYADR8GRExNIphZgqI+GBHAwaal+fBGAMbVDffgmgAML0ffWmImGGvFdAIfB4RQSoykjhAfaBGBMWvJGqwAOyVSGdkuXTTRUQJ8A+WtAezdgL1HPtUO9xS2NxOivyPyXh6GINgHs6+9AtO+BuOdFINZdft+kpbVoEUAuXQLaOoHVa8r4YtfTG8aY2qGItgiQt85AdByEpG8cRHt31XFR77QGsgh7EeW01BQCOEQxLTWVAAx3WrmIi0paajoBHKLSad0+AZw6wYOwpyUL2wEVZ4XUs8CKd5o5emgfxj7rU8cwEkwEFBapNvgW2LkfguoD+e8w5MKIKtLE7mOQyxMQOx8q1g0VagaHMHZaA4sA+ffHRcPTS107N1auKMMXfj8Ce/HSpnPwIzJzXz8fqsdlgomAlRnI3DRkdgKSzpFbm3rE3eT1OygCSBbrgQ9rmjIstUMwEbBjv2pHcPpZb3xG5mZUClLG5+ZdDeztSKpImDr/XEtHg/4IIIOW087CsDJ2xQ9y7xuqecc9JNF5sNxB3QDtnmyaT8T2rBnXqp1W7QLYv9Fup0Be3dYByUdeaCt9EFqgFXSfF2Zx33tV51R9JhpvZ3+AtftNNTdz9bufMXrsI7QSgawBvONROyFaZOXyZMUxZUPGSi3satA8/EgZR5Pg/ykxf+oT/HXqU7QadyAAlEFpq8kLMSrtIHltoDVALcZexRmP5TlLxs9duYo/3n5fHVuRYBZhSisyO6nyNxtZxNYaWaUftUua3NK07PWzzxxuWeMzgRVihdlHi4UXezAtnlwXcDGgCjAuzvhLHKsTVnzIc7pW93o3gfWCJLUdhNVZPldRwSmJjG9ximIR7EUIVQ9Up1VzfTW2rRnHCzN7vbV3qKbxYfJ6N03bjnYTNq93E8guqF7C6vVumlaAMHu9m6YTIApe76apBIiK17vRV4hx64H3+tzd9OhwsrdzQRU14zN6BKCKV976ggqvl2DfPFO9s4lwVLONoCcFcT+Hu5/8VWOscm8narm+GvrqgNJzoU4r2k0Uc301Ai3EjNdvJLBdkPH6ymgXwHj95mgVwHi9N1oEMF5fO74LYLx+a/gmgPH6+vBFAOP19dOQAMbrG6cuAQqLS/jn8/PG631gywJkL/9EXn8Cq3/egKFxWIA0aviNUPb6efL4m+T5Bt9Icjv6otco9npuGRvj+4uQIsnNuF46H6s0wHi9Xv6X1j5LCDFO54n1N43X60UKmXgqM5t2/3QxR0GP8fpA+EXI1d5HMumMcN5hEfI35vtTh145bnY4+mDPt+x8Pxufr8X6AVNdD8alZffDxgG6W/MPuho2JU2Gv2jbbRcey8yOu2/cBrGSER7V9LJCAAAAAElFTkSuQmCC"
+    {...props}
+  />
+)

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

@@ -0,0 +1,154 @@
+import React, { SVGProps } from 'react'
+
+export type Props = SVGProps<SVGSVGElement>
+
+export const TaiwanRoundIcon = (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>
+      <circle cx="10" cy="10" r="10" fill="#D8D8D8" />
+      <g>
+        <mask
+          style={{ maskType: 'alpha' }}
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="20"
+          height="20"
+        >
+          <circle cx="10" cy="10" r="10" fill="white" />
+        </mask>
+        <rect width="30" height="20" fill="#ED1E24" />
+        <rect width="15" height="10" fill="#2B2F84" />
+        <circle cx="7.49791" cy="4.99913" r="1.869" fill="white" />
+        <path
+          d="M7.93582 2.89402L7.49722 1.25732L7.05762 2.89812C7.28902 2.84212 7.64062 2.82912 7.93582 2.89402Z"
+          fill="white"
+        />
+        <path
+          d="M6.82515 2.95674L5.62695 1.75854L6.06655 3.39934C6.23895 3.23514 6.53695 3.04814 6.82515 2.95674Z"
+          fill="white"
+        />
+        <path
+          d="M5.89364 3.56677L4.25684 3.12817L5.45794 4.32927C5.52514 4.10107 5.68964 3.79007 5.89364 3.56677Z"
+          fill="white"
+        />
+        <path
+          d="M5.39266 4.56055L3.75586 4.99915L5.39666 5.43885C5.34066 5.20745 5.32756 4.85585 5.39266 4.56055Z"
+          fill="white"
+        />
+        <path
+          d="M5.45504 5.67188L4.25684 6.87007L5.89764 6.43047C5.73344 6.25807 5.54634 5.96007 5.45504 5.67188Z"
+          fill="white"
+        />
+        <path
+          d="M6.06555 6.60278L5.62695 8.23958L6.82815 7.03838C6.59975 6.97128 6.28875 6.80678 6.06555 6.60278Z"
+          fill="white"
+        />
+        <path
+          d="M7.05859 7.1041L7.49719 8.7409L7.93679 7.1001C7.70549 7.1561 7.35399 7.1692 7.05859 7.1041Z"
+          fill="white"
+        />
+        <path
+          d="M8.16992 7.04148L9.36812 8.23968L8.92852 6.59888C8.75622 6.76308 8.45822 6.95018 8.16992 7.04148Z"
+          fill="white"
+        />
+        <path
+          d="M9.10156 6.43145L10.7384 6.87005L9.53726 5.66895C9.47006 5.89725 9.30556 6.20825 9.10156 6.43145Z"
+          fill="white"
+        />
+        <path
+          d="M9.60263 5.43763L11.2394 4.99903L9.59863 4.55933C9.65463 4.79073 9.66763 5.14223 9.60263 5.43763Z"
+          fill="white"
+        />
+        <path
+          d="M9.54026 4.32637L10.7385 3.12817L9.09766 3.56777C9.26196 3.74007 9.44896 4.03807 9.54026 4.32637Z"
+          fill="white"
+        />
+        <path
+          d="M8.92959 3.39534L9.36819 1.75854L8.16699 2.95964C8.39529 3.02674 8.70629 3.19124 8.92959 3.39534Z"
+          fill="white"
+        />
+      </g>
+    </g>
+  </svg>
+)
+
+export const TaiwanSquareIcon = (props: Props) => (
+  <svg
+    viewBox="0 0 24 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect width="24" height="16" rx="2" fill="#ED1E24" />
+    <path d="M0 2C0 0.89543 0.895431 0 2 0H15V10H0V2Z" fill="#2B2F84" />
+    <circle cx="7.49791" cy="4.99913" r="1.869" fill="white" />
+    <path
+      d="M7.93582 2.89402L7.49722 1.25732L7.05762 2.89812C7.28902 2.84212 7.64062 2.82912 7.93582 2.89402Z"
+      fill="white"
+    />
+    <path
+      d="M6.82515 2.95674L5.62695 1.75854L6.06655 3.39934C6.23895 3.23514 6.53695 3.04814 6.82515 2.95674Z"
+      fill="white"
+    />
+    <path
+      d="M5.89364 3.56677L4.25684 3.12817L5.45794 4.32927C5.52514 4.10107 5.68964 3.79007 5.89364 3.56677Z"
+      fill="white"
+    />
+    <path
+      d="M5.39266 4.56055L3.75586 4.99915L5.39666 5.43885C5.34066 5.20745 5.32756 4.85585 5.39266 4.56055Z"
+      fill="white"
+    />
+    <path
+      d="M5.45504 5.67188L4.25684 6.87007L5.89764 6.43047C5.73344 6.25807 5.54634 5.96007 5.45504 5.67188Z"
+      fill="white"
+    />
+    <path
+      d="M6.06555 6.60278L5.62695 8.23958L6.82815 7.03838C6.59975 6.97128 6.28875 6.80678 6.06555 6.60278Z"
+      fill="white"
+    />
+    <path
+      d="M7.05859 7.1041L7.49719 8.7409L7.93679 7.1001C7.70549 7.1561 7.35399 7.1692 7.05859 7.1041Z"
+      fill="white"
+    />
+    <path
+      d="M8.16992 7.04148L9.36812 8.23968L8.92852 6.59888C8.75622 6.76308 8.45822 6.95018 8.16992 7.04148Z"
+      fill="white"
+    />
+    <path
+      d="M9.10156 6.43145L10.7384 6.87005L9.53726 5.66895C9.47006 5.89725 9.30556 6.20825 9.10156 6.43145Z"
+      fill="white"
+    />
+    <path
+      d="M9.60263 5.43763L11.2394 4.99903L9.59863 4.55933C9.65463 4.79073 9.66763 5.14223 9.60263 5.43763Z"
+      fill="white"
+    />
+    <path
+      d="M9.54026 4.32637L10.7385 3.12817L9.09766 3.56777C9.26196 3.74007 9.44896 4.03807 9.54026 4.32637Z"
+      fill="white"
+    />
+    <path
+      d="M8.92959 3.39534L9.36819 1.75854L8.16699 2.95964C8.39529 3.02674 8.70629 3.19124 8.92959 3.39534Z"
+      fill="white"
+    />
+  </svg>
+)

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

@@ -0,0 +1,55 @@
+import React, { SVGProps } from 'react'
+
+export type Props = SVGProps<SVGSVGElement>
+
+export const ThailandRoundIcon = (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>
+      <rect x="-4" y="-0.0166016" width="28" height="20" fill="#ED1C24" />
+      <rect x="-4" y="3.31665" width="28" height="13.3333" fill="white" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M-4 6.65015H24V13.3168H-4V6.65015Z"
+        fill="#241D4F"
+      />
+    </g>
+  </svg>
+)
+
+export const ThailandSquareIcon = (props: Props) => (
+  <svg
+    viewBox="0 0 24 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect y="0.983398" width="24" height="16" rx="2" fill="#ED1C24" />
+    <rect y="3.65039" width="24" height="10.6667" fill="white" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 6.31689H24V11.6502H0V6.31689Z"
+      fill="#241D4F"
+    />
+  </svg>
+)

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

@@ -0,0 +1,57 @@
+import React, { SVGProps } from 'react'
+
+export type Props = SVGProps<SVGSVGElement>
+
+export const VietnamRoundIcon = (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>
+      <rect x="-4" y="-0.0166016" width="28" height="20" fill="#DA251D" />
+      <path
+        d="M11.7228 10.8677L14.2819 9.00839L11.1187 9.00839L10.1409 6L9.16316 9.00839L6 9.00839L8.5591 10.8677L7.58184 13.8766L10.1409 12.0168L12.7 13.8766L11.7228 10.8677Z"
+        fill="#FFEB3B"
+      />
+    </g>
+  </svg>
+)
+
+export const VietnamSquareIcon = (props: Props) => (
+  <svg
+    viewBox="0 0 24 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g>
+      <clipPath>
+        <rect width="24" height="16" fill="white" />
+      </clipPath>
+      <path
+        d="M2.01386e-10 2C0 0.895431 0.895431 -7.50368e-10 2 -1.67599e-09L22 -1.84359e-08C23.1046 -1.93615e-08 24 0.895431 24 2L24 14C24 15.1046 23.1046 16 22 16L2 16C0.89543 16 1.52092e-09 15.1046 1.4097e-09 14L2.01386e-10 2Z"
+        fill="#DA251D"
+      />
+      <path
+        d="M13.7823 8.92854L16.6663 6.8332L13.1016 6.8332L11.9997 3.44287L10.8978 6.8332L7.33301 6.8332L10.217 8.92854L9.11567 12.3195L11.9997 10.2235L14.8837 12.3195L13.7823 8.92854Z"
+        fill="#FFEB3B"
+      />
+    </g>
+  </svg>
+)

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

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { Flag, Props } from '.'
+
+export default {
+  component: Flag,
+  title: 'Atoms/Flag',
+}
+
+const Template: Story<Props> = (args) => <Flag {...args} />
+
+export const Normal = Template.bind({})
+
+Normal.args = {
+  country: 'VN',
+  rounded: false,
+  width: 100,
+  height: 100,
+}
+
+export const Rounded = Template.bind({})
+
+Rounded.args = {
+  country: 'TW',
+  rounded: true,
+  width: 100,
+  height: 100,
+}

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export const StyledFlag = styled.div`
+  --width: ${(props) => props.theme.width || 20};
+  --height: ${(props) => props.theme.height || 20};
+
+  width: calc(var(--width) * 1px);
+  height: calc(var(--height) * 1px);
+  img,
+  svg {
+    width: calc(var(--width) * 1px);
+    height: calc(var(--height) * 1px);
+  }
+
+  img {
+    object-fit: contain;
+  }
+`

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

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { render, cleanup } from '@testing-library/react'
+import 'jest-styled-components'
+
+import { Flag } from '.'
+import MockTheme from '../../../misc/mockTheme'
+
+afterEach(cleanup)
+
+test('it renders', () => {
+  const flag = render(
+    <MockTheme>
+      <Flag country="ID" width={100} height={100} isTesting />
+    </MockTheme>,
+  )
+
+  const self = flag.container.firstChild
+
+  expect(self).toMatchSnapshot()
+})