@worldcoin/mini-apps-ui-kit-react 1.0.0-canary.2 → 1.0.0-canary.20

package/dist/tailwind/index.d.ts

@@ -54,6 +54,42 @@ export declare const info: {
     "--info-800": string;
     "--info-900": string;
 };
+export declare const worldBlue: {
+    "--world-blue-primary": string;
+    "--world-blue-secondary": string;
+};
+export declare const carrotOrange: {
+    "--carrot-orange-primary": string;
+    "--carrot-orange-secondary": string;
+};
+export declare const purple: {
+    "--purple-primary": string;
+    "--purple-secondary": string;
+};
+export declare const green: {
+    "--green-primary": string;
+    "--green-secondary": string;
+};
+export declare const blue: {
+    "--blue-primary": string;
+    "--blue-secondary": string;
+};
+export declare const worldcoin: {
+    "--worldcoin-primary": string;
+    "--worldcoin-secondary": string;
+};
+export declare const digitalDollars: {
+    "--digital-dollars-primary": string;
+    "--digital-dollars-secondary": string;
+};
+export declare const bitcoin: {
+    "--bitcoin-primary": string;
+    "--bitcoin-secondary": string;
+};
+export declare const ethereum: {
+    "--ethereum-primary": string;
+    "--ethereum-secondary": string;
+};
 declare const uiKitTailwindPlugin: {
     handler: import('tailwindcss/types/config').PluginCreator;
     config?: Partial<import('tailwindcss/types/config').Config>;

package/dist/{tailwind/index.js → tailwind.js}

@@ -1,5 +1,5 @@
-import r from "../_virtual/plugin.js";
-const e = {
+import plugin from "./_virtual/plugin.js";
+const gray = {
   "--gray-0": "255 255 255",
   "--gray-50": "249 250 251",
   "--gray-100": "243 244 245",
@@ -10,7 +10,8 @@ const e = {
   "--gray-500": "113 118 128",
   "--gray-700": "60 66 75",
   "--gray-900": "24 24 24"
-}, l = {
+};
+const success = {
   "--success-100": "230 249 236",
   "--success-200": "204 243 217",
   "--success-300": "153 232 179",
@@ -20,7 +21,8 @@ const e = {
   "--success-700": "0 155 38",
   "--success-800": "0 116 29",
   "--success-900": "0 77 19"
-}, g = {
+};
+const error = {
   "--error-100": "254 233 231",
   "--error-200": "253 211 207",
   "--error-300": "251 167 159",
@@ -30,7 +32,8 @@ const e = {
   "--error-700": "194 32 10",
   "--error-800": "145 24 8",
   "--error-900": "97 16 5"
-}, v = {
+};
+const warning = {
   "--warning-100": "255 246 230",
   "--warning-200": "255 237 204",
   "--warning-300": "255 219 153",
@@ -40,7 +43,8 @@ const e = {
   "--warning-700": "204 139 0",
   "--warning-800": "153 104 0",
   "--warning-900": "102 70 0"
-}, n = {
+};
+const info = {
   "--info-100": "230 240 255",
   "--info-200": "204 224 255",
   "--info-300": "153 194 255",
@@ -50,16 +54,62 @@ const e = {
   "--info-700": "0 74 204",
   "--info-800": "0 55 153",
   "--info-900": "0 36 102"
-}, u = r(
-  function({ addBase: a }) {
-    a({
+};
+const worldBlue = {
+  "--world-blue-primary": "63, 219, 237",
+  "--world-blue-secondary": "236, 251, 253"
+};
+const carrotOrange = {
+  "--carrot-orange-primary": "255, 90, 0",
+  "--carrot-orange-secondary": "255, 237, 230"
+};
+const purple = {
+  "--purple-primary": "134, 0, 255",
+  "--purple-secondary": "242, 230, 255"
+};
+const green = {
+  "--green-primary": "0, 194, 48",
+  "--green-secondary": "230, 249, 236"
+};
+const blue = {
+  "--blue-primary": "0, 92, 255",
+  "--blue-secondary": "230, 240, 255"
+};
+const worldcoin = {
+  "--worldcoin-primary": "24, 24, 24",
+  "--worldcoin-secondary": "243, 244, 245"
+};
+const digitalDollars = {
+  "--digital-dollars-primary": "0, 194, 48",
+  "--digital-dollars-secondary": "230, 249, 236"
+};
+const bitcoin = {
+  "--bitcoin-primary": "255, 90, 0",
+  "--bitcoin-secondary": "255, 237, 230"
+};
+const ethereum = {
+  "--ethereum-primary": "51, 133, 255",
+  "--ethereum-secondary": "230, 240, 255"
+};
+const uiKitTailwindPlugin = plugin(
+  function({ addBase }) {
+    addBase({
       ":root": {
         "--font-sans": "TWK Lausanne",
-        ...e,
-        ...l,
-        ...g,
-        ...v,
-        ...n
+        ...gray,
+        ...success,
+        ...error,
+        ...warning,
+        ...info,
+        ...worldBlue,
+        ...carrotOrange,
+        ...purple,
+        ...green,
+        ...blue,
+        ...worldcoin,
+        ...digitalDollars,
+        ...bitcoin,
+        ...ethereum
       }
     });
   },
@@ -127,6 +177,46 @@ const e = {
           300: "rgb(var(--info-300) / <alpha-value>)",
           200: "rgb(var(--info-200) / <alpha-value>)",
           100: "rgb(var(--info-100) / <alpha-value>)"
+        },
+        specialty: {
+          worldBlue: {
+            primary: "rgb(var(--world-blue-primary) / <alpha-value>)",
+            secondary: "rgb(var(--world-blue-secondary) / <alpha-value>)"
+          },
+          carrotOrange: {
+            primary: "rgb(var(--carrot-orange-primary) / <alpha-value>)",
+            secondary: "rgb(var(--carrot-orange-secondary) / <alpha-value>)"
+          },
+          purple: {
+            primary: "rgb(var(--purple-primary) / <alpha-value>)",
+            secondary: "rgb(var(--purple-secondary) / <alpha-value>)"
+          },
+          green: {
+            primary: "rgb(var(--green-primary) / <alpha-value>)",
+            secondary: "rgb(var(--green-secondary) / <alpha-value>)"
+          },
+          blue: {
+            primary: "rgb(var(--blue-primary) / <alpha-value>)",
+            secondary: "rgb(var(--blue-secondary) / <alpha-value>)"
+          }
+        },
+        token: {
+          worldcoin: {
+            primary: "rgb(var(--worldcoin-primary) / <alpha-value>)",
+            secondary: "rgb(var(--worldcoin-secondary) / <alpha-value>)"
+          },
+          digitalDollars: {
+            primary: "rgb(var(--digital-dollars-primary) / <alpha-value>)",
+            secondary: "rgb(var(--digital-dollars-secondary) / <alpha-value>)"
+          },
+          bitcoin: {
+            primary: "rgb(var(--bitcoin-primary) / <alpha-value>)",
+            secondary: "rgb(var(--bitcoin-secondary) / <alpha-value>)"
+          },
+          ethereum: {
+            primary: "rgb(var(--ethereum-primary) / <alpha-value>)",
+            secondary: "rgb(var(--ethereum-secondary) / <alpha-value>)"
+          }
         }
       },
       lineHeight: {
@@ -158,10 +248,19 @@ const e = {
   }
 );
 export {
-  u as default,
-  g as error,
-  e as gray,
-  n as info,
-  l as success,
-  v as warning
+  bitcoin,
+  blue,
+  carrotOrange,
+  uiKitTailwindPlugin as default,
+  digitalDollars,
+  error,
+  ethereum,
+  gray,
+  green,
+  info,
+  purple,
+  success,
+  warning,
+  worldBlue,
+  worldcoin
 };

package/package.json

@@ -1,17 +1,88 @@
 {
   "name": "@worldcoin/mini-apps-ui-kit-react",
-  "version": "1.0.0-canary.2",
+  "version": "1.0.0-canary.20",
   "type": "module",
   "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "description": "React components UI Kit library for Mini Apps",
+  "author": "",
+  "license": "ISC",
+  "sideEffects": false,
   "files": [
     "dist",
     "public"
   ],
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "tailwindcss": "^3"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@eslint/js": "^9.13.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/manager-api": "^8.5.5",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.5.5",
+    "@types/glob": "^8.1.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "concurrently": "^9.1.0",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^0.11.1",
+    "glob": "^11.0.0",
+    "globals": "^15.11.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "rollup-preserve-directives": "^1.1.3",
+    "storybook": "^8.4.7",
+    "tailwindcss": "^3.4.15",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": ">=5.4.12",
+    "vite-plugin-dts": "^4.3.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-form": "^0.1.0",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@uidotdev/usehooks": "^2.4.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "countries-list": "^3.1.1",
+    "input-otp": "^1.4.1",
+    "react-international-phone": "^4.3.0",
+    "tailwind-merge": "^2.5.5",
+    "vaul": "^1.1.2"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
     },
     "./Button": {
       "types": "./dist/components/Button/index.d.ts",
@@ -21,14 +92,6 @@
       "types": "./dist/components/BulletList/index.d.ts",
       "default": "./dist/components/BulletList/index.js"
     },
-    "./BulletListItem": {
-      "types": "./dist/components/BulletListItem/index.d.ts",
-      "default": "./dist/components/BulletListItem/index.js"
-    },
-    "./BulletPoint": {
-      "types": "./dist/components/BulletPoint/index.d.ts",
-      "default": "./dist/components/BulletPoint/index.js"
-    },
     "./Checkbox": {
       "types": "./dist/components/Checkbox/index.d.ts",
       "default": "./dist/components/Checkbox/index.js"
@@ -161,79 +224,21 @@
       "types": "./dist/components/TabItem/index.d.ts",
       "default": "./dist/components/TabItem/index.js"
     },
+    "./CircularIcon": {
+      "types": "./dist/components/CircularIcon/index.d.ts",
+      "default": "./dist/components/CircularIcon/index.js"
+    },
+    "./LiveFeedback": {
+      "types": "./dist/components/LiveFeedback/index.d.ts",
+      "default": "./dist/components/LiveFeedback/index.js"
+    },
     "./tailwind": {
       "types": "./dist/tailwind/index.d.ts",
-      "default": "./dist/tailwind/index.js"
+      "import": "./dist/tailwind/index.js",
+      "require": "./dist/tailwind/index.js"
     },
     "./styles.css": "./public/globals.css"
   },
-  "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
-    "tailwindcss": "^3"
-  },
-  "peerDependenciesMeta": {
-    "tailwindcss": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/js": "^9.13.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/manager-api": "^8.5.5",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/theming": "^8.5.5",
-    "@types/glob": "^8.1.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "concurrently": "^9.1.0",
-    "eslint": "^9.13.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "eslint-plugin-storybook": "^0.11.1",
-    "glob": "^11.0.0",
-    "globals": "^15.11.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^8.4.7",
-    "tailwindcss": "^3.4.15",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.11.0",
-    "vite": ">=5.4.12",
-    "vite-plugin-dts": "^4.3.0"
-  },
-  "dependencies": {
-    "@radix-ui/react-checkbox": "^1.1.2",
-    "@radix-ui/react-form": "^0.1.0",
-    "@radix-ui/react-progress": "^1.1.2",
-    "@radix-ui/react-radio-group": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-toast": "^1.2.6",
-    "@radix-ui/react-toggle-group": "^1.1.2",
-    "@uidotdev/usehooks": "^2.4.1",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "countries-list": "^3.1.1",
-    "input-otp": "^1.4.1",
-    "react-international-phone": "^4.3.0",
-    "tailwind-merge": "^2.5.5",
-    "vaul": "^1.1.2"
-  },
-  "description": "React components UI Kit library for Mini Apps",
-  "author": "",
-  "license": "ISC",
   "scripts": {
     "storybook": "storybook dev -p 6006",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
@@ -242,6 +247,8 @@
     "build:tailwind": "tailwindcss -i ./styles/globals.css -o ./public/globals.css --minify",
     "build:sb": "pnpm build:tailwind && storybook build",
     "build": "pnpm build:tailwind && tsc -b ./tsconfig.lib.json && vite build",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "generate:country-codes": "node scripts/generate-country-codes.js",
+    "analyze": "vite build --config vite.analyze.config.ts"
   }
 }

package/public/flags/AD.svg

@@ -0,0 +1,35 @@
+<svg
+  width="512"
+  height="512"
+  viewBox="0 0 512 512"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <g clipPath="url(#clip0_4_7079)">
+    <path
+      d="M144.696 486.598C178.352 502.872 216.109 512 256 512C295.891 512 333.648 502.872 367.304 486.598L389.565 256L367.304 25.402C333.648 9.128 295.891 0 256 0C216.109 0 178.352 9.128 144.696 25.402L122.435 256L144.696 486.598Z"
+      fill="#FFDA44"
+    />
+    <path
+      d="M367.304 486.589C452.935 445.183 512 357.493 512 256C512 154.507 452.935 66.8171 367.304 25.4111V486.589Z"
+      fill="#D80027"
+    />
+    <path
+      d="M144.696 486.589V25.4111C59.065 66.8171 0 154.506 0 256C0 357.494 59.065 445.183 144.696 486.589Z"
+      fill="#0052B4"
+    />
+    <path
+      d="M256 345.043C256 304.192 256 256 256 256H322.783V289.391C322.783 295.192 311.653 316.448 284.18 333.913C273.775 340.529 263.004 342.657 256 345.043Z"
+      fill="#D80027"
+    />
+    <path d="M189.217 189.217H256V256H189.217V189.217Z" fill="#D80027" />
+    <path
+      d="M289.391 166.957C289.391 154.662 279.424 144.696 267.13 144.696C263.07 144.696 259.276 145.8 256 147.698C252.723 145.8 248.93 144.696 244.87 144.696C232.576 144.696 222.609 154.662 222.609 166.957H166.957V278.26C166.957 319.696 199.863 343.659 225.668 356.081C223.737 359.379 222.609 363.206 222.609 367.305C222.609 379.6 232.576 389.566 244.87 389.566C248.93 389.566 252.724 388.462 256 386.564C259.277 388.462 263.07 389.566 267.13 389.566C279.424 389.566 289.391 379.6 289.391 367.305C289.391 363.206 288.263 359.379 286.331 356.081C312.136 343.659 345.043 319.697 345.043 278.26V166.957H289.391ZM311.652 278.26C311.652 284.061 311.652 301.712 284.18 319.178C273.774 325.794 263.004 330.084 256 332.469C248.996 330.084 238.226 325.794 227.82 319.178C200.348 301.712 200.348 284.061 200.348 278.26V200.348H311.652V278.26Z"
+      fill="#FF9811"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_4_7079">
+      <rect width="512" height="512" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

package/public/flags/AE.svg

@@ -0,0 +1,30 @@
+<svg
+      width="512"
+      height="512"
+      viewBox="0 0 512 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4_7320)">
+        <path
+          d="M256 511.999C397.385 511.999 512 397.384 512 255.999C512 114.614 397.385 -0.000976562 256 -0.000976562C114.615 -0.000976562 0 114.614 0 255.999C0 397.384 114.615 511.999 256 511.999Z"
+          fill="#F0F0F0"
+        />
+        <path
+          d="M144.696 345.042L166.957 496.078C194.689 506.369 224.686 511.999 256 511.999C366.07 511.999 459.906 442.527 496.076 345.042H144.696Z"
+          fill="black"
+        />
+        <path
+          d="M144.696 166.956L166.957 15.92C194.689 5.62902 224.686 -0.000976562 256 -0.000976562C366.07 -0.000976562 459.906 69.471 496.076 166.956H144.696Z"
+          fill="#6DA544"
+        />
+        <path
+          d="M0 255.999C0 366.07 69.473 459.905 166.957 496.076V15.9221C69.473 52.0931 0 145.928 0 255.999Z"
+          fill="#A2001D"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4_7320">
+          <rect width="512" height="512" fill="white" transform="translate(0 -0.000976562)" />
+        </clipPath>
+      </defs>
+    </svg>

package/public/flags/AF.svg

@@ -0,0 +1,34 @@
+<svg
+      width="512"
+      height="512"
+      viewBox="0 0 512 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4_7074)">
+        <path
+          d="M367.304 25.402C333.648 9.128 295.89 0 256 0C216.11 0 178.352 9.128 144.696 25.402L122.435 256L144.696 486.598C178.352 502.872 216.11 512 256 512C295.89 512 333.648 502.872 367.304 486.598L389.565 256L367.304 25.402Z"
+          fill="#D80027"
+        />
+        <path
+          d="M144.696 25.4111C59.066 66.8181 0 154.507 0 256C0 357.493 59.066 445.182 144.696 486.589V25.4111Z"
+          fill="black"
+        />
+        <path
+          d="M367.304 25.4111V486.589C452.934 445.182 512 357.493 512 256C512 154.507 452.934 66.8181 367.304 25.4111Z"
+          fill="#496E2D"
+        />
+        <path
+          d="M256 166.957C206.822 166.957 166.957 206.823 166.957 256C166.957 305.177 206.823 345.043 256 345.043C305.177 345.043 345.043 305.177 345.043 256C345.043 206.823 305.178 166.957 256 166.957ZM256 311.652C225.264 311.652 200.348 286.735 200.348 256C200.348 225.265 225.265 200.348 256 200.348C286.735 200.348 311.652 225.265 311.652 256C311.652 286.735 286.736 311.652 256 311.652Z"
+          fill="#FFDA44"
+        />
+        <path
+          d="M256 222.609C243.705 222.609 233.739 232.575 233.739 244.87V278.261H278.261V244.87C278.261 232.575 268.295 222.609 256 222.609Z"
+          fill="#FFDA44"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4_7074">
+          <rect width="512" height="512" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>

package/public/flags/AG.svg

@@ -0,0 +1,38 @@
+<svg
+      width="512"
+      height="512"
+      viewBox="0 0 512 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4_7082)">
+        <path
+          d="M0 256C0 273.535 1.768 290.657 5.127 307.2L256 322.783L506.874 307.2C510.234 290.657 512 273.535 512 256C512 238.465 510.232 221.343 506.874 204.8L256 189.217L5.127 204.8C1.768 221.343 0 238.465 0 256H0Z"
+          fill="#0052B4"
+        />
+        <path
+          d="M506.874 307.2H5.12695C28.846 424.05 132.151 512 256 512C379.849 512 483.154 424.05 506.874 307.2Z"
+          fill="#F0F0F0"
+        />
+        <path
+          d="M5.12695 204.8H506.875C483.154 87.95 379.851 0 256 0C132.149 0 28.846 87.95 5.12695 204.8Z"
+          fill="black"
+        />
+        <path
+          d="M367.304 204.8H144.696L190.176 183.406L165.957 139.361L215.342 148.806L221.602 98.917L256 135.611L290.4 98.917L296.656 148.806L346.043 139.361L321.826 183.408L367.304 204.8Z"
+          fill="#FFDA44"
+        />
+        <path
+          d="M0 256C0 397.384 114.616 512 256 512L51.196 102.391C19.052 145.18 0 198.363 0 256Z"
+          fill="#A2001D"
+        />
+        <path
+          d="M256 512C397.384 512 512 397.384 512 256C512 198.363 492.948 145.18 460.804 102.391L256 512Z"
+          fill="#A2001D"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4_7082">
+          <rect width="512" height="512" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>

package/public/flags/AI.svg

@@ -0,0 +1,54 @@
+<svg
+      width="512"
+      height="512"
+      viewBox="0 0 512 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4_7081)">
+        <path
+          d="M512 256C512 397.384 397.384 512 256 512C114.616 512 0 397.384 0 256C0 256.061 256 0.028 256 0C397.384 0 512 114.616 512 256Z"
+          fill="#0052B4"
+        />
+        <path
+          d="M255.315 256H256C256 255.77 256 255.546 256 255.315C255.772 255.544 255.544 255.772 255.315 256Z"
+          fill="#F0F0F0"
+        />
+        <path
+          d="M256 133.565C256 88.52 256 59.005 256 0H255.957C114.591 0.024 0 114.629 0 256H133.565V180.789L208.776 256H255.316C255.544 255.772 255.772 255.544 256.001 255.315C256.001 238.068 256.001 222.679 256.001 208.778L180.788 133.565H256Z"
+          fill="#F0F0F0"
+        />
+        <path
+          d="M129.515 33.3911C89.4756 56.1901 56.1886 89.4761 33.3906 129.515V256H100.174V100.176V100.174H256C256 79.1111 256 59.0451 256 33.3911H129.515Z"
+          fill="#D80027"
+        />
+        <path
+          d="M255.999 224.519L165.044 133.566H133.564V133.568L255.997 256H255.999C255.999 256 255.999 234.293 255.999 224.519Z"
+          fill="#D80027"
+        />
+        <path
+          d="M432.939 293.474C440.3 283.346 445.217 270.978 445.217 256V144.696C435.915 151.684 424.355 155.826 411.826 155.826C393.62 155.826 377.457 147.083 367.304 133.567C357.15 147.083 340.987 155.826 322.782 155.826C310.252 155.826 298.692 151.683 289.391 144.698V256C289.391 270.978 294.308 283.346 301.669 293.474H432.939Z"
+          fill="#F3F3F3"
+        />
+        <path
+          d="M409.785 235.351C413.329 226.705 416.085 214.068 416.085 207.779C416.085 197.674 402.911 189.483 402.911 189.483C402.911 189.483 389.737 197.674 389.737 207.779C389.737 214.069 392.494 226.706 396.036 235.351L388.431 252.522C392.901 254.34 397.787 255.35 402.912 255.35C408.037 255.35 412.922 254.339 417.393 252.522L409.785 235.351Z"
+          fill="#FF9811"
+        />
+        <path
+          d="M358.294 179.752C349.038 181.006 336.715 184.941 331.269 188.085C322.518 193.138 322.01 208.641 322.01 208.641C322.01 208.641 335.692 215.954 344.442 210.902C349.89 207.757 359.454 199.053 365.167 191.661L383.843 189.661C383.182 184.883 381.61 180.146 379.051 175.709C376.487 171.272 373.172 167.544 369.362 164.581L358.294 179.752Z"
+          fill="#FF9811"
+        />
+        <path
+          d="M335.892 252.146C341.605 259.534 351.172 268.237 356.62 271.383C365.371 276.435 379.052 269.124 379.052 269.124C379.052 269.124 378.542 253.619 369.793 248.566C364.344 245.421 352.023 241.49 342.765 240.238L331.698 225.065C327.889 228.027 324.573 231.757 322.01 236.19C319.449 240.629 317.881 245.364 317.217 250.145L335.892 252.146Z"
+          fill="#FF9811"
+        />
+        <path
+          d="M298.916 289.394C319.704 322.749 367.305 333.914 367.305 333.914C367.305 333.914 414.905 322.749 435.694 289.394H298.916Z"
+          fill="#338AF3"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4_7081">
+          <rect width="512" height="512" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>

package/public/flags/AL.svg

@@ -0,0 +1,22 @@
+<svg
+      width="512"
+      height="512"
+      viewBox="0 0 512 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4_7076)">
+        <path
+          d="M256 512C397.385 512 512 397.385 512 256C512 114.615 397.385 0 256 0C114.615 0 0 114.615 0 256C0 397.385 114.615 512 256 512Z"
+          fill="#D80027"
+        />
+        <path
+          d="M400.696 190.009H307.97C313.694 184.015 317.217 175.9 317.217 166.957C317.217 148.516 302.267 133.566 283.826 133.566C272.208 133.566 261.981 139.502 256 148.503C250.019 139.502 239.791 133.566 228.174 133.566C209.733 133.566 194.783 148.516 194.783 166.957C194.783 175.9 198.306 184.016 204.03 190.009H111.305C111.305 214.598 132.722 234.53 157.309 234.53H155.825C155.825 259.12 175.758 279.053 200.348 279.053C200.348 287.017 202.447 294.483 206.111 300.947L169.181 337.878L197.515 366.21L237.707 326.019C239.281 326.596 240.91 327.059 242.592 327.374L218.305 382.209L256 422.957L293.695 382.207L269.408 327.372C271.091 327.057 272.719 326.595 274.293 326.017L314.485 366.208L342.819 337.875L305.888 300.944C309.553 294.481 311.652 287.014 311.652 279.05C336.241 279.05 356.174 259.118 356.174 234.527H354.691C379.278 234.529 400.696 214.598 400.696 190.009Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4_7076">
+          <rect width="512" height="512" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>