diff --git a/.codeclimate.json b/.codeclimate.json
index aa9df5c..2adc48f 100644
--- a/.codeclimate.json
+++ b/.codeclimate.json
@@ -15,6 +15,7 @@
     "**/stories/",
     "**/tests/",
     "**/dist/",
+    "**/css/",
     "**/LICENSE",
     "**/*.d.ts",
     "**/*.lock",
@@ -27,6 +28,11 @@
     ".gitignore",
     ".npmignore",
     ".codeclimate.json",
+    "**/darkBase.ts",
+    "**/lightBase.ts",
+    "**/palettes.ts",
+    "**/world.svg.ts",
+    "**/_fileType.ts",
     "**/_countries.ts",
     "**/hijri-date.js"
   ]
diff --git a/.github/workflows/master.yml b/.github/workflows/build.yml
similarity index 77%
rename from .github/workflows/master.yml
rename to .github/workflows/build.yml
index ac33a45..7089f67 100644
--- a/.github/workflows/master.yml
+++ b/.github/workflows/build.yml
@@ -4,7 +4,7 @@ name: Build and Deploy
 on:
   # Triggers the workflow on push events for the master branch
   push:
-    branches: [WIP-v4]
+    branches: [main]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -33,6 +33,14 @@ jobs:
         run: |
           yarn dist
 
+      # Collect test coverage
+      - name: Run coverage
+        uses: paambaati/codeclimate-action@v5.0.0
+        env:
+          CC_TEST_REPORTER_ID: ${{ secrets.COVERAGE_TOKEN }}
+        with:
+          coverageCommand: yarn test --coverage --json --outputFile=./.storybook/jest-test-results.json
+
       # Runs a set of commands using the runners shell
       - name: Build storybook
         run: |
@@ -42,8 +50,7 @@ jobs:
       - name: Deploy to GitHub Pages
         # You may pin to the exact commit or the version.
         # uses: JamesIves/github-pages-deploy-action@5dc1d5a192aeb5ab5b7d5a77b7d36aea4a7f5c92
-        uses: JamesIves/github-pages-deploy-action@4.1.5
+        uses: JamesIves/github-pages-deploy-action@v4
         with:
           branch: gh-pages
-          target-folder: v4
           folder: build
diff --git a/.storybook/addon-theme/register.tsx b/.storybook/addon-theme/register.tsx
index d004815..3c67536 100644
--- a/.storybook/addon-theme/register.tsx
+++ b/.storybook/addon-theme/register.tsx
@@ -7,61 +7,374 @@
 
 import { useGlobals, useParameter, useStorybookApi } from "@storybook/api";
 import { IconButton } from "@storybook/components";
-import { SunIcon, MoonIcon } from "@storybook/icons";
-import { ThemeVars, themes } from "@storybook/theming";
+import { MoonIcon, SunIcon } from "@storybook/icons";
+import { themes, ThemeVars } from "@storybook/theming";
 import React, { useCallback, useEffect, useState } from "react";
 
-const STORAGE_KEY = "storybook-theme";
+const STORAGE_KEY = "storybook-scheme";
+const THEME_KEY = "storybook-theme";
+const TINT_KEY = "storybook-tint";
+const ROUNDING_KEY = "storybook-rounding";
+
 const GLOBAL_KEY = "theme";
-enum THEME {
+
+enum COLOR_SCHEME {
   LIGHT = "light",
   DARK = "dark",
 }
 
-interface ThemeToggleParams {
+interface ColorSchemeToggleParams {
   lightTheme: ThemeVars;
   darkTheme: ThemeVars;
 }
 
+enum THEME {
+  DENIM = "denim:jade",
+  IRIS = "iris:coral",
+  AVACADO = "avacado:wood",
+  PUMPKIN = "pumpkin:lilac",
+  SCARLET = "scarlet:marigold",
+}
+enum TINT {
+  SILVER = "silver",
+  STEEL = "steel",
+  OLIVE = "olive",
+  SAND = "sand",
+}
+enum ROUNDING {
+  SMALL = "sm",
+  NORMAL = "normal",
+  MEDIUM = "md",
+  FULL = "full",
+}
+
 export const ThemeToggle = () => {
   const api = useStorybookApi();
   const [globals, updateGlobals] = useGlobals();
-  const { darkTheme = themes.dark, lightTheme = themes.light } = useParameter<
-    Partial<ThemeToggleParams>
-  >("themeToggle", {});
   const [theme, setTheme] = useState<THEME>(
-    (localStorage.getItem(STORAGE_KEY) as THEME) ?? THEME.LIGHT,
+    (localStorage.getItem(THEME_KEY) as THEME) ?? THEME.DENIM,
+  );
+  const [tint, setTint] = useState<TINT>(
+    (localStorage.getItem(TINT_KEY) as TINT) ?? TINT.SILVER,
+  );
+  const [rounding, setRounding] = useState<ROUNDING>(
+    (localStorage.getItem(ROUNDING_KEY) as ROUNDING) ?? ROUNDING.NORMAL,
+  );
+  const { darkTheme = themes.dark, lightTheme = themes.light } = useParameter<
+    Partial<ColorSchemeToggleParams>
+  >("schemeToggle", {});
+  const [colorScheme, setColorScheme] = useState<COLOR_SCHEME>(
+    (localStorage.getItem(STORAGE_KEY) as COLOR_SCHEME) ?? COLOR_SCHEME.LIGHT,
   );
 
   // Function that will update the global value and trigger a UI refresh.
-  const refreshAndUpdateGlobal = useCallback((key: THEME, theme: ThemeVars) => {
-    api.setOptions({ theme });
-    // Updates Storybook global value
-    updateGlobals({
-      [GLOBAL_KEY]: key,
-    });
-    api.getChannel()?.emit("THEME_CHANGED", key);
-  }, []);
+  // Function that will update the global value and trigger a UI refresh.
+  const refreshAndUpdateGlobal = useCallback(
+    (key: COLOR_SCHEME, theme: ThemeVars) => {
+      api.setOptions({ theme });
+      // Updates Storybook global value
+      updateGlobals({
+        [GLOBAL_KEY]: key,
+      });
+      api.getChannel()?.emit("SCHEME_CHANGED", key);
+    },
+    [],
+  );
+
+  const changeTheme = useCallback(
+    (key: THEME = THEME.DENIM) => {
+      localStorage.setItem(THEME_KEY, key);
+      setTheme(key);
+    },
+    [theme],
+  );
+
+  const changeTint = useCallback(
+    (key: TINT) => {
+      localStorage.setItem(TINT_KEY, key);
+      setTint(key);
+    },
+    [theme],
+  );
 
-  const toggleTheme = useCallback(() => {
-    const newTheme = theme === THEME.DARK ? THEME.LIGHT : THEME.DARK;
+  const changeRounding = useCallback(
+    (key: ROUNDING) => {
+      localStorage.setItem(ROUNDING_KEY, key);
+      setRounding(key);
+    },
+    [theme],
+  );
+
+  const toggleColorScheme = useCallback(() => {
+    const newTheme =
+      colorScheme === COLOR_SCHEME.DARK
+        ? COLOR_SCHEME.LIGHT
+        : COLOR_SCHEME.DARK;
     localStorage.setItem(STORAGE_KEY, newTheme);
-    setTheme(newTheme);
-  }, [theme]);
+    setColorScheme(newTheme);
+  }, [colorScheme]);
 
   useEffect(() => {
     api.getChannel()?.emit("LOCALE_CHANGED", globals.locale);
   }, [globals.locale]);
 
   useEffect(() => {
-    refreshAndUpdateGlobal(theme, {
-      ...(theme === THEME.DARK ? darkTheme : lightTheme),
+    refreshAndUpdateGlobal(colorScheme, {
+      ...(colorScheme === COLOR_SCHEME.DARK ? darkTheme : lightTheme),
     });
-  }, [theme, darkTheme, lightTheme, globals.primary, globals.accent]);
+  }, [colorScheme, darkTheme, lightTheme, globals.primary, globals.accent]);
+
+  useEffect(() => {
+    const [primary, accent] = theme.split(":");
+    api.getChannel()?.emit("THEME_CHANGED", primary, accent);
+    api.getChannel()?.emit("TINT_CHANGED", tint ?? TINT.SILVER);
+    api.getChannel()?.emit("ROUNDING_CHANGED", rounding ?? ROUNDING.NORMAL);
+  }, [theme, tint, rounding, colorScheme]);
 
   return (
-    <IconButton key="ThemeToggle" title="Toggle theme" onClick={toggleTheme}>
-      {theme === THEME.DARK ? <SunIcon /> : <MoonIcon />}
-    </IconButton>
+    <>
+      <div
+        style={{
+          width: 1,
+          height: 16,
+          backgroundColor: "gray",
+        }}
+      />
+      <IconButton
+        key="SchemeToggle"
+        title="Toggle color scheme"
+        onClick={toggleColorScheme}
+      >
+        {colorScheme === COLOR_SCHEME.DARK ? <SunIcon /> : <MoonIcon />}
+      </IconButton>
+      <div
+        style={{
+          width: 1,
+          height: 16,
+          backgroundColor: "gray",
+        }}
+      />
+
+      <IconButton
+        title="Theme: Denim/Jade"
+        active={theme === THEME.DENIM}
+        onClick={() => changeTheme(THEME.DENIM)}
+      >
+        <div
+          style={{
+            borderRadius: "1rem",
+            border: "8px solid transparent",
+            borderTopColor: "var(--denim)",
+            borderBottomColor: "var(--jade)",
+            borderInlineStartColor: "var(--denim)",
+            borderInlineEndColor: "var(--jade)",
+          }}
+        />
+      </IconButton>
+
+      <IconButton
+        title="Theme: Avacado/Wood"
+        active={theme === THEME.AVACADO}
+        onClick={() => changeTheme(THEME.AVACADO)}
+      >
+        <div
+          style={{
+            borderRadius: "1rem",
+            border: "8px solid transparent",
+            borderTopColor: "var(--avacado)",
+            borderBottomColor: "var(--wood)",
+            borderInlineStartColor: "var(--avacado)",
+            borderInlineEndColor: "var(--wood)",
+          }}
+        />
+      </IconButton>
+
+      <IconButton
+        title="Theme: Scarlet/Marigold"
+        active={theme === THEME.SCARLET}
+        onClick={() => changeTheme(THEME.SCARLET)}
+      >
+        <div
+          style={{
+            borderRadius: "1rem",
+            border: "8px solid transparent",
+            borderTopColor: "var(--scarlet)",
+            borderBottomColor: "var(--marigold)",
+            borderInlineStartColor: "var(--scarlet)",
+            borderInlineEndColor: "var(--marigold)",
+          }}
+        />
+      </IconButton>
+
+      <IconButton
+        title="Theme: Pumpkin/Lilac"
+        active={theme === THEME.PUMPKIN}
+        onClick={() => changeTheme(THEME.PUMPKIN)}
+      >
+        <div
+          style={{
+            borderRadius: "1rem",
+            border: "8px solid transparent",
+            borderTopColor: "var(--pumpkin)",
+            borderBottomColor: "var(--lilac)",
+            borderInlineStartColor: "var(--pumpkin)",
+            borderInlineEndColor: "var(--lilac)",
+          }}
+        />
+      </IconButton>
+
+      <IconButton
+        title="Theme: Iris/Coral"
+        active={theme === THEME.IRIS}
+        onClick={() => changeTheme(THEME.IRIS)}
+      >
+        <div
+          style={{
+            borderRadius: "1rem",
+            border: "8px solid transparent",
+            borderTopColor: "var(--iris)",
+            borderBottomColor: "var(--coral)",
+            borderInlineStartColor: "var(--iris)",
+            borderInlineEndColor: "var(--coral)",
+          }}
+        />
+      </IconButton>
+
+      <div
+        style={{
+          width: 1,
+          height: 16,
+          backgroundColor: "gray",
+        }}
+      />
+
+      <IconButton
+        title="Tint: Silver"
+        active={tint === TINT.SILVER}
+        onClick={() => changeTint(TINT.SILVER)}
+      >
+        <div
+          style={{
+            width: "1rem",
+            height: "1rem",
+            backgroundColor: "var(--silver)",
+            borderRadius: "1rem",
+          }}
+        />
+      </IconButton>
+
+      <IconButton
+        title="Tint: Steel"
+        active={tint === TINT.STEEL}
+        onClick={() => changeTint(TINT.STEEL)}
+      >
+        <div
+          style={{
+            width: "1rem",
+            height: "1rem",
+            borderRadius: "1rem",
+            backgroundColor: "var(--steel)",
+          }}
+        />
+      </IconButton>
+
+      <IconButton
+        title="Tint: Olive"
+        active={tint === TINT.OLIVE}
+        onClick={() => changeTint(TINT.OLIVE)}
+      >
+        <div
+          style={{
+            width: "1rem",
+            height: "1rem",
+            borderRadius: "1rem",
+            backgroundColor: "var(--olive)",
+          }}
+        />
+      </IconButton>
+
+      <IconButton
+        title="Tint: Sand"
+        active={tint === TINT.SAND}
+        onClick={() => changeTint(TINT.SAND)}
+      >
+        <div
+          style={{
+            width: "1rem",
+            height: "1rem",
+            borderRadius: "1rem",
+            backgroundColor: "var(--sand)",
+          }}
+        />
+      </IconButton>
+
+      <div
+        style={{
+          width: 1,
+          height: 16,
+          backgroundColor: "gray",
+        }}
+      />
+
+      <IconButton
+        title="Rounding: Small"
+        active={rounding === ROUNDING.SMALL}
+        onClick={() => changeRounding(ROUNDING.SMALL)}
+      >
+        <div
+          style={{
+            width: "1.5rem",
+            height: "1rem",
+            borderRadius: "2px",
+            backgroundColor: "gray",
+          }}
+        />
+      </IconButton>
+
+      <IconButton
+        title="Rounding: Regular"
+        active={rounding === ROUNDING.NORMAL}
+        onClick={() => changeRounding(ROUNDING.NORMAL)}
+      >
+        <div
+          style={{
+            width: "1.5rem",
+            height: "1rem",
+            borderRadius: "4px",
+            backgroundColor: "gray",
+          }}
+        />
+      </IconButton>
+
+      <IconButton
+        title="Rounding: Medium"
+        active={rounding === ROUNDING.MEDIUM}
+        onClick={() => changeRounding(ROUNDING.MEDIUM)}
+      >
+        <div
+          style={{
+            width: "1.5rem",
+            height: "1rem",
+            borderRadius: "6px",
+            backgroundColor: "gray",
+          }}
+        />
+      </IconButton>
+
+      <IconButton
+        title="Rounding: Full"
+        active={rounding === ROUNDING.FULL}
+        onClick={() => changeRounding(ROUNDING.FULL)}
+      >
+        <div
+          style={{
+            width: "1.5rem",
+            height: "1rem",
+            borderRadius: "8px",
+            backgroundColor: "gray",
+          }}
+        />
+      </IconButton>
+    </>
   );
 };
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index 77f17d1..58da660 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -5,6 +5,23 @@
 
 <link rel="icon" type="image/png" href="favicon.png" sizes="96x96" />
 <style>
+  html {
+    --scarlet: #e5484d;
+    --pumpkin: #f76a15;
+    --marigold: #ffc100;
+    --avacado: #46a758;
+    --jade: #29a383;
+    --denim: #0190ff;
+    --iris: #5b5bd6;
+    --lilac: #8e4ec6;
+    --coral: #e93d82;
+    --wood: #ad7f58;
+    --silver: #989da5;
+    --steel: #7c99af;
+    --olive: #769b8d;
+    --sand: #9b9789;
+  }
+
   #storybook-panel-root {
     div[data-radix-scroll-area-viewport] {
       padding-inline-end: 1rem;
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
index 9911d26..6955073 100644
--- a/.storybook/manager.ts
+++ b/.storybook/manager.ts
@@ -11,13 +11,18 @@ import { ThemeToggle } from "./addon-theme/register";
 addons.setConfig({
   sidebar: {
     showRoots: true,
+    filters: {
+      patterns: (item) => {
+        return item.name !== "Tester";
+      },
+    },
   },
 });
 
 // Register the addon
-addons.register("themeToggle", () => {
+addons.register("themeChanger", () => {
   // Register the tool
-  addons.add("themeToggle", {
+  addons.add("themeChanger", {
     type: types.TOOL,
     title: "Theme toggle",
     match: ({ viewMode }) => viewMode === "story" || viewMode === "docs",
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 8ea6c09..44bb82c 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -9,19 +9,11 @@ import "./styles/styles.css";
 
 import { Anchor } from "@storybook/addon-docs";
 import { withTests } from "@storybook/addon-jest";
-import {
-  Controls,
-  Description,
-  DocsContainer,
-  Primary,
-  Stories,
-  Subtitle,
-  Title,
-} from "@storybook/blocks";
+import { DocsContainer } from "@storybook/blocks";
 import { addons, useGlobals } from "@storybook/preview-api";
 import { Preview } from "@storybook/react";
 import { create } from "@storybook/theming";
-import { Fragment } from "react";
+import { Fragment, useEffect } from "react";
 import { I18nextProvider } from "react-i18next";
 import { ApplicationProvider } from "../packages/core/src";
 import { HotKeyWrapper } from "../packages/core/src/hotkeys/HotKeyWrapper";
@@ -101,6 +93,29 @@ export default {
       controls: { sort: "alpha" },
       container: ({ children, context }: any) => {
         const globals = context.store.globals.get();
+
+        useEffect(() => {
+          const scheme = localStorage.getItem("storybook-scheme") ?? "light";
+          const theme = localStorage.getItem("storybook-theme") ?? "denim:jade";
+          const tint = localStorage.getItem("storybook-tint") ?? "silver";
+          const round = localStorage.getItem("storybook-rounding") ?? "normal";
+          const [primary, accent] = theme.split(":");
+          document.documentElement.style.setProperty(
+            "--primary",
+            `var(--${primary})`,
+          );
+          document.documentElement.style.setProperty(
+            "--accent",
+            `var(--${accent})`,
+          );
+          document.documentElement.style.setProperty(
+            "--tint",
+            `var(--${tint})`,
+          );
+          document.documentElement.dataset.colorScheme = scheme;
+          document.documentElement.dataset.rounding = round;
+        }, []);
+
         return (
           <ApplicationProvider
             defaultLocale={globals.locale}
@@ -117,19 +132,6 @@ export default {
           </ApplicationProvider>
         );
       },
-      page: () => {
-        return (
-          <>
-            <Title />
-            <Subtitle />
-            <Description />
-            <Primary />
-            <Controls />
-            <hr />
-            <Stories includePrimary={false} />
-          </>
-        );
-      },
       components: {
         h1: ({ storyId, ...props }: any) => (
           <Fragment>
@@ -166,14 +168,29 @@ export default {
   decorators: [
     (Story) => {
       const [globals] = useGlobals();
+
+      useEffect(() => {
+        const scheme = localStorage.getItem("storybook-scheme") ?? "light";
+        const theme = localStorage.getItem("storybook-theme") ?? "denim:jade";
+        const tint = localStorage.getItem("storybook-tint") ?? "silver";
+        const round = localStorage.getItem("storybook-rounding") ?? "normal";
+        const [primary, accent] = theme.split(":");
+        document.documentElement.style.setProperty(
+          "--primary",
+          `var(--${primary})`,
+        );
+        document.documentElement.style.setProperty(
+          "--accent",
+          `var(--${accent})`,
+        );
+        document.documentElement.style.setProperty("--tint", `var(--${tint})`);
+        document.documentElement.dataset.colorScheme = scheme;
+        document.documentElement.dataset.rounding = round;
+      }, []);
+
       return (
         <I18nextProvider i18n={i18n}>
-          <ApplicationProvider
-            defaultLocale={globals.locale}
-            defaultColorScheme={
-              (localStorage.getItem("storybook-theme") ?? "light") as AnyObject
-            }
-          >
+          <ApplicationProvider defaultLocale={globals.locale}>
             {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
             <Story />
           </ApplicationProvider>
@@ -189,6 +206,21 @@ addons.getChannel().on("LOCALE_CHANGED", (locale: any) => {
     document.documentElement.dir = i18n.dir();
   });
 });
-addons.getChannel().on("THEME_CHANGED", (theme: any) => {
+addons.getChannel().on("SCHEME_CHANGED", (theme: any = "light") => {
   document.documentElement.dataset.colorScheme = theme;
 });
+addons
+  .getChannel()
+  .on("THEME_CHANGED", (primary: any = "denim", accent: any = "jade") => {
+    document.documentElement.style.setProperty(
+      "--primary",
+      `var(--${primary})`,
+    );
+    document.documentElement.style.setProperty("--accent", `var(--${accent})`);
+  });
+addons.getChannel().on("TINT_CHANGED", (tint: any = "silver") => {
+  document.documentElement.style.setProperty("--tint", `var(--${tint})`);
+});
+addons.getChannel().on("ROUNDING_CHANGED", (round: any = "md") => {
+  document.documentElement.dataset.rounding = round;
+});
diff --git a/.storybook/styles/_overrides.css b/.storybook/styles/_overrides.css
index 6cf1c14..0ddb17a 100644
--- a/.storybook/styles/_overrides.css
+++ b/.storybook/styles/_overrides.css
@@ -24,11 +24,11 @@
   }
 
   & tbody tr:nth-child(odd) td {
-    background-color: color-mix(in lab, var(--ruf-bg) 99%, var(--ruf-tint));
+    background-color: color-mix(in lab, var(--fabric-bg) 99%, var(--tint));
   }
 
   & tbody tr:nth-child(even) td {
-    background-color: color-mix(in lab, var(--ruf-bg) 96%, var(--ruf-tint));
+    background-color: color-mix(in lab, var(--fabric-bg) 96%, var(--tint));
   }
 
   & tbody td p {
@@ -44,7 +44,7 @@
 h1.sbdocs-title {
   font-size: 1.5rem;
   font-weight: 500;
-  color: var(--ruf-primary);
+  color: var(--primary);
   text-decoration: underline 2px;
   text-underline-offset: 0.25em;
 }
@@ -53,7 +53,7 @@ h1.sbdocs-title {
 .sb-anchor > h3 {
   font-size: 1.125rem;
   font-weight: 400;
-  color: var(--ruf-accent);
+  color: var(--accent);
   text-decoration: underline 1px;
   text-underline-offset: 0.25em;
 }
@@ -65,7 +65,7 @@ h1.sbdocs-title {
   }
 
   .sb-bar {
-    background-color: var(--ruf-bg);
+    background-color: var(--fabric-bg);
   }
 }
 
@@ -86,10 +86,10 @@ h1.sbdocs-title {
   }
 
   .toc-list-item.toc-list-item.is-active-li.is-active-li {
-    border-color: var(--ruf-accent);
+    border-color: var(--accent);
 
     & > a.is-active-link {
-      color: var(--ruf-accent);
+      color: var(--accent);
     }
   }
 }
diff --git a/.storybook/styles/_prism.css b/.storybook/styles/_prism.css
index 45df7be..28dbb5f 100644
--- a/.storybook/styles/_prism.css
+++ b/.storybook/styles/_prism.css
@@ -7,7 +7,7 @@
 
 .prismjs.prismjs.prismjs {
   color: theme(textColor.dimmed);
-  background: var(--ruf-bg);
+  background: var(--fabric-bg);
 }
 
 .prismjs > code {
diff --git a/README.md b/README.md
index fcdcd1c..e6c1501 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,74 @@
-# React UI Framework
+![Logo](./assets/poster.png)
+
+### React UI framework for business applications
+
+---
+
+[![Stars](https://img.shields.io/github/stars/adarshpastakia/react-fabric.svg?logoColor=blue&style=social&logo=github "GitHub Stars")](https://github.com/adarshpastakia/react-fabric/stargazers)
+[![Forks](https://img.shields.io/github/forks/adarshpastakia/react-fabric.svg?logoColor=blue&style=social&logo=github "GitHub Forks")](https://github.com/adarshpastakia/react-fabric/network/members)
+[![Issues](https://img.shields.io/github/issues/adarshpastakia/react-fabric.svg?logoColor=blue&style=social&logo=github "GitHub Issues")](https://github.com/adarshpastakia/react-fabric/issues)
+[![Discussions](https://img.shields.io/github/discussions/adarshpastakia/react-fabric?style=social&logo=github&logoColor=blue "GitHub Discussions")](https://github.com/adarshpastakia/react-fabric/discussions)
+
+![license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square&labelColor=333&logo=none)
+![node](https://img.shields.io/github/package-json/minNode/adarshpastakia/react-fabric?logo=node.js&logoColor=white&label=node&color=5FA04E)
+![Build](https://img.shields.io/github/actions/workflow/status/adarshpastakia/react-fabric/build.yml?style=flat-square&logo=github&labelColor=333&label=build)
+![npm](https://img.shields.io/npm/v/%40react-fabric%2Fcore?style=flat-square&logo=npm&labelColor=333&label=release&color=CB3837)
+
+![Deps](https://img.shields.io/librariesio/github/adarshpastakia/react-fabric?style=flat-square&logo=libraries.io&logoColor=fff&labelColor=333&label=dependencies)
+![Maintain](https://img.shields.io/codeclimate/maintainability/adarshpastakia/react-fabric?style=flat-square&logo=code%20climate&labelColor=333&label=maintainability)
+![Coverage](https://img.shields.io/codeclimate/coverage/adarshpastakia/react-fabric?style=flat-square&logo=code%20climate&labelColor=333&label=coverage)
+![Issues](https://img.shields.io/codeclimate/issues/adarshpastakia/react-fabric?style=flat-square&logo=code%20climate&labelColor=333&label=issues)
+
+[![lerna](https://img.shields.io/badge/lerna-677ef8.svg?style=flat-square&labelColor=333&logo=lerna)](https://lerna.js.org/)
+[![yarn](https://img.shields.io/badge/yarn-2C8EBB.svg?style=flat-square&labelColor=333&logo=yarn)](https://yarnpkg.com/)
+[![react](https://img.shields.io/badge/react-61DAFB.svg?style=flat-square&labelColor=333&logo=react)](http://reactjs.org/)
+[![ts](https://img.shields.io/badge/typescript-3178C6.svg?style=flat-square&labelColor=333&logo=typescript)](https://typescriptlang.org/)
+[![emotion](https://img.shields.io/badge/tailwindcss-06B6D4.svg?style=flat-square&labelColor=333&logo=tailwindcss)](https://tailwindcss.com/)
+[![prettier](https://img.shields.io/badge/prettier-EA4C89.svg?style=flat-square&labelColor=333&logo=prettier)](https://prettier.io/)
+[![codeclimate](https://img.shields.io/badge/code%20climate-272425.svg?style=flat-square&labelColor=333&logo=code%20climate)](http://codeclimate.com/)
+
+---
+
+A complete UI framework that provides a comprehensive suite of tools for building interactive and visually appealing applications. Here's an overview of the key features and components it includes:
+
+1. **Common UI Components**: These foundational elements are essential for constructing user interfaces. They typically include buttons, links, modals, tooltips, and other basic elements that facilitate user interactions and navigation.
+
+2. **Form Inputs**: This category encompasses various input elements used to collect data from users. Common form inputs include text fields, checkboxes, radio buttons, select dropdowns, date pickers, and toggles. These components are often designed with built-in validation and styling options to ensure consistency and usability.
+
+3. **Data Display Components**: Data based components to enable effective data management, visualization, and interaction within applications.
+
+4. **Charting Components**: These components offer various ways to visualize data, including line charts, bar charts, pie charts, and scatter plots. They are designed to present complex data in a more digestible format, aiding in analysis and decision-making.
+
+5. **Styling and Customization**: The framework generally includes options for customizing the appearance of components, allowing developers to align the design with their application's branding and user experience requirements. This may include themes, color schemes, and responsive design features.
+
+Overall, this UI framework provides a robust set of components that cater to a wide range of use cases, from basic user interface elements to advanced data visualization tools. It enables developers to build feature-rich and user-friendly applications with a consistent and cohesive design.
+
+## Install
+
+```bash
+
+# npm
+npm install @react-fabric/core
+
+# yarn
+yarn add @react-fabric/core
+
+```
+
+## Development
+
+```bash
+
+# build library
+yarn dist
+
+# watch changes
+yarn watch
+
+# run tests
+yarn test
+
+# run storybook
+yarn storybook
+
+```
diff --git a/assets/browser/chrome.png b/assets/browser/chrome.png
new file mode 100644
index 0000000..f949b42
Binary files /dev/null and b/assets/browser/chrome.png differ
diff --git a/assets/browser/edge.png b/assets/browser/edge.png
new file mode 100644
index 0000000..081bbf6
Binary files /dev/null and b/assets/browser/edge.png differ
diff --git a/assets/browser/firefox.png b/assets/browser/firefox.png
new file mode 100644
index 0000000..4816ad5
Binary files /dev/null and b/assets/browser/firefox.png differ
diff --git a/assets/browser/safari.png b/assets/browser/safari.png
new file mode 100644
index 0000000..2f85d4d
Binary files /dev/null and b/assets/browser/safari.png differ
diff --git a/assets/gitposter.png b/assets/gitposter.png
new file mode 100644
index 0000000..80cd3a7
Binary files /dev/null and b/assets/gitposter.png differ
diff --git a/assets/small_video.mp4 b/assets/samples/small_video.mp4
similarity index 100%
rename from assets/small_video.mp4
rename to assets/samples/small_video.mp4
diff --git a/git-conventional-commits.json b/git-conventional-commits.json
index 3027c83..0b998d4 100644
--- a/git-conventional-commits.json
+++ b/git-conventional-commits.json
@@ -13,6 +13,7 @@
       "chore",
       "merge",
       "revert",
+      "i18n",
       "WIP"
     ],
     "commitScopes": [],
@@ -27,6 +28,7 @@
       "merge",
       "revert",
       "style",
+      "i18n",
       "refactor"
     ],
     "includeInvalidCommits": true,
@@ -39,6 +41,7 @@
       "revert": "Reverts",
       "style": "Styling Changes",
       "refactor": "Refactors",
+      "i18n": "I18N",
       "breakingChange": "BREAKING CHANGES"
     },
 
diff --git a/jest.config.json b/jest.config.json
index cfd4a7c..0a2865f 100644
--- a/jest.config.json
+++ b/jest.config.json
@@ -24,7 +24,8 @@
   "modulePaths": ["<rootDir>/packages", "<rootDir>/node_modules"],
   "modulePathIgnorePatterns": ["<rootDir>/packages/*/dist"],
   "moduleNameMapper": {
-    "^@mdi/font/css/materialdesignicons.min.css": "<rootDir>/jest/blank.js"
+    "^@mdi/font/css/materialdesignicons.min.css": "<rootDir>/jest/blank.js",
+    "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules"
   },
   "collectCoverageFrom": [
     "packages/**/src/**/*.{ts,tsx}",
@@ -41,5 +42,5 @@
     "node_modules/"
   ],
   "coverageDirectory": "<rootDir>/coverage",
-  "coverageReporters": ["json", "lcov", "text", "html"]
+  "coverageReporters": ["json", "lcov", "text", "html-spa"]
 }
diff --git a/jest/TestWrapper.tsx b/jest/TestWrapper.tsx
index 79ef5d8..1584a69 100644
--- a/jest/TestWrapper.tsx
+++ b/jest/TestWrapper.tsx
@@ -5,6 +5,7 @@
  * @author    : Adarsh Pastakia
  */
 
+import { ApplicationProvider } from "@react-fabric/core";
 import i18next from "i18next";
 import { I18nextProvider, initReactI18next } from "react-i18next";
 
@@ -34,8 +35,10 @@ export default {
     (Story: any) => {
       return (
         <I18nextProvider i18n={i18next}>
-          {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
-          <Story />
+          <ApplicationProvider>
+            {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+            <Story />
+          </ApplicationProvider>
         </I18nextProvider>
       );
     },
diff --git a/jest/setup.ts b/jest/setup.ts
index 068a6fc..c079942 100644
--- a/jest/setup.ts
+++ b/jest/setup.ts
@@ -87,6 +87,7 @@ global.console = {
   },
 };
 
+jest.useFakeTimers();
 // @ts-expect-error ignore
 const virtualConsole = global.window._virtualConsole;
 const originalEmit = virtualConsole.emit;
diff --git a/package.json b/package.json
index 5a6a916..053b89c 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "check:ts": "lerna run build:dts --stream",
     "lint": "npm-run-all lint:css lint:ts check:ts",
     "pretest": "npm run lint",
-    "test": "jest --ci --runInBand --detectOpenHandles --forceExit --coverage",
+    "jest": "jest --ci --runInBand --detectOpenHandles --forceExit --coverage",
+    "test": "npm run jest",
     "dist": "lerna run build --stream",
     "watch": "lerna run watch --parallel",
     "release": "lerna version --conventional-commits --yes -m \"chore(release): %v\""
@@ -71,7 +72,7 @@
     "@storybook/testing-react": "~2.0.1",
     "@storybook/theming": "~8.2.7",
     "@testing-library/jest-dom": "~6.4.2",
-    "@testing-library/react": "~14.2.1",
+    "@testing-library/react": "~15.0.0",
     "@testing-library/react-hooks": "~8.0.1",
     "@types/color": "~3.0.6",
     "@types/jest": "~29.5.12",
@@ -95,6 +96,7 @@
     "eslint-plugin-react-hooks": "~4.6.0",
     "git-conventional-commits": "~2.6.7",
     "jest": "~29.7.0",
+    "jest-css-modules": "^2.1.0",
     "jest-environment-jsdom": "~29.7.0",
     "jest-transform-css": "~6.0.1",
     "jest-transform-stub": "~2.0.0",
@@ -130,6 +132,7 @@
     "ts-loader": "~9.5.1",
     "typescript": "~5.4.2"
   },
+  "minNode": ">=20.0.0",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=9.6.4"
diff --git a/packages/chart/LICENSE b/packages/chart/LICENSE
new file mode 100644
index 0000000..f54bcf5
--- /dev/null
+++ b/packages/chart/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Sigma Frameworks, Adarsh Pastakia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/chart/README.md b/packages/chart/README.md
new file mode 100644
index 0000000..cfed3f3
--- /dev/null
+++ b/packages/chart/README.md
@@ -0,0 +1,10 @@
+# React UI Framework - Charing Module
+
+#### Install
+
+```bash
+# Using
+yarn add @react-fabric/chart
+```
+
+#### Usage
diff --git a/packages/chart/package.json b/packages/chart/package.json
new file mode 100644
index 0000000..6c5c006
--- /dev/null
+++ b/packages/chart/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "@react-fabric/chart",
+  "version": "1.0.0",
+  "description": "RUF: Charting package",
+  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
+  "license": "MIT",
+  "repository": "https://github.com/adarshpastakia/react-ui-framework/tree/main/packages/chart",
+  "source": "src/index.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "directories": {
+    "src": "src",
+    "styles": "css",
+    "test": "tests"
+  },
+  "files": [
+    "css",
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "makelink": "yarn link",
+    "removelink": "yarn unlink",
+    "prebuild": "rm -rf ./dist",
+    "build:dts": "tsc -p ./tsconfig.build.json",
+    "build:rollup": "rollup -c ../../rollup.config.mjs",
+    "build": "npm-run-all -p build:rollup build:dts",
+    "watch:dts": "tsc -w -p ./tsconfig.build.json",
+    "watch:rollup": "rollup -w -c ../../rollup.config.mjs",
+    "watch": "npm-run-all -p watch:rollup watch:dts"
+  },
+  "dependencies": {
+    "@react-fabric/core": "^1.0.0",
+    "@react-fabric/utilities": "^1.0.0",
+    "classnames": "^2.5.1",
+    "color": "^4.2.3",
+    "date-fns": "^3.6.0",
+    "echarts": "^5.5.1",
+    "echarts-wordcloud": "^2.1.0"
+  },
+  "peerDependencies": {
+    "i18next": "^23.11.5",
+    "react": ">=18.0.0 <20.0.0",
+    "react-dom": ">=18.0.0 <20.0.0",
+    "react-i18next": "^14.1.2"
+  },
+  "devDependencies": {
+    "@types/echarts": "^4.9.22"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=9.6.4"
+  }
+}
diff --git a/packages/chart/src/charts/ActivityMap.tsx b/packages/chart/src/charts/ActivityMap.tsx
new file mode 100644
index 0000000..97a99d2
--- /dev/null
+++ b/packages/chart/src/charts/ActivityMap.tsx
@@ -0,0 +1,295 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  Button,
+  CoreIcons,
+  Divider,
+  ToggleButtonGroup,
+  useMemoDebugger,
+} from "@react-fabric/core";
+import { isArray, isEmpty } from "@react-fabric/utilities";
+import { type EChartOption, type EChartsType } from "echarts";
+import { memo, useEffect, useRef, useState, type FC } from "react";
+import { ChartPalette } from "../theme/palettes";
+import { type BaseChart } from "../types";
+import { activityRenderer } from "../types/utils";
+import { ChartContainer } from "../wrapper/ChartContainer";
+import { ChartWrapper } from "../wrapper/ChartWrapper";
+import { PaletteSelect } from "../wrapper/PaletteSelect";
+
+export interface ActivityMapProps extends BaseChart {
+  heatmapPalette?: string[];
+  data: Array<Array<[low: number, high: number, count: number]>>;
+  time?: "day-hour" | "month-day";
+  type?: "scatter" | "heatmap";
+  /**
+   * day/month names
+   */
+  highLabels?: string[];
+  /**
+   * hours/day names
+   */
+  lowLabels?: string[];
+  onClick?: (highIndex: number, lowIndex: number) => void;
+}
+
+const DAY_HOUR = {
+  high: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  low: [
+    "12a",
+    "1a",
+    "2a",
+    "3a",
+    "4a",
+    "5a",
+    "6a",
+    "7a",
+    "8a",
+    "9a",
+    "10a",
+    "11a",
+    "12p",
+    "1p",
+    "2p",
+    "3p",
+    "4p",
+    "5p",
+    "6p",
+    "7p",
+    "8p",
+    "9p",
+    "10p",
+    "11p",
+  ],
+};
+const MONTH_DAY = {
+  high: [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ],
+  low: [
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "10",
+    "11",
+    "12",
+    "13",
+    "14",
+    "15",
+    "16",
+    "17",
+    "18",
+    "19",
+    "20",
+    "21",
+    "22",
+    "23",
+    "24",
+    "25",
+    "26",
+    "27",
+    "28",
+    "29",
+    "30",
+    "31",
+  ],
+};
+
+const ActivityMapChart = memo(
+  ({
+    data = [],
+    title,
+    onExport,
+    theme: chartTheme = "activity",
+    heatmapPalette,
+    highLabels,
+    lowLabels,
+    time = "day-hour",
+    type: chartType = "scatter",
+    onClick,
+  }: ActivityMapProps) => {
+    const chartRef = useRef<EChartsType>(null);
+    const [type, setType] = useState(chartType);
+    const [theme, setTheme] = useState(chartTheme);
+
+    useEffect(() => {
+      setType(chartType);
+    }, [chartType]);
+    useEffect(() => {
+      setTheme(chartTheme);
+    }, [chartTheme]);
+
+    const options = useMemoDebugger<EChartOption>(
+      () => {
+        const defaultMap = time === "day-hour" ? DAY_HOUR : MONTH_DAY;
+
+        const options: KeyValue = {
+          series: [],
+        };
+
+        if (isEmpty(data)) return {};
+
+        options.xAxis = {
+          type: "category",
+          data: lowLabels ?? defaultMap.low,
+          boundaryGap: type === "heatmap",
+          splitLine: {
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+        };
+        options.yAxis = {
+          type: "category",
+          axisLabel: {
+            margin: 16,
+          },
+          data: highLabels ?? defaultMap.high,
+          axisLine: {
+            show: false,
+          },
+        };
+        options.series = data.map((points, index) => {
+          const total = points.reduce((t, p) => t + p[2], 0);
+          return {
+            id: index,
+            name: defaultMap.high[index],
+            type,
+            symbolSize: function (dataItem: number[]) {
+              return dataItem[2] === 0
+                ? 0
+                : Math.min(Math.max(4, (dataItem[2] / total) * 256), 48);
+            },
+            data: points,
+            universalTransition: true,
+          };
+        });
+
+        if (type === "heatmap") {
+          const dataPoints = data.map((points) =>
+            Math.max(...points.map((pt) => pt[2])),
+          );
+          options.grid = {
+            top: 32,
+            bottom: 128,
+          };
+          options.visualMap = {
+            type: "piecewise",
+            min: 1,
+            show: type === "heatmap",
+            color: heatmapPalette ?? [...ChartPalette.Heatmap],
+            max: Math.max(...dataPoints),
+            calculable: true,
+            orient: "horizontal",
+            left: "center",
+            bottom: 48,
+          };
+        }
+
+        return {
+          grid: {
+            top: 32,
+            bottom: 64,
+          },
+          tooltip: {
+            trigger: "item",
+            confine: true,
+            position: "top",
+            valueFormatter: (c: AnyObject) => {
+              return isArray(c) ? c[2] : c;
+            },
+          } as AnyObject,
+          ...options,
+        };
+      },
+      [data, title, type],
+      "ActivityChart options",
+    );
+
+    return (
+      <ChartContainer
+        title={title}
+        onExport={onExport}
+        theme={theme}
+        options={options}
+        chartRef={chartRef}
+        isEmpty={isEmpty(data)}
+        emptyIcon={CoreIcons.chartActivityScatter}
+        dataTableRenderer={activityRenderer}
+        onClick={(e) => onClick?.(e.seriesIndex, e.dataIndex)}
+      >
+        <ToggleButtonGroup value={type} onChange={setType as AnyObject}>
+          <Button
+            size="sm"
+            variant="link"
+            value="scatter"
+            aria-label="scatter"
+            icon={CoreIcons.chartActivityScatter}
+          />
+          <Button
+            size="sm"
+            variant="link"
+            value="heatmap"
+            aria-label="heatmap"
+            icon={CoreIcons.chartActivityCalendar}
+          />
+        </ToggleButtonGroup>
+        <Divider vertical />
+        <PaletteSelect
+          theme={theme}
+          onClick={setTheme}
+          defaultTheme="activity"
+        />
+      </ChartContainer>
+    );
+  },
+);
+ActivityMapChart.displayName = "ActivityMapChart";
+
+/**
+ * Chart showing activity map
+ */
+export const ActivityMap: FC<ActivityMapProps> = (props) => (
+  <ChartWrapper>
+    <ActivityMapChart {...props} />
+  </ChartWrapper>
+);
diff --git a/packages/chart/src/charts/CountSeries.tsx b/packages/chart/src/charts/CountSeries.tsx
new file mode 100644
index 0000000..a61b53c
--- /dev/null
+++ b/packages/chart/src/charts/CountSeries.tsx
@@ -0,0 +1,186 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  Button,
+  CoreIcons,
+  Divider,
+  ToggleButtonGroup,
+  useMemoDebugger,
+} from "@react-fabric/core";
+import { compareValues, Format, isEmpty } from "@react-fabric/utilities";
+import { type EChartOption, type EChartsType } from "echarts";
+import { memo, useEffect, useRef, useState, type FC } from "react";
+import { type BaseChart, type CountType } from "../types";
+import { countRenderer } from "../types/utils";
+import { ChartContainer } from "../wrapper/ChartContainer";
+import { ChartWrapper } from "../wrapper/ChartWrapper";
+import { PaletteSelect } from "../wrapper/PaletteSelect";
+
+export interface CountSeriesProps extends BaseChart, CountType {
+  type?: "pie" | "bar" | "column";
+  onClick?: (key: string) => void;
+}
+
+const CountSeriesChart: FC<CountSeriesProps> = memo(
+  ({
+    data,
+    title,
+    onExport,
+    theme: chartTheme,
+    type: chartType = "pie",
+    onClick,
+  }: CountSeriesProps) => {
+    const chartRef = useRef<EChartsType>(null);
+    const [type, setType] = useState(chartType);
+    const [theme, setTheme] = useState(chartTheme);
+
+    useEffect(() => {
+      setType(chartType);
+    }, [chartType]);
+    useEffect(() => {
+      setTheme(chartTheme);
+    }, [chartTheme]);
+
+    const options = useMemoDebugger<EChartOption>(
+      () => {
+        if (isEmpty(data)) {
+          chartRef.current?.clear();
+          return {};
+        }
+
+        const sorted = data?.sort(compareValues("desc", "count"));
+
+        const categoryAxis: AnyObject = {
+          type: "category",
+          name: title ?? "Count Series",
+          nameLocation: "center",
+          axisTick: {
+            show: false,
+          },
+          data: [],
+        } as EChartOption.XAxis;
+        const valueAxis: AnyObject = {
+          type: "value",
+          axisLabel: {
+            formatter: (val: AnyObject) => Format.number(val),
+          },
+        } as EChartOption.YAxis;
+
+        const series =
+          type === "pie"
+            ? [
+                {
+                  type: "pie",
+                  name: title ?? "Count Series",
+                  data: sorted.map((item, index) => ({
+                    id: item.id,
+                    value: item.count,
+                    name: item.label ?? item.id,
+                  })),
+                  universalTransition: true,
+                },
+              ]
+            : sorted.map((item, index) => ({
+                id: item.id,
+                type: "bar",
+                label: {
+                  show: true,
+                  rotate: type === "column" ? 90 : 0,
+                  formatter: "{a}",
+                  position: "inside",
+                  color: "#fff",
+                },
+                data: [
+                  {
+                    name: title ?? "Count Series",
+                    value: item.count,
+                  },
+                ],
+                name: item.label ?? item.id,
+                universalTransition: true,
+              }));
+        return {
+          series,
+          countSeries: true,
+          xAxis:
+            type === "pie" ? null : type === "bar" ? valueAxis : categoryAxis,
+          yAxis:
+            type === "pie" ? null : type === "bar" ? categoryAxis : valueAxis,
+        };
+      },
+      [data, title, type],
+      "CountChart options",
+    );
+
+    return (
+      <ChartContainer
+        title={title}
+        onExport={onExport}
+        theme={theme}
+        options={options}
+        chartRef={chartRef}
+        isEmpty={isEmpty(data)}
+        emptyIcon={CoreIcons.chartPie}
+        dataTableRenderer={countRenderer}
+        onClick={(e) => onClick?.(e.data.id ?? e.seriesId)}
+      >
+        <ToggleButtonGroup value={type} onChange={setType as AnyObject}>
+          <Button
+            size="sm"
+            variant="link"
+            value="pie"
+            aria-label="pie"
+            icon={CoreIcons.chartPie}
+          />
+          <Button
+            size="sm"
+            variant="link"
+            value="column"
+            aria-label="column"
+            icon={CoreIcons.chartColumn}
+          />
+          <Button
+            size="sm"
+            variant="link"
+            value="bar"
+            aria-label="bar"
+            icon={CoreIcons.chartBar}
+          />
+        </ToggleButtonGroup>
+        <Divider vertical />
+        <PaletteSelect theme={theme} onClick={setTheme} />
+      </ChartContainer>
+    );
+  },
+);
+CountSeriesChart.displayName = "CountSeriesChart";
+
+/**
+ * Chart to display simple data count series
+ */
+export const CountSeries: FC<CountSeriesProps> = (props) => (
+  <ChartWrapper>
+    <CountSeriesChart {...props} />
+  </ChartWrapper>
+);
diff --git a/packages/chart/src/charts/DataSeries.tsx b/packages/chart/src/charts/DataSeries.tsx
new file mode 100644
index 0000000..537f83f
--- /dev/null
+++ b/packages/chart/src/charts/DataSeries.tsx
@@ -0,0 +1,228 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  Button,
+  CoreIcons,
+  Divider,
+  ToggleButtonGroup,
+  useMemoDebugger,
+} from "@react-fabric/core";
+import { isEmpty } from "@react-fabric/utilities";
+import { type EChartOption, type EChartsType } from "echarts";
+import { memo, useEffect, useRef, useState, type FC } from "react";
+import { type BaseChart, type SeriesType } from "../types";
+import { seriesRenderer } from "../types/utils";
+import { ChartContainer } from "../wrapper/ChartContainer";
+import { ChartWrapper } from "../wrapper/ChartWrapper";
+import { PaletteSelect } from "../wrapper/PaletteSelect";
+
+export interface DataSeriesProps extends BaseChart, SeriesType {
+  type?:
+    | "column"
+    | "line"
+    | "bar"
+    | "radar"
+    | "line-stacked"
+    | "column-stacked"
+    | "bar-stacked";
+  onClick?: (data: { category: string; series: string }) => void;
+}
+
+const DataSeriesChart: FC<DataSeriesProps> = memo(
+  ({
+    data,
+    onExport,
+    categories,
+    categoryAxisName,
+    valueAxisName,
+    title,
+    theme: chartTheme,
+    type: chartType = "column",
+    onClick,
+  }: DataSeriesProps) => {
+    const chartRef = useRef<EChartsType>(null);
+    const [type, setType] = useState(chartType);
+    const [theme, setTheme] = useState(chartTheme);
+
+    useEffect(() => {
+      setType(chartType);
+    }, [chartType]);
+    useEffect(() => {
+      setTheme(chartTheme);
+    }, [chartTheme]);
+
+    const options = useMemoDebugger<EChartOption>(
+      () => {
+        if (isEmpty(data)) {
+          chartRef.current?.clear();
+          return {};
+        }
+
+        const stack = type.includes("stacked") ? "stack" : undefined;
+
+        const [_type, stacked] = type.split("-");
+        const categoryAxis: AnyObject =
+          _type === "radar"
+            ? undefined
+            : ({
+                name: categoryAxisName,
+                type: "category",
+                nameGap: 32,
+                nameLocation: "center",
+                axisTick: {
+                  show: false,
+                },
+                data: categories,
+              } as EChartOption.XAxis);
+        const valueAxis: AnyObject =
+          _type === "radar"
+            ? undefined
+            : ({
+                name: valueAxisName,
+                type: "value",
+                nameGap: 32,
+                nameLocation: "center",
+              } as EChartOption.YAxis);
+        const radar =
+          _type !== "radar"
+            ? undefined
+            : ({
+                shape: "circle",
+                indicator: categories?.map((c) => ({ name: c })),
+              } as AnyObject);
+
+        const series = data?.map((item, index) => ({
+          id: item.id,
+          stack,
+          areaStyle: stacked ? {} : undefined,
+          type: _type === "column" ? "bar" : _type,
+          name: item.label ?? item.id,
+          universalTransition: true,
+          data:
+            _type === "radar"
+              ? [
+                  {
+                    value: item.values,
+                    id: item.id,
+                    name: item.label ?? item.id,
+                  },
+                ]
+              : item.values,
+        }));
+
+        return {
+          xAxis: type.startsWith("bar") ? valueAxis : categoryAxis,
+          yAxis: type.startsWith("bar") ? categoryAxis : valueAxis,
+          radar,
+          series,
+          tooltip: {
+            trigger: _type === "radar" ? "item" : "axis",
+            confine: true,
+            position: "top",
+          } as AnyObject,
+        };
+      },
+      [data, type, categories, categoryAxisName, valueAxisName],
+      "DataChart options",
+    );
+
+    return (
+      <ChartContainer
+        title={title}
+        onExport={onExport}
+        theme={theme}
+        options={options}
+        chartRef={chartRef}
+        isEmpty={isEmpty(data)}
+        emptyIcon={CoreIcons.chartColumn}
+        dataTableRenderer={seriesRenderer}
+        onClick={(e) => onClick?.({ category: e.name, series: e.seriesId })}
+      >
+        <ToggleButtonGroup value={type} onChange={setType as AnyObject}>
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartLine}
+            aria-label="line"
+            value="line"
+          />
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartColumn}
+            aria-label="column"
+            value="column"
+          />
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartBar}
+            aria-label="bar"
+            value="bar"
+          />
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartRadar}
+            aria-label="radar"
+            value="radar"
+          />
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartLineStacked}
+            aria-label="line-stacked"
+            value="line-stacked"
+          />
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartColumnStacked}
+            aria-label="column-stacked"
+            value="column-stacked"
+          />
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartBarStacked}
+            aria-label="bar-stacked"
+            value="bar-stacked"
+          />
+        </ToggleButtonGroup>
+        <Divider vertical />
+        <PaletteSelect theme={theme} onClick={setTheme} />
+      </ChartContainer>
+    );
+  },
+);
+DataSeriesChart.displayName = "DataSeriesChart";
+
+/**
+ * Chart to display simple data category series
+ */
+export const DataSeries: FC<DataSeriesProps> = (props) => (
+  <ChartWrapper>
+    <DataSeriesChart {...props} />
+  </ChartWrapper>
+);
diff --git a/packages/chart/src/charts/Generic.tsx b/packages/chart/src/charts/Generic.tsx
new file mode 100644
index 0000000..a287a92
--- /dev/null
+++ b/packages/chart/src/charts/Generic.tsx
@@ -0,0 +1,190 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { type EChartOption, type EChartsType } from "echarts";
+import {
+  memo,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  type FC,
+  type RefObject,
+} from "react";
+import { type BaseChart } from "../types";
+import { ChartContainer } from "../wrapper/ChartContainer";
+import { ChartWrapper } from "../wrapper/ChartWrapper";
+
+export interface GenericProps extends BaseChart {
+  chartRef?: RefObject<EChartsType>;
+
+  legend?: EChartOption["legend"];
+  toolbox?: EChartOption["toolbox"];
+  tooltip?: EChartOption["tooltip"];
+
+  actions?: JSX.Element;
+
+  /**
+   * 2d axis
+   */
+  xAxis?: EChartOption["xAxis"];
+  /**
+   * 2d axis
+   */
+  yAxis?: EChartOption["yAxis"];
+  /**
+   * chart series
+   */
+  series?: EChartOption["series"];
+
+  /**
+   * polar series
+   */
+  polar?: EChartOption["polar"];
+  /**
+   * polar axis
+   */
+  angleAxis?: EChartOption["angleAxis"];
+  /**
+   * polar axis
+   */
+  radiusAxis?: EChartOption["radiusAxis"];
+
+  /**
+   * radar series
+   */
+  radar?: EChartOption["radar"];
+
+  /**
+   * paarllel series
+   */
+  parallel?: EChartOption["parallel"];
+  /**
+   * parallel axis
+   */
+  parallelAxis?: EChartOption["parallelAxis"];
+
+  onClick?: (e: KeyValue) => void;
+  onRendered?: (e: KeyValue) => void;
+
+  onBrush?: (e: KeyValue) => void;
+  onBrushEnd?: (e: KeyValue) => void;
+  onBrushSelected?: (e: KeyValue) => void;
+
+  /**
+   * Data table renderer that returns HTML string
+   */
+  dataTableRenderer?: (chartOption: EChartOption) => string;
+}
+
+const GenericChartBase: FC<GenericProps> = memo(
+  ({
+    chartRef: _ref,
+    onBrush,
+    onBrushEnd,
+    onBrushSelected,
+    dataTableRenderer,
+    onClick,
+    onRendered,
+    actions,
+    title,
+    theme,
+    ...options
+  }: GenericProps) => {
+    const chartRef = useRef<EChartsType>(null);
+
+    useImperativeHandle<EChartsType | null, EChartsType | null>(
+      _ref,
+      () => chartRef.current,
+      [chartRef.current],
+    );
+
+    useEffect(() => {
+      const chart = chartRef.current;
+      if (chart && onRendered) {
+        chart.on("finished", onRendered);
+        return () => {
+          !chart.isDisposed() && chart.off("finished");
+        };
+      }
+    }, [chartRef.current, onRendered]);
+
+    useEffect(() => {
+      const chart = chartRef.current;
+      if (chart && onClick) {
+        chart.on("click", onClick);
+        return () => {
+          !chart.isDisposed() && chart.off("click");
+        };
+      }
+    }, [chartRef.current, onClick]);
+
+    useEffect(() => {
+      const chart = chartRef.current;
+      if (chart && onBrush) {
+        chart.on("brush", onBrush);
+        return () => {
+          !chart.isDisposed() && chart.off("brush");
+        };
+      }
+    }, [chartRef.current, onBrush]);
+
+    useEffect(() => {
+      const chart = chartRef.current;
+      if (chart && onBrushEnd) {
+        chart.on("brushend", onBrushEnd);
+        return () => {
+          !chart.isDisposed() && chart.off("brushend");
+        };
+      }
+    }, [chartRef.current, onBrushEnd]);
+
+    useEffect(() => {
+      const chart = chartRef.current;
+      if (chart && onBrushSelected) {
+        chart.on("brushselected", onBrushSelected);
+        return () => {
+          !chart.isDisposed() && chart.off("brushselected");
+        };
+      }
+    }, [chartRef.current, onBrushSelected]);
+
+    return (
+      <ChartContainer
+        theme={theme}
+        options={options}
+        chartRef={chartRef}
+        title={title}
+        dataTableRenderer={dataTableRenderer}
+      >
+        {actions}
+      </ChartContainer>
+    );
+  },
+);
+GenericChartBase.displayName = "GenericChart";
+
+export const GenericChart: FC<GenericProps> = (props) => (
+  <ChartWrapper>
+    <GenericChartBase {...props} />
+  </ChartWrapper>
+);
diff --git a/packages/chart/src/charts/MapSeries.tsx b/packages/chart/src/charts/MapSeries.tsx
new file mode 100644
index 0000000..0fd58f2
--- /dev/null
+++ b/packages/chart/src/charts/MapSeries.tsx
@@ -0,0 +1,217 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  compareValues,
+  Countries,
+  Format,
+  isEmpty,
+} from "@react-fabric/utilities";
+import * as echarts from "echarts";
+import { type EChartOption, type EChartsType } from "echarts";
+import { memo, useEffect, useRef, useState, type FC } from "react";
+import { ChartPalette } from "../theme/palettes";
+import { type BaseChart, type CountType } from "../types";
+import { countRenderer } from "../types/utils";
+import { ChartContainer } from "../wrapper/ChartContainer";
+import { ChartWrapper } from "../wrapper/ChartWrapper";
+
+import {
+  Button,
+  CoreIcons,
+  ToggleButtonGroup,
+  useMemoDebugger,
+} from "@react-fabric/core";
+import WorldMap from "../types/world.svg";
+echarts.registerMap("world", { svg: WorldMap });
+
+export interface MapSeriesProps extends BaseChart, CountType {
+  onClick?: (key: string) => void;
+}
+
+const MapSeriesChart: FC<MapSeriesProps> = memo(
+  ({ data, onExport, theme: chartTheme, title, onClick }: MapSeriesProps) => {
+    const chartRef = useRef<EChartsType>(null);
+    const [type, setType] = useState("map");
+    const [zoom, setZoom] = useState(1.25);
+
+    const options = useMemoDebugger<EChartOption>(
+      () => {
+        if (isEmpty(data)) return {};
+
+        const sorted = data
+          .map((d) => ({
+            ...d,
+            label: d.label ?? Countries.name(d.id),
+          }))
+          .sort(compareValues("desc", "count"));
+        const valueMap = data.map((d) => d.count);
+
+        if (type === "column") {
+          return {
+            xAxis: {
+              type: "category",
+              nameLocation: "center",
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                rotate: 30,
+              },
+              data: [],
+            },
+            yAxis: {
+              type: "value",
+              axisLabel: {
+                formatter: (val: AnyObject) => Format.number(val),
+              },
+            },
+            series: sorted.map((item, index) => ({
+              id: item.id + index,
+              type: "bar",
+              label: {
+                show: true,
+                rotate: 90,
+                formatter: "{a}",
+                position: "inside",
+                color: "#fff",
+              },
+              data: [
+                {
+                  value: item.count,
+                },
+              ],
+              name: item.label ?? item.id,
+              universalTransition: true,
+            })),
+          } as AnyObject;
+        }
+
+        return {
+          legend: {
+            show: false,
+          },
+          visualMap: {
+            type: "piecewise",
+            min: Math.min(...valueMap) - 1,
+            max: Math.max(...valueMap) + 1,
+            show: false,
+            color: [...ChartPalette.Heatmap],
+            calculable: true,
+            orient: "horizontal",
+            left: "center",
+            bottom: 48,
+          } as AnyObject,
+          series: [
+            {
+              id: "mapseries",
+              name: title ?? "Map Series",
+              type: "map",
+              map: "world",
+              aspectScale: 1,
+              roam: "move",
+              colorBy: "data",
+              nameProperty: "name",
+              universalTransition: true,
+              emphasis: {
+                label: { show: false },
+              },
+              select: {
+                disabled: true,
+              },
+              data: sorted.map(({ id, label: name, count: value }) => ({
+                id,
+                name,
+                value,
+              })),
+            },
+          ],
+        };
+      },
+      [data, title, type],
+      "MapChart options",
+    );
+
+    useEffect(() => {
+      setZoom(1.25);
+    }, [data, type]);
+
+    useEffect(() => {
+      chartRef.current?.setOption({
+        series: [
+          {
+            zoom,
+          },
+        ],
+      });
+    }, [zoom]);
+
+    return (
+      <ChartContainer
+        title={title}
+        onExport={onExport}
+        chartRef={chartRef}
+        options={options}
+        dataTableRenderer={countRenderer}
+        onClick={(e) => e.data && onClick?.(e?.data?.id ?? "")}
+      >
+        {type === "map" && (
+          <input
+            type="range"
+            min={1.25}
+            max={24}
+            step={0.25}
+            value={zoom}
+            onChange={(e) => setZoom(e.target.valueAsNumber)}
+          />
+        )}
+        <ToggleButtonGroup value={type} onChange={setType as AnyObject}>
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.map}
+            aria-label="map"
+            value="map"
+          />
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartColumn}
+            aria-label="column"
+            value="column"
+          />
+        </ToggleButtonGroup>
+      </ChartContainer>
+    );
+  },
+);
+MapSeriesChart.displayName = "MapSeriesChart";
+
+/**
+ * Chart to display simple map data series
+ */
+export const MapSeries: FC<MapSeriesProps> = (props) => (
+  <ChartWrapper>
+    <MapSeriesChart {...props} />
+  </ChartWrapper>
+);
diff --git a/packages/chart/src/charts/TimeSeries.tsx b/packages/chart/src/charts/TimeSeries.tsx
new file mode 100644
index 0000000..eee546d
--- /dev/null
+++ b/packages/chart/src/charts/TimeSeries.tsx
@@ -0,0 +1,236 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  Button,
+  CoreIcons,
+  Divider,
+  ToggleButtonGroup,
+  useMemoDebugger,
+} from "@react-fabric/core";
+import { isEmpty } from "@react-fabric/utilities";
+import { type EChartOption, type EChartsType } from "echarts";
+import { memo, useCallback, useEffect, useRef, useState, type FC } from "react";
+import { type BaseChart, type TimeSeriesType } from "../types";
+import { timeSeriesRenderer } from "../types/utils";
+import { ChartContainer } from "../wrapper/ChartContainer";
+import { ChartWrapper } from "../wrapper/ChartWrapper";
+import { PaletteSelect } from "../wrapper/PaletteSelect";
+
+export interface TimeSeriesProps extends BaseChart, TimeSeriesType {
+  type?: "line" | "column" | "line-stacked" | "column-stacked";
+  onClick?: (data: { category: string; series: string }) => void;
+  onBrush?: (range: { start: Date; end: Date }) => void;
+}
+
+const TimeSeriesChart: FC<TimeSeriesProps> = memo(
+  ({
+    data,
+    onExport,
+    categoryAxisName,
+    valueAxisName,
+    title,
+    theme: chartTheme,
+    type: chartType = "column",
+    onClick,
+    onBrush,
+  }: TimeSeriesProps) => {
+    const chartRef = useRef<EChartsType>(null);
+    const [type, setType] = useState(chartType);
+    const [theme, setTheme] = useState(chartTheme);
+
+    useEffect(() => {
+      setType(chartType);
+    }, [chartType]);
+    useEffect(() => {
+      setTheme(chartTheme);
+    }, [chartTheme]);
+
+    const enableBrush = useCallback(() => {
+      chartRef.current?.dispatchAction({
+        type: "restore",
+      });
+      chartRef.current?.dispatchAction({
+        type: "takeGlobalCursor",
+        // If intending to enable brush, must set. Otherwise, the mouse will be disabled to brush.
+        key: "brush",
+        brushOption: {
+          // See more info in the `brushType` of "brush component".
+          // If set as `false`, the mouse is disabled to brush.
+          brushType: "lineX",
+          // See more info in the `brushModel` of "brush component".
+          // IF not set, use the `brushMode` of brush component.
+          brushMode: "rect",
+        },
+      });
+    }, []);
+
+    useEffect(() => {
+      const chart = chartRef.current;
+      if (chart && !chart?.isDisposed()) {
+        enableBrush();
+        let range = [0, 0];
+        chart.on("brushselected", (e: KeyValue) => {
+          range = e.batch?.[0]?.areas?.[0]?.coordRange;
+        });
+        chart.on("brushEnd", () => {
+          onBrush?.({ start: new Date(range?.[0]), end: new Date(range?.[1]) });
+          enableBrush();
+        });
+        return () => {
+          !chart.isDisposed() && chart.off("brushEnd");
+          !chart.isDisposed() && chart.off("brushselected");
+        };
+      }
+    }, [chartRef.current, onBrush]);
+
+    const options = useMemoDebugger<EChartOption>(
+      () => {
+        if (isEmpty(data)) {
+          chartRef.current?.clear();
+          return {};
+        }
+
+        const stack = type.includes("stacked") ? "stack" : undefined;
+
+        const [_type, stacked] = type.split("-");
+        const categoryAxis: AnyObject = {
+          name: categoryAxisName,
+          type: "time",
+          nameGap: 32,
+          nameLocation: "center",
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            formatter: {
+              year: "{yyyy}",
+              month: "{MMM}",
+              day: "{d}",
+              hour: "{HH}:{mm}",
+              minute: "{HH}:{mm}",
+              second: "{HH}:{mm}:{ss}",
+              millisecond: "{hh}:{mm}:{ss} {SSS}",
+              none: "{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}",
+            } as AnyObject,
+          },
+        } as EChartOption.XAxis;
+        const valueAxis: AnyObject = {
+          name: valueAxisName,
+          type: "value",
+          nameGap: 32,
+          nameLocation: "center",
+        } as EChartOption.YAxis;
+
+        const series = data?.map(
+          (item) =>
+            ({
+              id: item.id,
+              stack,
+              areaStyle: stacked ? {} : undefined,
+              symbol: "none",
+              type: _type === "column" ? "bar" : _type,
+              name: item.label ?? item.id,
+              data: item.values,
+              universalTransition: true,
+            }) as AnyObject,
+        );
+
+        return {
+          xAxis: categoryAxis,
+          yAxis: valueAxis,
+          series,
+          brush: {
+            toolbox: ["lineX", "clear"],
+            brushType: "lineX",
+            xAxisIndex: 0,
+          },
+          tooltip: {
+            trigger: "axis",
+            confine: true,
+            position: "top",
+          } as AnyObject,
+        };
+      },
+      [data, type, categoryAxisName, valueAxisName],
+      "TimeChart options",
+    );
+
+    return (
+      <ChartContainer
+        title={title}
+        onExport={onExport}
+        theme={theme}
+        options={options}
+        chartRef={chartRef}
+        isEmpty={isEmpty(data)}
+        emptyIcon={CoreIcons.chartColumn}
+        dataTableRenderer={timeSeriesRenderer}
+        onClick={(e) => onClick?.({ category: e.data[0], series: e.seriesId })}
+      >
+        <ToggleButtonGroup value={type} onChange={setType as AnyObject}>
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartLine}
+            value="line"
+            aria-label="line"
+          />
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartColumn}
+            value="column"
+            aria-label="column"
+          />
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartLineStacked}
+            value="line-stacked"
+            aria-label="line-stacked"
+          />
+          <Button
+            size="sm"
+            variant="link"
+            icon={CoreIcons.chartColumnStacked}
+            value="column-stacked"
+            aria-label="column-stacked"
+          />
+        </ToggleButtonGroup>
+        <Divider vertical />
+        <PaletteSelect theme={theme} onClick={setTheme} />
+      </ChartContainer>
+    );
+  },
+);
+TimeSeriesChart.displayName = "TimeSeriesChart";
+
+/**
+ * Chart to display simple data time series
+ */
+export const TimeSeries: FC<TimeSeriesProps> = (props) => (
+  <ChartWrapper>
+    <TimeSeriesChart {...props} />
+  </ChartWrapper>
+);
diff --git a/packages/chart/src/charts/TimeSlider.tsx b/packages/chart/src/charts/TimeSlider.tsx
new file mode 100644
index 0000000..27d89fc
--- /dev/null
+++ b/packages/chart/src/charts/TimeSlider.tsx
@@ -0,0 +1,235 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  useDebounce,
+  useEffectDebugger,
+  useMemoDebugger,
+} from "@react-fabric/core";
+import { isEmpty } from "@react-fabric/utilities";
+import { endOfDay, startOfDay } from "date-fns";
+import { type EChartOption, type EChartsType } from "echarts";
+import { memo, useCallback, useEffect, useRef, useState, type FC } from "react";
+import { type BaseChart } from "../types";
+import { ChartContainer } from "../wrapper/ChartContainer";
+import { ChartWrapper } from "../wrapper/ChartWrapper";
+
+export interface TimeSliderProps extends BaseChart {
+  data: Array<[Date, number]>;
+  range?: { start: Date; end: Date };
+  onBrush?: (range: { start: Date; end: Date }) => void;
+}
+
+const TimeSliderChart: FC<TimeSliderProps> = memo(
+  ({ data, range: sliderRange, onBrush }: TimeSliderProps) => {
+    const chartRef = useRef<EChartsType>(null);
+
+    const [range, setRange] = useState({ startValue: 0, endValue: 0 });
+
+    const handleBrush = useDebounce(
+      (range: AnyObject) => onBrush?.(range),
+      [onBrush],
+      100,
+    );
+
+    useEffect(() => {
+      const defaultStart = data.length > 0 ? data?.[0]?.[0]?.getTime() : 0;
+      const defaultEnd =
+        data.length > 0 ? data?.[data.length - 1]?.[0]?.getTime() : 32;
+
+      const getRangeValue = (v: number = 0, def = 0) =>
+        v >= defaultStart && v <= defaultEnd ? v : def;
+      setRange({
+        startValue: getRangeValue(sliderRange?.start.getTime(), defaultStart),
+        endValue: getRangeValue(sliderRange?.end.getTime(), defaultEnd),
+      });
+    }, [sliderRange, data]);
+
+    const enableBrush = useCallback(() => {
+      chartRef.current?.dispatchAction({
+        type: "restore",
+      });
+      chartRef.current?.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "dataZoomSelect",
+        // Activate or inactivate.
+        dataZoomSelectActive: true,
+      });
+    }, []);
+
+    useEffectDebugger(
+      () => {
+        const chart = chartRef.current;
+        if (chart && !chart?.isDisposed()) {
+          enableBrush();
+          chart.on("datazoom", () => {
+            const zoom = chart.getOption().dataZoom?.[0];
+            if (zoom) {
+              const startValue = Math.floor(zoom.startValue as number);
+              const endValue = Math.ceil(
+                (zoom.endValue as number) + (24 * 60 * 60 * 1000 - 1),
+              );
+              handleBrush({
+                start: startOfDay(new Date(startValue)),
+                end: endOfDay(new Date(endValue)),
+              });
+              setRange({ startValue, endValue });
+            }
+          });
+          return () => {
+            !chart.isDisposed() && chart.off("datazoom");
+          };
+        }
+      },
+      [chartRef.current, handleBrush],
+      "TimeSldier onBrush",
+    );
+
+    const options = useMemoDebugger<EChartOption>(
+      () => {
+        if (isEmpty(data)) {
+          chartRef.current?.clear();
+          return {};
+        }
+
+        const categoryAxis: AnyObject = {
+          type: "time",
+          nameGap: 0,
+          nameLocation: "center",
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            inside: true,
+          },
+          axisLine: {
+            show: false,
+          },
+          position: "bottom",
+        } as EChartOption.XAxis;
+        const valueAxis: AnyObject = {
+          type: "value",
+          nameGap: 24,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          nameLocation: "center",
+        } as EChartOption.YAxis;
+
+        const series = [
+          {
+            areaStyle: {},
+            symbol: "none",
+            type: "line",
+            smooth: true,
+            lineStyle: { width: 2 },
+            data,
+          } as AnyObject,
+        ];
+
+        return {
+          grid: {
+            top: 4,
+            left: 0,
+            right: 0,
+            bottom: "50%",
+          },
+          xAxis: categoryAxis,
+          yAxis: valueAxis,
+          series,
+          toolbox: {
+            itemSize: 0,
+            feature: {
+              dataZoom: {
+                yAxisIndex: "none",
+              },
+            },
+          },
+          legend: {
+            show: false,
+          },
+          dataZoom: [
+            {
+              type: "slider",
+              height: "45%",
+              bottom: 4,
+              left: 2,
+              right: 8,
+              ...range,
+            },
+          ],
+          tooltip: {
+            trigger: "axis",
+            confine: true,
+            position: "top",
+          } as AnyObject,
+        };
+      },
+      [data],
+      "TimeSlider options",
+    );
+
+    useEffect(() => {
+      setTimeout(() => {
+        chartRef.current?.setOption({
+          dataZoom: [
+            {
+              type: "slider",
+              height: "45%",
+              bottom: 4,
+              left: 2,
+              right: 8,
+              ...range,
+            } as AnyObject,
+          ],
+        });
+      }, 50);
+    }, [chartRef.current, range]);
+
+    return (
+      <ChartContainer
+        options={options}
+        chartRef={chartRef}
+        isEmpty={isEmpty(data)}
+      />
+    );
+  },
+);
+TimeSliderChart.displayName = "TimeSliderChart";
+
+/**
+ * Chart to display time scale data with zoom and brush */
+export const TimeSlider: FC<TimeSliderProps> = (props) => (
+  <ChartWrapper>
+    <TimeSliderChart {...props} />
+  </ChartWrapper>
+);
diff --git a/packages/chart/src/charts/WordBubble.tsx b/packages/chart/src/charts/WordBubble.tsx
new file mode 100644
index 0000000..1f5bdc1
--- /dev/null
+++ b/packages/chart/src/charts/WordBubble.tsx
@@ -0,0 +1,105 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, useIsDark, useMemoDebugger } from "@react-fabric/core";
+import { compareValues, isEmpty } from "@react-fabric/utilities";
+import { type EChartOption } from "echarts";
+import { memo, type FC } from "react";
+import { ChartPalette } from "../theme/palettes";
+import { type BaseChart, type CountType } from "../types";
+import { countRenderer } from "../types/utils";
+import { ChartContainer } from "../wrapper/ChartContainer";
+import { ChartWrapper } from "../wrapper/ChartWrapper";
+
+export interface WordBubbleProps extends Omit<BaseChart, "theme">, CountType {
+  onClick?: (key: string) => void;
+}
+
+const WordBubbleChart: FC<WordBubbleProps> = memo(
+  ({ data, title, onExport, onClick }: WordBubbleProps) => {
+    const isDark = useIsDark();
+
+    const options = useMemoDebugger<EChartOption>(
+      () => {
+        if (isEmpty(data)) return {};
+
+        const palette = isDark
+          ? ChartPalette.CloudDark
+          : ChartPalette.CloudLight;
+
+        return {
+          legend: undefined,
+          series: [
+            {
+              name: title,
+              type: "wordCloud",
+              shape: "circle",
+              sizeRange: [12, 60],
+              gridSize: 32,
+              rotationRange: [-10, 10],
+              rotationStep: 1,
+              drawOutOfBound: false,
+              layoutAnimation: true,
+              textStyle: {
+                fontFamily: "sans-serif",
+                fontWeight: "bold",
+                color: ({ dataIndex }: KeyValue) =>
+                  palette[dataIndex % palette.length],
+              },
+              data: data
+                .sort(compareValues("desc", "count"))
+                .map(({ id: key, label, count }, index) => ({
+                  name: label ?? key,
+                  value: count,
+                })),
+            },
+          ],
+        };
+      },
+      [data, title, isDark],
+      "WordChart options",
+    );
+
+    return (
+      <ChartContainer
+        title={title}
+        onExport={onExport}
+        options={options}
+        isEmpty={isEmpty(data)}
+        emptyIcon={CoreIcons.chartActivityScatter}
+        dataTableRenderer={countRenderer}
+        onClick={(e) => onClick?.(e?.name ?? "")}
+      />
+    );
+  },
+);
+WordBubbleChart.displayName = "WordBubbleChart";
+
+/**
+ * Chart to display simple word cloud
+ */
+export const WordBubble: FC<WordBubbleProps> = (props) => (
+  <ChartWrapper>
+    <WordBubbleChart {...props} />
+  </ChartWrapper>
+);
diff --git a/packages/chart/src/index.ts b/packages/chart/src/index.ts
new file mode 100644
index 0000000..6f61195
--- /dev/null
+++ b/packages/chart/src/index.ts
@@ -0,0 +1,32 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export { ActivityMap } from "./charts/ActivityMap";
+export { CountSeries } from "./charts/CountSeries";
+export { DataSeries } from "./charts/DataSeries";
+export { GenericChart } from "./charts/Generic";
+export { MapSeries } from "./charts/MapSeries";
+export { TimeSeries } from "./charts/TimeSeries";
+export { TimeSlider } from "./charts/TimeSlider";
+export { WordBubble } from "./charts/WordBubble";
+export { registerTheme } from "./types/charts";
diff --git a/packages/chart/src/theme/darkBase.ts b/packages/chart/src/theme/darkBase.ts
new file mode 100644
index 0000000..1f01503
--- /dev/null
+++ b/packages/chart/src/theme/darkBase.ts
@@ -0,0 +1,400 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export const DarkThemeBase = {
+  backgroundColor: "#101211",
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: "#ffffff",
+    },
+    subtextStyle: {
+      color: "#dddddd",
+    },
+  },
+  line: {
+    itemStyle: {
+      borderWidth: "2",
+    },
+    lineStyle: {
+      width: "3",
+    },
+    symbolSize: "12",
+    symbol: "circle",
+    smooth: false,
+  },
+  radar: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#aaa",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#666",
+      },
+    },
+    nameTextStyle: {
+      color: "#eee",
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#666"],
+      },
+    },
+    splitArea: {
+      show: true,
+      areaStyle: {
+        color: ["#1C293A", "#2C3E50"],
+      },
+    },
+    itemStyle: {
+      borderWidth: "2",
+    },
+    lineStyle: {
+      width: "3",
+    },
+    symbol: "circle",
+    smooth: true,
+  },
+  bar: {
+    itemStyle: {
+      barBorderWidth: 0,
+      barBorderColor: "#ccc",
+    },
+  },
+  pie: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  boxplot: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  parallel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  sankey: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  funnel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  gauge: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+    lineStyle: {
+      width: "1",
+      color: "#ffffff",
+    },
+    symbolSize: "0",
+    symbol: "circle",
+    smooth: true,
+    label: {
+      color: "#293441",
+    },
+  },
+  map: {
+    itemStyle: {
+      areaColor: "#2C3E50",
+      borderColor: "#172130",
+      borderWidth: 0.5,
+    },
+    emphasis: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+      label: {
+        color: "#fff",
+      },
+    },
+  },
+  geo: {
+    itemStyle: {
+      areaColor: "#2C3E50",
+      borderColor: "#172130",
+      borderWidth: 0.5,
+    },
+    emphasis: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+    },
+  },
+  categoryAxis: {
+    nameGap: 24,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#666",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#666",
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: "#eee",
+    },
+    nameTextStyle: {
+      color: "#eee",
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#444"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  valueAxis: {
+    nameGap: 24,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#666",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#666",
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: "#eee",
+    },
+    nameTextStyle: {
+      color: "#eee",
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#444"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  logAxis: {
+    nameGap: 24,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#666",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#666",
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: "#eee",
+    },
+    nameTextStyle: {
+      color: "#eee",
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#444"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  timeAxis: {
+    nameGap: 24,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#666",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#666",
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: "#eee",
+    },
+    nameTextStyle: {
+      color: "#eee",
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#444"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  visualMap: {
+    textStyle: {
+      color: "#eee",
+    },
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: "#999999",
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: "#666666",
+      },
+    },
+  },
+  legend: {
+    inactiveColor: "rgb(192 192 192 / .75)",
+    textStyle: {
+      color: "#5d6d7d6",
+    },
+  },
+  tooltip: {
+    backgroundColor: "#0C141D",
+    borderColor: "#2C3E50",
+    textStyle: {
+      color: "#FCFDFD",
+    },
+    axisPointer: {
+      lineStyle: {
+        color: "#cccccc",
+        width: 1,
+      },
+      crossStyle: {
+        color: "#cccccc",
+        width: 1,
+      },
+    },
+  },
+  timeline: {
+    lineStyle: {
+      width: 1,
+    },
+    itemStyle: {
+      borderWidth: 1,
+    },
+    controlStyle: {
+      borderWidth: 0.5,
+    },
+    emphasis: {
+      controlStyle: {
+        borderWidth: 0.5,
+      },
+    },
+  },
+  dataZoom: {
+    backgroundColor: "rgba(255,255,255,0)",
+    borderColor: "#545454",
+    fillerColor: "rgba(29, 209, 161,0.2)",
+    dataBackground: {
+      areaStyle: { color: "#A5B2AE" },
+      lineStyle: { width: 0 },
+    },
+    selectedDataBackground: {
+      areaStyle: { color: "#4FDAB4" },
+      lineStyle: { color: "#568376" },
+    },
+    handleColor: "#69A394",
+    moveHandleStyle: { color: "#69A394" },
+    emphasis: {
+      handleColor: { color: "#84B9AB" },
+      moveHandleStyle: { color: "#84B9AB" },
+    },
+    handleSize: 32,
+    textStyle: {
+      fontSize: 14,
+      padding: 4,
+      color: "#fff",
+      backgroundColor: "#0C141D",
+    },
+  },
+  markPoint: {
+    label: {
+      color: "#293441",
+    },
+    emphasis: {
+      label: {
+        color: "#293441",
+      },
+    },
+  },
+};
diff --git a/packages/chart/src/theme/index.ts b/packages/chart/src/theme/index.ts
new file mode 100644
index 0000000..c2c5eb3
--- /dev/null
+++ b/packages/chart/src/theme/index.ts
@@ -0,0 +1,122 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { DarkThemeBase } from "./darkBase";
+import { LightThemeBase } from "./lightBase";
+import { ChartPalette } from "./palettes";
+import Color from "color";
+
+const makePaletteSequence = (colors: string[]) => {
+  return [...colors, ...[...colors.slice(1, -1)].reverse()];
+};
+
+export const registerTheme = (
+  echarts: AnyObject,
+  key: string,
+  colors: string[],
+) => {
+  const base = colors[0];
+  const handles = Color(base).mix(Color("#f1f5f9"), 0.15).hex();
+  const window = Color(base).alpha(0.1).hexa();
+  echarts.registerTheme(`${key}`, {
+    ...LightThemeBase,
+    dataZoom: {
+      ...LightThemeBase.dataZoom,
+      fillerColor: window,
+      selectedDataBackground: {
+        areaStyle: {
+          color: base,
+        },
+        lineStyle: {
+          color: Color(base).mix(Color("#0f172a"), 0.35).hex(),
+        },
+      },
+      handleColor: base,
+      moveHandleStyle: { color: base },
+      emphasis: {
+        handleColor: {
+          color: handles,
+        },
+        moveHandleStyle: {
+          color: handles,
+        },
+      },
+    },
+    color: makePaletteSequence(colors),
+  });
+  echarts.registerTheme(`${key}_dark`, {
+    ...DarkThemeBase,
+    dataZoom: {
+      ...DarkThemeBase.dataZoom,
+      fillerColor: window,
+      selectedDataBackground: {
+        areaStyle: {
+          color: Color(base).mix(Color("#f1f5f9"), 0.35).hex(),
+        },
+        lineStyle: { color: base },
+      },
+      handleColor: base,
+      moveHandleStyle: { color: base },
+      emphasis: {
+        handleColor: {
+          color: handles,
+        },
+        moveHandleStyle: {
+          color: handles,
+        },
+      },
+    },
+    color: makePaletteSequence(colors),
+  });
+};
+
+export const registerThemes = (echarts: AnyObject) => {
+  echarts.registerTheme("default", {
+    ...LightThemeBase,
+    color: ChartPalette.Default,
+  });
+  echarts.registerTheme("default_dark", {
+    ...DarkThemeBase,
+    color: ChartPalette.Default,
+  });
+
+  echarts.registerTheme("activity", {
+    ...LightThemeBase,
+    color: ChartPalette.Activity,
+  });
+  echarts.registerTheme("activity_dark", {
+    ...DarkThemeBase,
+    color: ChartPalette.Activity,
+  });
+
+  registerTheme(echarts, "qualitative", ChartPalette.Qualitative);
+  registerTheme(echarts, "diverging", ChartPalette.Diverging);
+  registerTheme(echarts, "sequential", ChartPalette.Sequential);
+  registerTheme(echarts, "spectral", ChartPalette.Spectral);
+  registerTheme(echarts, "uber", ChartPalette.UberPool);
+  registerTheme(echarts, "fireice", ChartPalette.FireIce);
+  registerTheme(echarts, "warming", ChartPalette.GlobalWarming);
+  registerTheme(echarts, "sunrise", ChartPalette.Sunrise);
+  registerTheme(echarts, "ocean", ChartPalette.Ocean);
+  registerTheme(echarts, "wine", ChartPalette.Wine);
+};
diff --git a/packages/chart/src/theme/lightBase.ts b/packages/chart/src/theme/lightBase.ts
new file mode 100644
index 0000000..8729bd6
--- /dev/null
+++ b/packages/chart/src/theme/lightBase.ts
@@ -0,0 +1,397 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export const LightThemeBase = {
+  backgroundColor: "#fdFfFe",
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: "#666666",
+    },
+    subtextStyle: {
+      color: "#999999",
+    },
+  },
+  line: {
+    itemStyle: {
+      borderWidth: "2",
+    },
+    lineStyle: {
+      width: "3",
+    },
+    symbolSize: "12",
+    symbol: "circle",
+    smooth: false,
+  },
+  radar: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#999",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#333",
+      },
+    },
+    nameTextStyle: {
+      color: "#666",
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#ccc"],
+      },
+    },
+    splitArea: {
+      show: true,
+      areaStyle: {
+        color: ["#F8FAFA", "#E5ECEF"],
+      },
+    },
+    itemStyle: {
+      borderWidth: "2",
+    },
+    lineStyle: {
+      width: "3",
+    },
+    symbolSize: "8",
+    symbol: "emptyCircle",
+    smooth: false,
+  },
+  bar: {
+    itemStyle: {
+      barBorderWidth: 0,
+      barBorderColor: "#ccc",
+    },
+  },
+  pie: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  boxplot: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  parallel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  sankey: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  funnel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  gauge: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc",
+    },
+    lineStyle: {
+      width: "1",
+      color: "#cccccc",
+    },
+    symbolSize: "8",
+    symbol: "emptyCircle",
+    smooth: false,
+    label: {
+      color: "#ffffff",
+    },
+  },
+  map: {
+    itemStyle: {
+      areaColor: "#eeeeee",
+      borderColor: "#999999",
+      borderWidth: 0.5,
+    },
+    emphasis: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+    },
+  },
+  geo: {
+    itemStyle: {
+      areaColor: "#eeeeee",
+      borderColor: "#999999",
+      borderWidth: 0.5,
+    },
+    emphasis: {
+      itemStyle: {
+        borderWidth: 1,
+      },
+    },
+  },
+  categoryAxis: {
+    nameGap: 24,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#333",
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: "#666",
+    },
+    nameTextStyle: {
+      color: "#666",
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#eee"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  valueAxis: {
+    nameGap: 24,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#333",
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: "#666",
+    },
+    nameTextStyle: {
+      color: "#666",
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#eee"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  logAxis: {
+    nameGap: 24,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#333",
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: "#666",
+    },
+    nameTextStyle: {
+      color: "#666",
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#eee"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  timeAxis: {
+    nameGap: 24,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#cccccc",
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#333",
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: "#666",
+    },
+    nameTextStyle: {
+      color: "#666",
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#eee"],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"],
+      },
+    },
+  },
+  visualMap: {
+    textStyle: {
+      color: "#666",
+    },
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: "#999999",
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: "#666666",
+      },
+    },
+  },
+  legend: {
+    inactiveColor: "rgb(96 96 96 / .75)",
+    textStyle: {
+      color: "#565656",
+    },
+  },
+  tooltip: {
+    backgroundColor: "#FCFDFD",
+    textStyle: {
+      color: "#172130",
+    },
+    axisPointer: {
+      lineStyle: {
+        color: "#cccccc",
+        width: 1,
+      },
+      crossStyle: {
+        color: "#cccccc",
+        width: 1,
+      },
+    },
+  },
+  timeline: {
+    lineStyle: {
+      width: 1,
+    },
+    itemStyle: {
+      borderWidth: 1,
+    },
+    controlStyle: {
+      borderWidth: 0.5,
+    },
+    emphasis: {
+      controlStyle: {
+        borderWidth: 0.5,
+      },
+    },
+  },
+  dataZoom: {
+    backgroundColor: "rgba(255,255,255,0)",
+    borderColor: "#ccc",
+    fillerColor: "rgba(29, 209, 161,0.2)",
+    dataBackground: {
+      areaStyle: { color: "#5D6563" },
+      lineStyle: { width: 0 },
+    },
+    selectedDataBackground: {
+      areaStyle: { color: "#5D6563" },
+      lineStyle: { color: "#69A394" },
+    },
+    handleColor: "#69A394",
+    moveHandleStyle: { color: "#69A394" },
+    emphasis: {
+      handleColor: { color: "#4D7167" },
+      moveHandleStyle: { color: "#4D7167" },
+    },
+    handleSize: 32,
+    textStyle: {
+      fontSize: 14,
+      padding: 4,
+      color: "#333",
+      backgroundColor: "#fff",
+    },
+  },
+  markPoint: {
+    label: {
+      color: "#ffffff",
+    },
+    emphasis: {
+      label: {
+        color: "#ffffff",
+      },
+    },
+  },
+};
diff --git a/packages/chart/src/theme/palettes.ts b/packages/chart/src/theme/palettes.ts
new file mode 100644
index 0000000..85156bc
--- /dev/null
+++ b/packages/chart/src/theme/palettes.ts
@@ -0,0 +1,589 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+const Default = [
+  "#0b755a",
+  "#10ac84",
+  "#16e9b4",
+  "#ea2e2e",
+  "#ee5253",
+  "#f48b8b",
+  "#1f74ad",
+  "#3498db",
+  "#67b2e4",
+  "#6b4884",
+  "#82589f",
+  "#9e7bb7",
+  "#ff7b00",
+  "#ff9f43",
+  "#ffbd80",
+  "#0c5f73",
+  "#1289a7",
+  "#18bde7",
+  "#892a56",
+  "#b33771",
+  "#cf6395",
+];
+const Activity = [
+  "#2ad4ac",
+  "#ea5353",
+  "#39a1e6",
+  "#f8a850",
+  "#B64E84",
+  "#92c652",
+  "#ac7dc4",
+  "#2c91bd",
+  "#f8d653",
+  "#D16082",
+  "#52c8d7",
+  "#475065",
+];
+const Heatmap = [
+  "#079992",
+  "#23a595",
+  "#3eb197",
+  "#5abd9a",
+  "#76c89d",
+  "#92d4a0",
+  "#aee0a2",
+  "#c0e8a4",
+];
+
+const CloudLight = [
+  "#00b894",
+  "#fdcb6e",
+  "#0984e3",
+  "#e17055",
+  "#27ae60",
+  "#e84393",
+  "#574b90",
+  "#e66767",
+  "#82589F",
+  "#3dc1d3",
+  "#cc8e35",
+  "#227093",
+  "#8395a7",
+  "#22a6b3",
+  "#535c68",
+];
+const CloudDark = [
+  "#55efc4",
+  "#ffeaa7",
+  "#74b9ff",
+  "#fab1a0",
+  "#2ecc71",
+  "#fd79a8",
+  "#786fa6",
+  "#ea8685",
+  "#D6A2E8",
+  "#63cdda",
+  "#ffb142",
+  "#34ace0",
+  "#c8d6e5",
+  "#7ed6df",
+  "#95afc0",
+];
+
+const Qualitative = [
+  "#12939A",
+  "#DDB27C",
+  "#88572C",
+  "#FF991F",
+  "#F15C17",
+  "#223F9A",
+  "#DA70BF",
+  "#125C77",
+  "#4DC19C",
+  "#776E57",
+  "#17B8BE",
+  "#F6D18A",
+  "#B7885E",
+  "#FFCB99",
+  "#F89570",
+  "#829AE3",
+  "#E79FD5",
+  "#1E96BE",
+  "#89DAC1",
+  "#B3AD9E",
+];
+const Sequential = [
+  "#0E7077",
+  "#108188",
+  "#00939C",
+  "#4BA7AF",
+  "#75BBC1",
+  "#9DD0D4",
+  "#C1E5E6",
+  "#E6FAFA",
+];
+
+const Diverging = [
+  "#C22E00",
+  "#D55A2B",
+  "#E68059",
+  "#F2A587",
+  "#F8C0AA",
+  "#FEEEE8",
+  "#BAE1E2",
+  "#97CED1",
+  "#71BABF",
+  "#49A6AE",
+  "#00939C",
+];
+
+const UberPool = [
+  "#223F9A",
+  "#2C51BE",
+  "#482BBD",
+  "#7A0DA6",
+  "#AE0E7F",
+  "#CF1750",
+  "#E31A1A",
+  "#FD7900",
+  "#FAC200",
+  "#FAE300",
+];
+
+const FireIce = [
+  "#007A99",
+  "#0198BD",
+  "#49E3CE",
+  "#E8FEB5",
+  "#FEEDB1",
+  "#FEAD54",
+  "#D50255",
+  "#7F1941",
+];
+const GlobalWarming = [
+  "#FFC300",
+  "#E57F00",
+  "#CB4600",
+  "#B21800",
+  "#98000A",
+  "#7F0023",
+  "#650031",
+  "#4C0035",
+];
+const Sunrise = [
+  "#194266",
+  "#355C7D",
+  "#63617F",
+  "#916681",
+  "#C06C84",
+  "#D28389",
+  "#E59A8F",
+  "#F8B195",
+];
+const Ocean = [
+  "#37535E",
+  "#3A748A",
+  "#4B9A95",
+  "#5EAB8B",
+  "#73BC84",
+  "#92CC8B",
+  "#BEDDA5",
+  "#E5EEc1",
+];
+const Wine = [
+  "#2C1E3D",
+  "#50315E",
+  "#764476",
+  "#9A5B88",
+  "#B77495",
+  "#CF91A3",
+  "#E0B1B3",
+  "#EDD1CA",
+];
+const Spectral = [
+  "#9e0142",
+  "#d53e4f",
+  "#f46d43",
+  "#fdae61",
+  "#fee08b",
+  "#ffffbf",
+  "#e6f598",
+  "#abdda4",
+  "#66c2a5",
+  "#3288bd",
+  "#5e4fa2",
+];
+
+const PurpleBlueYellow = [
+  "#2B1E3E",
+  "#383C65",
+  "#3E5F7E",
+  "#49838A",
+  "#5EA28D",
+  "#82BB92",
+  "#AECEA1",
+  "#D6DEBF",
+];
+const YellowGreen = [
+  "#ffffe5",
+  "#f7fcb9",
+  "#d9f0a3",
+  "#addd8e",
+  "#78c679",
+  "#41ab5d",
+  "#238443",
+  "#006837",
+  "#004529",
+];
+const YellowGreenBlue = [
+  "#ffffd9",
+  "#edf8b1",
+  "#c7e9b4",
+  "#7fcdbb",
+  "#41b6c4",
+  "#1d91c0",
+  "#225ea8",
+  "#253494",
+  "#081d58",
+];
+const GreenBlue = [
+  "#f7fcf0",
+  "#e0f3db",
+  "#ccebc5",
+  "#a8ddb5",
+  "#7bccc4",
+  "#4eb3d3",
+  "#2b8cbe",
+  "#0868ac",
+  "#084081",
+];
+const BlueGreen = [
+  "#f7fcfd",
+  "#e5f5f9",
+  "#ccece6",
+  "#99d8c9",
+  "#66c2a4",
+  "#41ae76",
+  "#238b45",
+  "#006d2c",
+  "#00441b",
+];
+const PurpleBlueGreen = [
+  "#fff7fb",
+  "#ece2f0",
+  "#d0d1e6",
+  "#a6bddb",
+  "#67a9cf",
+  "#3690c0",
+  "#02818a",
+  "#016c59",
+  "#014636",
+];
+const PurpleBlue = [
+  "#fff7fb",
+  "#ece7f2",
+  "#d0d1e6",
+  "#a6bddb",
+  "#74a9cf",
+  "#3690c0",
+  "#0570b0",
+  "#045a8d",
+  "#023858",
+];
+const BluePurple = [
+  "#f7fcfd",
+  "#e0ecf4",
+  "#bfd3e6",
+  "#9ebcda",
+  "#8c96c6",
+  "#8c6bb1",
+  "#88419d",
+  "#810f7c",
+  "#4d004b",
+];
+const RedPurple = [
+  "#fff7f3",
+  "#fde0dd",
+  "#fcc5c0",
+  "#fa9fb5",
+  "#f768a1",
+  "#dd3497",
+  "#ae017e",
+  "#7a0177",
+  "#49006a",
+];
+const PurpleRed = [
+  "#f7f4f9",
+  "#e7e1ef",
+  "#d4b9da",
+  "#c994c7",
+  "#df65b0",
+  "#e7298a",
+  "#ce1256",
+  "#980043",
+  "#67001f",
+];
+const OrangeRed = [
+  "#fff7ec",
+  "#fee8c8",
+  "#fdd49e",
+  "#fdbb84",
+  "#fc8d59",
+  "#ef6548",
+  "#d7301f",
+  "#b30000",
+  "#7f0000",
+];
+const YellowOrangeRed = [
+  "#ffffcc",
+  "#ffeda0",
+  "#fed976",
+  "#feb24c",
+  "#fd8d3c",
+  "#fc4e2a",
+  "#e31a1c",
+  "#bd0026",
+  "#800026",
+];
+const YellowOrangeBrown = [
+  "#ffffe5",
+  "#fff7bc",
+  "#fee391",
+  "#fec44f",
+  "#fe9929",
+  "#ec7014",
+  "#cc4c02",
+  "#993404",
+  "#662506",
+];
+const Purple = [
+  "#fcfbfd",
+  "#efedf5",
+  "#dadaeb",
+  "#bcbddc",
+  "#9e9ac8",
+  "#807dba",
+  "#6a51a3",
+  "#54278f",
+  "#3f007d",
+];
+const Blue = [
+  "#f7fbff",
+  "#deebf7",
+  "#c6dbef",
+  "#9ecae1",
+  "#6baed6",
+  "#4292c6",
+  "#2171b5",
+  "#08519c",
+  "#08306b",
+];
+const Green = [
+  "#f7fcf5",
+  "#e5f5e0",
+  "#c7e9c0",
+  "#a1d99b",
+  "#74c476",
+  "#41ab5d",
+  "#238b45",
+  "#006d2c",
+  "#00441b",
+];
+const Orange = [
+  "#fff5eb",
+  "#fee6ce",
+  "#fdd0a2",
+  "#fdae6b",
+  "#fd8d3c",
+  "#f16913",
+  "#d94801",
+  "#a63603",
+  "#7f2704",
+];
+const Red = [
+  "#fff5f0",
+  "#fee0d2",
+  "#fcbba1",
+  "#fc9272",
+  "#fb6a4a",
+  "#ef3b2c",
+  "#cb181d",
+  "#a50f15",
+  "#67000d",
+];
+const Grey = [
+  "#ffffff",
+  "#f0f0f0",
+  "#d9d9d9",
+  "#bdbdbd",
+  "#969696",
+  "#737373",
+  "#525252",
+  "#252525",
+  "#000000",
+];
+const OrangePurple = [
+  "#7f3b08",
+  "#b35806",
+  "#e08214",
+  "#fdb863",
+  "#fee0b6",
+  "#f7f7f7",
+  "#d8daeb",
+  "#b2abd2",
+  "#8073ac",
+  "#542788",
+  "#2d004b",
+];
+const BrownGreen = [
+  "#543005",
+  "#8c510a",
+  "#bf812d",
+  "#dfc27d",
+  "#f6e8c3",
+  "#f5f5f5",
+  "#c7eae5",
+  "#80cdc1",
+  "#35978f",
+  "#01665e",
+  "#003c30",
+];
+const PurpleGreen = [
+  "#40004b",
+  "#762a83",
+  "#9970ab",
+  "#c2a5cf",
+  "#e7d4e8",
+  "#f7f7f7",
+  "#d9f0d3",
+  "#a6dba0",
+  "#5aae61",
+  "#1b7837",
+  "#00441b",
+];
+const PinkGreen = [
+  "#8e0152",
+  "#c51b7d",
+  "#de77ae",
+  "#f1b6da",
+  "#fde0ef",
+  "#f7f7f7",
+  "#e6f5d0",
+  "#b8e186",
+  "#7fbc41",
+  "#4d9221",
+  "#276419",
+];
+const RedBlue = [
+  "#67001f",
+  "#b2182b",
+  "#d6604d",
+  "#f4a582",
+  "#fddbc7",
+  "#f7f7f7",
+  "#d1e5f0",
+  "#92c5de",
+  "#4393c3",
+  "#2166ac",
+  "#053061",
+];
+const RedGray = [
+  "#67001f",
+  "#b2182b",
+  "#d6604d",
+  "#f4a582",
+  "#fddbc7",
+  "#ffffff",
+  "#e0e0e0",
+  "#bababa",
+  "#878787",
+  "#4d4d4d",
+  "#1a1a1a",
+];
+const RedYellowBlue = [
+  "#a50026",
+  "#d73027",
+  "#f46d43",
+  "#fdae61",
+  "#fee090",
+  "#ffffbf",
+  "#e0f3f8",
+  "#abd9e9",
+  "#74add1",
+  "#4575b4",
+  "#313695",
+];
+const RedYellowGreen = [
+  "#a50026",
+  "#d73027",
+  "#f46d43",
+  "#fdae61",
+  "#fee08b",
+  "#ffffbf",
+  "#d9ef8b",
+  "#a6d96a",
+  "#66bd63",
+  "#1a9850",
+  "#006837",
+];
+
+export const ChartPalette = {
+  Default,
+  Activity,
+  Heatmap,
+  CloudDark,
+  CloudLight,
+  Qualitative,
+  Sequential,
+  Diverging,
+  UberPool,
+  FireIce,
+  GlobalWarming,
+  Sunrise,
+  Ocean,
+  Wine,
+  Spectral,
+  Blue,
+  Green,
+  Orange,
+  Purple,
+  Red,
+  Grey,
+  BrownGreen,
+  GreenBlue,
+  BlueGreen,
+  BluePurple,
+  OrangeRed,
+  PurpleBlue,
+  OrangePurple,
+  PurpleRed,
+  PurpleBlueGreen,
+  PurpleBlueYellow,
+  PurpleGreen,
+  PinkGreen,
+  RedPurple,
+  RedBlue,
+  RedGray,
+  RedYellowBlue,
+  RedYellowGreen,
+  YellowGreen,
+  YellowGreenBlue,
+  YellowOrangeBrown,
+  YellowOrangeRed,
+};
+
+export type PALETTE = keyof typeof ChartPalette;
diff --git a/packages/chart/src/types/charts.ts b/packages/chart/src/types/charts.ts
new file mode 100644
index 0000000..2c2df86
--- /dev/null
+++ b/packages/chart/src/types/charts.ts
@@ -0,0 +1,32 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import * as echarts from "echarts";
+import { registerThemes, registerTheme as RT } from "../theme";
+
+registerThemes(echarts);
+
+export default echarts;
+export const registerTheme = (key: string, colors: string[]) => {
+  RT(echarts, key, colors);
+};
diff --git a/packages/chart/src/types/index.ts b/packages/chart/src/types/index.ts
new file mode 100644
index 0000000..7df2f0d
--- /dev/null
+++ b/packages/chart/src/types/index.ts
@@ -0,0 +1,61 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export type Theme =
+  | "default"
+  | "activity"
+  | "cloud"
+  | "qualitative"
+  | "diverging"
+  | "sequential"
+  | "spectral"
+  | "uber"
+  | "fireice"
+  | "warming"
+  | "sunrise"
+  | "ocean"
+  | "wine";
+
+export interface BaseChart {
+  title?: string;
+  theme?: Theme;
+  onExport?: (chart: { title: string; image: string }) => void;
+}
+
+export interface CountType {
+  data: Array<{ id: string; label?: string; count: number }>;
+}
+
+export interface SeriesType {
+  categoryAxisName?: string;
+  valueAxisName?: string;
+  valueFormat?: string;
+  categories: string[];
+  data: Array<{ id: string; label?: string; values: number[] }>;
+}
+
+export interface TimeSeriesType {
+  categoryAxisName?: string;
+  valueAxisName?: string;
+  data: Array<{ id: string; label?: string; values: Array<[Date, number]> }>;
+}
diff --git a/packages/chart/src/types/utils.ts b/packages/chart/src/types/utils.ts
new file mode 100644
index 0000000..07a17d9
--- /dev/null
+++ b/packages/chart/src/types/utils.ts
@@ -0,0 +1,151 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Format } from "@react-fabric/utilities";
+
+interface Series {
+  id: string;
+  name: string;
+  value: number;
+  data: Array<{ value: number }>;
+}
+interface SubSeries {
+  data: number[];
+}
+interface ListSeries {
+  data: Array<{ value: number[] }>;
+}
+interface MultiSeries {
+  data: Array<[string, number, number]>;
+}
+
+export const countRenderer = (opt: KeyValue) => {
+  const axis =
+    opt.xAxis?.[0].type !== "value" ? opt.xAxis?.[0] : opt.yAxis?.[0];
+  const series = opt.series;
+  const table = [
+    '<div class="grid gap-2 p-2" style="grid-template-columns: repeat(auto-fill, minmax(8rem, max-content));grid-auto-flow: row;">',
+  ];
+  if (axis) {
+    table.push(
+      ...series.map(
+        (s: Series) =>
+          `<div class="py-1 px-2 rounded ring-1"><label class="font-medium text-sm text-muted block">${s.name ?? s.id}</label><div class="text-end text-lg">${Format.number(
+            s.data[0]?.value,
+          )}</div></div>`,
+      ),
+    );
+  } else {
+    table.push(
+      ...series[0].data.map(
+        (s: Series) =>
+          `<div class="py-1 px-2 rounded ring-1"><label class="font-medium text-sm text-muted block">${s.name ?? s.id}</label><div class="text-end text-lg">${Format.number(s.value)}</div></div>`,
+      ),
+    );
+  }
+  table.push("</div>");
+  return table.join("");
+};
+
+export const seriesRenderer = (opt: KeyValue) => {
+  const radar = opt.radar?.[0];
+  const axis =
+    opt.xAxis?.[0].type !== "value" ? opt.xAxis?.[0] : opt.yAxis?.[0];
+  const series = opt.series;
+  const table = [
+    '<table class="border-separate border-spacing-1 mx-auto table-fixed min-w-full"><thead><tr class="sticky top-0 bg-base"><th></th>',
+  ];
+  table.push(
+    ...series.map((s: Series) => `<th class="truncate">${s.name ?? s.id}</th>`),
+  );
+  table.push("</tr></thead><tbody class='bg-alternate'>");
+  if (axis?.data) {
+    axis.data.forEach((ax: string, i: number) => {
+      table.push(`<tr><th class="truncate">${ax}</th>`);
+      table.push(
+        ...series.map(
+          (s: SubSeries) =>
+            `<td class="text-end">${Format.number(s.data[i])}</td>`,
+        ),
+      );
+      table.push("</tr>");
+    });
+  }
+  if (radar) {
+    radar.indicator.forEach((ax: Series, i: number) => {
+      table.push(`<tr><th>${ax.name}</th>`);
+      table.push(
+        ...series.map(
+          (s: ListSeries) =>
+            `<td class="text-end">${Format.number((s.data[0] ?? { value: [] }).value[i] ?? 0)}</td>`,
+        ),
+      );
+      table.push("</tr>");
+    });
+  }
+  table.push("</tbody></table>");
+  return table.join("");
+};
+
+export const timeSeriesRenderer = (opt: KeyValue) => {
+  const series = opt.series;
+  const table = [
+    '<table class="border-separate border-spacing-1 mx-auto table-fixed min-w-full"><thead><tr class="sticky top-0 bg-base"><th></th>',
+  ];
+  table.push(...series.map((s: Series) => `<th>${s.name ?? s.id}</th>`));
+  table.push("</tr></thead><tbody class='bg-alternate'>");
+  series[0].data.forEach((ax: AnyObject, i: number) => {
+    table.push(`<tr><th>${Format.date(ax[0])}</th>`);
+    series.forEach((s: MultiSeries) =>
+      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+      table.push(
+        `<td class="text-end">${Format.number(s.data?.[i]?.[1] ?? 0)}</td>`,
+      ),
+    );
+    table.push("</tr>");
+  });
+  table.push("</tbody></table>");
+  return table.join("");
+};
+
+export const activityRenderer = (opt: KeyValue) => {
+  const axis = opt.xAxis[0];
+  const series = opt.series;
+  const table = [
+    '<table class="border-separate border-spacing-1 mx-auto table-fixed min-w-full"><thead><tr><th class="sticky top-0 bg-base"></th>',
+  ];
+  table.push(...series.map((s: Series) => `<th>${s.name ?? s.id}</th>`));
+  table.push("</tr></thead><tbody class='bg-alternate'>");
+  table.push(
+    ...axis.data.map((s: string, i: number) => [
+      `<tr><th>${s}</th>`,
+      ...series.map(
+        (s: MultiSeries) =>
+          `<td class="text-end">${Format.number((s.data[i] ?? [])[2] ?? 0)}</td>`,
+      ),
+      "</tr>",
+    ]),
+  );
+  table.push("</tbody></table>");
+  return table.flat(2).join("");
+};
diff --git a/packages/chart/src/types/world.svg.ts b/packages/chart/src/types/world.svg.ts
new file mode 100644
index 0000000..38a5249
--- /dev/null
+++ b/packages/chart/src/types/world.svg.ts
@@ -0,0 +1,467 @@
+export default `<svg baseprofile="tiny" fill="#000" height="857" stroke="#888" stroke-linecap="round" stroke-linejoin="round" stroke-width=".2" version="1.2" viewbox="0 0 2000 857" width="2000"
+    xmlns="http://www.w3.org/2000/svg">
+    <path iso2="AF" name="Afghanistan" d="M1383 261.6l1.5 1.8-2.9 0.8-2.4 1.1-5.9 0.8-5.3 1.3-2.4 2.8 1.9 2.7 1.4 3.2-2 2.7 0.8 2.5-0.9 2.3-5.2-0.2 3.1 4.2-3.1 1.7-1.4 3.8 1.1 3.9-1.8 1.8-2.1-0.6-4 0.9-0.2 1.7-4.1 0-2.3 3.7 0.8 5.4-6.6 2.7-3.9-0.6-0.9 1.4-3.4-0.8-5.3 1-9.6-3.3 3.9-5.8-1.1-4.1-4.3-1.1-1.2-4.1-2.7-5.1 1.6-3.5-2.5-1 0.5-4.7 0.6-8 5.9 2.5 3.9-0.9 0.4-2.9 4-0.9 2.6-2-0.2-5.1 4.2-1.3 0.3-2.2 2.9 1.7 1.6 0.2 3 0 4.3 1.4 1.8 0.7 3.4-2 2.1 1.2 0.9-2.9 3.2 0.1 0.6-0.9-0.2-2.6 1.7-2.2 3.3 1.4-0.1 2 1.7 0.3 0.9 5.4 2.7 2.1 1.5-1.4 2.2-0.6 2.5-2.9 3.8 0.5 5.4 0z">
+    </path>
+    <path iso2="AO" name="Angola" d="M 1121.2 572 1121.8 574 1121.1 577.1 1122 580.1 1121.1 582.5 1121.5 584.7 1109.8 584.6 1109 605.1 1112.6 610.3 1116.2 614.3 1105.8 616.9 1092.3 616 1088.5 613 1065.8 613.2 1065 613.7 1061.7 610.8 1058.1 610.6 1054.7 611.7 1052 612.9 1051.5 608.9 1052.4 603.2 1054.4 597.3 1054.7 594.6 1056.6 588.8 1058 586.2 1061.3 582 1063.2 579.1 1063.8 574.4 1063.5 570.7 1061.9 568.4 1060.4 564.5 1059.1 560.7 1059.4 559.3 1061.1 556.8 1059.5 550.6 1058.3 546.3 1055.5 542.2 1056.1 541 1058.4 540.1 1060.1 540.2 1062.1 539.5 1078.8 539.6 1080.1 544.3 1081.7 548.2 1083 550.3 1085.1 553.6 1088.9 553.1 1090.7 552.2 1093.8 553.1 1094.7 551.5 1096.2 547.8 1099.7 547.5 1100 546.4 1102.9 546.4 1102.4 548.7 1109.2 548.6 1109.3 552.7 1110.4 555.1 1109.5 559 1109.9 563 1111.7 565.4 1111.3 573 1112.7 572.4 1115.1 572.6 1118.6 571.6 1121.2 572 Z M 1055.3 539 1053.8 534.2 1056.1 531.4 1057.8 530.3 1059.9 532.5 1057.9 533.9 1056.9 535.5 1056.7 538.3 1055.3 539 Z">
+    </path>
+    <path iso2="AL" name="Albania" d="M1088 228l0.4 1.2 1.4-0.6 1.2 1.7 1.3 0.7 0.6 2.3-0.5 2.2 1 2.7 2.3 1.5 0.1 1.7-1.7 0.9-0.1 2.1-2.2 3.1-0.9-0.4-0.2-1.4-3.1-2.2-0.7-3 0.1-4.4 0.5-1.9-0.9-1-0.5-2.1 1.9-3.1z">
+    </path>
+    <path iso2="AE" name="United Arab Emirates" d="M1296.2 336.7l1.3 5.1-2.8 0 0 4.2 1.1 0.9-2.4 1.3 0.2 2.6-1.3 2.6 0 2.6-1 1.4-16.9-3.2-2.7-6.6-0.3-1.4 0.9-0.4 0.4 1.8 4.2-1 4.6 0.2 3.4 0.2 3.3-4.4 3.7-4.1 3-4 1.3 2.2z">
+    </path>
+    <path iso2="AR" name="Argentina" d="M 669.1 851.7 666.1 851.5 661.1 851.5 655.1 837.9 658.2 840.7 662.5 845.3 670.3 849 677.6 850.5 676.8 853.5 672.4 853.8 669.1 851.7 Z M 638.6 644.7 649.9 655.1 654.5 656.1 661.8 660.9 667.7 663.4 668.8 666.2 664.6 676 670.4 677.7 676.7 678.7 680.9 677.7 685.2 672.7 685.5 667.1 688.1 665.8 691.3 669.6 691.7 674.7 687.5 678.2 684.2 680.8 678.9 687.1 672.9 695.8 672.4 701 672 707.6 673.2 714 672.3 715.4 672.7 719.5 673 722.9 680.8 728.4 681 732.8 684.9 735.6 685.2 738.7 681.9 746.9 674.9 750.4 664.7 751.7 658.7 751 660.8 754.9 660.9 759.6 662.7 762.8 660.2 765.1 655.1 766 649.5 763.6 648 765.3 650.5 771.6 654.5 773.5 656.8 771.5 659.3 774.8 655.1 776.8 652.2 780.8 653.4 787.1 653.3 790.5 648.5 790.5 645.5 793.7 645.6 798.5 652.1 803.1 657.3 804.3 657.5 810 652.9 813.5 652.3 820.8 648.8 823.2 647.9 826.1 652.1 832.6 656.7 836.1 654.6 835.8 649.7 834.8 637.6 834 634.1 830.4 632.2 825.8 629.1 826.2 626.5 823.9 623.4 817.4 626.1 814.6 626.2 810.7 624.4 807.5 625.1 802.1 624 793.8 622.2 790.1 624 788.9 622.6 786.5 619.8 785.3 620.6 782.6 617.5 780.2 613.8 772.9 615.5 771.6 612.2 763.8 611.4 757.3 611.2 751.6 613.7 749.3 610.4 743 608.8 737.2 611.8 733 610.4 727.6 612 721.4 610.6 715.5 609 714.3 604.1 703.2 606.2 696.6 604.5 690.4 605.4 684.5 608 678.5 611.3 674.5 609.3 672 610.1 669.9 608.5 659.2 614.1 656.1 615.3 649.4 614.4 647.8 618.4 642 625.9 643.6 629.6 648.2 631.2 643 637.6 643.3 638.6 644.7 ZM 697.4 836.2 697.8 836.1 697.8 836.5 697 836.2 697.3 835.9 697.5 835.8 697.4 836.2 ZM 696.7 834.8 696.9 835 697.3 835.1 697.4 835.5 697.1 835.6 697 835.2 696.8 835 696.7 834.8 ZM 702.9 834 703.1 834.1 703 834.5 702.7 834.4 702.5 834.1 702.8 833.9 702.9 834 ZM 690.8 833.1 690.8 833.3 690.9 833.6 690.5 833.7 690.2 833.6 690 833.4 689.7 833.3 689.6 832.9 689.8 832.9 689.9 832.7 690.2 832.6 690.4 832.7 690.1 833 690.4 833.1 690.7 832.8 690.8 833.1 ZM 693.7 831.8 693.3 831.6 692.8 831.3 692 831 692.1 830.6 691.4 830.5 691.1 830.4 690.8 830 691 829.9 691.8 830.2 692.6 830.6 693.1 830.7 693.5 830.8 693.8 830.5 693.9 830.2 694.1 830.3 694.5 830.1 694.6 830.3 695.1 830.3 695.1 830.6 695.4 830.6 696.3 830.4 696.4 830.6 696.7 830.6 697.1 830.5 696.8 830.3 696.7 830 697.1 830 697.7 830.2 697.8 830.6 697.4 831.1 697.5 831.4 697.3 831.6 696.9 831.6 696.6 832.4 696.3 832.7 696 833.3 695.9 833.6 695.4 833.9 695.3 833.7 694.9 833.7 694.9 834 694.1 833.9 694 834 694.3 834.4 694.2 834.5 694 834.9 693.6 834.9 693.3 835.3 693 835.4 692.8 835.4 692.6 835.1 692.2 834.8 692.2 834.6 691.7 834.6 692.3 835 691.9 835 691.4 834.7 691.2 834.6 690.8 834.4 690.5 834.2 690.5 834 691.2 834.2 691.8 834 691.3 833.8 691.2 833.7 692.1 833.7 692.5 833.8 692.8 834 692.8 833.8 693.2 833.7 693.3 833.4 692.9 833.2 692.7 832.7 692.8 832.5 693.4 832.5 693.6 832.6 694 832.5 693.9 832.2 693.1 832.2 693.1 832.3 692.7 832.5 692.1 832.5 691.6 832.2 691.6 831.9 692.3 832.1 692.9 831.9 693.2 831.9 693.7 831.8 694.1 832 694.1 831.9 693.7 831.8 ZM 695.3 829.9 695.6 829.9 695.9 830.2 695.6 830.3 695.3 830.3 695.3 829.9 ZM 694.3 829.9 694 829.9 693.9 829.6 694.3 829.7 694.3 829.9 ZM 692.9 829.7 693.5 829.6 693.7 829.9 693.4 830.3 693.2 830.2 692.9 830.3 692.6 830.1 692.9 829.9 693.2 830.1 693.3 829.9 692.8 829.8 692.9 829.7 ZM 700.1 829.8 700.7 829.8 700.8 829.7 701.3 829.6 701.7 829.8 702.1 830.1 702.2 830.4 702.2 830.5 701.7 830.6 701.5 830.3 701.3 830.2 701.2 830.5 701.4 830.6 701.5 830.9 701.8 830.7 702 830.8 702.1 831.2 702.4 831.3 702.5 831.2 703 831.5 703.1 831.1 702.3 830.9 702.4 830.4 702.7 830.2 704.2 830.1 704.9 830.7 705.1 830.8 705.1 831.2 704.5 831.1 704 830.9 703.4 831.1 703.7 831.3 704.1 831.4 705 831.5 705.3 831.6 705.4 831.8 705.2 832.3 704.7 832.3 704.6 832.4 703.9 832.5 703.4 832.7 703.7 832.9 702.8 833.3 702.4 833.2 701.9 833.3 701.2 833.3 700.6 833.1 700 832.7 700 833 700.3 833.2 700.9 833.4 701.2 833.7 701.4 833.6 701.8 833.7 702.2 834 702 834.1 702.2 834.6 702 834.6 701.7 834.3 701.3 834.2 700.8 834.6 700.6 834.3 700.3 834.1 700 834.1 699.5 833.9 699.3 834 699.5 834.4 699.8 834.4 700 834.6 699.8 834.7 700.5 835.3 700.3 835.4 699.9 835.2 699.6 835.2 699.3 834.9 699 834.8 698.7 834.7 698.6 835.3 699.1 835.4 699.1 835.7 699 835.9 698.6 835.8 698.5 835.6 698 835.4 697.9 835.2 697.7 835.2 697.3 834.7 697.6 834.3 697.6 834.1 697.2 833.6 697.2 833.4 697.7 833.2 697.6 833 698.1 832.9 698 832.6 698.6 832.2 699.2 832 699.6 832.4 699.6 832.8 699.9 832.7 699.4 832.1 699.5 831.8 698.9 831.6 698.5 831.3 698.6 831.1 699 831.3 699.1 830.8 698.4 830.6 698.5 830.3 698.7 830.4 699 830.2 699.3 830.2 699.5 829.9 699.2 829.6 699.6 829.6 700.1 829.8 ZM 695.1 829.4 695.8 829.4 696 829.6 696.2 829.4 696.4 829.5 696.6 829.8 696.4 829.9 696 829.8 695.6 829.6 694.8 829.5 694.9 829.3 695.1 829.4 ZM 688.3 828.3 687.8 828.2 687.9 828 688.3 828.3 Z">
+    </path>
+    <path iso2="AM" name="Armenia" d="M1230.8 253l-1.8 0.2-2.8-3.7-0.2-1-2.3 0-1.9-1.7-1 0.1-2.4-1.8-4.2-1.6-0.1-3.1-1.3-2.2 7-1 1.4 1.6 2.2 1.1-0.7 1.6 3.2 2.2-1.1 2.1 2.6 1.7 2.5 1 0.9 4.5z">
+    </path>
+    <path iso2="AU" name="Australia" d="M 1743 763.6 1746.7 765.8 1750 764.9 1754.9 763.7 1757.7 764.1 1753.2 771.7 1749.9 773.8 1745.9 779 1745.3 777.2 1738.7 781.6 1737.9 781.3 1734.9 781.1 1735.4 775.7 1737.4 771.5 1738 765.9 1740 763 1743 763.6 Z M 1793.5 590.2 1794.7 595.2 1798.7 592.8 1800.1 595.5 1802.4 598 1801.3 600.9 1801.5 606.4 1801.7 609.6 1803 610.4 1803.4 615.9 1802.2 619.2 1803 623.5 1808.4 626.9 1811.6 629.9 1814.8 632.7 1813.7 634.3 1816 638.3 1816.5 645.3 1819.1 643.9 1820.6 646.6 1822.2 645.7 1821.5 652.5 1824.4 656.4 1826.3 658.8 1829.1 664 1829.1 669.2 1828.1 672.9 1826.3 676.8 1827 682.3 1824.5 688 1822.4 691 1818.6 696.7 1817.1 700.4 1814 705 1809 710.8 1803.5 714 1799.1 718.9 1795.8 722.1 1791.4 727.6 1787.7 730.8 1783.8 735.6 1780.7 740 1779.9 742.1 1775.6 744.3 1769.5 744.5 1763.2 747.2 1759.4 749.6 1754.6 752.4 1751.9 749.5 1749.3 748.4 1751.9 745.1 1748.4 746.3 1741.2 750.9 1737.6 749.2 1735.2 748.2 1732.4 747.7 1728.3 745.9 1727 741.9 1728.5 737.1 1728.9 733.8 1727.5 731.2 1722.8 730.5 1726 727.3 1726.9 722.6 1722.2 727 1716.9 728.2 1721.4 724.7 1723.9 721 1727.4 717.8 1729 713.1 1722.2 718.5 1717.9 720.7 1713.6 725.8 1710.6 723.2 1712.3 719.8 1710.9 715.1 1709.1 712.7 1710.7 711.2 1705.4 707.3 1701.6 707.2 1697.6 704 1687.7 704.6 1679.8 706.9 1672.9 709.1 1667.9 708.7 1660.9 712 1655.6 713.4 1653.3 716.8 1650.3 719.4 1645.6 719.6 1642 720.1 1637.8 719 1633.6 719.7 1629.8 720 1625.3 723.4 1623.8 723.1 1620.4 724.9 1617 726.9 1613.2 726.7 1609.7 726.7 1605.6 722.6 1603.2 721.4 1604.7 717.7 1607.6 716.8 1609.1 715.4 1609.7 713.1 1612 708.6 1612.7 704.8 1612 698.3 1612.2 694.6 1613.6 691 1612.7 686.8 1613 684.9 1611.3 682.3 1612 677.3 1610.1 672.2 1610 669.5 1611.8 672.3 1611.3 666.3 1613.6 668.2 1614.7 670.7 1615.3 667.4 1613.7 662.3 1613.6 660.3 1612.8 658.4 1614.1 654.7 1615.6 653.1 1616.9 649.9 1617 646.1 1620.1 641.5 1619.7 646.4 1622.8 642 1627.7 639.8 1630.9 637.1 1635.6 634.7 1638.2 634.2 1639.6 635 1644.4 632.6 1647.9 631.9 1649 630.5 1650.5 629.9 1653.6 630.1 1659.8 628.2 1663.3 625.3 1665.3 621.9 1669.2 618.7 1669.9 616.1 1670.6 612.6 1675.5 607.1 1676.9 612.7 1679.5 611.4 1678 608.4 1680.3 605.3 1682.5 606.7 1684 601.8 1687.5 598.6 1689.3 596.1 1692.2 595 1692.6 593.2 1694.9 593.9 1695.3 592.3 1697.9 591.4 1700.7 590.5 1704.4 593.5 1707 597.3 1710.5 597.3 1714 597.9 1713.3 594.4 1716.8 589.3 1719.5 587.6 1718.9 586 1721.8 582.3 1725.5 580 1728.2 580.8 1733.1 579.6 1733.4 576.3 1729.5 574.2 1732.6 573.3 1736.2 574.9 1738.9 577.5 1743.4 579.1 1745.1 578.5 1748.4 580.5 1751.9 578.6 1753.9 579.2 1755.4 577.9 1757.6 581.1 1755.6 584.6 1753.1 587.2 1751.2 587.4 1751.5 589.9 1749.3 593.1 1746.8 596.3 1747 598.1 1750.8 601.7 1754.8 603.7 1757.3 605.9 1760.6 609.7 1762.2 609.7 1764.8 611.4 1765.3 613.4 1770.2 615.5 1774.3 613.3 1776.1 609.9 1777.8 607 1779.1 603.5 1781.7 598.4 1781.5 595.3 1782.2 593.4 1782.1 589.8 1783.5 584.9 1784.8 583.6 1784.2 581.5 1786 578.1 1787.5 574.6 1787.9 572.7 1790.2 570.3 1791.5 573.5 1791.4 577.5 1792.7 578.3 1792.6 581 1794.2 584.2 1794.1 587.9 1793.5 590.2 Z">
+    </path>
+    <path iso2="AT" name="Austria" d="M1070.6 190.8l-0.3 0.8 0.7 2.1-0.2 2.6-2.8 0 1.1 1.4-1.3 4-0.9 1.1-4.4 0.1-2.4 1.5-4.2-0.5-7.3-1.7-1.3-2.1-4.9 1.1-0.5 1.2-3.1-0.9-2.6-0.2-2.3-1.2 0.7-1.5-0.2-1.1 1.4-0.3 2.7 1.7 0.6-1.7 4.4 0.3 3.5-1.1 2.4 0.2 1.7 1.3 0.4-1.1-1-4.1 1.7-0.8 1.6-2.9 3.8 2.1 2.6-2.6 1.7-0.5 4 1.9 2.3-0.3 2.4 1.2z">
+    </path>
+    <path iso2="AZ" name="Azerbaijan" d="M 1229 253.2 1225.2 252.3 1222 249.4 1220.8 246.9 1221.8 246.8 1223.7 248.5 1226 248.5 1226.2 249.5 1229 253.2 ZM 1235.3 236.2 1237.8 233.6 1241.3 236.9 1244.9 241.5 1247.4 241.8 1249.3 243.5 1245.1 244 1245.2 249 1244.8 251.2 1243.1 252.7 1243.9 255.8 1242.6 256.2 1238.7 252.8 1239.9 249.7 1238 247.8 1236.1 248.3 1230.8 253 1229.9 248.5 1227.4 247.5 1224.8 245.8 1225.9 243.7 1222.7 241.5 1223.4 239.9 1221.2 238.8 1219.8 237.2 1220.9 236.1 1225.1 238 1228 238.3 1228.6 237.6 1225.3 234.1 1226.5 233.3 1228 233.5 1232.3 237.3 1234.7 237.8 1235.3 236.2 Z">
+    </path>
+    <path iso2="BI" name="Burundi" d="M1154.9 530.4l-0.6 0.1 0-0.3-2-6.1-0.01-0.06-0.09-1.04-1.4-2.9 3.5 0.5 1.7-3.7 3.1 0.4 0.3 2.5 1.2 1.5 0 2.1-1.4 1.3-2.3 3.4-2 2.3z">
+    </path>
+    <path iso2="BE" name="Belgium" d="M1016.5 177.1l-0.4 4.2-1.3 0.2-0.4 3.5-4.4-2.9-2.5 0.5-3.5-2.9-2.4-2.5-2.2-0.1-0.8-2.2 3.9-1.2 3.6 0.5 4.5-1.3 3.1 2.7 2.8 1.5z">
+    </path>
+    <path iso2="BJ" name="Benin" d="M1006.7 427l-0.2 2.1 1.3 3.8-1.1 2.6 0.6 1.7-2.8 4-1.7 2-1.1 4 0.2 4.1-0.3 10.3-4.7 0.8-1.4-4.4 0.3-14.8-1.2-1.3-0.2-3.2-2-2.2-1.7-1.9 0.7-3.4 2-0.7 1.1-2.8 2.8-0.6 1.2-1.9 1.9-1.9 2 0 4.3 3.7z">
+    </path>
+    <path iso2="BF" name="Burkina Faso" d="M988.5 406l-0.5 3.1 0.8 2.9 3.1 4.2 0.2 3.1 6.5 1.5-0.1 4.4-1.2 1.9-2.8 0.6-1.1 2.8-2 0.7-4.9-0.1-2.6-0.5-1.8 1-2.5-0.5-9.8 0.3-0.2 3.7 0.8 4.8-3.9-1.6-2.6 0.2-2 1.6-2.5-1.3-1-2.2-2.5-1.4-0.4-3.7 1.6-2.7-0.2-2.2 4.5-5.3 0.9-4.4 1.5-1.6 2.7 0.9 2.4-1.3 0.8-1.7 4.3-2.8 1.1-2 5.3-2.7 3.1-0.9 1.4 1.2 3.6 0z">
+    </path>
+    <path iso2="BD" name="Bangladesh" d="M1500.6 360.3l0.6 4.6-2.1-1 1.1 5.2-2.1-3.3-0.8-3.3-1.5-3.1-2.8-3.7-5.2-0.3 0.9 2.7-1.2 3.5-2.6-1.3-0.6 1.2-1.7-0.7-2.2-0.6-1.6-5.3-2.6-4.8 0.3-3.9-3.7-1.7 0.9-2.3 3-2.4-4.6-3.4 1.2-4.4 4.9 2.8 2.7 0.3 1.2 4.5 5.4 0.9 5.1-0.1 3.4 1.1-1.6 5.4-2.4 0.4-1.2 3.6 3.6 3.4 0.3-4.2 1.5 0 4.4 10.2z">
+    </path>
+    <path iso2="BG" name="Bulgaria" d="M1132.6 221.6l-2.3 2.6-1.3 4.5 2.1 3.6-4.6-0.8-5 2 0.3 3.2-4.6 0.6-3.9-2.3-4 1.8-3.8-0.2-0.8-4.2-2.8-2.1 0.7-0.8-0.6-0.8 0.6-2 1.8-2-2.8-2.7-0.7-2.4 1.1-1.4 1.8 2.6 1.9-0.4 4 0.9 7.6 0.4 2.3-1.6 5.9-1.5 4 2.3 3.1 0.7z">
+    </path>
+    <path iso2="BA" name="Bosnia and Herzegovina" d="M1083 214.3l1.9-0.1-1.1 2.8 2.7 2.5-0.5 2.9-1.1 0.3-0.9 0.6-1.6 1.5-0.4 3.5-4.8-2.4-2.1-2.7-2.1-1.4-2.5-2.4-1.3-1.9-2.7-3 0.8-2.6 2 1.5 1-1.4 2.3-0.1 4.5 1.1 3.5-0.1 2.4 1.4z">
+    </path>
+    <path iso2="BY" name="Belarus" d="M1141.6 162.7l-3.9-0.2-0.8 0.6 1.5 2 2 4-4.1 0.3-1.3 1.4 0.3 3.1-2.1-0.6-4.3 0.3-1.5-1.5-1.7 1.1-1.9-0.9-3.9-0.1-5.7-1.5-4.9-0.5-3.8 0.2-2.4 1.6-2.3 0.3-0.5-2.8-1.9-2.8 2.8-1.3-0.4-2.4-1.7-2.3-0.6-2.7 4.7 0 4.8-2.3 0.5-3.4 3.6-2-1-2.7 2.7-1 4.6-2.3 5.3 1.5 0.9 1.5 2.4-0.7 4.8 1.4 1.1 2.9-0.7 1.6 3.8 4 2.1 1.1 0 1.1 3.4 1.1 1.7 1.6-1.6 1.3z">
+    </path>
+    <path iso2="BZ" name="Belize" d="M487.8 399.8l-1.7 0 1.3-7.2 0.7-5.1 0.1-1 0.7-0.3 0.9 0.8 2.5-3.9 1.1-0.1-0.1 1 1 0-0.3 1.8-1.3 2.7 0.4 1-0.9 2.3 0.3 0.6-1 3.3-1.3 1.7-1.1 0.2-1.3 2.2z">
+    </path>
+    <path iso2="BO" name="Bolivia" d="M662.5 631.4l-0.3-2-5.4-3.3-5.2-0.1-9.6 1.9-2.1 5.6 0.2 3.5-1.5 7.7-1-1.4-6.4-0.3-1.6 5.2-3.7-4.6-7.5-1.6-4 5.8-3.9 0.9-3.1-8.9-3.7-7.2 1.1-6.2-3.2-2.7-1.2-4.6-3.2-4.4 2.9-6.9-2.9-5.4 1.1-2.2-1.2-2.4 1.9-3.2-0.3-5.4 0-4.6 1.1-2.1-5.5-10.4 4.2 0.6 2.9-0.2 1.1-1.9 4.8-2.6 2.9-2.4 7.3-1.1-0.4 4.8 0.9 2.5-0.3 4.3 6.5 5.7 6.4 1.1 2.3 2.4 3.9 1.3 2.5 1.8 3.5 0 3.4 1.9 0.5 3.7 1.2 1.9 0.3 2.7-1.7 0.1 2.8 7.5 10.7 0.3-0.5 3.7 0.8 2.5 3.2 1.8 1.7 4-0.6 5.1-1.3 2.8 0.8 3.6-1.6 1.4z">
+    </path>
+    <path iso2="BR" name="Brazil" d="M665.8 489.6l3.1 0.6 0.6-1.4-1-1.2 0.6-1.9 2.3 0.6 2.7-0.7 3.2 1.4 2.5 1.3 1.7-1.7 1.3 0.2 0.8 1.8 2.7-0.4 2.2-2.5 1.8-4.7 3.4-5.9 2-0.3 1.3 3.6 3 11.2 3.1 1.1 0.1 4.4-4.3 5.3 1.7 1.9 10.1 1 0.2 6.5 4.3-4.2 7.1 2.3 9.5 3.9 2.8 3.7-0.9 3.6 6.6-2 11 3.4 8.5-0.2 8.4 5.3 7.4 7.2 4.4 1.8 4.8 0.3 2.1 2 2 8.2 1.1 3.9-2.1 10.6-2.7 4.2-7.7 8.9-3.4 7.3-4 5.5-1.4 0.2-1.3 4.7 0.9 12-1.1 9.9-0.3 4.2-1.6 2.6-0.5 8.6-5.2 8.3-0.5 6.7-4.3 2.7-1.1 3.9-6 0-8.5 2.4-3.7 2.9-6 1.9-6.1 5.1-4.1 6.4-0.3 4.8 1.3 3.5-0.3 6.5-0.8 3.1-3.4 3.6-4.5 11.3-4 5-3.2 3.1-1.5 6.1-2.9 3.6-2.1-3.6 1.8-3.1-3.8-4.3-4.8-3.6-6.3-4.1-1.9 0.2-6.3-5-3.4 0.7 6-8.7 5.3-6.3 3.3-2.6 4.2-3.5-0.4-5.1-3.2-3.8-2.6 1.3 0.7-3.7 0.3-3.8-0.3-3.6-2.1-1.1-2 1-2.1-0.3-0.8-2.4-1.1-5.9-1.2-1.9-3.9-1.8-2.2 1.3-5.9-1.3-0.4-8.7-2-3.5 1.6-1.4-0.8-3.6 1.3-2.8 0.6-5.1-1.7-4-3.2-1.8-0.8-2.5 0.5-3.7-10.7-0.3-2.8-7.5 1.7-0.1-0.3-2.7-1.2-1.9-0.5-3.7-3.4-1.9-3.5 0-2.5-1.8-3.9-1.3-2.3-2.4-6.4-1.1-6.5-5.7 0.3-4.3-0.9-2.5 0.4-4.8-7.3 1.1-2.9 2.4-4.8 2.6-1.1 1.9-2.9 0.2-4.2-0.6-3.2 1.1-2.6-0.7-0.1-9.7-4.4 3.7-5-0.1-2.3-3.5-3.8-0.3 1-2.8-3.3-3.9-2.6-5.8 1.5-1.1-0.2-2.8 3.4-1.8-0.7-3.5 1.4-2.2 0.3-3 6.3-4.4 4.6-1.2 0.8-1 5.1 0.3 2.2-17.6 0.1-2.8-0.9-3.6-2.6-2.4 0.1-4.7 3.2-1 1.1 0.7 0.2-2.5-3.3-0.7 0-4 11 0.2 1.9-2.3 1.6 2.1 1 3.8 1.1-0.8 3.1 3.4 4.4-0.4 1.1-2 4.2-1.5 2.4-1.1 0.7-2.7 4.1-1.8-0.3-1.4-4.8-0.5-0.7-4.1 0.3-4.3-2.5-1.6 1.1-0.6 4.1 0.8 4.5 1.6 1.7-1.5 4.1-1 6.4-2.4 2.1-2.5-0.7-1.8 3-0.2 1.2 1.4-0.8 2.9 2 0.9 1.2 3-1.6 2.3-1 5.4 1.4 3.3 0.3 3 3.5 3 2.8 0.3 0.6-1.3 1.8-0.3 2.6-1.1 1.8-1.7 3.2 0.6 1.3-0.3z">
+    </path>
+    <path iso2="SG" name="Singapore" d="m 766.68475,459.2094 -0.42,0.185 -0.476,-0.168 0.154,-0.273 0.316,-0.066 0.256,0.087 0.145,0.066 0.1,0.075 z">
+    </path>
+    <path iso2="BN" name="Brunei Darussalam" d="M1633.1 472.8l2.2-2.4 4.6-3.6-0.1 3.2-0.1 4.1-2.7-0.2-1.1 2.2-2.8-3.3z">
+    </path>
+    <path iso2="BT" name="Bhutan" d="M1488.8 323.5l2.6 2.1 0.5 3.9-4.5 0.2-4.7-0.4-3.2 1-5.5-2.5-0.4-1.2 2.6-4.8 2.6-1.6 4.3 1.4 2.9 0.2 2.8 1.7z">
+    </path>
+    <path iso2="BW" name="Botswana" d="M1127.6 615.7l1.9 5.1 1.1 1.2 1.6 3.7 6.1 7 2.3 0.7-0.1 2.3 1.5 4.1 4.3 1 3.4 2.9-8.1 4.7-5.2 4.8-2 4.3-1.8 2.4-3 0.5-1.2 3.1-0.6 2-3.6 1.4-4.5-0.3-2.5-1.8-2.3-0.7-2.8 1.4-1.5 3.1-2.7 1.9-2.8 2.9-4 0.7-1.1-2.3 0.6-3.9-3-6.1-1.4-1 0.6-18.7 5.5-0.2 0.8-22.9 4.2-0.2 8.7-2.3 2 2.7 3.7-2.5 1.7 0 3.2-1.5 1 0.5z">
+    </path>
+    <path iso2="CF" name="Central African Republic" d="M1121.3 446.5l3.9 2.5 3.1 2.6 0.1 2.1 3.9 3.3 2.4 2.8 1.4 3.8 4.3 2.6 0.9 2-1.8 0.7-3.7-0.1-4.2-0.7-2.1 0.5-0.9 1.6-1.8 0.2-2.2-1.4-6.3 3.2-2.6-0.6-0.8 0.5-1.6 3.9-4.3-1.3-4.1-0.6-3.6-2.4-4.7-2.2-3 2.1-2.2 3.2-0.5 4.5-3.6-0.3-3.9-1.1-3.3 3.4-3 6-0.6-1.9-0.3-2.9-2.6-2.1-2.1-3.3-0.5-2.3-2.7-3.4 0.5-1.9-0.6-2.7 0.4-5 1.4-1.1 2.8-6.5 4.6-0.5 1-1.7 1 0.2 1.4 1.4 7.1-2.4 2.4-2.5 2.9-2.3-0.6-2.2 1.6-0.6 5.5 0.4 5.2-3 4-7 2.8-2.6 3.6-1.1 0.7 2.7 3.3 4 0 2.7-0.8 2.6 0.4 2 1.9 1.9 0.5 0.3z">
+    </path>
+    <path iso2="CA" name="Canada" d="M 665.9 203.6 669.3 204.5 674 204.3 670.7 206.9 668.7 207.3 663.2 204.6 662.6 202.5 665.1 200.6 665.9 203.6 ZM 680.3 187.6 677.9 187.7 672.1 185.8 668.6 182.8 670.5 182.3 676.4 183.9 680.6 186.5 680.3 187.6 ZM 372.4 191.3 369.3 192.2 363 189.4 363 187.2 360.1 185 360.4 183.2 356.1 182.1 356.7 178.7 358.2 177.3 362.3 178.6 364.7 179.6 368.8 180.2 369 182.4 369.4 185.3 372.6 187.9 372.4 191.3 ZM 711.5 177.8 706.5 183.2 710.4 181.1 713.3 182.5 710.9 184.6 714.7 186.3 717.5 184.8 721.8 186.7 719 191.3 722.8 190.2 722.5 193.5 723 197.4 719.4 203 717 203.2 714.1 202 716.6 196.9 715.4 196.1 708.1 201.5 705.1 201.3 709.5 198.3 705.1 196.8 699.6 197.2 690 197 689.8 195.2 693.6 192.9 691.9 191.3 697.3 187.5 705.5 177.6 709.7 174.1 714.7 172 716.8 172.2 715.3 173.9 711.5 177.8 ZM 351.5 156.4 353 157.2 358 156.7 350.8 163.6 351.1 168.6 349.2 168.6 348.5 165.8 349 162.9 348.2 161 349.5 158.3 351.5 156.4 ZM 634.9 108.9 631.3 111.9 629.6 111.4 629.5 109.7 629.9 109.3 632.7 107.6 634.4 107.7 634.9 108.9 ZM 625.2 105.7 618 108.9 615 108.7 615 107.2 620 104.5 626 104.6 625.2 105.7 ZM 622.1 88.9 621.2 91.4 623.9 90.5 625.4 92 628.9 94 632.7 95.7 631.3 98.4 634.8 98 636.7 99.9 631.7 101.7 625.8 100.3 625 97.7 618.7 100.8 610.5 103.7 611.2 100.4 604.9 100.9 610.6 98.1 614.2 93.6 619.3 88.5 622.1 88.9 ZM 667 80.6 662.1 80.9 662.8 78.2 666.6 75.1 670.9 74.4 673.2 75.9 671.7 78.2 670.8 79 667 80.6 ZM 592.5 69.9 588.4 71.8 584.2 70.2 580.3 70.7 576.9 68.3 581.9 66.6 586.8 64.3 589.8 65.8 591.4 66.8 591.8 67.8 592.5 69.9 ZM 645.5 212.5 643.3 208.9 646.2 200.4 644.6 198.6 640.9 199.6 639.8 198 634.3 202.7 631.1 207.6 628.3 210.5 625.8 211.5 624.1 211.8 623 213.3 613.7 213.3 605.9 213.4 603.2 214.5 596.4 218.9 596.4 218.8 595.5 218.4 593.5 219.3 591.6 220.6 589.8 219.5 585.1 220.3 581.2 221.2 579.3 222 577 224.1 578.8 224.8 580.5 224.4 580.8 224.4 580.5 226.3 575.7 227 572.9 227.8 571.2 228.8 568.6 228.2 567 228.5 564.1 230.3 559.5 232.3 556.8 231.9 558.8 229.7 562.5 226.2 566.6 224.1 567.7 222.3 568.6 219.3 572.4 215.8 573.3 211.8 574.4 215.7 578.2 216.6 580.6 214.5 579.2 209.7 578.3 207.7 574.3 206.5 570.5 205.8 566.6 205.8 563.2 205 562.8 203.6 561.4 204.5 560.2 204.3 562.1 202.2 560.3 201.4 562.2 199 561 197.2 562.7 195.4 557.5 194.5 557.4 190.9 556.6 190.1 553.3 189.9 549.2 188.7 547.7 189.5 545.9 191 542.6 192 539.5 194.5 534.1 192.8 529.7 193.6 525.8 191.7 521.2 190.7 517.9 190.3 516.9 189.3 517.8 185.9 516.1 185.9 514.8 188.3 504.6 188.3 487.6 188.3 470.8 188.3 455.9 188.3 441.1 188.3 426.4 188.3 411.3 188.3 406.5 188.3 391.8 188.3 377.7 188.3 377 188.3 371.6 182.2 370 179.5 363 176.9 364.3 171.4 367.9 167.7 363.8 165 366.9 160.1 364.8 155.7 367.3 152.5 372.4 149.6 375.6 145.8 371 142 372.4 135.1 373.5 130.9 371.9 128.2 371.1 125.8 371.7 122.7 365.2 124.6 357.6 127.9 357.3 124.1 356.8 121.5 354 119.9 349.8 119.7 385.4 87 410 66.6 416 67.9 419.3 70.5 423 71 429.3 68.8 436.3 67.1 441.6 67.7 450.5 65.4 458.7 64.1 458.9 66.3 463.4 65 467.3 62.5 469.4 63.1 470.8 67.9 480.3 64.2 476.4 68.3 482.4 67.4 485.6 65.9 490.2 66.2 494.1 68.4 501.6 70.4 506.3 71.3 510.7 71 513.6 73.8 505.1 76.5 511.5 77.6 523.4 77 527.8 76 529.2 79.3 536.3 76.6 534.2 74.2 538.7 72.4 543.9 72.1 547.8 71.6 549.9 72.9 551.4 75.8 556.4 75.4 561.7 77.9 568.9 77 574.9 77.1 577.3 73.7 581.8 72.8 586.7 74.6 582.4 79.8 588.6 75.4 591.8 75.6 598.2 70.1 596.6 66.8 593.7 64.6 599.2 58.7 607.4 54.9 611.9 55.8 613.9 58.1 614.3 64.1 608.5 66.7 615.2 67.8 610.8 73.3 619.7 69.1 621.9 72.6 617.6 76.6 618.9 80.3 626.2 76.4 632.7 71.6 637.4 65.7 642.9 66.1 648.3 66.9 651.9 69.6 650.2 72.3 645.1 75.2 646 78.1 643.6 80.8 632.7 84.7 626.2 85.6 623 83.9 619.7 86.7 612.3 91.4 609.3 93.9 601.6 97.7 595.1 98.1 590 100.5 587.1 104.3 581.4 105 572.7 109.7 563.3 116.2 558.3 120.8 553.4 127.7 559.4 128.7 557.9 134.2 557.1 138.8 564.4 137.6 571.4 140.2 574.7 142.5 576.4 145.3 581.3 147 584.9 149.5 592.5 149.9 597.3 150.5 593.7 155.7 592 161.8 592.1 168.7 596.5 174.6 601.2 172.6 606.8 166.2 609.1 156.6 607.4 153.4 616.4 150.5 623.9 146.3 628.7 142.1 630.4 138.1 630 133 626.8 128.5 635.7 122.3 636.7 117 640.6 108 644.4 106.6 651.1 108.2 655.3 108.8 659.8 107.2 662.9 109.2 666.5 112.6 666.7 114.8 674.4 115.3 671.8 120.2 669.5 127.6 673.3 128.6 674.9 132.1 683.1 128.8 690.6 122.2 694.8 119.5 695.9 124.8 698.5 132.3 700.5 139.5 697.1 143.3 701.9 146.7 704.8 150.1 711.7 151.7 714.1 153.6 714.1 158.8 717.5 159.6 718.6 161.9 716.6 168.8 712.3 171.1 708.1 173.3 699.3 175.5 691.4 180.5 682.8 181.6 672.7 180.2 665.4 180.2 660.1 180.6 654.4 185.1 647 187.9 636.9 196.1 629 201.9 633.7 200.9 644.6 192.6 656.9 187.4 664.5 186.8 667.8 189.9 661.7 194.1 661.1 200.8 661.2 205.6 666.8 208.7 675.4 207.8 682.6 200.7 681.6 205.3 684.1 207.6 676.7 211.7 664.3 215.5 658.5 218 651.3 222.6 647.6 222.1 649.1 216.8 659.5 211.5 651.4 211.7 645.5 212.5 ZM 539 48.7 534.3 51.1 544.8 49.6 547.4 52.2 554.7 49.5 556.5 51.2 554.3 56.3 558.6 54.2 561.4 48.9 565.7 48.1 568.7 48.9 570.9 51 568.2 56.1 565.8 59.8 570 62.4 575 65 572.4 67.3 565.3 67.8 566.1 69.8 562.9 71.8 556.2 71 550.5 69.5 545.4 69.8 535.9 71.7 524.6 72.5 516.7 73 517 70.4 512.9 69 508.6 69.6 508 65.3 511.3 64.7 518.6 63.8 524.1 64.1 530.3 63.1 523.8 61.9 514.7 62.3 509 62.2 509 60.3 520.7 58.1 514.4 58.2 509 56.8 516.8 52.9 522 50.8 536.2 47.7 539 48.7 ZM 578.5 47.2 571.5 50.6 569.2 47 571.3 46.2 576.8 46 578.5 47.2 ZM 687.1 48.8 686.4 50.2 682.3 50.1 678.2 50 673.3 50.7 672.4 50.3 670.3 47.6 672 45.8 674.2 45.4 682.6 46 687.1 48.8 ZM 647.3 48.5 647.6 51.7 654.8 47.6 666.5 45.5 668.8 50.8 665.6 54.2 674.6 52.7 679.9 50.6 686.7 53.2 690.4 55.7 689.3 58 697.5 56.8 699.4 60.2 707.8 62.3 710 64.4 710.9 69.5 701.8 72 709.5 75.6 715.4 76.8 718.7 81.8 725.2 82.2 721.9 86.1 711 92.6 707 90.2 703.2 84.8 697.3 85.5 695 88.8 697.7 92 702.2 94.6 703.2 96.1 703.1 101.8 699.5 105.9 694.8 104.3 686.2 99.8 689.8 104.7 692.6 108.2 692.3 110.2 681.4 107.9 673.8 104.5 670 101.8 672.4 100.1 667.6 97.2 662.9 94.5 662 96.1 648.9 97 646.5 95.1 651.9 90.9 660 90.8 669.3 90.1 669.1 88.1 672.2 85.3 681 79.9 681.4 77.4 680.9 75.6 676.2 72.9 669.1 71.1 672.6 69.7 670.6 66.3 667.2 66 665.3 64.2 662 65.8 654.1 66.5 640.1 65.3 632.7 63.7 626.8 62.9 624.9 61 631.2 58.6 625.5 58.6 628.8 53.3 635.9 48.7 641.9 46.6 653.1 45.2 647.3 48.5 ZM 596.9 45 600.5 46.1 608.1 45.4 607.6 46.9 601.5 49.4 605.3 51.6 600.1 56.3 591.7 58.3 588.3 57.9 587.4 55.9 581.5 51.9 583.2 50.2 590.6 50.8 589.7 47.5 596.9 45 ZM 619.5 50.5 611.7 54.4 607.3 54.2 609.1 49.6 611.7 47.1 615.9 44.9 621.1 43.5 629 43.7 635.2 44.9 625.1 49.5 619.5 50.5 ZM 503.7 57.7 490.2 60.3 490.8 58 484.8 55.2 489.2 53 496.7 49.2 504.3 45.8 504.7 42.7 518.7 41.9 522.9 43 532.4 43.3 534.3 44.7 535.9 46.9 529.4 48.2 515.5 51.8 506.3 55.5 503.7 57.7 ZM 628.9 39.3 624.8 41.2 619.6 40.8 616.4 39.5 620.9 37.3 627.8 35.9 629.2 37.7 628.9 39.3 ZM 620.1 30.6 620.3 32.9 617.5 35.4 611.7 39.2 604.8 39.7 601.6 38.9 605 36 598.4 36.3 602.7 32.5 606.5 32.7 614.2 31 619.1 31.3 620.1 30.6 ZM 580.7 33.2 580 34.9 584.4 34.1 588 34.3 585.7 36.8 580.6 39.1 566.7 39.9 554.4 42.1 548.4 42.2 549.9 40.6 560.6 38.3 542.7 38.9 538.5 38 550.2 33.2 555.6 31.8 563.9 33.5 566.8 36.4 572.9 36.8 573.6 32.1 579.4 30.3 582.5 30.8 580.7 33.2 ZM 636.4 28.8 638.7 30.4 646.1 30.4 647.5 32 644.7 33.8 647.8 34.9 649 36.1 653.9 36.3 659 36.7 666.1 35.7 674.2 35.2 680 35.6 682.3 37.5 681.3 39.5 677.7 40.9 671 42 666.7 41.3 654.9 42.1 646.9 42.2 641.3 41.6 632.7 40 634.3 37.2 636.4 34.8 635 32.6 628 32 625.4 30.5 629.2 28.5 636.4 28.8 ZM 560.7 26.2 554.9 29.9 549.6 31.6 545.8 31.8 535.9 33.9 528.8 34.7 525.2 33.6 536.9 29.9 549.1 26.8 554.6 26.9 560.7 26.2 ZM 641.9 26.8 640.1 26.9 633.5 26.6 634.2 25.3 641.4 25.4 643 26.2 641.9 26.8 ZM 583.1 25.9 574.3 27.3 571 25.8 576.1 24.3 582.1 23.8 586.2 24.5 583.1 25.9 ZM 590.9 21.7 585.2 22.6 579.2 22.6 580.2 21.9 585.9 20.6 587.6 20.8 590.9 21.7 ZM 637.7 24.2 631.1 25.2 629.5 24.1 630.1 22.4 632.3 20.5 636.7 20.7 638.4 21 640.7 22.6 637.7 24.2 ZM 623.9 23 622.8 24.9 617.5 24.4 613.5 22.9 605.7 22.7 611 21.4 608.2 20.3 610.4 18.5 616.5 19.1 624 20.8 623.9 23 ZM 678 16.9 680.7 18.4 674.2 19.7 663.6 23.2 656.8 23.5 650 22.9 648.4 21 650.5 19.4 654.8 18.2 648.2 18.2 646.2 16.7 646.6 14.8 651.5 12.9 655.6 11.6 659.6 11.3 659.3 10.3 667.6 10.1 669.2 12.3 673.9 13.2 678.7 14.1 678 16.9 ZM 757.2 2.9 765.9 3.2 772.6 3.7 777.8 4.7 776.7 5.7 766.9 7.4 757.9 8.2 753.9 9.1 761.4 9.1 750.9 11.6 744.1 12.8 734.8 16.3 726.7 17 723.6 18 712.3 18.4 716.7 19 713.4 19.8 714.1 22.1 709.1 23.7 702.2 25 698.7 26.8 692.1 28.3 691.6 29.4 698.1 29.2 697 30.4 684.3 33.3 675.8 31.9 664.1 32.7 659.1 32.1 652.3 31.8 654.4 29.5 662.4 28.4 664.4 25 667 24.7 674.5 26.7 672.8 23.7 667.9 22.8 672.9 21 680.5 19.9 683.3 18.3 680.3 16.6 681.4 14.4 690.8 14.5 693 15 700.3 13.4 693 12.9 680.4 13.2 676 11.8 675.2 10.1 672.7 8.9 673.8 7.6 679.8 6.8 684 6.7 691.4 6.1 698.2 4.6 702.1 4.8 704.5 5.9 709.5 3.9 714.7 3.3 721.2 2.9 731.6 2.7 732.9 3.1 743.2 2.5 750.2 2.7 757.2 2.9 Z">
+    </path>
+    <path iso2="CH" name="Switzerland" d="M1034.4 197.5l0.2 1.1-0.7 1.5 2.3 1.2 2.6 0.2-0.3 2.5-2.1 1.1-3.8-0.8-1 2.5-2.4 0.2-0.9-1-2.7 2.2-2.5 0.3-2.2-1.4-1.8-2.7-2.4 1 0-2.9 3.6-3.5-0.2-1.6 2.3 0.6 1.3-1.1 4.2 0 1-1.3 5.5 1.9z">
+    </path>
+    <path iso2="CN" name="China" d="M 1602.2 381.9 1597.9 385 1593 383 1592 377.5 1594.2 374.6 1600 372.8 1603.3 372.9 1604.9 375.4 1602.9 378.2 1602.2 381.9 ZM 1625.6 185.5 1634.6 190 1640.6 195.8 1648.2 195.8 1650.8 193.4 1657.7 191.5 1659 197.2 1658.7 199.5 1661.5 206.3 1662.1 212.5 1655.2 211.4 1652.3 213.6 1657 219 1660.9 226.5 1658.4 226.6 1660.3 229.9 1654.8 226.1 1654.8 229.7 1648.4 232.4 1651.2 235.8 1646.6 235.5 1643 233.5 1641.9 238.1 1638 241.5 1635.9 245.6 1629.6 247.4 1627.2 250.4 1622.4 252.2 1623.7 249.2 1621.4 246.7 1623.4 242.4 1618.9 239.1 1615.5 241.3 1611.9 245.8 1610.6 249.9 1605.6 250.2 1604.3 253.2 1609.1 257.5 1613.9 258.6 1615.3 261.4 1620.4 263.3 1624.2 258.7 1630.1 261.2 1633.6 261.4 1635.9 264.7 1629.2 266.5 1628.2 270 1624.4 273.2 1623.5 277.7 1630.6 281.2 1635.2 287.5 1640.7 293.4 1646.2 298.3 1647.8 303.1 1645 304.9 1647.4 308.3 1651.3 310.3 1652.1 315.5 1652.2 320.6 1649.4 321.2 1647.3 328.1 1645 336.6 1641.6 344.2 1635.2 350.1 1628.6 355.6 1622.5 356.3 1619.6 359.1 1617.3 357.1 1614.8 360.2 1607.6 363.5 1601.8 364.4 1601.1 371.2 1598 371.6 1595.8 366.9 1596.7 364.5 1588.9 362.4 1586.5 363.5 1580.6 361.8 1577.5 359.2 1577.8 355.5 1572.5 354.3 1569.4 351.9 1565.3 355.3 1560 356.1 1555.6 356 1552.9 357.6 1550.2 358.5 1552.2 365.9 1549.2 365.7 1548.4 364.2 1547.9 361.5 1544.1 363.4 1541.5 362.2 1537 359.8 1537.8 354.5 1534.1 353.2 1531.7 347.3 1526.1 348.4 1525.4 340.8 1529.6 335.4 1528.7 330.1 1527.4 325.2 1524.7 323.7 1522 319.9 1518.9 320.4 1512.8 319.4 1514 316.7 1510.4 312.7 1507.2 315.4 1502.3 313.9 1496.9 317.9 1493 322.7 1488.8 323.5 1486 321.8 1483.1 321.6 1478.8 320.2 1476.2 321.8 1473.6 326.6 1472.1 321.5 1469 322.9 1462.5 322.2 1456 320.8 1451 317.9 1446.5 316.7 1444 313.6 1440.7 312.7 1434.3 308.5 1429.5 306.5 1427.6 308 1419 303.5 1412.8 299.5 1409.6 292.4 1413.7 293.3 1413.1 290 1410.1 286.7 1409.3 281.5 1401.6 273.9 1392.1 271.4 1389.2 266.4 1384.5 263.4 1383 261.6 1381.2 258 1380.7 255.5 1377 254 1375.5 254.7 1372.4 248.7 1373.5 247.3 1372.3 245.8 1376.4 242.8 1379.6 241.5 1385.4 242.4 1386 238.3 1392.4 237.6 1393.4 235 1400.3 231.6 1400.5 230.2 1398.8 226.5 1401.7 224.9 1392.9 213.9 1402 211.4 1404 210 1403 198.7 1413.8 200.8 1415.4 197.9 1412.9 191.7 1416.7 191.1 1418.6 186.9 1420.3 186.4 1423.6 190.8 1429.3 194.1 1437.5 196.4 1443.3 201.5 1444.7 208.8 1447.7 211.6 1454.2 212.7 1461.4 213.5 1469.4 217.5 1472.8 218.2 1477.8 224 1482.5 227.8 1488.1 227.6 1499.4 229.1 1505.8 228.2 1511.4 229.1 1520.8 233 1527 233 1530.3 234.9 1534.7 231.5 1541.9 229.3 1549.5 229.1 1554.4 226.9 1556.4 223.5 1558.8 221.3 1556.9 219.2 1554 216.8 1554.5 212.7 1557.7 213.3 1563.6 214.6 1566.8 211.2 1573.2 208.8 1574.5 204.6 1577 202.8 1583.8 202 1588.2 202.7 1587.4 200.5 1580.2 196.1 1575 194.1 1572.5 196.4 1567 195.4 1564.7 196.2 1561.9 193.7 1561.6 187.4 1561 182.7 1568.4 185.1 1572.8 181.2 1570.9 178.4 1570.7 171.9 1572 169.9 1569.5 166.5 1565.8 165.1 1567.5 162 1572.6 160.9 1578.8 160.7 1587.4 162.6 1593.4 164.8 1601.1 171 1604.9 173.7 1609.4 177.5 1615.6 183.5 1625.6 185.5 Z">
+    </path>
+    <path iso2="CI" name="Côte D'ivoire" d="M955.9 435.2l2.5 1.4 1 2.2 2.5 1.3 2-1.6 2.6-0.2 3.9 1.6 1.5 9.2-2.4 5.3-1.5 7.3 2.4 5.5-0.2 2.6-2.6 0-3.9-1.2-3.7 0-6.7 1.2-3.9 1.8-5.6 2.4-1.1-0.2 0.4-5.3 0.6-0.8-0.2-2.5-2.4-2.7-1.8-0.4-1.6-1.8 1.2-2.9-0.5-3.1 0.2-1.8 0.9 0 0.4-2.8-0.4-1.3 0.5-0.9 2.1-0.7-1.4-5.2-1.3-2.6 0.5-2.2 1.1-0.5 0.8-0.6 1.5 1 4.4 0 1-1.8 1 0.1 1.6-0.7 0.9 2.7 1.3-0.8 2.4-1z">
+    </path>
+    <path iso2="CM" name="Cameroon" d="M1072.8 454.2l-2.8 6.5-1.4 1.1-0.4 5 0.6 2.7-0.5 1.9 2.7 3.4 0.5 2.3 2.1 3.3 2.6 2.1 0.3 2.9 0.6 1.9-0.4 3.4-4.5-1.5-4.6-1.7-7.1-0.2-0.7-0.4-3.4 0.8-3.4-0.8-2.7 0.4-9.3-0.1 0.9-5.1-2.3-4.3-2.6-1-1.1-2.9-1.5-0.9 0.1-1.8 1.4-4.6 2.7-6.2 1.6 0 3.4-3.8 2.1-0.1 3.2 2.7 3.9-2.2 0.5-2.7 1.3-2.6 0.8-3.2 3-2.6 1.1-4.5 1.2-1.5 0.8-3.3 1.4-4.1 4.7-5 0.3-2.1 0.6-1.2-2.3-2.5 0.2-2.1 1.5-0.3 2.3 4.1 0.5 4.2-0.2 4.3 3.2 5.8-3.2 0-1.6 0.4-2.6-0.6-1.2 3 3.4 3.8 2.5 1.1 0.8 2.6 1.8 4.4-0.8 1.8z">
+    </path>
+    <path iso2="CD" name="DR Congo" d="M1141.3 468.2l3.5 5.3 2.6 0.8 1.5-1.1 2.6 0.4 3.1-1.3 1.4 2.7 5.1 4.3-0.3 7.5 2.3 0.9-1.9 2.2-2.1 1.8-2.2 3.3-1.2 3-0.3 5.1-1.3 2.5-0.1 4.8-1.6 1.8-0.2 3.8-0.8 0.5-0.6 3.6 1.4 2.9 0.1 1-1.2 10.3 1.5 3.6-1 2.7 1.8 4.6 3.4 3.5 0.7 3.5 1.6 1.7-0.3 1.1-0.9-0.3-7.7 1.1-1.5 0.8-1.7 4.1 1.2 2.8-1.1 7.6-0.9 6.4 1.5 1.2 3.9 2.5 1.6-1.2 0.2 6.9-4.3 0-2.2-3.5-2-2.8-4.3-0.9-1.2-3.3-3.5 2-4.4-0.9-1.9-2.9-3.5-0.6-2.7 0.1-0.3-2-1.9-0.1-2.6-0.4-3.5 1-2.4-0.2-1.4 0.6 0.4-7.6-1.8-2.4-0.4-4 0.9-3.9-1.1-2.4-0.1-4.1-6.8 0.1 0.5-2.3-2.9 0-0.3 1.1-3.5 0.3-1.5 3.7-0.9 1.6-3.1-0.9-1.8 0.9-3.8 0.5-2.1-3.3-1.3-2.1-1.6-3.9-1.3-4.7-16.7-0.1-2 0.7-1.7-0.1-2.3 0.9-0.8-2 1.4-0.7 0.2-2.8 1-1.6 2-1.4 1.5 0.7 2-2.5 3.1 0.1 0.3 1.8 2.1 1.1 3.4-4 3.3-3.1 1.4-2.1-0.1-5.3 2.5-6.2 2.6-3.3 3.7-3.1 0.7-2 0.1-2.4 0.9-2.2-0.3-3.7 0.7-5.7 1.1-4 1.7-3.4 0.3-3.9 0.5-4.5 2.2-3.2 3-2.1 4.7 2.2 3.6 2.4 4.1 0.6 4.3 1.3 1.6-3.9 0.8-0.5 2.6 0.6 6.3-3.2 2.2 1.4 1.8-0.2 0.9-1.6 2.1-0.5 4.2 0.7 3.7 0.1 1.8-0.7z">
+    </path>
+    <path iso2="CG" name="Congo" d="M1090.9 479.3l-0.3 3.9-1.7 3.4-1.1 4-0.7 5.7 0.3 3.7-0.9 2.2-0.1 2.4-0.7 2-3.7 3.1-2.6 3.3-2.5 6.2 0.1 5.3-1.4 2.1-3.3 3.1-3.4 4-2.1-1.1-0.3-1.8-3.1-0.1-2 2.5-1.5-0.7-2.1-2.2-1.7 1.1-2.3 2.8-4.6-6.8 4.3-3.6-2.1-4.2 2-1.6 3.8-0.8 0.4-2.9 3.1 3.1 5 0.3 1.7-3 0.7-4.3-0.6-5-2.7-3.8 2.5-7.5-1.4-1.2-4.2 0.5-1.6-3.3 0.4-2.8 7.1 0.2 4.6 1.7 4.5 1.5 0.4-3.4 3-6 3.3-3.4 3.9 1.1 3.6 0.3z">
+    </path>
+    <path iso2="CO" name="Colombia" d="M584.4 426.2l-3.7 1.1-1.6 3.2-2.3 1.8-1.8 2.4-0.9 4.6-1.8 3.8 2.9 0.4 0.6 2.9 1.2 1.5 0.3 2.5-0.7 2.4 0.1 1.4 1.4 0.5 1.2 2.2 7.3-0.6 3.3 0.8 3.8 5.6 2.3-0.7 4.1 0.3 3.2-0.7 2 1.1-1.2 3.4-1.3 2.2-0.6 4.6 1.1 4.3 1.5 1.9 0.2 1.4-2.9 3.2 2 1.4 1.5 2.3 1.6 6.4-1.1 0.8-1-3.8-1.6-2.1-1.9 2.3-11-0.2 0 4 3.3 0.7-0.2 2.5-1.1-0.7-3.2 1-0.1 4.7 2.6 2.4 0.9 3.6-0.1 2.8-2.2 17.6-2.9-3.4-1.7-0.1 3.5-6.6-4.4-3-3.4 0.6-2.1-1.1-3.1 1.7-4.2-0.9-3.5-6.7-2.6-1.6-1.8-3.1-3.8-3-1.5 0.6-2.4-1.5-2.8-2.1-1.6 1-4.8-0.9-1.4-2.8-1.1 0.1-5.6-3.6-0.7-2 2.1-0.5-0.2-3.2 1.4-2.4 2.8-0.4 2.5-4 2.2-3.4-2-1.5 1.2-3.7-1.1-5.9 1.3-1.7-0.7-5.4-2.2-3.5 0.9-3.1 1.8 0.5 1.1-1.9-1.1-3.8 0.7-0.9 2.9 0.2 4.5-4.5 2.4-0.7 0.1-2.1 1.4-5.5 3.4-2.9 3.5-0.2 0.6-1.3 4.4 0.5 4.6-3.2 2.3-1.4 2.9-3.1 2 0.4 1.3 1.7-1.2 2.1z">
+    </path>
+    <path iso2="CR" name="Costa Rica" d="M514.6 431.6l1.2 3.5 2 2.6 2.5 2.7-2.2 0.6-0.1 2.6 1.1 0.9-0.9 0.8 0.2 1.1-0.6 1.3-0.3 1.3-3-1.4-1.1-1.4 0.7-1.1-0.1-1.4-1.5-1.5-2.2-1.3-1.8-0.8-0.3-1.9-1.4-1.1 0.2 1.8-1.2 1.6-1.2-1.8-1.7-0.7-0.7-1.2 0.1-2 0.9-2-1.5-0.9 1.4-1.3 0.9-0.8 3.6 1.7 1.3-0.8 1.8 0.5 0.8 1.3 1.7 0.5 1.4-1.4z">
+    </path>
+    <path iso2="CU" name="Cuba" d="M544.8 355.7l1.9 2.3 5.2-0.7 1.8 1.5 4.2 4 3.2 2.9 1.8-0.1 3.2 1.3-0.6 1.8 4 0.3 3.9 2.6-0.8 1.5-3.8 0.8-3.8 0.3-3.7-0.5-8.1 0.6 4.2-3.5-2.1-1.7-3.6-0.4-1.7-1.9-0.8-3.6-3.2 0.2-5-1.7-1.5-1.4-7.1-1-1.8-1.2 2.3-1.6-5.4-0.3-4.4 3.3-2.3 0.1-1 1.6-2.8 0.7-2.3-0.7 3.2-1.9 1.5-2.4 2.7-1.4 3-1.2 4.3-0.6 1.4-0.8 4.7 0.5 4.4 0.1 4.9 2.2z">
+    </path>
+    <path iso2="CZ" name="Czech Republic" d="M1059.7 175.2l2.5 2 3.7 0.5-0.2 1.7 2.8 1.3 0.6-1.6 3.4 0.7 0.7 2 3.7 0.3 2.6 3.1-1.5 0-0.7 1.1-1.1 0.3-0.2 1.4-0.9 0.3-0.1 0.6-1.6 0.6-2.2-0.1-0.6 1.4-2.4-1.2-2.3 0.3-4-1.9-1.7 0.5-2.6 2.6-3.8-2.1-3-2.6-2.6-1.5-0.7-2.7-1-1.8 3.4-1.3 1.7-1.6 3.5-1.2 1.1-1.2 1.3 0.7 2.2-0.6z">
+    </path>
+    <path iso2="DE" name="Germany" d="M1053.9 158.9l1.4 3.1-1.2 1.7 1.9 2.1 1.5 3.3-0.2 2.2 2.4 3.9-2.2 0.6-1.3-0.7-1.1 1.2-3.5 1.2-1.7 1.6-3.4 1.3 1 1.8 0.7 2.7 2.6 1.5 3 2.6-1.6 2.9-1.7 0.8 1 4.1-0.4 1.1-1.7-1.3-2.4-0.2-3.5 1.1-4.4-0.3-0.6 1.7-2.7-1.7-1.4 0.3-5.5-1.9-1 1.3-4.2 0 0.4-4.5 2.4-4.2-7.2-1.2-2.4-1.6 0.2-2.7-1-1.4 0.4-4.2-1.1-6.5 2.9 0 1.2-2.3 0.9-5.6-0.9-2.1 0.8-1.3 4-0.3 1 1.3 3.1-3-1.3-2.3-0.4-3.4 3.7 0.8 2.9-0.9 0.3 2.3 4.9 1.4 0.1 2.2 4.7-1.2 2.6-1.6 5.6 2.4 2.4 1.9z">
+    </path>
+    <path iso2="DJ" name="Djibouti" d="M1229.5 428.2l-1.9 3.5-1.3-1.2-1.3 0.5-3.2-0.1-0.2-2-0.5-1.8 1.8-3 1.9-2.8 2.4 0.6 1.7-1.6 1.4 2-0.1 2.6-3.1 1.6 2.4 1.7z">
+    </path>
+    <path iso2="DK" name="Denmark" d="M 1046.1 147.7 1043.7 152.6 1038.5 149.1 1037.6 146.6 1044.4 144.6 1046.1 147.7 ZM 1033.3 151.5 1030.4 152.4 1026.7 151.6 1024.6 148.2 1024.2 142.1 1024.8 140.4 1026.1 138.6 1030.1 138.3 1031.7 136.6 1035.3 134.9 1035.3 138 1034.1 140 1034.8 141.6 1037.4 142.5 1036.4 144.8 1035 144.2 1031.9 148.5 1033.3 151.5 Z">
+    </path>
+    <path iso2="DO" name="Dominican Republic" d="M585.7 386l0.3-1.8-1.3-1.9 1.5-1.1 0.7-2.5-0.1-3.4 0.8-1.1 4.3 0 3.2 1.6 1.5-0.1 0.7 2.3 3.1-0.2-0.4 1.9 2.5 0.3 2.5 2.3-2.3 2.6-2.6-1.4-2.6 0.3-1.8-0.3-1.1 1.2-2.2 0.4-0.7-1.6-1.9 0.9-2.7 4.4-1.3-1-0.1-1.8z">
+    </path>
+    <path iso2="DZ" name="Algeria" d="M1031 264.6l-1 3.3 1 6.1-1.1 5.3-3.2 3.6 0.6 4.8 4.5 3.9 0.1 1.5 3.4 2.6 2.6 11.5 1.9 5.7 0.4 3-0.8 5.2 0.4 3-0.6 3.5 0.6 4-2.2 2.7 3.4 4.7 0.2 2.7 2.1 3.6 2.5-1.2 4.5 3 2.5 4-18.8 12.3-16 12.6-7.8 2.8-6.2 0.7-0.1-4.1-2.6-1.1-3.5-1.8-1.3-3-18.7-14-18.6-14-20.5-15.6 0.1-1.2 0.1-0.4 0.1-7.6 8.9-4.8 5.4-1 4.5-1.7 2.1-3.2 6.4-2.5 0.3-4.8 3.1-0.6 2.5-2.3 7.1-1.1 1-2.5-1.4-1.4-1.9-6.8-0.3-3.9-1.9-4.1 5.1-3.5 5.8-1.1 3.3-2.6 5.1-2 9-1.1 8.8-0.5 2.7 0.9 4.9-2.5 5.7-0.1 2.2 1.5 3.6-0.4z">
+    </path>
+    <path iso2="EC" name="Ecuador" d="M559 502.8l0.8 4.9-1.7 4.1-6.1 6.8-6.7 2.5-3.4 5.6-0.9 4.3-3.1 2.7-2.5-3.3-2.3-0.7-2.3 0.5-0.3-2.3 1.6-1.5-0.7-2.7 2.9-4.8-1.3-2.8-2.1 3-3.5-2.9 1.1-1.8-1-5.8 2-1 1-4 2.1-4.1-0.3-2.6 3.1-1.4 3.9-2.5 5.6 3.6 1.1-0.1 1.4 2.8 4.8 0.9 1.6-1 2.8 2.1 2.4 1.5z">
+    </path>
+    <path iso2="EG" name="Egypt" d="M1172.1 301.4l3.9 9.4 0.7 1.6-1.3 2.6-0.7 4.8-1.2 3.4-1.2 1.1-2-2.1-2.7-2.8-4.7-9.2-0.5 0.6 2.8 6.7 3.9 6.5 4.9 10 2.3 3.5 2 3.6 5.4 7.1-1 1.1 0.4 4.2 6.8 5.8 1.1 1.3-22.1 0-21.5 0-22.3 0-1-23.7-1.3-22.8-2-5.2 1.1-3.9-1-2.8 1.7-3.1 7.2-0.1 5.4 1.7 5.5 1.9 2.6 1 4-2 2.1-1.8 4.7-0.6 3.9 0.8 1.8 3.2 1.1-2.1 4.4 1.5 4.3 0.4 2.5-1.6z">
+    </path>
+    <path iso2="ER" name="Eritrea" d="M1228.9 420.3l-1.7 1.6-2.4-0.6-2-2.1-2.5-3.7-2.6-2.1-1.5-2.2-5-2.6-3.9-0.1-1.4-1.3-3.2 1.5-3.6-2.9-1.5 4.8-6.6-1.4-0.7-2.5 2-9.5 0.3-4.2 1.7-2 4-1.1 2.7-3.6 3.6 7.4 1.9 5.9 3.2 3.1 8 6.1 3.3 3.6 3.2 3.8 1.8 2.2 2.9 1.9z">
+    </path>
+    <path iso2="EE" name="Estonia" d="M1113.7 124.6l0.9 1-2.6 3.4 2.4 5.6-1.6 1.9-3.8-0.1-4.4-2.2-2.1-0.7-3.8 1-0.1-3.5-1.5 0.8-3.3-2.1-1-3.4 5.5-1.7 5.6-0.8 5.1 0.9 4.7-0.1z">
+    </path>
+    <path iso2="ET" name="Ethiopia" d="M1207.3 408.5l3.9 0.1 5 2.6 1.5 2.2 2.6 2.1 2.5 3.7 2 2.1-1.9 2.8-1.8 3 0.5 1.8 0.2 2 3.2 0.1 1.3-0.5 1.3 1.2-1.2 2.2 2.2 3.6 2.2 3.1 2.2 2.3 18.7 7.6 4.8-0.1-15.6 19.3-7.3 0.3-5 4.5-3.6 0.1-1.5 2.1-3.9 0-2.3-2.2-5.2 2.7-1.6 2.7-3.8-0.6-1.3-0.7-1.3 0.2-1.8-0.1-7.2-5.4-4 0-1.9-2.1-0.1-3.6-2.9-1.1-3.5-7-2.6-1.5-1-2.6-3-3.1-3.5-0.5 1.9-3.6 3-0.2 0.8-1.9-0.2-5 0-0.8 1.5-6.7 2.6-1.8 0.5-2.6 2.3-5 3.3-3.1 2-6.4 0.7-5.5 6.6 1.4 1.5-4.8 3.6 2.9 3.2-1.5 1.4 1.3z">
+    </path>
+    <path iso2="FI" name="Finland" d="M1104.1 70.1l0.4 3.8 7.3 3.7-2.9 4.2 6.5 6.3-1.7 4.8 4.9 4.2-0.9 3.8 7.4 3.9-0.9 2.9-3.4 3.4-8 7.4-8 0.5-7.6 2.1-7.1 1.3-3.2-3.2-4.7-1.9 0.1-5.8-3-5.2 1.6-3.4 3.3-3.5 8.8-6.2 2.6-1.2-0.9-2.4-6.5-2.6-1.8-2.2-1.8-8.5-7.2-3.7-6-2.7 2.2-1.4 5.1 2.8 5.3-0.2 4.7 1.3 3.4-2.4 1.1-4 5.9-1.8 5.8 2.1-0.8 3.8z">
+    </path>
+    <path iso2="GA" name="Gabon" d="M1060.5 487.3l-0.4 2.8 1.6 3.3 4.2-0.5 1.4 1.2-2.5 7.5 2.7 3.8 0.6 5-0.7 4.3-1.7 3-5-0.3-3.1-3.1-0.4 2.9-3.8 0.8-2 1.6 2.1 4.2-4.3 3.6-5.8-6.5-3.7-5.3-3.5-6.6 0.2-2.2 1.3-2 1.3-4.7 1.2-4.8 1.9-0.3 8.2 0 0-7.7 2.7-0.4 3.4 0.8 3.4-0.8 0.7 0.4z">
+    </path>
+    <path iso2="GB" name="United Kingdom" d="M 956.7 158.2 953.2 157 950.2 157.1 951.4 153.8 950.5 150.6 954.5 150.3 959.4 154.1 956.7 158.2 ZM 972.6 129.5 967.5 136 972.2 135.2 977.3 135.2 976 140.1 971.7 145.5 976.6 145.8 976.9 146.5 981.1 153.6 984.3 154.6 987.2 161.6 988.6 164 994.5 165.1 993.9 169.1 991.5 170.9 993.4 174.1 989 177.3 982.5 177.2 974.1 179 971.9 177.7 968.6 180.6 964.1 179.9 960.5 182.3 958 181.1 965.3 174.6 969.7 173.2 962.1 172.2 960.8 169.7 965.9 167.8 963.4 164.5 964.4 160.5 971.5 161.1 972.3 157.5 969.2 153.8 969.1 153.7 963.4 152.6 962.3 151 964.1 148.3 962.6 146.6 960 149.5 959.9 143.6 957.7 140.6 959.6 134.4 963.4 129.6 967 130 972.6 129.5 Z">
+    </path>
+    <path iso2="GE" name="Georgia" d="M1215.7 227.9l5.1 1.3 2.1 2.6 3.6 1.5-1.2 0.8 3.3 3.5-0.6 0.7-2.9-0.3-4.2-1.9-1.1 1.1-7 1-5.6-3.2-5.5 0.3 0.3-2.7-2.1-4.3-3.4-2.4-3-0.7-2.2-1.9 0.4-0.8 4.6 1.1 7.7 1 7.6 3.1 1.2 1.2 2.9-1z">
+    </path>
+    <path iso2="GH" name="Ghana" d="M986.5 431.1l-0.4 2 2.3 3.3 0 4.7 0.6 5 1.4 2.4-1.3 5.7 0.5 3.2 1.5 4.1 1.3 2.3-8.9 3.7-3.2 2.2-5.1 1.9-5-1.8 0.2-2.6-2.4-5.5 1.5-7.3 2.4-5.3-1.5-9.2-0.8-4.8 0.2-3.7 9.8-0.3 2.5 0.5 1.8-1 2.6 0.5z">
+    </path>
+    <path iso2="GN" name="Guinea" d="M921.5 421.9l0.3 2.4 0.9 0 1.5-0.9 0.9 0.2 1.6 1.7 2.4 0.5 1.5-1.4 1.9-0.9 1.3-0.9 1.1 0.2 1.3 1.4 0.6 1.8 2.3 2.7-1.1 1.6-0.3 2.1 1.2-0.6 0.7 0.7-0.3 1.9 1.7 1.9-1.1 0.5-0.5 2.2 1.3 2.6 1.4 5.2-2.1 0.7-0.5 0.9 0.4 1.3-0.4 2.8-0.9 0-1.6-0.2-1.1 2.6-1.6 0-1.1-1.4 0.4-2.6-2.4-3.9-1.4 0.7-1.3 0.2-1.5 0.3 0.1-2.3-0.9-1.7 0.2-1.9-1.2-2.7-1.6-2.3-4.5 0-1.3 1.2-1.6 0.2-1 1.4-0.6 1.7-3.1 2.9-2.4-3.8-2.2-2.5-1.4-0.9-1.4-1.3-0.6-2.8-0.8-1.4-1.7-1.1 2.6-3.1 1.7 0.1 1.5-1 1.2-0.1 0.9-0.8-0.4-2.1 0.6-0.7 0.1-2.2 2.7 0.1 4.1 1.5 1.2-0.1 0.4-0.7 3.1 0.5 0.8-0.4z">
+    </path>
+    <path iso2="GM" name="Gambia" d="M891.6 417.4l0.8-2.9 6.1-0.1 1.3-1.6 1.8-0.1 2.2 1.6 1.7 0 1.9-1 1.1 1.8-2.5 1.5-2.4-0.2-2.4-1.3-2.1 1.5-1 0-1.4 0.9-5.1-0.1z">
+    </path>
+    <path iso2="GW" name="Guinea-bissau" d="M909.2 421l-0.1 2.2-0.6 0.7 0.4 2.1-0.9 0.8-1.2 0.1-1.5 1-1.7-0.1-2.6 3.1-2.9-2.6-2.4-0.5-1.3-1.8 0.1-1-1.7-1.3-0.4-1.4 3-1 1.9 0.2 1.5-0.8 10.4 0.3z">
+    </path>
+    <path iso2="GQ" name="Equatorial Guinea" d="M1050.3 487.3l0 7.7-8.2 0-1.9 0.3-1.1-0.9 1.9-7.2 9.3 0.1z">
+    </path>
+    <path iso2="GR" name="Greece" d="M 1112.7 272.6 1115.8 274.8 1119.9 274.4 1123.9 274.8 1123.9 276 1126.7 275.2 1126.2 277.1 1118.6 277.6 1118.5 276.6 1111.9 275.3 1112.7 272.6 ZM 1121.9 239.9 1118.7 239.7 1116 239.1 1109.8 240.7 1113.8 244.3 1111.3 245.4 1108.4 245.4 1105.3 242.1 1104.4 243.5 1106 247.3 1108.9 250.3 1107 251.7 1110.2 254.6 1113 256.5 1113.4 260.1 1108.4 258.4 1110.2 261.7 1106.9 262.3 1109.4 268 1105.9 268.1 1101.3 265.3 1098.9 260.2 1097.6 255.9 1095.3 253 1092.3 249.3 1091.8 247.5 1094 244.4 1094.1 242.3 1095.8 241.4 1095.7 239.7 1099.1 239.2 1100.9 237.8 1103.7 237.9 1104.5 236.8 1105.5 236.6 1109.3 236.8 1113.3 235 1117.2 237.3 1121.8 236.7 1121.5 233.5 1124.2 235.2 1123.1 239.2 1121.9 239.9 Z">
+    </path>
+    <path iso2="GL" name="Greenland" d="M896.3 1.4l19.9 3-6.7 1.4-13 0.2-18.5 0.4 1.4 0.7 12.3-0.5 9.7 1.4 7-1.2 2.4 1.4-4.5 2.4 9.2-1.6 17.1-1.5 10 0.8 1.7 1.7-14.8 2.9-2.2 1-11.4 0.8 8.1 0.2-4.9 3.2-3.6 2.9-1.2 5.2 3.7 3.2-5.9 0.1-6.5 1.6 6.3 2.6-0.1 4.2-4.2 0.5 4.1 4.3-8.7 0.4 4 2-1.6 1.8-5.7 0.8-5.5 0.1 4.2 3.4-0.5 2.4-7.3-2.2-2.4 1.4 5 1.3 4.6 3.2 0.6 4.3-7.4 1-2.7-2.1-4.2-3 0.5 3.6-5.4 2.8 10.7 0.2 5.5 0.3-11.9 4.7-12.2 4.3-12.7 1.8-4.6 0.1-4.9 2.1-7.5 5.8-10.2 3.9-3 0.3-6.1 1.3-6.6 1.4-4.8 3.4-1.4 4-3.4 3.8-8.6 4.6 0.3 4.5-3.6 4.8-4.1 5.7-6.5 0.4-5-4.8-9-0.1-3.2-3.2-0.8-5.6-4.8-7.2-0.7-3.7 1.5-5.1-3.7-5.1 3.3-4.1-1.9-2 7-6.4 7.2-2.1 2.6-2.2 2.8-4.2-5.5 1.9-2.6 0.8-4.1 0.7-4.2-1.7 1.5-3.7 3-2.8 3.8-0.1 7.6 1.5-5.3-3.4-2.7-1.8-4.4 0.7-2.6-1.3 7-4.8-1.3-2-1.1-3.5-1.4-5.4-3.6-1.9 1.4-2.1-8.1-2.9-7.7-0.4-10.1 0.2-9.5 0.4-3.1-1.6-3.8-3.1 11-1.5 7.6-0.2-14.6-1.3-6.5-1.9 2.2-1.8 15.7-2.2 15-2.2 2.8-1.6-8.1-1.6 4.6-1.7 14.7-2.9 5.4-0.4 0.2-1.8 9-1.1 11-0.6 10.4 0 2.8 1.2 10.6-2.2 7.1 1.5 4.6 0.3 6.2 1.3-6.7-2.1 1.6-1.7 12.7-2.2 11.6 0.2 5.1-1.4 11.9-0.3 26.3 0.4z">
+    </path>
+    <path iso2="GT" name="Guatemala" d="M488.1 387.5l-0.7 5.1-1.3 7.2 1.7 0 1.7 1.2 0.6-1 1.5 0.8-2.8 2.5-2.9 1.8-0.5 1.2 0.3 1.3-1.3 1.6-1.4 0.4 0.3 0.8-1.2 0.7-2 1.6-0.3 0.9-2.8-1.1-3.5-0.1-2.4-1.3-2.8-2.6 0.4-1.9 0.8-1.5-0.7-1.2 3.3-5.2 7.2 0 0.4-2.2-0.8-0.4-0.5-1.4-1.9-1.5-1.8-2.1 2.5-0.1 0.5-3.6 5.2 0 5.2 0.1z">
+    </path>
+    <path iso2="GY" name="Guyana" d="M662.9 463.5l-1 5.8-3.5 1.6 0.3 1.5-1.1 3.4 2.4 4.6 1.8 0 0.7 3.6 3.3 5.6-1.3 0.3-3.2-0.6-1.8 1.7-2.6 1.1-1.8 0.3-0.6 1.3-2.8-0.3-3.5-3-0.3-3-1.4-3.3 1-5.4 1.6-2.3-1.2-3-2-0.9 0.8-2.9-1.2-1.4-3 0.2-3.7-4.8 1.6-1.8 0-3 3.5-1 1.4-1.2-1.8-2.4 0.5-2.3 4.7-3.8 3.6 2.4 3.3 4.1 0.1 3.4 2.1 0.1 3 3.1 2.1 2.3z">
+    </path>
+    <path iso2="HN" name="Honduras" d="M519.6 405.5l-1.9-0.1-0.9 0.9-2 0.8-1.4 0-1.3 0.8-1.1-0.2-0.9-1-0.6 0.2-0.9 1.5-0.5-0.1-0.2 1.4-2.1 1.7-1.2 0.8-0.6 0.8-1.5-1.3-1.4 1.7-1.2 0-1.3 0.1-0.2 3.2-0.8 0-0.8 1.5-1.8 0.3-0.8-2-1.7-0.6 0.7-2.6-0.7-0.7-1.2-0.4-2.5 0.7-0.1-0.8-1.6-1.1-1.1-1.2-1.6-0.6 1.3-1.6-0.3-1.3 0.5-1.2 2.9-1.8 2.8-2.5 0.6 0.3 1.3-1.1 1.6-0.1 0.5 0.5 0.9-0.3 2.6 0.6 2.6-0.2 1.8-0.7 0.8-0.7 1.7 0.3 1.3 0.4 1.5-0.1 1.2-0.6 2.5 0.9 0.8 0.2 1.6 1.2 1.5 1.4 1.9 1 1.3 1.7z">
+    </path>
+    <path iso2="HR" name="Croatia" d="M1081.5 207.6l1.5 2.5 1.7 1.8-1.7 2.4-2.4-1.4-3.5 0.1-4.5-1.1-2.3 0.1-1 1.4-2-1.5-0.8 2.6 2.7 3 1.3 1.9 2.5 2.4 2.1 1.4 2.1 2.7 4.8 2.4-0.5 1-5-2.3-3.2-2.3-4.8-1.9-4.7-4.6 1-0.5-2.5-2.7-0.3-2.1-3.3-1-1.4 2.7-1.6-2.1 0-2.2 0.1-0.1 3.6 0.2 0.8-1 1.8 1 2 0.1-0.1-1.7 1.7-0.7 0.3-2.5 3.9-1.7 1.6 0.8 4 2.7 4.3 1.2 1.8-1z">
+    </path>
+    <path iso2="HT" name="Haiti" d="M586.8 375.3l0.1 3.4-0.7 2.5-1.5 1.1 1.3 1.9-0.3 1.8-3.6-1.1-2.7 0.4-3.4-0.4-2.7 1.2-2.8-2 0.7-2.1 5.1 0.9 4.1 0.5 2.2-1.4-2.3-2.8 0.4-2.5-3.5-1 1.5-1.7 3.4 0.2 4.7 1.1z">
+    </path>
+    <path iso2="HU" name="Hungary" d="M1096.2 191.9l3 1.7 0.5 1.7-2.9 1.3-1.9 4.2-2.6 4.3-3.9 1.2-3.2-0.3-3.7 1.6-1.8 1-4.3-1.2-4-2.7-1.6-0.8-1.2-2.1-0.8-0.1 1.3-4-1.1-1.4 2.8 0 0.2-2.6 2.7 1.7 1.9 0.6 4.1-0.7 0.3-1.3 1.9-0.2 2.3-0.9 0.6 0.4 2.3-0.8 1-1.5 1.6-0.4 5.5 1.9 1-0.6z">
+    </path>
+    <path iso2="ID" name="Indonesia" d="M 1667.5 567.6 1665.1 567.7 1658 563.2 1663.4 561.9 1666.2 563.9 1668 565.8 1667.5 567.6 ZM 1692.3 558.9 1692.8 560.2 1692.7 562.1 1688.6 566.9 1683.6 568.3 1683 567.6 1683.7 565.4 1686.5 561.5 1692.3 558.9 ZM 1652.7 553.8 1654.6 555.5 1658.2 555 1659.4 557.7 1652.7 559 1648.8 559.9 1645.7 559.8 1647.9 556.1 1651.1 556.1 1652.7 553.8 ZM 1681 553.8 1679.9 557.4 1671.3 559.2 1663.8 558.4 1664 556 1668.6 554.7 1672 556.6 1675.8 556.1 1681 553.8 ZM 1600.8 545.3 1611.6 546 1613 543.3 1623.3 546.4 1625.1 550.6 1633.5 551.8 1640.2 555.6 1633.6 558 1627.5 555.4 1622.4 555.6 1616.6 555.1 1611.4 554 1605 551.5 1600.9 550.9 1598.5 551.7 1588.3 549 1587.5 546.3 1582.4 545.8 1586.6 539.7 1593.4 540.1 1597.8 542.6 1600.2 543.1 1600.8 545.3 ZM 1748.7 541.7 1745.5 546.1 1745.3 541.3 1746.4 539 1747.7 536.8 1748.9 538.7 1748.7 541.7 ZM 1707.3 524 1705.1 526.2 1701.3 525 1700.3 522.2 1706 521.9 1707.3 524 ZM 1725.7 521.7 1727.5 526.6 1722.9 523.9 1718.2 523.4 1714.9 523.8 1711 523.6 1712.5 520.1 1719.5 519.8 1725.7 521.7 ZM 1785.5 518.5 1784.5 539.4 1782.9 560.4 1778.3 555.1 1772.7 553.8 1771.2 555.6 1764 555.8 1766.8 550.6 1770.5 548.8 1769.5 541.8 1767.2 536.5 1756.5 531 1751.9 530.5 1743.6 524.5 1741.8 527.7 1739.6 528.2 1738.5 525.9 1738.6 523.1 1734.4 519.9 1740.6 517.6 1744.6 517.7 1744.2 516 1735.9 516 1733.7 512.2 1728.7 511 1726.4 507.8 1734 506.3 1736.9 504.2 1746 506.8 1746.9 509.2 1748.2 519.6 1753.9 523.4 1758.9 516.6 1765.5 512.8 1770.5 512.8 1775.3 515 1779.4 517.3 1785.5 518.5 ZM 1696.4 492.7 1691.9 499.1 1687.6 500.3 1682.2 499.1 1672.7 499.4 1667.8 500.3 1667 505.2 1672 510.9 1675.1 508 1685.7 505.8 1685.2 508.7 1682.7 507.8 1680.2 511.6 1675.1 514.1 1680.2 522.3 1679.1 524.5 1683.9 531.9 1683.6 536.1 1680.5 538 1678.4 535.7 1681.4 530.5 1675.7 533 1674.4 531.2 1675.2 528.7 1671.3 524.9 1672 518.7 1668.1 520.6 1668.3 528.1 1668.1 537.3 1664.4 538.2 1662.1 536.4 1664 530.5 1663.4 524.3 1661 524.2 1659.4 519.8 1661.9 515.6 1662.8 510.5 1665.8 500.8 1666.9 498.2 1671.7 493.4 1676.2 495.3 1683.3 496.2 1689.8 495.9 1695.4 491.3 1696.4 492.7 ZM 1716 494.6 1715.7 500.2 1712.8 499.5 1711.9 503.4 1714.2 506.8 1712.6 507.6 1710.4 503.5 1708.7 495.3 1709.7 490.2 1711.5 487.9 1712 491.4 1715.4 491.9 1716 494.6 ZM 1608 488.9 1609 493.2 1612.9 496.9 1616.6 495.6 1620.2 496 1623.5 492.8 1626.2 492.2 1631.6 494 1636.2 492.6 1638.8 483.7 1640.9 481.5 1642.6 474.2 1649.1 474.2 1654.1 475.3 1651.1 481.1 1655.5 487.1 1654.6 490.1 1661 496 1654.3 496.8 1652.5 501.2 1652.7 507 1647.2 511.4 1646.8 517.8 1644.3 527.6 1643.6 525.3 1637 528.2 1634.9 524.3 1630.9 523.9 1628.1 521.8 1621.3 524.2 1619.4 521 1615.6 521.4 1611 520.7 1610.4 512.1 1607.6 510.3 1604.9 504.8 1604.1 499.2 1604.7 493.2 1608 488.9 ZM 1585.2 539.4 1579 539.5 1574.5 534.2 1567.4 528.9 1565.1 525 1561 519.8 1558.3 515 1554.1 506 1549.2 500.6 1547.5 495.1 1545.3 490.1 1540.1 486.1 1537 480.6 1532.6 477 1526.4 469.9 1525.8 466.6 1529.4 466.9 1538.3 468.1 1543.5 474.4 1548.1 478.8 1551.3 481.4 1556.8 488.3 1562.6 488.4 1567.4 492.8 1570.8 498.2 1575.1 501.2 1572.8 506.4 1576.1 508.6 1578.1 508.8 1579 513.3 1580.9 516.8 1585 517.4 1587.6 521.5 1585.9 529.5 1585.2 539.4 Z">
+    </path>
+    <path iso2="IN" name="India" d="M1427.6 308l-2.8 3-0.9 6 5.8 2.4 5.8 3.1 7.8 3.6 7.7 0.9 3.8 3.2 4.3 0.6 6.9 1.5 4.6-0.1 0.1-2.5-1.5-4.1-0.2-2.7 3.1-1.4 1.5 5.1 0.4 1.2 5.5 2.5 3.2-1 4.7 0.4 4.5-0.2-0.5-3.9-2.6-2.1 4.2-0.8 3.9-4.8 5.4-4 4.9 1.5 3.2-2.7 3.6 4-1.2 2.7 6.1 1 1 2.4-1.7 1.2 1.4 3.9-4.2-1.1-6.2 4.4 0.9 3.7-2 5.4 0.3 3.1-1.6 5.3-4.6-1.5 0.9 6.7-1 2.2 1 2.7-2.5 1.5-4.4-10.2-1.5 0-0.3 4.2-3.6-3.4 1.2-3.6 2.4-0.4 1.6-5.4-3.4-1.1-5.1 0.1-5.4-0.9-1.2-4.5-2.7-0.3-4.9-2.8-1.2 4.4 4.6 3.4-3 2.4-0.9 2.3 3.7 1.7-0.3 3.9 2.6 4.8 1.6 5.3-0.5 2.4-3.8-0.1-6.6 1.3 0.9 4.8-2.4 3.8-7.5 4.4-5.3 7.5-3.8 4.1-5 4.2 0.3 2.9-2.6 1.6-4.8 2.3-2.6 0.3-1.2 4.9 1.9 8.4 0.7 5.3-1.9 6.1 0.7 10.9-2.9 0.3-2.3 4.9 1.9 2.2-5.1 1.8-1.7 4.3-2.2 1.9-5.6-6-3.1-9-2.5-6.5-2.2-3-3.4-6.2-2-8-1.4-4-5.9-8.8-3.5-12.5-2.6-8.2-0.8-7.8-1.7-6-7.7 3.9-4-0.8-8.1-7.8 2.4-2.3-1.9-2.5-7.1-5.5 3.2-4.3 12.1 0-1.8-5.5-3.5-3.2-1.4-5-4-2.8 4.9-6.8 6.5 0.5 4.5-6.7 2.2-6.5 3.9-6.5-1-4.6 3.8-3.7-5.1-3.1-2.9-4.4-3.3-5.6 2-2.8 8.5 1.6 5.7-1 3.8-5.4 7.7 7.6 0.8 5.2 3 3.3 0.6 3.3-4.1-0.9 3.2 7.1 6.2 4 8.6 4.5z">
+    </path>
+    <path iso2="IE" name="Ireland" d="M956.7 158.2l0.7 4.4-3.9 5.5-8.8 3.6-6.8-0.9 4.3-6.4-2.1-6.2 6.7-4.8 3.7-2.8 0.9 3.2-1.2 3.3 3-0.1 3.5 1.2z">
+    </path>
+    <path iso2="IR" name="Iran" d="M1229 253.2l1.8-0.2 5.3-4.7 1.9-0.5 1.9 1.9-1.2 3.1 3.9 3.4 1.3-0.4 2.5 4.8 5.3 1.3 4.3 3.2 7.7 1.1 8-1.7 0.2-1.5 4.4-1.2 3-3.7 3.6 0.2 2-1.2 3.9 0.6 6.6 3.3 4.3 0.7 7.3 5.6 4 0.3 1.7 5.3-0.6 8-0.5 4.7 2.5 1-1.6 3.5 2.7 5.1 1.2 4.1 4.3 1.1 1.1 4.1-3.9 5.8 3.2 3.4 2.8 3.9 5.7 2.8 1 5.6 2.7 1.1 0.9 2.9-7.5 3.4-1.1 7.4-10.6-1.9-6.2-1.5-6.3-0.8-3.3-7.9-2.8-1.1-4.1 1.1-5.1 3.1-7-2.1-6.1-5-5.5-1.8-4.4-6.1-5.2-8.5-2.8 1-3.7-2.1-1.7 2.5-3.5-3.4-0.5-3.4-1.7 0 0.2-4.7-3.5-4.8-7.1-3.6-4.6-6.1 0.5-5 2.3-2.2-0.9-3.7-3.8-2-4.7-7.6-3.8-5.1 0.7-2-2.9-7.3 3.3-1.9 1.2 2.5 3.2 2.9 3.8 0.9z">
+    </path>
+    <path iso2="IQ" name="Iraq" d="M1223.5 263.2l4.7 7.6 3.8 2 0.9 3.7-2.3 2.2-0.5 5 4.6 6.1 7.1 3.6 3.5 4.8-0.2 4.7 1.7 0 0.5 3.4 3.5 3.4-3.3-0.3-3.7-0.6-3.3 6.2-10.2-0.5-16.8-12.9-8.6-4.5-6.8-1.8-3.1-7.8 11-6.7 1-7.7-1.2-4.7 2.7-1.6 2.1-4 2.1-1 6.3 0.9 2.1 1.6 2.4-1.1z">
+    </path>
+    <path iso2="IS" name="Iceland" d="M924.8 84.5l-1.4 3.6 4.4 3.8-6.1 4.3-13.1 3.9-3.9 1.1-5.6-0.9-11.9-1.8 4.8-2.5-9-2.7 7.9-1.1 0.1-1.7-8.8-1.3 3.6-3.7 6.6-0.8 6 3.8 7-3 5.1 1.5 7.3-2.9 7 0.4z">
+    </path>
+    <path iso2="IL" name="Israel" d="M1179.1 288.2l0.4 2.6-0.6 1 0.1 0-0.7 2-2.1-0.8-0.7 4.2 1.5 0.7-1.3 0.9-0.1 1.7 2.5-0.8 0.4 2.5-1.8 10.2-0.7-1.6-3.9-9.4 1.4-2.1-0.4-0.4 1.1-3 0.6-4.8 0.6-1.7 0.1 0 1.8 0 0.4-1.1 1.4-0.1z">
+    </path>
+    <path iso2="IT" name="Italy" d="M 1068.2 256.4 1066.5 261.5 1067.4 263.4 1066.5 266.7 1062.3 264.3 1059.6 263.6 1052.1 260.4 1052.6 257.1 1058.8 257.7 1064.2 257 1068.2 256.4 ZM 1034.2 237.4 1037.5 241.9 1037.1 250.4 1034.7 250 1032.6 252.1 1030.6 250.4 1030.1 242.7 1028.8 239.1 1031.7 239.4 1034.2 237.4 ZM 1055.9 203.9 1055.5 207 1056.9 209.7 1052.8 208.7 1048.9 211 1049.3 214.1 1048.8 215.9 1050.7 219.1 1055.7 222.3 1058.6 227.6 1064.7 232.7 1068.7 232.6 1070.1 234 1068.7 235.3 1073.5 237.6 1077.5 239.5 1082.2 242.9 1082.8 244 1082 246.3 1078.9 243.3 1074.3 242.3 1072.4 246.4 1076.3 248.8 1075.9 252.1 1073.8 252.5 1071.3 258 1069.1 258.5 1069 256.5 1069.9 253.1 1071 251.7 1068.7 248 1066.9 244.8 1064.7 244 1062.9 241.3 1059.5 240.1 1057.1 237.5 1053.3 237.1 1049 234.3 1044.1 230.1 1040.4 226.5 1038.5 220.2 1035.9 219.5 1031.7 217.4 1029.4 218.2 1026.5 221.2 1024.4 221.6 1024.9 218.9 1022.1 218.1 1020.6 213.2 1022.3 211.3 1020.8 208.9 1020.9 207.1 1023.1 208.5 1025.6 208.2 1028.3 206 1029.2 207 1031.6 206.8 1032.6 204.3 1036.4 205.1 1038.5 204 1038.8 201.5 1041.9 202.4 1042.4 201.2 1047.3 200.1 1048.6 202.2 1055.9 203.9 Z">
+    </path>
+    <path iso2="JM" name="Jamaica" d="M556.5 387.1l-1.8 1.1-3-1.1-2.9-2.3 0.8-1.5 2.4-0.4 1.3 0.2 3.7 0.6 2.7 1.5 0.8 1.8-4 0.1z">
+    </path>
+    <path iso2="JO" name="Jordan" d="M1198.1 295.3l-0.9 1-10.4 3.2 6 6.5-1.6 1-0.7 2.2-4.1 0.9-1.1 2.3-2.1 2-6.2-1.1-0.3-0.9 1.8-10.2-0.4-2.5 0.6-1.9-0.4-4 0.7-2 6.3 2.6 9.7-6.9 3.1 7.8z">
+    </path>
+    <path iso2="JP" name="Japan" d="M 1708.5 282.6 1710.1 284.8 1708.8 288.7 1705.7 286.6 1703.6 288.1 1703.7 291.8 1699.4 290 1698.2 287 1699.5 283.1 1702.9 283.9 1703.9 281.2 1708.5 282.6 ZM 1733.1 263.4 1733.7 268.5 1736.2 271.7 1735.6 276.2 1730.2 279.2 1721 279.6 1716.6 287 1711.9 284.5 1709.5 279.7 1700.9 281.1 1695.8 284.1 1689.6 284.3 1697 289 1697.8 299.9 1695.3 302.6 1691.7 300.1 1690.8 294.3 1686.7 292.5 1682.7 288.1 1687 286.1 1688.1 282 1692 278.7 1694 274.3 1703.7 272.4 1710 273.7 1710 262.3 1715.1 265.4 1719.6 259 1721.3 256.5 1720.3 248.7 1715.2 241.5 1715 237.5 1719.8 236.3 1728 245.2 1730.8 250.3 1729.5 256.8 1733.1 263.4 ZM 1721.2 218.6 1725.7 219.9 1727.5 217.3 1733.5 224.4 1727.1 226.1 1726.7 232.4 1715.8 228.1 1717.4 235 1711.7 235.1 1707 228.8 1706.4 223.9 1711.6 223.6 1707.2 214.8 1705.4 209.9 1715.9 216.5 1721.2 218.6 Z">
+    </path>
+    <path iso2="KZ" name="Kazakhstan" d="M1338.3 160.5l4.4-0.3 9.2-5.8-0.8 2 8.4 4.7 18.3 15.6 1.1-3.2 8.4 3.5 6.2-1.6 3.3 1.1 4.1 3.6 4 1.2 3.3 2.7 6-0.9 4.4 3.8-1.9 4.2-3.8 0.6 2.5 6.2-1.6 2.9-10.8-2.1 1 11.3-2 1.4-9.1 2.5 8.8 11-2.9 1.6 1.7 3.7-3.5-1-3.4-2.3-7.9-0.6-8.6-0.2-1.6 0.7-8.2-2.7-2.5 1.4 0.5 3.7-9.2-2.2-3.1 0.9-0.3 2.8-2.6 1.2-5.4 4.4-0.9 4.6-2 0-2.3-3-6.7-0.2-2.5-5.2-2.6-0.1-1.5-6.4-7.6-4.6-8.6 0.5-5.7 0.9-6.6-5.7-4.8-2.4-9.2-4.5-1.1-0.5-12 3.7 6.2 23.4-2.6 0.3-4.8-5-3.9-1.8-5.6 1.3-1.8 2.2-0.6-1.6 0.6-2.6-1.5-2.2-6.5-2.2-3.7-5.7-3.2-1.6-0.6-2.1 5.1 0.6-1-4.6 4.1-1 4.7 0.9-0.7-6.1-1.9-3.9-5 0.3-4.7-1.5-5.1 2.7-4.4 1.4-2.8-1.1-0.2-3.2-4.3-4.2-3.6 0.2-5.3-4.2 1.7-4.8-1.8-1.2 2.2-6.9 6 3.6-0.6-4.5 8.1-6.7 7.6-0.2 12 4.3 6.6 2.5 4.4-2.6 7.7-0.1 7.3 3.2 0.8-1.9 7 0.3 0.2-2.9-9.4-4.3 3.5-3-1.5-1.6 4-1.6-5.1-4.2 1.4-2.1 17-2.1 1.7-1.5 10.9-2.3 3.1-2.5 9.1 1.3 4.4 6.3 4.3-1.5 7.1 2.1 1.1 3.3z">
+    </path>
+    <path iso2="KE" name="Kenya" d="M1223.5 476.7l-4.9 7.2 0.2 23.4 3.3 5.3-4 2.6-1.4 2.7-2.2 0.4-0.8 4.6-1.9 2.6-1.1 4.2-2.3 2.1-8.1-6.4-0.3-3.7-20.5-13.1 0.4-4.7-1.4-2.5 0-0.3 1.6-2.6 2.8-4.2 2.1-4.7-2.6-7.4-0.7-3.2-2.7-4.5 3.4-3.8 3.8-4.2 2.9 1.1 0.1 3.6 1.9 2.1 4 0 7.2 5.4 1.8 0.1 1.3-0.2 1.3 0.7 3.8 0.6 1.6-2.7 5.2-2.7 2.3 2.2 3.9 0z">
+    </path>
+    <path iso2="KG" name="Kyrgyzstan" d="M1400.5 230.2l-0.2 1.4-6.9 3.4-1 2.6-6.4 0.7-0.6 4.1-5.8-0.9-3.2 1.3-4.1 3 1.2 1.5-1.1 1.4-9.6 1-7.1-2.1-5.5 0.5-0.6-3.6 6 1 1.4-1.9 4.1 0.6 5.3-4.6-7.2-3.4-3.2 1.6-4.6-2.4 3-4.1-1.7-0.6 0.3-2.8 3.1-0.9 9.2 2.2-0.5-3.7 2.5-1.4 8.2 2.7 1.6-0.7 8.6 0.2 7.9 0.6 3.4 2.3 3.5 1z">
+    </path>
+    <path iso2="KH" name="Cambodia" d="M1589.8 410.6l1.8 4.3 0.1 7.7-9 5 2.8 3.8-5.9 0.5-4.6 2.6-4.8-0.9-2.6-3.4-3.5-6.6-2.1-7.8 3.1-5.3 7.1-1.2 5.3 0.9 5 2.5 2-4.4 5.3 2.3z">
+    </path>
+    <path iso2="KR" name="South Korea" d="M1652.9 259.5l0-0.6 2.5 0.2 0.6-2.8 3.6-0.4 2-0.4 0-1.5 8.3 7.5 3.3 4.2 3.4 7.4-0.5 3.5-4.3 1.2-3.1 2.7-4.6 0.5-2.1-3.5-1.1-4.8-5.3-6.6 3.4-1.1-6.1-5.5z">
+    </path>
+    <path iso2="KW" name="Kuwait" d="M1247.5 309.4l1.5 2.8-0.3 1.5 2.4 4.8-3.9 0.2-1.7-3.1-5-0.6 3.3-6.2 3.7 0.6z">
+    </path>
+    <path iso2="LA" name="Laos" d="M1589.8 410.6l-5.3-2.3-2 4.4-5-2.5 1.5-2.9-0.4-5.4-5.3-5.6-1.3-6.4-5-5.2-4.3-0.4-0.8 2.2-3.2 0.2-1.9-1.1-5.3 3.8-1-5.8 0.4-6.7-3.8-0.3-0.9-3.9-2.7-2 0.8-2.3 4.1-4.2 0.8 1.5 3 0.2-2-7.4 2.7-0.9 4 5.1 3.5 5.8 6.8 0 3 5.6-3.3 1.7-1.2 2.3 7.3 3.9 5.7 7.6 4.4 5.6 4.9 4.5 2 4.5-0.2 6.4z">
+    </path>
+    <path iso2="LB" name="Lebanon" d="M1179.1 288.2l-1.4 0.1-0.4 1.1-1.8 0 1.3-5.3 2.2-4.5 0-0.2 2.5 0.3 1.2 2.5-2.7 2.5-0.9 3.5z">
+    </path>
+    <path iso2="LR" name="Liberia" d="M938.6 452.5l-0.2 1.8 0.5 3.1-1.2 2.9 1.6 1.8 1.8 0.4 2.4 2.7 0.2 2.5-0.6 0.8-0.4 5.3-1.5 0.1-5.8-3.1-5.2-4.9-4.8-3.5-3.8-4.1 1.4-2.1 0.3-1.9 2.6-3.4 2.6-3 1.3-0.2 1.4-0.7 2.4 3.9-0.4 2.6 1.1 1.4 1.6 0 1.1-2.6 1.6 0.2z">
+    </path>
+    <path iso2="LY" name="Libya" d="M1122.6 299.1l-1.7 3.1 1 2.8-1.1 3.9 2 5.2 1.3 22.8 1 23.7 0.5 12.8-6.4 0 0 2.7-22.6-12.3-22.5-12.3-5.5 3.5-3.8 2.4-3.2-3.5-8.8-2.8-2.5-4-4.5-3-2.5 1.2-2.1-3.6-0.2-2.7-3.4-4.7 2.2-2.7-0.6-4 0.6-3.5-0.4-3 0.8-5.2-0.4-3-1.9-5.7 2.6-1.4 0.4-2.8-0.6-2.6 3.6-2.5 1.6-2.1 2.6-1.8 0.1-4.9 6.4 2.2 2.3-0.6 4.5 1.1 7.3 2.9 2.8 5.7 4.9 1.2 7.8 2.7 6 3.2 2.5-1.7 2.5-2.9-1.6-4.9 1.5-3.2 3.7-3 3.7-0.8 7.4 1.3 2 2.8 2 0.1 1.8 1.1 5.4 0.7 1.5 2.1z">
+    </path>
+    <path iso2="LK" name="Sri Lanka" d="M1445.9 462l-4.8 1.5-2.9-5.1-1.4-9.2 2-10.4 4.1 3.5 2.8 4.5 3.1 6.7-0.6 6.7-2.3 1.8z">
+    </path>
+    <path iso2="LS" name="Lesotho" d="M1139.1 697.9l-2 0.7-3.7-5 3.2-4 3.1-2.5 2.7-1.4 2.2 2 1.7 2-1.9 3.1-1.1 2.1-3.1 1-1.1 2z">
+    </path>
+    <path iso2="LT" name="Lithuania" d="M1111.1 147.6l1 2.7-3.6 2-0.5 3.4-4.8 2.3-4.7 0-1.4-1.9-2.5-0.7-0.6-1.5 0.2-1.7-2.2-0.9-5.1-1.1-1.7-5.1 5.1-1.8 7.9 0.4 4.5-0.6 0.9 1.2 2.5 0.4 5 2.9z">
+    </path>
+    <path iso2="LU" name="Luxembourg" d="M1016.9 185.4l-1.4 0.1-1.1-0.5 0.4-3.5 1.3-0.2 1 1.4-0.2 2.7z">
+    </path>
+    <path iso2="LV" name="Latvia" d="M1112.8 136.5l2.5 1.3 1 2.9 2.1 3.6-4.6 2.3-2.7 1-5-2.9-2.5-0.4-0.9-1.2-4.5 0.6-7.9-0.4-5.1 1.8-0.5-4.5 1.7-3.8 4.1-2 4.4 4.5 3.7-0.2 0.1-4.6 3.8-1 2.1 0.7 4.4 2.2 3.8 0.1z">
+    </path>
+    <path iso2="MA" name="Morocco" d="M974.8 276l1.9 4.1 0.3 3.9 1.9 6.8 1.4 1.4-1 2.5-7.1 1.1-2.5 2.3-3.1 0.6-0.3 4.8-6.4 2.5-2.1 3.2-4.5 1.7-5.4 1-8.9 4.8-0.1 7.6-0.9 0 0.1 3.4-3.4 0.2-1.8 1.5-2.5 0-2-0.9-4.6 0.7-1.9 5-1.8 0.5-2.7 8.1-7.9 6.9-2 8.9-2.4 2.9-0.7 2.3-12.5 0.5-0.1 0 0.3-3 2.2-1.7 1.9-3.4-0.3-2.2 2-4.5 3.2-4.1 1.9-1 1.6-3.7 0.2-3.5 2.1-3.9 3.8-2.4 3.6-6.5 0.1-0.1 2.9-2.5 5.1-0.7 4.4-4.4 2.8-1.7 4.7-5.4-1.2-7.9 2.2-5.6 0.9-3.4 3.6-4.3 5.4-2.9 4.1-2.7 3.7-6.6 1.8-4 3.9 0.1 3.1 2.7 5.1-0.4 5.5 1.4 2.4 0z">
+    </path>
+    <path iso2="MD" name="Moldova" d="M1129.4 210.3l-1.3-2.9 0.2-2.7-0.6-2.7-3.4-3.8-2-2.6-1.8-1.8-1.6-0.7 1.1-0.9 3.2-0.6 4 1.9 2 0.3 2.6 1.7-0.1 2.1 2 1 1.1 2.6 2 1.6-0.2 1 1 0.6-1.3 0.5-3-0.2-0.6-0.9-1 0.5 0.6 1.1-1.1 2.1-0.6 2.1-1.2 0.7z">
+    </path>
+    <path iso2="MG" name="Madagascar" d="M1267.9 588.9l0.4 7.7 1.3 3-0.7 3.1-1.2 1.8-1.6-3.7-1.2 1.9 0.8 4.7-0.7 2.8-1.7 1.4-0.7 5.5-2.7 7.5-3.4 8.8-4.3 12.2-2.9 8.9-3.1 7.5-4.6 1.5-5.1 2.7-3-1.6-4.2-2.3-1.2-3.4 0-5.7-1.5-5.1-0.2-4.7 1.3-4.6 2.6-1.1 0.2-2.1 2.9-4.9 0.8-4.1-1.1-3-0.8-4.1-0.1-5.9 2.2-3.6 1-4.1 2.8-0.2 3.2-1.3 2.2-1.2 2.4-0.1 3.4-3.6 4.9-4 1.8-3.2-0.6-2.8 2.4 0.8 3.3-4.4 0.3-3.9 2-2.9 1.8 2.8 1.4 2.7 1.2 4.3z">
+    </path>
+    <path iso2="MX" name="Mexico" d="M449.3 335.9l2.2-0.2-3.2 5.7-1.8 4.6-1.8 8.6-1.1 3.1 0.4 3.5 1.3 3.2 0.4 4.9 3 4.8 0.8 3.7 1.7 3.1 5.7 1.7 1.9 2.7 5.2-1.8 4.3-0.6 4.4-1.2 3.6-1.1 3.9-2.6 1.8-3.7 1.2-5.4 1.2-1.9 4-1.7 6.1-1.5 4.9 0.3 3.4-0.6 1.2 1.4-0.6 3.1-3.5 3.8-1.8 3.9 0.9 1.1-1.2 2.8-2.1 5-1.2-1.7-1.1 0.1-1.1 0.1-2.5 3.9-0.9-0.8-0.7 0.3-0.1 1-5.2-0.1-5.2 0-0.5 3.6-2.5 0.1 1.8 2.1 1.9 1.5 0.5 1.4 0.8 0.4-0.4 2.2-7.2 0-3.3 5.2 0.7 1.2-0.8 1.5-0.4 1.9-5.6-6.9-2.6-2.1-4.4-1.7-3.2 0.5-4.8 2.4-2.9 0.6-3.7-1.7-4.1-1.2-4.8-2.9-4.1-0.9-5.9-3-4.3-3.1-1.1-1.7-3.1-0.4-5.4-2-1.9-2.9-5.4-3.7-2.2-4-0.8-3.2 1.9-0.6-0.3-1.8 1.6-1.7 0.4-2.2-1.5-2.9 0-2.5-1.3-3.3-3.8-6.4-4.6-5-1.9-4-4.1-2.6-0.7-1.6 1.7-3.9-2.4-1.5-2.5-3.2-0.2-4.4-2.8-0.6-2.3-3.3-1.7-3.2 0.3-2-1.5-4.8-0.3-4.9 0.8-2.5-3.1-2.6-1.9 0.3-2.4-1.7-1.8 2.6-0.1 3-1 4.9 1 2.6 2.8 4.4 0.4 1.6 0.7 0.4 0.1 2.2 1-0.1 0 4.2 1.3 1.6 0.5 2.3 2.7 3.2 0.4 6 1 2.8 0.9 3-0.3 3.4 2.6 0.2 1.6 2.9 1.5 2.9-0.3 1.2-2.8 2.3-1 0-0.7-3.9-2.9-3.7-3.4-3.1-2.5-1.6 1.2-4.7-0.1-3.5-2.1-2-3.1-2.8-0.9 0.8-1-1.7-3-1.5-2.2-3.8 0.5-0.4 2.1 0.3 2.7-2.4 1-2.9-2.9-4.6-2.6-1.7-0.8-4-0.6-4.3-0.8-5.1-0.2-5.8 6.3-0.5 7.1-0.7-0.9 1.3 7 3.1 10.9 4.5 10.8 0 4.3 0 0.8-2.7 9.4 0 1.3 2.3 2.1 2.1 2.4 2.8 0.8 3.3 0.4 3.6 2.3 1.9 4 1.9 4.8-5 4.5-0.2 3.2 2.6 1.6 4.4 0.9 3.8 2.4 3.6 0.2 4.5 0.9 3 3.9 2 3.6 1.4z">
+    </path>
+    <path iso2="MK" name="Macedonia" d="M1105.5 236.6l-1 0.2-0.8 1.1-2.8-0.1-1.8 1.4-3.4 0.5-2.3-1.5-1-2.7 0.5-2.2 0.7 0.1 0.1-1.3 2.9-1 1.2-0.3 1.7-0.3 2.4-0.2 2.8 2.1 0.8 4.2z">
+    </path>
+    <path iso2="ML" name="Mali" d="M1010.2 378.8l0.1 14.8-3.1 4.3-0.4 4-5 1-7.7 0.5-2 2.3-3.6 0.3-3.6 0-1.4-1.2-3.1 0.9-5.3 2.7-1.1 2-4.3 2.8-0.8 1.7-2.4 1.3-2.7-0.9-1.5 1.6-0.9 4.4-4.5 5.3 0.2 2.2-1.6 2.7 0.4 3.7-2.4 1-1.3 0.8-0.9-2.7-1.6 0.7-1-0.1-1 1.8-4.4 0-1.5-1-0.8 0.6-1.7-1.9 0.3-1.9-0.7-0.7-1.2 0.6 0.3-2.1 1.1-1.6-2.3-2.7-0.6-1.8-1.3-1.4-1.1-0.2-1.3 0.9-1.9 0.9-1.5 1.4-2.4-0.5-1.6-1.7-0.9-0.2-1.5 0.9-0.9 0-0.3-2.4 0.3-2-0.5-2.4-2-1.8-1.1-3.7-0.2-4 1.9-1.2 1-3.8 1.8-0.1 3.9 1.8 3.2-1.3 2.1 0.4 0.9-1.4 22.5-0.1 1.3-4.5-1-0.8-2.5-27.7-2.4-27.7 8.5-0.1 18.6 14 18.7 14 1.3 3 3.5 1.8 2.6 1.1 0.1 4.1 6.2-0.7z">
+    </path>
+    <path iso2="MM" name="Myanmar" d="M1548.4 364.2l-4.1 4.2-0.8 2.3-3 1.5-2.8 2.8-3.9 0.3-1.5 6.9-2.2 1.2 3.5 5.6 4.1 4.7 2.9 4.3-1.4 5.5-1.8 1.2 1.8 3.2 4.3 5.1 1 3.6 0.2 3 2.7 5.9-2.6 6-2.2 6.6-0.9-4.8 1.3-4.9-2.2-3.8-0.2-7-2.6-3.4-2.7-7.6-2-8.1-3.1-5.4-3.2 3.3-5.8 4.5-3.3-0.5-3.6-1.5 0.9-8-2-6-5.3-7.4 0.3-2.3-3.4-0.9-4.6-5.2-1.1-5.2 2.1 1-0.6-4.6 2.5-1.5-1-2.7 1-2.2-0.9-6.7 4.6 1.5 1.6-5.3-0.3-3.1 2-5.4-0.9-3.7 6.2-4.4 4.2 1.1-1.4-3.9 1.7-1.2-1-2.4 3.1-0.5 2.7 3.8 2.7 1.5 1.3 4.9 0.9 5.3-4.2 5.4 0.7 7.6 5.6-1.1 2.4 5.9 3.7 1.3-0.8 5.3 4.5 2.4 2.6 1.2 3.8-1.9 0.5 2.7z">
+    </path>
+    <path iso2="ME" name="Montenegro" d="M1090.6 227.2l-0.8 1.4-1.4 0.6-0.4-1.2-1.9 3.1 0.5 2.1-1.1-0.5-1.7-2.1-2.3-1.3 0.5-1 0.4-3.5 1.6-1.5 0.9-0.6 1.4 1.1 0.9 0.9 1.7 0.7 2.1 1.3-0.4 0.5z">
+    </path>
+    <path iso2="MN" name="Mongolia" d="M1496.2 181.5l4-1.2 5.7-0.8 5.4 0.9 6.6 2.9 4.9 3.2 4.6 0 6.8 1 3.6-1.6 5.9-1 4.4-4.4 3.4 0.7 3.9 2.1 5.6-0.6 0.6 4.7 0.3 6.3 2.8 2.5 2.3-0.8 5.5 1 2.5-2.3 5.2 2 7.2 4.4 0.8 2.2-4.4-0.7-6.8 0.8-2.5 1.8-1.3 4.2-6.4 2.4-3.2 3.4-5.9-1.3-3.2-0.6-0.5 4.1 2.9 2.4 1.9 2.1-2.4 2.2-2 3.4-4.9 2.2-7.6 0.2-7.2 2.2-4.4 3.4-3.3-1.9-6.2 0-9.4-3.9-5.6-0.9-6.4 0.9-11.3-1.5-5.6 0.2-4.7-3.8-5-5.8-3.4-0.7-8-4-7.2-0.8-6.5-1.1-3-2.8-1.4-7.3-5.8-5.1-8.2-2.3-5.7-3.3-3.3-4.4 4.7-1.1 6.7-5.3 5.9-2.9 5.3 1.9 5.2 0.1 4.8 2.9 5 0.2 8 1.6 2.4-4.4-4-3.6 1.3-6.4 7 2.5 4.8 0.8 6.7 1.6 3.6 4.6 8.5 2.6z">
+    </path>
+    <path iso2="MZ" name="Mozambique" d="M1166.7 673.5l-4.1 0-0.3-2.9-0.6-2.9-0.4-2.3 1.4-7.1-1.1-4.6-2.2-9 6.2-7.3 1.7-4.6 0.8-0.6 0.9-3.8-0.8-1.9 0.4-4.8 1.3-4.4 0.4-8.2-2.8-2-2.7-0.5-1.1-1.6-2.6-1.3-4.7 0.1-0.2-2.4-0.4-4.6 17.2-5.3 3.2 3.1 1.5-0.6 2.2 1.6 0.2 2.6-1.3 3 0.2 4.5 3.5 4 1.9-4.5 2.5-1.3-0.1-8.3-2.2-4.6-1.9-2.1-0.4 0-0.6-7.3 1.5-6.1 2.2-0.2 6.7 1.8 1.5-0.8 3.9-0.2 2.1-1.9 3.4 0.1 6.2-2.5 4.6-3.7 0.9 2.8-0.5 6.4 0.5 5.7-0.2 10 0.8 3.1-1.9 4.6-2.4 4.5-3.7 4-5.3 2.4-6.5 3.1-6.6 6.9-2.2 1.2-4.2 4.6-2.3 1.4-0.8 4.6 2.4 4.9 0.9 3.7 0 2 1-0.4-0.5 6.3-1.1 3 1.2 1.1-1 2.7-2.4 2.3-4.7 2.1-6.9 3.5-2.5 2.4 0.3 2.7 1.3 0.4-0.7 3.4z">
+    </path>
+    <path iso2="MR" name="Mauritania" d="M959.2 341.5l-8.5 0.1 2.4 27.7 2.5 27.7 1 0.8-1.3 4.5-22.5 0.1-0.9 1.4-2.1-0.4-3.2 1.3-3.9-1.8-1.8 0.1-1 3.8-1.9 1.2-3.6-4.4-3.4-4.8-3.6-1.7-2.7-1.8-3.1 0-2.8 1.4-2.7-0.5-2 2-0.4-3.4 1.6-3.2 0.8-6-0.4-6.4-0.6-3.2 0.6-3.2-1.4-3-2.8-2.8 1.3-2.1 21.7 0-0.9-9.3 1.5-3.3 5.2-0.5 0.2-16.5 18 0.4 0.2-9.8 20.5 15.6z">
+    </path>
+    <path iso2="MW" name="Malawi" d="M1182.3 588.9l0.4 0 1.9 2.1 2.2 4.6 0.1 8.3-2.5 1.3-1.9 4.5-3.5-4-0.2-4.5 1.3-3-0.2-2.6-2.2-1.6-1.5 0.6-3.2-3.1-2.9-1.6 2-6 1.8-2.2-0.9-5.4 1.3-5.2 1-1.7-1.3-5.4-2.6-2.9 5.5 1.2 1 1.7-0.1 0.8 1.8 4.1 0.2 7.7-1.8 3.6 1.6 4.7-0.2 2.8 1.2 1.9-0.1 2.4 0.9 1.4 1-1.6 1.9 2.5 0.2-0.8-1-3.4-1.1-0.3-0.1-0.9z">
+    </path>
+    <path iso2="MY" name="Malaysia" d="M 1564.3 461.9 1565.7 462.5 1569.2 466.4 1571.7 470.7 1572.3 475 1571.8 477.9 1572.4 480.1 1572.9 483.9 1575 485.7 1577.3 491.4 1577.3 493.5 1573.3 494 1567.8 489.2 1561 484.1 1560.2 480.8 1556.8 476.5 1555.8 471.2 1553.6 467.7 1554 463 1552.6 460.3 1553.5 459.2 1558.3 462 1558.9 465.3 1562.6 464.5 1564.3 461.9 ZM 1654.1 475.3 1649.1 474.2 1642.6 474.2 1640.9 481.5 1638.8 483.7 1636.2 492.6 1631.6 494 1626.2 492.2 1623.5 492.8 1620.2 496 1616.6 495.6 1612.9 496.9 1609 493.2 1608 488.9 1612.2 491.1 1616.5 489.9 1617.5 484.5 1619.9 483.3 1626.7 481.9 1630.5 476.8 1633.1 472.8 1635.9 476.1 1637 473.9 1639.7 474.1 1639.8 470 1639.9 466.8 1644 462.4 1646.6 457.4 1648.9 457.3 1652 460.6 1652.4 463.4 1656.2 465.2 1661 467.1 1660.8 469.6 1657 469.9 1658.1 473.1 1654.1 475.3 Z">
+    </path>
+    <path iso2="NA" name="Namibia" d="M1116.2 614.3l4.6-1.4 3.6 0.3 2.2 1.5 0 0.5-3.2 1.5-1.7 0-3.7 2.5-2-2.7-8.7 2.3-4.2 0.2-0.8 22.9-5.5 0.2-0.6 18.7-1.1 23.7-5 3.3-2.9 0.5-3.4-1.2-2.5-0.5-0.8-2.7-2-1.8-2.8 3.2-3.9-4.9-2-4.6-1-6.3-1.2-4.6-1.6-9.9 0.1-7.7-0.6-3.5-2.1-2.7-2.8-5.3-2.8-7.7-1.1-4-4.4-6.3-0.3-4.9 2.7-1.2 3.4-1.1 3.6 0.2 3.3 2.9 0.8-0.5 22.7-0.2 3.8 3 13.5 0.9 10.4-2.6z">
+    </path>
+    <path iso2="NE" name="Niger" d="M1068.6 355l1.6 10 2.2 1.7 0.1 2 2.4 2.2-1.2 2.8-1.8 13-0.2 8.4-7 6-2.3 8.5 2.4 2.4 0 4.1 3.7 0.1-0.6 3.1-1.5 0.3-0.2 2.1-1 0.1-3.9-7-1.4-0.3-4.3 3.6-4.4-1.9-3-0.3-1.6 0.9-3.3-0.2-3.3 2.7-2.9 0.2-6.8-3.3-2.7 1.5-2.9-0.1-2.1-2.4-5.6-2.4-6.1 0.8-1.4 1.3-0.8 3.7-1.6 2.6-0.4 5.8-4.3-3.7-2 0-1.9 1.9 0.1-4.4-6.5-1.5-0.2-3.1-3.1-4.2-0.8-2.9 0.5-3.1 3.6-0.3 2-2.3 7.7-0.5 5-1 0.4-4 3.1-4.3-0.1-14.8 7.8-2.8 16-12.6 18.8-12.3 8.8 2.8 3.2 3.5 3.8-2.4z">
+    </path>
+    <path iso2="NG" name="Nigeria" d="M1066.2 421.7l2.3 2.5-0.6 1.2-0.3 2.1-4.7 5-1.4 4.1-0.8 3.3-1.2 1.5-1.1 4.5-3 2.6-0.8 3.2-1.3 2.6-0.5 2.7-3.9 2.2-3.2-2.7-2.1 0.1-3.4 3.8-1.6 0-2.7 6.2-1.4 4.6-5.9 2.3-2.1-0.3-2.2 1.4-4.5-0.1-3.1-4.1-1.9-4.6-4-4.2-4.2 0-5 0 0.3-10.3-0.2-4.1 1.1-4 1.7-2 2.8-4-0.6-1.7 1.1-2.6-1.3-3.8 0.2-2.1 0.4-5.8 1.6-2.6 0.8-3.7 1.4-1.3 6.1-0.8 5.6 2.4 2.1 2.4 2.9 0.1 2.7-1.5 6.8 3.3 2.9-0.2 3.3-2.7 3.3 0.2 1.6-0.9 3 0.3 4.4 1.9 4.3-3.6 1.4 0.3 3.9 7 1-0.1z">
+    </path>
+    <path iso2="NI" name="Nicaragua" d="M519.6 405.5l-0.5 0.7-0.5 1.4 0.4 2.3-1.5 2.2-0.8 2.6-0.5 2.8 0.2 1.7-0.1 2.9-0.9 0.6-0.7 2.8 0.2 1.7-1.2 1.6 0.1 1.7 0.8 1.1-1.4 1.4-1.7-0.5-0.8-1.3-1.8-0.5-1.3 0.8-3.6-1.7-0.9 0.8-1.8-2-2.5-2.6-1.1-2.1-2.2-2.1-2.5-2.9 0.7-1 0.8 1 0.5-0.4 1.8-0.3 0.8-1.5 0.8 0 0.2-3.2 1.3-0.1 1.2 0 1.4-1.7 1.5 1.3 0.6-0.8 1.2-0.8 2.1-1.7 0.2-1.4 0.5 0.1 0.9-1.5 0.6-0.2 0.9 1 1.1 0.2 1.3-0.8 1.4 0 2-0.8 0.9-0.9 1.9 0.1z">
+    </path>
+    <path iso2="NO" name="Norway" d="M 1113.7 67.5 1107.3 69.6 1104.1 70.1 1104.9 66.3 1099.1 64.2 1093.2 66 1092.1 70 1088.7 72.4 1084 71.1 1078.7 71.3 1073.6 68.5 1071.4 69.9 1068.8 70.1 1068.9 73.7 1060.9 72.8 1060.3 75.9 1056.3 75.9 1054 79.8 1050.6 85.9 1044.9 93.8 1046.7 95.8 1045.4 98 1041.1 97.9 1038.7 103.3 1039.7 111 1042.8 113.9 1042 120.8 1038.6 124.8 1036.8 128.2 1033.5 124.6 1024.9 131.4 1018.8 132.8 1012.3 129.8 1010.5 123.5 1008.5 110 1012.5 106.3 1023.8 101.4 1031.9 95.5 1039.1 87.7 1048 77 1054.4 72.9 1064.7 66.1 1073.2 63.7 1079.9 64 1085.1 59.6 1092.5 59.8 1099.5 58.8 1113.2 62.7 1108.3 64.1 1113.7 67.5 ZM 1076.6 25.2 1069 27.1 1062.2 26 1064.4 24.8 1061.8 23.3 1069.1 22.4 1071 24.1 1076.6 25.2 ZM 1051 16.7 1063.6 20.1 1055 21.9 1053.8 25.3 1050.8 26.2 1049.9 30.2 1045.5 30.4 1037 27.5 1040 25.8 1034.3 24.4 1026.6 20.5 1023.4 17 1032.7 15.4 1035 16.9 1040 16.9 1041 15.4 1046.2 15.2 1051 16.7 ZM 1075.4 13.7 1082.8 15.2 1078.4 17.6 1068.3 18.1 1057.6 17.3 1056.6 16.1 1051.5 16.1 1047.2 14.1 1057.7 12.9 1063.1 13.9 1066.2 12.6 1075.4 13.7 Z">
+    </path>
+    <path iso2="NP" name="Nepal" d="M1469 322.9l0.2 2.7 1.5 4.1-0.1 2.5-4.6 0.1-6.9-1.5-4.3-0.6-3.8-3.2-7.7-0.9-7.8-3.6-5.8-3.1-5.8-2.4 0.9-6 2.8-3 1.9-1.5 4.8 2 6.4 4.2 3.3 0.9 2.5 3.1 4.5 1.2 5 2.9 6.5 1.4 6.5 0.7z">
+    </path>
+    <path iso2="OM" name="Oman" d="M 1283.8 394.9 1281.6 390.4 1276.4 379.8 1292.7 373.4 1295.3 360.6 1292.3 356 1292.3 353.4 1293.6 350.8 1293.4 348.2 1295.8 346.9 1294.7 346 1294.7 341.8 1297.5 341.8 1300.5 346.2 1303.8 348.5 1307.9 349.4 1311.3 350.5 1314.2 354.2 1315.9 356.3 1317.9 357.2 1318.1 358.6 1316.4 362.4 1315.7 364.2 1313.5 366.3 1311.8 370.7 1309.3 370.3 1308.3 371.9 1307.6 375.1 1308.7 379.4 1308.2 380.2 1305.7 380.2 1302.4 382.6 1302.1 385.7 1300.9 387.1 1297.4 387 1295.4 388.6 1295.6 391.2 1293 393 1289.9 392.4 1286.3 394.6 1283.8 394.9 ZM 1296.2 336.7 1294.9 334.5 1296.3 332.4 1297 332.9 1296.8 335.6 1296.2 336.7 Z">
+    </path>
+    <path iso2="PK" name="Pakistan" d="M1401.6 273.9l-3.8 5.4-5.7 1-8.5-1.6-2 2.8 3.3 5.6 2.9 4.4 5.1 3.1-3.8 3.7 1 4.6-3.9 6.5-2.2 6.5-4.5 6.7-6.5-0.5-4.9 6.8 4 2.8 1.4 5 3.5 3.2 1.8 5.5-12.1 0-3.2 4.3-4.2-1.6-2.2-4.6-4.9-4.9-10 1.2-9 0.1-7.6 0.9 1.1-7.4 7.5-3.4-0.9-2.9-2.7-1.1-1-5.6-5.7-2.8-2.8-3.9-3.2-3.4 9.6 3.3 5.3-1 3.4 0.8 0.9-1.4 3.9 0.6 6.6-2.7-0.8-5.4 2.3-3.7 4.1 0 0.2-1.7 4-0.9 2.1 0.6 1.8-1.8-1.1-3.9 1.4-3.8 3.1-1.7-3.1-4.2 5.2 0.2 0.9-2.3-0.8-2.5 2-2.7-1.4-3.2-1.9-2.7 2.4-2.8 5.3-1.3 5.9-0.8 2.4-1.1 2.9-0.8 4.7 3 2.9 5 9.5 2.5z">
+    </path>
+    <path iso2="PA" name="Panama" d="M549.3 446.2l-0.7 0.9 1.1 3.8-1.1 1.9-1.8-0.5-0.9 3.1-1.8-1.8-1-3.5 1.4-1.7-1.4-0.4-0.9-2.1-2.8-1.8-2.4 0.4-1.3 2.2-2.4 1.6-1.2 0.2-0.6 1.4 2.5 3.5-1.6 0.8-0.8 0.9-2.7 0.4-0.8-3.9-0.8 1.1-1.8-0.4-1-2.5-2.3-0.5-1.5-0.7-2.4 0-0.2 1.4-0.6-1 0.3-1.3 0.6-1.3-0.2-1.1 0.9-0.8-1.1-0.9 0.1-2.6 2.2-0.6 1.9 2.3-0.2 1.4 2.2 0.3 0.6-0.6 1.5 1.6 2.8-0.5 2.5-1.6 3.5-1.3 2-1.9 3.1 0.4-0.2 0.6 3.1 0.2 2.4 1.2 1.8 1.9 2 1.8z">
+    </path>
+    <path iso2="PE" name="Peru" d="M590.5 529.4l-5.1-0.3-0.8 1-4.6 1.2-6.3 4.4-0.3 3-1.4 2.2 0.7 3.5-3.4 1.8 0.2 2.8-1.5 1.1 2.6 5.8 3.3 3.9-1 2.8 3.8 0.3 2.3 3.5 5 0.1 4.4-3.7 0.1 9.7 2.6 0.7 3.2-1.1 5.5 10.4-1.1 2.1 0 4.6 0.3 5.4-1.9 3.2 1.2 2.4-1.1 2.2 2.9 5.4-2.9 6.9-1.1 3.3-2.8 1.6-5.9-3.7-0.8-2.6-11.7-6.4-10.7-7.1-4.7-3.9-2.8-5.3 0.8-1.9-5.4-8.4-6.4-11.8-6-12.8-2.4-3-2-4.7-4.6-4.2-4.1-2.6 1.7-2.8-3-6.2 1.7-4.5 4.4-4 0.7 2.7-1.6 1.5 0.3 2.3 2.3-0.5 2.3 0.7 2.5 3.3 3.1-2.7 0.9-4.3 3.4-5.6 6.7-2.5 6.1-6.8 1.7-4.1-0.8-4.9 1.5-0.6 3.8 3 1.8 3.1 2.6 1.6 3.5 6.7 4.2 0.9 3.1-1.7 2.1 1.1 3.4-0.6 4.4 3-3.5 6.6 1.7 0.1 2.9 3.4z">
+    </path>
+    <path iso2="PH" name="Philippines" d="M 1700.5 447.8 1701.4 452.1 1702 455.7 1700.4 461.5 1697.9 455 1695.5 458.3 1697.6 463 1696.2 466 1689.3 462.3 1687.4 457.6 1688.9 454.6 1685.1 451.5 1683.5 454.2 1680.9 453.9 1676.9 457.5 1675.9 455.6 1677.7 450.2 1681.1 448.4 1684 446 1686.2 448.9 1690.4 447.2 1691.1 444.3 1695.1 444.1 1694.3 439.2 1699.2 442.2 1699.9 445.4 1700.5 447.8 ZM 1685.9 435.8 1684.1 437.9 1682.7 442 1681.1 443.9 1677.2 439.5 1678.2 437.7 1679.5 435.9 1679.7 432 1682.8 431.6 1682.3 435.9 1685.9 429.7 1685.9 435.8 ZM 1655.6 442 1648.5 448.1 1650.9 443.6 1654.7 439.6 1657.7 435.2 1660 428.8 1661.6 434.1 1658.1 437.6 1655.6 442 ZM 1673.1 425.5 1676.7 427.5 1680.2 427.5 1680.4 430.1 1678.1 432.9 1674.7 434.8 1674.2 431.8 1674.3 428.5 1673.1 425.5 ZM 1693.2 423.7 1695.6 430.9 1691.1 429.2 1691.4 431.4 1693.2 435.3 1690.6 436.8 1690 432.2 1688.2 431.9 1687 428 1690.3 428.5 1690 426.1 1686 421.2 1691.4 421.3 1693.2 423.7 ZM 1670.2 417.9 1669.3 423.5 1666.6 420.3 1663.1 415.4 1667.9 415.6 1670.2 417.9 ZM 1663.7 383 1667.5 384.9 1668.9 383.2 1669.7 384.8 1669.3 387.5 1671.9 392.1 1671.3 397.4 1668.4 399.5 1668.3 404.7 1670.3 409.8 1673.3 410.5 1675.7 409.8 1683.2 413.3 1683.1 416.8 1685.2 418.4 1684.9 421.3 1680.2 418.2 1677.7 414.8 1676.5 417.2 1672.5 413.3 1667.5 414.3 1664.5 412.9 1664.4 410.2 1666 408.6 1664.1 407.1 1663.7 409.4 1660.4 405.7 1659.1 402.9 1658 396.8 1660.6 398.9 1659.5 388.8 1660.3 383 1663.7 383 Z">
+    </path>
+    <path iso2="PG" name="Papua New Guinea" d="M 1868.1 545.6 1866.5 546.3 1864.2 543.8 1862 539.7 1861.2 534.8 1862 534.2 1862.5 536.1 1864.1 537.6 1866.5 541.6 1869 543.8 1868.1 545.6 ZM 1846.7 537 1843.7 537.5 1842.7 539.3 1839.5 540.9 1836.5 542.4 1833.4 542.4 1828.9 540.5 1825.8 538.7 1826.4 536.7 1831.4 537.7 1834.6 537.2 1835.6 534.1 1836.5 533.9 1836.8 537.3 1840 536.9 1841.8 534.7 1845.1 532.4 1844.7 528.6 1848.1 528.5 1849.2 529.5 1848.8 533.1 1846.7 537 ZM 1782.9 560.4 1784.5 539.4 1785.5 518.5 1795.1 522.9 1805.4 526.6 1809.1 529.9 1812.1 533.1 1812.7 536.9 1821.9 540.9 1823 544.3 1817.8 545 1818.7 549.3 1823.4 553.5 1826.4 560.3 1829.7 560.1 1829.1 562.9 1833.4 564 1831.6 565.2 1837.3 567.9 1836.4 569.8 1832.6 570.2 1831.4 568.6 1826.7 567.8 1821.1 566.9 1817.1 562.8 1814.3 559.2 1811.8 553.6 1804.7 550.8 1799.8 552.6 1796.1 554.8 1796.4 559.5 1791.8 561.7 1788.7 560.6 1782.9 560.4 ZM 1853.6 530.7 1851.8 532.4 1850.9 528.6 1849.8 526.2 1847.3 524.1 1844.2 521.3 1840.2 519.4 1841.8 517.9 1844.8 519.7 1846.7 521.1 1849 522.6 1851.1 525.3 1853.2 527.4 1853.6 530.7 Z">
+    </path>
+    <path iso2="PL" name="Poland" d="M1079.9 154.8l5.9 0.7 8.8-0.1 2.5 0.7 1.4 1.9 0.6 2.7 1.7 2.3 0.4 2.4-2.8 1.3 1.9 2.8 0.5 2.8 3.2 5.4-0.3 1.7-2.3 0.7-3.8 5.2 1.6 2.8-1.1-0.4-5-2.4-3.5 0.9-2.4-0.6-2.8 1.3-2.7-2.2-1.9 0.9-0.3-0.4-2.6-3.1-3.7-0.3-0.7-2-3.4-0.7-0.6 1.6-2.8-1.3 0.2-1.7-3.7-0.5-2.5-2-2.4-3.9 0.2-2.2-1.5-3.3-1.9-2.1 1.2-1.7-1.4-3.1 3.1-1.8 7.1-2.8 5.8-2 4.8 1 0.6 1.5 4.6 0z">
+    </path>
+    <path iso2="KP" name="North Korea" d="M1660.3 229.9l1.4 1.1-2.2-0.4-1 2.2-0.3 2.1 2.8 4.6-1.9 1.4-0.3 1.1-0.9 1.9-2.9 1.1-1.4 1.7 1.3 2.7-0.3 0.7 2.6 1.1 4.4 2.8 0 1.5-2 0.4-3.6 0.4-0.6 2.8-2.5-0.2 0 0.6-3.2-1.2-0.1 1.2-1.3 0.5-0.7-1.2-1.7-0.6-1.9-1 0.1-2.8 0.9-0.8-1-1.1-0.4-3.5-0.9-1-3.4-0.7-3.4-1.7 2.1-4.1 3.9-3.4 1.1-4.6 3.6 2 4.6 0.3-2.8-3.4 6.4-2.7 0-3.6 5.5 3.8z">
+    </path>
+    <path iso2="PY" name="Paraguay" d="M662.5 631.4l2 3.5 0.4 8.7 5.9 1.3 2.2-1.3 3.9 1.8 1.2 1.9 1.1 5.9 0.8 2.4 2.1 0.3 2-1 2.1 1.1 0.3 3.6-0.3 3.8-0.7 3.7-0.3 5.6-4.3 5-4.2 1-6.3-1-5.8-1.7 4.2-9.8-1.1-2.8-5.9-2.5-7.3-4.8-4.6-1-11.3-10.4 1.5-7.7-0.2-3.5 2.1-5.6 9.6-1.9 5.2 0.1 5.4 3.3 0.3 2z">
+    </path>
+    <path iso2="PS" name="Palestine" d="M1178.3 293.8l0.4 4-0.6 1.9-2.5 0.8 0.1-1.7 1.3-0.9-1.5-0.7 0.7-4.2 2.1 0.8z">
+    </path>
+    <path iso2="QA" name="Qatar" d="M1270.1 343.7l-1.5 0.5-1.8-1.3-0.8-4.7 1.1-3.3 1.5-0.7 1.8 2 0.5 3.7-0.8 3.8z">
+    </path>
+    <path iso2="RO" name="Romania" d="M1118.9 193.1l1.6 0.7 1.8 1.8 2 2.6 3.4 3.8 0.6 2.7-0.2 2.7 1.3 2.9 2.4 1.2 2.3-1.1 2.4 1.1 0.4 1.7-2.3 1.3-1.6-0.6-0.4 7.7-3.1-0.7-4-2.3-5.9 1.5-2.3 1.6-7.6-0.4-4-0.9-1.9 0.4-1.8-2.6-1-1.1 1-1.1-1.3-0.7-1.5 1.4-3.1-1.9-0.7-2.6-3.2-1.4-0.8-2.1-3-2.4 3.9-1.2 2.6-4.3 1.9-4.2 2.9-1.3 2-1.4 3.2 0.7 3.2 0 2.5 1.6 1.6-1 3.6-0.6 1-1.5 2.1 0z">
+    </path>
+    <path iso2="RW" name="Rwanda" d="M1158.8 509.1l2.2 3.6-0.3 3.8-1.6 0.8-3.1-0.4-1.7 3.7-3.5-0.5 0.6-3.6 0.8-0.5 0.2-3.8 1.6-1.8 1.4 0.7 3.4-2z">
+    </path>
+    <path iso2="EH" name="Western Sahara" d="M938.9 324.3l-0.1 0.4-0.1 1.2-0.2 9.8-18-0.4-0.2 16.5-5.2 0.5-1.5 3.3 0.9 9.3-21.7 0-1.3 2.1 0.3-2.7 0.1 0 12.5-0.5 0.7-2.3 2.4-2.9 2-8.9 7.9-6.9 2.7-8.1 1.8-0.5 1.9-5 4.6-0.7 2 0.9 2.5 0 1.8-1.5 3.4-0.2-0.1-3.4 0.9 0z">
+    </path>
+    <path iso2="SA" name="Saudi Arabia" d="M1240.5 315l5 0.6 1.7 3.1 3.9-0.2 2.7 5.6 2.9 1.4 1.2 2.3 4 2.7 0.7 2.6-0.4 2.2 0.9 2.1 1.8 1.8 0.9 2.1 1 1.6 1.8 1.3 1.5-0.5 1.3 2.5 0.3 1.4 2.7 6.6 16.9 3.2 1-1.4 3 4.6-2.6 12.8-16.3 6.4-15.9 2.5-5 2.9-3.5 6.7-2.6 1.1-1.5-2.1-2.1 0.3-5.5-0.7-1.1-0.6-6.4 0.1-1.5 0.6-2.4-1.6-1.3 3.1 0.8 2.7-2.4 2.1-0.9-2.8-1.8-1.9-0.5-2.6-3.1-2.3-3.3-5.4-1.9-5.2-4.1-4.4-2.5-1.1-4.1-6.1-0.9-4.4 0-3.8-3.6-7.2-2.8-2.5-3-1.3-2.1-3.7 0.2-1.4-1.8-3.4-1.7-1.4-2.5-4.8-3.8-5.1-3.1-4.4-2.7 0 0.5-3.5 0.1-2.3 0.4-2.6 6.2 1.1 2.1-2 1.1-2.3 4.1-0.9 0.7-2.2 1.6-1-6-6.5 10.4-3.2 0.9-1 6.8 1.8 8.6 4.5 16.8 12.9 10.2 0.5z">
+    </path>
+    <path iso2="SD" name="Sudan" d="M1191 409.2l-0.7 5.5-2 6.4-3.3 3.1-2.3 5-0.5 2.6-2.6 1.8-1.5 6.7 0 0.8-0.8-0.2 0.1-3.2-0.8-2.2-2.9-2.5-0.9-4.6 0.6-4.8-2.6-0.4-0.4 1.4-3.4 0.4 1.5 1.8 0.5 3.9-3 3.5-2.7 4.6-2.9 0.7-4.8-3.7-2.1 1.3-0.5 1.8-2.9 1.3-0.2 1.3-5.6 0-0.8-1.3-4.1-0.3-2 1.1-1.6-0.5-2.9-3.8-1-1.7-4.1 0.9-1.5 2.9-1.3 5.8-2 1.2-1.7 0.7-0.5-0.3-1.9-1.9-0.4-2 0.8-2.6 0-2.7-3.3-4-0.7-2.7 0-1.6-2.1-1.9-0.1-3.7-1.3-2.5-1.9 0.4 0.5-2.4 1.4-2.6-0.7-2.7 1.8-2-1.2-1.5 1.3-3.9 2.5-4.8 4.8 0.5-1.1-25.5 0-2.7 6.4 0-0.5-12.8 22.3 0 21.5 0 22.1 0 2.1 6.3-1.2 1.1 1.2 6.7 2.5 7.6 2.2 1.6 3.2 2.4-2.7 3.6-4 1.1-1.7 2-0.3 4.2-2 9.5 0.7 2.5z">
+    </path>
+    <path iso2="SS" name="South Sudan" d="M1178.1 441.1l0.2 5-0.8 1.9-3 0.2-1.9 3.6 3.5 0.5 3 3.1 1 2.6 2.6 1.5 3.5 7-3.8 4.2-3.4 3.8-3.5 3-4 0-4.5 1.5-3.6-1.5-2.3 1.8-5.1-4.3-1.4-2.7-3.1 1.3-2.6-0.4-1.5 1.1-2.6-0.8-3.5-5.3-0.9-2-4.3-2.6-1.4-3.8-2.4-2.8-3.9-3.3-0.1-2.1-3.1-2.6-3.9-2.5 1.7-0.7 2-1.2 1.3-5.8 1.5-2.9 4.1-0.9 1 1.7 2.9 3.8 1.6 0.5 2-1.1 4.1 0.3 0.8 1.3 5.6 0 0.2-1.3 2.9-1.3 0.5-1.8 2.1-1.3 4.8 3.7 2.9-0.7 2.7-4.6 3-3.5-0.5-3.9-1.5-1.8 3.4-0.4 0.4-1.4 2.6 0.4-0.6 4.8 0.9 4.6 2.9 2.5 0.8 2.2-0.1 3.2 0.8 0.2z">
+    </path>
+    <path iso2="SN" name="Senegal" d="M918 408l0.2 4 1.1 3.7 2 1.8 0.5 2.4-0.3 2-0.8 0.4-3.1-0.5-0.4 0.7-1.2 0.1-4.1-1.5-2.7-0.1-10.4-0.3-1.5 0.8-1.9-0.2-3 1-0.8-4.9 5.1 0.1 1.4-0.9 1 0 2.1-1.5 2.4 1.3 2.4 0.2 2.5-1.5-1.1-1.8-1.9 1-1.7 0-2.2-1.6-1.8 0.1-1.3 1.6-6.1 0.1-2.3-5-2.7-2.2 2.5-1.3 2.8-4.5 1.4-3.3 2-2 2.7 0.5 2.8-1.4 3.1 0 2.7 1.8 3.6 1.7 3.4 4.8 3.6 4.4z">
+    </path>
+    <path iso2="SL" name="Sierra Leone" d="M928.5 447.9l-2.6 3-2.6 3.4-0.3 1.9-1.4 2.1-1.5-0.5-4-2.6-3-3.4-0.9-2.4-0.7-4.7 3.1-2.9 0.6-1.7 1-1.4 1.6-0.2 1.3-1.2 4.5 0 1.6 2.3 1.2 2.7-0.2 1.9 0.9 1.7-0.1 2.3 1.5-0.3z">
+    </path>
+    <path iso2="SV" name="El Salvador" d="M492.5 415.9l-0.7 1.5-3.3-0.1-2-0.6-2.2-1.3-3-0.4-1.5-1.4 0.3-0.9 2-1.6 1.2-0.7-0.3-0.8 1.4-0.4 1.6 0.6 1.1 1.2 1.6 1.1 0.1 0.8 2.5-0.7 1.2 0.4 0.7 0.7-0.7 2.6z">
+    </path>
+    <path iso2="RS" name="Serbia" d="M1102 218.2l-1.1 1.4 0.7 2.4 2.8 2.7-1.8 2-0.6 2 0.6 0.8-0.7 0.8-2.4 0.2-1.7 0.3-0.3-0.5 0.6-0.7 0.4-1.6-0.7 0.1-1.1-1.2-0.9-0.3-0.8-1-1-0.4-0.8-0.9-0.9 0.4-0.5 2.1-1.2 0.4 0.4-0.5-2.1-1.3-1.7-0.7-0.9-0.9-1.4-1.1 1.1-0.3 0.5-2.9-2.7-2.5 1.1-2.8-1.9 0.1 1.7-2.4-1.7-1.8-1.5-2.5 3.7-1.6 3.2 0.3 3 2.4 0.8 2.1 3.2 1.4 0.7 2.6 3.1 1.9 1.5-1.4 1.3 0.7-1 1.1 1 1.1z">
+    </path>
+    <path iso2="SR" name="Suriname" d="M681 464.9l-3.1 5.5 0.3 4.4 2.2 3.8-1.1 2.7-0.5 3-1.5 2.7-3.2-1.4-2.7 0.7-2.3-0.6-0.6 1.9 1 1.2-0.6 1.4-3.1-0.6-3.3-5.6-0.7-3.6-1.8 0-2.4-4.6 1.1-3.4-0.3-1.5 3.5-1.6 1-5.8 6.8 1.3 0.6-1.2 4.6-0.5 6.1 1.8z">
+    </path>
+    <path iso2="SK" name="Slovakia" d="M1098.1 187.7l-1.2 1.7-0.7 2.5-1 0.6-5.5-1.9-1.6 0.4-1 1.5-2.3 0.8-0.6-0.4-2.3 0.9-1.9 0.2-0.3 1.3-4.1 0.7-1.9-0.6-2.7-1.7-0.7-2.1 0.3-0.8 0.6-1.4 2.2 0.1 1.6-0.6 0.1-0.6 0.9-0.3 0.2-1.4 1.1-0.3 0.7-1.1 1.5 0 0.3 0.4 1.9-0.9 2.7 2.2 2.8-1.3 2.4 0.6 3.5-0.9 5 2.4z">
+    </path>
+    <path iso2="SI" name="Slovenia" d="M1069.8 203.9l-3.9 1.7-0.3 2.5-1.7 0.7 0.1 1.7-2-0.1-1.8-1-0.8 1-3.6-0.2 1.1-0.5-1.4-2.7 0.4-3.1 4.2 0.5 2.4-1.5 4.4-0.1 0.9-1.1 0.8 0.1 1.2 2.1z">
+    </path>
+    <path iso2="SE" name="Sweden" d="M1088.2 87l-7 1.6-3.5 3.9 1.3 3.5-6.2 4.5-7.8 5-2.1 8.1 3.7 4.1 4.8 3.3-3.3 6.6-4.6 1.4-0.6 10-2.1 5.7-5.7-0.6-2.2 4.8-5.5 0.3-1.9-5.7-4.5-6.9-4.2-8.4 1.8-3.4 3.4-4 0.8-6.9-3.1-2.9-1-7.7 2.4-5.4 4.3 0.1 1.3-2.2-1.8-2 5.7-7.9 3.4-6.1 2.3-3.9 4 0 0.6-3.1 8 0.9-0.1-3.6 2.6-0.2 6 2.7 7.2 3.7 1.8 8.5 1.8 2.2z">
+    </path>
+    <path iso2="SZ" name="Swaziland" d="M1161.7 667.7l0.6 2.9 0.3 2.9-1.4 2.8-3.2 0.7-3.1-3.5 0.1-2.2 1.7-2.4 0.6-1.9 1.7-0.4 2.7 1.1z">
+    </path>
+    <path iso2="SY" name="Syria" d="M1195 287.5l-9.7 6.9-6.3-2.6-0.1 0 0.6-1-0.4-2.6 0.9-3.5 2.7-2.5-1.2-2.5-2.5-0.3-1.1-4.9 1-2.7 1.3-1.4 1.2-1.4-0.2-3.5 1.9 1.2 5.6-1.8 3 1.2 4.4 0 5.7-2.4 2.9 0.1 5.9-1-2.1 4-2.7 1.6 1.2 4.7-1 7.7-11 6.7z">
+    </path>
+    <path iso2="TD" name="Chad" d="M1119.2 376.1l1.1 25.5-4.8-0.5-2.5 4.8-1.3 3.9 1.2 1.5-1.8 2 0.7 2.7-1.4 2.6-0.5 2.4 1.9-0.4 1.3 2.5 0.1 3.7 2.1 1.9 0 1.6-3.6 1.1-2.8 2.6-4 7-5.2 3-5.5-0.4-1.6 0.6 0.6 2.2-2.9 2.3-2.4 2.5-7.1 2.4-1.4-1.4-1-0.2-1 1.7-4.6 0.5 0.8-1.8-1.8-4.4-0.8-2.6-2.5-1.1-3.4-3.8 1.2-3 2.6 0.6 1.6-0.4 3.2 0-3.2-5.8 0.2-4.3-0.5-4.2-2.3-4.1 0.6-3.1-3.7-0.1 0-4.1-2.4-2.4 2.3-8.5 7-6 0.2-8.4 1.8-13 1.2-2.8-2.4-2.2-0.1-2-2.2-1.7-1.6-10 5.5-3.5 22.5 12.3 22.6 12.3z">
+    </path>
+    <path iso2="TG" name="Togo" d="M991.4 431.2l-0.7 3.4 1.7 1.9 2 2.2 0.2 3.2 1.2 1.3-0.3 14.8 1.4 4.4-4.5 1.4-1.3-2.3-1.5-4.1-0.5-3.2 1.3-5.7-1.4-2.4-0.6-5 0-4.7-2.3-3.3 0.4-2 4.9 0.1z">
+    </path>
+    <path iso2="TH" name="Thailand" d="M1577.5 410.2l-5.3-0.9-7.1 1.2-3.1 5.3 2.1 7.8-5.3-3-4.8 0.2 0.3-5.1-4.9 0 0.2 7.1-2.2 9.4-1.4 5.7 0.7 4.6 3.7 0.2 2.7 5.9 1.3 5.5 3.4 3.7 3.4 0.7 3.1 3.4-1.7 2.6-3.7 0.8-0.6-3.3-4.8-2.8-0.9 1.1-2.3-2.4-1.2-3.2-3.2-3.6-2.9-3.1-0.7 3.8-1.3-3.6 0.4-4 1.2-6.1 2.2-6.6 2.6-6-2.7-5.9-0.2-3-1-3.6-4.3-5.1-1.8-3.2 1.8-1.2 1.4-5.5-2.9-4.3-4.1-4.7-3.5-5.6 2.2-1.2 1.5-6.9 3.9-0.3 2.8-2.8 3-1.5 2.7 2 0.9 3.9 3.8 0.3-0.4 6.7 1 5.8 5.3-3.8 1.9 1.1 3.2-0.2 0.8-2.2 4.3 0.4 5 5.2 1.3 6.4 5.3 5.6 0.4 5.4-1.5 2.9z">
+    </path>
+    <path iso2="TJ" name="Tajikistan" d="M1357 243.6l-1.4 1.9-6-1 0.6 3.6 5.5-0.5 7.1 2.1 9.6-1 3.1 6 1.5-0.7 3.7 1.5 0.5 2.5 1.8 3.6-5.4 0-3.8-0.5-2.5 2.9-2.2 0.6-1.5 1.4-2.7-2.1-0.9-5.4-1.7-0.3 0.1-2-3.3-1.4-1.7 2.2 0.2 2.6-0.6 0.9-3.2-0.1-0.9 2.9-2.1-1.2-3.4 2-1.8-0.7 1.3-6.5-2.4-4.8-4.2-1.5 0.6-2.8 4.4 0.3 1.5-3.5 0.5-4.1 6.5-1.5-0.2 3 1.3 1.7 2.1-0.1z">
+    </path>
+    <path iso2="TM" name="Turkmenistan" d="M1338.3 262l-1.6-0.2-2.9-1.7-0.3 2.2-4.2 1.3 0.2 5.1-2.6 2-4 0.9-0.4 2.9-3.9 0.9-5.9-2.5-1.7-5.3-4-0.3-7.3-5.6-4.3-0.7-6.6-3.3-3.9-0.6-2 1.2-3.6-0.2-3 3.7-4.4 1.2-1.9-4.5-0.6-6.7-4.6-2.2 0.4-4.3-3.5-0.4-0.1-5.4 5.3 1.6 4.1-2-4.7-3.9-2.4-3.6-3.8 1.6 0.6 4.7-2.6-4.1 1.8-2.2 5.6-1.3 3.9 1.8 4.8 5 2.6-0.3 5.9-0.1-1.7-3.2 3.8-2.2 3.4-3.7 7.9 3.4 1.9 5 2.3 1.3 5.5-0.3 2.1 1.2 4.3 6.6 7.1 4.4 4.2 3 6.3 3.1 7.7 2.8 0.8 3.9z">
+    </path>
+    <path iso2="TL" name="East Timor" d="M1692.7 562.1l0.1-1.9-0.5-1.3 0.8-1.5 4.9-1.4 4-0.3 1.8-0.8 2.1 0.8-2.2 1.8-6.1 2.8-4.9 1.8z">
+    </path>
+    <path iso2="TN" name="Tunisia" d="M1048.2 289.1l-0.1 4.9-2.6 1.8-1.6 2.1-3.6 2.5 0.6 2.6-0.4 2.8-2.6 1.4-2.6-11.5-3.4-2.6-0.1-1.5-4.5-3.9-0.6-4.8 3.2-3.6 1.1-5.3-1-6.1 1-3.3 5.7-2.5 3.7 0.7 0 3.3 4.4-2.4 0.4 1.2-2.5 3.2 0.1 2.9 1.9 1.6-0.5 5.6-3.5 3.2 1.2 3.5 2.8 0.1 1.4 3.1 2.1 1z">
+    </path>
+    <path iso2="TR" name="Turkey" d="M 1201.7 235.3 1207.2 235 1212.8 238.2 1214.1 240.4 1214.2 243.5 1218.4 245.1 1220.8 246.9 1217.5 248.8 1220.4 256.1 1219.7 258.1 1223.5 263.2 1221.1 264.3 1219 262.7 1212.7 261.8 1210.6 262.8 1204.7 263.8 1201.8 263.7 1196.1 266.1 1191.7 266.1 1188.7 264.9 1183.1 266.7 1181.2 265.5 1181.4 269 1180.2 270.4 1178.9 271.8 1176.6 268.9 1178.3 266.5 1175.1 267.1 1170.5 265.6 1167.3 269.3 1159.3 270 1154.6 266.6 1148.9 266.4 1147.9 269 1144.3 269.8 1138.9 266.4 1133.1 266.5 1129.3 260.1 1125.1 256.6 1127.1 251.6 1123.5 248.5 1128.6 242.4 1136.6 242.2 1138.2 237.3 1148.2 238.2 1153.8 234.1 1159.6 232.3 1168.1 232.1 1177.9 236.6 1185.8 239.1 1191.6 238.1 1196.2 238.7 1201.7 235.3 ZM 1121.9 239.9 1123.1 239.2 1124.2 235.2 1121.5 233.5 1126.5 231.5 1131.1 232.3 1132 234.8 1136.8 236.8 1136.1 238.4 1129.9 238.7 1127.9 240.7 1124 244.1 1122 241.2 1121.9 239.9 Z">
+    </path>
+    <path iso2="TW" name="Taiwan" d="M1657.9 355.5l-1.4 5.3-4-5.5-1.5-4.7 1.9-6.3 3.3-4.9 3 1.9-0.1 3.9-1.2 10.3z">
+    </path>
+    <path iso2="TZ" name="Tanzania" d="M1167 508.4l-0.2 3.9-1.1 4.5 1.6 2.5 2.5-1.5 3.3-0.4 0.7 0.8 3.3-1.6-2.3-2.2 1.9-2.9 2.8-2.9 20.5 13.1 0.3 3.7 8.1 6.4-2.8 8 0.3 3.6 3.5 2.3 0.2 1.7-1.7 3.9 0.3 1.9-0.4 3.1 1.8 4 2.2 6.4 2 1.4-4.6 3.7-6.2 2.5-3.4-0.1-2.1 1.9-3.9 0.2-1.5 0.8-6.7-1.8-2.2 0.2 0.1-0.1-1.8-2.4-0.3-6.8-2.9-3.4-0.4 1.2-1-1.7-5.5-1.2-3.2-1.9-3.6-1.1-2.2-1.1-0.3-0.2-2.7-6.6-0.4-3.9-4.5-4.4 1.4-2.4-1.1-2.6 0.2-2.7-1-0.9 0.3-2.8 0.6-0.1 2-2.3 2.3-3.4 1.4-1.3 0-2.1-1.2-1.5-0.3-2.5 1.6-0.8 0.3-3.8-2.2-3.6 2-0.8 6.2 0.1z">
+    </path>
+    <path iso2="UG" name="Uganda" d="M1179 474.5l2.7 4.5 0.7 3.2 2.6 7.4-2.1 4.7-2.8 4.2-1.6 2.6 0 0.3-0.2-0.4-3-1.3-2.4 1.6-3.6 0.9-2.6 3.7 0.3 2.5-6.2-0.1-2 0.8-3.4 2-1.4-0.7 0.1-4.8 1.3-2.5 0.3-5.1 1.2-3 2.2-3.3 2.1-1.8 1.9-2.2-2.3-0.9 0.3-7.5 2.3-1.8 3.6 1.5 4.5-1.5 4 0 3.5-3z">
+    </path>
+    <path iso2="UA" name="Ukraine" d="M1157.2 174.6l2.3 2.7 0.1 1.2 6.7 2.2 3.6-1 3.6 2.9 2.9-0.1 7.7 2 0.4 1.9-1.3 3.2 1.8 3.5-0.3 2.1-4.8 0.4-2.2 1.8 0.4 2.7-3.9 0.5-3 2.1-4.6 0.3-4 2.4 1 3.9 2.8 1.5 5.1-0.4-0.6 2.3-5.4 1.1-6.3 3.6-3.1-1.3 0.7-2.9-5.9-1.9 0.7-1.2 4.6-2.1-1.7-1.4-8.1-1.6-0.8-2.4-4.5 0.8-1.3 3.5-3.3 4.6-2.4-1.1-2.3 1.1-2.4-1.2 1.2-0.7 0.6-2.1 1.1-2.1-0.6-1.1 1-0.5 0.6 0.9 3 0.2 1.3-0.5-1-0.6 0.2-1-2-1.6-1.1-2.6-2-1 0.1-2.1-2.6-1.7-2-0.3-4-1.9-3.2 0.6-1.1 0.9-2.1 0-1 1.5-3.6 0.6-1.6 1-2.5-1.6-3.2 0-3.2-0.7-2 1.4-0.5-1.7-3-1.7 0.7-2.5 1.2-1.7 1.1 0.4-1.6-2.8 3.8-5.2 2.3-0.7 0.3-1.7-3.2-5.4 2.3-0.3 2.4-1.6 3.8-0.2 4.9 0.5 5.7 1.5 3.9 0.1 1.9 0.9 1.7-1.1 1.5 1.5 4.3-0.3 2.1 0.6-0.3-3.1 1.3-1.4 4.1-0.3 1.8 0.2 1-1.4 1.5 0.3 4.9-0.6 3.8 3.5-0.9 1.3 0.8 1.9 3.9 0.3z">
+    </path>
+    <path iso2="UY" name="Uruguay" d="M699.7 718.6l-1.6 4.1-5.4 3.5-4.2-1.3-2.8 0.7-5.5-2.7-3.6 0.2-3.9-3.6-0.4-4.1 0.9-1.4-1.2-6.4 0.4-6.6 0.5-5.2 3.4-0.7 6.3 5 1.9-0.2 6.3 4.1 4.8 3.6 3.8 4.3-1.8 3.1 2.1 3.6z">
+    </path>
+    <path iso2="UZ" name="Uzbekistan" d="M1352.7 230.7l1.7 0.6-3 4.1 4.6 2.4 3.2-1.6 7.2 3.4-5.3 4.6-4.1-0.6-2.1 0.1-1.3-1.7 0.2-3-6.5 1.5-0.5 4.1-1.5 3.5-4.4-0.3-0.6 2.8 4.2 1.5 2.4 4.8-1.3 6.5-4.3-1.4-3 0-0.8-3.9-7.7-2.8-6.3-3.1-4.2-3-7.1-4.4-4.3-6.6-2.1-1.2-5.5 0.3-2.3-1.3-1.9-5-7.9-3.4-3.4 3.7-3.8 2.2 1.7 3.2-5.9 0.1-6.2-23.4 12-3.7 1.1 0.5 9.2 4.5 4.8 2.4 6.6 5.7 5.7-0.9 8.6-0.5 7.6 4.6 1.5 6.4 2.6 0.1 2.5 5.2 6.7 0.2 2.3 3 2 0 0.9-4.6 5.4-4.4 2.6-1.2z">
+    </path>
+    <path iso2="VE" name="Venezuela" d="M648.7 448.1l-4.7 3.8-0.5 2.3 1.8 2.4-1.4 1.2-3.5 1 0 3-1.6 1.8 3.7 4.8 0.7 1.8-2.1 2.5-6.4 2.4-4.1 1-1.7 1.5-4.5-1.6-4.1-0.8-1.1 0.6 2.5 1.6-0.3 4.3 0.7 4.1 4.8 0.5 0.3 1.4-4.1 1.8-0.7 2.7-2.4 1.1-4.2 1.5-1.1 2-4.4 0.4-3.1-3.4-1.6-6.4-1.5-2.3-2-1.4 2.9-3.2-0.2-1.4-1.5-1.9-1.1-4.3 0.6-4.6 1.3-2.2 1.2-3.4-2-1.1-3.2 0.7-4.1-0.3-2.3 0.7-3.8-5.6-3.3-0.8-7.3 0.6-1.2-2.2-1.4-0.5-0.1-1.4 0.7-2.4-0.3-2.5-1.2-1.5-0.6-2.9-2.9-0.4 1.8-3.8 0.9-4.6 1.8-2.4 2.3-1.8 1.6-3.2 3.7-1.1-0.2 1.5-3.4 0.8 1.7 2.9-0.3 3.4-2.7 3.7 1.9 5.1 2.5-0.4 1.5-4.7-1.7-2.2 0-4.9 7.2-2.6-0.6-3 2.1-2.1 1.7 4.6 4 0.1 3.4 3.5 0.2 2.2 5 0 6.1-0.6 3.1 2.8 4.2 0.8 3.3-2 0.1-1.6 7.1-0.4 6.7-0.1-4.9 1.9 1.8 3.1 4.5 0.4 4.2 3.2 0.7 5.1 2.9-0.1 2.2 1.5z">
+    </path>
+    <path iso2="VN" name="Vietnam" d="M1586.5 363.5l-6.5 5.4-3.7 6.1-0.6 4.5 5.3 6.7 6.5 8.4 5.7 4 4.1 5.1 4 11.9 0.4 11.3-4.3 4.2-6.1 4.2-4.2 5.3-6.6 6-2.3-4.1 1.2-4.4-4.4-3.6 4.6-2.6 5.9-0.5-2.8-3.8 9-5-0.1-7.7-1.8-4.3 0.2-6.4-2-4.5-4.9-4.5-4.4-5.6-5.7-7.6-7.3-3.9 1.2-2.3 3.3-1.7-3-5.6-6.8 0-3.5-5.8-4-5.1 2.7-1.6 4.4 0.1 5.3-0.8 4.1-3.4 3.1 2.4 5.3 1.2-0.3 3.7 3.1 2.6 5.9 1.7z">
+    </path>
+    <path iso2="YE" name="Yemen" d="M1283.8 394.9l-4 1.7-0.9 2.9 0 2.2-5.4 2.7-8.8 3-4.7 4.5-2.5 0.4-1.7-0.4-3.2 2.7-3.5 1.2-4.7 0.3-1.4 0.4-1.1 1.7-1.5 0.5-0.8 1.6-2.8-0.2-1.7 0.9-4-0.3-1.6-3.8 0-3.5-1-1.9-1.3-4.7-1.8-2.6 1.1-0.4-0.7-2.9 0.6-1.2-0.4-2.8 2.4-2.1-0.8-2.7 1.3-3.1 2.4 1.6 1.5-0.6 6.4-0.1 1.1 0.6 5.5 0.7 2.1-0.3 1.5 2.1 2.6-1.1 3.5-6.7 5-2.9 15.9-2.5 5.2 10.6 2.2 4.5z">
+    </path>
+    <path iso2="ZM" name="Zambia" d="M1162.1 556.8l0.3 0.2 2.2 1.1 3.6 1.1 3.2 1.9 2.6 2.9 1.3 5.4-1 1.7-1.3 5.2 0.9 5.4-1.8 2.2-2 6 2.9 1.6-17.2 5.3 0.4 4.6-4.3 0.9-3.3 2.5-0.8 2.2-2 0.6-5.1 5.2-3.2 4.2-1.9 0.1-1.8-0.7-6.2-0.7-1-0.5 0-0.5-2.2-1.5-3.6-0.3-4.6 1.4-3.6-4-3.6-5.2 0.8-20.5 11.7 0.1-0.4-2.2 0.9-2.4-0.9-3 0.7-3.1-0.6-2 1.9 0.1 0.3 2 2.7-0.1 3.5 0.6 1.9 2.9 4.4 0.9 3.5-2 1.2 3.3 4.3 0.9 2 2.8 2.2 3.5 4.3 0-0.2-6.9-1.6 1.2-3.9-2.5-1.5-1.2 0.9-6.4 1.1-7.6-1.2-2.8 1.7-4.1 1.5-0.8 7.7-1.1 0.9 0.3-0.3 1.4 1.9 0.5 1.2 1.3 1-0.3-0.5-1.1z">
+    </path>
+    <path iso2="ZW" name="Zimbabwe" d="M1159.4 644.7l-2.9-0.7-1.9 0.8-2.7-1.1-2.2 0-3.4-2.9-4.3-1-1.5-4.1 0.1-2.3-2.3-0.7-6.1-7-1.6-3.7-1.1-1.2-1.9-5.1 6.2 0.7 1.8 0.7 1.9-0.1 3.2-4.2 5.1-5.2 2-0.6 0.8-2.2 3.3-2.5 4.3-0.9 0.2 2.4 4.7-0.1 2.6 1.3 1.1 1.6 2.7 0.5 2.8 2-0.4 8.2-1.3 4.4-0.4 4.8 0.8 1.9-0.9 3.8-0.8 0.6-1.7 4.6-6.2 7.3z">
+    </path>
+    <path iso2="SO" name="Somalia" d="M1222.1 512.6l-3.3-5.3-0.2-23.4 4.9-7.2 1.5-2.1 3.6-0.1 5-4.5 7.3-0.3 15.6-19.3-4.8 0.1-18.7-7.6-2.2-2.3-2.2-3.1-2.2-3.6 1.2-2.2 1.9-3.5 1.9 1.2 1.2 2.7 2.7 2.7 2.8 0 5.2-1.7 6.1-0.7 4.9-2 2.8-0.4 2-1.2 3.2-0.2 1.8-0.2 2.5-0.9 3-0.7 2.5-2.2 2.2 0 0.2 1.8-0.4 3.7 0.2 3.4-1.1 2.3-1.4 7-2.4 7.1-3.3 8.2-4.6 9.4-4.7 7.2-6.6 8.8-5.6 5.2-8.4 6.4-5.3 4.8-6.2 7.8-1.3 3.4-1.3 1.5z">
+    </path>
+    <path iso2="XK" name="Kosovo" d="M1097.8 230.8l-1.2 0.3-2.9 1-0.1 1.3-0.7-0.1-0.6-2.3-1.3-0.7-1.2-1.7 0.8-1.4 1.2-0.4 0.5-2.1 0.9-0.4 0.8 0.9 1 0.4 0.8 1 0.9 0.3 1.1 1.2 0.7-0.1-0.4 1.6-0.6 0.7 0.3 0.5z">
+    </path>
+    <path iso2="ZA" name="South Africa" d="M1159.4 644.7l2.2 9 1.1 4.6-1.4 7.1 0.4 2.3-2.7-1.1-1.7 0.4-0.6 1.9-1.7 2.4-0.1 2.2 3.1 3.5 3.2-0.7 1.4-2.8 4.1 0-1.7 4.7-1 5.3-1.7 2.9-4 3.3-1.1 0.9-2.6 3.3-1.8 3.3-3.5 4.6-6.7 6.6-4.1 3.8-4.3 3-5.9 2.4-2.7 0.4-0.9 1.8-3.2-1-2.7 1.2-5.7-1.2-3.3 0.8-2.2-0.4-5.8 2.6-4.6 1-3.5 2.4-2.4 0.2-2.1-2.3-1.8-0.1-2.2-2.9-0.3 0.9-0.6-1.7 0.3-3.8-1.5-4.3 1.8-1.2 0.1-4.9-3.3-6-2.4-5.4 0-0.1-3.6-8.3 2.8-3.2 2 1.8 0.8 2.7 2.5 0.5 3.4 1.2 2.9-0.5 5-3.3 1.1-23.7 1.4 1 3 6.1-0.6 3.9 1.1 2.3 4-0.7 2.8-2.9 2.7-1.9 1.5-3.1 2.8-1.4 2.3 0.7 2.5 1.8 4.5 0.3 3.6-1.4 0.6-2 1.2-3.1 3-0.5 1.8-2.4 2-4.3 5.2-4.8 8.1-4.7 2.2 0 2.7 1.1 1.9-0.8 2.9 0.7z m-20.3 53.2l1.1-2 3.1-1 1.1-2.1 1.9-3.1-1.7-2-2.2-2-2.7 1.4-3.1 2.5-3.2 4 3.7 5 2-0.7z">
+    </path>
+    <path iso2="NZ" name="New Zealand" d="M 1886.2 764.4 1885.4 767 1891 764.4 1890.5 767.1 1888.4 769.8 1884.2 772.7 1877.1 777.4 1872.4 780 1871.8 783 1867.8 783.1 1861.5 785.5 1856.8 789.6 1848.6 796 1842.3 798.8 1838.3 800.6 1833.7 800.5 1832.2 798.4 1827.1 798 1828.1 795.6 1834.6 791 1846 784.7 1850.3 783.5 1855.9 781.1 1862.9 777.8 1868.6 774.5 1874.6 769.8 1877.7 768.2 1881.2 764.6 1887 761.7 1886.2 764.4 ZM 1915.2 733.9 1914.8 740.7 1917.7 736.3 1919 738.1 1916.6 742.9 1919.5 745 1922.7 745.5 1927.4 743.1 1929.6 743.8 1924.4 749.5 1920.2 753.2 1916.3 753.1 1913.5 755 1912 757.8 1910.4 758.9 1905.8 762.4 1899.9 766.7 1893.9 769.3 1894.4 767.6 1892.9 766.7 1899.8 761.5 1900.7 757.9 1896.9 755.4 1898.7 753.1 1904 750.9 1908.2 745.9 1910.7 741.8 1911.3 737.5 1912.1 736.4 1911.2 733.7 1910.5 728.1 1910.9 723.5 1913.1 723 1914 726.6 1917.2 728.2 1915.2 733.9 Z">
+    </path>
+    <path iso2="CL" name="Chile" d="M 655.1 837.9 661.1 851.5 666.1 851.5 669.1 851.7 668.6 854.1 665.4 856 663 855.8 659.9 855.3 655.7 853.5 650.3 852.6 642.8 849.2 636.4 846 626.6 839.1 631.2 840.4 639.8 844.5 647.1 846.7 648.3 843.9 648 839.7 651.4 837.1 655.1 837.9 ZM 614.4 647.8 615.3 649.4 614.1 656.1 608.5 659.2 610.1 669.9 609.3 672 611.3 674.5 608 678.5 605.4 684.5 604.5 690.4 606.2 696.6 604.1 703.2 609 714.3 610.6 715.5 612 721.4 610.4 727.6 611.8 733 608.8 737.2 610.4 743 613.7 749.3 611.2 751.6 611.4 757.3 612.2 763.8 615.5 771.6 613.8 772.9 617.5 780.2 620.6 782.6 619.8 785.3 622.6 786.5 624 788.9 622.2 790.1 624 793.8 625.1 802.1 624.4 807.5 626.2 810.7 626.1 814.6 623.4 817.4 626.5 823.9 629.1 826.2 632.2 825.8 634.1 830.4 637.6 834 649.7 834.8 654.6 835.8 650.3 835.8 648.6 837.3 645.2 839.5 646.9 845.2 645 845.3 638.7 843.4 631.2 839.1 623.6 835.6 620.4 831.7 620.1 828.1 615.9 823.9 610.9 813.3 610.7 807.3 614.1 802.5 605.8 800.6 608.5 795.1 606.5 784.6 613 786.8 611.2 773.7 607.2 772 608.2 779.9 604.7 779 603.2 770 601.2 758.2 602.3 753.8 599 747.6 596.6 740.4 598.8 740.1 599.4 729.8 600.6 719.5 600.7 710 597.4 700.3 598 695 595.9 687.1 597.7 679.3 596.8 666.9 596.8 653.5 596.9 639.2 595.4 628.7 593.3 619.6 596.1 618 597.2 614.7 600.4 619.1 601.6 623.7 604.8 626.4 603.7 632.6 607.4 639.8 610.5 648.7 614.4 647.8 Z">
+    </path>
+    <path iso2="NL" name="Netherlands" d="M1016.5 177.1l-2.8-1.5-3.1-2.7-4.5 1.3-3.6-0.5 2.5-1.7 4-9 6.5-2.6 4 0.2 0.9 2.1-0.9 5.6-1.2 2.3-2.9 0 1.1 6.5z">
+    </path>
+    <path iso2="PT" name="Portugal" d="M946.9 263.7l-2.2 1.6-2.8-0.9-2.7 0.7 0.9-5-0.3-3.9-2.4-0.6-1.1-2.4 0.5-4.2 2.2-2.3 0.5-2.6 1.2-3.8 0-2.7-0.9-2.3-0.2-2.2 1.9-1.6 2.2-0.9 1.2 3.1 3 0 0.9-0.8 3.1 0.2 1.3 3.2-2.4 1.7-0.3 5-0.8 0.9-0.3 3.1-2.3 0.5 2 3.8-1.6 4.2 1.8 1.9-0.8 1.7-2 2.4 0.4 2.2z">
+    </path>
+    <path iso2="RU" name="Russia" d="M 1689.5 177.4 1703.2 188.4 1694.3 186.4 1698 195.4 1707.6 201.8 1710.6 206.2 1704.1 202.4 1704.2 207.3 1699.5 202 1695.7 195.9 1690.1 189.2 1687.7 184.4 1681.3 176.2 1673.3 170.1 1666.5 161.7 1668.4 158.9 1664 156.1 1665.3 155.2 1670.2 159.2 1677.1 165.1 1682.3 171.2 1689.5 177.4 ZM 1094.6 155.4 1085.8 155.5 1079.9 154.8 1080.6 152.2 1086.9 150.2 1092 151.3 1094.2 152.2 1094 153.9 1094.6 155.4 ZM 1548.4 48.2 1542.5 48.3 1533.6 47.7 1532.6 47.4 1533.3 45.4 1537.5 44.9 1545.9 46.9 1548.4 48.2 ZM 1561 38.7 1559.9 40.7 1553 40.3 1542.7 38.3 1540.9 36.7 1549.2 37.4 1561 38.7 ZM 1535.5 36.3 1538.6 40.1 1524.3 39.9 1519.7 41.1 1507.2 37.8 1503.8 34.4 1507.3 33.5 1517.5 33.7 1535.5 36.3 ZM 1218.8 61.3 1216.6 61.7 1203.1 61 1200.8 58.7 1192.9 57.3 1190.9 54.4 1194.4 53.3 1192.8 50.5 1198.2 46.1 1194.2 45.5 1200.9 41 1198.4 38.7 1205.2 36.1 1215.5 32.9 1227.2 32 1232.2 30.2 1238.9 29.6 1243.1 31.5 1241.8 33 1230.4 35.5 1220.5 37.8 1211.8 42.6 1209 47.6 1205.7 52.6 1208.8 56.9 1218.8 61.3 ZM 1661.7 231 1660.3 229.9 1658.4 226.6 1660.9 226.5 1657 219 1652.3 213.6 1655.2 211.4 1662.1 212.5 1661.5 206.3 1658.7 199.5 1659 197.2 1657.7 191.5 1650.8 193.4 1648.2 195.8 1640.6 195.8 1634.6 190 1625.6 185.5 1615.6 183.5 1609.4 177.5 1604.9 173.7 1601.1 171 1593.4 164.8 1587.4 162.6 1578.8 160.7 1572.6 160.9 1567.5 162 1565.8 165.1 1569.5 166.5 1572 169.9 1570.7 171.9 1570.9 178.4 1572.8 181.2 1568.4 185.1 1561 182.7 1555.4 183.3 1551.5 181.2 1548.1 180.5 1543.7 184.9 1537.8 185.9 1534.2 187.5 1527.4 186.5 1522.8 186.5 1517.9 183.3 1511.3 180.4 1505.9 179.5 1500.2 180.3 1496.2 181.5 1487.7 178.9 1484.1 174.3 1477.4 172.7 1472.6 171.9 1465.6 169.4 1464.3 175.8 1468.3 179.4 1465.9 183.8 1457.9 182.2 1452.9 182 1448.1 179.1 1442.9 179 1437.6 177.1 1431.7 180 1425 185.3 1420.3 186.4 1418.6 186.9 1414.2 183.1 1408.2 184 1404.9 181.3 1400.9 180.1 1396.8 176.5 1393.5 175.4 1387.3 177 1378.9 173.5 1377.8 176.7 1359.5 161.1 1351.1 156.4 1351.9 154.4 1342.7 160.2 1338.3 160.5 1337.2 157.2 1330.1 155.1 1325.8 156.6 1321.4 150.3 1312.3 149 1309.2 151.5 1298.3 153.8 1296.6 155.3 1279.6 157.4 1278.2 159.5 1283.3 163.7 1279.3 165.3 1280.8 166.9 1277.3 169.9 1286.7 174.2 1286.5 177.1 1279.5 176.8 1278.7 178.7 1271.4 175.5 1263.7 175.6 1259.3 178.2 1252.7 175.7 1240.7 171.4 1233.1 171.6 1225 178.3 1225.6 182.8 1219.6 179.2 1217.4 186.1 1219.2 187.3 1217.5 192.1 1222.8 196.3 1226.4 196.1 1230.7 200.3 1230.9 203.5 1233.7 204.6 1232.3 208.3 1227.7 209.3 1224.1 215.8 1230.1 221.9 1230.5 226.1 1237.8 233.6 1235.3 236.2 1234.7 237.8 1232.3 237.3 1228 233.5 1226.5 233.3 1222.9 231.8 1220.8 229.2 1215.7 227.9 1212.8 228.9 1211.6 227.7 1204 224.6 1196.3 223.6 1191.7 222.5 1191.3 223.3 1183.7 217.9 1177.5 215.5 1172.4 211.8 1176 210.8 1179.2 205.6 1175.9 203.1 1182.8 200.5 1182.4 199.1 1178.1 200.1 1177.7 197.4 1179.9 195.6 1184.7 195.2 1185 193.1 1183.2 189.6 1184.5 186.4 1184.1 184.5 1176.4 182.5 1173.5 182.6 1169.9 179.7 1166.3 180.7 1159.6 178.5 1159.5 177.3 1157.2 174.6 1153.3 174.3 1152.5 172.4 1153.4 171.1 1149.6 167.6 1144.7 168.2 1143.2 167.9 1142.2 169.3 1140.4 169.1 1138.4 165.1 1136.9 163.1 1137.7 162.5 1141.6 162.7 1143.2 161.4 1141.5 159.8 1138.1 158.7 1138.1 157.6 1136 156.5 1132.2 152.5 1132.9 150.9 1131.8 148 1127 146.6 1124.6 147.3 1123.7 145.8 1118.4 144.3 1116.3 140.7 1115.3 137.8 1112.8 136.5 1114.4 134.6 1112 129 1114.6 125.6 1113.7 124.6 1118.2 121.3 1112.8 118.5 1120.8 111.1 1124.2 107.7 1125.1 104.8 1117.7 100.9 1118.6 97.1 1113.7 92.9 1115.4 88.1 1108.9 81.8 1111.8 77.6 1104.5 73.9 1104.1 70.1 1107.3 69.6 1113.7 67.5 1117.4 65.6 1125.1 68.8 1136.8 70.1 1154.5 76.3 1158.6 78.9 1160.1 82.6 1156.4 85.5 1149.9 87 1129.7 82.8 1126.8 83.5 1134.9 87.6 1135.9 90.2 1137.8 96 1143.9 97.7 1147.7 99.2 1147.5 96.4 1144.1 94 1146.2 91.8 1157.8 95.4 1161 94 1156.7 89.8 1164.8 84.4 1168.9 84.7 1173.5 86.6 1174.6 82.8 1169.9 79.5 1170.7 76.2 1166.4 72.8 1178.7 74.6 1182.3 77.6 1177.2 78.3 1178.4 81.4 1182.5 83.3 1188.5 82.1 1188.1 78.6 1195.8 75.9 1208.2 71.3 1211.4 71.5 1208.9 74.8 1214.3 75.4 1216.4 73.5 1224.1 73.4 1229.1 71.1 1235.5 74.4 1238.3 70.8 1232.3 67.7 1233.5 65.9 1246.5 67.5 1253.1 69.2 1271.7 75.4 1272.8 72.6 1266.9 69.7 1266.1 68.6 1260.8 68 1260.6 65.5 1255.9 61.3 1254.8 59.6 1259.1 54.9 1258.5 50.1 1260.7 49.1 1272.1 50.5 1275 53.4 1274.1 57.6 1277.8 59.3 1281.6 63 1285.4 70.4 1292.1 73.7 1292.6 77.4 1289.1 85.2 1294.4 86 1294.9 84 1298.7 82.6 1298.2 79.9 1300.1 77.2 1295.7 74.1 1295.3 70.5 1290.5 70.1 1287.6 67.1 1287.2 61.7 1279 57.4 1283.7 53.9 1280 50.2 1281.9 50.1 1286.1 52.9 1288.2 58 1293.2 59 1288.6 55.2 1293.7 53.1 1301.8 52.8 1311.4 55.8 1304.5 51.5 1299.6 46 1305.5 45 1315 45.2 1322.8 44.5 1317.2 41.9 1318.5 38.6 1322.7 38.4 1327.6 36 1336.9 35.3 1336.7 33.9 1346 33.5 1350.3 34.6 1355.7 32 1362.7 32.1 1361.2 29.9 1362.1 27.9 1368.3 25.9 1376.6 27.5 1373.1 28.7 1382.5 29.4 1386.6 31.8 1388.5 30.6 1399.4 30.7 1411 33.1 1416.5 34.9 1419 37.5 1416.6 39 1410 41.8 1408.9 43.3 1414.5 44 1421.7 45.3 1424.1 44.3 1429.9 47.6 1430.1 46.3 1435.3 45.5 1448.9 46.3 1452.7 48.7 1470.1 49.5 1465.3 45.6 1474.8 46.5 1480.9 46.4 1490.8 49.1 1496.8 52.4 1497.2 54.6 1507.3 58.8 1516.3 60.9 1513.3 55.4 1522.7 57.7 1527.7 56.3 1537.5 57.9 1538.5 56.5 1546.1 57.2 1536.7 52.3 1538.8 50.1 1579.2 53.5 1587.1 56.6 1603.4 60.6 1618.2 59.6 1627.5 60.5 1634.1 62.7 1639.2 66.6 1646.5 68.1 1650.4 67 1657.4 66.9 1666.7 67.9 1673.6 67.3 1687.9 72.1 1690.4 70.4 1681.9 67 1680.1 64.6 1695.4 66.1 1703.4 65.8 1719.2 68.3 1728.7 70.7 1761.9 92.8 1759.9 95.3 1753.7 94.9 1761.9 97.9 1771 102.6 1775.2 104.1 1779 106.5 1780 108 1770 106.8 1763.4 111.1 1760.4 111.8 1758.8 115.9 1756.8 119.5 1758.5 122.2 1747 118.1 1740.9 122.7 1736.2 120.5 1734.8 123.1 1727.8 122.2 1730.9 126.1 1732 131.9 1734.9 134.3 1741.7 135.6 1750.8 144.3 1746.7 144.6 1750.1 149.6 1754.8 152.2 1749.8 155.3 1755.2 162.3 1749.5 163.8 1754 170 1752.3 175.8 1746.6 171.5 1736.1 162.6 1719.9 149 1713.4 140.7 1713.5 137.1 1710.7 134.3 1716.4 133 1716.2 125.5 1716.9 119.5 1719.4 114.8 1712.8 106.6 1708.1 107.1 1711.3 111.9 1707.7 118.3 1695.4 111.1 1686.3 113.1 1686.3 122.9 1694 126.5 1685.5 128.1 1679.1 128.7 1674.8 124.4 1666.8 123.5 1664.3 126.4 1649.2 125.4 1636 127.1 1632.5 138.8 1627.5 153 1635.7 153.8 1641.4 157.6 1647.2 158.9 1647.6 155.9 1653.2 156.3 1666 163 1670.7 168.2 1672.1 174.4 1677.6 181.8 1682.9 191.7 1681.9 200.8 1683.2 205.1 1681.2 212.5 1679.1 219.8 1678.2 223.5 1673.6 227.2 1670.5 227.3 1665.3 224.2 1661.2 228.9 1661.7 231 ZM 1367.1 23.1 1349 24.9 1347.7 18.8 1349.9 18.3 1353 18.6 1365.6 21.2 1367.1 23.1 ZM 1164.8 13.1 1160.5 13.6 1157.6 14 1157.6 14.7 1154 15.4 1149.5 14.4 1150.6 13 1142.8 12.9 1149.1 12.1 1154.3 12.1 1155.8 13.2 1157.1 12.2 1159.9 11.5 1165.7 12.4 1164.8 13.1 ZM 1345.1 20.4 1338 21 1326.3 19.7 1318.2 18 1311.6 14.8 1305.7 14 1311.1 11.1 1317.3 10.2 1326.9 12.2 1340.6 16.4 1345.1 20.4 Z">
+    </path>
+    <path iso2="ES" name="Spain" d="M976.6 223.4l2 2.4 9.5 2.9 1.9-1.4 5.8 2.9 5.9-0.8 0.4 3.7-4.9 4.2-6.6 1.4-0.5 2.1-3.2 3.5-2 5.2 2 3.7-3 2.8-1.2 4.2-4 1.3-3.7 4.9-6.8 0.1-5-0.1-3.4 2.2-2.1 2.4-2.6-0.5-1.9-2.2-1.4-3.6-4.9-1-0.4-2.2 2-2.4 0.8-1.7-1.8-1.9 1.6-4.2-2-3.8 2.3-0.5 0.3-3.1 0.8-0.9 0.3-5 2.4-1.7-1.3-3.2-3.1-0.2-0.9 0.8-3 0-1.2-3.1-2.2 0.9-1.9 1.6 0.5-4.5-2-2.7 7.4-4.6 6.2 1.1 6.9 0 5.4 1.1 4.3-0.4 8.3 0.3zM 888.4 323.4 888.1 323.9 887.7 324.4 887.4 324 887 324 886.8 323.8 887 323.5 887.4 323.6 887.8 323.2 888.1 323 888.3 323.1 888.4 323.4 ZM 902 321.1 902 321.6 902.2 322 902 322.7 902.1 323 901.7 323.4 901.2 323.6 901 323.8 900.4 323.6 899.9 323.1 899.7 322.7 899.7 322.1 900.3 321.7 900.4 321.2 900.4 321 901 321.1 901.4 321.1 901.7 321.2 902 321.1 ZM 892.1 321.9 891.9 321.9 891.6 321.7 891.4 321.4 891.5 321 891.6 320.7 891.9 320.7 892.2 320.7 892.7 321.1 892.8 321.4 892.3 321.9 892.1 321.9 ZM 898.2 318.4 898.2 318.6 897.6 318.9 897.2 319.4 896.9 319.6 896.9 320 896.5 320.7 896.4 321.1 895.9 321.7 895.8 321.9 895.6 321.9 895 322.1 894.9 322 894.8 321.6 894.5 321.2 894.4 321 894.2 320.7 894.2 320.4 893.8 319.8 894.3 319.5 894.6 319.7 895.2 319.5 895.6 319.5 896.1 319.3 896.6 318.9 896.6 318.7 897.2 318.4 897.8 318.4 898.1 318.3 898.2 318.4 ZM 908.4 321.2 908.1 321.6 907.7 321.7 907.4 321.6 907 321.6 907 321.4 907.3 321.4 907.9 321.2 908.3 320.9 908.6 320.6 908.7 320.1 908.8 319.8 909 319.3 909.3 318.9 909.6 318.3 909.8 317.5 910 317.3 910.4 317.2 910.7 317.5 910.8 318 910.7 318.5 910.6 319 910.6 319.5 910.5 319.6 910.2 320.3 909.9 320.6 909.3 320.7 908.6 321 908.4 321.2 ZM 888.8 316.7 889.1 316.6 889.3 316.9 889.5 317.4 889.3 317.7 889.4 318.1 888.8 319.1 888.7 319 888.6 318.6 888.2 317.7 888.1 317.4 888 317.2 888.2 316.8 888.5 316.6 888.8 316.7 ZM 912.9 314.7 912.9 315.1 912.7 315.6 912 316.1 911.5 316.2 911.1 316.7 910.6 316.5 910.6 316.4 910.8 316 910.8 315.6 911 315.3 911.3 315.1 911.6 315.1 911.9 314.8 912.4 314.8 912.5 314.7 912.7 314.2 912.9 314.1 913.1 314.3 912.9 314.7 Z">
+    </path>
+    <path iso2="FR" name="France" d="M 1035.7 231.4 1034.2 236.3 1031.8 235 1030.5 230.8 1031.4 228.4 1034.6 226 1035.7 231.4 ZM 1014.4 185 1015.5 185.5 1016.9 185.4 1019.3 187 1026.5 188.2 1024.1 192.4 1023.7 196.9 1022.4 198 1020.1 197.4 1020.3 199 1016.7 202.5 1016.7 205.4 1019.1 204.4 1020.9 207.1 1020.8 208.9 1022.3 211.3 1020.6 213.2 1022.1 218.1 1024.9 218.9 1024.4 221.6 1019.9 225.2 1009.7 223.5 1002.3 225.6 1001.7 229.4 995.8 230.2 990 227.3 988.1 228.7 978.6 225.8 976.6 223.4 979.3 219.6 980.3 207 975.2 200.4 971.5 197.2 963.9 194.8 963.5 190.2 970 188.9 978.3 190.5 976.8 183.4 981.5 186.1 992.9 181.3 994.4 176.2 998.6 174.9 999.4 177.1 1001.6 177.2 1004 179.7 1007.5 182.6 1010 182.1 1014.4 185 Z">
+    </path>
+    <path iso2="US" name="United States" d="M 118.8 379.3 117.7 380.4 116.5 379.5 117.1 377.7 116.7 375.3 117.2 374.6 118.4 373.6 118.3 372.3 118.7 371.7 119.1 371.8 121 372.9 121.9 373.5 122.6 374.3 123.5 376.6 123.3 376.9 120.8 378.3 118.8 379.3 ZM 118.1 369.3 116.1 369.7 115.5 368.4 115 367.9 115 367.5 115.7 366.9 117.5 367.5 118.7 368.5 118.1 369.3 ZM 115.1 365.9 114.8 366.6 111.8 366.4 112.4 365.6 115.1 365.9 ZM 110.4 364.9 110 365.3 109.6 365.2 107.7 365 107.4 363.5 107.2 363.3 108.9 362.4 109.3 362.8 110.4 364.9 ZM 102 360.7 101.2 361.3 99.6 360.2 100 359.7 101 359.1 102.3 359.2 102 360.7 ZM 539.5 194.5 533.4 196.5 528.7 199 524.1 201.7 523.6 202.6 529.3 201.3 531.4 203.4 536 201.9 540.9 199.8 546.3 197.7 543.2 201 545.7 201.8 548.2 204.2 553.3 202.8 558.4 202.3 558.7 204.1 560.2 204.3 561.4 204.5 562.9 207 558.2 207.6 558.1 207.6 554.4 206.9 549.9 208.1 546.2 208.7 541.5 212.8 538.5 215.1 538.9 215.8 544.4 211.7 545.1 211.7 540.4 216.6 537.5 221 535 224.6 534.4 227.7 533.6 229.2 533 230.9 533.1 234.2 533.4 234.7 535.2 234.6 536.8 233.9 538.2 233.1 541.5 230 543.3 225.8 543.2 221.9 544.6 219.2 547.2 216.1 549.3 213.9 552 212.4 551.6 214.5 553.8 211.4 555.1 210.8 556.8 208.4 560.6 209.7 563.4 212.1 562.6 215 561 217.9 557.2 220.4 556.8 222 557.8 222 562.1 219.3 563.7 219.9 563.2 223.6 562.5 226.2 558.8 229.7 556.8 231.9 554.1 234.3 556.8 235.6 559.3 236 563.3 235.1 567 233.4 570 232.5 574.6 230.7 580.4 226.9 580.5 226.3 580.8 224.4 583.5 223.6 587.4 223.9 591.4 224.4 596 222.3 596.6 219.8 596.4 218.9 603.2 214.5 605.9 213.4 613.7 213.3 623 213.3 624.1 211.8 625.8 211.5 628.3 210.5 631.1 207.6 634.3 202.7 639.8 198 640.9 199.6 644.6 198.6 646.2 200.4 643.3 208.9 645.5 212.5 645.7 214.6 639.3 217.6 633.3 219.8 627.3 221.7 623.3 225.5 622 226.9 620.8 230.3 621.5 233.6 623.6 233.8 623.8 231.5 624.9 232.9 623.9 234.7 620.1 235.7 617.6 235.6 613.4 236.7 611.1 237 608 237.3 603 239.2 611.1 238 612.2 239.2 604.3 241.1 601 241.1 601.4 240.3 599.3 242.1 600.7 242.4 598.2 247 592.9 251.9 593 250.2 591.9 249.9 590.7 248.3 590.7 251.8 591.7 252.9 591.1 255.3 588.7 257.8 584.2 262.9 583.8 262.7 586.7 258.3 584.7 255.9 585.7 250.5 583.8 253.3 583.8 257.4 580.6 256.4 583.6 258.4 582.1 264.5 583.5 265 583.5 267.2 582.5 273.6 577.9 278.3 571.8 280.2 567.4 284 564.6 284.4 561.2 286.8 559.9 288.9 553 293.1 549.2 296.2 545.7 300 543.8 304.5 543.8 309 544.4 314.5 545.9 319 545.4 321.8 546.7 329.2 545.7 333.6 545.1 336.1 543.1 340 541.3 340.8 538.7 340 538.3 337.2 536.5 335.7 534.5 330.2 532.9 325.3 532.5 322.8 534.5 318.5 533.7 315 530.6 309.6 528.7 308.6 522.6 311.6 521.7 311.2 519.7 308.2 516.7 306.6 510.3 307.5 505.7 306.7 501.4 307.2 498.9 308.2 499.5 309.9 498.8 312.5 499.6 313.8 498.4 314.6 496.6 313.7 494.3 314.9 490.4 314.7 487.1 311.3 482.2 312.1 478.6 310.6 475.1 311.1 470.1 312.6 464 317.3 457.9 320.1 454.2 323.1 452.3 326 451.3 330.5 450.9 333.5 451.5 335.7 449.3 335.9 445.7 334.5 441.8 332.5 440.9 329.5 440.7 325 438.3 321.4 437.4 317.6 435.8 313.2 432.6 310.6 428.1 310.8 423.3 315.8 419.3 313.9 417 312 416.6 308.4 415.8 305.1 413.4 302.3 411.3 300.2 410 297.9 400.6 297.9 399.8 300.6 395.5 300.6 384.7 300.6 373.8 296.1 366.8 293 367.7 291.7 360.6 292.4 354.3 292.9 354.6 289.7 352.5 286 350.3 285.2 350.4 283.4 347.5 283 346.3 281.3 341.5 280.7 340.6 279.6 341.4 276.1 338.9 269.7 338.4 260.8 339.3 259.3 338 257.2 336.5 251.8 338.3 246.6 337.4 243.1 341.3 237.8 344.1 232.4 345.2 227.5 350.7 221.5 354.7 215.8 358.7 210.1 363 201.6 364.8 196.3 365.2 193.4 366.6 192.1 372.4 194.3 371.4 200.2 373.6 198.5 376.1 193.4 377.7 188.3 391.8 188.3 406.5 188.3 411.3 188.3 426.4 188.3 441.1 188.3 455.9 188.3 470.8 188.3 487.6 188.3 504.6 188.3 514.8 188.3 516.1 185.9 517.8 185.9 516.9 189.3 517.9 190.3 521.2 190.7 525.8 191.7 529.7 193.6 534.1 192.8 539.5 194.5 ZM 275 138.6 268 140.9 267.2 139.3 269.5 136.5 275.9 134.4 279.4 133.5 282 133.9 282 135.8 275 138.6 ZM 236 122 232.1 122.9 230.4 121.8 229.6 120.2 235.3 119.2 238.3 119.8 236 122 ZM 237.2 99.6 238.4 100.6 241.9 100.1 243.5 101.6 246.8 102.3 245.6 103 240.7 104.2 239 102.9 238.7 101.9 234.4 102.2 234.1 101.7 237.2 99.6 ZM 410 66.6 385.4 87 349.8 119.7 354 119.9 356.8 121.5 357.3 124.1 357.6 127.9 365.2 124.6 371.7 122.7 371.1 125.8 371.9 128.2 373.5 130.9 372.4 135.1 371 142 375.6 145.8 372.4 149.6 367.3 152.5 366.7 150.3 364.2 148.3 367.5 143.1 365.9 138.2 368.6 132.6 364.5 132.2 357.4 132.1 353.6 130.3 350.3 124.2 347 123.1 341.3 121 334.5 121.5 328.5 118.8 325.8 116.3 319.5 117.5 316 121.6 313.1 122 306.5 123.2 300.3 125.2 293.9 126.5 297.1 123 305.5 117.2 312.3 115.4 312.7 114 303.3 117.2 295.9 121.1 284.7 125.3 284.9 128.2 275.9 132.4 268.2 134.9 261.6 136.8 257.6 139.4 247 142.5 242.5 145.3 234.3 147.9 231.6 147.5 225.4 149.1 218.4 151.2 212.3 153.2 202.3 155 202.7 153.9 210.9 151.1 217.5 149.2 226.1 145.9 232.6 145.3 237.6 142.8 248 139.2 250.3 138 256 135.9 261.8 131.4 268 127.9 260.7 129.7 260.4 128.6 255.5 130.8 255.9 127.8 252.3 129.9 253.9 127 246.6 129.3 243.8 129.3 247.5 125.8 250.8 123.6 250.4 121.5 243.2 122.7 242.6 119.9 241.3 118.5 245.3 115.2 244.9 112.7 250.8 109.4 258.5 106.1 263.8 103.2 267.9 102.8 269.7 103.7 276.8 100.9 279.3 101.4 284.9 99.6 287.4 97 286.3 96 292.3 93.8 289.5 93.9 283.3 95.1 280.4 96.4 278.6 95.1 271.7 95.8 267.1 94.4 268.3 92.1 267.3 88.9 276.5 86.5 289.7 83.8 293.2 83.8 288.9 86.6 298.1 86.4 299.3 82.9 297 80.8 297.8 78 297.1 75.7 293.8 74 300.3 71.1 307.8 70.9 316.6 68.5 321.4 65.9 329.3 63.3 334.1 62.7 345.3 60.3 348.4 60.7 358.8 57.9 363.2 59 362.7 61.4 366 60.4 372.3 60.7 370.4 61.9 375.3 62.8 380.2 62.3 386.4 63.9 393.6 64.5 395.8 65.1 402.4 64.3 406.5 65.9 410 66.6 Z">
+    </path>
+    <path iso2="GF" name="French Guyana" d="M677.3 487l1.5-2.8 0.5-2.9 1-2.7-2.1-3.8-0.3-4.4 3.1-5.5 1.9 0.7 4.1 1.5 5.9 5.4 0.8 2.6-3.4 5.9-1.8 4.7-2.2 2.5-2.7 0.4-0.8-1.8-1.3-0.2-1.7 1.7-2.5-1.3z">
+    </path>
+    <path iso2="AW" name="Aruba" d="M592.9 422l-0.5-0.2-0.5-0.5 0.1-0.6 0.2 0.3 0.4 0.4 0.3 0.5 0 0.1z">
+    </path>
+    <path iso2="AI" name="Anguilla" d="M634.2 384.9l-0.2 0 0.3-0.4 0.3 0-0.2 0.3-0.2 0.1z">
+    </path>
+    <path iso2="AS" name="American Samoa" d="M 27.7 593.3 27.4 593.7 27.2 594 27 594.1 26.6 593.8 26.8 593.6 27.1 593.6 27.2 593.4 27.7 593.3 ZM 34.3 593.3 33.8 593.4 33.7 593.2 34.1 593.1 34.3 593.3 Z">
+    </path>
+    <path iso2="AG" name="Antigua and Barbuda" d="M 640.7 391.9 641.3 392.2 641.1 392.5 640.9 392.5 640.2 392.6 640 392.5 640 392 640.3 391.9 640.4 391.6 640.6 391.6 640.7 391.9 ZM 640.7 388.2 640.9 388.2 641.1 388.4 641.2 388.8 641.1 389.1 640.9 389.2 640.8 389 640.5 388.8 640.5 388.3 640.7 388.2 Z">
+    </path>
+    <path iso2="BH" name="Bahrain" d="M1264.1 333.3l0.3 0.1 0.2-0.1 0.4 0.7-0.1 0.2 0.1 0.9 0 0.7-0.2 0.4-0.1-0.4-0.6-0.8 0.1-0.4-0.2-0.7 0-0.4 0.1-0.2z">
+    </path>
+    <path iso2="BS" name="Bahamas" d="M 580.4 366 580 366.5 579.8 367 579.2 367.3 578.7 367.3 578.6 367.2 578.2 367.4 577.7 367.5 577.1 367.3 576.7 367.4 576.6 366.9 576.9 366.7 577.1 366.4 577.5 366.2 577.8 365.8 578.2 365.8 578.5 365.6 578.7 365.9 579.2 366.1 579.7 365.9 580.4 364.9 580.7 364.9 580.7 365.1 580.4 366 ZM 580.6 364.3 580.4 363.7 581 363.4 581.3 363.7 581.3 363.9 581 364 580.6 364.3 ZM 581 357.8 581.2 357.7 581.7 358 582.1 358 582.5 358.1 582.8 358.3 582.8 358.6 582.6 358.7 582.1 358.3 581.7 358.3 581.6 358.2 581.1 358.4 580.6 358.2 580.6 358.1 580.8 357.6 581 357.8 ZM 577.1 356 576.9 356.4 576.9 357.1 576.8 357.5 576.4 357.8 576.2 358.2 575.8 358.5 575.1 358.8 575 359 574.8 358.8 574.9 358.6 575.3 358.5 575.5 358.3 575.5 358.1 575.9 358 576.1 357.6 576.5 357.5 576.8 357.1 576.6 356.8 576.2 356.8 576 356.6 576.4 356.1 576.5 356 577.1 356 ZM 575.2 355.7 575.3 355.8 575.7 355.8 576.1 356 575.7 356.4 575.6 356.2 575.4 356.2 575 356.1 574.6 355.9 574.3 355.3 574.6 355.2 575 355.3 575.2 355.7 ZM 566 349.8 566.6 350.5 566.9 350.7 567.2 351.2 566.9 351.1 566.8 350.9 566.5 350.8 566.1 350.4 565.9 350.3 565.7 349.9 566 349.8 ZM 569.7 349.8 570 350.4 570.2 350.9 570.2 351.3 570.4 351.5 570.6 352.2 570.6 353.1 570.8 353.4 571.3 353.6 571.7 354.2 571.7 355 571.3 354.3 571.3 354.1 571 353.7 570.4 353.5 570.6 353.3 570.3 353 570.3 352.7 570.5 352.4 570.4 351.9 570.1 351.5 570.2 351.4 569.9 351 569.8 350.4 569.6 350.5 569.7 349.8 ZM 572.6 349.8 572.3 350 572 349.9 571.9 349.7 572.5 349.5 572.6 349.8 ZM 564.4 347.9 564.3 347.8 564 347.1 564.2 347.1 564.4 347.9 ZM 574.9 347.4 574.5 348 574.1 348 574.3 347.7 574.4 347.1 574.8 346.8 574.9 347.2 574.9 347.4 ZM 556.4 346.2 556.1 346.3 555.9 346.6 555.6 346.5 556.2 346.1 556.4 346.2 ZM 556.6 346.9 557 347.1 557.2 346.9 557.3 346.4 557.5 346.3 557.7 346.9 557.7 347.4 557.6 347.7 557.7 348.3 557.7 348.6 557.3 349.4 557.1 349.5 556.7 349.3 556.9 349 557.3 348.8 557.2 348.7 556.6 349.1 556.4 348.9 556.8 348.6 556.4 348.6 556.2 348.7 556 348.5 556 347.8 556.1 347.6 555.7 347.1 555.7 346.9 556.1 346.7 556.2 346.4 556.5 346.3 556.6 346.1 557.2 345.8 557.3 346.2 556.8 346.6 556.6 346.9 ZM 570.1 346.3 570.2 346.8 570 346.7 569.5 346.8 569.1 346.9 569 346.7 569.3 346.5 569.7 346.2 569.7 346 569.3 345.8 569.1 345.2 569 344.6 568.6 344.2 568.6 344 568.1 343.5 568.4 343.2 568.8 343.6 568.8 344.1 569 344.4 569.1 344.9 569.4 345.4 569.8 345.7 569.9 346 570.1 346.3 ZM 559.8 340.8 560.1 341 559.5 341.3 559.2 341.2 559 341.4 558.5 341.3 558.7 341 559.1 340.8 559.8 340.8 ZM 555.6 340.3 556 340.1 556.3 340.4 556.2 340.6 556.3 340.8 556.1 341.2 556.4 341.5 556.6 342.4 556.8 342.7 557.2 343.2 557 343.9 557.1 344.5 556.9 344.8 556.6 344.9 556.2 345.3 555.9 345.5 555.6 345.5 555.3 345.7 555 345.7 555 345.3 554.7 345.1 554.8 344.5 554.5 344.8 554.3 344.7 553.7 344.3 553.4 344 553.2 343.7 553.9 343.4 554.4 344.1 554.5 343.5 554.2 343.4 554.1 343.1 554.2 342.8 554.8 342.2 555 341.8 554.9 341.7 555.2 341.3 555.2 340.8 555 340.1 555.1 340 555.4 340 555.6 340.3 ZM 563.7 337.7 563.8 337.9 564.1 338.3 564.9 339 565.4 339.1 565.5 339.2 565.7 339.6 566 340 566.5 340.4 566.5 340.6 566.3 341.4 566.2 341.6 566.2 341.9 566.1 342.4 565.9 342.7 565.8 343.4 565.7 343.5 565.5 342.9 565.1 342.6 565.2 342.4 565.7 342.5 565.9 342.3 565.8 342.1 565.9 341.7 566.2 341.3 566.3 340.8 566.3 340.5 565.8 340.1 565.4 339.4 565.1 339.2 564.5 338.9 564.2 338.6 563.6 338.4 563.2 338.6 563.6 337.7 563.7 337.7 ZM 554.9 330.2 555.4 330.4 555.5 330.4 556.2 330.5 556.4 330.3 556.6 330.4 557.1 330.4 557.5 330.2 557.9 330.2 558.2 330 558.3 330.5 558.2 330.7 557.9 330.7 557.5 330.7 556.4 330.9 556.1 330.9 554.6 331.3 553.9 331.7 553.5 331.7 553.3 331.6 553 331.3 552.5 330.7 553.1 331 553.2 331.2 553.7 331.2 554.2 331 554.6 330.4 554.3 330.3 554.5 330 554.6 329.7 554.9 330.2 ZM 559.2 328.9 560 329.1 560.2 329 560.6 329.3 561.5 330.3 561.7 330.9 562.1 331 562.8 331.5 562.8 331.7 562.6 332.2 562.8 332.9 562.4 332.9 561.9 333.3 561.8 333.5 561.5 334.5 561.4 335.4 561.2 335.6 560.9 335.4 560.8 335 560.4 334.9 560.7 334.4 560.9 334.4 561.4 334 561.3 333.6 561.5 333.2 561.5 332.9 561.7 332.6 561.7 332 561.9 331.9 562.1 331.6 562.2 331.3 561.9 331.2 561.4 331.1 561.3 330.8 561.3 330.6 560.9 330.4 560.9 330.1 560.6 329.4 560.4 329.3 560.1 329.4 559.6 329.3 559.3 329.3 558.7 328.9 559.2 328.9 Z">
+    </path>
+    <path iso2="BL" name="Saint-Barthélemy" d="M635.2 387l-0.1-0.3 0.3 0.1-0.2 0.2z">
+    </path>
+    <path iso2="BM" name="Bermuda" d="M637.3 294l-0.3 0-0.1 0.1 0.1 0.2-0.4 0.2-0.1-0.1 0.2-0.1 0.1 0 0.1-0.3 0.3-0.1 0.1 0.1z">
+    </path>
+    <path iso2="BB" name="Barbados" d="M651.5 418l-0.6-0.2-0.1-0.5 0-0.8 0.2-0.4 0.2 0.2 0.2 0.6 0.5 0.3 0.1 0.4-0.5 0.4z">
+    </path>
+    <path iso2="KM" name="Comoros" d="M 1233.2 581.3 1232.3 581.2 1232.1 580.8 1232.1 580.5 1232.6 580.6 1233.3 581.1 1233.2 581.3 ZM 1236.9 579.4 1237.1 580.4 1237.1 581.1 1237 581.3 1236.8 581 1236.4 580.7 1236.3 580.5 1236 580.4 1235.4 580 1235.5 579.9 1236 580.1 1236.3 580 1236.5 579.6 1236.5 579.4 1236.8 579.3 1236.9 579.4 ZM 1231.2 578.4 1230.7 578 1230.4 577.9 1230.1 577.7 1229.9 577.1 1230 576.8 1230 576.6 1230.2 575.4 1230.1 575.3 1230.3 574.9 1230.8 574.8 1231 575.1 1230.8 576.3 1230.9 576.6 1231.1 577 1231.2 577.5 1231.4 578.1 1231.2 578.4 Z">
+    </path>
+    <path iso2="CV" name="Cape Verde" d="M 847.8 406.5 847.6 406.8 847.4 406.6 847.4 406.3 847.7 406.2 847.8 406.5 ZM 849.7 406.6 849.5 406.7 849.1 406.6 848.8 406.3 848.7 406 848.9 405.6 849.4 405.3 849.8 405.3 850 406 849.9 406.4 849.7 406.6 ZM 853.2 403.5 853.4 403.6 853.4 403.8 853.6 404 854 404.5 854.2 404.5 854.4 404.8 854.6 405.3 854.8 405.5 854.5 406 854.2 406.1 853.7 406 853.4 405.9 853.1 405.6 853.1 405.4 852.9 405.3 852.8 404.9 852.9 404.7 852.9 404.4 853.1 404 852.9 403.5 853.2 403.5 ZM 856.3 403.5 856.6 403.6 856.7 404.2 856.6 404.6 856.2 404.8 855.8 404.4 856 404 855.9 403.8 856.3 403.5 ZM 858.3 397.8 858.6 397.6 859.1 397.8 859.2 398 859.2 398.7 858.8 399 858.5 399.2 858.2 399.2 857.7 399 857.7 398.5 857.9 398.3 857.9 397.7 858 397.6 858.3 397.8 ZM 850.3 395 850.7 394.9 851 395.1 851.4 395.1 851.7 395.3 851.8 395.5 851.3 395.5 850.6 395.2 850.4 395.3 850.1 395.9 849.8 395.3 849.7 395.2 849.6 394.8 849.9 394.7 850.3 395 ZM 858.1 394.5 858.2 394.6 858.1 395.2 857.9 395.3 857.9 394.8 857.7 394.5 857.7 394.2 857.6 393.9 858 393.6 858.2 393.8 858.1 394.4 858.1 394.5 ZM 846.8 393.2 847 393.5 847.1 393.8 846.4 394.1 846.1 393.9 845.9 393.7 846.3 393.3 846.8 393.2 ZM 846 391.4 846.3 391.5 846.3 391.7 846.6 392 846.4 392.4 845.8 392.7 845.4 393.1 844.7 393.2 844.7 393.1 844.7 392.6 844.5 392.4 844.5 392.2 844.7 392 844.9 392 845.1 391.8 845.8 391.4 846 391.4 Z">
+    </path>
+    <path iso2="CW" name="Curaçao" d="M599 424.5l-0.3 0-0.4-0.3-0.3-0.1-0.3-0.3-0.1-0.2-0.3-0.1-0.2-0.4-0.3-0.3 0.1-0.5 0.5 0.3 0.1 0.5 0.4 0.4 0.7 0.2 0.2 0.3 0.3 0.4-0.1 0.1z">
+    </path>
+    <path iso2="KY" name="Cayman Islands" d="M 532.7 377.8 533 377.9 533.2 377.5 533.6 377.6 534.1 377.6 534.2 377.8 534 378 533.8 377.9 533.4 378 533.2 378.1 532.5 378.1 532.7 377.8 ZM 540.8 375.3 540.1 375.6 540.3 375.3 540.8 375.3 ZM 541.4 375.4 541.3 375.3 542.1 375 541.9 375.3 541.4 375.4 Z">
+    </path>
+    <path iso2="CY" name="Cyprus" d="M 1168.2 276.7 1168.3 276.9 1168.6 277.3 1168.2 277.2 1167.9 277.2 1167.5 277.4 1167.2 277.1 1167.2 276.8 1167.5 276.7 1167.7 276.8 1168.2 276.7 ZM 1166.5 277.2 1166.5 277.3 1166.3 277.5 1166.2 278.1 1166.1 278.3 1165.8 278.3 1165.6 278.5 1165.1 278.7 1164.9 278.8 1164.3 279.1 1163.9 279 1163.4 279.1 1163.1 279.5 1162.9 279.2 1162.6 279.3 1162.4 279.3 1162.1 279 1161.7 279.3 1161.2 279.3 1160.7 279.1 1160.2 279 1159.8 278.7 1159.5 278.1 1159.2 277.8 1159 277.1 1158.8 276.8 1158.9 276.5 1159.4 276.8 1159.8 276.7 1160 276.4 1160.1 276.1 1160.4 276 1160.6 276.1 1160.8 275.9 1161 275.9 1161.1 276.3 1161.6 276.5 1161.7 276.7 1162.3 276.7 1162.9 276.2 1163.3 276.3 1163.6 276.1 1163.9 276.2 1164.3 276.4 1164.5 276.1 1164.8 276.1 1165.1 276.5 1165.1 277.1 1165.4 276.9 1165.7 277.1 1165.8 277 1166.5 277.2 Z">
+    </path>
+    <path iso2="DM" name="Dominica" d="M642 401.7l0.5 0.1 0.2 0.5 0 0.6-0.1 0.8-0.1 0.2-0.2 0.1-0.4 0.2 0.1-0.4-0.1-0.2-0.1-0.7-0.3-0.5 0-0.3 0.1-0.3 0-0.3 0.2 0 0.2 0.2z">
+    </path>
+    <path iso2="FO" name="Faeroe Islands" d="M 955.6 112 956 112.2 956.3 112.2 956.4 112.4 956.4 112.8 956.6 113.1 956.5 113.3 955.9 112.9 955.7 112.5 955.5 112.3 955.3 112 955.6 112 ZM 955.9 110.4 956.7 110.6 956.9 110.8 956.8 111.2 956.7 111.3 956.3 110.8 955.8 110.7 955.6 110.3 955.9 110.4 ZM 954.62 109.03999999999999 954.7 109.2 955 109.2 955 109.5 954.6 109.5 954.4 109.7 953.8 109.5 953.6 109.4 953.4 109.1 953.9 109 954 108.9 954.5571428571428 108.99285714285715 954.3 108.8 954.5 108 955 108.1 955.3 108.6 955.3 108.7 955.9 108.9 956.2 109.4 956.5 109.6 956.4 110.2 955.9 109.8 955.7 109.6 955.5 109.5 955.4 109.3 955.2 109.1 954.7 109.1 954.62 109.03999999999999 ZM 958.3 108.4 958.1 108.2 958.4 108 958.3 108.4 ZM 955.9 108.9 955.5 108.7 955.2 108.4 955.1 108.1 955.2 108 955.6 107.9 955.9 107.9 956.5 108.3 956.4 108.5 956.5 108.7 957.1 108.9 957.1 109.1 956.7 109.4 955.9 108.9 ZM 958.1 108.3 957.8 108.7 957.5 108.5 957.2 108.5 957.4 108.2 957.3 107.8 957.4 107.7 957.6 108.1 958.1 108.3 ZM 957.2 108.3 957 108.3 956.8 107.9 956.9 107.6 957.1 108 957.2 108.3 Z">
+    </path>
+    <path iso2="FM" name="Micronesia" d="M 1909.4 467.7 1909.2 468 1908.7 467.9 1908.7 467.7 1909.2 467.3 1909.4 467.7 ZM 1881.2 457.1 1881.6 457.1 1881.9 457.3 1882 457.7 1881.8 457.8 1881.9 458 1881.8 458.2 1881.2 458.2 1881 458 1881 457.8 1880.8 457.5 1880.8 457.2 1881.2 457.1 ZM 1766.5 440.5 1766.6 440.8 1766.3 440.8 1766 441.3 1765.9 441.2 1766.2 440.4 1766.6 440.3 1766.5 440.5 Z">
+    </path>
+    <path iso2="GD" name="Grenada" d="M639.2 424.5l-0.4 0.3-0.2-0.1-0.1-0.5 0.2-0.5 0.3-0.4 0.3 0 0.1 0.3-0.1 0.7-0.1 0.2z">
+    </path>
+    <path iso2="GU" name="Guam" d="M1800.8 415.5l-0.1 0.4 0 0.6-0.1 0.3-0.3 0-0.2-0.3-0.1-0.5 0-0.5 0.6-0.5 0.1-0.2 0.1-0.5 0.2-0.1 0.1 0.2 0.4 0.1-0.2 0.5-0.5 0.5z">
+    </path>
+    <path iso2="KN" name="Saint Kitts and Nevis" d="M 636.3 392 636 392 635.9 391.8 636.1 391.4 636.3 391.4 636.4 391.6 636.3 392 ZM 635.6 390.5 635.5 390.8 635.3 390.8 634.9 390.6 634.7 390.4 635 390 635.5 390.4 635.6 390.5 Z">
+    </path>
+    <path iso2="LC" name="Saint Lucia" d="M643.7 413.8l-0.2-0.2-0.4-0.2-0.1-0.2 0-0.6 0.1-0.2 0.7-1.1 0.3 0.2 0 0.7-0.1 0.8-0.1 0.4-0.2 0.4z">
+    </path>
+    <path iso2="MF" name="Saint-Martin" d="M634.2 386l-0.4-0.1 0.2-0.3 0.3-0.1-0.1 0.5z">
+    </path>
+    <path iso2="MV" name="Maldives" d="M1402.9 474.8l0 0.2-0.2-0.1 0.2-0.2 0 0.1z">
+    </path>
+    <path iso2="MH" name="Marshall Islands" d="M1953.8 456l1 0.4-0.2 0-0.8-0.4z">
+    </path>
+    <path iso2="MT" name="Malta" d="M 1063.9 271.7 1063.7 272 1063.2 271.8 1062.7 271.5 1062.7 271 1062.6 270.9 1063.2 270.9 1063.6 271.2 1063.8 271.4 1063.9 271.7 ZM 1062.3 270.6 1061.8 270.5 1061.8 270.3 1062.2 270.2 1062.6 270.5 1062.3 270.6 Z">
+    </path>
+    <path class="Northern Mariana Islands" d="M 1802.5 411.1 1802.4 411.2 1802.2 411.1 1802.1 410.9 1802.6 410.7 1802.8 410.9 1802.5 411.1 Z">
+    </path>
+    <path class="Northern Mariana Islands" d="M 1804 406 1803.8 406 1803.5 405.4 1803.6 405.1 1803.9 405.1 1803.9 405.4 1804.1 405.6 1804 406 Z">
+    </path>
+    <path class="Northern Mariana Islands" d="M 1804.5 404.4 1804.3 404.6 1804.4 404.9 1804 404.9 1804 404.2 1804.1 404 1804.5 403.8 1804.4 404.3 1804.5 404.4 Z">
+    </path>
+    <path class="Northern Mariana Islands" d="M 1802.6 396.9 1802.3 396.9 1802.2 396.7 1802.6 396.7 1802.6 396.9 Z">
+    </path>
+    <path class="Northern Mariana Islands" d="M 1800.7 385.9 1800.6 385.7 1800.6 385.2 1800.9 385.1 1801.1 385.4 1800.7 385.9 Z">
+    </path>
+    <path class="Northern Mariana Islands" d="M 1799.5 381.6 1799.1 381.5 1799.1 381.2 1799.3 381.1 1799.5 381.3 1799.5 381.6 Z">
+    </path>
+    <path iso2="MS" name="Montserrat" d="M638.2 393.9l0.2 0.4 0 0.3-0.2 0.2-0.2-0.1-0.1-0.3 0.3-0.5z">
+    </path>
+    <path iso2="MU" name="Mauritius" d="M 1307.7 630.8 1308.1 631.7 1307.9 632.3 1307.5 632.7 1307.6 633 1307.3 633.3 1306.8 633.5 1306.3 633.5 1305.7 633.4 1305.6 633.5 1305.3 633.2 1305.5 633 1305.6 632.6 1305.7 631.9 1305.9 631.5 1306.4 631.1 1306.5 630.9 1306.7 630.4 1307.1 630.1 1307.5 630.2 1307.7 630.8 ZM 1339.5 628.7 1339.2 628.4 1339.6 628.2 1339.9 628.1 1340.1 628.2 1340 628.4 1339.5 628.7 Z">
+    </path>
+    <path class="New Caledonia" d="M 1915.2 646.9 1915 647 1914.8 647.4 1914.4 647.2 1914.6 646.7 1914.7 646.5 1915 646.6 1915.2 646.9 Z">
+    </path>
+    <path class="New Caledonia" d="M 1919.6 639.1 1919.5 639.2 1919.7 639.6 1920 639.6 1920.4 639.4 1920.3 640 1920.1 640.2 1920 640.6 1919.5 640.9 1919.1 640.7 1919.1 640.6 1918.8 640.3 1918.9 640.1 1918.7 639.9 1918.8 639.5 1918.7 639.1 1918.8 639.1 1919.2 639.2 1919.6 639.1 Z">
+    </path>
+    <path class="New Caledonia" d="M 1916.9 634.8 1916.7 635.3 1916.7 635.7 1916.5 636 1916.8 636.2 1917 636.3 1917.1 636.5 1917 636.7 1917.3 637.1 1917.1 637.1 1916.9 637.6 1916.7 637.8 1916.4 637.7 1916.2 637.4 1916.1 637.2 1915.5 637.1 1915.2 636.6 1915.2 636.4 1915.1 636.1 1915.4 636.1 1915.7 635.9 1916.1 635.6 1916.2 635.3 1915.8 635.1 1915.4 635.2 1915.6 634.8 1915.9 634.7 1916.1 634.8 1916.5 634.5 1916.9 634.8 Z">
+    </path>
+    <path class="New Caledonia" d="M 1913.5 633.2 1913.2 633.8 1913.1 634.1 1913.4 634.1 1912.9 634.6 1912.7 634.8 1912.6 634.6 1912.9 634.2 1913.1 633.7 1913.5 633.2 Z">
+    </path>
+    <path class="New Caledonia" d="M 1913.5 633.2 1913.3 632.8 1913.7 632.8 1913.8 633.2 1913.5 633.2 Z">
+    </path>
+    <path class="New Caledonia" d="M 1899.6 630.8 1899.8 630.9 1900.3 631.8 1900.6 632.1 1900.9 632 1901.1 631.7 1902 632.2 1902.3 632.7 1903 633.3 1903.3 633.7 1903.4 634 1903.8 634.4 1903.9 634.6 1904.1 634.6 1904.4 634.9 1905.3 635.1 1905.4 635.4 1905.4 635.8 1905.7 636.2 1906.1 636.3 1905.8 636.8 1905.9 637 1906.3 637.5 1906.4 637.5 1906.8 638 1906.7 638.4 1907.4 638.6 1907.8 639.1 1908.1 639.1 1908.4 639.3 1908.9 639.7 1908.8 640 1909.1 640 1909.5 640.5 1910.1 640.9 1910.1 641.1 1910.4 641.2 1910.7 641.5 1910.7 641.7 1911 642.3 1911.4 642.7 1911.5 642.6 1911.9 643.2 1912.4 643.3 1912.7 643.6 1912.7 644 1912.8 644.4 1912.9 644.5 1912.7 645.1 1912 645.5 1911.9 645.2 1911.6 645.3 1911.3 645.6 1910.7 644.8 1910.3 644.8 1910.2 644.6 1910 644.6 1909.8 644.9 1908.9 644 1908.7 644 1908.3 643.5 1908.4 642.7 1908.1 642.7 1907.7 642.7 1907.4 642.5 1907.3 642.3 1907.1 642.2 1906.8 642.2 1906.8 641.9 1906.6 641.4 1906.2 641.5 1905.4 641 1905.3 640.8 1905.3 640.5 1905 640.7 1904.4 640.4 1904.3 640 1903.9 639.7 1903.7 639.2 1903.2 639.1 1903.4 638.9 1903.1 638.6 1902.8 638.5 1902.5 637.8 1902.5 637.4 1902.3 637.1 1902 637.1 1901.8 636.5 1901.9 636.3 1901.2 635.9 1900.9 635.7 1900.5 635.1 1900.8 634.9 1900.6 634.7 1900.4 634.4 1900.4 633.9 1899.9 633.6 1899.9 633 1899.7 632.7 1900 632.7 1900.1 632.4 1900 632.2 1899.4 632.2 1899.2 631.9 1899.7 631.2 1899.4 630.9 1899.6 630.8 Z">
+    </path>
+    <path class="New Caledonia" d="M 1900.7 631.1 1900.4 631 1900.5 630.6 1900.7 631.1 Z">
+    </path>
+    <path class="New Caledonia" d="M 1898.4 628.7 1898.2 628.9 1898.1 628.5 1898.3 628.3 1898.4 628.7 Z">
+    </path>
+    <path iso2="NR" name="Nauru" d="M1933 505.3l-0.2 0-0.1-0.3 0.3 0 0 0.3z">
+    </path>
+    <path iso2="PW" name="Palau" d="M1747.7 453.1l-0.2 0.4 0.1 0.1-0.2 0.6 0.1 0.2-0.5 0.2-0.2-0.7 0.3-0.2-0.2-0.2 0.3-0.6 0.3-0.1 0.2 0.3z">
+    </path>
+    <path iso2="PR" name="Puerto Rico" d="M 607.1 385.9 606.8 385.7 606.9 385.5 607.2 385.5 607.3 385.6 607.1 385.9 ZM 621.7 385.4 621.5 385.4 620.6 385.7 620 385.7 620.2 385.5 620.6 385.3 621 385.2 621.6 385.3 621.7 385.4 ZM 612.2 383 612.8 383.1 613.4 383.1 613.7 383.2 614.3 383.1 614.6 383.2 615 383.1 615.2 383.2 615.7 383.1 616.1 383.2 616.4 383.2 617.2 383.4 617.2 383.2 617.8 383.4 617.9 383.3 618.7 383.4 618.9 383.6 619.1 383.6 619.7 383.9 619.9 383.8 619.8 384.5 620 384.8 619.1 385.1 618.8 385.5 618.5 386.1 618.2 386.3 617.9 386.4 617.5 386.4 616.9 386.5 616.6 386.7 615.9 386.6 615.7 386.4 615.2 386.6 614.9 386.3 614.2 386.5 613.3 386.4 613 386.5 612.4 386.6 612.2 386.7 612 386.5 611.6 386.4 611.3 386.6 610.7 386.5 611 385.8 611 385.4 611.2 385 611 384.4 610.8 384.3 610.7 383.9 611.1 383.7 611.3 383.6 611.3 383.1 611.7 382.9 612.2 383 Z">
+    </path>
+    <path iso2="FP" name="French Polynesia" d="M 195.3 679.3 195.2 679.2 195 678.9 195.1 678.7 195.4 678.9 195.3 679.3 ZM 205.6 641.2 205.5 641.3 205.2 641.1 205.4 640.9 205.6 641.2 ZM 199.4 616.5 199.2 616.4 199.4 615.8 199.9 615.4 200.2 615.4 200.2 615.6 200 616 199.4 616.5 ZM 151.7 615.5 152.4 615.7 152.7 616.1 152.7 616.4 152.5 616.5 152 616.4 151.6 615.8 151.5 615.6 150.9 615.8 150.7 615.8 150.1 615.7 149.9 615.3 149.6 614.8 149.6 614.5 149.7 614.3 150.2 614.2 150.7 614.2 151.2 614.4 151.4 614.8 151.5 615.4 151.7 615.5 ZM 148.7 614 148.5 614.6 148 614.4 148.1 614.1 148.6 613.9 148.7 614 ZM 141.1 609.7 140.9 609.8 140.7 609.5 141 609.4 141.1 609.7 ZM 139 610.1 138.7 610.3 138.4 610.3 138.2 609.5 138.4 609.3 139.1 610.1 139 610.1 ZM 138 608.3 138.2 608.4 138.2 608.9 137.8 608.7 137.7 608.4 138 608.3 ZM 166.3 605.4 166 605.5 166.1 605.2 166.3 605.4 ZM 204.3 569.5 204 569.5 204 569.1 203.8 568.8 204.2 568.9 204.3 569.3 204.3 569.5 ZM 201.2 566 201 566 201 565.6 201.2 565.3 201.5 565.5 201.3 565.7 201.2 566 ZM 202.4 564.4 202.4 564.7 202 564.8 201.4 564.8 201.4 565.1 201 565 200.8 564.8 200.7 564.5 201.4 564.1 201.7 564.1 201.9 564.3 202.4 564.4 ZM 195.5 561.8 195.5 562.2 195.5 562.4 195.2 562.4 194.9 562 195.2 561.7 195.5 561.8 ZM 197.9 558.8 198.2 558.9 198.3 559 197.7 559.2 197.6 558.9 197.9 558.8 ZM 194.2 558.2 195.1 558.3 195.4 558.6 195.4 558.8 195 559.1 194.2 559.1 194.1 558.6 194 558.2 194.2 558.2 Z">
+    </path>
+    <path iso2="SB" name="Solomon Islands" d="M 1926.8 576.2 1927.1 576.4 1927 576.8 1927.3 576.8 1927.3 577 1926.5 577 1926.2 576.5 1926.4 576.2 1926.8 576.2 ZM 1888.5 575.6 1888.7 575.6 1889.7 576.4 1890.2 576.7 1891.1 577.4 1891 577.7 1890.8 577.7 1890.6 577.9 1890.4 577.6 1890.3 577.6 1890.1 577.4 1890 577 1889.6 576.9 1889.6 576.6 1889.3 576.5 1889.2 576.6 1889 576.6 1888.1 576.2 1887.9 575.8 1888.2 575.4 1888.5 575.6 ZM 1925.4 574.1 1925.2 574.4 1924.9 574.2 1924.9 574 1925.2 573.8 1925.4 574.1 ZM 1923.1 570.2 1923.2 570.3 1923.5 570.3 1923.4 570.7 1922.9 570.9 1922.6 570.9 1922.2 571 1921.8 571.6 1921.7 571.3 1921.4 571.4 1921.2 571.2 1921.2 570.9 1921.7 570.8 1921.7 570.6 1922 570.2 1922.7 570.3 1923.1 570.2 ZM 1896.8 567.4 1897.1 567.3 1897.7 567.6 1898.2 568.1 1898.5 568.4 1898.7 568.4 1898.9 568.6 1899.1 568.6 1899.4 568.9 1899.7 568.8 1900.1 568.9 1900.3 569.1 1900.7 569.1 1901 569 1901.2 569.3 1901.4 570.1 1901.7 570.4 1901.7 570.9 1901.5 571.1 1901.6 571.4 1901.2 571.2 1900.9 571.4 1900.6 571.3 1900.1 571 1899.9 571 1899.3 570.8 1898.9 570.7 1898.7 570.4 1898.4 570.2 1898.1 570.1 1897.9 569.8 1897.5 569.6 1897.7 569.2 1897.6 568.8 1897.6 568.4 1897.4 568.3 1896.8 568.1 1896.5 568.2 1896.4 568 1896.5 567.7 1896.6 567.4 1896.8 567.4 ZM 1900.8 564 1900.7 564.2 1900.7 564.9 1900.5 564.7 1900.5 564.2 1900.8 564 ZM 1897.9 562.2 1898.2 563.1 1898.4 563.5 1898.4 563.9 1898.5 564.4 1898.3 564.7 1897.9 564 1897.8 564.3 1897.5 563.8 1897.6 562.8 1897.7 562.6 1897.7 562.3 1897.9 562.2 ZM 1889.5 562.4 1889.8 562.4 1890.1 562.3 1890.5 562.4 1890.6 562.3 1891.1 562.3 1891.9 562.3 1892.1 562.6 1892.4 562.7 1892.6 563 1892.8 563 1893 563.1 1893.4 563.5 1893.4 564.1 1893.6 564.1 1894 564.3 1894.1 564.6 1894.1 565.2 1894 565.3 1893.3 565.5 1893.1 565.6 1892.7 565.5 1892.3 565.3 1891.9 565.3 1891.8 565.1 1891.3 564.8 1890.7 564.8 1890.2 564.9 1889.7 564.9 1889.2 564.8 1888.9 564.6 1888.6 564.7 1888.3 564.3 1888 564.1 1887.7 563.3 1887.5 562.9 1887.7 562.7 1887.6 562.5 1887.6 561.8 1887.7 561.5 1888.3 561.2 1888.7 561.4 1889.1 561.9 1889.2 562.2 1889.5 562.4 ZM 1891.8 560 1892.3 560.5 1892 560.8 1891.7 560.6 1891.7 560.5 1891.8 560 ZM 1891.8 560 1891.6 560.4 1891.5 560.4 1891.1 560.1 1890.8 560.2 1890.6 560.1 1890.5 559.9 1890.8 559.8 1891 559.6 1891.5 559.7 1891.8 560 ZM 1885.2 559.5 1885.3 559.7 1885.5 559.8 1885.3 560.2 1884.9 560.4 1884.6 560 1885.2 559.5 ZM 1876.7 557.7 1876.9 558 1876.8 558.3 1876 557.9 1876.5 557.6 1876.7 557.7 ZM 1880.1 558.5 1879.8 558.3 1879.9 558 1880.2 557.7 1880.2 558.2 1880.3 558.4 1880.1 558.5 ZM 1879.2 556.7 1879.4 556.6 1879.8 556.6 1879.8 556.8 1879.4 557.1 1879.6 557.3 1879.6 557.6 1879.2 558 1879 558.1 1878.7 558 1878.3 557.6 1878.4 557 1878.7 556.9 1878.9 556.5 1879.2 556.4 1879.2 556.7 ZM 1875.6 556.8 1875.4 556.9 1875.2 557.4 1875.6 557.9 1875.1 557.7 1875.1 557.5 1875 557.2 1874.6 556.8 1874.6 556.6 1875 556.4 1875.1 556.1 1875.5 555.8 1875.8 556 1875.8 556.4 1875.6 556.8 ZM 1888.5 556.3 1888.7 556.5 1888.6 556.7 1888.4 556.6 1887.8 556.1 1888 555.7 1888.3 555.6 1888.5 555.8 1888.4 556.1 1888.5 556.3 ZM 1895 555.5 1895.4 556.3 1896 557.1 1896 557.4 1895.6 557.6 1895.6 558.1 1895.6 558.4 1895.7 558.6 1895.9 558.6 1896.1 558.9 1896.6 559.3 1896.7 559.8 1896.8 560.1 1897 560.3 1896.8 560.5 1897.1 560.8 1897 560.9 1897.1 561.4 1896.9 561.6 1897.2 561.9 1897.3 562.4 1897.5 562.9 1897.5 563.5 1897.4 563.6 1897.1 563.3 1896.8 562.8 1896.8 562.5 1896.5 562.1 1896.1 561.8 1895.8 561.5 1895.3 560.9 1894.9 560.6 1894.6 559.7 1894.4 558.7 1894.2 558 1894.2 557.5 1894.1 557.1 1894.5 556.7 1894.4 556.4 1893.9 555.7 1893.8 555.4 1893.9 555.3 1894.3 555.4 1894.5 555.5 1894.8 555.2 1895 555.5 ZM 1874.3 555.2 1874.1 554.8 1873.8 554.5 1874.2 554.5 1874.3 555.2 ZM 1874.2 554.2 1874.6 554.3 1874.7 554.4 1874.8 554.9 1874.6 554.9 1874.4 554.5 1874.2 554.2 ZM 1877.3 554.4 1877.2 554.7 1877.4 554.7 1877.9 554.7 1878.3 555.4 1878.3 555.6 1878.5 555.9 1878.6 556.4 1878.4 556.6 1878.4 556.9 1877.8 556.7 1877.6 556.5 1877.3 556.5 1876.9 556.2 1876.8 556 1876.7 555.7 1877.1 555.8 1876.8 555 1876.7 554.8 1876.2 554.9 1876 555 1875.6 555 1875.3 555.4 1874.9 555.2 1874.9 554.6 1875.1 554.4 1875.5 554.4 1875.5 554 1875.9 553.4 1876.3 553.1 1876.6 552.9 1877 553.2 1877.2 553.6 1877.1 554.3 1877.3 554.4 ZM 1871.4 554.4 1871.3 554.4 1871.1 553.6 1871.2 553.3 1871.2 552.9 1871.4 553 1871.5 553.4 1871.5 554.1 1871.4 554.4 ZM 1874.8 553.9 1874.5 554.1 1874.4 554 1874 554 1873.7 553.7 1873.6 553.4 1873.5 553.1 1873.6 552.8 1873.9 552.4 1874.4 552.2 1874.6 552.4 1874.9 552.9 1874.9 553.5 1874.8 553.9 ZM 1871.8 550.4 1872.2 550.9 1872.2 551 1872.9 551.4 1872.8 551.7 1872.2 552.4 1872.2 552.7 1871.9 552.8 1871.9 552.4 1871.7 552.4 1871.7 552 1871.5 551.6 1871.2 551.4 1871.1 551.1 1871.2 550.8 1871.4 550.6 1871.6 550.4 1871.8 550.4 ZM 1882.1 550.5 1882.4 550.7 1882.2 550.8 1881.7 550.9 1881.6 550.6 1881.8 550.4 1882.1 550.5 ZM 1883 550.5 1883.2 550.4 1883.7 550.7 1884 550.8 1884.2 551 1884.5 551.5 1884.8 551.6 1885.1 551.9 1885.1 552.2 1885.6 552.3 1885.6 552.6 1885.9 552.7 1886.2 552.6 1886.3 552.7 1886.7 552.9 1886.8 553.1 1887.1 553 1887.4 553.1 1887.5 553.4 1887.9 553.7 1888.2 554 1888.6 554.3 1889.6 555.3 1889.3 555.7 1889.6 556.2 1889.7 556.8 1889.4 556.7 1889.1 556.3 1888.4 555.5 1888 555.4 1887.5 555 1886.9 554.9 1886.8 554.6 1886.2 554.4 1885.7 553.9 1885.5 553.9 1884.7 553.3 1884.2 553 1884.2 552.8 1883.8 552.6 1883.6 552.4 1883.4 552 1883 551.7 1882.9 551.5 1882.9 551.1 1882.5 550.6 1882.3 550.5 1882.3 550.2 1883 550.5 ZM 1881.5 549.9 1881.7 550.1 1881.9 550 1882.2 550.2 1882.1 550.4 1881.8 550.3 1881.5 549.9 ZM 1877 549.3 1877.5 549.3 1877.3 549.5 1877 549.4 1877 549.3 ZM 1881.3 549.3 1881.1 549.8 1881 549.6 1881.3 549.3 ZM 1878.6 549.7 1878.1 549.8 1877.9 549.6 1878.2 549.2 1878.5 549.3 1878.6 549.7 ZM 1866.1 548.8 1866.3 549.1 1866.1 549.3 1865.8 549.2 1865.7 549.1 1866.1 548.8 ZM 1867.6 546.9 1867.9 547.1 1867.8 547.4 1867.1 547.6 1866.8 547.3 1867.1 546.7 1867.3 546.6 1867.6 546.9 ZM 1869.3 546 1869.3 546.5 1869.1 546.3 1869.1 546.1 1869.3 546 ZM 1872.2 544.5 1872.5 544.6 1872.9 545.1 1873.2 545.3 1873.5 545.4 1873.8 545.7 1874.6 546.1 1875 546.6 1875 547 1875.1 547.6 1875.3 547.8 1875.6 548.1 1875.8 548.1 1875.9 548.5 1876.6 548.8 1877 548.7 1877.1 548.8 1877.1 549.1 1876.8 549.2 1876.6 549.5 1876.1 549.3 1875.3 548.9 1874.8 548.9 1874.5 548.5 1873.8 548.1 1873.2 547.1 1872.6 546.1 1872.1 545.8 1871.4 545.1 1871.4 544.6 1871.4 544.4 1871.7 544.2 1872 544.3 1872.2 544.5 Z">
+    </path>
+    <path iso2="ST" name="São Tomé and Príncipe" d="M 1023.9 501.3 1023.7 501.3 1023.5 501.6 1023.3 501.6 1023.2 501.2 1023 500.4 1023 500.1 1023.4 499.6 1023.7 499.5 1024 499.2 1024.4 499.3 1024.6 499.7 1024.7 500 1024.6 500.4 1024.4 500.7 1024.1 501.1 1023.9 501.3 ZM 1028.5 491.5 1028.4 491.8 1028.2 491.9 1027.9 491.8 1027.9 491.5 1028.1 491.4 1028.1 491.1 1028.3 490.9 1028.6 491 1028.5 491.5 Z">
+    </path>
+    <path iso2="SX" name="Sint Maarten" d="M634.2 386l0 0.1-0.4-0.1 0-0.1 0.4 0.1z">
+    </path>
+    <path iso2="SC" name="Seychelles" d="M 1249 562.1 1248.7 562.3 1248.2 562.3 1247.8 562.5 1247.4 562.5 1247.4 562.3 1247.9 562.3 1248.3 562.2 1248.7 561.9 1248.9 561.9 1249 562.1 ZM 1248.5 561.8 1248.3 561.9 1247.9 561.9 1247.9 561.7 1248.5 561.8 ZM 1300.4 531.5 1300.8 531.9 1300.6 532.2 1300.4 531.9 1300.1 531.7 1300.3 531.2 1300.4 531.5 Z">
+    </path>
+    <path iso2="TC" name="Turks and Caicos" d="M 587.7 361.6 588.4 361.6 588.7 362 588.4 362 588.1 361.9 587.6 362 587.5 361.7 587.7 361.6 ZM 585 361.5 585.3 361.9 585.9 361.8 585.7 362 585.1 362 584.7 361.8 585 361.5 ZM 587.2 360.9 587.2 361.4 586.7 361.2 586.6 360.9 586.7 360.8 587.2 360.9 Z">
+    </path>
+    <path iso2="TO" name="Tonga" d="M 14.7 639.5 14.2 639.2 14.2 639 14.5 638.8 14.7 639.5 ZM 11.9 637.4 12.2 637.4 12.6 637.7 12.9 637.8 13.1 637.4 13.4 637.7 13.1 638 13.2 638.2 13.1 638.4 12.9 638.3 12.6 638 11.9 637.8 11.9 637.4 ZM 11.1 628.8 10.9 628.9 10.8 628.4 11 628.5 11.1 628.8 ZM 15.5 621.3 15 621.6 14.8 621.6 14.7 621.5 15 621 15.3 621.1 15.5 621.3 ZM 1.4 602 1.3 602.1 1 602 1.1 601.8 1.4 601.8 1.4 602 Z">
+    </path>
+    <path iso2="TT" name="Trinidad and Tobago" d="M 642.8 432.2 642.6 432.7 642.3 433.1 642.1 433.2 642 433.6 642.2 434.2 642 434.3 642 435 642.2 435.3 642.4 435.5 642.2 435.7 642.1 436 642.1 436.7 641.9 436.8 641.5 437 641 437.1 640.7 437.1 640.2 437.2 639.7 437.1 639.3 437.2 639 437.1 638.5 437.3 638.1 437.1 637.5 437.1 637.2 437.3 636.9 437.2 637.4 437 637.7 436.7 638.1 436.6 638.5 436.3 638.7 436 639.3 436.1 639.6 435.7 639.4 434.9 639.6 434.5 639.6 434 639.6 433.8 639.3 433.4 639 433.3 638.6 433.2 638.5 433.1 638.9 432.8 640 432.7 640.2 432.5 641.3 432.5 641.4 432.4 642.6 432.2 642.8 432.2 ZM 645.2 429 645.1 429.5 644.8 429.6 644.4 429.9 644.2 429.9 643.5 430.3 643.3 430.1 643.6 429.8 644.3 429.3 645.2 429 Z">
+    </path>
+    <path iso2="TV" name="Tuvalu" d="M1998.9 556.6l0-0.2 0.1 0 0 0.1-0.1 0.1z">
+    </path>
+    <path iso2="VC" name="Saint Vincent and the Grenadines" d="M642.2 417.4l-0.1 0.1-0.5-0.3 0-0.4 0.2-0.3 0.2-0.5 0.4 0 0.1 0.4-0.1 0.8-0.2 0.2z">
+    </path>
+    <path iso2="VG" name="Virgin Islands, British" d="M626.1 383.4l-0.4 0.2-0.1 0-0.3 0.2-0.1-0.1 0.1-0.3 0.6-0.1 0.2 0.1z">
+    </path>
+    <path iso2="VI" name="U.S Virgin Islands" d="M 624.5 387.8 624.8 388.1 623.7 388.3 623.6 387.8 624.3 387.6 624.5 387.8 ZM 625.2 384 625 384.2 624.5 384.2 624.5 384 624.8 383.9 625.2 384 ZM 623.8 383.8 624.2 384.1 624 384.3 623.7 384.1 623.2 384.1 623.4 383.9 623.8 383.8 Z">
+    </path>
+    <path iso2="VU" name="Vanuatu" d="M 1931.8 631.8 1931.3 631.6 1931.5 631.2 1932 631.1 1932.2 631.5 1932.1 631.7 1931.8 631.8 ZM 1930.6 628 1930.4 628 1930.1 627.9 1929.7 627.4 1929.6 627 1929.6 626.6 1929.8 626.4 1929.9 626 1930.2 625.9 1930.6 625.9 1930.4 626.2 1930.4 626.7 1931.1 627.2 1930.8 627.5 1930.6 628 ZM 1930.6 622.1 1930.9 622.1 1931 622.3 1930.5 622.4 1930.6 622.7 1931 622.9 1931.1 623.2 1931 623.6 1930.6 623.7 1930.2 623.4 1929.8 623.4 1929.6 623.2 1929.3 623 1929.4 622.6 1929.4 622.3 1929.6 621.8 1929.9 621.4 1930.4 621.4 1930.6 621.5 1930.5 621.9 1930.6 622.1 ZM 1927.6 614.5 1928.2 614.4 1928.3 614.5 1928.5 615.1 1928.7 615.4 1928.8 615.5 1928.4 616.1 1927.6 616.3 1927.3 616 1927.2 615.5 1926.9 615.4 1926.5 615.7 1926.4 615.6 1926.6 615.2 1927 614.9 1927.4 614.4 1927.6 614.5 ZM 1929.9 610.6 1929.8 610.3 1930.1 610.3 1929.9 610.6 ZM 1928.3 608.2 1928.4 608.7 1928.4 608.9 1928.8 609 1929 609.5 1929.5 609.5 1929.5 609.9 1929.4 610 1929.1 609.7 1928.8 609.6 1928.2 609.8 1927.9 609.7 1927.8 609.5 1927.7 609.1 1927.9 608.6 1928.1 608.3 1928.3 608.2 ZM 1929.2 608 1929.1 608 1929 607.7 1929.2 607.7 1929.2 608 ZM 1929.4 606.6 1929.2 606.8 1928.6 606.8 1928.3 606.9 1928.1 606.7 1927.7 606.6 1927.2 606.2 1927.3 606 1927.8 605.8 1928.2 605.7 1928.6 605.4 1928.7 605.1 1928.9 605.1 1929 605.4 1929 606 1929.5 606.4 1929.4 606.6 ZM 1924.7 605.3 1924.9 605.6 1925.5 606 1926.2 606.7 1926.3 606.8 1926.3 607.2 1926.5 607.5 1926.2 607.7 1925.8 608.1 1925.8 607.9 1925.5 607.8 1925.1 607.8 1924.9 607.9 1924.9 608.1 1924.5 608.3 1924.2 608.2 1924.2 607.5 1924.1 606.9 1924.2 606.3 1924.3 605.8 1924.1 605.3 1923.5 605.6 1923.3 605.4 1923.2 605.1 1923.2 604.8 1923.5 604.5 1923.5 604.1 1923.6 603.8 1923.9 603.7 1924.5 604 1924.4 604.2 1924.6 604.7 1924.5 604.9 1924.7 605.3 ZM 1924.1 602.9 1923.8 602.9 1923.3 602.6 1923.3 602.5 1923.5 602.2 1923.7 602.1 1924.2 602.2 1924.1 602.6 1924.1 602.9 ZM 1923.6 601.9 1924 601.6 1924.1 601.7 1924.2 602 1923.7 602 1923.6 601.9 ZM 1929.3 604.5 1929.1 604.4 1929.2 603.2 1929.1 602.9 1929.2 602.4 1929.5 601.6 1929.6 601.1 1929.8 601.7 1929.7 602 1929.7 602.6 1929.7 603.6 1929.6 604.2 1929.3 604.5 ZM 1928 601.2 1927.3 601.2 1927 601.1 1927 600.9 1927.9 600.2 1928.4 600 1928.9 599.9 1928.9 600.1 1928.6 600.5 1928.4 600.8 1928 601.2 ZM 1929.9 600.5 1929.9 600.7 1929.6 600.7 1929.7 600.4 1929.9 599.1 1929.9 599 1930 597.8 1930.2 597.9 1930.1 599.2 1930.2 599.5 1930.1 600 1929.9 600.5 ZM 1923.6 601.9 1922.7 601.8 1922.1 602.1 1922 602.3 1921.8 602.3 1921.7 601.7 1921.5 601.6 1921.1 600.6 1921.5 599.8 1921.5 599.4 1921.4 599.2 1921.4 597.8 1921.3 597.5 1921.3 597 1921.5 596.7 1921.5 596.4 1921.7 596.1 1921.7 595.9 1922 595.8 1922.1 596.3 1922.3 596.7 1922.5 597 1922.6 598.3 1922.5 599.1 1922.5 599.2 1923.1 599.1 1923.4 598.8 1923.6 598 1923.6 597.8 1923.9 597.6 1924.2 597.7 1924.1 598.1 1924.1 599 1924.4 599.1 1924.4 599.6 1924.2 599.7 1924.5 600.1 1924.3 600.3 1924.3 600.8 1924.5 601.3 1924.4 601.5 1924.1 601.5 1923.6 601.9 ZM 1927.8 592.6 1928.2 592.9 1928.1 593.3 1927.8 593.6 1927.6 593.8 1927 593.8 1927 593.4 1927.1 593 1927.3 592.7 1927.8 592.6 ZM 1928.4 590.7 1928.1 590.9 1927.9 591 1927.9 591.2 1927.7 591.3 1927.7 591 1927.5 590.8 1927.4 590.5 1927.5 590.1 1927.7 590 1928.1 589.8 1928.2 590 1928.3 590.4 1928.3 590.5 1928.4 590.7 ZM 1923.4 586.5 1923.3 586.4 1923.4 585.9 1923.6 586.1 1923.4 586.5 Z">
+    </path>
+    <path iso2="WS" name="Samoa" d="M 21.9 591.3 22.2 591.4 22.5 591.5 22.8 591.7 22.7 592 21.7 592 21.4 591.9 21.1 592 20.9 591.9 20.5 591.7 20.2 591.8 19.9 591.6 19.7 591.4 19.1 591.1 19.2 590.7 19.6 590.5 20 590.5 20.5 590.5 21.4 590.9 21.9 591 21.9 591.3 ZM 17.4 588.5 18 589.1 18.2 589.8 18.1 590.1 18.2 590.4 17.9 590.4 17.6 590.2 17.3 590.4 16.4 590.5 16.1 590.2 15.9 589.8 15.7 589.7 15.4 589.4 14.9 589 14.7 588.8 14.7 588.6 15.1 588.7 15.4 588.6 16 588.4 16.4 588.4 16.9 588.3 17.2 588.3 17.4 588.5 Z">
+    </path>
+    <path iso2="BQBO" name="Netherlands" d="M602 424.6l-0.2 0-0.1-0.5 0.1-0.3-0.1-0.3-0.4-0.1-0.3-0.3 0.1-0.3 1.2 0.6-0.1 0.2 0 0.4-0.2 0.2 0 0.4z">
+    </path>
+    <path iso2="BQSE" name="St. Eustatius (Netherlands)" d="M634.3 389.6l-0.2 0.1 0-0.2 0.1-0.1 0.1 0.2z">
+    </path>
+    <path iso2="BQSA" name="Saba (Netherlands)" d="M632.8 388.7l-0.1 0 0.1-0.2 0.1 0.1-0.1 0.1z">
+    </path>
+    <path iso2="MQ" name="Martinique" d="M644 406.9l0 0.2 0.4-0.1-0.2 0.5 0.2 0.2 0 0.2 0.2 0.2 0.2 0.9-0.3 0.3-0.1-0.4-0.1 0.1-0.6-0.1-0.4 0-0.2-0.3 0.6-0.5-0.4 0-0.4-0.4-0.1-0.5-0.2-0.5 0.3-0.4 0.4 0.1 0.5 0.3 0.2 0.2z">
+    </path>
+    <path iso2="YT" name="Mayotte" d="M1240.2 583.1l0.2 0.3 0.5 0.2 0 0.3-0.2 0.2 0.1 0.2-0.3 0.6 0.1 0.2-0.3 0.1-0.2-0.3 0-0.3 0.2-0.2-0.2-0.7-0.1-0.1-0.1-0.2 0.3-0.3z">
+    </path>
+    <path iso2="RE" name="Réunion" d="M1295 635.8l0.4 0 0.4 0.2 0.3 0.3 0 0.3 0.1 0.5 0.3 0.2 0.2 0.2 0.1 0.2-0.2 0.6-0.1 0.4-0.2 0.2-0.4 0.1-0.9 0-0.2-0.2-0.8-0.4-0.3-0.5 0-0.3-0.3-0.6 0.1-0.4 0.2-0.2 0.2-0.4 0.1 0 0.5-0.2 0.5 0z">
+    </path>
+    <path iso2="GP" name="Guadeloupe" d="M 643 399.9 642.7 399.9 642.5 399.5 642.6 399.3 642.9 399 643.2 399.2 643.3 399.5 643.3 399.7 643 399.9 ZM 641.2 397.3 641.5 397.3 641.5 397.5 641.5 397.6 641.3 397.7 641.3 398.5 641.3 398.9 641.1 399.1 640.5 399.4 640.5 399.2 640.3 399 640.2 398.5 640.2 398 640.1 397.5 640.1 397.2 640.3 396.9 640.6 396.8 641.1 397.1 641.2 397.3 ZM 642.6 396.9 643 397 643.5 397.4 642.2 397.7 641.9 397.8 641.5 397.5 641.6 396.9 641.8 396.8 641.7 396.2 641.8 396 642.1 395.8 642.4 396.2 642.4 396.6 642.6 396.9 Z">
+    </path>
+    <path iso2="FJ" name="Fiji" d="M 1989.1 624.9 1988.8 625 1988.9 624.6 1989.1 624.9 ZM 1981.6 623.3 1981.8 623.5 1982.1 623.6 1982.1 623.9 1981.6 624.1 1981.1 623.8 1980.6 624.1 1980.3 624.1 1980.1 624.4 1980.2 624.7 1979.8 624.6 1979.7 624.8 1979.3 624.7 1979.2 624.8 1978.8 624.6 1979.1 624.5 1979.3 624.4 1979.5 624.2 1979.9 624.3 1980.2 624 1980.4 623.7 1980.9 623.6 1981.4 623.3 1981.6 623.3 ZM 1982.5 623.2 1982.3 623.3 1982.1 623.2 1982.3 623 1982.5 623.2 ZM 1988.4 617.1 1988.5 617.6 1988.3 618.2 1988.2 618 1988.1 617.6 1987.9 617.6 1988 617.1 1988.2 617 1988.4 617.1 ZM 1985.8 615.7 1985.7 615.7 1985.6 615.3 1985.8 615.1 1986.2 615 1986.2 615.4 1986 615.6 1985.8 615.7 ZM 1983.6 613.2 1983.5 613.6 1983.8 613.8 1983.9 614.1 1984.2 614.5 1984.5 614.6 1984.6 614.9 1984.8 614.9 1984.9 615.3 1984.6 615.8 1984.7 616 1984.8 616.5 1984.5 616.7 1984.5 617.2 1984.7 617.2 1984.8 617.7 1984.5 618 1983.9 618.2 1983.8 618 1983.5 618.1 1983.4 618.3 1983.1 618 1982.3 618.3 1981.5 619 1981.2 618.9 1980.8 619.1 1980.5 619 1979.9 619.1 1979.6 618.9 1978.7 618.6 1978.4 618.5 1977.8 618.4 1977.6 618.3 1977.1 618.1 1976.9 617.1 1977.2 616.4 1977.5 616.4 1977.8 616.3 1977.9 615.8 1978.2 615.7 1978.3 615.3 1978.1 615.1 1978.7 614.7 1979.1 614.2 1979.2 614.3 1979.8 613.8 1980 613.8 1980.9 613.4 1981.5 613.6 1981.8 613.5 1982.3 613.3 1982.9 613.2 1983.2 612.9 1983.6 613.2 ZM 1989.9 613.4 1989.7 613.5 1989.9 612.6 1990.3 612.6 1990.2 613 1989.9 613.4 ZM 1978.5 611.4 1978.3 611.7 1977.8 612 1977.8 611.7 1978.2 611.3 1978.5 611.4 ZM 1993.4 611 1993.2 610.8 1993.3 610.6 1993.8 610.1 1994.1 609.6 1993.8 610.7 1993.4 611 ZM 1994.4 606 1994 606.4 1993.2 607.5 1992.9 607.6 1992.2 608 1992 608.6 1991.6 608.8 1991.4 609.1 1991.3 609.3 1991.6 609.4 1992.2 609.1 1992.3 609 1992.6 608.7 1992.8 608.4 1993.4 608.1 1993.7 607.8 1994.3 607.5 1994.3 607.8 1993.8 608.5 1993.6 608.6 1993.7 609.2 1993.4 609.5 1993.1 609.2 1992.7 609.2 1992.2 609.3 1991.8 609.6 1991.1 609.7 1990.1 609.7 1990.6 609.2 1990.2 609 1989.6 609.2 1989.2 609.4 1989.2 609.6 1988.9 609.7 1988.7 609.8 1988.6 610.2 1988.4 610.5 1988.1 610.4 1988.1 610.2 1987.7 610.1 1987.3 610.3 1987.1 610.8 1986.8 611 1986.5 611 1986.5 610.7 1986.5 610.3 1986.3 609.9 1986.4 609.7 1986.3 609.6 1985.7 609.8 1985.7 609.4 1986.1 609.1 1986.2 609.1 1986.1 608.6 1986.4 608.5 1986.9 608.8 1987.5 608.4 1987.7 608.4 1988 608.1 1988.2 608.1 1988.5 607.8 1988.5 607.6 1989.3 607.5 1990.2 607.2 1990.5 607.1 1990.9 607.2 1991.4 607 1991.6 606.6 1991.8 606.6 1992 606.2 1992.4 606.3 1992.5 606.1 1992.7 606.2 1993.7 605.7 1993.8 606 1994 605.9 1994.2 606 1994.5 605.7 1995 605.5 1995.1 605.6 1994.6 606 1994.4 606 Z">
+    </path>
+</svg>`;
diff --git a/packages/chart/src/wrapper/Chart.module.css b/packages/chart/src/wrapper/Chart.module.css
new file mode 100644
index 0000000..cfeba65
--- /dev/null
+++ b/packages/chart/src/wrapper/Chart.module.css
@@ -0,0 +1,90 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+.chartContainer {
+  & > div:last-child:not(:first-child) > :last-child {
+    top: 0;
+    right: unset !important;
+    bottom: unset !important;
+    left: unset !important;
+    inset-inline-end: 0 !important;
+
+    padding: 0.5rem;
+
+    & > div {
+      float: unset !important;
+      margin: 0 !important;
+    }
+  }
+}
+
+.chartToolbar {
+  input[type="range"] {
+    position: relative;
+
+    overflow: hidden;
+
+    color: theme(colors.primary.500);
+
+    appearance: none;
+    border-radius: 999px;
+
+    &::-webkit-slider-thumb {
+      cursor: pointer;
+
+      position: relative;
+
+      width: 1rem;
+      height: 1rem;
+
+      appearance: none;
+      opacity: 0.7;
+      background: theme(colors.primary.500);
+      clip-path: polygon(
+        100% -1px,
+        0.125rem -1px,
+        0 0.375rem,
+        -100vmax 0.375rem,
+        -100vmax 0.625rem,
+        0 0.625rem,
+        0.125rem 100%,
+        calc(100% + 1px) calc(100% + 1px)
+      );
+      filter: brightness(100%);
+      border: 1px solid theme(colors.tint.50);
+      border-radius: 0.5rem;
+      box-shadow: calc(-100vmax - 1rem) 0 0 100vmax currentColor;
+
+      &:hover {
+        background: theme(colors.primary.600);
+      }
+    }
+
+    &&::-webkit-slider-runnable-track {
+      height: 1rem;
+      background: linear-gradient(theme(colors.tint.100) 0 0) scroll no-repeat
+        center / 100% 0.25rem;
+      border-radius: 99px;
+    }
+  }
+}
diff --git a/packages/chart/src/wrapper/ChartContainer.tsx b/packages/chart/src/wrapper/ChartContainer.tsx
new file mode 100644
index 0000000..aad100b
--- /dev/null
+++ b/packages/chart/src/wrapper/ChartContainer.tsx
@@ -0,0 +1,217 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  Button,
+  CoreIcons,
+  EmptyContent,
+  Title,
+  useIsDark,
+  useResizeObserver,
+} from "@react-fabric/core";
+import { type SizeObject } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
+import { type EChartOption, type EChartsType } from "echarts";
+import "echarts-wordcloud";
+import {
+  Fragment,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+  type RefObject,
+} from "react";
+import { type Theme } from "../types";
+import echarts from "../types/charts";
+import classes from "./Chart.module.css";
+import { ChartToolbar } from "./ChartToolbar";
+
+const defaultOptions = {
+  grid: {
+    top: 32,
+    left: 64,
+    right: 32,
+    bottom: 72,
+  },
+  tooltip: {
+    trigger: "item",
+    confine: true,
+    position: "top",
+  } as AnyObject,
+  legend: {
+    type: "scroll",
+    bottom: 0,
+  } as AnyObject,
+};
+const toolboxOptions = (renderer: AnyObject) => ({
+  show: true,
+  feature: {
+    dataView: {
+      show: true,
+      readOnly: true,
+      textareaBorderColor: "transparent",
+      backgroundColor: "var(--fabric-bg)",
+      textareaColor: "var(--fabric-bg)",
+      textColor: "inherit",
+      optionToContent: renderer,
+    },
+  },
+});
+
+export const ChartContainer = memo(
+  ({
+    theme = "default",
+    title,
+    options,
+    children,
+    onResize,
+    onClick,
+    onExport,
+    isEmpty,
+    emptyIcon,
+    chartRef: _ref,
+    dataTableRenderer,
+  }: {
+    title?: string;
+    theme?: Theme;
+    isEmpty?: boolean;
+    emptyIcon?: string;
+    options: EChartOption;
+    children?: AnyObject;
+    chartRef?: RefObject<EChartsType>;
+    onClick?: (event: AnyObject) => void;
+    onExport?: (event: AnyObject) => void;
+    dataTableRenderer?: (opt: KeyValue) => string;
+    onResize?: (size: { width: number; height: number }) => void;
+  }) => {
+    const [chartRef, setChartRef] = useState<EChartsType>();
+    const isDark = useIsDark();
+
+    const handleResize = useCallback(
+      (size: SizeObject) => {
+        onResize?.(size);
+        chartRef?.resize(size);
+      },
+      [chartRef],
+    );
+    const containerRef = useResizeObserver(handleResize);
+
+    useImperativeHandle<EChartsType | undefined, EChartsType | undefined>(
+      _ref,
+      () => chartRef,
+      [chartRef],
+    );
+
+    const chartTheme = useMemo(
+      () => (isDark ? `${theme}_dark` : theme),
+      [theme, isDark],
+    );
+
+    useEffect(() => {
+      if (containerRef.current) {
+        const { offsetWidth: width, offsetHeight: height } =
+          containerRef.current;
+        const chartRef = echarts.init(containerRef.current, chartTheme);
+        chartRef.resize({ width, height });
+        onResize?.({ width, height });
+        setChartRef(chartRef);
+
+        return () => {
+          chartRef.dispose();
+        };
+      }
+    }, [chartTheme]);
+
+    useEffect(() => {
+      const chart = chartRef;
+      if (chart) {
+        onClick != null && chart.on("click", onClick);
+        return () => {
+          !chart.isDisposed() && chart.off("click");
+        };
+      }
+    }, [chartRef, onClick]);
+
+    const toolbox = useMemo(
+      () => toolboxOptions(dataTableRenderer),
+      [dataTableRenderer],
+    );
+
+    useEffect(() => {
+      chartRef?.setOption(
+        {
+          ...defaultOptions,
+          toolbox,
+          ...options,
+        },
+        true,
+      );
+    }, [options, chartRef]);
+
+    const handleExport = useCallback(() => {
+      const image = chartRef?.getDataURL({
+        type: "png",
+        excludeComponents: ["toolbox"],
+      });
+      onExport?.({ image, title });
+    }, [chartRef, onExport, title]);
+
+    return (
+      <Fragment>
+        <ChartToolbar>
+          {title && (
+            <Title className="flex-fill px-2 py-1 text-dimmed">{title}</Title>
+          )}
+          {children}
+          {onExport && (
+            <Button
+              size="sm"
+              variant="link"
+              icon={CoreIcons.exporter}
+              onClick={handleExport}
+              aria-label="export"
+            />
+          )}
+        </ChartToolbar>
+        <div
+          ref={containerRef}
+          className={classNames(
+            classes.chartContainer,
+            "overflow-hidden area-content",
+          )}
+        />
+        {isEmpty && (
+          <div className="absolute inset-0 bg-base grid place-content-center">
+            <EmptyContent
+              icon={emptyIcon ?? CoreIcons.chartLine}
+              message="Empty chart"
+            />
+          </div>
+        )}
+      </Fragment>
+    );
+  },
+);
+ChartContainer.displayName = "ChartContainer";
diff --git a/packages/chart/src/wrapper/ChartToolbar.tsx b/packages/chart/src/wrapper/ChartToolbar.tsx
new file mode 100644
index 0000000..626ab62
--- /dev/null
+++ b/packages/chart/src/wrapper/ChartToolbar.tsx
@@ -0,0 +1,40 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { type ChildrenProp } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
+import { type FC } from "react";
+import classes from "./Chart.module.css";
+
+export const ChartToolbar: FC<ChildrenProp> = ({ children }) => {
+  return (
+    <div
+      className={classNames(
+        "flex flex-nowrap items-center justify-end bg-base area-head",
+        classes.chartToolbar,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/packages/chart/src/wrapper/ChartWrapper.tsx b/packages/chart/src/wrapper/ChartWrapper.tsx
new file mode 100644
index 0000000..19e88f6
--- /dev/null
+++ b/packages/chart/src/wrapper/ChartWrapper.tsx
@@ -0,0 +1,46 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { ErrorBoundary } from "@react-fabric/core";
+import "echarts-wordcloud";
+import { type FC } from "react";
+
+const Error: FC<{ error?: string }> = ({ error = "" }) => {
+  return (
+    <div className="text-sm">
+      <span className="bg-danger text-white py-1 px-2 mx-2 rounded">Error</span>
+      <span>{error}</span>
+    </div>
+  );
+};
+
+export const ChartWrapper = ({ children }: { children?: JSX.Element }) => {
+  return (
+    <div
+      className="grid overflow-hidden area-content relative"
+      style={{ gridTemplate: `"head" auto "content" 1fr / 1fr` }}
+    >
+      <ErrorBoundary errorElement={Error}>{children}</ErrorBoundary>
+    </div>
+  );
+};
diff --git a/packages/chart/src/wrapper/PaletteSelect.tsx b/packages/chart/src/wrapper/PaletteSelect.tsx
new file mode 100644
index 0000000..54be4ef
--- /dev/null
+++ b/packages/chart/src/wrapper/PaletteSelect.tsx
@@ -0,0 +1,139 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  Button,
+  CoreIcons,
+  Dropdown,
+  Menu,
+  MenuItem,
+} from "@react-fabric/core";
+import { ChartPalette } from "../theme/palettes";
+
+const PaletteMap = ({ colors = [], label = "" }: KeyValue): AnyObject => (
+  <div className="flex items-center">
+    {colors.slice(0, 8).map((c: string) => (
+      <div
+        key={c}
+        className="inline-block rounded-full outline w-3 h-3 mx-px"
+        style={{ backgroundColor: c }}
+      />
+    ))}
+    <div className="text-xs text-muted px-2">{label}</div>
+  </div>
+);
+
+export const PaletteSelect = ({
+  onClick,
+  theme = "default",
+  defaultTheme = "default",
+}: KeyValue) => {
+  return (
+    <Dropdown>
+      <Button
+        icon={CoreIcons.palette}
+        aria-label="palette"
+        size="sm"
+        variant="link"
+      />
+      <Menu onClick={onClick}>
+        <MenuItem
+          id={defaultTheme}
+          icon={theme === defaultTheme ? "◉" : "◯"}
+          label={PaletteMap({ label: "Default", colors: ChartPalette.Default })}
+        />
+        <MenuItem
+          id="qualitative"
+          icon={theme === "qualitative" ? "◉" : "◯"}
+          label={PaletteMap({
+            label: "Qualitative",
+            colors: ChartPalette.Qualitative,
+          })}
+        />
+        <MenuItem
+          id="diverging"
+          icon={theme === "diverging" ? "◉" : "◯"}
+          label={PaletteMap({
+            label: "Diverging",
+            colors: ChartPalette.Diverging,
+          })}
+        />
+        <MenuItem
+          id="sequential"
+          icon={theme === "sequential" ? "◉" : "◯"}
+          label={PaletteMap({
+            label: "Sequential",
+            colors: ChartPalette.Sequential,
+          })}
+        />
+        <MenuItem
+          id="spectral"
+          icon={theme === "spectral" ? "◉" : "◯"}
+          label={PaletteMap({
+            label: "Spectral",
+            colors: ChartPalette.Spectral,
+          })}
+        />
+        <MenuItem
+          id="uber"
+          icon={theme === "uber" ? "◉" : "◯"}
+          label={PaletteMap({
+            label: "Uber Pool",
+            colors: ChartPalette.UberPool,
+          })}
+        />
+        <MenuItem
+          id="fireice"
+          icon={theme === "fireice" ? "◉" : "◯"}
+          label={PaletteMap({
+            label: "Fire Ice",
+            colors: ChartPalette.FireIce,
+          })}
+        />
+        <MenuItem
+          id="warming"
+          icon={theme === "warming" ? "◉" : "◯"}
+          label={PaletteMap({
+            label: "Global Warming",
+            colors: ChartPalette.GlobalWarming,
+          })}
+        />
+        <MenuItem
+          id="sunrise"
+          icon={theme === "sunrise" ? "◉" : "◯"}
+          label={PaletteMap({ label: "Sunrise", colors: ChartPalette.Sunrise })}
+        />
+        <MenuItem
+          id="ocean"
+          icon={theme === "ocean" ? "◉" : "◯"}
+          label={PaletteMap({ label: "Ocean", colors: ChartPalette.Ocean })}
+        />
+        <MenuItem
+          id="wine"
+          icon={theme === "wine" ? "◉" : "◯"}
+          label={PaletteMap({ label: "Wine", colors: ChartPalette.Wine })}
+        />
+      </Menu>
+    </Dropdown>
+  );
+};
diff --git a/packages/chart/stories/ActivityMap.mdx b/packages/chart/stories/ActivityMap.mdx
new file mode 100644
index 0000000..c26ecc8
--- /dev/null
+++ b/packages/chart/stories/ActivityMap.mdx
@@ -0,0 +1,73 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { ActivityMap } from "../src";
+import * as ActivityMapStories from "./ActivityMap.stories";
+
+<Meta of={ActivityMapStories} />
+
+<Title>Activity Map</Title>
+
+<Anchor storyId="animations">
+  <div className="hidden-anchor">
+    <Subheading>Activity Map</Subheading>
+  </div>
+</Anchor>
+
+<Description of={ActivityMap} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ActivityMapStories.Example} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="data">
+  <Subheading>Data Format</Subheading>
+</Anchor>
+
+```ts
+// Hours of day
+{
+    time: "day-hour",
+    data:[
+        // day 1
+        [[hour, day, count],...],
+        // day 2
+        [[hour, day, count],...]
+    ]
+}
+
+// Days of month
+{
+    time: "month-day",
+    data:[
+        // month 1
+        [[day, month, count],...],
+        // month 2
+        [[day, month, count],...]
+    ]
+}
+```
diff --git a/packages/chart/stories/ActivityMap.stories.tsx b/packages/chart/stories/ActivityMap.stories.tsx
new file mode 100644
index 0000000..1285c87
--- /dev/null
+++ b/packages/chart/stories/ActivityMap.stories.tsx
@@ -0,0 +1,81 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { Button, Panel } from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useCallback, useEffect, useState } from "react";
+import { ActivityMap } from "../src";
+
+const meta: Meta<typeof ActivityMap> = {
+  component: ActivityMap,
+  title: "@charts/ActivityMap",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: "children" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ActivityMap>;
+
+export const Example: Story = {
+  render: (args) => {
+    const [data, setData] = useState<AnyObject[]>([]);
+    const loadData = useCallback(() => {
+      const high = Array(7);
+      const low = Array(24);
+      setData(
+        Array.from(high, (_, day) =>
+          Array.from(low, (_, hour) => [
+            hour,
+            day,
+            faker.number.int({ min: 0, max: 99 }),
+          ]),
+        ),
+      );
+    }, []);
+    useEffect(() => {
+      loadData();
+    }, []);
+    return (
+      <Panel
+        maxWidth="48rem"
+        width="100vw"
+        height="24rem"
+        title="Activity Map chart"
+        actions={
+          <Button
+            aria-label="loadData"
+            variant="link"
+            icon="mdi mdi-refresh"
+            onClick={loadData}
+          />
+        }
+      >
+        <ActivityMap {...args} data={data} />
+      </Panel>
+    );
+  },
+  args: {},
+};
diff --git a/packages/chart/stories/CountSeries.mdx b/packages/chart/stories/CountSeries.mdx
new file mode 100644
index 0000000..ec6281d
--- /dev/null
+++ b/packages/chart/stories/CountSeries.mdx
@@ -0,0 +1,54 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { CountSeries } from "../src";
+import * as CountSeriesStories from "./CountSeries.stories";
+
+<Meta of={CountSeriesStories} />
+
+<Title>Count Series</Title>
+
+<Anchor storyId="animations">
+  <div className="hidden-anchor">
+    <Subheading>Count Series</Subheading>
+  </div>
+</Anchor>
+
+<Description of={CountSeries} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CountSeriesStories.Example} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="data">
+  <Subheading>Data Format</Subheading>
+</Anchor>
+
+```ts
+// Single list of count values
+[{ id, label, count },...];
+```
diff --git a/packages/chart/stories/CountSeries.stories.tsx b/packages/chart/stories/CountSeries.stories.tsx
new file mode 100644
index 0000000..1fa3b65
--- /dev/null
+++ b/packages/chart/stories/CountSeries.stories.tsx
@@ -0,0 +1,76 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { Button, Panel } from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useCallback, useEffect, useState } from "react";
+import { CountSeries } from "../src";
+
+const meta: Meta<typeof CountSeries> = {
+  component: CountSeries,
+  title: "@charts/CountSeries",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: "children" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CountSeries>;
+
+export const Example: Story = {
+  render: (args) => {
+    const [data, setData] = useState<AnyObject[]>([]);
+    const loadData = useCallback(() => {
+      setData(
+        Array.from(Array(Math.ceil(24)), (_, i) => ({
+          id: `key-${i}`,
+          label: faker.animal.cat(),
+          count: faker.number.int({ min: 99, max: 12489 }),
+        })),
+      );
+    }, []);
+    useEffect(() => {
+      loadData();
+    }, []);
+    return (
+      <Panel
+        width="36rem"
+        height="36rem"
+        title="Count Series chart"
+        actions={
+          <Button
+            aria-label="loadData"
+            variant="link"
+            icon="mdi mdi-refresh"
+            onClick={loadData}
+          />
+        }
+      >
+        <CountSeries {...args} data={data} />
+      </Panel>
+    );
+  },
+  args: {},
+};
diff --git a/packages/chart/stories/DataSeries.mdx b/packages/chart/stories/DataSeries.mdx
new file mode 100644
index 0000000..82707ae
--- /dev/null
+++ b/packages/chart/stories/DataSeries.mdx
@@ -0,0 +1,54 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { DataSeries } from "../src";
+import * as DataSeriesStories from "./DataSeries.stories";
+
+<Meta of={DataSeriesStories} />
+
+<Title>Data Series</Title>
+
+<Anchor storyId="animations">
+  <div className="hidden-anchor">
+    <Subheading>Data Series</Subheading>
+  </div>
+</Anchor>
+
+<Description of={DataSeries} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={DataSeriesStories.Example} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="data">
+  <Subheading>Data Format</Subheading>
+</Anchor>
+
+```ts
+// List of data series
+[{ id, label, values: [...] },...];
+```
diff --git a/packages/chart/stories/DataSeries.stories.tsx b/packages/chart/stories/DataSeries.stories.tsx
new file mode 100644
index 0000000..227960b
--- /dev/null
+++ b/packages/chart/stories/DataSeries.stories.tsx
@@ -0,0 +1,99 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { Button, Panel } from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useCallback, useEffect, useState } from "react";
+import { DataSeries } from "../src";
+
+const meta: Meta<typeof DataSeries> = {
+  component: DataSeries,
+  title: "@charts/DataSeries",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: "children" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DataSeries>;
+
+export const Example: Story = {
+  render: (args) => {
+    const [data, setData] = useState<AnyObject>({});
+    const loadData = useCallback(() => {
+      const categories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
+      setData({
+        categoryAxisName: "Months",
+        valueAxisName: "Items",
+        categories,
+        data: [
+          {
+            id: faker.string.alpha(5),
+            label: faker.animal.dog(),
+            values: categories.map(() =>
+              faker.number.int({ min: 100, max: 500 }),
+            ),
+          },
+          {
+            id: faker.string.alpha(5),
+            label: faker.animal.dog(),
+            values: categories.map(() =>
+              faker.number.int({ min: 100, max: 500 }),
+            ),
+          },
+          {
+            id: faker.string.alpha(5),
+            label: faker.animal.dog(),
+            values: categories.map(() =>
+              faker.number.int({ min: 100, max: 500 }),
+            ),
+          },
+        ],
+      });
+    }, []);
+    useEffect(() => {
+      loadData();
+    }, []);
+    return (
+      <Panel
+        width="48rem"
+        height="24rem"
+        title="Data Series chart"
+        expandable
+        actions={
+          <Button
+            aria-label="loadData"
+            variant="link"
+            icon="mdi mdi-refresh"
+            onClick={loadData}
+          />
+        }
+      >
+        <DataSeries {...args} {...data} />
+      </Panel>
+    );
+  },
+  args: {},
+};
diff --git a/packages/chart/stories/GenericChart.mdx b/packages/chart/stories/GenericChart.mdx
new file mode 100644
index 0000000..f67ee18
--- /dev/null
+++ b/packages/chart/stories/GenericChart.mdx
@@ -0,0 +1,55 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { GenericChart } from "../src";
+import * as GenericChartStories from "./GenericChart.stories";
+
+<Meta of={GenericChartStories} />
+
+<Title>Generic Chart</Title>
+
+<Anchor storyId="animations">
+  <div className="hidden-anchor">
+    <Subheading>Tree Map / Sunburst</Subheading>
+  </div>
+</Anchor>
+
+<Description of={GenericChart} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={GenericChartStories.TreeMap} />
+</Collapsable>
+
+<Anchor storyId="sankey">
+  <Subheading>Sankey</Subheading>
+</Anchor>
+<Description of={GenericChartStories.Sankey} />
+<Canvas withToolbar of={GenericChartStories.Sankey} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={GenericChartStories.Sankey} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
diff --git a/packages/chart/stories/GenericChart.stories.tsx b/packages/chart/stories/GenericChart.stories.tsx
new file mode 100644
index 0000000..a781627
--- /dev/null
+++ b/packages/chart/stories/GenericChart.stories.tsx
@@ -0,0 +1,167 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Button, Panel, ToggleButtonGroup } from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useEffect, useState } from "react";
+import { GenericChart } from "../src";
+import coffeeJson from "./coffee";
+import sankeyJson from "./sankey";
+
+const meta: Meta<typeof GenericChart> = {
+  component: GenericChart,
+  title: "@charts/GenericChart",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: "children" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof GenericChart>;
+
+export const TreeMap: Story = {
+  render: (args) => {
+    const [type, setType] = useState("treemap");
+    const [series, setSeries] = useState<AnyObject>({});
+
+    useEffect(() => {
+      if (type === "treemap") {
+        setSeries({
+          id: "coffee-list",
+          name: "Coffee list",
+          type: "treemap",
+          data: coffeeJson,
+          universalTransition: true,
+          leafDepth: 2,
+          upperLabel: {
+            show: true,
+            height: 30,
+          },
+          levels: [
+            {
+              itemStyle: {
+                borderColor: "#777",
+                borderWidth: 0,
+                gapWidth: 1,
+              },
+              upperLabel: {
+                show: false,
+              },
+            },
+            {
+              colorSaturation: [0.35, 0.5],
+              itemStyle: {
+                borderWidth: 5,
+                gapWidth: 1,
+                borderColorSaturation: 0.6,
+              },
+            },
+          ],
+        });
+      }
+      if (type === "sunburst") {
+        setSeries({
+          id: "coffee-list",
+          name: "Coffee list",
+          type: "sunburst",
+          radius: ["20%", "90%"],
+          data: coffeeJson,
+          universalTransition: true,
+          levels: [
+            {},
+            {
+              label: {
+                rotate: "tangential",
+              },
+            },
+            {
+              r0: "35%",
+              r: "70%",
+              label: {
+                align: "right",
+              },
+            },
+            {
+              label: {
+                position: "outside",
+              },
+            },
+          ],
+        });
+      }
+    }, [type]);
+    return (
+      <Panel width="48rem" height="24rem" title="Generic chart" expandable>
+        <GenericChart
+          {...args}
+          series={[series]}
+          legend={{ show: false }}
+          actions={
+            <ToggleButtonGroup value={type} onChange={setType}>
+              <Button
+                value="treemap"
+                icon="mdi mdi-view-dashboard-variant"
+                aria-label="tree"
+              />
+              <Button
+                value="sunburst"
+                icon="mdi mdi-circle-double"
+                aria-label="burst"
+              />
+            </ToggleButtonGroup>
+          }
+        />
+      </Panel>
+    );
+  },
+  args: {},
+};
+
+export const Sankey: Story = {
+  render: (args) => {
+    const [series, setSeries] = useState<AnyObject>({});
+
+    useEffect(() => {
+      setSeries({
+        type: "sankey",
+        emphasis: {
+          focus: "adjacency",
+        },
+        nodeAlign: "right",
+        data: sankeyJson.nodes,
+        links: sankeyJson.links,
+        lineStyle: {
+          color: "source",
+          curveness: 0.5,
+        },
+      });
+    }, []);
+    return (
+      <Panel width="48rem" height="24rem" title="Generic chart" expandable>
+        <GenericChart {...args} series={[series]} legend={{ show: false }} />
+      </Panel>
+    );
+  },
+  args: {},
+};
diff --git a/packages/chart/stories/MapSeries.mdx b/packages/chart/stories/MapSeries.mdx
new file mode 100644
index 0000000..b8d39f5
--- /dev/null
+++ b/packages/chart/stories/MapSeries.mdx
@@ -0,0 +1,54 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { MapSeries } from "../src";
+import * as MapSeriesStories from "./MapSeries.stories";
+
+<Meta of={MapSeriesStories} />
+
+<Title>Map Series</Title>
+
+<Anchor storyId="animations">
+  <div className="hidden-anchor">
+    <Subheading>Map Series</Subheading>
+  </div>
+</Anchor>
+
+<Description of={MapSeries} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={MapSeriesStories.Example} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="data">
+  <Subheading>Data Format</Subheading>
+</Anchor>
+
+```ts
+// List of country codes with count
+[{ id: "iso-2 country code", label, count },...];
+```
diff --git a/packages/chart/stories/MapSeries.stories.tsx b/packages/chart/stories/MapSeries.stories.tsx
new file mode 100644
index 0000000..6695ba4
--- /dev/null
+++ b/packages/chart/stories/MapSeries.stories.tsx
@@ -0,0 +1,76 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { Button, Panel } from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useCallback, useEffect, useState } from "react";
+import { MapSeries } from "../src";
+
+const meta: Meta<typeof MapSeries> = {
+  component: MapSeries,
+  title: "@charts/MapSeries",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: "children" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MapSeries>;
+
+export const Example: Story = {
+  render: (args) => {
+    const [data, setData] = useState<AnyObject[]>([]);
+    const loadData = useCallback(() => {
+      setData(
+        Array.from(Array(Math.ceil(24)), (_, i) => ({
+          id: faker.address.countryCode("alpha-2"),
+          count: faker.number.int({ min: 99, max: 499 }),
+        })),
+      );
+    }, []);
+    useEffect(() => {
+      loadData();
+    }, []);
+    return (
+      <Panel
+        width="48rem"
+        height="24rem"
+        title="Map Series chart"
+        expandable
+        actions={
+          <Button
+            aria-label="loadData"
+            variant="link"
+            icon="mdi mdi-refresh"
+            onClick={loadData}
+          />
+        }
+      >
+        <MapSeries {...args} data={data} />
+      </Panel>
+    );
+  },
+  args: {},
+};
diff --git a/packages/chart/stories/TimeSeries.mdx b/packages/chart/stories/TimeSeries.mdx
new file mode 100644
index 0000000..73c4156
--- /dev/null
+++ b/packages/chart/stories/TimeSeries.mdx
@@ -0,0 +1,54 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { TimeSeries } from "../src";
+import * as TimeSeriesStories from "./TimeSeries.stories";
+
+<Meta of={TimeSeriesStories} />
+
+<Title>Time Series</Title>
+
+<Anchor storyId="animations">
+  <div className="hidden-anchor">
+    <Subheading>Time Series</Subheading>
+  </div>
+</Anchor>
+
+<Description of={TimeSeries} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={TimeSeriesStories.Example} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="data">
+  <Subheading>Data Format</Subheading>
+</Anchor>
+
+```ts
+// List of data series
+[{ id, label, values: [[ date, count ], ...] },...];
+```
diff --git a/packages/chart/stories/TimeSeries.stories.tsx b/packages/chart/stories/TimeSeries.stories.tsx
new file mode 100644
index 0000000..f75ca25
--- /dev/null
+++ b/packages/chart/stories/TimeSeries.stories.tsx
@@ -0,0 +1,103 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { Button, Panel } from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useCallback, useEffect, useState } from "react";
+import { TimeSeries } from "../src";
+
+const meta: Meta<typeof TimeSeries> = {
+  component: TimeSeries,
+  title: "@charts/TimeSeries",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: "children" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TimeSeries>;
+
+export const Example: Story = {
+  render: (args) => {
+    const [data, setData] = useState<AnyObject>({});
+    const loadData = useCallback(() => {
+      const categories = Array.from(Array(24), (_, i) => new Date(2021, i, 1));
+
+      setData({
+        categoryAxisName: "Months",
+        valueAxisName: "Items",
+        categories,
+        data: [
+          {
+            id: faker.string.alphanumeric(5),
+            label: faker.animal.bear(),
+            values: categories.map((c) => [
+              c,
+              faker.number.int({ min: 100, max: 500 }),
+            ]),
+          },
+          {
+            id: faker.string.alphanumeric(5),
+            label: faker.animal.bear(),
+            values: categories.map((c) => [
+              c,
+              faker.number.int({ min: 100, max: 500 }),
+            ]),
+          },
+          {
+            id: faker.string.alphanumeric(5),
+            label: faker.animal.bear(),
+            values: categories.map((c) => [
+              c,
+              faker.number.int({ min: 100, max: 500 }),
+            ]),
+          },
+        ],
+      });
+    }, []);
+    useEffect(() => {
+      loadData();
+    }, []);
+    return (
+      <Panel
+        width="48rem"
+        height="24rem"
+        title="Time Series chart"
+        expandable
+        actions={
+          <Button
+            aria-label="loadData"
+            variant="link"
+            icon="mdi mdi-refresh"
+            onClick={loadData}
+          />
+        }
+      >
+        <TimeSeries {...args} {...data} />
+      </Panel>
+    );
+  },
+  args: {},
+};
diff --git a/packages/chart/stories/TimeSlider.mdx b/packages/chart/stories/TimeSlider.mdx
new file mode 100644
index 0000000..c472747
--- /dev/null
+++ b/packages/chart/stories/TimeSlider.mdx
@@ -0,0 +1,54 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { TimeSlider } from "../src";
+import * as TimeSliderStories from "./TimeSlider.stories";
+
+<Meta of={TimeSliderStories} />
+
+<Title>Time Slider</Title>
+
+<Anchor storyId="animations">
+  <div className="hidden-anchor">
+    <Subheading>Time Slider</Subheading>
+  </div>
+</Anchor>
+
+<Description of={TimeSlider} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={TimeSliderStories.Example} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="data">
+  <Subheading>Data Format</Subheading>
+</Anchor>
+
+```ts
+// List of time values for single series
+[[ date, count ], ...]
+```
diff --git a/packages/chart/stories/TimeSlider.stories.tsx b/packages/chart/stories/TimeSlider.stories.tsx
new file mode 100644
index 0000000..7f3ce84
--- /dev/null
+++ b/packages/chart/stories/TimeSlider.stories.tsx
@@ -0,0 +1,81 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { Button, Panel } from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useCallback, useEffect, useState } from "react";
+import { TimeSlider } from "../src";
+
+const meta: Meta<typeof TimeSlider> = {
+  component: TimeSlider,
+  title: "@charts/TimeSlider",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: "children" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TimeSlider>;
+
+export const Example: Story = {
+  render: (args) => {
+    const [data, setData] = useState<AnyObject[]>([]);
+    const loadData = useCallback(() => {
+      const categories = Array.from(
+        Array(365 * 3),
+        (_, i) => new Date(2022, 0, i + 1),
+      );
+      setData(
+        categories.map((c) => [c, faker.number.int({ min: 100, max: 500 })]),
+      );
+    }, []);
+    useEffect(() => {
+      loadData();
+    }, []);
+    return (
+      <Panel
+        width="48rem"
+        height="8rem"
+        title="Time Series chart"
+        expandable
+        actions={
+          <Button
+            aria-label="loadData"
+            variant="link"
+            icon="mdi mdi-refresh"
+            onClick={loadData}
+          />
+        }
+      >
+        <TimeSlider
+          {...args}
+          data={data}
+          range={{ start: new Date(2022, 9, 1), end: new Date(2023, 9, 1) }}
+        />
+      </Panel>
+    );
+  },
+  args: {},
+};
diff --git a/packages/chart/stories/WordBubble.mdx b/packages/chart/stories/WordBubble.mdx
new file mode 100644
index 0000000..82af0d8
--- /dev/null
+++ b/packages/chart/stories/WordBubble.mdx
@@ -0,0 +1,54 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { WordBubble } from "../src";
+import * as WordBubbleStories from "./WordBubble.stories";
+
+<Meta of={WordBubbleStories} />
+
+<Title>Word Bubble</Title>
+
+<Anchor storyId="animations">
+  <div className="hidden-anchor">
+    <Subheading>Word Bubble</Subheading>
+  </div>
+</Anchor>
+
+<Description of={WordBubble} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={WordBubbleStories.Example} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="data">
+  <Subheading>Data Format</Subheading>
+</Anchor>
+
+```ts
+// List of words
+[{ id, label, count },...];
+```
diff --git a/packages/chart/stories/WordBubble.stories.tsx b/packages/chart/stories/WordBubble.stories.tsx
new file mode 100644
index 0000000..cf986ec
--- /dev/null
+++ b/packages/chart/stories/WordBubble.stories.tsx
@@ -0,0 +1,77 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { Button, Panel } from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useCallback, useEffect, useState } from "react";
+import { WordBubble } from "../src";
+
+const meta: Meta<typeof WordBubble> = {
+  component: WordBubble,
+  title: "@charts/WordBubble",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: "children" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WordBubble>;
+
+export const Example: Story = {
+  render: (args) => {
+    const [data, setData] = useState<AnyObject[]>([]);
+    const loadData = useCallback(() => {
+      setData(
+        Array.from(Array(faker.number.int({ min: 12, max: 48 })), (_, key) => ({
+          id: key,
+          label: faker.commerce.product(),
+          count: faker.number.int({ min: 99, max: 499 }),
+        })),
+      );
+    }, []);
+    useEffect(() => {
+      loadData();
+    }, []);
+    return (
+      <Panel
+        width="36rem"
+        height="36rem"
+        title="Word Bubble chart"
+        expandable
+        actions={
+          <Button
+            aria-label="loadData"
+            variant="link"
+            icon="mdi mdi-refresh"
+            onClick={loadData}
+          />
+        }
+      >
+        <WordBubble {...args} data={data} />
+      </Panel>
+    );
+  },
+  args: {},
+};
diff --git a/packages/chart/stories/coffee.ts b/packages/chart/stories/coffee.ts
new file mode 100644
index 0000000..4ab6cc2
--- /dev/null
+++ b/packages/chart/stories/coffee.ts
@@ -0,0 +1,797 @@
+export default [
+  {
+    name: "Flora",
+    itemStyle: {
+      color: "#da0d68",
+    },
+    children: [
+      {
+        name: "Black Tea",
+        value: 1,
+        itemStyle: {
+          color: "#975e6d",
+        },
+      },
+      {
+        name: "Floral",
+        itemStyle: {
+          color: "#e0719c",
+        },
+        children: [
+          {
+            name: "Chamomile",
+            value: 1,
+            itemStyle: {
+              color: "#f99e1c",
+            },
+          },
+          {
+            name: "Rose",
+            value: 1,
+            itemStyle: {
+              color: "#ef5a78",
+            },
+          },
+          {
+            name: "Jasmine",
+            value: 1,
+            itemStyle: {
+              color: "#f7f1bd",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: "Fruity",
+    itemStyle: {
+      color: "#da1d23",
+    },
+    children: [
+      {
+        name: "Berry",
+        itemStyle: {
+          color: "#dd4c51",
+        },
+        children: [
+          {
+            name: "Blackberry",
+            value: 1,
+            itemStyle: {
+              color: "#3e0317",
+            },
+          },
+          {
+            name: "Raspberry",
+            value: 1,
+            itemStyle: {
+              color: "#e62969",
+            },
+          },
+          {
+            name: "Blueberry",
+            value: 1,
+            itemStyle: {
+              color: "#6569b0",
+            },
+          },
+          {
+            name: "Strawberry",
+            value: 1,
+            itemStyle: {
+              color: "#ef2d36",
+            },
+          },
+        ],
+      },
+      {
+        name: "Dried Fruit",
+        itemStyle: {
+          color: "#c94a44",
+        },
+        children: [
+          {
+            name: "Raisin",
+            value: 1,
+            itemStyle: {
+              color: "#b53b54",
+            },
+          },
+          {
+            name: "Prune",
+            value: 1,
+            itemStyle: {
+              color: "#a5446f",
+            },
+          },
+        ],
+      },
+      {
+        name: "Other Fruit",
+        itemStyle: {
+          color: "#dd4c51",
+        },
+        children: [
+          {
+            name: "Coconut",
+            value: 1,
+            itemStyle: {
+              color: "#f2684b",
+            },
+          },
+          {
+            name: "Cherry",
+            value: 1,
+            itemStyle: {
+              color: "#e73451",
+            },
+          },
+          {
+            name: "Pomegranate",
+            value: 1,
+            itemStyle: {
+              color: "#e65656",
+            },
+          },
+          {
+            name: "Pineapple",
+            value: 1,
+            itemStyle: {
+              color: "#f89a1c",
+            },
+          },
+          {
+            name: "Grape",
+            value: 1,
+            itemStyle: {
+              color: "#aeb92c",
+            },
+          },
+          {
+            name: "Apple",
+            value: 1,
+            itemStyle: {
+              color: "#4eb849",
+            },
+          },
+          {
+            name: "Peach",
+            value: 1,
+            itemStyle: {
+              color: "#f68a5c",
+            },
+          },
+          {
+            name: "Pear",
+            value: 1,
+            itemStyle: {
+              color: "#baa635",
+            },
+          },
+        ],
+      },
+      {
+        name: "Citrus Fruit",
+        itemStyle: {
+          color: "#f7a128",
+        },
+        children: [
+          {
+            name: "Grapefruit",
+            value: 1,
+            itemStyle: {
+              color: "#f26355",
+            },
+          },
+          {
+            name: "Orange",
+            value: 1,
+            itemStyle: {
+              color: "#e2631e",
+            },
+          },
+          {
+            name: "Lemon",
+            value: 1,
+            itemStyle: {
+              color: "#fde404",
+            },
+          },
+          {
+            name: "Lime",
+            value: 1,
+            itemStyle: {
+              color: "#7eb138",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: "Sour/\nFermented",
+    itemStyle: {
+      color: "#ebb40f",
+    },
+    children: [
+      {
+        name: "Sour",
+        itemStyle: {
+          color: "#e1c315",
+        },
+        children: [
+          {
+            name: "Sour Aromatics",
+            value: 1,
+            itemStyle: {
+              color: "#9ea718",
+            },
+          },
+          {
+            name: "Acetic Acid",
+            value: 1,
+            itemStyle: {
+              color: "#94a76f",
+            },
+          },
+          {
+            name: "Butyric Acid",
+            value: 1,
+            itemStyle: {
+              color: "#d0b24f",
+            },
+          },
+          {
+            name: "Isovaleric Acid",
+            value: 1,
+            itemStyle: {
+              color: "#8eb646",
+            },
+          },
+          {
+            name: "Citric Acid",
+            value: 1,
+            itemStyle: {
+              color: "#faef07",
+            },
+          },
+          {
+            name: "Malic Acid",
+            value: 1,
+            itemStyle: {
+              color: "#c1ba07",
+            },
+          },
+        ],
+      },
+      {
+        name: "Alcohol/\nFremented",
+        itemStyle: {
+          color: "#b09733",
+        },
+        children: [
+          {
+            name: "Winey",
+            value: 1,
+            itemStyle: {
+              color: "#8f1c53",
+            },
+          },
+          {
+            name: "Whiskey",
+            value: 1,
+            itemStyle: {
+              color: "#b34039",
+            },
+          },
+          {
+            name: "Fremented",
+            value: 1,
+            itemStyle: {
+              color: "#ba9232",
+            },
+          },
+          {
+            name: "Overripe",
+            value: 1,
+            itemStyle: {
+              color: "#8b6439",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: "Green/\nVegetative",
+    itemStyle: {
+      color: "#187a2f",
+    },
+    children: [
+      {
+        name: "Olive Oil",
+        value: 1,
+        itemStyle: {
+          color: "#a2b029",
+        },
+      },
+      {
+        name: "Raw",
+        value: 1,
+        itemStyle: {
+          color: "#718933",
+        },
+      },
+      {
+        name: "Green/\nVegetative",
+        itemStyle: {
+          color: "#3aa255",
+        },
+        children: [
+          {
+            name: "Under-ripe",
+            value: 1,
+            itemStyle: {
+              color: "#a2bb2b",
+            },
+          },
+          {
+            name: "Peapod",
+            value: 1,
+            itemStyle: {
+              color: "#62aa3c",
+            },
+          },
+          {
+            name: "Fresh",
+            value: 1,
+            itemStyle: {
+              color: "#03a653",
+            },
+          },
+          {
+            name: "Dark Green",
+            value: 1,
+            itemStyle: {
+              color: "#038549",
+            },
+          },
+          {
+            name: "Vegetative",
+            value: 1,
+            itemStyle: {
+              color: "#28b44b",
+            },
+          },
+          {
+            name: "Hay-like",
+            value: 1,
+            itemStyle: {
+              color: "#a3a830",
+            },
+          },
+          {
+            name: "Herb-like",
+            value: 1,
+            itemStyle: {
+              color: "#7ac141",
+            },
+          },
+        ],
+      },
+      {
+        name: "Beany",
+        value: 1,
+        itemStyle: {
+          color: "#5e9a80",
+        },
+      },
+    ],
+  },
+  {
+    name: "Other",
+    itemStyle: {
+      color: "#0aa3b5",
+    },
+    children: [
+      {
+        name: "Papery/Musty",
+        itemStyle: {
+          color: "#9db2b7",
+        },
+        children: [
+          {
+            name: "Stale",
+            value: 1,
+            itemStyle: {
+              color: "#8b8c90",
+            },
+          },
+          {
+            name: "Cardboard",
+            value: 1,
+            itemStyle: {
+              color: "#beb276",
+            },
+          },
+          {
+            name: "Papery",
+            value: 1,
+            itemStyle: {
+              color: "#fefef4",
+            },
+          },
+          {
+            name: "Woody",
+            value: 1,
+            itemStyle: {
+              color: "#744e03",
+            },
+          },
+          {
+            name: "Moldy/Damp",
+            value: 1,
+            itemStyle: {
+              color: "#a3a36f",
+            },
+          },
+          {
+            name: "Musty/Dusty",
+            value: 1,
+            itemStyle: {
+              color: "#c9b583",
+            },
+          },
+          {
+            name: "Musty/Earthy",
+            value: 1,
+            itemStyle: {
+              color: "#978847",
+            },
+          },
+          {
+            name: "Animalic",
+            value: 1,
+            itemStyle: {
+              color: "#9d977f",
+            },
+          },
+          {
+            name: "Meaty Brothy",
+            value: 1,
+            itemStyle: {
+              color: "#cc7b6a",
+            },
+          },
+          {
+            name: "Phenolic",
+            value: 1,
+            itemStyle: {
+              color: "#db646a",
+            },
+          },
+        ],
+      },
+      {
+        name: "Chemical",
+        itemStyle: {
+          color: "#76c0cb",
+        },
+        children: [
+          {
+            name: "Bitter",
+            value: 1,
+            itemStyle: {
+              color: "#80a89d",
+            },
+          },
+          {
+            name: "Salty",
+            value: 1,
+            itemStyle: {
+              color: "#def2fd",
+            },
+          },
+          {
+            name: "Medicinal",
+            value: 1,
+            itemStyle: {
+              color: "#7a9bae",
+            },
+          },
+          {
+            name: "Petroleum",
+            value: 1,
+            itemStyle: {
+              color: "#039fb8",
+            },
+          },
+          {
+            name: "Skunky",
+            value: 1,
+            itemStyle: {
+              color: "#5e777b",
+            },
+          },
+          {
+            name: "Rubber",
+            value: 1,
+            itemStyle: {
+              color: "#120c0c",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: "Roasted",
+    itemStyle: {
+      color: "#c94930",
+    },
+    children: [
+      {
+        name: "Pipe Tobacco",
+        value: 1,
+        itemStyle: {
+          color: "#caa465",
+        },
+      },
+      {
+        name: "Tobacco",
+        value: 1,
+        itemStyle: {
+          color: "#dfbd7e",
+        },
+      },
+      {
+        name: "Burnt",
+        itemStyle: {
+          color: "#be8663",
+        },
+        children: [
+          {
+            name: "Acrid",
+            value: 1,
+            itemStyle: {
+              color: "#b9a449",
+            },
+          },
+          {
+            name: "Ashy",
+            value: 1,
+            itemStyle: {
+              color: "#899893",
+            },
+          },
+          {
+            name: "Smoky",
+            value: 1,
+            itemStyle: {
+              color: "#a1743b",
+            },
+          },
+          {
+            name: "Brown, Roast",
+            value: 1,
+            itemStyle: {
+              color: "#894810",
+            },
+          },
+        ],
+      },
+      {
+        name: "Cereal",
+        itemStyle: {
+          color: "#ddaf61",
+        },
+        children: [
+          {
+            name: "Grain",
+            value: 1,
+            itemStyle: {
+              color: "#b7906f",
+            },
+          },
+          {
+            name: "Malt",
+            value: 1,
+            itemStyle: {
+              color: "#eb9d5f",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: "Spices",
+    itemStyle: {
+      color: "#ad213e",
+    },
+    children: [
+      {
+        name: "Pungent",
+        value: 1,
+        itemStyle: {
+          color: "#794752",
+        },
+      },
+      {
+        name: "Pepper",
+        value: 1,
+        itemStyle: {
+          color: "#cc3d41",
+        },
+      },
+      {
+        name: "Brown Spice",
+        itemStyle: {
+          color: "#b14d57",
+        },
+        children: [
+          {
+            name: "Anise",
+            value: 1,
+            itemStyle: {
+              color: "#c78936",
+            },
+          },
+          {
+            name: "Nutmeg",
+            value: 1,
+            itemStyle: {
+              color: "#8c292c",
+            },
+          },
+          {
+            name: "Cinnamon",
+            value: 1,
+            itemStyle: {
+              color: "#e5762e",
+            },
+          },
+          {
+            name: "Clove",
+            value: 1,
+            itemStyle: {
+              color: "#a16c5a",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: "Nutty/\nCocoa",
+    itemStyle: {
+      color: "#a87b64",
+    },
+    children: [
+      {
+        name: "Nutty",
+        itemStyle: {
+          color: "#c78869",
+        },
+        children: [
+          {
+            name: "Peanuts",
+            value: 1,
+            itemStyle: {
+              color: "#d4ad12",
+            },
+          },
+          {
+            name: "Hazelnut",
+            value: 1,
+            itemStyle: {
+              color: "#9d5433",
+            },
+          },
+          {
+            name: "Almond",
+            value: 1,
+            itemStyle: {
+              color: "#c89f83",
+            },
+          },
+        ],
+      },
+      {
+        name: "Cocoa",
+        itemStyle: {
+          color: "#bb764c",
+        },
+        children: [
+          {
+            name: "Chocolate",
+            value: 1,
+            itemStyle: {
+              color: "#692a19",
+            },
+          },
+          {
+            name: "Dark Chocolate",
+            value: 1,
+            itemStyle: {
+              color: "#470604",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: "Sweet",
+    itemStyle: {
+      color: "#e65832",
+    },
+    children: [
+      {
+        name: "Brown Sugar",
+        itemStyle: {
+          color: "#d45a59",
+        },
+        children: [
+          {
+            name: "Molasses",
+            value: 1,
+            itemStyle: {
+              color: "#310d0f",
+            },
+          },
+          {
+            name: "Maple Syrup",
+            value: 1,
+            itemStyle: {
+              color: "#ae341f",
+            },
+          },
+          {
+            name: "Caramelized",
+            value: 1,
+            itemStyle: {
+              color: "#d78823",
+            },
+          },
+          {
+            name: "Honey",
+            value: 1,
+            itemStyle: {
+              color: "#da5c1f",
+            },
+          },
+        ],
+      },
+      {
+        name: "Vanilla",
+        value: 1,
+        itemStyle: {
+          color: "#f89a80",
+        },
+      },
+      {
+        name: "Vanillin",
+        value: 1,
+        itemStyle: {
+          color: "#f37674",
+        },
+      },
+      {
+        name: "Overall Sweet",
+        value: 1,
+        itemStyle: {
+          color: "#e75b68",
+        },
+      },
+      {
+        name: "Sweet Aromatics",
+        value: 1,
+        itemStyle: {
+          color: "#d0545f",
+        },
+      },
+    ],
+  },
+];
diff --git a/packages/chart/stories/sankey.ts b/packages/chart/stories/sankey.ts
new file mode 100644
index 0000000..87b1062
--- /dev/null
+++ b/packages/chart/stories/sankey.ts
@@ -0,0 +1,174 @@
+export default {
+  nodes: [
+    { name: "Agricultural 'waste'" },
+    { name: "Bio-conversion" },
+    { name: "Liquid" },
+    { name: "Losses" },
+    { name: "Solid" },
+    { name: "Gas" },
+    { name: "Biofuel imports" },
+    { name: "Biomass imports" },
+    { name: "Coal imports" },
+    { name: "Coal" },
+    { name: "Coal reserves" },
+    { name: "District heating" },
+    { name: "Industry" },
+    { name: "Heating and cooling - commercial" },
+    { name: "Heating and cooling - homes" },
+    { name: "Electricity grid" },
+    { name: "Over generation / exports" },
+    { name: "H2 conversion" },
+    { name: "Road transport" },
+    { name: "Agriculture" },
+    { name: "Rail transport" },
+    { name: "Lighting & appliances - commercial" },
+    { name: "Lighting & appliances - homes" },
+    { name: "Gas imports" },
+    { name: "Ngas" },
+    { name: "Gas reserves" },
+    { name: "Thermal generation" },
+    { name: "Geothermal" },
+    { name: "H2" },
+    { name: "Hydro" },
+    { name: "International shipping" },
+    { name: "Domestic aviation" },
+    { name: "International aviation" },
+    { name: "National navigation" },
+    { name: "Marine algae" },
+    { name: "Nuclear" },
+    { name: "Oil imports" },
+    { name: "Oil" },
+    { name: "Oil reserves" },
+    { name: "Other waste" },
+    { name: "Pumped heat" },
+    { name: "Solar PV" },
+    { name: "Solar Thermal" },
+    { name: "Solar" },
+    { name: "Tidal" },
+    { name: "UK land based bioenergy" },
+    { name: "Wave" },
+    { name: "Wind" },
+  ],
+  links: [
+    {
+      source: "Agricultural 'waste'",
+      target: "Bio-conversion",
+      value: 124.729,
+    },
+    { source: "Bio-conversion", target: "Liquid", value: 0.597 },
+    { source: "Bio-conversion", target: "Losses", value: 26.862 },
+    { source: "Bio-conversion", target: "Solid", value: 280.322 },
+    { source: "Bio-conversion", target: "Gas", value: 81.144 },
+    { source: "Biofuel imports", target: "Liquid", value: 35 },
+    { source: "Biomass imports", target: "Solid", value: 35 },
+    { source: "Coal imports", target: "Coal", value: 11.606 },
+    { source: "Coal reserves", target: "Coal", value: 63.965 },
+    { source: "Coal", target: "Solid", value: 75.571 },
+    { source: "District heating", target: "Industry", value: 10.639 },
+    {
+      source: "District heating",
+      target: "Heating and cooling - commercial",
+      value: 22.505,
+    },
+    {
+      source: "District heating",
+      target: "Heating and cooling - homes",
+      value: 46.184,
+    },
+    {
+      source: "Electricity grid",
+      target: "Over generation / exports",
+      value: 104.453,
+    },
+    {
+      source: "Electricity grid",
+      target: "Heating and cooling - homes",
+      value: 113.726,
+    },
+    { source: "Electricity grid", target: "H2 conversion", value: 27.14 },
+    { source: "Electricity grid", target: "Industry", value: 342.165 },
+    { source: "Electricity grid", target: "Road transport", value: 37.797 },
+    { source: "Electricity grid", target: "Agriculture", value: 4.412 },
+    {
+      source: "Electricity grid",
+      target: "Heating and cooling - commercial",
+      value: 40.858,
+    },
+    { source: "Electricity grid", target: "Losses", value: 56.691 },
+    { source: "Electricity grid", target: "Rail transport", value: 7.863 },
+    {
+      source: "Electricity grid",
+      target: "Lighting & appliances - commercial",
+      value: 90.008,
+    },
+    {
+      source: "Electricity grid",
+      target: "Lighting & appliances - homes",
+      value: 93.494,
+    },
+    { source: "Gas imports", target: "Ngas", value: 40.719 },
+    { source: "Gas reserves", target: "Ngas", value: 82.233 },
+    { source: "Gas", target: "Heating and cooling - commercial", value: 0.129 },
+    { source: "Gas", target: "Losses", value: 1.401 },
+    { source: "Gas", target: "Thermal generation", value: 151.891 },
+    { source: "Gas", target: "Agriculture", value: 2.096 },
+    { source: "Gas", target: "Industry", value: 48.58 },
+    { source: "Geothermal", target: "Electricity grid", value: 7.013 },
+    { source: "H2 conversion", target: "H2", value: 20.897 },
+    { source: "H2 conversion", target: "Losses", value: 6.242 },
+    { source: "H2", target: "Road transport", value: 20.897 },
+    { source: "Hydro", target: "Electricity grid", value: 6.995 },
+    { source: "Liquid", target: "Industry", value: 121.066 },
+    { source: "Liquid", target: "International shipping", value: 128.69 },
+    { source: "Liquid", target: "Road transport", value: 135.835 },
+    { source: "Liquid", target: "Domestic aviation", value: 14.458 },
+    { source: "Liquid", target: "International aviation", value: 206.267 },
+    { source: "Liquid", target: "Agriculture", value: 3.64 },
+    { source: "Liquid", target: "National navigation", value: 33.218 },
+    { source: "Liquid", target: "Rail transport", value: 4.413 },
+    { source: "Marine algae", target: "Bio-conversion", value: 4.375 },
+    { source: "Ngas", target: "Gas", value: 122.952 },
+    { source: "Nuclear", target: "Thermal generation", value: 839.978 },
+    { source: "Oil imports", target: "Oil", value: 504.287 },
+    { source: "Oil reserves", target: "Oil", value: 107.703 },
+    { source: "Oil", target: "Liquid", value: 611.99 },
+    { source: "Other waste", target: "Solid", value: 56.587 },
+    { source: "Other waste", target: "Bio-conversion", value: 77.81 },
+    {
+      source: "Pumped heat",
+      target: "Heating and cooling - homes",
+      value: 193.026,
+    },
+    {
+      source: "Pumped heat",
+      target: "Heating and cooling - commercial",
+      value: 70.672,
+    },
+    { source: "Solar PV", target: "Electricity grid", value: 59.901 },
+    {
+      source: "Solar Thermal",
+      target: "Heating and cooling - homes",
+      value: 19.263,
+    },
+    { source: "Solar", target: "Solar Thermal", value: 19.263 },
+    { source: "Solar", target: "Solar PV", value: 59.901 },
+    { source: "Solid", target: "Agriculture", value: 0.882 },
+    { source: "Solid", target: "Thermal generation", value: 400.12 },
+    { source: "Solid", target: "Industry", value: 46.477 },
+    {
+      source: "Thermal generation",
+      target: "Electricity grid",
+      value: 525.531,
+    },
+    { source: "Thermal generation", target: "Losses", value: 787.129 },
+    { source: "Thermal generation", target: "District heating", value: 79.329 },
+    { source: "Tidal", target: "Electricity grid", value: 9.452 },
+    {
+      source: "UK land based bioenergy",
+      target: "Bio-conversion",
+      value: 182.01,
+    },
+    { source: "Wave", target: "Electricity grid", value: 19.013 },
+    { source: "Wind", target: "Electricity grid", value: 289.366 },
+  ],
+};
diff --git a/packages/chart/tsconfig.build.json b/packages/chart/tsconfig.build.json
new file mode 100755
index 0000000..6d84bf3
--- /dev/null
+++ b/packages/chart/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/types",
+    "rootDir": "src"
+  },
+  "exclude": ["./dist/**/*"],
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}
diff --git a/packages/chart/tsconfig.json b/packages/chart/tsconfig.json
new file mode 100755
index 0000000..80d9784
--- /dev/null
+++ b/packages/chart/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": ["./dist"],
+  "include": ["./src", "./stories"]
+}
diff --git a/packages/core/LICENSE b/packages/core/LICENSE
new file mode 100644
index 0000000..f54bcf5
--- /dev/null
+++ b/packages/core/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Sigma Frameworks, Adarsh Pastakia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/core/README.md b/packages/core/README.md
new file mode 100644
index 0000000..bcd7108
--- /dev/null
+++ b/packages/core/README.md
@@ -0,0 +1,10 @@
+# React UI Framework - Core Module
+
+#### Install
+
+```bash
+# Using
+yarn add @react-fabric/core
+```
+
+#### Usage
diff --git a/packages/core/css/flags.rect.css b/packages/core/css/flags.rect.css
new file mode 100644
index 0000000..1b25d0b
--- /dev/null
+++ b/packages/core/css/flags.rect.css
@@ -0,0 +1,1607 @@
+.flag {
+  display: inline-block;
+
+  width: 1em;
+  height: 0.75em;
+  max-height: 0.75em;
+  margin-top: 0.125em;
+
+  font-size: 1em;
+  vertical-align: baseline;
+
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%;
+  box-shadow: 0 0 0 1px rgb(128 128 128 / 50%) inset;
+}
+
+.flag {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABRElEQVR42u3aoROCMBTHcf5lo2fxNHgaPItapGjRRKJooWjBIEGD/8y81xCmrjhg7xte4VZ+n21vgyMyxkSaS3V4AAAAAAAAAAAAAACKx1NlVQGMsgIAAAAAAAAA3wDpKTOb3cH0BuO3kmdJegwX4FrczXwV14JXazhdmOyShwUg4SXYr/Dl8oDgD8C25F1WQhAAMpO2gOX9Ln3h15jOAmwPiVOwfZLWxi3jXfcBJov1W6j+aGYdd8zONQBpmp0HkMAuoWzbIIgV4FoStgog20IFwKdT4pLfwgb4djn68+w3DyDhqw3SY/jmAWzLXhqmnAbBvw3K7Ntufn/e8+0BsB15Hme+eQC5CbpcjtQAeHjx4YsQAG0CsH0cUdUEAQAAAN0AHIMAAAAAAAAAAEDbANT/KKkXgJ+lAQAAAAAAAAAAABTWC/MCectA2CykAAAAAElFTkSuQmCC");
+}
+
+.flag.AF,
+.flag.AFG,
+.flag.af,
+.flag.afg {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAh1BMVEUAejbjdGrhZlvpkIjeWEzVLh/bSj0AAADTIBHYPC6MFQuMPR3mgnkwMDBAm2jsnpcwk1uAvZuXKiFAQEAVFRVdXV1grIHBk4SAgIAQgkKiUkC7gXTwsKr0yMT53duTSSu1aGFwcHCQkJCNPR2weWNQo3WhYUcgik9wtI6hQTjeV0uQxaegzbTU8WaPAAABOElEQVQ4y73USXPCMAwF4MqWxBM4ZCcLJCyllKX///f10AvMxOml03f+Zjy2nvy2eM4ST3l/e0kcrv4ICkxE5XdoYipmIrOwMAFgKoDxDEy2BgBmAKBNFoNlfQMggEAAXDYfEXisD4CpiBgbsL1upmFbtgUAGN/VM7DP1/kkLKtTAWUoIKSGfd6tp2FdLeFSYvLsKGDVbSKwTZbp6B2LBPOjX2X5NDwl7XIYvHMO6sMwrL6yxySskqQYeQeAwcxjv84+J2FdH3tnHnwncjC3zV8e8mkudbkVeJhy6hXSrCOXqY5t4yRAfgrEzTWfPnqRnA7KCmUzKFvzyCIjrKoiEDtmZkcU9l0XbU8fiHYps985onMW7+MNaapqorZLcZkp7sGUXSDyjtXOcw1nI1VAlYz7/17X2E/xDU3CHUk5qQKIAAAAAElFTkSuQmCC");
+}
+
+.flag.AL,
+.flag.ALB,
+.flag.al,
+.flag.alb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAdBAMAAAAqZzNAAAAALVBMVEX/AAAAAACvAAB/AABvAABfAAAtAADKAACPAADfAABPAAA/AADvAACgAAAPAABIzFtLAAAAs0lEQVQoz2NgoC+YwHOjgL33ACeK4PJD23KOZetooQjO2nVZSNF29RoUwaWB4nFPC0VDUQSVHEUSxRxFlFAESwwFgUDYHUUwJBAkKOqKIqgMETRCEVR3BAmKFKEItppuExTMCo5AESx28RAUNHExRxHUYL/XlvG2oAlF8PLc7Iky227aogg2WxxKFNNptkARrGSYsVCqk2E6WuAxe6cYYIQop/amCZjhzJaAJfA5JzDQHQAA2O0qTBBsTKkAAAAASUVORK5CYII=");
+}
+
+.flag.DZ,
+.flag.DZA,
+.flag.dz,
+.flag.dza {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAARVBMVEX////30tg1TTNpOTP0w8zWJUUjVDIAYjP////SEDTxtL+/FzP64eVIRTKELjPbQV6RKTLjaYCeJDP88PLmeI30xM3gWnIwpA//AAAAAXRSTlP9g+pWxwAAAHtJREFUOMvlkzsSgCAMRPkEZBVFRbz/UUUsdSCFlaZJ8ybJ7k5E91DuXkJ8HVQpMkC7AjCLbIFjxibytPV10AKDLTf6OjgAYxHTWK2AOTdycq+DGtC59caEOjgB6vQxZOH0ykT2jWzVxUfF8fFKJrWT4WddWIo//JlH8AAwAB+HdjSvjAAAAABJRU5ErkJggg==");
+}
+
+.flag.AS,
+.flag.ASM,
+.flag.as,
+.flag.asm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAArlBMVEX////EKTjjmJ87IQ52CjqlDinCITEAAGYYAl1GBkzWZnHmo6n33+LUYWzknqTv7+/z1tn12tzSXWg0HQ2TeThBIw+akYj+/f3y0tV7XBbRWWVTNidCKhhrMxTW1NLe2dOTg3XGvrfLyMWunnZtWC+xsbHu7OdcMx5LJxFDMCbU0cl6WkhwY1rPwJimfhnj3Mepqam4trRkUkN5akOpijeOaxGObBR+dGbKwKKwmVwJBAHeAAAAzUlEQVQoz5XS5w6CMBQF4Kt1r6oUENnDwXaP938xgcgIKVjPr5J8acq5F4YMGY17fWBBncl0BkwoDQMyfaMBZmi+WGU36b56MCkwRYMcARiyqh5lvQYztO4uIQ8+HBGPOHm306ARpdE4PnGcIpz2UKBtdyNCLVbgIgW5OD03oiSihYWLgtD5F4Rb8rsCHxQ9Ut+XkIiQN5Gc0KsWTsMaWB5xbHsPtHrKDiGWCH7p34+2qcTSQ7pHV2icdTnn0Hg6NmZdCmiFzGv21+JW8QewIBq5Sg9RSgAAAABJRU5ErkJggg==");
+}
+
+.flag.AD,
+.flag.AND,
+.flag.ad,
+.flag.and {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAMAAAAkyw3kAAAAh1BMVEX+3wD73AC+p3Ppgw40QYW0mmmvlGMAGKjQEDrZOC7ffBjKr0zTtjXUuEDevyjpyBzmySXqfgn52gi6n23Or0DbvjfHrFnBp2K6oF/kmw40QIXZOS/ixCLOsiuzml7VYh3CpU/DqVndjS3UeVztpoLIakj31wTVhjLsoWT+7W/dWULNRC/51mPLu1LCAAAAtElEQVQ4y+XUSRKDIBAFUIHQSUABBadE42zG+58vutNN696/fvWLLmi88yI3b5X7ZRFvCU9reD0SNFqbbWikktw67TQOCaVNCjZtbErwRjV8+kowFhQ4lDD83t8ZgsMgyaB79d0MeTZijQpk2z6dP02k8DPWcRgKXYVxjU/tP2aoRB4/ShQGIBkTJs8l9/FGCkCBT7E4jIIk4ZTSLAmijbsmxOe8JGTHoxgLEx1vFXZA7Ev5Aw7LHoRODS8/AAAAAElFTkSuQmCC");
+}
+
+.flag.AO,
+.flag.AGO,
+.flag.ao,
+.flag.ago {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAWlBMVEUAAAAQDQDVLSbRHSpmBBfKCC7/ywBmBBfMCS8AAABPPwDhWRvAmQAjHADzvwDuiA/yrAVfSwCQcgB1XQDcRiCgfwDQpQCwjADymgufTg7pdRSzaAvFfwhAMwAtf7ufAAAACHRSTlP9/////////sajZT8AAACgSURBVDjL1Y/JDsMgDEQxNE7MDk3S/f9/s0bJhVYKXDMHLJmnGY8Ypi4N4qSgkkZ1gTLi3BltfFQd4JNNsQ3KgEFO4S6bjgYNFypPA5xVqYKtaLkfF8MPOF5qvd7bxEe1HoWgWgkX4KFtvRZ/IF3ROqLo4RAsv271n7y4Y8e8aiDIPic6BsFbZGnbcuTspEHzpTfdKrPL2dQHsmkvSKcDvxd5Iyc+x/1IAAAAAElFTkSuQmCC");
+}
+
+.flag.AI,
+.flag.AIA,
+.flag.ai,
+.flag.aia {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAdVBMVEUAIWlgdKHUeY7g5O3yxs3///9nbprIEC7AyNrYVmuZzP//5sD79fe/x9n22N0NK2WLl3nz88z/7M//+e//zoOgtpnZ3Of/oxv/4bORq4mewLbT1J/u787Y27H/uE//2J/Hyoawt35Ya21jdGm4vpf/xnD/8t91fNiSAAAAt0lEQVQoz9WQSRKDIBBFcUBUBhEQZ818/yMGimBlYYlZ5m2g+a+6iwZFmkTAkCOU2zOLixTsYQOrOtFXB6oVD7WcUqoZIxAhwgjRpqS7ItrhR/HK+ThzfvGjDZqYqQhBwpi2tUtqiJ+dgPXWM0rSIs7sZ9zNv9dQLRhvog/der7VaVVYtGL6iD7wC7eqS+a1w51aRhDi8WpbrGQTFO9SQingLSiCpjSEGwJQDWU5VOCM2fenvL/jDaJ7Cj8g7Qw3AAAAAElFTkSuQmCC");
+}
+
+.flag.AG,
+.flag.ATG,
+.flag.ag,
+.flag.atg {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAn1BMVEUAAAB9oW4fGQGtjw7NECX80RV/uOLOESb///8Acsb88/TULUAZAQSnESUAOGNSRAZ+aQs/NAXdWGf209fPFio+BAtnQHXCDyMQDQG9nRDmvxPdtxPNqRHrnqZzCRXplZ69GDIAccU1WJzFECR7ChZNBw8IP2M3Z2dtlGxvWwmWfQwwKATtxBTgZ3SYKk8QarmPlLoTaLeRkLWdJ0vmvhOhEoG+AAABDUlEQVQ4y43OaXOCMBSF4duE9LQgq4ps7utY7f7/f1tZjCSQqmecQS7Ph5e29NC2tB484gZrslz9lBAxVj/UuRZZ2Ggn5pNf/ph23KCCGLeXN6I8CYKkqP/KjdHASZvpB5TyNOWcAr8NnFwglExeHEWWiWPBlUBIiFlzCYOQnUS9EytfmusMLZSZYS6yBv6KPLwGKlBmMi4u46wNVCBcz/N2+8OTssN+Vx5d6BDxq3ExutBamdzK6kEsPvrua4E+xPuy65Y/MMF+ZgwzxOeztm+oUHmBY78osx31mwYRqTDC/xDz1s1xC46G0g1HN+E1Uw80QJkZ4R7EtHJT3IdVZjfQDB27F2iEwPlsOP4B7QcfgqeTwMkAAAAASUVORK5CYII=");
+}
+
+.flag.AR,
+.flag.ARG,
+.flag.ar,
+.flag.arg {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZCAMAAAB0BpxXAAAAP1BMVEX////u1q/oy5jSn1L37dz59O7u3L10rN/R4/T9/Pzozqjfun7koBPhvor05s/Yq3HcozzalA7lxpzXpl/VkhUfGetuAAAAWElEQVQ4y+3SOxKAMAhFUQgkSshX3f9aXYCOUFjm1qd5DLA5gwU/4e4MHknD1ATMJNWuijaMgUqhzDbMY5aRown5OOdFwYaAQXtN4FjDiPyy2n3H9Y+/wBtvcRWqoJAFOQAAAABJRU5ErkJggg==");
+}
+
+.flag.AM,
+.flag.ARM,
+.flag.am,
+.flag.arm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAD1BMVEXZABIAM6DyqACiDTW2iiiq+uFNAAAAHklEQVQY02NgGFBgjAUwCGIB9BN0wQIYlLAAugkCALbdITUesQdRAAAAAElFTkSuQmCC");
+}
+
+.flag.AW,
+.flag.ABW,
+.flag.aw,
+.flag.abw {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAKlBMVEVBjt6gsG//0QBBj96gsG58o9qqkbfvNkPKepTZan9Wm+GRpdO/jathouOFF8O8AAAAAnRSTlP9/o2EjdMAAAA9SURBVCjPY2A2xgAGDDgErYOxCNokYxG82YUpGDa9IpU4QazasVuE1UnE+2ggBZWwAAYRFwzgSBPtlAkCAFHVa1J3h5tcAAAAAElFTkSuQmCC");
+}
+
+.flag.AU,
+.flag.AUS,
+.flag.au,
+.flag.aus {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAARVBMVEUAIWn5w81QZphpbZkQLnIgPHvsS2nkACvAyNpgdKHicYz////Q1uP99Pd9jbLf4+zg5O0wSoX70trZ3OcQLnGPnbz43OPaT7sJAAAArklEQVQoz7WQ2xaEIAhFyTA0vHSZ+v9PnahlOdlq+TLnRYGNB4GuiRY2GSIjZ9t3DTxJCoIeoESDBXhBBSwwmwVm07xOnon85P0scaqhc3iC9KCziBf3Dubarf3mSsR+Wn+sd+mg08Sx6fpWPmMHud1cFasMS+u5UOfSiwcHqZAWLuh9MzWq5sexSGld1YlhWcKnhgzMoYZThtmoYsKHcbRzRRZjxBJELNuVgv/pC+H0B3jjpdgoAAAAAElFTkSuQmCC");
+}
+
+.flag.AT,
+.flag.AUT,
+.flag.at,
+.flag.aut {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAQMAAAA03l8tAAAABlBMVEXtKTn///9O8W3fAAAAEklEQVQI12NgIAv8BwGSSbIAADA3LNT5TsD+AAAAAElFTkSuQmCC");
+}
+
+.flag.AZ,
+.flag.AZE,
+.flag.az,
+.flag.aze {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAKlBMVEU/nDXtKTkAueR5dTZOiaz1fYf3oajwUl7+6ev2lJz4r7XuNUT7zdH7zNA216A/AAAAOElEQVQY02NQwgIY6CboggUwCEKB5LVwGFMQLhghKF2IIZgmKNqFIZiJTRCrdsljSBYZYwEMAwoA/3cmVGf7nvwAAAAASUVORK5CYII=");
+}
+
+.flag.BS,
+.flag.BHS,
+.flag.bs,
+.flag.bhs {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAM1BMVEVAi3MAN0EAWWgASlYAa34GCwgAHSIAAAAAd4v/xywoVkfvuilfShCAYxa/lSFAMgs/MQvJSo6TAAAAW0lEQVQoz63TuxKAIAxE0agJK77//2ulcqBAb+HWZ4YQFks+o5g0OISKCUIpjRAW6hAqPkZ9YKGLvUVVziN300BpWyFU7D9DePTFLgPXQxcOnxCWgtYMFpd+hRvLVBb8dDVZSQAAAABJRU5ErkJggg==");
+}
+
+.flag.BH,
+.flag.BHR,
+.flag.bh,
+.flag.bhr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYBAMAAAB6qqLzAAAAJ1BMVEXOESb////20tb88PHtpq7hb3zfZHLXPU7QHzLRHzPXPE7wtLvplp+6qWJJAAAAZElEQVQY02MQBAG1BgYUABYUNFmARVDQFIug6gRMwe0MWMxEMxKqXSgDm0VqmILC7li0n8RmEZqRUDOFvbAJumPRHolF+wlsFqEZicfx6IZCAqQAi/Zd2CxCjyQ80YFmKLYoAgD8YhWfwKLYOwAAAABJRU5ErkJggg==");
+}
+
+.flag.BD,
+.flag.BGD,
+.flag.bd,
+.flag.bgd {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYBAMAAAB6qqLzAAAAGFBMVEUAak70KkHlLUGyOkRrTUd6SkcuXksfYUzbDaCgAAAAUklEQVQY02NgoB1INVIOQxdjERQUFHJAEzQECgoKYyoEAlSliRBBNRTBQIigKKaR6IYqQgSFCAti1Y7VoiSIoDphx2P1JgOLIpYAAQVdOAMtAQB5kwuiqFX2NgAAAABJRU5ErkJggg==");
+}
+
+.flag.BB,
+.flag.BRB,
+.flag.bb,
+.flag.brb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAALVBMVEUAJn//xyaqkEM/MQjTpB4gGAQwJQZaRg2ffBfvuiO/lRxzWhAAAACviBoPDAKyFauCAAAAYklEQVQoz2NgAAMmQTBQYEAGAy4o4oghOFFQvFBQEk2wbaHPEakMNEHhRNcQUUM0QYmTYolzLqJbFCFm2Iphe7Ww4XYMwcvChrYYgkvrnr/CEHTeGm2C6SNhQ0FKBAdNHAEAi0wclGP3UW4AAAAASUVORK5CYII=");
+}
+
+.flag.BY,
+.flag.BLR,
+.flag.by,
+.flag.blr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAOVBMVEUAfDDsoqblgYbYQUnaT1bjfIHidHrOFyA0Yyznio/qlZr209XVNT2WeGLfaG6aXUvRJC2bj3fxur4V/dY/AAAAZklEQVQoz63PwRWAIAwDUGrTYgBB3X9YRyAHc/6vaQphbnWf4oRBgYnXmwInk1OBEWRK1XerhwIHBqQx0dFT/VGqNh7RfoVytTxmYGCd+5S8W72KkAhSgpOpwcTrjwKdsKVAwqSLH3bnEGqiS5R6AAAAAElFTkSuQmCC");
+}
+
+.flag.BE,
+.flag.BEL,
+.flag.be,
+.flag.bel {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAjBAMAAAAUF1WdAAAAD1BMVEXtKTkAAAD64EL2oT6mlSxymLhtAAAAGUlEQVQoz2MQBAMRJTAwYICAUcFRwWEhCADCrTMjCu9IjwAAAABJRU5ErkJggg==");
+}
+
+.flag.BZ,
+.flag.BLZ,
+.flag.bz,
+.flag.blz {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAA7VBMVEXZDxm71quuz5ugxor////w8O9RULB3ElcXFpYlJJyIuWu51KnT5MqrzJbM4b66wNWkxpZ3fLeyy6vG3rq92K3T29uZvXnq2dLEwqzx5eDn6upxfKpyfaukw5pOVKW3zrSlwaGmt7jDpZXCoH7B27ORamCnu4LRuaTl8N/i3MPc6tRzrl3y4KPx15d/r069ydXLvpexvMeZupF8e8Pw39fp3diRt4TK28efloSKfm2yhWRuPDCwoIeRq2DExOSwu8bc1Kypsonb3ZxhlzBhmjwZdcf5+vvNzN6/wYjYypvD0t5+roqxqJogesuuqH05DYSvAAAA0klEQVQoz63TVRKDQBAEUGR3k2WRAEGTihF3d3e//3Fyg4FK0d/vq6eH42JPImK4ZMT8D+momJoVdRoGSYEJTVUxDQJDwotlxZaksioQCNKCgOZVuxos6mxIAZhhjVrA7I1UKblmFoAaG5eWNW+/XlUmogbAPEPY8ZxO28FITgHQYAj73rXd8UOgJiKM/WevgTHiBwDMCvVD93T5nLsukjJQPVOm9u+t1/HbVCwKFp5Wbu6j/+7xag4+Yc5q8bJsinkSOgp9Zxnb8FHEsMfIrxB7fiVOJZw8OnZYAAAAAElFTkSuQmCC");
+}
+
+.flag.BJ,
+.flag.BEN,
+.flag.bj,
+.flag.ben {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAADFBMVEXoES380RYAh1HycSGsqsUBAAAAG0lEQVQY02NYBQShYMAwWJj/wQDMZICAQcAEAH5nZ5nGou1dAAAAAElFTkSuQmCC");
+}
+
+.flag.BM,
+.flag.BMU,
+.flag.bm,
+.flag.bmu {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAA4VBMVEXIEC5nbZnUeo3g5O3////ZWm7xw8oBIWnAyNrGDy3Vf43UfozkuL9gdKH10tcsih+tg3YvjyXgj5jx9PL88PJfc6Htv8jMYnKScFNIgzyyRE1tjVHUoa3YdYbhoq7lrrewxIe7Dirg3rzMuFN7s6H3+PvY3ejWz9y5JDaHeVXCDiuaZVGZZFCHNiyKwIO8HDZ4PSHW6dSOZTK2za3CzJbd266cQTaYoJGIt6W0sXWuPzGdvK+Btsl2SiydqXifj1Kgt4ywm4qIxNrDXUbS09LPfSvSxoTU1qnKTyjApEiNaE+TnmGmAAAA8klEQVQoz73SWXOCMBAH8FUDAeQGQcV6gEp11B7aevTy1vb7f6AmDdAXxvjk/wGys7+ZnQ2AIJYqmEQCkOi7UBREyAttUMrgX6XlwqRZoZAxjHOhRBJ7LkIASNd7fVqzjpwGLsdXVbXVIA+fI8sIofoDGaXI2eh+T9fpaOR6cTaaQK/TsTOIsVYShWKBLsNOyTJl1GieV3YzhWmTXQ+rEvi27nYX8xQy9n/hlCYw+v583y4dhbdM6xB9fZi7Oy60j+HmZx9yofk0PTnOS3tiXoZy3Xh8bc+ex0aV82XkUc2wLKs2AG6GoyCo3sM14f4QN8kvl/oSq3LmixUAAAAASUVORK5CYII=");
+}
+
+.flag.BT,
+.flag.BTN,
+.flag.bt,
+.flag.btn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAz1BMVEX/1R/5+fn6w7D+Yy3+/v78/Pz/WR//qBr/ThL/1SD/1y362M3639b58O373Vr46KX/ehb/yh7+eEv8rZL843z58978gVf/WRL/1zH8mnf73mP+2Tv6zb76ooP+3Ef75Nz6kGn7dkj789T70cL5spn/qhv467H6lHL644f84nH8vqj677/457j79fP8+Ob86eD6hl/68cn82kf5t6D848/758j2wa/62Zb8yrj8uqP9bTz6zpr64pT6tk/8bDv8YCv8rVb37uX+dDDKysr/ZhSbtK0qAAAACHRSTlP9/////////V+qNIUAAAFMSURBVDjLjdPpcoIwFAVgAtz0sisCDpsgUHfcrWv3vv8zVcXOOC2hnF9h+DiTOyQcJ9VJs8HVgo9trAObDcR/oSxf6tjQ8wbDYnGtY0HZs4xebzweSPI2xgq49IwEgMDndL2Lu2y41Ht2TgiBTb6jWNUonfsmC5jF2b57qIK6TYix/XDUrO+atGqP1hTe0znGc1AEVqNvdTzJn4iggRKRQHXLoT9c2NPx4C0joLYU3lmFtBxaCZynBU0lYiDweJdf0CDJ6aioEQCEiGw4XJDTF6LQD0GjVbBjg5NefkWqBSY6KyacAKSgzJEKJq9potIvgUtd0o+5MhupsC9etXiRL4GyZZN8JKghvZ0CfOGhBMrGhgQjeshmd0MIf/foG2v31Tw/OxC1sCwFlJ/d29dPES+w4c9xv0xAyguvsLg9RahJWfCurircQ7uWw2/OAzNFFY4IKAAAAABJRU5ErkJggg==");
+}
+
+.flag.BO,
+.flag.BOL,
+.flag.bo,
+.flag.bol {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAACVBMVEXVKx4AeTT54wAKw3EdAAAAFUlEQVQY02NgoD1YBQc0Y4bCAa2YAHXmWafbUCnbAAAAAElFTkSuQmCC");
+}
+
+.flag.BA,
+.flag.BIH,
+.flag.ba,
+.flag.bih {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAALVBMVEUAI5X+ywB/d0oQLYvPqxswTKnL0ekQMJuwut5QaLY/Wa8gPqJgdb3///9QWGaw+VaMAAAAeUlEQVQY02NgYGDo4DYRhAEFBigoX7bYEUOQ4ewBE0zB2VODHTEEGcJSTTAFORo2O2IIsldlmWAIMvDcYXbEEOTcGWqCIcjAmgZxAIogzFuoglBvoQpCvYUmCPEWmiDEW+iCYG+hC4K9hS4I9haGIMhbGIIgbz0A0QCx2SL7cD63XgAAAABJRU5ErkJggg==");
+}
+
+.flag.BW,
+.flag.BWA,
+.flag.bw,
+.flag.bwa {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAElBMVEVtqdIAAAA/Pz/t9PlBQUHs9PmByX+UAAAAI0lEQVQoz2NgGHYg2BgDmDI4KWEAFQZBLIAEQaxmYrV92AEAvTIRzfY9AH0AAAAASUVORK5CYII=");
+}
+
+.flag.BR,
+.flag.BRA,
+.flag.br,
+.flag.bra {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAMAAAAkyw3kAAAAh1BMVEX+3wDu0we+sB0hpDE3qi1KrygInjgAmzoAJ3YToDUPMW8fQIaPjzTn2QU/VFgtTI47WpX43QGuyRKZxBfR0wqov8uNwRl8vB5efqUgPmff1gcQNH4BmzpjtiPBzg2jxhXW7eAfPWeSubggQoetzL/v2gNKbZljdHhLc4ycr2+14cXC4NI6VHmUxPVgAAAA9UlEQVQ4y73UyRKCMAwA0CCLLQUKKvsiuG///31mKIsjIPVCDj1k3kxImgJryYBFoKZJQSMACIx5qCeAkegzkO6hiT39AbP8DIrlmKZjKWDn2RRUC4BVTOqIVwCFOgqN0ENHukDphcYQajv8MCXuYaxgYqd9QbqtO7g/yvLgHy6pi9KqU1v6CXVbtHplhBzdyC99lI7I2XoH1U07E7Mp60Yn/2i22Q0dhUzY6HnroDoo7fAUTX0QfhqU7puxUhI11bk71kw3nopwThjD8uw1Op7vgbPpgbdXWAlZTV/hH0uxzjLJNUMqu7jiKXgyT0H+cS32A3gD3OAiYEPQ1/8AAAAASUVORK5CYII=");
+}
+
+.flag.BN,
+.flag.BRN,
+.flag.bn,
+.flag.brn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAABR1BMVEX34BdnCRRPBQzzxMn67Gn55kL88PEAAAD///8JBgPWMiHhaXbQFCj9+c2Yig378pzMuRL+/foQDwYtKgn77nmMjIvx1xbkfB3hax1BBAvqlZ0aAgT54eP20tZcBxA6NQX//vQcHBpSUk/19fVnXQlpZDT78JE+Pj51dXX34R7+/On66Va0tLT44yelpaX++9ztrBrdWx389bGyPBqhRlCuEx2lLxjnh5KyJhyjGRsoDwT998Sllg/45DM6OCHq6upyaAr03RZiYmKYmJi+vr7BwcGkmTwsLCzPz8/ZxBTCsBL89r1GPwaPgg3886l5bguwihJcVAjZ2dncpxc0BAnYq6/CDyPBexXmjD/ro2ORbg7IUBzXTx/jdoGTLxdjIQ6DIy7XPE7sn6jHx8ftpa3keIRtCBRZEw6GPkZjHyZSRkfw8PC1DiE//erTAAABIUlEQVQYGY3B1XLCABAAwIveJRR3d3eXKnV3d/f/fy6UyUygHcguaGYTQBsis97ICzARDYSmE/wsjEMqma1ENg8ATvgHjcpULs7z8Fc4Yl+Okprv8cZXrNiyaRiCfWuLS+tm+uVvTvXo/ERU3LUJaVCgQkqmCiciiZzuRafjfCRy1GPWG3kB+lAtwHzWcl9+juhZ9HhIEdIbeViNz0mokL4DDOLHu/2p6XkQSQ16uiZDzCphH8O0vcgGsNO+rxUOSQUUjs2dAyuy7Fur88p4W3duFtGSTOXmaQCGOM4ubxtyvS433F43DoQj9pUoEYwoyfL1VbVaPj1GNWscRjhKLper7HQe7e9tW1AFxtmYWQhacAAmMhliQQkRtDEZQJsu/ADqTiXJks3I9QAAAABJRU5ErkJggg==");
+}
+
+.flag.BG,
+.flag.BGR,
+.flag.bg,
+.flag.bgr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYAgMAAAD16ldTAAAACVBMVEUAlm7WJhL////BTf+eAAAAFUlEQVQY02NYBQcMVGXSCoTCAVWZADw2T7GdUBaTAAAAAElFTkSuQmCC");
+}
+
+.flag.BF,
+.flag.BFA,
+.flag.bf,
+.flag.bfa {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAALVBMVEV3ZDoAnknvKy14Yzr60BVttDHxPin4nRz6vheYvSmvkCrfzBr3ix72jB4gpEG5oHn8AAAAAXRSTlP+GuMHfQAAAEdJREFUKM9jUMICGIacoFoSFkHdQ1gENZowBNVKXFzcYQYwMBtDgJWLy2Io04BBEAa2eMOZcEE5zymYgqKBooEYgshgSAsCADLrPLD18xGQAAAAAElFTkSuQmCC");
+}
+
+.flag.BI,
+.flag.BDI,
+.flag.bi,
+.flag.bdi {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAWlBMVEX///9y0YTXPk/RHzPzxMnz+/RIw18etTrOESbH7c7t7OQsukbpl6D88fLhanf6/vuc3qid3qmW3aPc2MrniJP++frwtbu4IyfNp5zaTFzBdGvAZ2G9PT3dW2pQSsWXAAAAzUlEQVQoz42TSRKDIBBFvyJ2bAecccr9r5kFEjEGil5QLF7xoPkNAFn6ClaawVYl/JioDJMXAFA3Pq6pAaDIQZRIeP3GKhMiEFHZefyntSvJgESu/z1m2bi6VqIvePnFbK4+i8t6A61/AnhZGJgu6x20fkBqLc3utP6C1m9OdKxPkHo41ZMfLFywCIJqGBTMGgJ7sD4Y4ENzSJ1I8L4xwNvO/seY9ih1rX/bU7a24XA27aPhkV/ohmL1h+K0emPWnjGLDG70KEQPV+y4fgCOXxe97SpR6gAAAABJRU5ErkJggg==");
+}
+
+.flag.KH,
+.flag.KHM,
+.flag.kh,
+.flag.khm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAaCAMAAADyku75AAAAb1BMVEUCLaHPzs7aACHgeIngACXfACXU1NRxF2JxF2IDLqHi4uLf39/Hw8TYDS7TpKvMtbnIyMja2trKrrHcHDzJu7zDjpbaKkjAwMDRlJ6/sLPEdoLQSF/heYjatbvCbXnQe4bXZHbXhpTFXnC8qq27u7sIHT1WAAAACHRSTlP+/////////kgsYtwAAACuSURBVDjL5dNJDsIwDAXQ2EkNZG46zwO9/xnpCiGVRl3DX3hhPf2VzdjjUhj7KXi/lhtLxCHGHHfJN9i2F2ApBOYBhcjisLMoMgIUaLsITIxVJY4AI5bKmkhj4ejpvK60a8gVkcbJQ04AQKTBT5HG1UOzVTvbGvDrOcQ61yE4rV0IOi/wFM4pUZq+x3wGzSAJlJREUipI5WBOYNbzxXLO63ofduF99gkvH8Vf/swLLRAf6S2QnckAAAAASUVORK5CYII=");
+}
+
+.flag.CM,
+.flag.CMR,
+.flag.cm,
+.flag.cmr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAHlBMVEXOESb80RYAel7ZQCGINDjyqRjRHCTiZR7ndx2INDk0zy9lAAAAPUlEQVQoz2NQAgNNBjAwFAQDBoigyhAXZDbAIsjRgCnI3hpRgCHIFiiagKm9UByLmcGmWAQT2IZVeKKmEADM8y2ZtlFueQAAAABJRU5ErkJggg==");
+}
+
+.flag.CA,
+.flag.CAN,
+.flag.ca,
+.flag.can {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAM1BMVEX/AAD/MDD/EBD/19f/QED/ICD/r6//////wMD/8PD/oKD/YGD/gID/b2//cHD/UFD/kJAQFQNAAAAAgUlEQVQoz62S2woDIQxEj5doou7l/7+2DwXbwupa2nkIjBwyGAa68oW40vdgKUugmUi2BVAOOGQBjADxFtS8A+xZZ6DW5s8CUJpvVYegAcQ+bBzt3r0bR6fPhzTemPzL+jT7dejhLszPY/I0Yjd3NOJW6xaxhVKoLrbn/2AIvzT8AWsMCOs6h1CtAAAAAElFTkSuQmCC");
+}
+
+.flag.CV,
+.flag.CPV,
+.flag.cv,
+.flag.cpv {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAP1BMVEUAOJP+88P/99k6W3P8/P6knTwjTH8AOJP////PICfgwx3PIin64mf41ST63lKLjUqLjEqEik1IZG3UNSPSKyVE9uWiAAAAAXRSTlP89O1mUQAAAHhJREFUKM/tklsLgCAMhb1tmhe6/v/fGmawCLFV0FPnwcnhQ4+bQliWhPjBG2A/MEA9aguwlYsTPeYV/cuMxhXJqPadU1G6swyBidxUA0PHUiBwIXeugXQ1ZUytjCqSS+86gA9GiH7KZSp9bzUcMM8agTMZgO/+4wo/5hqOVIJxmgAAAABJRU5ErkJggg==");
+}
+
+.flag.KY,
+.flag.CYM,
+.flag.ky,
+.flag.cym {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAA5FBMVEUBIWlgdKHUeY4JKG3yxs1nbpolP33IEC7AyNrYVmu/x9ng5O3f4+ykgJT6+Pp4g4T88fOKkYj21drZ3Oesq43prjxOTX4FJWvSynVEWYGIf4PDwIDnw2IZNnW9vm7WzYuJoMCbXHIhcTYAWCT+/v5lh5+irLewxt/GOjfhiCvZ2OLfkjZ9lnvZzMkdWCDaztuhsatUe39SeHz13uMxNW/FYFVFXZGfqXUzNnDIbVrHvaCMkJ1bZYDUmGtukG+zsKdBeXtCg1vGkWjNLC4NWiyOfHi/maUAUyDWTTzTpk5HcjhWeT1rSu5WAAAA9klEQVQoz8XQ2XKCMBQG4GAwAZQd3HdQq4B7666tttrl/d+nnKmpdsYB7vrfwMn/TSYJEvksh8IIlArwTadEHt0LFEB/IEwZDqEICjCSCZIkmVNDcylVDE0xw1FiHdmsn/JsoHfCun2lssIJ4PPLa2v3u6MQxlQ0Q6HU1YypCfOlqrbOjlO9npLL8mIqDZfhMvDH1rF8kuU3Gf9h7HluKXn48OzekVwgK9iDA2XQ9nr2O0FxIf1gOAz6CeBkMB4PJvGw2fFHI7/TjGGL0sHqfn51rW1pFglzy1q90W43yoXHXPSWql6uWfXCXFdjD4mLql7E6N/zDVdhFLgxamGzAAAAAElFTkSuQmCC");
+}
+
+.flag.CF,
+.flag.CAF,
+.flag.cf,
+.flag.caf {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAARVBMVEX/zgDKwAoBMYIplynSEDSTy5NAZKH///8AMIIolyjwjxFFJWjwsLxfais7VWSHhD1mcE7nvwzIvwqnjXNwSH3MhhcOOXp2KHH9AAAAaklEQVQ4y93NSRKAIAxE0RYnnAIIeP+jWmVW9MZs9S+7XiVwvm0bnjaaHRQGZ4IiKcplgQmIptcByTsTvKK8XZyoorDwjpnaFe68/wuOVFaYeUe/tB0KD5r7f8Gza6sKK80nuFXhire+DG9UNhiZFUzRDQAAAABJRU5ErkJggg==");
+}
+
+.flag.TD,
+.flag.TCD,
+.flag.td,
+.flag.tcd {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAElBMVEXGCy/+ywAAJmTGDDDrihCpkyFr4LrDAAAAAXRSTlP9g+pWxwAAABpJREFUKM9jUAIDVUEwcDYGAQOGUcFRQbyCAPqgSzR3NRKjAAAAAElFTkSuQmCC");
+}
+
+.flag.CL,
+.flag.CHL,
+.flag.cl,
+.flag.chl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAKlBMVEUAOKVqMWLVKx4AOab////qlI7AzulrMWEQRaxCbb6sv+IgUrGAnNPKe4MtJuTCAAAAAnRSTlP9/o2EjdMAAABESURBVCjPY2A2BgEzF2TAQJLgZmyCKzAFLWb6zMZUecRlBaaglQsWM81mTcYU7DBupsjxmILi5SBQG4oMGJSwgJEsCAD/7Gr8c0BulwAAAABJRU5ErkJggg==");
+}
+
+.flag.CN,
+.flag.CHN,
+.flag.cn,
+.flag.chn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAIVBMVEXeKRD/3QDgNA/vgQjkSw32pwT7wwLiPw7pZwrmVgzxjgfoZuX/AAAAXklEQVQoz2NgwA2UMEQUGBjaHNAFFzAwKGOozARilgkoQhxWosYKDKwBKIJMgYIpDAzsaLoZBSdgOsfRDGgTSwGqYAuTAQODagAW17M7YIpNxubNtgIsgkwMowAPAAD2ignB69EaTQAAAABJRU5ErkJggg==");
+}
+
+.flag.CO,
+.flag.COL,
+.flag.co,
+.flag.col {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAFVBMVEX80RYAOJPOESaaGkF9hFXMECYCOZGyuUP4AAAAIklEQVQoz2NgGAWowAULYEgUxABi9BM0xgIYgpQwgCrdBAGDOyRlGGexgAAAAABJRU5ErkJggg==");
+}
+
+.flag.KM,
+.flag.COM,
+.flag.km,
+.flag.com {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAY1BMVEU9jjOex5lho1nn8ebOESZIlD55sXP/xh46dcT///9sqWSyKCdTm0o8i0BPlC+HuYFJgjCSv4zO48t+VSw8hmA7gXs5eLHmvyCeqig6e595nyzOuCLz+PLb6tlgolhqZy5jbC7Q/dpQAAAArUlEQVQoz43R2w6DIBBF0UEGyoAtWnu///9XloKYNBGY88TDilsRbucNawC7CxMGemdCAEY/QUYf8lr9pDptFVhJlUX2fIxah4OvQ0v0ggih31egkiSWNwUti1ATKYDRz1KJEhQkf9F+eeh6P0OlFjg4XFlOi/yew4S4Dv8/5u2wBNP1eF+uZhgvvOvCYUKswvkXfhw2Ydj2aqrL7GgMBx5OhgNb1Rm2qwkyqnFff1UYnRYEs0QAAAAASUVORK5CYII=");
+}
+
+.flag.CG,
+.flag.COG,
+.flag.cg,
+.flag.cog {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAKlBMVEUAlEMAlUPcJB/73krzrT66y0jdKiDthjWawkfvljioxkfxoDuLvUZ+uUZGJOr2AAAAAXRSTlP9g+pWxwAAAItJREFUKM9tysENQDAUh/EawMFBIuL0VqhExM3BAjYwghVsYAUbWMEIFtLqa/t/6jv+8qmsgGZt6xRi+ZpeBfJIiH4U6EfEMCKGEZDHXaAbe0KEMeIRx4A1jAHdOBAij6dAMTJWYmTcxOiQx1GgG9sFkceJEK/PaLH5jhaT0WA6GryTkVSejqR+RnoAexFQiUISXxUAAAAASUVORK5CYII=");
+}
+
+.flag.CK,
+.flag.COK,
+.flag.ck,
+.flag.cok {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAS1BMVEUBIWlgdKHg5O3YVmtAWI4fPHswSoXIEC4QLnLAyNryxs3U2eVnbprUeY79+/yKmbq/x9mwutBwgqtQZpigrMf88fP21dpvgar13uPvoiQ3AAAA30lEQVQoz7WR65LDIAiF0SBibKPm1r7/ky6ssU1navbXnsmoB74BJTCM1oAoeB90v92HEb5JE4pWsLkLVMFPjIEfD1kOG3LO8blvk/eTrFFsrplkuaxs0wH6L9L4smAix5RwWS7BWI6eXGJtLYrTtmvrbX9G9RKWWu2uxK4ejB2H+00fU08aw4zv11bTknU8zbmV3iCtWrLVaANXVMDXVH7n5DqTBU72bG3iHknzqYibCbrC03802OegxFdJF0ufY0B3kOQQ+KIkh8DE8sVwhektESdjJtngT81EM/ybfgCcAAmZWoOTDgAAAABJRU5ErkJggg==");
+}
+
+.flag.CR,
+.flag.CRI,
+.flag.cr,
+.flag.cri {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAP1BMVEXOESbRsnvpua2CcmLULkHjeIX6+/j///8AK3/dW2rzxMmLs7qdp3+9xaXj1bkoeExBb1tBZq1KY6Klx9mHvMkwUFmwAAAAUUlEQVQoz9XTORIAIQhEUXDDXWf0/mc1NLQzyx+/BCjIg9FFKGA34c5YawgouDRcAGCsOdcIQClpFgEg99Y6A1Dp79cKGoYZGua0nhdu/cDPLAeKFD3EVE0QAAAAAElFTkSuQmCC");
+}
+
+.flag.CI,
+.flag.CIV,
+.flag.ci,
+.flag.civ {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAD1BMVEUAnmD3fwD///+p3sn81KqjQLolAAAAGElEQVQoz2MQBAMRJTAwYICAUcFRQbyCAPRzJ3OsczPTAAAAAElFTkSuQmCC");
+}
+
+.flag.HR,
+.flag.HRV,
+.flag.hr,
+.flag.hrv {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAhFBMVEX/////i4v/aGj/f3//VFT/u7v/QUEXF5b/AABkZLn/bm7/zMx+YaFWM4JgirTvGB2PkbKwbobgT1n1wcclFYxFioSnoLn/EBDfiZOEPHxQlbL/WFj/MDD/q6v/5OSnYZH/MzMfg56yVH6WXB4wp+NCfoj/NDS+UldzI298DFSHeJVeSqKsIk37AAAAj0lEQVQoz8XNxw4DIQxFUQPBkAxM7yWTXv///8Lag8QoWeTKq6cjGfTK4BfYNCtgkp26vn/PWRKA6bF7VtdzXKUBmF/MI47t655TuCHV7c7V1nQHGt4AEQ4IoQQTzJ0IQhlpKXUkg3DEPbobg3Dgkrsbvn+9JRk2cT4xQ3dQNFsgFnYxL6FSZekZfdDbH+EHirAUn8rfZdMAAAAASUVORK5CYII=");
+}
+
+.flag.CU,
+.flag.CUB,
+.flag.cu,
+.flag.cub {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAATlBMVEX////VMEX88PHtp7ANKIjCFDCiGEDPFCsAKo/fYG/43eDSITfnipXzxMmCG1DbTl9nH1waJoI0JHXYQFLwtr10HVdNIWnniZROIWl1HVZ5UILHAAAAb0lEQVQoz43TSRKAIAxE0aDiF8F5vv9FXeBaOutXRXXoWLt00hgcjQjxpwihXUUIobfCfJCYKg2Cq8swZDoNJbh/krH5C5PMrN+y9PNf6mRVRIF12DflaRw4LYy8HiBe2sLFLxRL4W+tZo9WXPUUXqHrEc6IUEytAAAAAElFTkSuQmCC");
+}
+
+.flag.CY,
+.flag.CYP,
+.flag.cy,
+.flag.cyp {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAARVBMVEX///+xt6THy7724cbqvH/Xfw+QmH3VeAD99u/d4Njt6+Ty1a/vzZ/lq1/iolDaiB/tw4/S1svns3Dfmj+8wbF5g2Obo4sXWHv7AAAAkUlEQVQYGd3BSRaCQAwFwN9jkoaemO5/VH2KyibgVqvwB5jxDfYj4xqXMEDFeEpuCp6hc3P2fvSZKHiccbQLDBVPZSi0CwzFwJmOChSODupcpwGKQB8NJ0Z6qY1xplW6y35kXHFoHtdWAcDYyQpNtBZv1kaoNtMFD9LNBl2SaMQCVkyUhDPSTUwpmi64tiz4TTctpAW3+OsVrgAAAABJRU5ErkJggg==");
+}
+
+.flag.CZ,
+.flag.CZE,
+.flag.cz,
+.flag.cze {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAARVBMVEXXExnz9fldMVZwj7LXFBrrio0oPnHriYz///8RRX6/zdyqHi/QFRwURX3JFiAnVooyX5CdITbP2uVwLU2En7xfgqhiXoONvJBJAAAACHRSTlP+/////////kgsYtwAAAB+SURBVDjLjcxHEoAgEAVR0DEMglnvf1RzGUbg9/pVq0mXUIobA0LmVIMQmu4QmZ4wPr1gdHpDbg0Iw9MXdG2PwbVRg5B9UwHZjSBknjNZ8XMcLMnUF7q8IgLg/05A307AxBIC/bs3DOyeMLh7wKQmBOYdEQKjuwMCux0iuw0uJHMc3CNW1r8AAAAASUVORK5CYII=");
+}
+
+.flag.DK,
+.flag.DNK,
+.flag.dk,
+.flag.dnk {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAeBAMAAACs80HuAAAAD1BMVEXGCy/VSGPGDDD////fdovhlE4KAAAAAXRSTlP+GuMHfQAAAClJREFUKM9jUAIDZWNDJThQYBghgoJgIGxsIogADMZYAKWCWC0awSEPAKZsVc82AYC3AAAAAElFTkSuQmCC");
+}
+
+.flag.DJ,
+.flag.DJI,
+.flag.dj,
+.flag.dji {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAY1BMVEVqsef1xcbv+PZztug+r4gSrSzYGB4SrStqsuf///+w1vIgsjjX6/nE6s80uUn2+v6MxO2r4rXztbfpf4LH4vZ8u+przHqhzvDi9eWJ1pV60YhNwWD64eLiVVnma2/wpqjbMDVRQpFcAAAAAXRSTlP9g+pWxwAAAKtJREFUOMuN0NkSgjAUA1BapDGUVZQd9P+/0heKslhvns8kMwmSx1WSICDjUAiZN0JIJoUQkvdQCJnHQkjqQghJz1Vb6LlqD6mbf1Ct+4Ufzre19eyqBY5KmUkpz1WusTLGmE8n08s+bnr+drpHhG0iB1/VVDlXWhzi4KjI57KaAb/hmrY+rJ7CzuI8W1hmgAC2AyCAugcksLSQwHQABFDXgAR2FhKYZpAkegP2fSKc/aQhAQAAAABJRU5ErkJggg==");
+}
+
+.flag.DM,
+.flag.DMA,
+.flag.dm,
+.flag.dma {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAYFBMVEUAaz/THDDGHC4rKytAPTJ+nipAQECAtZ/////80RYqKSSYLC5+nSqkJS6VjoNqQzeTfCveVGOxHyy2IyyNU6QMWjZ+niveSSncSCiJMjSveRBJSDW8QxS7Tm2HZlu1MmlGHhZsAAAAfUlEQVQoz9XTSRLCUAhFUR5Gk4j8/FYT2/3v0jFYVixnOdPLiAIi7zwed0NP604bGIwX5hTW5yZlEdbpI+ytCCmPVxFEF2i05oXxrIDOLlBncQZqY2R2gQ4WK1DbDZldoMFKCiytgyQXqLcCpNyvIggu/L6evxe+iev58gpvCkQKp08QYFcAAAAASUVORK5CYII=");
+}
+
+.flag.DO,
+.flag.DOM,
+.flag.do,
+.flag.dom {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAWlBMVEX///80V4IzV4HBydPYQFGqucrvr7YALWL////OESaFrYzc3N2MwZvw9OtdbYLyv8XDqKJ3QDOQiYx0e2jDk5hopW2UPkR2rXvRXlettL2ZOTKbhpy9bH/R5dbyk4vSAAAAAXRSTlP9g+pWxwAAAGVJREFUOMvt0LkWgCAMRNEgoiObAu7L//+mfdJQWfnKnNtkqOcZAOgGHv3wY6galsahMbY8IrB0jLE4fiUJgy27fSqgtzlvvgJO9r6WKpjONc0SivdGF4LTikdisA4AjJj3hx/DF+7cINDJhV4uAAAAAElFTkSuQmCC");
+}
+
+.flag.CD,
+.flag.COD,
+.flag.cd,
+.flag.cod {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAeCAMAAABpA6zvAAAAQlBMVEXOECH20BjicB3xuhkQhfDqmxrTKx8Af//31hjo0CXaSh6KsH0sjtbIxUNspZo+lcW6wFFdoKiatW9Omraqul/YyzWj+uowAAAAtUlEQVQ4y43Q2xKDIAxF0agoQVC02v//1ZbgBXQSOM9rsmcCumKz6UYoMz81LcAJLcfUB/sBLugmqQo3tOiEagK/OAvVA1o8ZjxTBRj6cHEz5BbFVaFtFkq7IHe2OnZm1QQVPmBeRftvEVxxmo1hq/QQgrsNn9y4qr4gEeW56g21XH1DpvqCXPUB+WoGpWoKxeoNC9UTFqsHLFcjrKhGWFGNsKKaQamaQLl6wVL1hMVqhBVV2g/BwB0JqIxfPwAAAABJRU5ErkJggg==");
+}
+
+.flag.TL,
+.flag.TLS,
+.flag.tl,
+.flag.tls {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAASFBMVEXcJB8vJQcPDALvuiP2niP3nyNeRg0AAAD/xyblTSCffBf+/v4QEBDr6+vPoR6bm5vWSB7IgRyrq6swMDBbW1uHh4cuLi5xcXHPnTqaAAAAh0lEQVQoz63TyxLCIAyF4dIaflKg1N58/zd1YdVxUcjCrL+ZTA6Hzs+dbXB3tUH68aYmCH4wUADcFJoUAPoxtCjn+KFBgX0lHbgpVCmw5ZLTa32FQioxls/6S0pacozx+ELRy2Ny2R7v1aKVq5czywr7jUfUFLio6QlFTaUQNdVM9J/FtX6FJ3flBuv74gRDAAAAAElFTkSuQmCC");
+}
+
+.flag.EC,
+.flag.ECU,
+.flag.ec,
+.flag.ecu {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAA9lBMVEWyJ0IDTaGAlVD52wqyKESBllD+3AHtHCT/3QADTqJggGbCuyMNVaOCZRddQSCleSiiqmoXW6QmY5rivRy5Jj/z1x59XizfyhM8b5CvjxLjzyzYySPtoybSsQX8wwSoxxiQo0Bwhl5ReWxwpZl2lXNBcXmaK0mpWEyGrH6AqpMfeqZwkIY+hIfJqhTnxQPTvD52WyzIpwerk0A4VH/OwBHqxxa9uEKymkFLRnVlTTe1wxO7ulgxRYd0alugglrGvT1TkUKcqFGlrTVZaZmady9RXW+hk4iBzeO3qZetbGNFfXRmrWSxgH15k45mskDC3ubv9/my090lViSgAAAAAXRSTlP+GuMHfQAAAMhJREFUOMvdzcUOwkAUheGhg4xUoThVghZ3d3fe/2VYlyYd1vzLky/3gjD6qTD4b9jMIhRjw3RCTAw7LVGoMyBEmrAYC+0G6yLsQ01MIxSD/jCeoVm5LC8nvUzcF8Kcsa5UyvmVkYP+r/WN/Hy9jyFT/37NhVxRcro7xDkQ6t45EMCuuMLtWs0/zgXOvQc80C5eqrVa0WZBQrcli5RmlDBgNDndSZI0SEYZkOdT5n5upXjMgFjBeNTFWPFAEPSkqt4NgMiP/RX8AFm1LNtFasN6AAAAAElFTkSuQmCC");
+}
+
+.flag.EG,
+.flag.EGY,
+.flag.eg,
+.flag.egy {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAOVBMVEUAAADXu2Dy58ro1qX+/fr48+bv4rzOESb////9/f3hzIf17NXfyHzr3a3NqjbHoBzn1aDOESXDmQkYz2ycAAAAXUlEQVQ4y+3QOQ6AMAxE0Xgle4D7H5YDGMmmocovracpnI5gacOv8HqFJZtU7K1YyCzC7EOGJtKAfTiBAJYLC8M96pqBxV4Vew/AiqpYAxCVaDQfZtGTUOx7dv/2ADMgFMzubFP8AAAAAElFTkSuQmCC");
+}
+
+.flag.SV,
+.flag.SLV,
+.flag.sv,
+.flag.slv {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAXCAMAAABODP0nAAAAWlBMVEX//////O//9s/X6rsAR6sBR6v/+d////8/dL////+i0ZWXx4HM5bDp6dqhyLelvrRzvIL7662uxs7v8MKL0Iv/88Krwanv8/pmr6uEtrUtnaR3uGldpqiAzICRExgrAAAACHRSTlP+/////////dElM2YAAABfSURBVCjP7dJJDoAwCAXQQhW1gx2cp/tf071NhL3+JXmLD0FVstTqm7AVRqnuGZgIi2FTQlo8eOQhuZxS1shC6Odow0UsRLPu52aA7+iOPthBsAzoOGoqofiO/z++wRtv/hV0LCDfBAAAAABJRU5ErkJggg==");
+}
+
+.flag.GQ,
+.flag.GNQ,
+.flag.gq,
+.flag.gnq {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAhFBMVEWOP1wHccTt7e3X0c4Ac874+Pj8/Pz///8+mgDjIRjy5qYojEXz8/P69dr28Mwag3fcIx0Qe9Eyjtjj8Po0lB682vKbOlF/uOY7mAbm5ubSva1mwono2MlCrmlcUYRjT34KeasNe6K8LjYwYafGKi8nZK9Dl9uvr6/IyMh+y5u95MvZ7OBX9KKrAAAAAXRSTlP+GuMHfQAAAKhJREFUOMuN0OkOgjAQBGAou8Uth4iKHOJ9+/7vZwjQmJjKzM/Jl3ayXjTD4vkrENKhBCHNUUgRCqGZHaRjCUJkZg+BmQNcLEObJEmT8CcDpJttjElTY5yQNmPD3Dzf7Ia0HuGrbZt/MB+h3gYaeJHjDsY8uZEV1zWr2AVz2zwCpYK76+vvO+qq0s47FjKVHu4Fg+cMg/5FMFgIBneCwWuGQf8kGPQwJx8qkCM/iEB9nQAAAABJRU5ErkJggg==");
+}
+
+.flag.ER,
+.flag.ERI,
+.flag.er,
+.flag.eri {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAP1BMVEXqBDerNnXVFUwsmCzsHDRVeMiAV59Bid0SrSv8qChjbi+ZQzPPGjXwOjH6kinzVS7uKTP3fiv1Zi72cS3/vyb+/BJuAAAArElEQVQoz43Q2wLCIAgGYCo6UAGivv+zhq6Vq+n2X3n4BBWej/vptiNQsgfDnC0MbUZ4NhgC8Ai/GZIxUcR+5WknJWUBjAm716iLTBFUyetK984T9H0SQdAMv5lxnUQDUNJyIsBKCq4Dy6W9eUVahcfD5Ty9hZApxQD2X7Ggq6dOgj+CJaNmW0Uf6C0NFLl1LfpC/0IhSdxBDfT2kbtoAUdoAUfoA7dQhXtQyQsr7xFoxTBegwAAAABJRU5ErkJggg==");
+}
+
+.flag.EE,
+.flag.EST,
+.flag.ee,
+.flag.est {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZBAMAAACx9nFWAAAAD1BMVEUAAAAAcs7///8AJkVUVFRJK4tKAAAAHklEQVQoz2MQxAIYBqGgMRbAMAiBCxbAoIQFDEJBAGOJKS051BtAAAAAAElFTkSuQmCC");
+}
+
+.flag.ET,
+.flag.ETH,
+.flag.et,
+.flag.eth {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAV1BMVEUPR6+FklsaUaFGaojjRhZEnSZ2iGXaEhr83QkHiTAmVp1YdXuipEfOwCgIdlMKZHUVS6qRmlM0X5WzGzaNJVJ4RmN0LGVnL240PJInbm88Y49of3CaoEu2CXfUAAAAnklEQVQoz73Pyw7CIBBG4TODgkJbWnq/vP9zujNSY+vCeBZs/i+ZwP3L+AOsqhir6hxGAIhnULXGBGrVPbxmzWCwgoE5X7i9VgKaRJICZTblsMCKFLYREUtxAC3Y8HyOoQ+b6hb8MSwwyRjbBJPM4ekSkFXsKu+fuWT10CzeLw30+YLLmwDvUabdsIdugLqGwZ1B13bj2LXuHH7o9/ABsVYX6gf7JlYAAAAASUVORK5CYII=");
+}
+
+.flag.FO,
+.flag.FRO,
+.flag.fo,
+.flag.fro {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAdBAMAAAAqZzNAAAAAJFBMVEX///9HUpXtKTnf7PcAZb1XTozp8vnQ4vMBZb1+RHbM4fK20+39jzf7AAAAQklEQVQoz2NgAIEUIaWQAgY0MFQFjUFgCVBwszEcMLS4gABQ0AUOPBgEwWCS0kRBBGBQwgJIEMRqJlbbsbpz2EUHAAeHPE2odssQAAAAAElFTkSuQmCC");
+}
+
+.flag.FJ,
+.flag.FJI,
+.flag.fj,
+.flag.fji {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAvVBMVEVps+fyxs2OiqtgdKFhptbTeo3YVmvIEC4BIWnAyNrg5O3kiJVnbpq/yNn7+vtmr+PWS2HZ3efAQhf88fP21drIRVpsrt1voM2buM5mbZrEWQ/YhHzUegjw8PCx3cXijJrJiIbLkXTZvADN49bPLkjTiJD13uN/uOF+uOCo0Mi1FySjyFRgrIHF0NnHUBLIgYjY2NiF1ZrPsHa5iXDYcBHOhgXknQFIt3uZz7HLYFhdyI6P16/Y0M27zb3c8uYVHlLLAAAA20lEQVQoz9XQxxLCIBAGYKIQjEgCKfZuYu+9v/9jGYSMF0a8+h+Anf0YZgG2VcwX0jgYO2IvIdsCuoiGoBLKSguzpoDZJS10KKV8GAYuxm668rSkWog1eTe8nIpngND3D77frE+hejoNd4NQPB2EQy5qCbf1fv/Y3C9hNky+aNmoJIZ5n2pqGNjode1Lr7tTULLseySV8HxrJ8n11FZQss+HCyrh4D4g5PloQfA9MGIsjlkUGeGq02GMNJAJegu3RchmRj0DBGO+JmQ+GQFjylWEqmXwSyoV8E95AQvtEN53dkXyAAAAAElFTkSuQmCC");
+}
+
+.flag.FI,
+.flag.FIN,
+.flag.fi,
+.flag.fin {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYBAMAAAB6qqLzAAAAFVBMVEUANYC5x9z///8cS444YZwANIC6yN25wbmkAAAAMElEQVQY02NQAgFlBgYWJQRgGISCiYJAIMzAwCwIB2IMYMDKQAJgpaIgVicNkfAEANoyJ4DL1EUnAAAAAElFTkSuQmCC");
+}
+
+.flag.FR,
+.flag.FRA,
+.flag.fr,
+.flag.fra {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAD1BMVEXtKTkAI5X///+ptNv5t70X6cUbAAAAGElEQVQoz2MQBANhJTBwYICAUcFRQbyCAK7MKQicBg83AAAAAElFTkSuQmCC");
+}
+
+.flag.GF,
+.flag.GUF,
+.flag.gf,
+.flag.guf {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAbFBMVEX83AiRuRi+yBJRoSRyrx4VjS3n1gv63AkkkyoLiy/Pzg9fpyEcjyza0Q3v0Qv22wk1mSf32wlGniTSKxn83QkHiTDaEhrxnA4dfC3pZhFjVCayJx6LPiL60An4wwrNGBvvkA7cHRhWWyfgNxaA7xGhAAAAFHRSTlPzv8HPxfLO6eX6wcrrxtTd2+PT9HbczSwAAACWSURBVDjLjc1JEoJAFATRZhJQENTs3wzO3v+OLsAIVnbV+kWWaxsvzVEeRAj7QoRS1AFSdIWUmQghLUTIKRMhpLUI6c7eez8MUbhEp0mAdL2fZwHeRjMzs+sQK/J8mT3e8Wv4mF1qAd5tHO3Yx2EIEIJL6uj1umMlQlwiQthVItxG/8NNNAZxuQh/UQEuUQVC24iQMv8CwB5UlCzbsBIAAAAASUVORK5CYII=");
+}
+
+.flag.PF,
+.flag.PYF,
+.flag.pf,
+.flag.pyf {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAsVBMVEXOECX/tk+2i43y9PrOESb//v5lhMLaS1r////bTV1wjcbIDyTkkmjr7vb/9+v+8d+IoNH3t2f/yHqqhqH++ff/qzbfoJV4kci3xeTb4u9afL73x4fMo7P/0IzHKTvfnYvoq3yySlTBWmXkmXvdmYjEh4zpm13Who3yx5f//fn/1pw+ZbL/6s2Dh7b/3aqLotG1f5j/oh/AZG7VfHemd3i+oKKak7bywobNamm+ECDt5uYgMvG2AAAACHRSTlP+/////////kgsYtwAAACzSURBVDjL5ZNHEoMwDEVtiA2xIfTeO+m93v9gYR0yNuvkLTVvpBl9CYDZJAD4KVGaT0ICSP4E2bY8Lo5EO2mfr+MO8cSFYyq0cyBcckQnb11Ke8Uw2KJmZpVCqXHOzQVT3MC67rvy/lCgxhQT6DbCwKmCK/boyG0uV0Eos4g5GqnESoubVaRbT2R2RATHFsGHOPQ461H1UMeErLHKS0b08V7HvsiNcFCDQPyS9eTr+cvnegOnuCDbYqL39gAAAABJRU5ErkJggg==");
+}
+
+.flag.GA,
+.flag.GAB,
+.flag.ga,
+.flag.gab {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAeAgMAAAAjs7ROAAAACVBMVEUAnmA6dcT80RaPCvp4AAAAFUlEQVQY02NgoCtYBQf0YIbCAR2YAPNdY51lSXDNAAAAAElFTkSuQmCC");
+}
+
+.flag.GM,
+.flag.GMB,
+.flag.gm,
+.flag.gmb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAElBMVEWGjsY6dyjOESYMHIz///+FjcUzsQhvAAAAAXRSTlP+GuMHfQAAAChJREFUKM9jUMICGIaKoAsWwMAaigECGIyxAJoIYrUdqzsFsYChIggAWI9PB/8YOioAAAAASUVORK5CYII=");
+}
+
+.flag.GE,
+.flag.GEO,
+.flag.ge,
+.flag.geo {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAALVBMVEX/////AAD/v7//Pz//wMD/8/P/f3//19f/5ub/YWH/nZ3/sLD/Ly//gID/QECpnlCHAAAAk0lEQVQoz2NggAJmQUEDBnSALsjughB0KYAKMokhBBMVIGKsLyWvwwRrJ84LgIgKCgrBBBUFBSFiHLukNGCCTQtXN+A2k4GVFSEYEIDTnS5Q4CMoeATGBlqNCWgiqAQFOoKCh2BsnOGJ1UfY/M6xS9oDJtgCDyVs4clqKZkOEyybOBlqKAu28GRXQQg6FeCLdwxBAHsYKbiOyGOgAAAAAElFTkSuQmCC");
+}
+
+.flag.DE,
+.flag.DEU,
+.flag.de,
+.flag.deu {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYAgMAAAD16ldTAAAACVBMVEXdAAAAAAD/zgCNyoGDAAAAFUlEQVQY02MIhQMGqjJpBVbBAVWZAPgZT7HoYeqNAAAAAElFTkSuQmCC");
+}
+
+.flag.GH,
+.flag.GHA,
+.flag.gh,
+.flag.gha {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJ1BMVEUAaz780RYAaz/OESbOEiUAAACCbAvcthMPDQG1lg+dgg3swxQwKAR6YlIEAAAAAXRSTlP9g+pWxwAAAEtJREFUKM9jcDbGACYMQ0VQEAbEC+FMhKBYIhZBmYMYguJpqWFphegqZ4SGdmJoF2+N2IgpGBqKKSjVOWMhpuBGaYQgkxIGUBgqggBnKVEwiejeOwAAAABJRU5ErkJggg==");
+}
+
+.flag.GI,
+.flag.GIB,
+.flag.gi,
+.flag.gib {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAArlBMVEX////39/e/U1jPAAn8/PzHAAnjY2raAAzpZm3UAAsAAACbAQXQGAny8vL09PS4AArVRk64GyNVAAHCOAnFfIAbBACiExmvAAaRAQejAATOmp2+io27Jwa9RwbCcnfbxcbTuru5JizFbnLQq63ksbThrrAuAADESE7TuLnCICmnTB13AAR+OQCtMDe6NjvLMjtiAALdIge5bQbDYAjITgq2VwGSP0KTPkS9AAi3cnZPTm/iAAAAy0lEQVQoz53P1xKCMBAF0BQSTAJSpKP0Yhe7/v+P+czABMb7mD2TuwvAn1EAgBBCAJQJl5VbdD6jbZlNSKdFsRARap2J6gpf4jCMLriagLV9irsuOtm1fMW0aN5f23ZeTZHKllSS3LN2lrWzvDyRXqNjRjBjmDCsS7uXjBAWBIwQtpRD7Aqf80/gYjnUCT8IzsWBE2k1RIbhe8ej5xsGgv3ZohdKqWnu96ZJKe1PgDqItnlqw9cRqLprdR58rOZB7T4Trm9zf9xcR+APFrAUctS1tzYAAAAASUVORK5CYII=");
+}
+
+.flag.GR,
+.flag.GRC,
+.flag.gr,
+.flag.grc {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAADFBMVEUMXq////9Kh8PD1+sc/9mlAAAAKklEQVQY02NgYHVggAFcTM5QMMDBBOIYqFLsTIImEHRDKBzgYBIEFJsAALoFJ2TsUBu2AAAAAElFTkSuQmCC");
+}
+
+.flag.GL,
+.flag.GRL,
+.flag.gl,
+.flag.grl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJ1BMVEX////QDDPohpnVIkX87/L54OX0wsvxsr/cSWbfWHPldYzrlabbSGWxUx9nAAAAj0lEQVQoz2NgoBlgTSrFEOM2FBQ0QhNjaRQEglZUQWeQmKBwAIrgRLCg4AFkMXaImKA0siAPVFAYWZARKijogCQYCBNMgIkoYQEMQAUGMAUHoTpAggIwQUMkQTFYAAgiCUpCBbmQBQULIIKJKIImkGAxRBEUBitNFkQRFJQC+sVJEE1QULhpsiCGICqgUBAANkcdSdbxxVsAAAAASUVORK5CYII=");
+}
+
+.flag.GD,
+.flag.GRD,
+.flag.gd,
+.flag.grd {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAbFBMVEX80RbUJyIjhlMSgFhKVEn5xBTWMiEAel7OESbPsiL1zhgHfVtlnUHkahyRrDN6pDujsi/WQyHiZR3lcB2FqDeGSziznirdxh7lyRzsyxq/WiihMzDRHCT3vhPtkhnrixlHk0jypxl7fjq9uifbhgG8AAAAx0lEQVQoz5XT2Q6DIBAF0AHFoYor7nbR9v//sdZawIoNvS83GU5CQASuQ4i9l4Dh2OVs6x3k15u9Fazq08/U1Qp9FA0cphHoK4iRaO2sFRGacKZpt2ddGr3WNhDRK8MtC0vvvfIFZ5oYNEy8z1xBNUGaASvyvGCQUTXUkD5GTXsuJe8NZsARIFXTYQKYBrRCCnmmIQEgBxCTO9VbF1IWB1vj92HkwWGcr+evC3f8hK6PwvGZOT/cNUEcB7be/zOM2XsHg8DeS5725xrneLCWvQAAAABJRU5ErkJggg==");
+}
+
+.flag.GP,
+.flag.GLP,
+.flag.gp,
+.flag.glp {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAh1BMVEUAAAACQwAAIgDdxAsAAAIAI4cAMwAAJIj83QkAAAAQDgCuozBPXV8WM3xfaVgACAAwKgEgHAEAVwAwR2/t0AiOfQU/OAK9ryieiwURaAAAGADt0hB3e0vNuiBfUwOumQbNtAc/U2gAEABPRQJvYQOelzi9qQZqfwMQIQB+lAQoVQF+bwSOjECMgg6qAAAAAXRSTlP+GuMHfQAAAWVJREFUOMt1ktm2gyAMRUVukYAjzrNW7fz/33dptaItPTwkmr0SchbGwXqpt5TCUOWOPceDMYMOdVUx5SqvqLMDe1qpIqUq57TfgGFq02paenK3Tt2lZzU9aJ+GK+iWNeblUqSYT3jpycu0rktXjbbd2rXny1i2w9P3Ck7/LOyWKTd35Ntlyv0yIbeVI9PDWT/sNNyBlv3DR2v10fj7EpPnU4ZhwEtHb44Q+P4YJAN8aAE9k5imDADsnnRddm+TRAsCEkiYZnGBOI6oFI78Qd8RCSEQIXFLF+Gg0YEgyVzk1+uboxHWjoaCEJHnN7yCFGe+DpTTC3HLFEejeGA6EArvcj5tQNpoR7+8LMYteGp+gayZvVnU+r9A8E/dZpk8R4XpaUFgnWp5PktfCUJEA7IhWP1ps4tJkDymriMkPsazNxkwOD5R7egn2Y5xl/nj7OGReD9A+c6SoAmCQP/MdmLAvv6B8Q8o+yuQH5IUZwAAAABJRU5ErkJggg==");
+}
+
+.flag.GU,
+.flag.GUM,
+.flag.gu,
+.flag.gum {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAVCAMAAAADxFwsAAAAeFBMVEXCHzmW0OxmN2t3w8MNKHaS2/xePXLGIDgAKXvGITmQPGGQTmpsTH6IQGpka51wO2xAocE0qF5ovayF1Oevx+KBW3mahqe8mUjQxGkJh9h/n5iyuXuXtrSJgqiIsbNXmmeSpJZNn9a/h5e7oblqrNiVxsm05P0sdJ7LAldAAAAACHRSTlP9/////////V+qNIUAAABxSURBVCjPzdM3EoAwDARAB8mYDCbnDP//IS9gpJKrt7hREJ7PiieEZUX8C0IcAAvGWgYcqFyea0NDmIrF6RpIqCTOBaIiYYrlXh6YktDIW67XaOiOybk9XUJ3tKbPsibizDEa2pC3mSqEv1/PB+T+zAtTThsh36bO6AAAAABJRU5ErkJggg==");
+}
+
+.flag.GT,
+.flag.GTM,
+.flag.gt,
+.flag.gtm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZCAMAAAB0BpxXAAAAXVBMVEX////g59maroTj16m6yaT09/P09PFJl9DC3O/p7+bu4ZOqu5rX382PiGiVon3T2MqYoVjCz7f5+vrM3MSitpGYm3R3k12BnGjKvKzP3bz+++rx5Z306Z/w46vf17vmoc6yAAAAaUlEQVQ4y+3Stw6AMAwE0EsFh4QSev3/z2QNk2Fgy61+OkuWUaQpkaR8jJDhV2jMG9hpNDMaz8JKnE71UXPQSmzuWDGxjRLX7jQNxEAazKJU7SsOQgRtogzErrZ12/Xt+OaOBCvym/0Fb1tLFihEHgDLAAAAAElFTkSuQmCC");
+}
+
+.flag.GG,
+.flag.GGY,
+.flag.gg,
+.flag.ggy {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJFBMVEX////oES353Rb5w8ruTGHwdSH1qhvrNyj40RbtTCTsPVT0nR3fS35zAAAAZUlEQVQoz2NggAJDQUFhBnRAgmBoKBbBInUsgkKKtBV0gYKFQopSMDaDIAhMBGIhRSAhCeZCBFtDQ0ODVIFEBJKgEhwgCbalpaUlqQGJDCTBQmxmCsIEIYB+fscf8tuyKYpiJEEA44Af4yfh9owAAAAASUVORK5CYII=");
+}
+
+.flag.GN,
+.flag.GIN,
+.flag.gn,
+.flag.gin {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAFVBMVEXOECXOESb80RYAlGCovC7tjxrskBsC56JSAAAAAXRSTlP9g+pWxwAAACBJREFUKM9jYBQEATElMHA2BgMGiKDoqOCoIEwQNYUAADVVSCfgcZ/QAAAAAElFTkSuQmCC");
+}
+
+.flag.GW,
+.flag.GNB,
+.flag.gw,
+.flag.gnb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAIVBMVEXOESYAnkn80RbtkBpFbjwEAAC8DiEjAgaQCxqcDBxVBg4bYLCCAAAAOUlEQVQY02NgAANmJWTAQE/BBGyCC7AJRmAKspWGVmCqZA9NYGARRAYgwaUTMAUz2RowBUFgMAkCAEjfH7SkK65IAAAAAElFTkSuQmCC");
+}
+
+.flag.GY,
+.flag.GUY,
+.flag.gy,
+.flag.guy {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAgVBMVEUAnkkRpVX+8bZYwIgkrGN0ypzB59P80RbOESYJCAGk3L7t+PFAt3caAgSOCxo1BAn8/fX93lf943H+7J781SvZ8OSM063/9s7+6If82UC9nBDcthS1DiFnCBPBDyP/+uUfGgIfGgJ+aQt+aAtPQgb9/O5OQQa9qE5DS0d6uJeAemJ4QqG6AAAAsElEQVQoz42TVxLCMAwFQyiSIRB6h4QS2v0PiLHNRE6Rtd9vZp9sKXq9k0hEqj6jYbcTDuJkfHnGxaDfCwXxfFL3w2yRrdYJH0Q8puoKsNtuuBJo0P49ACzn8bSthA1aP/xoK4F/rN/QWAJLnN9QL0GCxO9KFKQEehB/tQRWoH6vRD2YS4JafROo9TAPb5iseRhqZZ6HWLkHL638FzpraCmsNbhmxipYXOkpiI9Leq5frY4Y/eRr36cAAAAASUVORK5CYII=");
+}
+
+.flag.HT,
+.flag.HTI,
+.flag.ht,
+.flag.hti {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAUVBMVEUAIJ/2zdTJ1cJ6e5/K0OtQkEr////SEDTXJkgYNamdqHn3+fC7qsOVwZ3m5c1hmlHJpDHs59z848dQba0QEBDNZmTXh19voHz84Lu0hjjIpTBzGy2qAAAAU0lEQVQoz2NgGAU0AZxQQFAhCxsbrzg3GwsRCvl4mYhSKMQsyMcsgamQHQ0w8jCLiQrzMKKLYypkkhKRFGAirJCLnxUEuAgq5IACggpxgVGFeAEAvUgOmZnoHJcAAAAASUVORK5CYII=");
+}
+
+.flag.HN,
+.flag.HND,
+.flag.hn,
+.flag.hnd {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAG1BMVEUAc8////9Vot/g7fnv9vx9t+YSfdPS5fao0O4m4Cd/AAAAQUlEQVQY02NgGFCghAUwCEJAI4iQgHKggsIpINLNEEUQCEQD4UyYoCFIUARVUDwZRJoVogiKgLnijlBBrE4aUAAAhVoQix6fUHcAAAAASUVORK5CYII=");
+}
+
+.flag.HK,
+.flag.HKG,
+.flag.hk,
+.flag.hkg {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAANlBMVEXeKA/qeGn3yMLmXUz75OL98vHvlIjeKRD////th3n519PkUT3xoZfiQy3oa1nzrqXgNh/jUT0/tP8hAAAAAXRSTlP+GuMHfQAAAJRJREFUOMvd08sNAzEIRdHBBnzxd9J/s6kgHktZJayP0APBdZWjuq5fhbkdwZYYJ/CucNRRCPwJtlKKmyJj5nsH1b11oztgsoGATdasqgLzM6wEXSI8AT02GTE1eWUP8bydOle0D+la76f13BFpubEe4DDQlbTaAwykklNN7GFWYJVp6B6OnlIupTSLw3uMv/mZr+Abp+scdpIFX0UAAAAASUVORK5CYII=");
+}
+
+.flag.HU,
+.flag.HUN,
+.flag.hu,
+.flag.hun {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAD1BMVEXNKj5Db03///+Cn4jdcH1rDt86AAAAHklEQVQY02NgGFDgggUwKGEB9BM0xgIYBLEAugkCAA3bITVQzOs7AAAAAElFTkSuQmCC");
+}
+
+.flag.IS,
+.flag.ISL,
+.flag.is,
+.flag.isl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAdBAMAAAAqZzNAAAAAG1BMVEUBUZz////A1ObcHjUCUpz2xsyBqc3o7/a/0+YtMruUAAAAAXRSTlP+GuMHfQAAADhJREFUKM9jcAEBp2BjMRc4cGAYfoJKIKAebCyuBAcaDIJgEGwsiAQYjLEAEgSxmonFdiWGkRHyAMPXhW+2p/5SAAAAAElFTkSuQmCC");
+}
+
+.flag.IN,
+.flag.IND,
+.flag.in,
+.flag.ind {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJ1BMVEX/////mTMSiAfY2O2pqdeDg8bCwuOPj8tjY7e2tt2entJvb7xlZbj+tLZ3AAAAOUlEQVQoz2MQxAIYhoogXsByNMIBQ9B8smUwhmCZ15J0DMENHi3cxKk0xWYmW2tEAn73KWEBQ0UQAHj7LkjxXc8wAAAAAElFTkSuQmCC");
+}
+
+.flag.ID,
+.flag.IDN,
+.flag.id,
+.flag.idn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAADFBMVEX/////AAD/f3//AQHNXVckAAAAF0lEQVQY02O4GgoF4QyDgbkKDhgGFwAA0P04aY5rCYgAAAAASUVORK5CYII=");
+}
+
+.flag.IR,
+.flag.IRN,
+.flag.ir,
+.flag.irn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAXCAMAAABODP0nAAAAUVBMVEXaAACe1KvjRUXxmZnaAAAjn0DwkZHfJibsd3f////kSkpduHOo2LRfunQkn0FYtW7jPz/ujIyj1q/0sLCY0ab62dn2v7/zqKhDrVyMy5r97++GuGN/AAAACXRSTlP9/////////f2Mg7y3AAAAiklEQVQoz92PsRKEIAxEg9xFISIII6j//6EXQKuzSO2SzJuwWySwfEVa4FXB3ZEnIu/cDd/AXeEaiHY4ZhWVmtuLF+L/fIAR6iG4lbJJgjrlnJIgmFEXzIJgwsQl2jEE0Y7GnOfT1ZNG1KhXBt7ACu61GxUTjMNgA5e1FTwwqvinG90fAT4iwauCP4TbGUYnV3DMAAAAAElFTkSuQmCC");
+}
+
+.flag.IQ,
+.flag.IRQ,
+.flag.iq,
+.flag.irq {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAM1BMVEXOECWl0Lrp9O6/3s///f1/vJ1xtZMAAAD////OESbP5toVhU1Am20/mmyQxapfq4VQo3lSLMJmAAAAAXRSTlP9g+pWxwAAAGNJREFUOMvt0EEOgCAMRFFKmToCAvc/rStXBsSEJX/90kzq3DmVcxuugYFThS70n9A8hWRU8UNokQTJeGF0Ua2oAaRgBGG55dxqlZhSQhlAAwAR9QAUXfisD3/e84LHZBuugTd42CCCgiyR9gAAAABJRU5ErkJggg==");
+}
+
+.flag.IE,
+.flag.IRL,
+.flag.ie,
+.flag.irl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAD1BMVEX/iD4Wm2L///+y3sv/176zaFdvAAAAF0lEQVQY02MQBANhJTBwYICAUcHBJAgAHJ0eZQMU55UAAAAASUVORK5CYII=");
+}
+
+.flag.IM,
+.flag.IMN,
+.flag.im,
+.flag.imn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAilBMVEXPFCvSzsrc3Nz19fXSfIfKHzTNSVnJESjMEinKLEDHSknAOzvHXmvCHDLTo6jMZnPHU1Tkx8vLln3bx6nFOEnHRVO6e3HIkXXKn6TKn5fLUhrIf4i9cCrGUGDPn4q9Sy3Rho7NLUHVzJLd0ovVv8LLHCXSkZnit7vTqq/z5+jOuYvEp3DCnV/t7e074otqAAAAeUlEQVQYGd3BRwKCMBRAwQcE/g+92Bv27v2vpxeQZOXCGf6X8mF3gIgwYJyq3XadoKvZdMR3Mi/DYxtVsF4KQ9JeJHk1IlfDID1B9niaIsxxsbfgHgWHBAe9RGVtzCbGod63Cqo4VeFZ8ZI0+QIvRZDhJZ7gx8b8whv8pgVlegsDCgAAAABJRU5ErkJggg==");
+}
+
+.flag.IL,
+.flag.ISR,
+.flag.il,
+.flag.isr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAdCAMAAADvl95BAAAAM1BMVEX////Cz+5Lcs2OpuBcgNI9Z8n3+f0AOLi3xuu/ze3e5fZ2k9khUsEPQ7ymueYzX8ZCbMvN/KBjAAAAbUlEQVQ4y9WTSw6AIAxES2lBfsL9T6u4104iifEtuppM/0TL2UAognwpTCCvJiaC6ZKqnSh4kcbcRHx4VmqRse9DihqWucZpHGu2kneekTvZjgFy7FeNataId33iVN3azdwtDL2eP7wC/NfLOQC4WhA4gpKDGQAAAABJRU5ErkJggg==");
+}
+
+.flag.IT,
+.flag.ITA,
+.flag.it,
+.flag.ita {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAD1BMVEUAkkbOKzf///+q28Hvt7vgJlTcAAAAGUlEQVQoz2NgAANmJTBwFAQDhlHBUUG8ggBRSidzkDNWIwAAAABJRU5ErkJggg==");
+}
+
+.flag.JM,
+.flag.JAM,
+.flag.jm,
+.flag.jam {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAALVBMVEX+0QAAAAAAmzoSDwD4zwHyxgAZoTSYuxeCawCJcQCSuhgeojMfojMhojPVrwBemeiWAAAAgUlEQVQY023RwQ2AIAwF0H+Aq0lXcAq5MYJbmDiAF4+O4A6u4AiO4DpSoWqxPb6U8PkAbm7V7BHoAaUH4NH1ajft+QXEOokNbAS6dfsa46tjthspZGVbSTDrYwVZ0xQTpJAiu2IKmwrZ6uPWRZ9Ii2AwwlvPtApRJtWZJf++44y4AGk2PZ/nYcIzAAAAAElFTkSuQmCC");
+}
+
+.flag.JP,
+.flag.JPN,
+.flag.jp,
+.flag.jpn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJ1BMVEX///+8AC355+vIL1Pqr73VX3vegJbyz9fhj6LADznRT27NP2DqsL6WBkFXAAAAXklEQVQoz2NgoDdgOpajgCG2UVBQCl30pCAQTEEVYxcEgwIUQWaIoAGKYCNEUAJFMBAiKIoiaAgRFEYRFIQCbCqlCZuJ1Xas7sTqIwZPLH5nYFqIJZQYmNxSFOgeiQChfg9XF5eK2QAAAABJRU5ErkJggg==");
+}
+
+.flag.JE,
+.flag.JEY,
+.flag.je,
+.flag.jey {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAflBMVEX////2zdHqlqD87e776uzWNUj0yc7ODyX//f3RHjPrnKXQHDDXOUvhbXrYP1DgaHXfY3LQGi/zwsjqoKny4qTpk53ekkTpkZvVMkLs3Jfpp6ronTfXRDX//PHjzGfn0XDks6jbfDvirDPqtzbheDb00rrsrI3uvULLWjzhkDGG5NwUAAABCUlEQVQoz42T7ZqCIBCFB1OhtCwh00f7rt26/xvcERYZCrY9PxQY4HWOM8D5ZifA037vz8VuwzmsOOdZTVZVp5TqyNk6wy0rEHKO73U6ravj8XDopmm6xvBcjgdnSxwWW3sHOzdNc7f3bwsMLmc2pvm5mcjrpb98mXGuqYx82MLx5fnRP6WjLvxUDT/BxbpvbjfMTiQe1YmVhi+G63crDLVkEJDhV+lpGE5pFaA66XCRMBajOuUjv9SPHP6Wvgyp8ElJ9q+NGt22n9C/yQhjYRVLxtozHYnYYw0H8psDhrtfOAFCZlIqvJQi5XtlRlV7ZfZOJShXuG+tACE+tsJrc8X4QNslZvDYrj+d2w/y/o7CEAAAAABJRU5ErkJggg==");
+}
+
+.flag.JO,
+.flag.JOR,
+.flag.jo,
+.flag.jor {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAOVBMVEUAAADzwcY0XzY0BAlAm21AQECfKSzOESb///8Aej3aS1uaDBzRHzL42t2bDBzULkHmh5JkeFpkNDmS7NDKAAAAY0lEQVQoz43QQQ6AIAxE0SLKiIKo9z+sRhqDC+z89UubVjYvXMDqSUhSgKQASQGSoimcU7cPBBY3d1KYTFrhnpM1tUKXCwcTu5o/Rt9zjN0aGIb4k3DshRZTaLMHMuyGHIvxAjjaEhDK4xL+AAAAAElFTkSuQmCC");
+}
+
+.flag.KZ,
+.flag.KAZ,
+.flag.kz,
+.flag.kaz {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAM1BMVEUAr8phuIFvuHYQsb0xs6UfsrE/tZpUt4ovs6b+xQx9umyGu2WfvVJKtpHvwxeQu13PwC6ofxUkAAAAmElEQVQoz6WSwQ7DMAhDAwiwm6Td/3/tDrssSdVFGkf0BMa4lO1yjT3wOuoeKEfugXn43ALgd+Ck0VJSciVF+8j1SrL1hZQ2avQ8SVIwgzG2zEGSTBQbQb2+J0LtMzExa9c6gC8JPXnWdF6Pq1tGJDJdmz8eg0C4ewf0hz0wC02HLPbUJRQV0fTmM4tjJWB/hGI7ZtvB3aw3Td0Ecu+54W4AAAAASUVORK5CYII=");
+}
+
+.flag.KE,
+.flag.KEN,
+.flag.ke,
+.flag.ken {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAUVBMVEUAAAC7AQHdgIAmAADl5eXl7+UBZgHZcnIAZgC7AABRAADMQEDBLy9pAAAyczIwMDAQEBBAQgDY3di4UFCjAADQ0NCAgIBgh2CQkJAYWQDmoKBlCIy5AAAAmUlEQVQ4y9WRyw6DIBBFr2Ipw0PFt/7/h7az6IJRA4tuPAmB3JzcDAA8jq47n66Ze8AqoJ8zlcsG65zFtmTEvlFU16S4OaURDJ5FP8gcb8FILNIoc1SUEiYWpyDi6iSqQM5RUFkRlrwnWyQeByn8r7F4xttbF7/jS/D7GZlDm5R1Z3FfRayl2LYmOhd5z4jfFaPROife8QjxAw+XGXSXe9vGAAAAAElFTkSuQmCC");
+}
+
+.flag.KI,
+.flag.KIR,
+.flag.ki,
+.flag.kir {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAgVBMVEXv5+oYMHD////GzNy+Z3Hkv8PIEBDesLbFd4C5V2Pz8/eLl7dvfqaMmLhEV4s1SoJSZJTFDg740AB+i68nPXncggLvvwDRXQPIGg23v9NgcJzIJQvorwCpssrVaQXQSgfFGQz1zQDKQwnGLwnfkgDgjQDU2OTYxFDi03vu5rZRY5M4CaL6AAAACnRSTlP8////5PL/8Obhjyud7gAAARFJREFUKM+NkImugjAQRaetgrJVpJtsBcT1/z/wtayKCbxJyCnDSe8M4CwrNo8udZN9t+H7NZNctlIKHsfOqhhftb7V57q8boiOozLOy+znwl/RUXGmlHK2RBU3sixlVqkNsZJc5LngcmPGSrcir+tctLpa/z1ciLMpIfi62Nzy2op1zvVC9PaH484F7Lk98ev5eDxfGIO7Ox723kgg2BYpJnqW3kejJyB0Ck4MoZlRmkaWzDRmAkkiRIMLmei/EXr7hFwCiqJkInRJJmokdMRAFh8ARWEY2oiRNAnDhNpRTCOaCH5qJd+faQZlqTlYaaZNGm6feL/jIfaDwLpF6LAQRSwoCCkCZkboF+nJAP2z/gCvnR084pgM9wAAAABJRU5ErkJggg==");
+}
+
+.flag.KW,
+.flag.KWT,
+.flag.kw,
+.flag.kwt {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAJFBMVEUAAAD///8Aej3OESbeX21Vpn5BCxEIKRgAUymNCxoAcjnBDyM+gG8gAAAATUlEQVQY02OoUsIEDAxN2ATZF2ERZODAJshQhU0Qw1iwIHsoKgALMgiiAvoKsrmgArDgZGNUABLLNsYU5DTGFGTbjEVwsjGmYDammDEAor02RGMqg7YAAAAASUVORK5CYII=");
+}
+
+.flag.KG,
+.flag.KGZ,
+.flag.kg,
+.flag.kgz {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYBAMAAAB6qqLzAAAAMFBMVEX/AAD/sAD/UAD/oAD/cAD/QAD/wAD/kAD/8AD/MAD/YAD/4AD/gAD/GAD/0AD//wDINHCxAAAAgklEQVQY02NgoDfg1FK9gCG2xlC4FF30UnZbxkNNNMGFG0+0SGehivHWmZTOWfwmAEWQVUI6MmhjswKqoNgTpxC3xAUogkxi6ubFJYloKi18zn850oxqJufpEvnP7s/RHLpsu6NJtRCaOyfZtWVs00UT5A0XFj41Ad3zvEGLJtA9FgCBRSUPxoTUWgAAAABJRU5ErkJggg==");
+}
+
+.flag.LA,
+.flag.LAO,
+.flag.la,
+.flag.lao {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJ1BMVEWbFjXOESabFzf///8AKGgBJ2c0VIfw8vZQa5eAlLSgr8fI0N4gQ3uPvoTKAAAAAXRSTlP+GuMHfQAAAFVJREFUKM9jEMQCGOgmyKSEARQYQlwwgCtc0G31rhQMwcnGxpbogh7GQNCCJugOEixBEzwMErRBE0wGCZphE7QhxkystmN1J3Yfubgi+R1rKA1oxAEA7A9c3kKd8BcAAAAASUVORK5CYII=");
+}
+
+.flag.LV,
+.flag.LVA,
+.flag.lv,
+.flag.lva {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUAQMAAADFiO34AAAABlBMVEWeMDn///+ut+dDAAAAEklEQVQI12NgIBH8BwEsJIkAAKwEE+3AWvguAAAAAElFTkSuQmCC");
+}
+
+.flag.LB,
+.flag.LBN,
+.flag.lb,
+.flag.lbn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAP1BMVEXtGyMvtnEPq1s/vHzyVVv//f0AplHxU1n////tHCQfsWav48jv+vSV2ra/6dN/0qdfx5HW8eNvzZzbXFlPwoebhZrvAAAACHRSTlP9/////////sajZT8AAACUSURBVDjL5dPLDgMhCAVQgXqH4tvO/39rt61OdNbtXbAwJ2gIOve8Fed+Ch6PWzmc1zFR8nSm/gIWgPINmE2YaA8jVQZS28FA1dgq+rZjAhggS2sYTyKGAFbiEuZMDADVaAl9Y2MhAFLKCrYeRADIycMjx6tTaipAUNUQNgNvjGk4VzD3qLWEGY7b8/qoX9vzl5/rDXxKIaya/qD4AAAAAElFTkSuQmCC");
+}
+
+.flag.LS,
+.flag.LSO,
+.flag.ls,
+.flag.lso {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAANlBMVEUAlEM/Pz9lZWV/f3/9/v0CAgKPj48AIJ8AlUP///+8vLzPz8/v7+/f398fHx8vLy+fn59PT09zsOZCAAAAAXRSTlP9g+pWxwAAAGFJREFUOMvtzkkOwCAIQFEGpRXn+1+2dk2iHMC/JC8APM7gwi0MyaRqZ8HCoMzDAxOLsA8SiQsORN9pidG1McdVPsPaf9jyESK25TqWA6zUiSbhrMcfi4posT/C6wou3MIPDB8g750ZaJ0AAAAASUVORK5CYII=");
+}
+
+.flag.LR,
+.flag.LBR,
+.flag.lr,
+.flag.lbr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAVCAMAAAADxFwsAAAANlBMVEXfhZhkUX1TH1NMaJXvwszvwssAKGjPR2P///+/CjBqgaZ9kbLO1uIYPHZmaZLp7PGdrMSaZ4i5Qx90AAAAWUlEQVQoz8XQOQ6AMAxEUZPAj7Ox3P+yVGmtoeLVI/nLxpJqyD4NG0DzkAGMDJx7yCBf7mMqp7s7kErIgHv2rDWC1Ci+Z1sei7nIZFVkh0hvLKI/G+XT6vAF+EQWV9KTaOcAAAAASUVORK5CYII=");
+}
+
+.flag.LY,
+.flag.LBY,
+.flag.ly,
+.flag.lby {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAG1BMVEUjnkYAAADnABMfHx9xcXHAwMAwMDBFRUXPz8+rn9MXAAAALklEQVQY02NQwgIYaCEoiAUQEDRxxhQUbhYuxBAUcRQOTSRKEKt2rBYRdie9AAAq8R55cd7EcAAAAABJRU5ErkJggg==");
+}
+
+.flag.LI,
+.flag.LIE,
+.flag.li,
+.flag.lie {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAV1BMVEUAK3+LdBxaTgkLLm0AKHxxZB+5nCXOESYAJXg/OBMAIWU1Q018by4AHnHpxDRJTzoAHVncujF2cklKQxo3SmBpZDKtlzYPKVWVgSv71DupjiVkWyBpWBVMEWERAAAAXUlEQVQoz+3PRw6AMAxE0TjEwU4Pvd3/nBzBYYOExF+/xYxSTzOm0fmuyVHMK5HsMp6aEb3kYrBWa2tnaSdtcAECBPHJstcj1TSIGydmZh4bjpMrxZF6t76xH34e3uVzD6wKgmdUAAAAAElFTkSuQmCC");
+}
+
+.flag.LT,
+.flag.LTU,
+.flag.lt,
+.flag.ltu {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYAgMAAAD16ldTAAAACVBMVEXBJy0AakT9uRO6V9nyAAAAFUlEQVQY02NYBQcMVGWGwgF1mTQCAF49T7GuEQs4AAAAAElFTkSuQmCC");
+}
+
+.flag.LU,
+.flag.LUX,
+.flag.lu,
+.flag.lux {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYAgMAAAD16ldTAAAACVBMVEXtKTkAod7///8YqkgeAAAAFUlEQVQY02NgoBFYBQfUZYbCAVWZAPgZT7EeR7VTAAAAAElFTkSuQmCC");
+}
+
+.flag.MO,
+.flag.MAC,
+.flag.mo,
+.flag.mac {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAS1BMVEUOdGGGubDD3dglgnA8j3+Vwrqky8QPdWL///9Ll4ktglldopUee1201M5Sk09pqZ3w9/bS5eK0vTY8iVXh7ux4safSyi6zvTely8QsOr8PAAAAAXRSTlP+GuMHfQAAAKlJREFUOMvdk9sKwzAIhqMx05x6btf3f9LZDgaDYQq72v4LJfDxRQNxji/FuR8FU7oGpm0rbXC+M3cd85RaxpnZ+7NZYFEXZ8SsrSsGmKbCsYpU4vJ++YdlIopgbC3jgfwisngCb4ERQt1HNYYaIBpgL5pBjUfPBkj1JIejIlkzrjgKAqCMuFozEkDoA5EWANNI8RWyjM6H2zO7/Tx6pqxsyOpzf/FnvgMfWGQc92vH/soAAAAASUVORK5CYII=");
+}
+
+.flag.MK,
+.flag.MKD,
+.flag.mk,
+.flag.mkd {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAMFBMVEX51hbOICjzwBjaTiLkeh7gZyDuqRrsnBvVPSTcWSLxtBjRLCf2yxbOHyfmhx3mhh7oX2dPAAAAw0lEQVQY02MwY2CoFgSBA0xgajsDQzKDoBkDkyGIl8AOIoUVGJIFGQSBovwbgVwHFiAh/QEoBhIUnMSwAkhOYAYSXQzKghBBwSAGR0HBBm5BQREGVUGYoGAQW6OgjKLgjQSwGFRQMOio4BVfwRiIGExQMKgivLQdKibIwJXuMrkRyJjKwBAJpCQsXcoWMIABUMacgaEYzscqiFU7VosQTnJEcxLU8RLIjgd5UxbNmygBogkRNGPgQwTdA0jQYQtkbNEBAHgKPmhpzmYhAAAAAElFTkSuQmCC");
+}
+
+.flag.MG,
+.flag.MDG,
+.flag.mg,
+.flag.mdg {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAGFBMVEUAfTn////8PTIAfjp+XTZWqXz9fnepk3lpgAtyAAAAAXRSTlP+GuMHfQAAAB9JREFUKM9jEAQDMSVkwDAqKO6CDKCCosZIwGAkCwIAcRhIc5cNL1IAAAAASUVORK5CYII=");
+}
+
+.flag.MW,
+.flag.MWI,
+.flag.mw,
+.flag.mwi {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAIVBMVEXOESYAAAAznjUWAQM0nDQ1BAluCBNMBQ1aBg9/CRa3DiHb5SsEAAAAYklEQVQoz2MQxAIYYAzTsvRgdEHzmWlpM4tRBYU7U4tNy2YYogiKzTAOSzXuTEQRbGuOYmBYapGOLCg8w5wBCII7DZEEJTKsQIKL2wqRVRqahgJBsDBU+5AGTkoYQGWoCAIA3CUzq4wFS+cAAAAASUVORK5CYII=");
+}
+
+.flag.MY,
+.flag.MYS,
+.flag.my,
+.flag.mys {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAPFBMVEXZPz9mADPPNjl+ZDPMAAD///8UEF3mf3/zwMAAAGZQQEb/zAA1K1DYrA/wwAaQcyyggCZgTT+wjR+vjCAG8B+KAAAAg0lEQVQoz63ROxLDIBAEUey1Rm7+SPe/qwMFdrCFCfRSpugqCDhejnAdxX7G73B3XMNWByB0Dd+OAGA1gxRtSNN07QCxlBKnN+ZkgFpKqWk2VGpAtpqq5Wn6LADRus3TqHSAnPXveXQUG1p5cKSfn9kc4eFw009H8GyLwv3uT++LltMf2s0Rk/ZL0FMAAAAASUVORK5CYII=");
+}
+
+.flag.MV,
+.flag.MDV,
+.flag.mv,
+.flag.mdv {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAMFBMVEXSDzMAfjrSEDSeKzWNMzUAfTkyl2D////AGDOQx6lvto+428cEgDwPhUVQpnfv9/JzkBP1AAAAAXRSTlP+GuMHfQAAAExJREFUKM9jYFLCAAoM9BRsNkYCFlBBR0EkIEJYUG5X4lEMwfmJoRgqj1UBCVE0QclaLGaeLiRWJVYzz8xPJNadgoKhBL2JNZQGLuIAYR5H52EZ6mEAAAAASUVORK5CYII=");
+}
+
+.flag.ML,
+.flag.MLI,
+.flag.ml,
+.flag.mli {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAElBMVEXOECYUtTr80RbtjxquxyGuyCKjAxX9AAAAHklEQVQoz2MQBANRJTAwYIAAiKDIqOCoIEwQNYUAAPaxJ3WCs2XbAAAAAElFTkSuQmCC");
+}
+
+.flag.MT,
+.flag.MLT,
+.flag.mt,
+.flag.mlt {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAM1BMVEXPEyr23+K/tLTjpK2xrKvTmJ67oaH////PFCvLy8vGmp3gs7bgtLjmtrurmJTBj5PLiY/HwyfHAAAAAXRSTlP+GuMHfQAAAFFJREFUOMvt0DsOgDAMA9AkzQdDP9z/tLCD1AwsSPVovSExxUu2Z4juvsmZgwf2DGy1Q63yFAq0C2BTOFxV3UviRoPzl89EsJUcTA++4IK/gxfabR7af4FUXAAAAABJRU5ErkJggg==");
+}
+
+.flag.MH,
+.flag.MHL,
+.flag.mh,
+.flag.mhl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAVCAMAAAADxFwsAAAAzFBMVEX////bdAEwRXMgUaAwXadQd7U/aq4AOJPddQAPQ5mQqNDx8/kSPYeaYyywwd6/zuSFXDpfg7sDO5Xg5/L3+fuAnMlykcPeewzFpYXV0tN0WEXp7PLXcwP8/f4aP4IlQnuQXzOlZSTd3OCkuNhIcLKasNRqi8DToGrTehh7WkHdhSLKspvVcgXUllTc4+/j5OnCt7C9k2rLxsfWiDEfQH7w8fO4yOE5ZavHjVHPwbXCfze+qpmKpM2ytcGWh4ByiLAaTJ4jU6LH0+fS3OzDb4x6AAABE0lEQVQoz43T2VbCMBAG4ECTtFlsbaEFWyuKCriALO4bLu//TnaSJqeA1eYqF99J5p9JkNtotU9QM+Z5DWB7z/MsZNT5k5XQwYQTyupZbzzUkPgi4Jjtshawy6s7hAA6NCg2HY432UCz6QFSC+rjHdj5YVUOjoH1+jcIGegyAieKGG+z1VO3VPcjVSMcKYLQBr9VbFze2fXDonoFGY79hFDD9lsQIFNKnBKdUfeROYnJfARsusxBZednkbnFTMayQxNg9voQVcJtjBDYai4K9R1v9aoKZcEWEOAr+dydkYXy4nrykqE8GH38OnNk2eMy141w66FMJ/2hbUQtlOnzfFZpRA2U6eKN0+jf54ve17jRr/kBh1Mh+Hah75sAAAAASUVORK5CYII=");
+}
+
+.flag.MQ,
+.flag.MTQ,
+.flag.mq,
+.flag.mtq {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAPFBMVEUgQo26xNxmfbGLnMTI0ONYcaouTZWQocf///8hQo48WZzk6PHV2+p0ibhKZaOClb+suNXy9PjW3OqdrM5Jyi73AAAAAXRSTlP9g+pWxwAAAQNJREFUOMu1lMGOxSAIRasBpAhW7f//6yzaTlVeMm8zLG9O4ILgtu1rMDM7cdtuMAKc5MAUINEIloKIIS3gpR5zxt0UxJc2BVrAfMoHj3zI4nHHCi05EENvtoApaXBgTGeuI0iau2tmp9xhaobiyT2lM8cRlFgvFd+MhMAA2nDKSPFSZfIoiEjOY0HEu3Rywczs1Y2/jH8Av/Z4d02IH96ankk845ESAlzjHkCRV33nSKbmt4dMV7AH/LBmvZZ1zaqGJA4EDQfN4C6m4I9LLMN8XMo5xBU8MudQRhC5wXOHL2icAa47fPaxska0dowgWWCIaC2OpUsFgGMtjb/q0MwfP8UPxHsifYgZVt0AAAAASUVORK5CYII=");
+}
+
+.flag.MR,
+.flag.MRT,
+.flag.mr,
+.flag.mrt {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAM1BMVEXNKT1AeiZghx/WtAf/xAB7kRowdCnNKj4AYjMCYTIQaC/vvQOQmRagnxMgbiy/qwxQgSMBUdT8AAAAAXRSTlP9g+pWxwAAAJpJREFUOMvVk9sOwyAIhkV+WD2tff+nnelhqWm13C3jxohfgB/QuZfJnPshGCaThTswRiPovQWMIswi8TmiMsDvYUTaMwO+cVzA/bksS2kcF1B0PWrarUKVHljaukoPVGij6nxtVXM6qdXE3fYQ0lcoJVC/jxmYfVUS/QzkUcMreVgeT4Z4w5ieRyjV1LQ9UzCumXlx78E/+K4fGncfbmVDdvMAAAAASUVORK5CYII=");
+}
+
+.flag.MU,
+.flag.MUS,
+.flag.mu,
+.flag.mus {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAHlBMVEUApVH/1QAaIG3qKDm2JkWMejZAsj0bIWz91ADoJzlaCl/hAAAALElEQVQoz2OYbIwBLBnoJuiCBTAUKWEAdfoJhmIBDI2CGECCfoJpWADDgAIAZ5dK6eNZmaUAAAAASUVORK5CYII=");
+}
+
+.flag.YT,
+.flag.MYT,
+.flag.yt,
+.flag.myt {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAA51BMVEX////FxcUWFpafn5/Z2dm+vr7u7u7////S0tLf39/JKQ6zs7P319KkpKT0ysOHh4eMjIzRLA8TE5DfYUzniXnKRA398vDJyckVFYr1y8T65OHqlojvsKXHx9uZmZndoZfke2q6urrV1dWVlZXVMRXDw8N8fLKpqamBgYGKir0yMo6pqc+3t7fUiHq3XQfcVD1oaGisrKx9fX2Tk5O2ts/8/PzVkofyvbTso5ZbW1vt7fXj4+PQb1/r6+vgrqffwr3hbluVlbpycnJGRohMTJMUFInSe22+hhe+kRi/libgurOXl8K9kyT0y0IQAAAAAXRSTlP+GuMHfQAAAbRJREFUOMul09dy2zAQBVAJ7S5Egp1UqN4gq1Ddcm/pxfn/78mD8xBJdCZl3zA4MwvM3q1U8EdVqfw9zFx4cDMXbpY3Grnr5W6el8F85I4Qty6bzZ731Fi5Xq8VN8ugF8fxZbzCKkuQNGKg6fW8Mui2kuQqa2UJvOQKCdBye83G/3wGEOrwUokyqPy6VpA303a7fX7efr4BFNV9dQKN1c4EcswiFkUsYmOAO9o6x9Ah0hsJOY/YjLEZi+aA3Ggi5wgOaaAl3coxY+P3H94yNsUtST2g4RH0SQ+kEHIesVm/PWPRHELIgSb/EAobkLbFvXz++OalprgvrLaBFYeQ7NZo4vJb7Wd1wUl3tpYOoeK68APSw4ewloZhWgu7QlPgF5qrwzcqwwvjE78Il1/T9PsyvLAUmII7qmyEHW4fassvafp5GXYtN6Uj7BsLTOzF6KX1aOH4gDX9E9iBAALxuOjeLRZ33U+PYggIdE5gAEBNtFbYa73HXomJArA9gVQHds6v4XF2QJ1OY1asr6uaG9+8OwvWTtDhunq9LsqDS2TM2a5frW443xjSr68rvXr4t1X4LfwBrZs3C5ZPvrUAAAAASUVORK5CYII=");
+}
+
+.flag.MX,
+.flag.MEX,
+.flag.mx,
+.flag.mex {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAXCAMAAABODP0nAAAAilBMVEXNECXm5deCXUG7pXHvrrWqzMHIyKX////OESYAaEfu7+TW1LVuQiZkRDKoeVT39fKwtYr169e1zsS6vZXR0redhm9ooKGljINbnp7e387n1cfcrq3T0a2x1NvI6OanbEJ1VEDauXjYup+KubrAkWd8vMe3mH66sKfrubKOoKTOtoSklWRKkI9sWEt0Xo6XAAAAAXRSTlP89O1mUQAAAHdJREFUKM9j4EQGrOxIgIUDCTAwjCqEKBRUkmeSIkKhjKIKHy8PP0GFgozMQHU8ooRN5NZiYlJjUuAioFBYQwRooq66uDABhSJCEprK2qLijGwEFHJxc6lK6IiJcTMScqMkmxwzsywbG2HP8AsISQswjiYz0hQCAOOXHtBwW44mAAAAAElFTkSuQmCC");
+}
+
+.flag.FM,
+.flag.FSM,
+.flag.fm,
+.flag.fsm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAVBAMAAADGNLEtAAAAG1BMVEV1st3n8vqIvOJ9tt/9/v6y1Ou+2+/T5/Sy1Oyb02ibAAAAP0lEQVQY02NgIB0wKWARDBTFImjijEXQtJmBbMAEoVAdwJgMItUEUARLwFxGd8IqsZpJErAIJtbvWEOJiRyrAdYMBYZuZK7lAAAAAElFTkSuQmCC");
+}
+
+.flag.MD,
+.flag.MDA,
+.flag.md,
+.flag.mda {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAkFBMVEUARq7hugF2WC2FXz+qozrPqQJwVSXMCS//0gDujw9pTx58XC3wxQChhg0/MBi/nAWzORRrUhh5XR6DZR+HZiiZdAxgYjlaQiGVGRZQPiatYyrSmgF4SQ6sYwrGpADEkQGFgEqvjgoXQY2Ka0Q2TmR1TCnMNBzDfwdycUJlYSqkKRZtaE6hUAxdVxg9S0+YakKn2tOlAAAAhElEQVQoz83SNxLDMAwEQAYDosWoHJwt5/j/37ll4Rmw1NVb4ObAWJyFirLM4rBZQd9ACvSWn2tVAQnzzmN1cAUJcQwhXEROQa7HV98/pDAEtO47QIMStwQ0w/Nzb48SyRu796097XVJQuGuU71Zk2WU2ZVS2BUkLAO64Glb8/m/2X/4A1rfExgCJ78JAAAAAElFTkSuQmCC");
+}
+
+.flag.MC,
+.flag.MCO,
+.flag.mc,
+.flag.mco {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAgAQMAAABaY6hDAAAABlBMVEXOESb///9W4q7JAAAAEElEQVQI12NgoDH4DwK0IwHykk+xonqt7gAAAABJRU5ErkJggg==");
+}
+
+.flag.MN,
+.flag.MNG,
+.flag.mn,
+.flag.mng {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAALVBMVEUAZrPaIDJJTYf/2QDjTyX2qwzwjBTfNyvmXiHqcRztfRj9zgNIT4j4twn0oA8yAhU1AAAAWklEQVQY02MQBAMhBjA4COExoAgqIgQdsQiKR2BTmY5FUGIbFsEyayyCUlmOmIIiGZgqhSNuOTtiCIaGTsYUDJ+ORWV0GhaVccnYtM8g1iJsTsIRngQEodEBABWyIo6noem1AAAAAElFTkSuQmCC");
+}
+
+.flag.ME,
+.flag.MNE,
+.flag.me,
+.flag.mne {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAUVBMVEXEAwjNnTPENBXDCQnKkzDBJBLEQhnTrjvHfSrIii7EFAvEOhfCSBvFVB52c1LDijDHYSLHdymHek7GaCTQoTWXhzaphj+Xf0OpZTG6gjOegEZoMhC2AAAAj0lEQVQoz63SSRIDMQgDQLDBI7zNPln+/9DcU4ntqkTnvghE02BooqH8CP0YjPse+9ARKaBErg09QlhzQEjwTahminWFmmkTJmFkswwW14TBGLetVrCFNhTm7bqezNIps9i81XqbrdOaAhU5Tyl678CcUI6j4DF3oIIWkYWc770wUpK303wdRYx/n9lnOJgXvZ8Hd+ApatsAAAAASUVORK5CYII=");
+}
+
+.flag.MS,
+.flag.MSR,
+.flag.ms,
+.flag.msr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAtFBMVEUBIWnyxs1nbppgdKEAor0AIGfYVmvIEC7AyNoAnrkuZ5M+VYqmPwb8+vu/x9kbN3b22N3g5O3Ueo7TeY3f4+yYRBP88fMsh47Z3OcAmrNldYmAh4ZtgpF9aD1Jg3wJkIsPehwFfzouSIE2XY8AdYkAUV6acFKITyhSaB9AV1e4YwAAiaARWWeqRxRwkI9eV1RwqJM/pIQtSTQgY2xwqXsReisAjWNVIwAwkFZVflocm6FHYRSUXZUeAAAA0klEQVQoz9XQxxKDIBQF0GdFElRMYje9997//78CgzFZGFnnLmAenJk7AKbS0oDFQsjiu9owFSiL2hRUQM48DaCCcljJLMdxIkoDGyGbrREbnVKISiJujDwyWIsxHi0xjut5NUtkB5RXB5RGfBYQ6+P5dqXj+rtcaylmU+WP0TzFbKj5MYP6ZtctoGDv7/miHB5v+wIK9vlwTgvYOXW/qn+EwUe7f5HDYdi5H879MHQl0J0Scu09SduQQEgJWfRmfiJz4Kb+2p9kUgcGDLLEhT/KC0hSDxL08Yr9AAAAAElFTkSuQmCC");
+}
+
+.flag.MA,
+.flag.MAR,
+.flag.ma,
+.flag.mar {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAG1BMVEXBJy22KS06TjCHOC6fMS1/Oi5ESzBmQi8rUzDm0+j4AAAAM0lEQVQoz2NgGL6AvQBTTFAsURBD0EOjqQVDkFnZyABTf5IaphiLepEDhiCjAbPA8A1aAE6IBLhFmViXAAAAAElFTkSuQmCC");
+}
+
+.flag.MZ,
+.flag.MOZ,
+.flag.mz,
+.flag.moz {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAwFBMVEUAAABISEj+8o/LEDMAAACPwLxLS0v84QAAcWjSEDTVHTDaNSrBEDE3AgxzOEUeAQfRDzPiWyB3CB0HAgDndxrxqQ30uAm5DCxdSEeOCCHqmBCWmJkZZGH3xwY0WFsJbGWIMUX71wLQLESlDCnoixKhCSbUXBnlbB3d2K1sbGyLZQPhqhyBgYHOzcHdRCetITyeKEH98Y/2yX6rCii9c2thBReGbFz10AOvqYJoEBE6NAWnbwmxnQDOwVh0axXq1Sux+eZ8AAAAAXRSTlP+GuMHfQAAANxJREFUOMuN0cd2wjAQQFElIognFwy4m5LQa3qv//9XWTiHrITnre9RmVGXk44oxc1QCNFjISQKhRBuh0KIPxZCdC6E0DCnGnoA0+riRDWMPdC+Ds/cKWDxlK6yIgP6g5YjpaBovX1ugwcAZl0ntOVgu3v/3iVJDOAHzhPtx9em2h9+VvXno67zap1v2tX+8W/yzhOjLHh+PazXuW54I4t++bKcm2XR+GubetArQYdtdwqsrZczvT93d/e/696VOdURzo2RQJsaEbweGRGMjZFAmxgR9EZGBBumcuwXkKYmCRjY5UEAAAAASUVORK5CYII=");
+}
+
+.flag.MM,
+.flag.MMR,
+.flag.mm,
+.flag.mmr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAS1BMVEX+ywDM7Mv7+fJAtj/qKDnpKDg0sjI0sjP+ywD////zfonsQ1H719r+21Dm9uZawFn2naTuUF74tLn/7KDk9eOz4rON1IzA57/X8Nerw/7WAAAAAXRSTlP+GuMHfQAAAJxJREFUOMvV0EkOwyAMBVCwIa0ZQpr5/ictHRIVShx2Vf8CIevJ2AhxrYoQfwq9r4TDUAkB6qAn8gXYXPJMRNNXsSlAIAIW4iIfWSlmfV4XLHdESUkkHj49f7qZmzG0G2sDvwyOLzfi2dbvlu3Z94Tt6ZBDrZJ00fR9PExa1zl0BJEYIMdDS84qrbR1ZFloun0Gw8Jb8Vqa8Si/hHf9fxwRdAZrkgAAAABJRU5ErkJggg==");
+}
+
+.flag.NA,
+.flag.NAM,
+.flag.na,
+.flag.nam {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAzFBMVEUAlUP+zQEImUn+9fcQPnihlC/UGjwANYDSEDT9/PzSEjb2ztXogpXfUWwIO4XWJEUgSHDaOVb74+fuobASQ4nzvsjXLk3W3+vU7d+GzaY1q2pPdKjo9u4SnVH86+6omSvYthOUjTWf17jm6/NJtHmUqsrf8uc0X5vrk6P42uBAaKDbQ1/wsLzjaoGrvNXhXnZQZVjldYqfs8/6/PyJocTf5u9AsHKU0rDq7vX88PKr3MFebVF3e0TApx84VmSYjzPCqR5+mb9UuIFgb1Ar3ucZAAABMUlEQVQ4y4XS6XKCMBSG4cMSQVGJG9hFFm1VEBRrbWtd297/PTUiJhEjfr/feSaTOaAVrj11Zno6KOyeviJTvx+2p6uMoyFWdzsVX3EdU8+Fmrffe3lOiVlmRmmYIP9w8NEfzw06FutqTjcNVd+TJM9XGfemzFlWai0e5GOIEZLIEMKUM3iu2X0EOInuVpK2rkq5aoXjyoTLwmTtIuSuk7QLB0bjistCTUWbDUrB+mtZxNFQw1g7huGS5yaUO4fZctyYcZdhuAx4Lhgyjg8JNy7RrFItf8ogCkd2MGFZwxh+AAjC+nsxdw5HdrPGXifgTiHhWjyn9GUQhZecZTy/gGj1nwXH6XOl3xN2YDs1nX6y1bnBkUXcucc3OTLu3As4PoxX3z24HxLuF+B+OHOKOYB/YtwoD3EyzHYAAAAASUVORK5CYII=");
+}
+
+.flag.NR,
+.flag.NRU,
+.flag.nr,
+.flag.nru {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAJFBMVEUAK3/VrC5Qbaf///8qTpTw8vcQOIegsM9geq/f5O9AYJ9wiLd024YBAAAAMklEQVQY02NgGMpAEAvALggCS7wwTWDZOdsBUzDYFFMwI9i0DUOQqdhcAdNQJSWq+hIAYa8IgTmDXnwAAAAASUVORK5CYII=");
+}
+
+.flag.NP,
+.flag.NPL,
+.flag.np,
+.flag.npl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAxCAMAAACf+RsMAAAAgVBMVEXcFDwbM4cQRJnv8vhuJme/zeSlHVEAOJP///96I2LP2evKFkPlT23eIkgwXafCF0XgMVTnXXkpMIL3xc/98fOKpM7yp7b74ufuip5JcbJELHgMNY7pbIX509viQGAgUaDwmKrf5vHRFT+0Gkvre5H0tsJcKG9ri8CVH1evwN2EIV7bYgCjAAABm0lEQVQ4y43U6ZaCIBQA4GtWWEKBuOWWrTPN+z/gIIriQnL/3XO+A95F4HLzrALQJrKEATodreDhEaDItYEAh/y6s4JwztDFtYEAv/lKUQrC/Y2+dqqHAHsHRVYQ7ltkLkqHAKJTP64NBPjLNx8rKDt1s4GiU85SpwZISF/UG512JohZzDH9UlQDMQCLm4QJWXSdyq+fGawrYDIJCaRYFRWMi5Inhpi3WVoko05Fk2/kYdJmice08v1M22kJSanSeNwpMX5VVFs1idtvZNOeik5141ftoUWazljXKbnT+mTO+8XI5I+qQz9AprgcR7MWMtoZYrwUfrA5Wi3uFznAdiN8xyA7KCYcYyCVWXYwjqn3qkpsPrODqReKwXiV+fYGUs67pXjx2iTliaxPE2I6U0Lab09NTLULSF5aHj4NsjmRFIlKudqgmWyvDns4zGgiJSyHPB2Wbizl1VT0UQYFrD0uztWdNbxOmFc+PTx+hpyTO4VPAryACoNRDtuDyfyH0eTCa7YsV+Ag12AvV6GSgLLtSogXyG2gTQj5DxajNPKFOVDvAAAAAElFTkSuQmCC");
+  background-size: contain;
+}
+
+.flag.NL,
+.flag.NLD,
+.flag.nl,
+.flag.nld {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAACVBMVEUhRov///+uHCiDi+U+AAAAFUlEQVQY02NYBQcMtGKGwgHNmLQHACMlWadYLf7+AAAAAElFTkSuQmCC");
+}
+
+.flag.NZ,
+.flag.NZL,
+.flag.nz,
+.flag.nzl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAS1BMVEUBIWnUeY7g5O0QLnJobZryxs1gdKHIEC7AyNrYVmsfO3rNd4rMTGQyS4X8+vu/x9n22N1SW42dfJr88fPZ3OdBQHjTXnDMiJvNLkbyVu06AAAAmklEQVQoz92QyQ7DIAxESQgxOwRI2///0uKypFGjiksvnQPY+EmDhwg2rySLA3C8l0kwciUcIFrA1n1BEfzAKD1q7pxL3kcLYPOZcuvaTColOwgX6kN1J2PgyTor2ejROnqfsD+tsHX3dWZiWnCZUtXnUP95U/QNa/EcaHhshTT1boMWOKKv0IIh/yVJx7hd632M1HrQ2vwyyycwywbEVirFRwAAAABJRU5ErkJggg==");
+}
+
+.flag.NI,
+.flag.NIC,
+.flag.ni,
+.flag.nic {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAM1BMVEUAZ8bV48iesrmsuJv17tL2+/zG3br////49OD8+e/u4q/Jzq+92Cqy1TG11DLA2inx6L8SIXR/AAAATUlEQVQYGe3BOwKDMBBDQQG2nzaQz/1Pm17bUjKjxz1oTJlGJDNnmSTCKI6DToQf574vTBBpfq7ve5JEGttam0kivQo8SKLxKNPocYs/5eoIyVduk4wAAAAASUVORK5CYII=");
+}
+
+.flag.NE,
+.flag.NER,
+.flag.ne,
+.flag.ner {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAiBAMAAADfS4Y4AAAAIVBMVEUNsCv////gUgb1xayv5bnofEP87uXvo3riXBXhXBT308Cdj1xZAAAAUUlEQVQoz2NQwgIYhp+gMRbAIAgFYqXhiTA2XNBCSakLXVCsSUlJIxFNUBxkQSGaoChIMJAYQazaxSYpKWmiWyRoqaQ0C8OdKI53wQIYRgYAAF6WO9NsHTxyAAAAAElFTkSuQmCC");
+}
+
+.flag.NG,
+.flag.NGA,
+.flag.ng,
+.flag.nga {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUAgMAAACCKJcoAAAACVBMVEUAh1H///+q18VeAlDgAAAAFUlEQVQI12NgYGBQDQ2NYICAYcUEAOKRFw2YFuXeAAAAAElFTkSuQmCC");
+}
+
+.flag.KP,
+.flag.PRK,
+.flag.kp,
+.flag.prk {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAANlBMVEXtHCf+6OrzZGv6uLzxVV3tGiXvLDYCT6Kzssz////1dn381df4pan5srb7x8n1f4XwRk/3mZ5jG2kVAAAAYklEQVQYGaXBixHDIAwFwQME8uNjO/03mxKkSXbxJDwJT+JK4hfDppFQi6rWS8SkhlQGgXPu2ve9J4FS6b2zGwHpQ6eoEViaDJYeAqbRNGsZRGxJOi+xYY/xvysJT8KT8KQv1DYLH0ST+zUAAAAASUVORK5CYII=");
+}
+
+.flag.NO,
+.flag.NOR,
+.flag.no,
+.flag.nor {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAdBAMAAAAqZzNAAAAAJ1BMVEXvKiyvu8/xRkfvKy0AKGj///+6xNahr8fzVFXwPT8BKGj//v54jK6Zgt+rAAAAAXRSTlP+GuMHfQAAAE5JREFUKM9jYDYGgqkpLqXNxjBgwDCkBZVAoBUo2KQEBwxbQ0EAKBgKB9EMgmBwxOWgIAIwLHEBAi8wCQNeDChcvIJYzcRqO1Z3DrvoAADRhJHdGoS+qgAAAABJRU5ErkJggg==");
+}
+
+.flag.OM,
+.flag.OMN,
+.flag.om,
+.flag.omn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAKlBMVEX////bFhsAgADzsbNKXAnmW17naW3hPEDypaf76+v1urvpen7um53tlZfX+7IwAAAAP0lEQVQY02MQBAEGNCAotjsRU1D4zkJMwa6ZHZiCWZPLMQVF0wMxBU0FgwWNUQGDIBZAZ0EXVAARVEIFdBMEABIJJaFkAQecAAAAAElFTkSuQmCC");
+}
+
+.flag.PK,
+.flag.PAK,
+.flag.pk,
+.flag.pak {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAANlBMVEX///+ctabQ3NViiXLg6OMfVzdQfGMAQRwxZUcQTCoPTClwlH/w9PGwxLjA0Mdvk36AoI5Pe2Ll19D6AAAAjUlEQVQ4y92TzRLDIAiEV0V+qibp+79sDtHkkJZ4bTkx8LkzCwicIW7gd8FsU6AFm1Jk0v7ABxVrzyInD4zIR5IAdcAC6oYK1eCAActoNrvc38E4FEWya+bL6D8p4j0FBoBeM2ABcJkV9eYItK5pyd0MAFpVRBOpu+s6SpUfrmc5Ks2e75G3jfOffK577LpLFTQFgZZfAAAAAElFTkSuQmCC");
+}
+
+.flag.PW,
+.flag.PLW,
+.flag.pw,
+.flag.plw {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZBAMAAACx9nFWAAAAG1BMVEUAmf///wCg2V+w309Qua8Qn+/Q7C/w+Q/P7DAG5Io+AAAAVklEQVQoz2NgoDNwamxyQBcLFhQUFA5AFWMtBAoKlqIKMoPEBIVRBR3BgoKopipCBBVQBBMhgg0oghAxQQFsKhMIm4nVdqzuxOojrH4HhlJikgMD3QEAcycN4otQy3cAAAAASUVORK5CYII=");
+}
+
+.flag.PS,
+.flag.PSE,
+.flag.ps,
+.flag.pse {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAARVBMVEUAej2lJS6BCheBNy1Vpn5UVFTBEyQAAAD////OESanDR4nZjgnAwdOUjROBg7XPE720tbgaXb88PHRHzLtpa2gSEZbT1DC0kGAAAAAX0lEQVQoz63QRw6AMBAEwcUmDTn//6kITLiZPtDnkka75gqWqWogVN5BKDkKyXyAYP6CUrJl0R6ofihjvVDzAqE0Tv9COk2PWdN498Nb+yp8uzYEvRmBYPaEZPbIM2Y7L4kRqytOrv8AAAAASUVORK5CYII=");
+}
+
+.flag.PA,
+.flag.PAN,
+.flag.pa,
+.flag.pan {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAOVBMVEX///+jrcD28fLsf4SEkqztiY3CydYGI1faEhr////nYGXqdXnaEBffMTjDytdMYIUtRXAVL2D2xsfKG8juAAAAAXRSTlP9g+pWxwAAAGlJREFUOMvF0FkKgDAMRdG0iU3naf+LdQEGfAjq/T70lRCla9GIXoTeg1AEgi7MGRwA+1JdAZl2qg764xAZEOwp9b8OfgfF6DAiNTJG6Gu4NwhzhiC3WBsjL5ZaGZouLRYIsvf5rzs+gSfVcCE9ZTrZmgAAAABJRU5ErkJggg==");
+}
+
+.flag.PG,
+.flag.PNG,
+.flag.pg,
+.flag.png {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAeCAMAAABpA6zvAAAAZlBMVEXOESYkAgbGECQTExOpDh8HAAFNBg4AAAD80RaAChfRHCQwMDDiYR7lcR5wcHDXNSLofRw/Pz/5whbUKCPcTSDtkBpQUFCsrKzxoRn19fWQkJDg4ODzrRhgYGDQ0NDnfBx/f3/ZQSGki0rXAAAA+0lEQVQ4y42S1xLCIBBFUVRWQklIb5b//0kxGkJLhuWNOXPP3AV0O6O0IadLIkiu90SQkB29fPtgXC9VHoBRfQ0RMNSXqIOaVyHo6ilTTAHAJEPQ1tPnk8MyXQhivOknMMN9MHu9slXPAJQCL9KA45it+pJWJVviWM4C9dA67elXLxHLwzJ+e8mh1tvcBa32Usd1lQ0WKyTc5VNaV/kG4uLxI/HQt9jW61KIW4lD/0sizSg8fcmpBYqm+e9IH+ft6Rvtl4m9vQtm8057HywKL9T5euRobP0mxuRo+QZs2naOhRq9+Y6PHh/qzYUQcXDVk4RZ9Cngok8Ctf4D1OgYXQgrIwMAAAAASUVORK5CYII=");
+}
+
+.flag.PY,
+.flag.PRY,
+.flag.py,
+.flag.pry {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAWCAMAAACFUC6CAAAAM1BMVEUAOKj6+vrk8dC0u7b1ycbo6OjP0dD////VKx6/zene3t7J5c67yOTwxcK31MKdxKuKvZtVfUrjAAAAUElEQVQoz+2PwRKAIAgFEYIU1Pr/r807THKvPe7szAOoSeCb4eEZI5BwOliEvfUhk5DyPixyId5S9iFNw5kI14lmnJhepWr0TPP0Hkj4eeMBpwIRWct/suEAAAAASUVORK5CYII=");
+}
+
+.flag.PE,
+.flag.PER,
+.flag.pe,
+.flag.per {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAACVBMVEXZDyP////yr7XIwwUlAAAAFklEQVQY02NgYGBQDQ2NYICAUSYuJgAGeB8eIlqm5wAAAABJRU5ErkJggg==");
+}
+
+.flag.PH,
+.flag.PHL,
+.flag.ph,
+.flag.phl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAb1BMVEUAOKj95Xv/99P+9MT80Rb/+eH+7qfOESb//////PD920j94GH81Sv+65jv8voQRK388fLRHzPF0uz+8bXniJPaTFx/m9NfgsjgandAar6Xrtz+6Ivsn6fzxMkgUbPULkH209f54uTwtbvf5vSvwOSsgxV0AAAAnUlEQVQoz43QxxLCMAxFUTsuekrvCaRS/v8bWYQVw9i66zOyJdXuShb4Xomgy105iSYaBtqbAF69dxlklGMlgIkG8JpiUHuXcZZEvgrA6dymHQAgcCrA+9Rau3gGTFGOAVik1tqlY8AUdU//+3l6bSgAtU+uZbaBKAS/53nMRDEIoO4bksDnQRSBhoFzoFjK5a6eKZ4Crw1J4HaQqA+p8xC4Vz8IHQAAAABJRU5ErkJggg==");
+}
+
+.flag.PN,
+.flag.PCN,
+.flag.pn,
+.flag.pcn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAABC1BMVEUBIWlnbpoRPkkFKV7yxs1gdKHUeY7IEC7AyNrYVmsQK2QCbsY8TlEKMlVcZkP8+vu/x9ng5O0sZCunoiy3rShRZD8fUDhdiBzf4+wBI2P88fMLLVx/hDT21doxcCMiWTAmXS9DajANW3mDkSd9nkORq1oDJWQeN1ycnCoSOVJDXT0tQlczQWxmbZpBdCXIuyQ1YlZkeDansRVfY3F+emk/iZHY3ej13uPZ2+ZIV00WRkEpIFxNLkVAS3BrckNIUWt6fj1Kfx41Xy/YxyAyU0FseVtScTZEVVWRpRkySk9Jfh1xkzJ4lxhrgD1pbFaMfnUeaH2utBVlWlNJaFSkuoSKf3oge6bt8OxBiYdXl17vAAABKklEQVQoz7WS13LCMBBFFxtjcMcVN0xzqKG3VNJ77///JZHsEM9kGPkp90HS3T2aXe0ICtkSA0h5ls3jPZMrZGGTcAKjMYhdkQEgoBj8i9HiVmLyiqIsF74js6yM1jmyyjonmvt7vyC7QTguGAC91eQAgHJJIKerLvTOpxwIXpmOSiPNZcfHpR1/scQehW06CILL+4szXdPon06ZUraQy+DHMEV02o7bU8uUO32pV7tHA41LsPV4ErR9MqpLjw91U9Sk6GqMJQPHaJS41hvD98lr32wCUd7A4Pnwg69RaocIVswKP3sL+aeR1CKCYpXiG5/hrNZpSURQODW+rLHVqKkVm9zkoXBbfr45Hu7SkCKJuruy+pyRxoEnVMdWW99JBbvoP9jQ5OCf9A3qch0S+mTgLwAAAABJRU5ErkJggg==");
+}
+
+.flag.PL,
+.flag.POL,
+.flag.pl,
+.flag.pol {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZAgMAAAA+toT2AAAACVBMVEXcFDz////tip5hJkzaAAAAFElEQVQY02MIhQOGAWOuggOGQQAAG50ufcR4g+sAAAAASUVORK5CYII=");
+}
+
+.flag.PT,
+.flag.PRT,
+.flag.pt,
+.flag.prt {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAA6lBMVEX/AADuTQiivADpbCUrdgDangABYAD/AAAAZgABZQD7PT3tKQCzwQD4AAD8AADonwDjlADmrwD+/v72LADQ2ex1oADV1QDp6AB4pQDjdwD5OzrkjQD1dwCKodDsAADi1ADmJQBonwC6ywCCpACNqwDiMgDuPgK7xQCbtgD4SUf5fHzuWi36bW3qklLseCX2ybmfstgsVqrnZwDOsQDWwQBBhQDyCgDYYiHd4ADcfwDtxADPgQDfzznnrELTjQDUMADofR/0c1Lfjj3fPwDLtkMZbQCEmiqatD35QgDgWkff5fLnfSDu8fhnhMLtoPh4AAAAAXRSTlP+GuMHfQAAANFJREFUOMvl08cOglAQBVDgFZ+PoiKCoIi99957L///O65NdHCtd30ymczNCEH2msD7CMIPQ4oL6hcQS0puFglF/WBcwRSvUmmShGGshGStsNPkUb8LQWpZSKw2GlUREVMFYKZkcq632zp3hrYIwHxZQTXdMPQaCocTAFQkfGt2Hm6nuU6THgBzUtzhd8O4cmcCTszE2CXact3WeTMNQTvScfloF+t10Z57Vgq8oyntK5pWWRCP+DSTxYfTVpYjSf+us/nlF10zxuigqP7fz3yGT1SnLAsv0Hz9AAAAAElFTkSuQmCC");
+}
+
+.flag.PR,
+.flag.PRI,
+.flag.pr,
+.flag.pri {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAb1BMVEX////3gIDWCBgRXPH////7wMD2f3/3gIAAUPDuAAAiZ/IwcfPQ3/0KT+lbMZQRSd5rmfdKg/WAqPiauvpFOKre6P7z9/80Pry6ETSUHlpxKn7hBA3zfoK3zfuIabJ5o/fMq8mDJGw2aOaow/o2Z+XRXciaAAAACHRSTlP9/////////sajZT8AAACqSURBVDjLrZTZFoIgFEVJrE6AqeTUaNP/f2OUYTwIXNfqPO917nxZlWxIYsgORxoI5HsiCLQdEQS2CRFEdjmtQhpBQJxTv5gDAmVNBIG+iYGljf+IgEpa0/t1OaUvKFL9iz/Zqjco1WBfWDK/efrIdwarpVNU5Wk4d/0CjigarVQ8R0BLE14M2DNUNR/dPun+ZTJzZk3cHrOPi4DWMzeceDPEK6TeNfVTvACicyGeiMPPMAAAAABJRU5ErkJggg==");
+}
+
+.flag.QA,
+.flag.QAT,
+.flag.qa,
+.flag.qat {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAQBAMAAACW+SCeAAAAMFBMVEWMGj2NGz3////x4+e/f5KUKUn48fPKlKS4b4WwYnm8eY2pU2ybN1XcuMPq1dvp1NoxFdFrAAAAAXRSTlP7aonz8gAAAD9JREFUGNNjUAIBtRuBggggwAAR9BHEFFQywaZyIjaV6lgElVuxqXyCTWU1sYJKX7CpnEqsk7A73oTYAEELOgCpoyOl1kutCQAAAABJRU5ErkJggg==");
+}
+
+.flag.RE,
+.flag.REU,
+.flag.re,
+.flag.reu {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAflBMVEUyZv+CoZ3q7xpYgtD/AAD//wCZs3+Ur4Z2RKszZv+5y1dOet3yBg83aPqctXthicXM2T9mjL/8/QTPFzx2matskbn1+AxQV9uLqZE+b/FDcuulu3H6AgdGdOfP2ztHW+XCHkuPOIzd5il+QaGGPZdDXerH1UXZEi6vrGSYNIG39pwpAAAACXRSTlP9/////////v4+p77OAAABMUlEQVQ4y42Q15aDIBRFkZZclGVsqLHG9P//waBGI7aZ/cACzvYIIKYsmMHYfMdSDCnGRGpuK2yuU8GYQoUeMTGC08lYEqy7CoSANMxPtsXEZw0BpEV9BMwe6bqYPhhuL9GLkGY+dseQ83HqYj/rKr4igF36fCly/2T3s1EECHFZmGJR4nBIJyJIjqP+1fqXjTCXsCbq/4usjTyv/SwTxSQyRe0Iuxdt4RnBXARpeUAIeJaEmXhIrDByiX0ets6ulO5vZRM3Cq3kgNiIakqRcc3r1Y6ZKBv1S5eN8p3nb7lsnJ0R4ifVPGOA/ctcctqRX3bFOKAjQbwtDnUrpVNxWrconYg3hy5wbguxCugqQWWKV4du4FwnYlXTHepqELfrvqXHTrzX9E/qO0JHh/4D5/gBM/8mwq7UuJMAAAAASUVORK5CYII=");
+}
+
+.flag.RO,
+.flag.ROU,
+.flag.ro,
+.flag.rou {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAElBMVEUAK3/OESb80RaomTjtjxrOESXfWuRDAAAAGklEQVQoz2NgAANmJTBwFAQBUYZRwVFBvIIAxOIn30Ew1B8AAAAASUVORK5CYII=");
+}
+
+.flag.RU,
+.flag.RUS,
+.flag.ru,
+.flag.rus {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAADFBMVEXVKh3///8AOabVKx55q0MDAAAAAXRSTlP+GuMHfQAAABpJREFUGNNjCIUDBloxV8EBzZj2/6HgD62YAHlVrHK7tinsAAAAAElFTkSuQmCC");
+}
+
+.flag.RW,
+.flag.RWA,
+.flag.rw,
+.flag.rwa {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAM1BMVEUfXzwPotA8qKQrprRXfS58uW8dpMIAod760gAgYD1prnistzbTvBF9uW+HslqQs1JWq4oAZWDQAAAAAXRSTlP+GuMHfQAAAFtJREFUOMvd0TkSgEAIRFEWbRRm8f6n9QjTiQbz41cFFBJk8jdUAMpAWLoRUC1HpesSwqq14VhCz2qtnuVoDZ+z0qir04zYMQJQfPWZflJ1ucj2ggeZyE0lW8EXy4wfIcoZkFMAAAAASUVORK5CYII=");
+}
+
+.flag.SH,
+.flag.SHN,
+.flag.sh,
+.flag.shn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAllBMVEUBIWkrPWOynWf8+vvyxs1nbppgdKHIEC7AyNrYVmu/x9kAIGfg5O3Ueo66pmkVN2dVbm7TeY3f4+z88fP21dpbj4/Z3OcXL2QfRX4CNHZbX2UzYXN2e2utu7k2hKWGhm5Oh46/rXz13uNxmrRdhqCqzMyVpqZ+objP3dodTFuYg1Srl25SdXZZcGwQhbmyjlF1k4CbmI4Wf3HSAAAAv0lEQVQoz93Q1w6DIBQG4AMqOBG3ddTRvdv3f7lK1I7EqL3tfwE58IUTDmiyS6CJSqkqdsXSZBiK4rS0hYKZBGCECjjKVF3Xw9r3JEqlZg2bUh+EdCA/QiNCSYIio2/dJJQ8X7T2/DoUdXuDMH4UDKPXm8SVNUcRnyGmrFlKf44YqyrM0Bfrx/NJbc4vGed2B1v2HrigHSzKYFleFzAV+4bvQbCchsYRn9NDakxCyE55vl3DjOz2mxXMShzDX+YJ/VkMBuOm1OEAAAAASUVORK5CYII=");
+}
+
+.flag.KN,
+.flag.KNA,
+.flag.kn,
+.flag.kna {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAA4VBMVEUAAAA3LQT2zRXlvRP70BX///8KCADOESYAnkn80Ra6mQ/UJiPQGCUTDwFCOAUQEBDIpxH7+/uLcwzVsRJZSgfvxhTcthMdGAIIoEfxoRnuzhgWo0T7yxbZOSL1sxj4wRbdTiCliQ6Xl5dFrTprWAl5ty8xqD/lbB04ODggICAsJAN2YQrt7e2lpaXcyhwjpUHFxiGcvSnqhxuAagu5wyPnexxXsDfRyB1+fn6WfA26urpYV1OMjIy4uLjk5OTx8fGRuyvlzBqGuC0fHx9NSC+pwCZ8fHzIyMjtkhpwcHCzs7NT4XdnAAABTElEQVQ4y4XSZ3eCMBiG4VdMTKM4UEBa7RBHnV12aK3avf7/D+oboBgiIx/4wn2uc5LzwEHKad3yRg6Ck9LdH5F6ATJD5OyQSwmRWxYgM2x98HxFzgrxYfeFd1ZVgOF/l7Pjwta14EbT4ZcbcHXShniujL+3lI58rsEPS3uhg5yJf6trSuladHPSPmdMDbsXvCg4WMxm9PHXhXENOaaGzjOxzPCmW7zORENOV8MBcs3dkzwJ7uSYeUcKnVdi9eS38zidqeHgIcIBNHecFDp9TYtyPYvc6UwNkau9i0cJuaLMhSFyE1iswf0MOjPKBeHlFa+NAUaGYfhiWeX8sK+RufcalBreCsw8v9GZGiLnzf3N3UzpZvoD5Q4/PWN7B6S5rwz8VOI4EcpznyVxIozMHbnvEosP5bkvSQIXDSu2P6iMEOeezEmhN/eUjv0BCoErISxfBDYAAAAASUVORK5CYII=");
+}
+
+.flag.LC,
+.flag.LCA,
+.flag.lc,
+.flag.lca {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAVFBMVEVmzP+46P8rJhLxyBiZ3f950v/T8f/80RYAAACLzsRfX1+/v7/Pz8+egw2r3eHr5riPj4/MqRGkkT7m7O8QDQGJ0eHd6e8QEBCfn58vLy9fTwiCs6AoQUrkAAAAfElEQVQYGb3BSQ7DIBAEwAYGZgJ43+3//zNWZHELoBxShb8gQh3nUMXGaFFDea9QY922FRVoF9kJZe4QORyKbJBbtChRXs5TvELJJJpZy4QC6mfDbOaekOf0wLdBO2TZ0PBHEyxy1MiPUSGn46RDRms4MS2+W65Xci34yRvvSQUaIFkI4gAAAABJRU5ErkJggg==");
+}
+
+.flag.PM,
+.flag.SPM,
+.flag.pm,
+.flag.spm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAACRlBMVEW2DhRebHGQn6QAkchbPimqGR5CUVbl9PrU5OnQh40Aksj/////zwDMAADftQAQl8vv7+/vwgBgut0AkcdQs9m/mwBArNYIZy8wpdIgns/mgIDf398AkMafgQAAjsMKhqtwweAYgJMscWmOcwAhdXlDd1jMAADQqAATYCyvr6+fn59Tc0BKWCMNiKxjiU1qZxY9gGvLpADJAAB3cxivjwFCmbvdbQAYfqZLbkJdgUhcUgornci5lQAmhIh2YgMVms3TiYSCJxGjFAjZQEAIlcrODAA1h34hmsgzhaQ9bVFzkkXXTQDUPQC/oQgje4CkmhwxfnXrnQA0mcDZXQB9jTWAyOTTMgBBn8VeZB9iXA+IfxbpiwDstwAXfI+VfANcdDc/ZD9UWBiDbwTZdgCyoRbopQDPz8+9mQAAhbbIOgHEJAXhfADMFAAtdW5mh09qhT8oi5DilQCjoymolRC/pSeWlyY5WjlLf1enhwAveXCYixRQRQPKMAI5dmbRJADQsA5ebStrg1RqklKWmziWhg73xwCJsJZRQB17bQyOIA5umIhUnq9kcy6Pj4+QrZR2kmmzDQbB2cuwkw9pnpjBk4hvb2+jxrEgWil/f3+PZlEtgKDlhAAakacAh7pHj6qyBxvVmwBxgzM5koc/jKtfuty9nwRXh1eLiyMXh5xmbiNCinI5LwFIThgHaz1Rj2kvZFMtUybn9frUJgBFg4x/yOOAlV+fn0TBPQoHaz45RyK/v7/dhQC9qBc1YEffvQwsVCY/TyVfX1/OrkRSAAAACnRSTlPp9e//9ev36On1SIBarwAAAyFJREFUOMt9kgVX3EAQx9NuW9rb+CUnXBJO38EJx3GHO8Xd3bVCX90VqAAtpYW6u7u7fLNOwsF79PV1kjebzP52Zva/SxhfnaGi8Voq/+In3f+MOGGMzQdwMta44q8p/VKQyjMaz+HLxthJYjFo08VsSkjrlfSSkpUqRcDo6NzjZ/GF07nRa7QAIPHdupj92x62gM/MDCyAeNFea4HSzMo2b5WiPAo9s8fYbS99Tvu/M0pZTp897WnWrtZel8+/13WkocW/tMe8SI/ex9nhVpvTl+7os59qkx0NS3edt7Brf5B2D9gCfQ5R3J3tlsUBvyTpigA0/lzQ8bkGxpMkdzCBBr+9FDz5wr9vZ5lPryMuYfwbY48H41Vai9tIcrxqOxBk2W1wmUoarKmBjKwFs+pjwas1Ce8Hw2k9KkcWVau0bcuD7oBelScOyDgMQ5Sqoq1lV6t3TAPtQXC7nZK0uUbTcRpAqD/NAijtVVJDba2bNfAz1KSfBByObFVzgmWxVpyF0ja7vnNL154QbIh00985Tp44so8WG9RTJ75g1mPBQ3GYXa67401wKkGy0nX46IQsxg909Xam7uEqr2k6nscY3jjochmUTu+Krya5nT0hZ1Z6aOxUQvcszXkjZ22BY2YxDOpmqlJFDlo7Gqj5pbh6+rJByWopAnqGsAVU9AxFzV8Kh0iTMk0Ph4c5WiZp2bVwH1VLTAQXOWuX7A7Tblp0iJwYFGXRXaRTNLC/YrC8/mv/gZGVKetSUhRdysHwsQ+HyWPjO7gfM6PD36ZGr18piVlHUG8GZzvaB2uTm4jmpIy6uyXNSSVvM07OvG+um5syZ5ycy6m7YSpOSiKoDRs7mj62H+o/QKAChJhihHLMCBVnIFSQg+AHYjAUENRNaoRKPARNEhAy8I2CCSHhHd9oQLzVygsMMll5IAkqufxWcsXWrfVNAKoGnNmkjo1myMzcMzNamKAKr+7oqK+tLS8EEGYMBt7Km9S0DHzyPBIEZh7ckLxxZH174voKApl4q2AV1LBgMDC8AKsMaD4hmtdRM7U0Y0IRMwuIsZqRmY+AfwCdALIv0wUbWwAAAABJRU5ErkJggg==");
+}
+
+.flag.VC,
+.flag.VCT,
+.flag.vc,
+.flag.vct {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJ1BMVEUAfC4AJnT80CK9uyRUmCjsyyI/kSqdsCbcxSJ+pigQgS0PgS0fhixRK6rDAAAAbUlEQVQoz2MQBAElOGAAg6Em6KGk1IIuqMyipORghCaoxmCkzJCEJmjAkKTGwIwm6MDA0cDAQoxKNQbzYgwzlVmilmLYruQxgRPDnUqqC7iCMATVGRiKMFVu4MZUqTSBE0soRR/FIqheRK2QBwDQhTJFgRiQewAAAABJRU5ErkJggg==");
+}
+
+.flag.WS,
+.flag.WSM,
+.flag.ws,
+.flag.wsm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAG1BMVEUAK3/OESYyVJggRY9jfbEQOIeQosfAyt+gsM9en5nHAAAAQElEQVQY02NgAALWABApCAcgHgNbAhZBZgNmDEEnBgYPDEEXBgYjTO0MLAFYBJmxWMSkgEUwvJQYlYJYwJAWBAC4ZRdFtyZb0AAAAABJRU5ErkJggg==");
+}
+
+.flag.SM,
+.flag.SMR,
+.flag.sm,
+.flag.smr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAeCAMAAABpA6zvAAABR1BMVEX///+LaxFqdntctOLw8PCSlpOGcS9etuQ1SzNasN5Kk7j8/PzLzcsgOSxAUTosQC5KW0BdflOBYxumeyBpaVKFaCN0goygdh+QdSpfanFxVARqTA1xUxF0uNw/gKE+bXVLh54sUUlSptPo6ujh4+FNm8I0WUVHaUh4hHWbm5v39/fBxsJZdH44UEY1UjyrrqpreWgoR0EvTlNgcl1xc1hbVC+HdUNqbVlQSCFpazFzdTl2nLNrhmp4k6SqjEZ5pr18XRVUX2iXiWe5kiBwjp5cp86mvclapMvfz6vv37qku8g+dIRIhabf39/EuaTa0cGvtq0hLhxFUjR7eV0yPilXY1UiQTa8vLxYVzSogS9xgW0+QyG2tra4jTVFQSp6iYZkXCNic31hZk6KahyHpbWIr3FtZCd8pGp9aTOHr8hSYGhjf5JuYTEiW0ESAAABDElEQVQ4y+XPRXODUBQFYCDII8EJTrRx98a97u7u8v/X7TJZ8Mi207M939wzF0H+ZjbWF4R7uwsxX+bmIuNzdztko99vkDFXiKP6ZKKjuPtJ0rRMU3dlDDK2Nc0eI8UlGMsSl+82alnokKyWGMjDgr/0tPw9/ar7pdQtcIb71ZOaPDCmndFAfuTqzuMx4fhI6jxgvc+PYQ2A1FxJzSQEQF7rYZhqPMvlAhue7eagN3FaVjBDVUd3Up6NUI7Qk2SvBKUril2FAyIMbiV5/rX18ta+LxwkKGf4O354Xmm22s0KzwWhMB6On10T2SLjDXmgkN7EiXQulybwVRoKqbUAHd0ORunACgWHjvmf8AdLZy8UWK2OKgAAAABJRU5ErkJggg==");
+}
+
+.flag.ST,
+.flag.STP,
+.flag.st,
+.flag.stp {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAMFBMVEVWtx//zgASrSvSEDSKSjAAAADYrgDjWCDjVyCzkAB0XQAXEwBrVgCkTiuDaQB3YAAKgYv+AAAAZklEQVQY02NwUsIEDCbYBI2dsAmaYBPEohQoaMuAAYyNjQsF0QBI0BzMEkuEEWBBiFKZgzACIghSKrk1eiKEgApagKRTw2AERLARxPq1DkaABS2w2d6IRRCr452IDRAnYgMZW3QAAIBCN0MOGs4oAAAAAElFTkSuQmCC");
+}
+
+.flag.SA,
+.flag.SAU,
+.flag.sa,
+.flag.sau {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAMFBMVEUAbDWAtpqgyLMQdUFgo4FwrI1QmnSQv6fA283S5dsgfk5AkWew0cAwh1v3+/mPvqafxqwrAAAAdUlEQVQoz2NgGBzA2ABNYKuQr2tSp2vxnCIkQad2J5+gQ0HCRYVIgkGNtanZVd0lmYJIgqmdk5L8tQ6JFSoiCTKmysrOeCTq5q6JJJjTkfRJYpm7o6ANkuCqzZc3MBvssmb2opP3UbmmgiCg+RSLSmbjwRBdAAOBHQ8vIxWsAAAAAElFTkSuQmCC");
+}
+
+.flag.SN,
+.flag.SEN,
+.flag.sn,
+.flag.sen {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJFBMVEUAhT/jGyP970LjGyL1pzaoy0GRwj9nsD8dkT7U3kDt6EFOpj/lyas/AAAARUlEQVQoz2NgAANWJTBwFAQBYYYhJ6g5CYugehEWQY0mDEGtDQwM3IvQVaoxMCRham/gwDRTk71gEYagWpJa0tANT0KCAK4xK1LO9A4bAAAAAElFTkSuQmCC");
+}
+
+.flag.RS,
+.flag.SRB,
+.flag.rs,
+.flag.srb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAABHVBMVEXGNTvHPkTl39/kwsP9/f4NP3QOQnfGNjz///8MQHbPdSxDRGzMaj7OjyXbz8/evb/GPD/Qkl3JcFPLq7HPXDTBMjf69/f25OVBQmvu0NHlsbPJZCvg09TSfH/KeDLEPjXUlSnLlJXo2drh2dnUt7fRsLDOhIfIUUr129zNnWzCVC3ioqRFRm7NbzjWiCfRalHRb3OuWWKubHjx7+/Fm57KTFHRmjrQi47XkpXTzM3KWlbexsbRj3LAa23x6encmZvLpKTEhYfEdXnVoaLrt7nMiUufRlfcioTil4htSkPSnk2kN0LBXjbOimLGfSbap6q8jJa0XzvQhX7Qd06qdzfaq2PSqDTCmzPUp4vYsbLhzs/t4ODJxMG6cXHIfH+gIrqyAAAAAXRSTlP9g+pWxwAAAQVJREFUOMvFzsdSwmAYheEUkJ+YbopJSCOFJk1CbwIq9t7b/V+GC51hgebLuPFdP3PmYFgmURj2N8hLySB+eswngAXh3CqJJREHoHwgVMv38klZgBbP6BrN0LVqAYL2BeM4DGNAH3n8rtN5dB6uf/mYzn61cdgYjMy2SzfaO9n10ivYVGxr0nsypjoAt1o9WWuZeF7ZBmCOcAN/zydYEPbHXdKN2CEAI48dT7UwItjNeHhFDENdXcxecwDczXPNkPyYTZ5BuAjm5LvPkT/DFPqucmMN3vrzUb2rovVSK1ikDNsjAokSUTxES+r2xeMoqQhBdGSS3GVdQyBEql7ZV1ACGNN/wk/ONTdzPjKb2QAAAABJRU5ErkJggg==");
+}
+
+.flag.SC,
+.flag.SYC,
+.flag.sc,
+.flag.syc {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAb1BMVEX////cRET20dHdRi8Aej3pjIz//v782FYAP4fWKCjzuE0PSITXLSnszljumEXf7+fkZzitp2X70lQ1lWVObnfaPT2HvaAJfkNeq4S22cj319f1ysrogoKt1MGPxKkRg0lXp35mr4qwj36kj29psIx3kSIwAAAAr0lEQVQoz33N2RaCIBRA0YtToZWRQFk29//fGDLoBcHzvNc6sEU1+81cnVMcYMiQO+xoEvKZnY6UJiEaB9sAsuTWhzy99eA0jmxVAsJxbCuGWwX+OLLVSuWNF1sxZFpNkMW2SDnIl1viKQv1GG9JmUGYG8/bharau3yBGU9bX2nSnQsV6LHdIlW1vbwYYoJxrLekvMaJg3zcGtX2jwixsKlzpRR5d89iJfh+5G+dmP7QIhk7LnKNYwAAAABJRU5ErkJggg==");
+}
+
+.flag.SL,
+.flag.SLE,
+.flag.sl,
+.flag.sle {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAADFBMVEUAcsb///8etToftTtamkkBAAAAGElEQVQY02N4tQoKVjPQihkKBzRj0h4AAGLOW/Cjq+5HAAAAAElFTkSuQmCC");
+}
+
+.flag.SG,
+.flag.SGP,
+.flag.sg,
+.flag.sgp {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJ1BMVEXtKTn////2lJzxUV/uNUX1gYryYm7vQlD6ur/+7vD7ys73oaj1jZbd0n4ZAAAAW0lEQVQoz2NgwAFYkjHF2Bcqs2MIVk5msHBAF1wY4GCKYaKgSzMDkwKqIJskQzgDWwKqILMgNhdNLHAqCEMXDFzAYRCKLsgt4YBFf3aPAQMRQAkLYBDEAkayIADytx8PHH3E9QAAAABJRU5ErkJggg==");
+}
+
+.flag.SK,
+.flag.SVK,
+.flag.sk,
+.flag.svk {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAV1BMVEXuGyTNpbfxPkfIIzr+/v8LTaH7x8kLTqL////uHCXyVFvyjZL1dXsZSpn6rbD+8fL94+QYSps4b7PkdX9hWY9gWpGSlbr4nKCdbpKOa5PFiZ9IernPj6EDTQy6AAAAAXRSTlP+GuMHfQAAAJNJREFUOMvdz9kOhCAMQFEsCtNaQHGb7f+/cyBGfXGKz94QCMkhDap+XKpWN4TB7AURGkwtS95NGbatBBubqxC96TqTHlT2rOaAzN4zlyEweU8MRUghjw5UHr19RobzAWcRfkBr7VzaIIrQfnvrbFrubWUYp/Wc4j+ocI3GfB8Jz1M7RHj1/ROwDBGHAfESlLoX/AFBXSI5QBCfVgAAAABJRU5ErkJggg==");
+}
+
+.flag.SI,
+.flag.SVN,
+.flag.si,
+.flag.svn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAMFBMVEUAXOX/AAD///+/Fzq/1vkoTMF8crqIs/OYjMQQVtavzPcudbsweuqfgbUQZdaPl9PUMJ+YAAAAR0lEQVQY02NQwgIYSBN0L8EU1Ofe0IQhqMv34BKqoIuLi9vxmhQXZMAABKxOKgEM6IAza9kEDEGGiFYGqgJjLIBBEAugmyAAw6IoE6NtAqsAAAAASUVORK5CYII=");
+}
+
+.flag.SB,
+.flag.SLB,
+.flag.sb,
+.flag.slb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAP1BMVEUhWzMaYsH7/P5Kgs7Fsx29sD8/cpEAUbr80RZYeSsub8WkwOY9ecqKr9/D1u/l7Pfu8/pYjNFwndjG1++zyuq3m5y9AAAAkUlEQVQoz43QyQ7CMAxF0RcHuCVDR/7/W1mEqpVo0nhj2TqSBwEOONJFvJ7DIEi5lDnV2eMtFrMVYDVb6kyCcSutcWwwqWwXwtWKJ1Ygfpp8m/0g83zDpPKXlCC0mITP0QP4T/Z1JuHMAkAwc3UmQYwOwMXYYPsxtIb+wwY7wyY74A3b4S0rsINJnUzqZFIn0xe7Ugy2JSfdKQAAAABJRU5ErkJggg==");
+}
+
+.flag.SO,
+.flag.SOM,
+.flag.so,
+.flag.som {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJFBMVEVBid3///+gxO5bmeLN4Pbp8ftMkN+WvuyCsen4+/6vzfG30vJNbQNHAAAAUUlEQVQoz2NgGMSA2QCLINcCLIKsAVgEDYUxhLSVHEWUNqEJpggCgRu60kpBwekY+pkEBRUwBFkEBR0wBBNndIphCJYaMIdjCDYwMHAwDDEAAKAdCNZzMJXoAAAAAElFTkSuQmCC");
+}
+
+.flag.ZA,
+.flag.ZAF,
+.flag.za,
+.flag.zaf {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAe1BMVEUAFIm/3dHwshwPfUsAd0n/uBzA3dIAAAD////gPDHeOzGQxK/g6uv47/DP5dyvpCovkGqAu6TiSD4QI5BsTgs/mXbpc2tIVqsgFwMffkP3shq/qCfAihVvkzXQlhbxqaSQmctQiztPizuAXA5/XA4wIwX1wr6wttrfsCKtJwiyAAAAwElEQVQ4y42S2RLCIAwAY1sMYr3aqnU8q/X4/y8URBTKuc87OyEECsGK0kc1CcHgIxbLOZ1tUsRolMFRmeEoA7LfadFz5RUPJEuJMsAm06JTX5SL2PLoVZnr0h0VIoroIv+auTsqRWxPZtSBFBFvRI+ObZSIdz3q4Cea0aCIDSGvFLFPK4oZu4QZe+PVI5v/HruEPQ5/5lKDjfxrPVduwYV1Pc4cZ3CPnhzHvHBfjmOctzfH0XLPGqJiLKfEaA7gDafDHAN8aOvZAAAAAElFTkSuQmCC");
+}
+
+.flag.KR,
+.flag.KOR,
+.flag.kr,
+.flag.kor {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAe1BMVEX///9/f3+Pj49vb28PDw8/Pz/v7+/NLjoAR6CgoKC/v7/g4OAgICAfHx8VRJbzy862qcGEhIRmOm3Mwsqtra28L0IuR5DVhJBzbp6mMk3mlpzTR1HvvcHssLSTiKykl7bs5uxfX1+UlJT88vKPd53ZYmtTWpWXl5dQUFDfXWhyAAAA+ElEQVQ4y7WTiQ6DIAyGBYfgjdfu+37/J1zL0GVUzZZsPzGR+sEvbfG8/ykOaCyIe0DhR24o8gXleMrS6G3ToIYQJ8aTEMbbnhGGipgY4zCvpzx/xnzB7oWgxixF53wmQRdkg+JIzMPWeCOtNjCp0Dx0/pEb47XstIbpQXCaII7Gqxe4QnM2kPSqpRbw5CPVOVssU1kplyPgvESuyRSoHAVV2chmqoxmI6CG75my0gMQw1N3FCzoP7XN4+4F7nrz2FVm23Lb/srwhCW3BM21Ocq1MrWuIczd7gmZ7R5P673tnmPtds9gPzJSazR3O5waf3NnPr+Fv9IDQ40NIe3u0ysAAAAASUVORK5CYII=");
+}
+
+.flag.SS,
+.flag.SSD,
+.flag.ss,
+.flag.ssd {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAYFBMVEX///9KbYVZdXr83QkHiTASRaUABhDaEhoAAAAPR68HfUUGIVMLNIMKZXQMWYsGhDhaMnamHz+luuHMFCNBOYl0LGQsXbkeUKSUnFFof3A8Y4+yrjzeyhwJb2ANUpcDEiy4e3zXAAAAc0lEQVQoz63QRxKAIBBEUZQRHXPO4f63FKVYCr3wr1/VNIhcJVCCOVMg5CgDIXN+gVBTBUJ9X2GQeWyFq4cEq6F9E39m4B7O00vrzgXDTcrFTh3+gPBp/DHw97zjiopcWVimRAA8fczA6CBCoGechWVKUDcmdhWS10VBkwAAAABJRU5ErkJggg==");
+}
+
+.flag.ES,
+.flag.ESP,
+.flag.es,
+.flag.esp {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAn1BMVEXUOBXxvxW4Zk+qUQj/wwC2Qw/5uQDGCh7VORf/xADzrwfXshjmngfOwpvJrYaiXxTRsb67dgbgtxeOlVTDqi3+yBftvAv6ww6/rD7rnAfOaQ3TsADSjAvopxbFVhTikgywRh2sWRXWeQ+1Yz+5ZwvToh+/elzRpUnMkxzTlEWxLRLMiRexqFmEOzJsU1+5WxTijbSTSRzUs55eaVvNpHBqh5K5AAAAAXRSTlP+GuMHfQAAAJdJREFUOMvl07cSwkAMBNDL4HDBgHO2h5zD/38btDSyathGzRs1K5EZMuSnIJmjQojwUBHfMEHBmNKApggYNoerLOIpqCqviqIoVOEEFGUr5euhVQlDkZrBWnNztRHwxmLT2PvFuYHlMMzZsT8/R9YyBUNf7zjvekm1D8MgW3M+yi7IEhiulot6e9r7n4moEOoafT1/+VxvK0kl3q0nSz4AAAAASUVORK5CYII=");
+}
+
+.flag.LK,
+.flag.LKA,
+.flag.lk,
+.flag.lka {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAe1BMVEWNFTquVivxjA2KFDfZhi6miCzDbg3/vikAU07rdADGaTCyTTJ/EDP5pxy0ZCeFETW8bCjvsCX1tCXSiiffmyWfRCvTlh/CcSj5uCWRMyvAfyCiUifamCTroCTRgCqkXh/gqSXqqSXHfSiGJiqVSCLDix3kliuQIzDXkSbhs4zbAAAA8UlEQVQoz42SSXLDIBBFmxCnMxAGCRAg2Zpt3/+EaZQsXLFw+S1gwavfVfQHfBLA4ZA5fmfwfHrd43Qk8fCeefsgXrAJDu5hVfNf/NKMHpz6MxTfLi0/70QgJ14VCCdltNbmAZzDjkhMtbZmWI1v+2Rkm1N3RV7X0Qc0JlUptr1+IE7ae/R+mVnL5ARlkSmXBhMWRlhWFC9d4k1lAlbbT8ty4rqKm5XUZbH39kYsJ0Ld40jG2CyGpouiqLrZsRa1At5V9oEI7AIgwpX+j2EsjqYVZqPLSa4bE867K2RbKWi8EL+nEHy3FE2IxZo9Xdwn+QGnxBrCNL/vUwAAAABJRU5ErkJggg==");
+}
+
+.flag.SD,
+.flag.SDN,
+.flag.sd,
+.flag.sdn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAARVBMVEUAAAAiXyxQVDPEFjJAQEDdTGcFZiXSEDT///8AcikAFQcARxmqIjGDNS8AKw8PejUvjFBfp3jv9vHP5Nafyq48Qz7PTmJl4CtHAAAAYElEQVQoz63QNxKAQBADwTm88P7/TyXAZYcCFHfV1C5JWlpDoTWhis6EkpNHkpz8CY38BaVkz6N7oMaliu2FGlYTStP8L3TT7jFhy6K7H97ztdPVWLABBxpZACsL0HiMA+tdEadf53u5AAAAAElFTkSuQmCC");
+}
+
+.flag.SR,
+.flag.SUR,
+.flag.sr,
+.flag.sur {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAKlBMVEU2fT67IkGwzLO0Ci3///83fj/syB3+/v7fmSDPZSTEPyfVeyK/LinpvB0xIzJ4AAAAAXRSTlP+GuMHfQAAAGFJREFUKM9jYA3FAAEMtBBUwgIYSlwwgDt2QUEsgMEYBqwWw5kIQevNWARtL2MIWna0ZXRMRlc5LS0tE0O7VVraYgxBm7S0wxiC1pnTNmMIWhy2aYYLYvUR8QGCNTzpFZsAgv2JIjNIFmMAAAAASUVORK5CYII=");
+}
+
+.flag.SZ,
+.flag.SWZ,
+.flag.sz,
+.flag.swz {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAA21BMVEU9XriuCwu+vr6RkZHrpgMAAAD///+xDAs+Xrn/2QAcGxuyOgm4OghBQUFtbW2rCwlOSYUrKyvrpgX92AJPPDnEaQbu6OhJUJKMMzOzKgeEHTLWqpjUmZnVm5vU1NTHbm5nPj+3Pz+pGBiMjIybJiaCXDp2JEBnL1SbYSvDZwN3W09TQniPGSkPDw/BX1+1UA9aPG60KCjr19evr6/v7+/6+vpiYGo4QGtHTo2vZBlwcHDOl12tOAbBcnLEgVe5b1S0TCI7WqNgYGByTT2XNzcPGS84THsbKU8yTYzAGvZjAAAAAXRSTlP9g+pWxwAAAQ1JREFUOMvdk9lWwjAQQDNoqqa2ScDSHShlBwFRwB13/f8vMmlOK6JoXvU+zrmZzJIgtK8FQn9BrBxoUUHlXS3KaG8TaD0lCXwJb4rNBsHpfD6LTn4WPfLGXk8NQbW+RfQPBY/4mblLfiZNI5SRSX3cXBeB+qZpHh1b1st0SaySpBqa13e3N2P6IQJQU3qY2La9WHC+I6kZ4WQVJQCQi9BvD3qO08YFWZWCK6fv9AYXfp6xy1hHHBQZL0VKm/NUZYxFcHTvMppnDM7dQB6QNQpISdUYyRgdulNa1Njpqgk31M0PWdux6jMYjta7LuYoPFL7NEfYuhmM01n8y2ayXXte65tda78e7ff4n37hOy+LLL1mIK03AAAAAElFTkSuQmCC");
+}
+
+.flag.SE,
+.flag.SWE,
+.flag.se,
+.flag.swe {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZAgMAAAA+toT2AAAACVBMVEUAaqf+zAB/m1N8Q7kSAAAAGklEQVQY02NgYGCYmsAAA7RmhsIBSUy6OhIASfMjv9uXrDcAAAAASUVORK5CYII=");
+}
+
+.flag.CH,
+.flag.CHE,
+.flag.ch,
+.flag.che {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAFVBMVEX/AAD/////wMD/gID/v7//YGD/8PBls0LNAAAAPElEQVQoz2NgGLwg2NjYFENQUVBQaJALsroAQaKgoBiIDoAKMgsiAQN6C7IqAQHISSA6YIiFJ+7EMHgAACUjEjNIvHDuAAAAAElFTkSuQmCC");
+}
+
+.flag.SY,
+.flag.SYR,
+.flag.sy,
+.flag.syr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJ1BMVEUAAADOESb///8Aej3A3s8rkF3f7ubv9/PP5tqq0794uJhPo3kPgUhA53/OAAAAV0lEQVQoz2MQxAIYhoqgEhYAFVSBUE4ogqkQKgxZ0GXxlCQlJTVPKxckwVZj6yIlJfXNxhFIgmrGQSBK1TgJSVAz6jiIqlk6CVmwqANEdagjC6K7cygDAFe0LEzg45X5AAAAAElFTkSuQmCC");
+}
+
+.flag.TW,
+.flag.TWN,
+.flag.tw,
+.flag.twn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAJ1BMVEX+AAAAAJV+AEsUFJ2Cgsv///8BAJQwMKmfn9dCQrC6uuLg4PJgYL0ICCqaAAAAWUlEQVQoz2NIFIQBBgTAJSgsXmiIISje4lGILijs6bVkiiG6ypLQUHd0lZIdoaEdE9FVmoSGOmNY1LI12gPDIuMlXsYYFmXWHJ+I6SNhQ2K8qQQHDKMAFwAASRwaKceV/cMAAAAASUVORK5CYII=");
+}
+
+.flag.TJ,
+.flag.TJK,
+.flag.tj,
+.flag.tjk {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAJ1BMVEUAZgDMAAD////aSEhJkkn++N/97bD+88n96aD85pP74YBQlEb/++/JD/WXAAAAUUlEQVQY02MQxAIYaCFojAUwKMGAahCcCRdUSw1LwhAsUi9SxxTUnKSKLqgapJYENxUuGFO1/Ci6oFLFsqx2TNtndCJsd4ECbxeXLTA2A70AAP6jLUlcjKwxAAAAAElFTkSuQmCC");
+}
+
+.flag.TZ,
+.flag.TZA,
+.flag.tz,
+.flag.tza {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAeFBMVEUAAAArIwN3YwrrwhQdGAL2zBUptzcetToAo9380RbnzRxRvDHFpBHxyBUIpddfTwi0lQ8WEgHdzRqjxiNqWAm9nBCOvGw8rq7gyytivi4Rps9Osp+SwybVyjSpjA5TRQfNqhGdv2CzxyGpwVfTyxzNyDp9unovrLjWAwfLAAAAwklEQVQ4y43MWRKCMBAA0WF1hh0FRVTA/f43NBELs5BAf3c92Ng6RtSVMGbZwht5PcDiKHKWUebMI+MKgQNnfgx35OUi5wZg4nyRG+gJq7jgleljrHIJXd6IoHOpwtE+Q22Mt1Sr3AFRHTlXzXHKqHL+xEmjxlXpxIkj4xKJq6mZuP8Ynilwzdw0cs6xcL9xmRvHFdx3VLnco2uL+vigQeIKak44E6zi+ChypYnjo8zdW1wcGReZOHHsbdx/LDsrx/oAkpwc3/6WLokAAAAASUVORK5CYII=");
+}
+
+.flag.TH,
+.flag.THA,
+.flag.th,
+.flag.tha {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAADFBMVEWlGTH09fjMh5QtKkoyD257AAAAH0lEQVQY02NgIAGsggOGUDggzPwPBzRjkuIcJF+QAAAjJYF/PyJQ8AAAAABJRU5ErkJggg==");
+}
+
+.flag.TG,
+.flag.TGO,
+.flag.tg,
+.flag.tgo {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZBAMAAACx9nFWAAAALVBMVEUAak7SEDT/zgD//v+vHjjZLyvWJUXqj6D87/HgW3PaPVr42d/meY31y9PwsbwZZZ5IAAAATUlEQVQoz2MQhAAHBmRAkqA4NsEMbIKHJwoKBikhAQZBcWNj4x50QcEVxtaJGILixpYY2gUlzO0wBbMT12LankihNzEFlbAAmgjSCwAAG7QmPcKBtfcAAAAASUVORK5CYII=");
+}
+
+.flag.TO,
+.flag.TON,
+.flag.to,
+.flag.ton {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAJFBMVEXBAAD////rq6vwv7/TSkr66OjllJT++vrkkJDFFBTbamrFDw+mCkE3AAAAMUlEQVQY02MQhAIFBiQA5It4YBGU5MIUDLZmMS5EF0wAkoFECWLVjtUi7E7CdPywAwDkmwmBWzMtugAAAABJRU5ErkJggg==");
+}
+
+.flag.TT,
+.flag.TTO,
+.flag.tt,
+.flag.tto {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAhFBMVEXaGjXcKEEQEBDqfY3eNUwICAj87/EAAAD////+/Pzn5+dDQ0P53OD9+PkdHR3hRFvbIDpsbGyTk5PlY3X19fX0v8bysLkzMzPMzMzV1dXw8PAqKir2yc/75unkWW2hoaG4uLjd3d3iT2RSUlKtra330dbvnqnDw8PtkJ18fHznbn9eXl5tmbTVAAAAyElEQVQoz43SRxaEIBBFUSOCihHMNua4//31AHRYwvgO+HWeYRPhyRc0nWkA70cHS8rWDx1Ixn0dSRlVKIakE/qllO5Ac0ianAXqoxm2IWkUJFUyxRsobZwpOTOeQDKniytl6a/g+AlV6kxR3X+MH1sprR39wPFdo8a7glyQTAp6q0knPsDxBz6VvGkBjr+IcDUbQfvTyKjbiFWhCTzT+jaywI0knM2ajWz4bYQUmo0EjJtwI8PbyMd4VEW6jfhPIwPVbMQTxP4DG9AQs+B16vUAAAAASUVORK5CYII=");
+}
+
+.flag.TN,
+.flag.TUN,
+.flag.tn,
+.flag.tun {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAMFBMVEXnABLnABP////zf4jtQE7rLz7qHy/83+H+8PH4qa/6xcj1j5fwYGvxb3noECH84OIlBDrBAAAAAXRSTlP9g+pWxwAAAG1JREFUKM9jYBTEAAIM9BcUDcQUzFRSmoYuKNO0eJfGQTRBp1JRYwsVVEG5isRNSkrqD1EERXRFlLarKzmiCAqrCitdy1IyRBGUVJQsETykNJGwSqxmyv0A2a7/EMOdl9Hdid1HWP2OPZQGJOIAPpI4lSZvLh0AAAAASUVORK5CYII=");
+}
+
+.flag.TR,
+.flag.TUR,
+.flag.tr,
+.flag.tur {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAALVBMVEXjCRbjChf////nKTXrTFblGyf4wsXtZW3+8PHoOELvdHv1o6j84eL2srbxhIofikYmAAAAAXRSTlP+GuMHfQAAAGRJREFUKM9jYBTEAAIMdBYUnogpGN2klIIuKNKkW+m1EE3QQqlQUDAETTBJD8QODkQWFFY6CGKbbJyMJCiidBHEFtdJRBKUU3oIclWSkiMhlXAzjQnZjt2dWH2E1e/YQ2mgIg4A7pA0KOwEES4AAAAASUVORK5CYII=");
+}
+
+.flag.TM,
+.flag.TKM,
+.flag.tm,
+.flag.tkm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAABL1BMVEUAhDwQi0lEdDayUi8pcTowm2HSJjAAhD0Bgzw2cjfHPS+/cDBAo23aRC/gWS3ULy9gSzfaSy7A4c+SOjG1cjCuSC+BQjK9WS+DZTCvaDCdRi9wQjSlUjB7azi6cDDCRi+iPy+iYGBVbjyWVjmFVDtPYzumWDBKWzaPdlFqYDNwupJgsoapLjGVQzEpajl+Njabj3jFVi6hk428Zi+jRy+rXTDELDCIWEuAVk3PUS6NUzGPSDOlaVuLXjCJPDFoUkORYjJ5Rz+7kI3XYi7CezCmdG80WjWAwp5Qqnmw2cOv2MLOOi+Xdz3MPTy1gC+AaEmhbjC+VEprazK3j5KgOj59ZWhZVTZUPzKSZmWUYVqaZTJ1UzI9fD2mfkqaT0zuii1ehEzrgC2Yg1t8WU+tZkZNbMQvAAAAAXRSTlP+GuMHfQAAATJJREFUOMuN0cVyw2AMBGBD7P3jGMPMzBPmhsvMjO//DD316Kg6f7OalTgOgBDyTx8fZi4G2+E4DoDz2Zvb619nSOjoD+5vzcY5AyDtTPS3UtnYhY8BUCFBtYOCSxlkOwkXA1DhDyCV7RK7PTEaULwMksQDgNsG1jPB9FMuGGAAyjwg2UHH3TgZnY2if60P9+1Wj6fpUXouMgA8rx65bcusFdEX6MUZAEgV1fY8QreTz4vJf3wmXIpEzGCN/kykcFNsmB4S1mtXewszRkNnO5wXxXCIhEJcMSw54aUTlVLuuzAf0mWyH8XY10ubTrQK28W2tKLh2npffQ7pgwshJVN8S8TpxOTrz2bZ9NFlLiebVKpZpeFpazk5OzmmoS57/FVZo6GmybJhGTSUdd3QNXkX/AXh7zbhm0h1sQAAAABJRU5ErkJggg==");
+}
+
+.flag.TC,
+.flag.TCA,
+.flag.tc,
+.flag.tca {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAh1BMVEUAKGjXeorg5e2CgV70x8xncplgeaHOESbAytrcV2VSYGD8zxn8+vu/ydlDVGG2oj/9wDoSNGruxh0AnkkzS2TarhtKWWScrjfuvDnIiw7Mxx53eV3mwCTepg5GfDf98fP31dn88fL21djY3uj13uLZ3OYTNGq+fgv8q5OrVBa7ZBb+qoVPrjjs6fq2AAAAtUlEQVQoz92Q2Q6DIBBFR1HRIoL7vrRq9///vkIJTZsYbV97HoDhnjBhwLNMBwQuxq7cbcOzYAkZSFWJulpRpbiquZTSeTrsfYx9sY6ipIsiXuBHMdk9SXRrwej3g2zdD9Msa5WgomiaNEWvNx3T8gxbfkad9D3iN96eSvSh6fG8q4ifOSmJFnWgBy5VldSEXK5tVMMWWUS6jkTZpnhk1T2uWLgpQpDHcR7AFwSMfeUBhCH8JQ/SlAsDOOEqEAAAAABJRU5ErkJggg==");
+}
+
+.flag.TV,
+.flag.TUV,
+.flag.tv,
+.flag.tuv {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAVFBMVEUAlcjYVmvyxs1Ap5YQmbswo6Ignq/IEC4BIWnAyNr89/jUeY7g5O1dr3+/yzJnbppgdKFwtHCjw0j22N3f1BnPzyV/uWT+3QDZ3OePvldfc6FmbZpuQUo4AAAAzklEQVQoz42S2Q6EIAxFUQoojgvgPv//n9OCxpEY8D6Ukp7QDVaUn71C1UrVdPZNUbInUYDQAPrbEDOCzBHcCQxYVcVcZ9DWqNU5rZXSaFe6xy92LRr1oPt7AhjkQInINAXfp9aYFVNr5+6p+SikMZKFZoZPWTQ9NeO9718zxlcXFLBzPAG9CoTLDdg1cELjrjl7JzFuybCEYy1g2xS4LQTC3Il0PuDWE/P0qjqQkIUkAGuXTMO0ixlrFDZdYEsL4VbeBv4kPnKWhc5PE+sHuscKVSzXnS4AAAAASUVORK5CYII=");
+}
+
+.flag.UG,
+.flag.UGA,
+.flag.ug,
+.flag.uga {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAb1BMVEUAAAB+bgKsNwH////ZAAAAAADqbQF+bgKsNwH83ATZAQD72wONjY1fX1vm5+a4uLbbEBD2v7/pb2/ukJAQEBC2UCDAwMDPW1oiJSLijVjvoZNwcHCcnJzExMTrqKjGNTWurq66mI/77e1FR0XhkJDFkXaHAAAACXRSTlP+/////////v4HKoILAAAAhElEQVQ4y82SSRLCIBQF0VYTwwcyJ45xuv8ZXUeogh328lXvXiu1T0KpjGKxSaJQ+piEzilWu1/a07n1xsoT68aaJ00dFTvsG+iiIoixgCeW2xUDuNlNL4b1XnoXAm5eJqJfC/Iwn7tExX7kJox9Qj0XuZpAPYFntP6zKA6JBOoJUmUUv8WyGwrCEGL4AAAAAElFTkSuQmCC");
+}
+
+.flag.UA,
+.flag.UKR,
+.flag.ua,
+.flag.ukr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAADFBMVEWAmF3/1QAAW7uAmF21ZTA2AAAAAXRSTlP+GuMHfQAAABpJREFUGNNjWAUHDIOBaf8fCv4whMLBYGACAHKYirK4JSjEAAAAAElFTkSuQmCC");
+}
+
+.flag.AE,
+.flag.ARE,
+.flag.ae,
+.flag.are,
+.flag.UAE,
+.flag.uae {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAElBMVEUAcy8AAAD/AAD///9UVFRVonQ6Np3gAAAAI0lEQVQY02NQAgEGNEBfwVBUABE0RgV0FnRBBRBBQVRAN0EAy7cuKPK5R68AAAAASUVORK5CYII=");
+}
+
+.flag.GB,
+.flag.GBR,
+.flag.gb,
+.flag.gbr,
+.flag.UK,
+.flag.uk {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAPFBMVEX////xw8p8jbLnv8pBWY8OLHHw8vfIEC4BIWnWTGKAkLRAWI5LYZXgeIn10tigrMfheYrx2+Htz9hKYJTy9LpmAAAAqUlEQVQoz8XTQRaDIAwFwC8SLBYE9f53LRVCCbJw1yx8koyiMcJOgFH04tBYUkDXBKnZLkldh4Z2kBnAJ2alO6SVqwrtgiSk9iaQ19EPktwL/RYuQ9c/Et45znB467dUyHAvq3AWgHtccJx+Ev+Ej19G53DBAFu0cc/wu/I2HsEVwA1PhSl1eK4NrxluuGTtJ5QUksmhaCkk68dM1SokGwxuoR0b/Qp5zw/L/xHkHUeiPgAAAABJRU5ErkJggg==");
+}
+
+.flag.US,
+.flag.USA,
+.flag.us,
+.flag.usa {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAVBAMAAADGNLEtAAAALVBMVEXGWWb////YkZo8O27ZkJmyIjRUU4BIR3fsyMzsyM21nbBzcpdgX4mUlLCFhKRMRAwAAAAAiklEQVQY02MwMy5ONjM3Tg5FAgzWZembQdgFCTCYX6+1OX691lgQCTDYmSU/BmEGZGB8vcrmMFAliqCtzeHHIIyi3RhoJkilEhJgsE5L2wzCKE4y25adlrYtOxlFuznYldbFM5EAgx3QEhBG0b4KCjqQAIMgFsAQigUwuGAB2LUTD7BqV8ICsDoJABuIZ60LUleQAAAAAElFTkSuQmCC");
+}
+
+.flag.UY,
+.flag.URY,
+.flag.uy,
+.flag.ury {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAflBMVEX////59vXouxDl0aKvehT9+/vR2+////8AOKgCOajHolX59Ozp3c7Gol69iQjPsnzDm0zPrV2tdwm2fwbw59bp2r3o1K7w48HfyZr17d+8iRm0gBnNp03v6OS7kDzXv5LdxYfMqW3QqEbOpkPCkBLBkinUow35zhTBkR/Ong6oZui5AAAAAXRSTlP9g+pWxwAAAJZJREFUOMvt0kcOwjAQBVCXMU7cS3qA0Mv9L4g4QJggkR1//TSaRohcFEK+gqIWXhscVjT0IeyolnJTzOUN6daeAaZIEdg0/pIdDFZVn6GwAE92SyeN9Nip5BhjeVQGGaa/OnZnMB6RirWKCVwGzlukR7rv4DEclMDWYwT3sbX4HqXkgkvzy1svgmWxKOUKcJ0P/089B19MsyEgLwCQwAAAAABJRU5ErkJggg==");
+}
+
+.flag.UZ,
+.flag.UZB,
+.flag.uz,
+.flag.uzb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAIVBMVEUAmbX///8etTqZimSNf5Ifpb5vxNQyrcNOt8qe2ONcvc//sX/oAAAAR0lEQVQY02NgYGBlYAhgQAPsUxkYUhsaUAU5C7Co5AxgaE9NSEAV5ErAopKhqr09IWEBipALFsAgiAXQT9AYC2BQwgLoJggAd5op+8o7j/AAAAAASUVORK5CYII=");
+}
+
+.flag.VU,
+.flag.VUT,
+.flag.vu,
+.flag.vut {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAAXVBMVEUAAADtwRBeTQXetA8AfzmzDSwPCwEAlUPSEDShgwt/ZwifgQv9zhJ+Zwk/MwMfGQEAMRZGBRG3lQwARx9lBxmPdAoAiz7EDzDOqA4wJwNOPwQAcTKdDCduWgSmDCgachgdAAAAt0lEQVQoz43Qy47CMAxA0WsH7JkkTaDQmVIe//+ZLCpYFZK7s3Qky+Z4++kKo48ig3Hcd0ANfRQ6KQBRRGlQALAoQeH834Ivap8pQB3S0qTARWKUCbCUQ4HzY78RMC5aSq4ANeWx8KmZe2Re1qGmLOPvRkDSavdc2tCmNI1i7dVwCVnXY+YCp+tuoxVOBWyQoHD6883eD//OXrDJVmiDiMJh5/4VapBoDebeydzpY+4Yh6t31Mncnxi9Gc0Ued8IAAAAAElFTkSuQmCC");
+}
+
+.flag.VE,
+.flag.VEN,
+.flag.ve,
+.flag.ven {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAALVBMVEXPEyr/zAAAJH3PFCv9ygECI3y7xNsbOYrp7PMuSpSotNM8V5tTaqZXbqmFlcDhG/iSAAAAAXRSTlP9g+pWxwAAAFhJREFUKM9jcBTEACIMQ0UwSAkDqMIF1TtnFKELqiWlT1NLQhOseqSkpLccVVBjEYjUakIR1LkEInUPIQtqZkM0bpuEJKgO0aekUYTqJBR3MhtjAIOhIggAAWBSAu+GeDgAAAAASUVORK5CYII=");
+}
+
+.flag.VN,
+.flag.VNM,
+.flag.vn,
+.flag.vnm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAIVBMVEXaJR3//wDhShf86gLztwnpexHcMhvvoAzlaRP41gXjWxXelDKJAAAAYUlEQVQoz2NgoDtgS8AiyBqARZDFAYsgowEWwUYJLIKOIugimoJgMAlVtBAkJo6mlMNQUFB4AboBiYKCYhj2LBQUFMIQLBQ2FMcQNHRLEUYXYxJlYAhUQA8OoABTAMOgBQBOLAlBK2IgQgAAAABJRU5ErkJggg==");
+}
+
+.flag.VG,
+.flag.VGB,
+.flag.vg,
+.flag.vgb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAz1BMVEUBIWkeaiHUeY4+VYnyxs1nbpo9VIrIEC7AyNrYVms+VYoPLXEtcSMAXCVgdKENZCa/x9ng5O37/P378vTf4+weOnj21dqHiYjPu37Z3Odfc6HltDmYlIPKnSG6tIhthiXTrEGhlGf99/iGljx8jSYydT6IqI6Ikyc4cyJ3n4JPg0YtbDUcbz8bYydcgiXL2M3LzsG5y7yYtqH13uNhbYPXrDm7kR6rm26ogRvAqGNJXiTUsE9QfiNcfEEpbSpviinHxbe2zcDi5OBYjGGSrXzI51XpAAAA80lEQVQoz7XQyZKCMBAG4ETQsCQEQQXc930p911ndN7/mSY9kKo5UOTkf0jo9FfpIsjUS1UkYhBiwJ7PmTpKCzSAxhCqooNQBgWYyQzXdaNtxfcI6Yo1EqWbCklK/hp2IYmtgBambHHBnGnJaJHI8ytdQsS6jaBOYAsPOrxFNTncKelmLg8/4xThKzm28AgPV7O+hDGTz/OPWvT22KzvSzlaNuSDA40hG882X3zMNJQdi+Pl+sVGVAW1RR+v/OlTeaM9pfjbm9BBWQGbYY+/f+a9Zmhnul3tcB7O+SRs1ALF6Hr7dG039nXVaEGDYydQs4/nFxTcFD++Tcb9AAAAAElFTkSuQmCC");
+}
+
+.flag.VI,
+.flag.VIR,
+.flag.vi,
+.flag.vir {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAABm1BMVEX////bsDX+/v7dsjUUJGP8/Pzjtjb////19fXarjP7+/sWJmfWqzH5+fnPqrX28+qkNlanN1jgx4HjvlYFe7u3bYMAdbTkwmP0xT3tvjnjxnTWs1Pw8fDetD/dsDPm7PDk2rrTqTLgszPr3LXXwoXk6Orn1qbjuUTpuzjhtDbmuTjPpS+TLkxzrMzLozHHnix7rMYpiLvXs0aKsceOuNC9mjiuZG3r4L7gu1PS4eqZvdGty9unw9Sxzt+BtdFFlcCsxa/RxqR1oXwEb6vatlFllWzE08aAqIVOi1fJv5atZnrUtmHc0bLmy3zVrT3x7uXg0aT58+Gvs8LYxZVDTHQ3jLlDRFPiy43dyImix9tBQlLs48pVoMfL2uLOq0TcxH7KuYrN28/B2OTLsnNsoHOYvJ6FqoqJso/WvXrZ4tvKrK/m3cXczJ6+kGbQrlb7+O9zo77m0puSfEaTfkXywzvs4cC4l6C6mKGfXXFcnmUmgbSdn1nj5tiPljjc6d5bkWQ/eUhIi1HN0rJWoMc9dXmzqW1Dh6yquLJMjbLH8TdBAAACKklEQVQ4y7WTV3caMRBGJW20Z0VYUx0wdRdTdum9+FAMmI57t+Peu9N7cZz2s8MaMDzETl48LzrSXH2aGc0A8BDG4Pv3mGmvbHJ8WMH2jvNmXR/JKobHkx2vHdKiTj3VFkKzRl541ZWaUutEGtq7lyYIgTztNjgVEul8qVdLxwqnwSXykJCJ2+cmjRASXtQLrmdSJHq9ruVyugS9KCcUNE72AplWQ+gngkBpZhyz4vMXIueY0VGCQPwQqqf7E0NLYRKgRXpx7lHH5hZb2wAJL6FemhggjFaNvMfiHlp43LGFIbfFwxtXJRV8A6N0Gpl81tGPG+seC73SVVyhKc/6hpQdMPlMN4rLOdl2qLy3v8dZiG3T+/a11/um7t20EQvHsCPSBzxpV5zRWn3Zz6VShTm0kZpqcECpGhhU1YjtcC19ncE9ED+NhlKy/WqhDBSJvLINKvMJBb6OFtdG0C0IlkMhFhwVSgcMuBiLt8H42AWw5i6j2lRPEVi1WYC2dquVMlZT4boE1sOUAbOXkWAQ94O5VsimSvXLwZFZ3jg7VqqOzxrEzJh+B7clf2re0am2VCc0unv1teY/Pw3E4vFY4PTc34z8jPb8fV1Y+CBqEhwhfCzGE8IlNLYff+9fvPPpGzjhIWwYWy1ygn5938F3kFvvWNCUU0kXJW8CX/G97M6hGG1FbTcnk2Y7yGi187J7JwhxBgOHmaC2mP3XsMkkJSYSyfzfbCLwwPYHPCRVSi8V07AAAAAASUVORK5CYII=");
+}
+
+.flag.WF,
+.flag.WLF,
+.flag.wf,
+.flag.wlf {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAMFBMVEXtKDjtKTkAI5X////vRFLuOknuNkXxWmf5tbv819qptNv7ys5YaLP83N/3oajEtdCITnYQAAAAAXRSTlP9g+pWxwAAAGFJREFUKM9jUFLSMjZuFBRxFIQDAYahKCi3e/dDsOCZM+fv3m13dwcKiqRNtkxzBAmGgkBqaChQhfi0zGmZhSBBRoRZ4pZpaZMxBI0bJYyJU4nNTITtSIIIdyILwn00RAQB9plFeRIwkYUAAAAASUVORK5CYII=");
+}
+
+.flag.EH,
+.flag.ESH,
+.flag.eh,
+.flag.esh {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAWlBMVEXEERvxxMa4ExrIIyxVVVVVpn7llpoAAAD///8Aej300tTYYmmeJSbppKj88PDttLefDRV7NyYNczolZjZ6ChANAQElAwVKUjBKBgrPPEX44uPeeH6aSD9cnHcNwNhSAAAAfUlEQVQoz43QSQ6DMBBE0TIE4wEzJCEJ0/2vyWAgC6Sm/tJ6UqmNd5tTAfWHhEh+JASY+Q0y8xES8zgqHnInROdMrAqqN5f+EGmIzhtlRAj4cnkZtE41CxU37UonwfMYpcVjxikTOz78a2/af/tlKdg8LQPvZyMkZjfIzK7NQI0WA0pe9mYAAAAASUVORK5CYII=");
+}
+
+.flag.YE,
+.flag.YEM,
+.flag.ye,
+.flag.yem {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAACVBMVEUAAADOESb///9w5v7GAAAAFUlEQVQY02MIhQMGWjFXwQHNmLQHAJQLWadZSURAAAAAAElFTkSuQmCC");
+}
+
+.flag.ZM,
+.flag.ZMB,
+.flag.zm,
+.flag.zmb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAP1BMVEUZigAZhQAwgQDFaQC3YQBSawNsJgPvfQDeIBAAAABmgABfZAVeRQGlaAB7bgBNeQCLcwDSawCeagBiVANaewDu6/ERAAAAYElEQVQ4y+3QSQ6AIAxA0Q4girYMev+zWg8gsjDGBS/p7gcKAB+iSAhw2CClZiiFJXPWKlybR6JyKYGZXaaH2zElcc5jx6Koip1Pwvd+ZzX7ZuLlPvSzmRbjghnhCP8UntyWCYNHCcFWAAAAAElFTkSuQmCC");
+}
+
+.flag.ZW,
+.flag.ZWE,
+.flag.zw,
+.flag.zwe {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAdVBMVEXUAAAAAACioaDw8PBqAAD/0gD0ngBAgAD///8AZADS0dDCnADaiwPyr6/97+/tk4b41dUQSBAwSjBkaGA5cQChhxDUIhIQEBBmYGBeAAB0aDDnb2/QWzvnuQBoMDBwamCIEBD0v7+rOQDWDw/f39/3qA/dagBgvDPGAAAAh0lEQVQoz42TRxLCMBAEB4nQSA4imWCbDP9/IheulrbPXbW1s7Nym7UJEbZGEb/br8oIwB0WRQRAuNjElPytWuYR4Nse3F15gPenA8I1Lza9FL/S0PjTeT6NoH6NsWoB3HE2iYAhjhUGselifCYoj67h0RaX4Y8lHsAWuP2ExlJYa2YtrvUVfoyrFApCzR7PAAAAAElFTkSuQmCC");
+}
diff --git a/packages/core/css/flags.wavy.css b/packages/core/css/flags.wavy.css
new file mode 100644
index 0000000..a75620c
--- /dev/null
+++ b/packages/core/css/flags.wavy.css
@@ -0,0 +1,1606 @@
+.flag {
+  display: inline-block;
+
+  width: 1em;
+  height: 0.75em;
+  max-height: 0.75em;
+  margin-top: 0.125em;
+
+  font-size: 1em;
+  vertical-align: baseline;
+
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+}
+
+.flag {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABRElEQVR42u3aoROCMBTHcf5lo2fxNHgaPItapGjRRKJooWjBIEGD/8y81xCmrjhg7xte4VZ+n21vgyMyxkSaS3V4AAAAAAAAAAAAAACKx1NlVQGMsgIAAAAAAAAA3wDpKTOb3cH0BuO3kmdJegwX4FrczXwV14JXazhdmOyShwUg4SXYr/Dl8oDgD8C25F1WQhAAMpO2gOX9Ln3h15jOAmwPiVOwfZLWxi3jXfcBJov1W6j+aGYdd8zONQBpmp0HkMAuoWzbIIgV4FoStgog20IFwKdT4pLfwgb4djn68+w3DyDhqw3SY/jmAWzLXhqmnAbBvw3K7Ntufn/e8+0BsB15Hme+eQC5CbpcjtQAeHjx4YsQAG0CsH0cUdUEAQAAAN0AHIMAAAAAAAAAAEDbANT/KKkXgJ+lAQAAAAAAAAAAABTWC/MCectA2CykAAAAAElFTkSuQmCC");
+}
+
+.flag.AF,
+.flag.AFG,
+.flag.af,
+.flag.afg {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.AL,
+.flag.ALB,
+.flag.al,
+.flag.alb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAA51BMVEVHcEy+AADSAADMAADXAgLKAgLJAwPLAgK8CAjMAQHNAADLAgLRAADWAgLCAgLBAADRAQHIAADTAQHGBga/AADEAADNAQG8AADXAgK+AADUAQHDAADCAAC/AAC7AAD/AAAAAADYAADhAADvAADaAADWAADSAADcAADUAADmAADAAAD0AAD+AAC9AADMAADGAADIAADPAAD4AACUAAD9AADDAABpAAB3AAA0AACyAADrAABRAAANAACnAABYAACcAABKAABcAAD7AABuAACIAABjAAArAAAFAACAAAA9AAAdAACNAAAVAACAnUMzAAAAH3RSTlMAsJ9gsEUoVgVyiGbvlDGg29u8FhK8x/Z7e+KV4pOTZZpjlwAAAllJREFUOMul1ddu4kAUBmBDAEMAkb7JNo8rxt0e3HEv1Pd/nowh2sWmrbS/ZC7OnE8HBs0Yw6r0e/j7uN3pdNrj92G318cupI+/oc/nYWdEsl/heR4935/GgxP3grdHuoJ1OyTJUB4tpnOJkOapIXozasrzHMrDU/t+cIfj+N3gvvOg6zrLKxhJUnRKNCOllSO5Q/QqLOUZxBSBGXE5EhpIVxGN+b5wC5zkBIjiDaA1QJTNSTfx4aWxjIaxtTV6HTKutQMrgnDjBNLSLWBGgb/MhHJHUiXYhWiS7V6f4DtrAOzpwrJAKER2EJdeE1DHBdcWVgCsxQ0AGykDYOUG0xpQGyCFKwgAWKJnITgAxKVTWyebQHCSEBylcKHaAHwNUC50jkGe28ZVMPVhcAys0Lk+Qcut7eJv/9KHWn2C2QB0pIRB7O++wALCUj9eZ5tAizduYidF1e3E63We1bcVAa4GRMhIDJMv0b8HEisRfMG+DshVJHIbYBnLjbzY8oVQWleBpNpFYWsFnYMluwK+RLCwdhxZofmVtiLhmnaIdsqZJVsow7x2QvgmOITbom3ahLaZwcIKpNtAj7IdiC3SkAgvS/9hArGNHN8K2P3Pqp0hXj4PCBMsTPVM/SKYxw59rs7JmH4WEN7Z/ivgQv4DzNGd6HnoThZT6SYwvCmnKIq2j6pq6N6d0capS2e6jADPoubH1p97ffL6aKqqaqqV80QDTUR3Mj1jFFn+1upiuj5q4y+NF02vO/jx+tNEEQ6R5ap7+IwW3/DLL6hed/jxa9JqtSa/P/DeofgJc5nmErAVgt4AAAAASUVORK5CYII=");
+}
+
+.flag.DZ,
+.flag.DZA,
+.flag.dz,
+.flag.dza {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABuVBMVEVHcEzGxsa/v78DaEG8vLzPz8+7u7sASCVihnMCaULR0dEBRyMEZT4EXDkCUCy9vb0ARyXQ0NDR0dEASSTPz88HYDoASSUCZkABZT4ARyTPz8+5ubm/v7+6urq+vr4ASyYIbUnT09MBa0QATSjPz8/Q0NDOzs7T09O2trYBYDoBXznCwsL///8Aaz0Abj8AZjcAYDEAaDkAdEYAcUIAd0kAbT4AWy4BWS0AajsAcEEAZDUAYjMAVysAcUT9/f0AYTIAZTYAXjAAYzQAbUPS0tIAc0XV1dUAUyvRDjIAekzDw8MAZz8AXC/UEji9vb0Aa0MASCQAZDzNzc3TETYAYTnY2Nj//v7IyMgATSf9+vsARCLb29vx8fEBXzjVEzrODS7AwMAAXTbojJz55ej88/XGEzIFZTenIjYGbkH4+PgAWzMAVzD0xs46Tja0GTHWKEne3t4HaDvn5+f09PQPYjmLLDR0ODf32d6gKDnurbgtTDDt7e3rm6ncSmXXM1DmfJDxvMbspLDws758LzIgWTcXVjH10NblcolTSTxHTTu6HTng4ODlhJTkdovbSGLeTGliNi710tjLFzqImSmjAAAALHRSTlMATo5hsFj+WwWwcnKUKEttiIlgnq4Uwnui28EU6iqhrT/b8e3anu0jP+K8vGx84tIAAALzSURBVDjLhZVXVxpRFEYHBRV7ib2kmgqIiAzSO0OXAREiiAKCKIiCHXuJrvT4i3NmLiBhBvM9sBbD3t+c83C5GEalpaNxsH2Iz+cPtQ82dna0YHXSwhuBz/5G/iuPA+KF+Ol8+NjeynlXQ49yJt+SJPaCb/R4jGqzRCKVSiRmtdEodHj9kYgJ8nJksqe1l8fj9bb2PHtjIkmLhcSMHrXUZrNJpRQvMZvVMzMzc3Oi9XAx/23B9BjSsp1PC7ZJzKO2IR7hagqfE4nWNQJIQJMuhIvFYriQpr9XhBJfwUWzSGBkCQTjI4+mAXy2rrBICTRPT0/XAy4U1hccRsSjceh6oVAof0LwIL66fid7f/8lVF8o82V8/2EZkoslWAWvsJqHaXZTFH54d/crl2EVHIgv1cvlhxR+swM7xM8vaoUFSgC+Ui+XZ4FPJad26KUzcabgdzzycvn09N6yy3Wj09FCQpAI1Ah2zO/9h5/+6nId6nSK5EFAkDlh7EALwFfwqd0Hl2tfoTAkT06vcjE2IeKt5kHw+fYNBmUydEoQPzQswqq3mp9SbPl810qlNqk5Jwji7DLEFPxlHnAYfs/n29JqxYYjn4/4eRTXsAnAo3odDJ+F4mOxWHlxkDhj7mCxYxuRMg/1MLw2RRApsV4L1RkWYYUS5JV6GF57u0YQ17QQiLMKq2WeqteKxfrsGhHdu0VH9CDAEDZXy+NAvRii1x9vRaNrsT+J+NX3EPMNmxtlnqoHXO904r9BiUZzMcaZsLhBKI1f4p0QmQw/vjxiO0JIQHwVLsNxJ7U0UzC5MasMrVvmaRxXydjPNCXgpXUr0wCuUuH1hc0qnq5Xqf4jIF6Gq6x0VE8KTZhVpdTj1mBwHuUzZH4+GLQWmCuH8mQTCFagg8PPu9uaqbR19w0MU5Z9kVzYzhcL6VCA+k8O55dIt7uJ+x4LBl/3dfbXXDQdnW0Nn8bskBUUN2SM2zUKPw4017+gxjldDQ0TXC53oqGLM44e/gUD6HvpxNRX3AAAAABJRU5ErkJggg==");
+}
+
+.flag.AS,
+.flag.ASM,
+.flag.as,
+.flag.asm {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.AD,
+.flag.AND,
+.flag.ad,
+.flag.and {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.AO,
+.flag.AGO,
+.flag.ao,
+.flag.ago {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABhlBMVEVHcEwAAAAAAACuDTUAAABbCRuyDjmqCy8AAACvDDUAAAAAAAAAAAAAAACsCjCqCS6zEDuzFT2tDDEAAAAAAAAAAAAAAACpCi0AAAAAAACsEzoAAAAAAAC1ET4DAwMBAQG2GEW3ED+lCCcAAAAAAADSDTvQDDjLCC3SDj3TDz/JCCrOCjPPCzbPCzXHByrRDTrKCCzUEEPNCTHWEUbMCS/NCTCzDDnMCC7EBifGBijUEEK3Dj+vCjOoBymgBSKrBiWZBR/kYhv/zADUD0HDCTC8DDgGBAAgGQCrCS6+Dj7BD0GnBSKwBibGnADVqAAXAATICza4CC0OAAJMPAAuJACdCCnFDDrOESv5tQXQFS3cRSL2qwgPCwDdrgD+yQD5wwF8YgCcewDLEEPODj1gAhPNEjMiAQjnbhfVKSg/MQBrBBmFZgBLAxI+Ag/VJS3tiBDYMyu7kwC2jgD3vQLOowDquACphQCOCCnfUh1eSwDVkQfSGy+PHxd6QwlqVABaRwCcJxprVQCkeHBNAAAAJHRSTlMAn2N3VwasWrCZcpTdRd3AaShLiHvvFIn6/RS8KrNRxz/x7SPGcTt8AAACaklEQVQ4y8WVVXPiUACFgxSn3q2v3oGyoSxLsRZNKGFxKO46SN3X7Z/vvREg0M7A056HZIZ838nhvgTD6CxJRXKJZFcil4sWl5fmsGcyJ12A163F3TcOh8PqsLJxOucX5NAbo7eW5W/Dbuy1BMLBULP5EeZI12pls34/dFCgty6SoojWJfMuV9jjcWMOR6h5gALxI59Pp9PtobQSWX/S+YmOi44nkjRoI1AIsTjiOXzvA4pGo9EnEsdMzBazTWscCIgf1nM4FPT7+ziOm0wWxA8Fmn8K1yMc8WbUbzR6GIE3h4eP8e+REDxg5/Dwa4K45HDI2xgeCdbgyJzBGv11ibzC8dH5iDd4vEjg8YMxRK14ydQPeUbgeN7REDheJO8KdP2QP6QF32Q90c33cFM3bxnUM/xhGAr+AT88mu8lMl805fJfCjYezwo8njmaUqkL1xAkoWXnMLydFoZzOBwv9CyE2WzuVYtsPcsjweln6hNJVyaTcSWPTXiBMNHjbTkyx+EMb3e3kZDInF7EAZeTzs/aH29EC8fnyCse727HAeb8fH4C+EmTsQCgOhftH9VvSYMBzbFHvKfndCnWAZOpV28C6P7rHr0xHo+PVGLgqfytRdMAlCtRauLRpFBPwUv/ARqNhxiYQvhabcD2wH2sfpemphEClWitcvsYjcUaATCNAMpUqtp4rP6uV1LTCegtZapPgVQsNa3AebdnswmgfHM2mwCoaH82Ycb/8D+FTZVsRSEUi8VCxYpgW7XxHL0hU0NhTfDyxdiH5p1aodxWbfLpNZkQca/Ez3+gdtTCVaVAJpMJlKviHebHf09hKJEwzCq8AAAAAElFTkSuQmCC");
+}
+
+.flag.AI,
+.flag.AIA,
+.flag.ai,
+.flag.aia {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACtVBMVEVHcEwEI14BIF0GK2MCG1IADzwBG1UIF1ABKWkCHFUAHlcAEUJIWX0ILmwAG1QBG1UBE0QAE0cBGlQAGVSvGDkAED8AE0cADz8AE0QDKmgLMHLW19kDKWcQNHADLWvHqbIADDkCJGEADDoADzgAFUkADzsAFEgAEUAAED4AE0UAFUbX0tLZ2dm8dIS7anwAIGcAJG0AH2YAHWEAF1QAIWkAGFYBJW4AGVgAImsAImoAG10AFVIAI2wAH2UBJ3AAHF8AHmQBKXIAHmP///8AFU8AHGAAGlsAG1wAGloAFU3QG0HPGT4AK3QAFEoAED8AE0fMFDbNFjkBI2cBGlcAF1EAEUIDMHgBIF3OFzsBJm8BI2KMxP8ADjkAEUUADzsVOnwBHlv+/vwDLm719vnJFDbszdbqws0AKGcCIl/ZSGbUN1XM5P2FmbvgboXqnazWP1z4+fvyxM721t0pTIgBHFgbRIYbMVMCJWn/v2v/3K3/lQhvg6rusr3spLL99vfyydH/5cISKFWxFjn/uFj/9OXXV2768PI0Slz54+e3wdbvvcdOYViWop3mhpq8GT2psqZJZ5z46ezt7/PtrbkfQXw2VIm2vKeXqMfTJksFOIDRlaX/79m9TGb/zIbJpq7++vL/2KGMq5mMn3+UwtpPYpZ8haxrfWGutY/nkqK8YXhCXpKYkbDQLUp4h4DTeIypt9DaTmrie5DgaIHcWnTdxcrdjp9hcHS0usR3kbi3mrO2o7q/xKTIy8/a4OucGEL9/PbzztZEZpxid6LJi57/4rp3hJr+nh//6Mj/0pf/rDWPsJ8dN11wh3KNwvXR1bvA3vvx8dYlL2WOJErR1+ScpGvL0eHTK00+UVv19uC5kaG3JknBqL/t4eSMl5SUn7K/xI7bt8Wgm7jHobb/x37/r0O8LEnHrbUXkXiEAAAAxnRSTlMAVJ4mc7CIBf5YYKATaa7aVmPH7bR7vCpJuPj9SZR7qT/bFmjb8fqTk+KVP66V4v////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////6ekP/tAAAEUElEQVQ4y3XV91caWRQH8Gc/RtNN3yS7m2wvKiOIKCo+NBQREUTUAAI2XLvYe411Y429pGx6T056sulle8/2vvt37LtvZizZk/sDHODzvefOe48ZhKB8PNy2bd0eELDdfeu25S94+KDnlI/vGvLqv3zTZrvdbp1pafk3B8r+4N2Ad/6f83dzX8sw6K23t9yoHTYajeXZKlUWeTfevffP1MyNNFIvbXL39lzm6+a7zNN7xUqXXqgXGtCPUxM/2xyj5eNc4M6fzqI6W3G+TFSZlJabQiqDlMvlUkgE0kCFAf1w2jl2/jYuzi/LVqmzrH8UjBU22EbL4+PjZaQiRRGVSbTCwkICA4NDDcheduWnc2MXGvFgo0pd+ruzoAN3lXFcFhmZmioSBQVFiFkv1cuR3Tg+fmWgZAA3dKtNJQMNGDu6Rmv7yymPJFwUFEF8CPhgqZAEjp9xlNYXOL9TqdVqk0mtymsvOFpX2kE5137eRwuV6PLFviIVKTX1JpMOKjExk+W0vRjGoT6GBKbeX8R1HCcBltP2rJcSL2CUqAUCeef7hkrqTbqhxu6ho+cuFKkzM1keUUnaJ0H7j8ELGA0JnC3sxLi073ajTlfqwHWFg98O4s5uysXibw4/7fntSE/PgSPgYw0adOzizfz84pK8if5sXWJW2c2GgqITMuvIXW6a67bZRxjbbHgf+CgS+HXE2O+oy7tqtUIg1XgGF568aiXd2cW5jvF069z9SbwXvIQEcux3iuuLThjjrdmJiVmi1NTa4pKT98rE3MXuw7YnT+aqMAkQL5FrUc6Io9D5AdlZNkDq+GBn3ulDYXTtSaCtZu5x0yzuBb9LqUXDW+rPgpdZr926dS0IrnX46472drqWgcF771f/3faopgr/Aj6OBC5POGvpyYFzEMQuzeb8rmOUBwf3tj2exrNVNdWnwCuUZjTz1aH4JcdMzA0DWyuNfoBb26qrJ2uaLoEP1ZjRlzl8e+6YzXNyFKJjLuHWhzV/NVV9+BR8qCYZpeXwfuGYsZxsbYxgj236YWtTle37CvBCCCTxfqE9y8ELcr+YtOHZavyZCzwEcpN4z7dfxAWxsb3vQX1+inpGCwF2ebg/FXetLCd7FbXnYDqpgxXUM9oElJIGnv9T8dfKcuIlkk+I//Qw68PNEOD9oml4DpvVvD89/YBLCJ4LcOMvnYbjZPHjKj7aX8F5CGQIFvtFw1NOFl8R2tzM+3CzBWXk8veQpdOwHBYfxhdSHi5PtiBXysI9Yck0lCtYzns2MO+fHV6x0J7zSghIqJcKosDExe2SLAw/3554A3hlwm6kzwiRRikYgwE+k9JoNEq5gRGGLuHh5Ge50pywmwT0esbArFwB9/VVvqs9vf3W73xVCwVJOelMp1FqzAkWi8XrRSRk1rq7+T/zoPHY6Pnm+je0ybQSaFksr3jteJn8uMb3+Q+oDRtXr3vNz8vLy+/1das2sF/+B4rz+dl48l2oAAAAAElFTkSuQmCC");
+}
+
+.flag.AG,
+.flag.ATG,
+.flag.ag,
+.flag.atg {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACNFBMVEVHcEwCAgICAgKXChcDAwMCAgIBAQEGBQBSCBadDRqOBxIGBgYBAQEAAAADAwORCBSOCBUDAwMBAQGfCxmfDBwBAQGgDBuNBxMHBweOBhEAAACQBxMCAgKiDRwICAijDRylDR2lDh2LBxGbCxiNBxKbDBiTCBOPCBOhN0BGBg2fMDqXCReWChcAAAD////PECbIDiDNECTLDyLTFzDDDBzEDB3HDR/FDR7CCxrPEijRFS0Accb91BoAcsfQEym/ChjJDiHUGTP90hcAdMgAeMnAChoAasHVHDcAbMIAb8SeCxkCAQCMBxC8ChiZChaVCRWQCBMAdsi8Fi2kCRevDBylDBzEDR7BGzWrECGhCxoAbcO0GC+vFCjXHjq4EiapCxq9DR+0DR6eCBT1zhu4GzQYFAEkHgOrkBHQFCvsrrSsCRc8MgXDDyIBaKrNIjMzKwSZgRCFcA3FphTsxhh9ag1KPwh+tuHJGS8BNV3cYW4debSFEyVFjpf77/AOAQLp8PZuXQvTsRW2mhRXndYoAwgtic+hyenF3fFfCRTxvcNnqNs3WJsMZLb65+lvPm8pXKTQKzwiAgXTR1RyECBYj4LHITdzCBOTq2J2Yw1jVAqdEyL69/dRRAgOCwG6lZj66+1CCBHedH5cTINkHjqZSW5xLlCMKE5KmtYAM1y2Hz2pHDn119qhLFESeslxnnguW2PVxDW4t0dDBQs1h57bxS20uExim4Z2onjgfodWSQrIY2xIBQy1GxdAAAAALXRSTlMAdJKOVmOu/gVWryjdnklFKLOCYHO8nhQUZu97o60/2u3HtLzx26Cib8aVvOJ9YCM4AAADIElEQVQ4y3XV5VtaYRgG8INigDrbGeuuo4CtqMgUgxCEM0WniEzAmIEYc852s3XqpZe57u765/YmHlDvD3x4+d0PDy9wwTAwwSFCgd+xwMjAML+ogCMhwcwhCRZeBo/xAZGJrFfUobF+gn29eGFYolrPnAgMYg9JUGhsWJQgQCgUBgj8AkPV4Ogfx6yoD8YHHg+ZOebW3X1PqXtYttV+UGHNBApV3g24YOcOu7ENSr6jHipMZlCo82rsjKjZri62083aO31foEKGC3Ur/NM/jqBtm93lULtGwHb8G/kqo4WSKX5jbLRVPmYbdctb2Y4uXmHICgrluFDymBw2uXuC7LZupVyutMntnd38t74mQ4XaKuBL+iZoY6zb4ZKjgN4Gz08oZDIFKpTAVA7RO3XLaZSOpo7tkSZyzgEvoYXCwsJNfFWAOAhHcRDPTkEvsYBCJfKFqS9ug3wb/Plr/cdnG9ZKV6vnI2iDPsOigwXkU1Nni0gM1w0Dgx/Xv3xXjnbRD8+MPC4Qn1o1gLkBFAx5eXm5uWUDg6urn/r7X/c/UyDvKUCfk/OecBDIQQGkpqa0tHSxDftMULhZSX1OztMiX468au4t8aRAvbNv0eAzHY5XqRYUkAOfbqwABeKdTmf+mzLf6YCrZiXUp9EC8vn52dnPe2deTX7YGw+4aq7W42nB41NSppNBhh/c7x2fzFUhr3qZ4fGoUM/3KUvzyZ7A3sz4As9noQL0hEul0jvJ3pnG13MD+SyjHhV4Xipr9vLz7XxfbNYz1fXUS3HaH/H81jLfZxU3woKXBz8S/lJPMKe+ABV8vIy3VDPgeDz2pEDXx1ymaL9H/Ls+/njgCxo1oODtFeB7SZa6t8QfD70WFqz0eoiXgC8CXmqZjN/ztAB5W1sDSlomuBe01O90D6eeFBQNVgtnBinHMVpMf4e3mvE2eDz2LTqNhrFUmziOO3ncPyZaJBJFx/jHnT2v0+l2dzfLjS0mq1YLtVZrbTHq9BqNOJzhuFNxoqM+fzQR4ZeuXL1WgaMnOXcmAbrTosP/oCLCE5L8L4jF4ov+SaIIfPgfe/+iZZeY62YAAAAASUVORK5CYII=");
+}
+
+.flag.AR,
+.flag.ARG,
+.flag.ar,
+.flag.arg {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB8lBMVEVHcExEcJ1dhq1tl7xtl71rlrx3n8Jlj7ZXgKhTfqlvmr5PfKZRfqlzm79IdJ9JdaFkkLhcirNdi7Jrlrx5osRdi7NdirNPe6Zfi694nMB0ncBFcZ5Fb5xHcp9Sf6pqlbpbiLFSfqlei7RdirNvmLxDbpxNeaX///90rN9xqt5ootpmoNl6sOF3ruCHueVup91jntiAtOODtuSFuORhnNd1reB4r+FdmNV+s+KBteNwqd5rpdxvqN2Ju+V7seFqo9tfmdZsptx9suJCbpx8suJaltRgmtd2reCix+pjkLhpmcRHc6BUgax1nsJYk9L7+Pbn0biz0e1zq9/Z6PZXhK94ocRxnMHF3PJmkrlgjbbT09P9/v56ps1ej71vmb77/P1Kd6XhwZXR4/S/2PBxptZah7F+qc5PfKhontFlm83h4eHz+PxejLVhk8DW1tZeibGDtOBUiL3Y2NhKe6/blQ2oyup2qdaBsNrN4fPHx8dZj8b17eblzKzSoWDUjxVxo9CexOh4rNvr8/qUveXi4uK51e/h7fjCwsLZ2dnFxcVQgrX8+/pPf7Hw5NjjxZzp1sLYr3fVqG1elc7GjD+Wwefj4+PMl1XEgynLjCzsqAzJ1N1wqd2RrcaOsM23wsvp2MeLqcaoucqzu8JimtPloQ3ctX7+PW4gAAAAJ3RSTlMAsBSPbf6wVgVaoXSERUWUYK7avPacx7wjKntmKqGf2/3b7e3i8eKJbAKsAAAC+0lEQVQ4y42VZ1MaURSGFyGgYu81PUEQQYyYQgtgDGABlCJBVGowoEBCC2AvMWLX6Jhe/2fu3SYLOOP7gQ97n+flDHMPiyAwpa2sNno5k8ksp7cxKltLkStSymoCnyUMZsMojAVmGuZ+PZ1R2ZLnlbAa74ZCSCWzwWye8iXC4UcgfeFEIj5ltkzfgLlVX05n1LBYrBoGvbbOFgw6bF7EbPYlZDKZQCBABZCnICL5anzZMj0Jo4Wx2bQ6v4c7DwSfjORJXCR6AqJSyfmrcY9nednjiXeJu8a5pEDhSXxwUC7n8/kDAz09PWKUfzZvQgVyHKz+EpdDHPAvxV0oL3WYkFGfjFpPwbF6khdCYYrgyWlycSovdIxAIYdH6/PxS16JCgRP1ufiWD3BS4BgAUKfYMVodU3AJK2bsdO+gUscq8d57s/fQDh1b9k5lNgDW8lNjUwlFhP1gFeqNMmZ7ffI1895NIw+fbCXhZ7LajTGVjRGo3UiAA+2PyILn4rwBqdz35AuPLhKMDiPThb/GfSFJ2+BsFHwNJs5PP8bPXEeFBVebRSZ6CgajS4tGrIFRwsfigqZxaWLCyDoiwpvCr/4wHmyFD0/zGSvK+gzh2dnR84fnOsKnLTBub9f7FciBPuay23UwBg3rRNrMxz73l66CD/zKwSEgFUjwpcKuwdfuOH1mBt6lASSK4rdYeT7NxWfWCrsmsF7JlQqJQppeF1jdLtdLpfVHVtf7R96/hgIkzqSx6+ZFMUlChgej9cN0tvb3w94XMhZWi6KCwtwgoeCVpez5MQ0EhzP51+8UwMB+w8Zx+uL4IAfAvMDHhco9dRpcusBPwYEm47Ycaw+H6fwmIDyUoXfPwfj7+ZRp4HjEDwueObmg16vCWQEjSniSB3/wXG8HuUjs2o1EtQ6Qt7bdbUV7DIYdsXN5juv0ezuRFKp42OUHktFdgCtplUhwdC9RlZJ3oumpYpd3fxwFs0wFrX6Aa0dck2sq19QHVXtFdWdNBqts5pd1oE9/A9MRIcduMWk4gAAAABJRU5ErkJggg==");
+}
+
+.flag.AM,
+.flag.ARM,
+.flag.am,
+.flag.arm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB7FBMVEVHcEy7ARm4ARanQgqvbAC5AhizPw60AxS7fQG4dwC4dwC8BB27AhiybwC7BiC5egC8AhuxbwC3dgC0ARK+fwC0ARK3ARW6Ahi/Ax24eAC0dQCzbwDAggDAggC6egCvAA6vAQ7AAR3DhQDDhwGqZQC6ARivawC3dQDaABIAOKTdABjfAB7bABTeABoAMqAALprcABYAK5UAOqXXABDxoQAAKZPvlwAAL5zhACDukgAALZgAPKfvmgDypwDxoADZABHzrAAANKHypQDeABzulQDxpADyqAC8ABgANqPwnAAAJ5AAMZ4AQKkAMJ3xowDzqgDAABvwngDwmwC3ABEAPqjKABzvlgC7AA0AQ6vsjwCybQAAP6i/fwADOZfHiwCvaQC1cgDPABOyAA4ANaIANYzDhAAAHm7FegDongMAOJLHABXUkwCtAAyjgjZhWVh0F1NGTGjglwAAInqoAAy7egDVhgCKckSHEULQABrVAB7KiQAAJH4AIHPaABzjlADBdADdjANUJXBdHWQiQoixDDOuhCxxH2EwLIBva1mEZ0DWlwDKfgBCK30kLYxDLX5aX2aVEkMVLJDKihY5SmxFIG4LK4eRED+JGlNDLX/TlROgcy44InU3NIoWRZjACjOZeytwDjgbHGOLXhdBP062hqBoAAAAKHRSTlMArqAHsHcUWFaY/0VnayhilCh3iYjbvLezvEmhrdrb7cbx7cc/4vHiLqkOxwAAAtxJREFUOMt11VdTGlEYh/EFQUAxKpaxpFdRrIgNiVEIWIjBACoqQSFERAKY0CP2Gh276T1fNO+es7vsLvhccMH8/u+c4QaCQF2TiEuEgiqBsEQsL7yWR1xRnuQ2fObLq+5YLBaTxcT0oLIEdjydLxHeCgSIQgFgeyKZTjdA+nQ6mbD7TSYrWUWlsEwsl0gkcnGZoMLtDljdAQJ0sqELasDp9fpGKJ2Y81vwzI2zTvjVfRMwsHdl88bGelSLSj2HU/fV9UHMgOF6Fq9vIVNBdRDp1fSAe57PVRQnB+/QgPZZnO+pQY7zXM54tZUcsH0Wz3i1Gg9M9qzn5OLYM4Pk1qed9c9HR4eH6xuhky27KsM53v/7D2Hy/9z5bp40m83TNptWq23TtrUpnbvrOydbCYYjb4pfaN4vE/HdSQj4NOKQUqkcHPR4PP1Np7sXG6FQ/GM8FNr4dtrT09oKgwUn9jbKK0nvIX1/fxM0MvKss7OzubmZ9PSA8jQf5HC21+AB6ZnzbJ45T3nN29fEKyfjc3CepwbTNvZ57nWKU34YDVj+iusU1wzjAe3xeT7neDRYoJ/P/2lY52k/vIwGcH/zeC/2hiy2dxzedPLOM/7y318Y/Njb9j1HGY063QDU/mU7Fjzf7OHyy/D+2sEscf7L+ARC3Ij4wNPR0Xbose9sO7YfDIbD4WBw/+uZwTBumJ8iXn5AOnMePOLQ2NDYEPSit7e3o6PDYDB04wHtWecRH8Oc5fGA7enXZHHs0WAReZ2O9xrEGT+Offe8Cw0453O8hvEOPGB8jtfQz8HesUoOkB/1+ZaglRXfEJ/T58FTA9/SYso7QxWJzHhT0bUVA8WZ8+Cjqy4YpFJer/fG9XJFsVQqLVaUy6pvRiKRgoLI/EEUho5u8A7HWvRgdcrlEt0nvN67Mmk+77+jtKZIVv2oYJZqisz1UFREunvSq/+gSmuKFbJakUhUK1NIS/GX/wEgnavTrpzuFAAAAABJRU5ErkJggg==");
+}
+
+.flag.AW,
+.flag.ABW,
+.flag.aw,
+.flag.abw {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.AU,
+.flag.AUS,
+.flag.au,
+.flag.aus {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.AT,
+.flag.AUT,
+.flag.at,
+.flag.aut {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABj1BMVEVHcEzKNEOyGSS+Ii+7HyvMOEivKSm9JDC6KDTHMD7ILz+xFyOxFyGsFB65HSjBJDHJN0SuFR+uFiC/Ii7GLTvHLjy6JDWxIyu9Ii+/IC2/IC28Gya4Ii/NOUmqEx2xGSP////qIC7uKTntJzfuKzvpHivsJTTrJDLoGyjrIjDuLT3tJzbvMULvM0PwOUrwO0zsJjXuLz/vNkfvNUXwN0jxPU7EJjS6HCjxP1C+HivU1NTBIi/MNkXYOkri4uK/FiCtFB6xFyHJMUCqExz6w8jzcXvxQVLOOUnY2NjmGSXbIjHHLDq2GCP3oKf1iZLhKzrQJTPGIS/LHiv+/Pz5trzNIS7CwsLaHCjxYm397u/RKTjtP0zwPE3FGST1jpbzdoD3paz4vMD70NT71djybXjxVmT2lZ33qbDXMUHkO0vdM0L+9/jRY23pOkvFxcXRGCPhGib4sLb83eD96OrzgorgIjHkL0DqLz7RLj3pKznmJjbjIC7Hx8fuRVHlJTTfub3Op6vqNUXEqauyOkLPlZm9Drs2AAAAIHRSTlMAmnaInrAGVyh2Y2O6rNvaRUWUrrzfFhJRx+32NfHx4uKedz4AAAJsSURBVDjLzdVXVxpBGAbgobk0DWD3nCS6FAlBWCCUdSUWmo0NzYCh6kER0WA3aqrJD8/MluywgYvkyveCC3je73ycM7MLABctoVMoNBqNQqHTm7RDYECGiGn4OaHXPF9KLaGsCRkfU+hMWpmenFLPMDQwaVKpVDTaPi1XKhWv5/S0fXx89GmLy/iYWqXTEwSh16lGnzEMk83SAOp2MhmJBIPBitfr8XjewPj9P264WmgrJITJZjbvrTuwEE3yHs3nvd/vDwQCCzBu3+3NOy53JElarWJB8r3c7fbBuFwum433FF/gPFqH30bibpEL/jW1EwZLUd5j4zEu81SOK+C+H7dxHHkHV+A9tg3GpfFWCvp5voD53v8qjJc8KqxFoY+U2HQhjnKertUPKn9xwd+ePIK1o4PD/fxsT/K7++eHzYMASZJ/1qcc5UShs/4ZnHyTaax3uV9o1Nh6M8HWGvFL9NX6R7D4dvYf8hQL759cYfF/C/mLQppNoLCHrfhFZ5Dv/PoJC7utpke6VOgckOXSVTp+KTsCu4XEXXUVfD9Z8OGnmDs3lAOetPm7L6U6m27s7e210lelst1udy6vgNAH0cs4zCuUOS52FCdfwD2FeYyLXijgl7CXyz1fwC9Vv20w71yOgVBGeiZwt6o/5/0GLDAZyfdZHh/v3BALaJ2v15so1w9zg8ZDLxTuN3eyNE2HxdDVXLH4IHHRn3WXY7CQRXhkVKU0wOe6QalSG0fC2yjhaq5bLJ7xttitbq/EYsNmwDAz6qlJ2YtGa1ZajC9XxaygxF4YDRPwx2li8AtKazYoLephGIuSEF5IvwEIiyeFuAjO3wAAAABJRU5ErkJggg==");
+}
+
+.flag.AZ,
+.flag.AZE,
+.flag.az,
+.flag.aze {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACIlBMVEVHcEwCocEnbiECnLwDm7sgYxsmbCACpcMWgHEtdCUrciQXc1UBnb4sdCQEpcMAoMAjZh4kZh0kaB4sdSUBmrwBmrsJpsUobiEGqMYCp8QDpsUiZR0veSgveCcxfCkpcCIBqcYgYRkAlrgBlLcCocDsJDMAwOfrIjAAvOYAw+jqIC4AueQwiiftJjYyjCk4lC7uLT7tKDgAu+UAwugAxOk9mjM2ki3uLDwAt+M8mTIAvuY5ljAAvebuKjouhybvMkLvNETvMEFDnzk0jis1kCwthSVAnTY+nDQAxuruLz/vNkY7lzEAtOIrgyMqgCImcCAAmrwAosLwN0gAqcckax3GGyciZxwAstgApsQrdyM1gSseYBkAstLuO0ogYhoAjrIAnsAwfigArdAAlbgApcmhTy81iiwueSbILz7//v4Am8N6djerXHQqcyNwc5I5izDTLTwAut7zcXuyFyK2GiWyQCyIZjSPaoVTi6w9jjLVMEA4hDAAtd3GKzn70dT4srj+9/iWaoRjeS9XgKJQgS1qdDIkpsz0fojmJzX86OoOsNrwUl/QJzUAwOOJWiyxT0+MYXyEc4+bYDivWT3SPDo1ocSpTWNxYim8RDRxf5zWM0LfIivaOEuhU2ztM0LuSFX97u/xXGjtLDwAsuFPmDu6SF/XMDN3fzy5WW+iQDbhOkFDf5n2lZ36yMzvQFC+Z3v1mKD83eCONiJBVR5MaYaZLT11padHAAAAJXRSTlMAY59yVrBjtAVWchPdwEWmRSiUiImeHN8qe5R7rdrt+vHx7caV+tfXKwAAAytJREFUOMt91VdTWkEchvGDgoi91/QEFLAAFmIERLGBCiIKgkAEREMSUUhw1BjBscvo2EssGTG91++X3T0H5ADmveCC+T3/Wb0Bw+ASC6iFRel0Oj29qJCSVpCIXbFE6l3wmUeh39L0o6n71Wgp9HvxaXkRXTI1947NhqXRNRqNVedaX2ezq9msdZdLZ7QOqQfhUui5OfEUKpVKic9JT7HZbIPdNkyjMbrY7dVobDa7Co7FYglmdDDrDs02OGSd4aofYhpje3vIBzmxByKBa0aHNsMVcLnc+4/xINyHcTCRSFRaKkCDnghino/mwONBrPMEFxE86DtB0G+M9iEe6UPB//mlR4E12sfk0F/gAbtKsDe5NfcUbm7raHJvDfAY5zsv1v78xdTWpaMPph6FQiGVShsaGhob5XL5yfc55+TSGsEJvzR/utL3HPu8b+rp6SFx+bdZ3+wXuThw8vZ00+mcn5x3Ojf3p5nMkhIQPHoV7iHnBb6u+gNSv1jMhytHYzKhDwaER+d5PJ7fsSwG4/NIHHoOHkBPnAdcKFx2KABXnLtNkR4F0yQvFMIAPiaw6juP9Jy+ZzAIe45QCN7idpyBt7h9Di8/yAmPgvGgR+fh200ONwgCP33+MI48DF6OSy+fI8b/M97ZQHl5IOB+zYzweBDl+aZV7xnTxORfcsITAfC7O9sTT+Amtu2Huysm7+wPU9R5Duf4128QfNp5/6YJrLW1Daympq6uY2Fxwn74boV8/thzYFBpsY+LTU3hHHqw+vrKyinQbdjtHo/Hbt84WCgrk0hA8GKqKeI81ICD1dY2g8lkFRUVQAMvUZnxoBV5eJ7EYSBDHgTQtxBB0MPz9YTHOX4+5LtgMHbpyeebw8/jvqvXjBnGyOejefA88F29AzAInie/JoyHvBIFyHdUNsuGwWSyZtLjyR4Fw20dYwbLCJherx+F049YLBISJ7xKOwACg8FiGbl+LTspgcFgJCRlx6Xm31TBjer1SmVLC/prlUq9SmseMNMyMIvlRhwjOeKHJjMjKSs1vxdOi2YGu01LgC6VcfUPVGZGQnFWHI1Gi8sqZmTiX/4DPqGmKHydAW4AAAAASUVORK5CYII=");
+}
+
+.flag.BS,
+.flag.BHS,
+.flag.bs,
+.flag.bhs {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABrVBMVEVHcEwAR1UBW2oEYG0BXW0CeIcCdIMDZHMIV2UAVGQDYW4Ba3oBa3oAbHwBanoAYnIDd4YAY3MATVwAS1oAV2cAX3ABbHwAe4oAV2cASFYDX24ASFcAX28AVGMIfYoBX28ARVQAUF8AT14BLDMAAAAAdYoAc4cAdIj/xSn/wif/vyQAgZQAaHwAhpgAgJP/wSYAcIQAaX4AX3QAeI0AboMAbID/xir/wygAiJoAfI8AYnUAXnEAZnoAfZAAd4sAfpIAY3cAcYYAZHkAeo7/vCEAhJb/vSP/yC3/xysAWWoAbn4ARFMATFv/xyz/yjIAi50AVmYAdYUASFj/yS8AZ3cAW28AUGAAcoEAeYgAXW0FZHMAU2MADQ+UnUp1nF/5xCwANDsKCQTXnhvCjxnZox7GlBtTkW3lujCypD1ykVZ+nlu6rUGTplZckGQAISYAGyDyuCVFhmnHt0OerVZ9YhcldW9NPQ0fe3lhiFgLcX2GhzysqkZQfFalhyOUdh2zjyUSgoosh301jX1jThMMfYjsxDicnEQAJizXuDg1KgnZqiaXdxoAJSurnjsoWUvihe29AAAAJHRSTlMAsEcUc7CaVgVbKoVi/t39cJ2glIiuvPbbZiN77bw/xvG84sfM8pZDAAACwklEQVQ4y3XV51/aQADG8YBABEdx1tV9gAMRELQkKqBFhWALWpGYANqBe+/Vvdff3LvLJSQhPi98Id/ffYKeQlFotQ7aabNZrVabra7e7Kilblkt/QB+rXFa7+bzWbwlaY3tNqe5S9fV0E09LE/dRzriSww+RRtMDPgiec9SKpVqaGhobG+qs9TTNF1vqWtrvMOyTJCnxJXU4As8HMAl0GCWXUp5X0pbZuC8YbcrxlMAgJUs8QpPDKD5fNHxqQmPxw3nGh6ecLk8TBIFMBnXeJlHo+NwkcjU1LDk3XIAxDT2Oh7FHPsJ5FUBALt5lVe4crzk48FKAETBiGu9n81UAvhOotLT6Lnk3dDrArCX17xXyFXHIx/SBUC8PNoulj99UHHlcZC/uL7RBmD1/XO0r4dHm+WPXwgn/mznav/NW10AwDsULKDNlNYOr7aLxZ3yTnGzsLXWNzTUbxCA4wXkZ/BmZ0dGRnp7e0dH+yAf6jcMwOeS5OfmCK944wCcliSuHK/4aeMAHKs4Pl72069eGwSrNxquHA/9M6PgdK2ay94gWP1d4crTKL46+PlrTsVVx0u+KlgpFze3t36UZK73+5f/NEGa3IPs2cEG/NWWtHz/7/myMK8KRBZfM3Rv4v64PxS6ODk43ygU1tfXvxU2rk9iMSaoDkRG4vheQh4KheECcF7v2NjkJPRMMFcJ9sLk1uN7THiYcNmrgt04ucXk+ApXezbHkeB73HXr0xAfhJ5Nk+CPWzley9XHQ79Igl23/EdY/TQaT4I9P/yfEAoH0OveQDWveCkQA4EYyyfRMnjJ5CLLTEpcPh57YZ6DgSjwPN/R1mqx22m73dLafK9DEHJwQibJs2wwiH46i8lMLs1xnMlMAa6nia7RfdB0mS0tjx7n0njzeBz30NSJ3BP69g8oh7mzu6XZZDI1t3TbHdI3/wN70Fy/Z/oMpQAAAABJRU5ErkJggg==");
+}
+
+.flag.BH,
+.flag.BHR,
+.flag.bh,
+.flag.bhr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABU1BMVEVHcEyhLUXMzMycER+jECCoEiWhDh7X19eNBxHLy8uOBxKSCBSvFiqmDyCtEyfPz8/Z2dmbDBuUCBWsEiXR0dGhDRzMzMyTBxvR0dGZChexGi+3KT3Kysrb29uvXGKbDBinDh6mDh6KBBDNzc3b29uWChexGC3W1tbNpqz////NECTJDiHMDyPOECXIDiDQEijHDR/KDyLDCxvRFSzEDB3QEyrFDR7BCxrPESfSFi7TGDHU1NSeChe+CRi/ChmaCRarECKtCxqQCBP+/f2VCRXi4uLUGTPk5OTZ2dnf39+oDBvQ0NCkCRb69/ezDBywFCjFEifcTmDUIjnsoaujDBv66uyzGi/wtb3ifYjhYXPr6+vPHjP31tnKFCr13uDl5eXAFi26Chn0yc/hb3zy8vK4FSvkhpKSCRTVMkTplJ7QMUHw8PDXOkyoOUS7jpPGGTLEd4Jy2bW1AAAAKXRSTlMABVgnWHRj/v79sJmPnrifsEt+227qFBSCvEmn2j9W2+3GP8cr4uKjssDdA9cAAAJISURBVDjLddVXd9owGAZgsXcYycloOtJdM3IClJgVwChQYjApq2waQktC6Pr/V5XEsCSb94IL/LyfJeGDASB5Zzz2fvR9Oj11W6zPTAawIwbza/R5eODLVGwkmX/fSD7suS2a3pHfcya3wQufrVIpDZaKAqEAYWc+/Ht39/OWZH/Pg+5oNputFvfefkGWpUIbIL2EApVOv4ySWtcK20i3YihYR4XvAhOl1WiW0ySpVCo+Hn9dJZKMRIJhTeG+3yyrHBXi8QRKEgV5TaHbKOvxBOFofjgssYVJb72aDed9tJ4Fti/MjmdNHb7x4ajEFwRh1Ge4unzs9QqC0ErzfOtDuFBidKfVSDGc8edcAaJT3cWJ5wuLtGbxrL+Q8yBTYnesGU97TQEK940dnHhNgfzcv5Lqajh/qVeYzOMsp/ylfM0V0LOa0OEhzJH/XGMLo9kwqeGb8djzhe6jPt/6GFeAsPsYVPl6NYSvPF/AlVZT5er4tY/VHkCVP6VOb7zl9HjsRZ3CaP7Ec9WLtSKo3tCn2m0EKU75GPFili0shvReufHY59gC7PSG2tXQPpe1M3eAgtIbaser/oorkEdpRnNqPPZ6BQEuojRn/FV+W4DKj+VgMFhOek8X5xxX/bqgDG4yDpI/v7MobVmqT0WGi5hPpbwdFTK2qsPx3Ht8YDS+RP/rAc/JqzxJtiah4jSH9bQu1ZC2O9+AatXhNR6ilwtQ3x8Gk9/iOnl/TfKAUiwWsbYeoYtvjbtfUCa/NeByOZ1OlytgNq2+/A8bmEOFQ32mPQAAAABJRU5ErkJggg==");
+}
+
+.flag.BD,
+.flag.BGD,
+.flag.bd,
+.flag.bgd {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABOFBMVEVHcEwCZU8AVT8ARjIDVkQDYUoASzYBTjkBX0gCV0MEV0EBXEYAPisKTzYAWUICb1kASTMCalMAQS4AQi4AVT8AcVsAVT4BbFYASDMBYkwAOigDcVwEbVcAPCkBZ1AAZEgAaU0AZkoAa0/1K0IAWT8AX0QAYUYAXUMAXEH0Jz0AdlsAbVH0KD8Ab1MAUzsAdFoAcVUAeV4AWkH1LUQAc1cAfWPzJTsAe2D1LkYAVDsAaEwAVj0AeF0AWD4AUDgATDYAY0v2NEsAZ00AgGYAQCzzJDn1MEf1MkkASDMARDAAPCkAXkcAcVoAUjgAa1QAaFEAbVbvJzzONUTjMURpWVNDTkCtOUInWUZ2SUbwMEeVTlHXO0w6Y1QoY0+8MDsaX0hGYlXpJzuWOj1bUEd8VVMrVEGfQEZlS0SBgwAuAAAAH3RSTlMAdoh3KFamVmJFFMKwB52uvJRplNr27aLf2/q0svHiUBvxCwAAAuBJREFUOMt11dd24jAUBVDRIZBepwbTnFCMMSQBDIZxgFAcOgTSy5T//4ORrmTZMGvuA0/7nHWXLGyEYNwex+7x9tft412HP+DeRP+ZTV8Q/274vxwaQzx9PIP+AM/34K4j4F7TG56tI7WEAtuHhpGt5C7IXF3lKllj2B/odTKfgltOh9/j8fgdTu+BUlVjVQlljcrFNRnwOJHLVSrJZFYeklSPjCiKiqKI8YRQViRkVEx+YXEcwFMoFORMKhLW9bIejkTC4bLAA2wf4m28IMtyJpNJpVIR8LoQ05CR5Ouw+sfpz+kj49yHSb8gVGnA9IRPH36QeZjKq/XgT1UNDbPX5jrE3wO/wTN+yvzjaYD7pM23WjeTR8bJ+tSfqjU0NKiHw3nlvNUqFidPvF6nPlGqob5BPZzN2MaLxfw4suYTEglY/hWWZ7yYj0YXwMk61MdxYDCknpz8vVWfz2Mfneisnvm4RgLcFx4sHoVJf5TNdcCLWpsETC8vzeVNn55b9cRDoA8eHuxyjafTE14P/gwH9D73meUaT6dHL3wd4pUaBGAdcg8mcDQWPz8/vzPrwSu1DqoPuJfnrD7NPQnYfIwGmE+lFmv88nL0Qjnz1TYO6LA+XLOnpX0b7JtjXg9epQHm8TX4vcLxvFv1xKvtBurpdB24li9vK/yyOVv1JRIQZNuf6sNcnvpnax3wEKjbvC4sbPXNt1+Ys3rwUgcCK7f+z8jkzbcZq+f+FgfEuvlOYLf4bj6ifjxj9Za/7XSRmODvEPPe3C3mz8/vM/GM1VtewwElsfKnIs+VHeUqBw+BnvlOsK4lP5t1rzVwIE79aSKOzZkomvUWJ+tQXyMBMSz0FFWSNDI1GE0qqTHKWb0EvN3odlFViZWk0oHX6fL7fD6/y+ndOam1YXBSkyTiCe5g/TkUQKp6tOXbWPt2uAN7+zsn7Q6ZBp1u91toj7ig7/8fKJxz7XtDoZB33+VjH6S/Lqw5lme8JvMAAAAASUVORK5CYII=");
+}
+
+.flag.BB,
+.flag.BRB,
+.flag.bb,
+.flag.brb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABp1BMVEVHcEwHLHAAGFvKnyMAEk0CKHACG14CI2sBJGwjNUMHF0+9jxgAH2YEKGgGJGoAI2MBHWYAEEYDJ2XTqirTqSoCNoDEkxjInSHQqi8BMXwDM3zDly0AE0/MniLKpCoAHGLTqSkBIWrFlBgDN4EBNoAAHmcAHWXFlBgAEkvUrC3VqjHCkBfCjxe8jBgAJX8AJH0AI3oAIXX/zC8AKoQAMIkAKIEAHW4AHnD/wyIAG2kALocAN44AHGwAM4z/yisALIUAGWcAJ4D/wCAAOpH/ySj/yy0AGGT/vR0AGWAANY3/xyUAH2oAOJAAKYIAIHMAIngAI3n/xSP/vx//wSH/zTMAInf0wCYAM38AE1H0wywAHnIAHGUAL3sANoUAMooAKHUAI24APZQAG2vzuiIAFVYAF1sBAQD1xzS/khrXrSn/wCEUNHgzKAfGlRgAEEkAEkzTqSkVOX8AKHsTLnENCgEWQIXxtB0lHAXkqRrTnhmbeRd/ZBOxiRnktyxnUQ8oHwXtwTPqtiE+MAnuvSfLoiRXRA13XhL6xSgAOY37yC/6ux4aFAQPI1h3cNfuAAAALnRSTlMAj5hJsHVTWGIEcXuuPxYSxyArvJqumiN2orAIoWWG2tvavLTx7e3b8eIqvOIqLldzGgAAA0BJREFUOMt11U9vG0UYx/HvrGdnvfHa2cZu3fpf7Up1IaUHhOBQkFBFFVXiNfCyeBHcuHGhEohIpAJBQUpcFBO1QcFu4s3SZB3HjuPhMLOxjcreVvrsb5/ZeZ5ZAYDvD2fTm1MX3S+7f997c8DbL3/mSyhMquIDwAVYdcfAd4dCHpVeL+vV0bT2ESKffTJBcZ/NET7xw1zv1iUDPICvT8VKL6NBXE5z19cJ/yEUX8D9P2Af8Il5eBIB8OHz9QkDj1IXgCNgMNG6FkqQxvsQz9//1Z3f9qD4eLQdvA+s8SsjBCAnCutjKFi+B3tAkW9Ls5PvqfQJiBAIIsmSTywHKAJjgEqfIAKB4HhVzv3beQXmvvkaaXwa3+I/6fRh7jU4sOh3DC/CeAyggCCIEMarO0jX+gRa7DA18eN1sW05EQiM767XJRM/nscreHK2PYb6GQqAiAUPONjltqzn+OwRbLwKb6ZbIgTC+jpITPkp5+Tg8cuNzKiwe/eZatTPdk186o9uy2XvAhPOt/j4/PizV7M4j0BAE+ODCQ7MvesC5K45ALs/rOE9s/HW/4l2Mm5CawelwIUE1NNV+0VzhayHoNnUKvVmH1o7Nj5JmAD78acK8OKVXzDlcOWRVx4SqABU/zoEeCdKgNsa1cV6DRKsT6BCvwHqx0dxcI6XKeSf07Dc+rp2uDH3/T5cKhgNwjj7wMl9A/klr0gkC57AbNV5czjm7KQG0KUOAca3QRIZX7FdDB4daA97755D9SoejWp33kNivRkqMOMPHBxQpTxe8oAUOvWmKwF60IYqlF+0Aph7TyNhyWeNZ0iV8os4NBytaHcAynLZC8OpzgLD03jaHVOtvBpycVURVOFnwvRu0SP5vdY3Z4hpy7wt3vDhNQ3Ge2Zi5VG9l844TbTlcQgwhCIo2qQ+ycn5mUBTo1jipPFpPlqy9hIE4m5X9YBG497WIke1WfAg6eA0LkOiMgC3um41QDMrPbVPzLlTP72B+BxC2IyGMqO1EI7IBe4GcOEGaGbOFmMPlFPXSVmLL30Z8lNX+m/g4sIkDg/ZLwyyueviE6BkDo8ysNlVcnpK6Pn/83+i+iBTzzk1KWXNWVFrxv0LbjNaQ9wFiPIAAAAASUVORK5CYII=");
+}
+
+.flag.BY,
+.flag.BLR,
+.flag.by,
+.flag.blr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACEFBMVEVHcEywHCWyHyqxHSgAVyAAVR0AShmwHCa+bHGqOEjPmZ2+YGWvGiMAWiCpFh6sGCEAUBuuHScAThkAUBoAWB+zJi+5cnYAWyGsFyAAShkAVh2xHygARhgAUh2vSE0ARRQARgwARxcASRanEhqxHSmxHCcAYCPEYmnTrLFwfma/Q07Xys7Ep6i6cna+iozPGCHQGiTOFh/RHCbMFR7SHSjTHyrLFR3KFBzOFyDUIi3QGSMAbSYAdCsAbyjVJC/JFBzIExsAdy3UISwAZiIAZCEAcioAdiwAbCYAaCTFERjHEhoAei4AaiXHExrWJTEAXyAAYiAAcSnSHikAfDCxGyUAWh+mDxbWKDS1HyvDEBcAUBoAfzMASRetEBgATRmtFyCpExwAVh3ibXUARhW9V12gDxbdU1zmgIaxEhmbDRQAVBvwtLi5Fh52Nx/uqK3gX2eVDBLnio/Len7gY2vrn6TXNT7ZRk+tIydiSiaKLBzHGCHEGCHKj5LANT7Ig4e/HinKIy/keH7nhIrpkpfMbXO9REzqmZ5IWCrKHCZ4SzCOqouJj3Ljc3r10dPxv8LHXmSvNDqVLyE3WSZFWytXRiKQLyAqWyVMRyAVXSHFHimEPSbSJzJ6aE7VQEnZs7a/en61S1EfYycEdS0Zais+TCBsJRYgPxjXZG3+/f3Wn6LZqKvXnqL54eLey8y8TlXf2dkcjCbDAAAAL3RSTlMAoK93V4Kvj/0F/vxiclTAoFgolN0oE2DbZrxJBUlUPxa08e3ib620aP2uP5zH7bXMoxQAAAMkSURBVDjLfdVnUxpRGAXgq6Igo1HsmsT0XsQajRIFjSUWFAEbEF1XUGooUgwgihh7izP2kt6Tv5h7d4G9u8acD36Q5xxedGcAACU1V5TET0hMTEzgJ6VdzE0F5yRVlAF/5t29I+jHolQqb2bwb53p5V1IuKFWgwf3hY7IXCh0cNAF86wmFNqbnkYlmIIM9I4ikSgtiZ9YMDys1mrVwEHOfXFN9sEgD1MDI5MpFvamzcqXdIZRtGZzfem4GpDf9XrDCsvLZLJKGIWioqJsYWHqNczUVHVJdWlp+fgYCATt8zY78md5RRmMWCx+WgIDPVUIBlZXwwZ6nr6GyylfjfbLUcH/Y9ZmOIp5ej7OqXnMV8ECOeckrLPxc7gcOwf6J9oxEPlmNekNDK9kc7ZHBX/ANPNshjXP5YyvhwXBtA3+F7jXMJyah74K+QbtBPgd6NIT+qjHuDjKY/OUR4V+oc1lJWKe+dMw12C+ExbIY8L5NSxjrudeg/sX6gkQ/EU419zxeZyz5imPCv6g1eQmMM/iHN8GC5F1l3XWRft/c8y3qV+BoMO6ZpthPWZneX1DJ+VRwT9nmp+dxOc5nJ6n/QAskBHXys8w9hTHeXmcxz0qCI5txCrB8eX4NRSnPSoI/+jnV/Se/UXvW5g3Xu/+pmcKvwb35k+fwalQ73YuDsH09va2o0il7z9sbVs2lZ30PH1O28C4b2d3RAc21vsU4mWWlzY3N9fV1T2XvNva8VosPp/PYtn+uNva2Nho1AGP2eA8WEI+xqU0h+np6ZFIamtrW1o6OlqRRwWB2W4iloY48zjHfJNRA07WTTOGQ9oz10Q5Pc/47kENIB1ut32Z8fFrJPh81KPCRtBuMiz975qob4IeFU7ItfnJZdY8xrF55OWDo0AQsDvDi+3Suh4JArUS9vFsjwqnwskjx2GjHEUVjby7qbUD51E/ohsdBZ4gSW7cy7mdnJ7P4/Hy05Mzi3JUI1RUctiMflq5yqjTjGpSrgCB5/HD4jz2V8elrMvp2UU5xkEqOhSNRnP9WuFV+OKj4nO/oGCvMDk7MyUlJTM7mZdF//IvCXDFleLmeqQAAAAASUVORK5CYII=");
+}
+
+.flag.BE,
+.flag.BEL,
+.flag.be,
+.flag.bel {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABVlBMVEVHcExIAAACAgK8Ii+2GyapEhzTwEYBAQGvFiG8HyusFSDHsTgAAAABAQHEKTa2GSPBdzkCAgKsFB69pSitFh8GBgYBAQHAIi/QvUMDAwMCAgLRv0e/qSu2HSjDrzi8pSikeiwHBwcGBgYBAQGNfCLNuUHPvEMAAADLjT7Bqi7BJTPCJDKnEhvBqS3QvEYCAgKqFBy+pyoAAADsJTXqIC763Dn63j363Tv64EHoHSrpHyzrJDPrIzH62zf74kf74UT74kn63z/qIjDoGyjtJzf740v74UL7403mGib75FDuKjr74UbtKDjuLD352TXtKTmsFB2zozn2oTz1nDbCGCOzojOxnivJHiv2pEO9FSDCqiyyoS/FHCfhKzrQvULymDHBIC7EJzXDJDLNIS/hzEjNtC3ZGCSQgyrs1kzWuy/BfjDfwzDoyzGzFh+qlyjuoUTcJTTv2lB7oM7pAAAAX3RSTlMAAltm+vr/+vr6Omlozln8E6mc/K48gsLDt5xCw4MgQoVGLut/neUZf5yk1snlmZ7qmf///////////////////////////////////////////////////////////t7tHHcAAAHHSURBVDjLfdXpVwFRGMdxQ6lsBykp0b6vtkbZIksUGqpJRVK0L///m+7Fvc+cjmd+7+b4fJ/j3dVo+hMWtJO7Npdtes444xE0A2ZwKj4mphd9/XX0en19asc4Y1X8Llh1zocx/jlv9sEufl+envR1spWp5TWdxWLRzW5sPpBBMOJTBqd02V711mw2H+laP/6WWpAlS6fTie/77kr50tmJWsB8Qj6ny1OvFjCeiMng/ddoAJ4G+b7HA+CxggxeJQBfkMHjAeOxQjwu50vMH10PDQ4u+fk4CUpnzOMB8ExGAh/Bg96/oV6UwEfusICfz4iixPxRJIkH7LxIA+7xgJ8XxWMJfAANgB93g75Hg9s456GQBD5wN4oECh+SKO/5wyoWAA8dVMCrBsyTgPswHnBOAu5VAoUPVpLco8EV8CANmMcDhScB96kbPGA8GK2AVwmYj0ZpwHzqZhgJ+HmyBni1gPFisQE+hwZB8CQIM48GX0XOSQAeDTq12vPr+0eRBz3frpb/BWbbpEmr1ZqW1t3bNTqaNXJd3K5+lstbBkVgNq0qHxur17jvHid7I7C7PbtBI/CHyTUx6IkSPF7jnN3hcNhndQZu/wC3TS7T+FAMrQAAAABJRU5ErkJggg==");
+}
+
+.flag.BZ,
+.flag.BLZ,
+.flag.bz,
+.flag.blz {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.BJ,
+.flag.BEN,
+.flag.bj,
+.flag.ben {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABj1BMVEVHcEzPrhcCgVmnBxYCbUTPrRd7Th3MqxcAYzsAflOqCBgAYzsAZTwAZz3PrxkChFyYcTEDhFyqCBepBxi9dxekCBepCBjPrhbOrhcHeU0Ah14HiWCtWBPRsRwCglqqCBi6qSupBxYAZz4AVSsAbEEDh1+VGCIEglnLpxLSsh+mBhX80RXkDSX90hbiCyHhCh/lDib90xjjDCIAkV3mDij8zhMAk18AiVMAhk8Ah1EAi1UAjVcAlGEAj1r8zxQAl2QAjln91BoAhE391Rz8zBLnDykAgkwAmmn91h4AmGYAlWMAf0msCRnAIi/SySb8yhHoECwAeEYAeU0Af1UAhVwAbkMAiV6/CRylBxW6CBmxCRuoCBbeCh0AaD3PrRQAfVIAglnZshEAYzrJpBDFng7WrA/UtBoAc0fRsBcAjWDNqRLKCh0AhFfpKCTtxhjxyhn3nhfVCh/oGyf1zBfxZx/duRjkwBn5thbzfBz50hzzgh36vhXGVC/4rhfuTCObGiPsVB3DHRy7aBG/uSiwqiZifZtRAAAAK3RSTlMA4ZurUqACVl38l3mXynKuHmFFaQcotmCJFPY1FLx76iZ7rQbttNuyxklWYb2IzgAAAoFJREFUOMt11c1OE1EYgOH3zByGdtoy4rQI4UddYNzUxEhYkHgZeA9ckvES3LhkYVy4QVfEkBg3kPgTRWopbekUZub0uJgzf23pqpk8/fKe72RSGwBnVa4MxdKjOBKbVrwlA+Z/mmpbwNpNc7RHHWAIUN/+8WbjvLo+/h2W9EZnEh8g1q9re1j+yZKGgNogfNFtD3UfLHi9ce4H1Su4N3a78QFEtwviFf53BVgQQA0G3A/heaArum8BaZ7bEOpw15L4ZwCW4QySjmMggt0wXtSAkIfWBB+QE4p+QNYdAXwCuIIYawJdH2TRDwhB5XxiOHHy3cf8wCKgZmrUXG78GCTdos/HJ6kzXsh6kPg8x53LE58kBdTy8S52gU95D2TZu2CbLZXG448BD6nlUCQ+G09UnF7M8UxS5l2wkwWVa3JfA8nqWeYTrpObKvCCR9Ype025Jt2O8UgIUSWu5ozP/JZMLjf3Cp49kTeLR93CeOMfy8Y3Oev5YgM70XLgBI3J5z541J7eVird9872SA6vU59wy1zDGT9H0GP5ZQQLH04BHHPTLnY23sreyBH0gN7HOF2CQwwy94brlNPL9pV7JPULu5ij7+DGIyH1KXfTmvJ4YhAgISrluDDLM295stXJvOGyUFPKESap7JOXfIrnHnPTFugCL9aUPdIcNxu/MMuLXknyHEniuXM8IC91IWcOL/m2SqI1LlUc8zSc5rk3h27UVi4r5D2bbhOn83Wa0/Z6GrEPFXjXutCKWGIjxNoOAHrSxKHDCbRphf9soXjriX2Oz29af7JDOYQ4nhLjerWdPfQAdTRW1V+Ixvjh6ex/kxMCTaHE0l9u/S6LD6qdfgjwH1YOTRAVEngiAAAAAElFTkSuQmCC");
+}
+
+.flag.BM,
+.flag.BMU,
+.flag.bm,
+.flag.bmu {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.BT,
+.flag.BTN,
+.flag.bt,
+.flag.btn {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.BO,
+.flag.BOL,
+.flag.bo,
+.flag.bol {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABuVBMVEVHcEy1MSS7OiwAUSABWCUAVCG1MSWyLSJoQx22MSRkQya1MSa1LyMAWCMATx4ARhoATx6xKh8AUR8ATB25OSoATB2wKR5MPBkAUyIAUSAAWiWuJhwBYSoAYCm+QTWsIhm8Oi0ARxm2MiX54QD65AD65gD65wD54wAAYyXUKRz54gDYMiXbPCzXMCL54AAAaSr43wAAezbVKh0AcS4Abi3aOCkAZyjWLB8AbCsAdjIAdDD43QDXLiAAZSfZNSfZNigAYCMAayzcPi/SJxoAcC/dQDAAdTEAeTQAXSLaOivdQzIASxsAUx8AeDMCfjgARhm7Nyq1IhjdzAAATh3SvAC+qwCxKB0AWSPHPC3bPi4AZSy6MyYAXCYAYCjwsgrhahO9Oy2uIxi1LSGlHRRUnSPmgxLNLSDtpAsAViKqIBbENiiXtROSrRDfVyD20wLOvwDTPi62xAxzqBqtvQ0jfiXyvQfqkxRDjiPIKh7QMSPQwQDT0whtnxiEsRnx3ADplgvlfQ9hlxnm2APHMSTPwADOOClPjRvd1AVLnSmotgzAYhrWPhfYqgoTbSLRwgCJlwooYBa8lgO/XA2Gpfl+AAAAI3RSTlMAj7BjVpR2UwX+FGOgcn6yoMCuRSgo2zG84tuux+0/7fHx4mFTJ8MAAALCSURBVDjLhdVPaxNBGMfx7+w+yW52TZv4J01jKwhFBdEK3ryJB0VFL148KL4Awbfj3YMXKeJFPIhFRBRPWkHxItI/tDZNtzFN1myS8TC72U3T4hyWPXz2x292HhgbALfUtweHekr5Ud61yoMe+y/XnlDgqc6JC5QC8AEWgOntIKeKrXBEe/3ckeuoEyv3IaTKBhtMEZw+xio7C3eBp8Uo2s3leiBRVItu4K6XXPWAsPoDIugzxRIwSx28Sx7fHVpxug8Bpz+tnakKYbOZ+CHH4z0atqybW3AYGnwm+tUBBBjxhoMGthi8sGASIojoAF0xPq5j2gw5kPgIOgBI4BqfjR/jia+BMPRJfJaPeYSk/mzaZg/PeoTDv7M+iY95HJ96xIeppXNHw/JOB6Awud2d/xCmfLjdGrB2WwucLcy80NockAaU5rrTHHQnFr00nhrXvrrhWyXz1mPLwNij4aV5uew0q2vHf8LJ1drP0hOwQOTd0OvhnJk39QrABt6ZwbR8kDrj3iw7efwl9chB3ibjfRKPpMUP5FmPePvEj3JTx3yVTKv+D089srnHpzxtk/GZTe/5NfvzZNP2ndDbbQJM+I28Zz/LtMn6K2WlHi1f2Jh9zzJUIA91inDezgW5Sue5mcLYX3XCQ2+0euh/A1g2vg5FWqZPuX3J9na62oVQlbzGx02Y0+qy7WHy4/iEE5jGBRrggLMJzGkx8VTi+JbZ7hg3vgoy/Tv1o/ECFBqYeIx3epKpXxzjw/jYx+dQgXwaP9om9VXABSGIfRK/P088QhHyddSWksIu0JdetvweH4oAf7qnbI3pRhm2c+pTzvmb4bEXLQjTVOB1+MdtK9CeslzrFnPAzDY7IetAFXeyvKIFFkXdY3Fd59ujF01x0A2PqIsOAGE8dF8aLaeNmlmX8KALqjgI/I5v9e3BbqFd3gTgHyRiMu2rnt6rAAAAAElFTkSuQmCC");
+}
+
+.flag.BA,
+.flag.BIH,
+.flag.ba,
+.flag.bih {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.BW,
+.flag.BWA,
+.flag.bw,
+.flag.bwa {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABzlBMVEVHcExYhqhYhqVEcpVKeZxPf6JolLRgjq5OfZ9XeqFUg6VhkaxOfJ9qmLVumbdsmbdumrg+a5BDcJRBb5NXh6hXh6llk7JVhqh0oLxmlLJXh6lXiKlYhKRJeJxtmrg/bZJBcJRMe506aItznrs9bJBIdpkAAABsqdJpptFxrNR0rtVvq9Nlos5rp9FbmchopM93sNZ6stddm8lin8xuqtP///9Yl8ZyrdR/tdl2r9Z7s9hWlcX+/v5fnMp9tNlkoc1SkcJjoMx8s9hgnstPf6KAttpVk8Rdja6Ct9pno88TExOEudtUhKdrmLZEc5hZiatvm7j5+vs9apBBb5NXi7BhkLBznrtUVFR5sdcKCgphlblmlLRJfaWdxeE1NTX19fVISEi00udhmsO1t7dakLV4eHgeHh7u9fqHttjf7PWWwd+JuNp/s9dqpM1nZ2fX2NldlsDG3e1nmbt2pcN4p8dyosNEeKFOhK5rosddXV2NvdzQ0dJ4rdN9r9Hk5OSUlJQsLCw+Pj7s7/HQ4/ACAgJtpMpXV1fGxsZ0qs6urq5tnr9SjLiHh4e+2OqqzeWfn5/W5/Kny+SpzeUFBQV1dXWZmZmMqb2auM2Fn7Fbl8QSmpI6AAAAJnRSTlMAniqX/v1tWVkFiRNyf0WUsLJFqq7avPax3+3HI9+iZnu8FvHxvDyTX7QAAAMdSURBVDjLjdX5V2FhGAfwiw7te532ZhWppFIqKUsYyY0kLXajsqbN2FpOtO9jtv923vduLqbOfH+4p8Pn+3h4byAITAWTU1PXU19f31NXw65lViCvpILTCa5V7LaPliWYRSIb7a117Nquol4Vh9GB6pHaNovFsn+QTgcl8/MShSh1dXB4s7cBs9Leyqhhc2DYlc0tKIqazXoE6LR2QavVAi6RyGQKxdSUSGRNXWVBbQVGgwXVrLtDg15QOFhYIL0MeMhFVqt1GGSyf+Iqm/0Gkg31jfX1DfKIAuXBeBqf7IeZmODzBYIx6MlC3mPblHA+xsF8Hs+rQiz70NPH03g/5DQvNKuQpX3S58dTHBtP81/wAuHJ8QUcjsfXh34AFg4pX7o8NZ7wsLB4CLyC8hQntyG9EPpZvADHBxO254eXF5s/ESR0ASe8XPMbFGQJ1/mWVCwWOxxGcJUat57uH/xBgpMecGEiGrlGFn/tSB2eu7jdp/vOXdP57M7w3XXSAXo75/fP/kCQDwpjqYDN9WQ0epwZJBn54Vzj5pPJYFefM3ziiTjgK8KIxcbIY1wHnkHidF2cjO70bBXmzEcyhPtm8NeDf3D/r1AasqCzr8ZzudzFqt331o66MCyc5jzHUvzNYW/v+PLxq/O0tKe7uE56kLVwUrx17rIFhrGjmgQn6IrugHNxHHtOchdndh0M+LBPLo3G6JIBuYxE/fhtLKAfFH/bj/eIgGNxBZTjmwbk5w1+21O3GX6w8E4YmJ0dSAW3YdKhkaGhofHxzWVkZQ/3pRx4+eioUqmcmRmBHPhpvEDzPPI+wzjmZ2geFjR7hZ7ahuI0r4aFdcIXbiMntwE879VHWIHu89soC8djfu7IBAqC/D/VK9tQHhbQdeo74R+c9NO4xwuYF8rd7l0Qt1tZtDw+HvdEIeT2onq9XkUlZvbu/iE43ccMJlDQmAFuaa6sLoeprmS87y7DoorFbm/n1Gqg5+ZuY5tAmxoaERTtYJRXFf3QdDVWsz53lxmILMOYPjX0fgBPdnJe/4FiNva+Y7GaGpqaWO/KmfiDfwHUS4QBLBTPsQAAAABJRU5ErkJggg==");
+}
+
+.flag.BR,
+.flag.BRA,
+.flag.br,
+.flag.bra {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.BN,
+.flag.BRN,
+.flag.bn,
+.flag.brn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAClFBMVEVHcEzJuRm7pQzMvBq1ngrKuBfDrRfFshW8qAjTwyPOvBzEsRHKthi/qxDEsBHQvybUxSTRvyCxoAq4owzGsxPHtBLOvRvArxnDrg+9qhLHtBHRwiHSwiG6pQy2oQu3oQrMuhq+qg6/qQ7UxCS7pg67pQy0ngoAAAD////44Rj34Bb33xX44hv33hT44x722xL23RP34Bf44hr55CL55SX11w/33RTX19fMuRbCrQ712RHKtxP12BDk5OS6pAzEsA/WwRHHshC+qQ22nwrbyBnnzhHItBHSvBDSwR/WQx3tpKzp0xb76+3RFivZxRXOvRrPuQ/UxCHQvx3v0g/CwsIIBwVtYgrXOkzx2RT56Uy0nAnWvQ4aFQL55izz1Q41AwhfBhD55kH78ZHOvBju2h7fxhD8863DqgoRDwnYURsHAADbUWDTOB3gZ3R/CBT9/PupISSKChf43N/lf4qUChlrBxFRBQ43NzcrKyv13xqura3+++f+/fT78qWbmpr9+t7Hrwvy3iLi0SjdwgzlyQ3SLx/NHB/zxcrurbTWPB/WTBxiGA6MDRrLPBylDRz4+Phubm6enp7t1xn9+dT89r366mZTSgfAv7nhzh3kzhPn1B777Xbr2ibdzCH56lj04STPtQsoJALebhkiIiLnjx/11R3GxsaQkJBDBAv88vPi0NPQGifHDyMoCAXWMEKaHxagNRZ3CRXb29s5NAakpKSdjxBdVAlgWAyysrJEPwg8PDtWVlZfNQqZhwnX1sLQvhu7ihDW0avqpheAdQzr6+vvtyDjiRfwvhffYCa/Sxv67Lj21dmzYRXpklTwtLu6lprSHjPAXGe/LRuwDR7jc3+vQUlJFRGZSVLMcnt8HCfb3NxRUVGkXAh6AAAAW3RSTlMATWNisMIUVwWwdduDcp0o/pQolIuu3z/0De1rokl7oZ+8+vHivPH////////////////////////////////////////////////////////////////////+FUPVFgAAA39JREFUOMt1ledbUlEcgK+KIq6c+TyW2T5XDTVHzkoUQRAVJBmKoGXuvVJTc2+tTCtyj+aj7Wl7D9t7/DOdcy/g9YLvBz7wvO/hcO7v3othCOs1TBun9SwWa72TnYXZGmtsFayZlvDTah1ri0QSj0iJTyFYa+m0zqizMnPw4PEwd5ajRDLeOtYyGQwJmmzJPnOaK3mcjFhrudHOxoLJZFrYuLrZRkby+GIO5ug4PpaREWwgiMCP6OIPhJFEQvhJWoVPNAeTtGYplUpDEqQLdNRlDw0lQIYUO713+vj4Ru/FHu3GEQ0nckaVdN3PbwciMNAbgnwUhJIBweH9E8FU3Y+iEz6bFkCO7M+i6VTfRAAZHoHy2ZeU3aDtED47PdxEgLaWcfbN8vLL/i6+6QDHSz/MBRp0YjuEH7B6IJe/m/CmLE/6KDh3t/748ZunQo9SfVGlUFiBHxkNJpZf9lEAdKTWHmvS/djFYnki5CO8OjlKX72OfH9+jCEgWDx/SViK413yy4mJny8XXyTPmW3w/cW0AP5Q2afSJVFF5fdCeWGX/tAaR7JI30QA+vvzfv3FcaFQhFeIcJFQFzWcGM5pbMx5esoouDBfcy3137luaIq68e7ClacXus8oAIOZ5QUA/PmNzmpJXmwUqO7dkclkJ2/k6YOqzGsaAGpqZs9fKq5M7DIKkrnknNVxb91WkUFfPwDVmQD8/PGFtiMUHOCSc4nmoI73fBqU16h6NKC8BICrfdVlTS9MBZSp9+W87QNXBzRVJQXVgoXqcpB6v2k3PaDeVHAOEt4PDgi+DZblXwGZJcTfqj1Wf50cndB6LIyLfP1Uojl43dHTKygS9H6tWtBcKDBc0dlDi4u1eYAIAilT6cue6+jsKOoduFJWVFJgdOgwSFrho7kJEeT3CIo6BZ3zGpMB3Udz9mwmf+ZV/pMHJgPDM8SgB5CTBuHIVPQgMol6E7J1us6HSGNlefRA/wyhLw+JiIiIilLnPjw5nUr6KhgQfoAiIU6r1cYlSBX+VB36UVEhEGn7VHNzem4aChTaaDFnLySchCNOPxgnjaDqISFqtVralpsGAzGfx+HYurnam8Pnurm9ncMm280xiGZxelt7nFSNbGl721RubFoawx3j8TwczKxoLxpnT3uXbVv36Ikl2M4wR54lc/UXlLOn+QYXLwaD4eWygelMfvkfDu+S6zW6uUQAAAAASUVORK5CYII=");
+}
+
+.flag.BG,
+.flag.BGR,
+.flag.bg,
+.flag.bgr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABqlBMVEVHcEzU1NTW1tbU1NS4eG2eFwqVEgfR0dGjGg2hGArU1NSdFwnS0tLX19ejU06iGQyjGQvX19eYFAiZEwekGQvR0dHPz8/X19fU1NSTFQmrHQ3Z2dnU1NTOzs7b29vV1dXW1tagFg+UEgf////LGgsAm3TOHQ3WJBHUIxAAmHAAjWTPHw4Al28AkmnSIA/JGArXKBPTIg/QHw4AlGwAh18AmnIAimEAnXfMGwwAnHbX19cAoXwBkGgAn3kAj2cAjmYAk2oAlm0Ai2PWJhIAnnjZ2dmoGgzR0dHYKxWhFwqnFAnV1dUAhFwAclEAaEmxIQ/k5OStHAz+/v7e3t6YEwj5+fmVEgfy8vLy9/bp6enJyslMup44bUy7IA+SEAbBGQqbFQmPTDFyVDeIz7zIIA7EHw6+JREAiWrOzs62FwphwKdVXj86q44AjWsAhmgAkG/u7u6s3c9+y7cdhF+yLxqd1sdSbk3Z7+kAg2QWoXxuxa5mYkKYPycUlnCJQSlGYEF8Ri0ZbE4IfleMuK3K6eGi18jH6eHKMhuZTDE+t5tPsJQge2F2JRY3UDVb004kAAAAI3RSTlMAgq5IBo+wWVailndyZRPdwLZFaWDbwRygKu3x4u0rKqMj8cx5VD8AAAKlSURBVDjLzZVnUxpRGEYXUEQEsZf0BCXCKohKQEEMUUBYoywISqQkgJFmxALE7mh6+c95712uuwuDmXzLGWFG5pxnX/0CRWEetUmUT6Td0iGlRC173EI1oaVtAN4H1d335zAM4UG3UiUbrLM7ZcqH2Swlk4IZipY2w8GgNhgMhzdK0UCIYbxexts/MCRRqdsAlUTa781mGSZLud2BUlArBkroAiG3lyfLhKJhbQiCgPYOINwoARthbjT05m9B3a8QzN0Z1PPPgfu/DBgUhL+UD/JbiPxJev/TZjN/8+YnBNX0d7vdPj8/v7RktVpnZ0dHLcfF/MF+ta6rln84Xq9SN0W7nfeRPmoB9Hr9uP64uHWSTpf3P6cP8sVzAwDBzh7nL2Gf1yEYd7lc09PTLycmJpxO54LB8OoFCfh5C5m/1ZHvcC5gnwQ1XzCPdTLvcKB55M9A8GGP9xt1bv7Wx8Eu9md5X7SO59E52K8F3PkNeu0aMo/8FQg+7orOadSFPgk4X/ifFF5DzgF/ZRWCHfAth5XT1DtE6rQSO3QIryHzyL/+/QuC88q3r8uTk/Cz+BwxNmY+OksVYocGMo/9mevLq7h/nYpdLAOTwCLxx8zoZTZmjs6uUoVCLBa7LKQujkYACNbeE5/o4AJGo9E8BdA0rdPpbLYRmyAQ+UQ3TtHY12Fs2Df5Iyi49YnO+QKd+FzQ4BtrPs3P13wS4D+3qS7wcRBv9OuuwTr2Tf4EBNg305nMNpDJ0CJd7KOAjS/S23HWU8Pn83k8bC6ezIh07CdzvgQEa2ss69G0t3b0KRSKvo7W9i6ND+Nnc7lk0mRCdjKZ8/siiYS8h2LZe+2Kzrovmqc9va1dmrcc64hIJPJM3ou8LkXzL6jhnl54olwuh+crhrkP/wBu7Vh7hVcA0gAAAABJRU5ErkJggg==");
+}
+
+.flag.BF,
+.flag.BFA,
+.flag.bf,
+.flag.bfa {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAByFBMVEVHcEwAaiyKQywAbC7NOjzJMTTHLzIAdDTELC3JMTMAczPFLC4AaisAcjIAaywAbS4BcjEAZivLNjjEKSsAdjQAdTTKOzYAZi3RRkYAYSfKOTnJMjbHLTDCJSjOQUUAXSQBfjsAfTrOOj3AISTBIiUAYSbJMjQAbC7vKiwAoEsAnkjxNTfxMzUAmEPwMTTuJijyOjwAkz/wLC4AjTnwLjAAjzwAlUEAhzXwMDLuJyntJCYAmUTyPD4AoU3vKSsAm0YAo08AkT4AjjsAiTcAkDzxNznxODrxOTsApVLyQUMAl0IAlEAAnEcAizj90RXJMTMAaioAdjLyPkDyP0HMISLMNjgAjjoAikQAgzPEJijZPD7POzwAgz7YNDcAci4Abi0AfjkAkUkAejXzQ0UAZSm5Gx3HLC7oPD0AYia/HyHHHyEaiD0Fk0HfLC3nLjAAYCS6TDrwOC3jNDVMgEhvcj70XijSLy+QuCn6uhgTmUyMUjLxQiyuTjm6OSpTrDQng0UUn0H3jSD3zxXNLS/FRDf4oh70bSdZZzTiyhmoviUipEEPoFPMxiCjSTperjN2si3zaCTxUCaovCPyXCNcrTJyWTAYbTB3NiIdiIH1AAAAKHRSTlMAuAmSsGOgWVZ2crhlnn6uSyiUidvq/RQWqChJ29o/P8ft8cbt8eLizBaDUwAAAtVJREFUOMt11ddXGkEYBfBFimBv58SSXgkRDbqAiCVILBjCQiIRabuCSvEIAXuPpvee/Lv5Zmdmm/E+7MOe3/3OfRuGEdNttrSZDAaDqc1i7OmuYc5JjfkGfDuNhuuJaCIqhotykNv1bZaebo3uNJtuFgrMZUMikYjHc7mnkCcjI7lcNZXa4riVlRXuYr2p3WI0m81GS3v9pYWFQrFYYEDnAtlAIAAc/Mh9yPT01GS1mtp6Ca0FKXNrJescFOLZbBZxyQOfmpy8B+nt7SuVSmuQUmlgwGodGyMF7M9yKPT1DQ2xLDuAvHXMgwsar+HYW5EnBTqfnldw5XnkPXPLTDQekM+TNTLXeFygnq45w7EH7unHBeLlNTJXnff0i4UUma86L3OVHxYL1Kt4pSJz2ZMCnq9cw7JvNlmZS364uMxwKWm+cs3rE/V57EkBz5f40ObmfiW0ozpPPC7gObnEc8irRJVl93dCkJNv3yvyeeyHi3+hMJU72FjffYAyOjp6d/d4feMTaoR2fmr84e8/PMN9Xv84g0I8iu3DKfjtjb0Dbo3M2Trce7vqdEZ45nhxhniJ22xH4E9fjHu99lnXKorP4fM9dDqfRcLM/KL6vA3l/bsv26FfXrt9FuJyPXIQP0gLoqfnbcHgNlz/+kP0wGVPC6rzweD4OIzx2o/siKPzkn+cFgtnPOJ0DT5PvD+9BAU6R3Gecvn8BPK0oPBkDeXiedEPovt+NxSSi5JXriGczKFeLMxLXrVGwdF87N18HgqyV65x4DXyfORpQZqjXKPgko/hAj3/n/EaHwuXoSB6r8vhc05MOJ0+x3kcPCl4fUkhA4mQZDJCzD9IuNJHwuUyIySTgiB0NOvraiENdU2Nuo50Os3zfDqSicXcbj/ygNPhfDnfdYURhGuNLRc0b0drS51ed4cPkyxB8vlbugbkrtae/0C1tjQ06Rubdc1d+qbaVvzzH6O0lfemX2xBAAAAAElFTkSuQmCC");
+}
+
+.flag.BI,
+.flag.BDI,
+.flag.bi,
+.flag.bdi {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.KH,
+.flag.KHM,
+.flag.kh,
+.flag.khm {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.CM,
+.flag.CMR,
+.flag.cm,
+.flag.cmr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABy1BMVEVHcEzPrhbHpBSeERwCe2W6kAqkECEBYEqGPDLJpxWoFCinPxsHV0MAX0gHbVkAYUkAfmgHgGwDfmfNqxWvFSrMqRO5mQ6ZChehFiGxGi8KdWEBeWKVChajESK8kwu9kwoAXkivFSkAYUqbDBjNqxTLqRK1jAexGC2yigiWChe5jwr80BT8yRDQEyr8zBLJDiD90xf8yhH8yBAAhWv90hXRFSz8zRMAinDNDyTPEScAfF8AeFzLDyP8xg/HDR/7xQ7SFi7GDR4AfmLKDyL7ww0AiG78zhMAfWEAh2wAdlvTFzDOECXUGTMAgWYAhGkAgmcAel4AiW8AdFkAjHIAgGQAg2gAgGW6jwkAjnMAj3YAeWPEDB3IFy3EEiWYChbLHDS9lAv6wQ0AalIAdmDXrxAAcVjQGCQAblXRFi4AfGavFSnJDyIAf2kCWkUCYUoAZk7GERzBmgzSpQyzFivKEyDNFSLSGikQa1TtxhfQrhTOqxPIow/Hng3WqQ0RdF0QcFnUMSChChjbtBLLpxHQoAu4DRsReGDgXSD0yxa9Fiz2uhMSgGqsChkSe2QSfWfaQyHtkRvvnBjkrwvnfBvyqhf4whXneh7yqBrttw1pHglRAAAAK3RSTlMAYHWDsLCaWQVWdCpzlBTR9jVwlLy6FLwjSZSiSWWToa3b7dva7WjiP+LxG08yegAAAxxJREFUOMt11ek7YmEYx/GDQtax78y+HTQJLZJ9ickSwlFCKtGkIfsWxs5YZv1z576f5zynx1yX34te6PM91328SRBwqTkpuaVlKpWqrDStoiQ9VXhiqZoC+MzKVT0LSkFJkrxe78HiKuxdfnJaSfF/XaEm783xsZADOhjSdxkMIyMjhuErj8d1cbG6uoh7kZ+clJig0WgSEvMKXm9vH89vHQuhkN4wOTk5MQEcduX5TLbgwg6iLdw2bOto81w8gkA/GffDwyzog7W2LjS4zjdx5+difb0oikc7QlDP+y4aUI7B+id5xJNggHngXb3fPTxvUALqSRBCTx/f2wsBzxtq1h/57vkdQQpxXq/HIM5raCBzsbuRBuwc8PobTx/HaRD3NBhRHq8fGLjx8LzG5Ace97Xzu4IU5PzYGAQLcW7CQOboMfAGmR8AP3jq4TkEjzwNeG8/dVG/Tnx/vxzIXrdHgi75nMFBu/PURR9/dkt8v/+R1+19FbyS4u125ygJwN79Rm40rsmc+moIbJJyjtM52r4Pgensz13jZcxvNJKA8xg4JOLxnNHRdghMJihEOF13RgLe10Hg8yrngO/BAI65F8WfMaPRYlmTOfU0YB54Dwb4qr8udfcW8BjUxn3dCgbsfPBm874b3/X2hz926bdYOjqi3ZRT34yBbUw+H735wN2Pl8M1sRj4pWgj75tXZoSAbdDOHm8eGjpw4/8GjwHesaSFgHHwJHBwvqmJBArXaqOPfAsGPuaHwJMgzrXWKO9JMOdjHniT7cDNca0VAsrJ81toAN7MvG3DjZ5xqzWi433nyjgGzNtsNseGW7kG1tYW0fG+8xsEgbh3ODBQHt8Gi1Sz89FjsByQX5d4CHhOA+qBd87SAD3lDh8JrMxPTUUIZ54Ec8Q7fIHAHCx80sZxOWhhXg4cgeVwOPyFbvrw8PD6+uRkii7C+4fdcQiWUWc/z8xIwWUkJRe9miaj4ews8NnLvw97oMfV74Vw+GVmSpbyE0M/i8vTkos+kGyGDvBH9dtC+DI75ekfqPTyiqTKKrVaXVWZqEmnf/wHQpjE8wVNj2oAAAAASUVORK5CYII=");
+}
+
+.flag.CA,
+.flag.CAN,
+.flag.ca,
+.flag.can {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABWVBMVEVHcEy7AADPz8/QAACjZ2fJycnV1dXJyMjOAwPDBATRAADZBATGAADV1dXQAQHGAQHHAADExMTGAgLLAADNAADT09PU1NTJBATAAADNAQHExMS8AADIyMjU1NTExMTDw8PCwsLX1tbKAwPBwcHBwcG+u7vaBQW6AADV1dXZAgK8vLz/////AAD/AQH//f3/BQXhAAD//v7XAAD/+fnPAAD/CAjUAADMAADV1dXkAAD/+PjWAADHx8e/AAD/kpK8AADaAADYAQHdAADR0dHxAADJAADEAAD9AADCwsL/+vr/srL/19fu7u7z8/P4AAD/Gxv/Z2fX19f/8PD/Kyv/g4P/MTH/Ojr/m5vpAADf39/n5+f39/f/3d3/EhL/x8f/wMD/oqL/Xl7/6en/dnb/qKju6+v9/f3/UlL/fX3/cXHvAgL/ra3RAAD89PT7+/v/TEzi4uL/iYnAu7vs/CeVAAAAK3RSTlMArYOqAnOaW1gU77D5Y5l2jv1SYNq83z8Gx7z2I0nfCKCwK0mUsGhoKnkqtm0sSwAAAjJJREFUOMuV1WlX2kAUBuCwhuUIiLZqq3XvNkEcCARICYSlVAIB2VGQvSoqXf7/h04SAWMCpO+HOXPDfXJzksMZDBNiPLJ8cRjsh4dms35t7/M+tiDblh20Wj/abazPx/rY0DRv35hNe7tGebfV7bCRFLZlZ1n2vJHi+UzgDP6cXOdzV7+boVASBTm9aQ3HLRtOl2GTJEk6SGHxeDiVIcQEzsBzIJwg17xMSiGF0IkGTyQQCBPTzAEAXF+EaGA+NxqnUrx008VgwMz3F55ZCwKsCoDAX6hBVZBWBUxkSHg5NRBPYz4VUKxVCaLSYjQDRqjagTvNICvV9efSLwO0AnQgJ9U3GgAsZv3VB79XrPvgYvWEX0SbKJQKUskNFOA7FpwDLwIVYVMsC2utVC5w3QpcDjqziqj2hPVWNoFF4FwGsvMfpTDLQT/wql94VS+ATzGh630FWisAuHsFCqUVAN7KQV02gVYC8FR+0e5h5N+BjioBaLVl70gGglHsUQHAvez+AERWAFidXigCTaBUrNSzg17NQ/S0AekvcQO4+7IqSKiCh47QCRUghpHqYJid7zWB7vA/AVNXBY8zkOFT4/FolMtfT8QH/8MsAXwjEaQoKp3+JiV52bwaPUEFyITJGAJBGjVvGlzODQuO4yb9wbsP60iti06cGPGg+Y04FY29121hJGlzuK3yo8O4e2w6Qe6HlL9RlBjq/iT07Vi2Fx1Q+1+PcdPJwempTudyuo+kA+kfn7w5OoHN9eQAAAAASUVORK5CYII=");
+}
+
+.flag.CV,
+.flag.CPV,
+.flag.cv,
+.flag.cpv {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.KY,
+.flag.CYM,
+.flag.ky,
+.flag.cym {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.CF,
+.flag.CAF,
+.flag.cf,
+.flag.caf {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.TD,
+.flag.TCD,
+.flag.td,
+.flag.tcd {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABmFBMVEVHcEwCNGrHnwPJnwHQqQEAMWecZyYANW0AG0pRGz+YCiWjDizOpgEJL1yEBBe/kQHGnQEKIEelDi4HPG8DKV6kDyzTrgHSrQHInAIAJ1oDNWvClQDDlQDQrAS9kAGJBRmKBRmJBhoAHE0AHE2jDSqhDCsFOG4BHVGhDCkAHVACNWugCieCBBSgCiegCiWFBBaCABiFAxiFBBf/zgD+ywD+xgC6ByT/zQC+CCi8CCYAN3b/0QAALm23ByEALGr/0ADGCi4AI2AAJmT+wwAAKGYAM3IAOXjCCizACSr+xwAAKmkAMG8AJWL+yADBCSv+ygD9wQD+xQDDCi3FCi4APHu4CCMAMXAANnLHDDG/CSkAMmnIDTQAIFW1ByAAI1sALmUANnTGCy+UBhzzxwOoCCaEBBaNBhoAKF/8xgHClAAUL1cAHE+kCyr1ywUUNl77vQCcCCGZBh2zBh/UrwCiByCJBhgWQGr0xAMDG0jRqgHrsgAAKWgVO2TzwAO8DDHLnACgCSXapgD7ugG/DDPovwDftwD6zACvBh7+TmaxAAAAM3RSTlMAqyZJ9/wH/lsUY1ickbL2aHNzNVRT37yOnrO833aBk6GurdqLrmjH2u157T+cxvErVnkJQUmXAAACpklEQVQ4y3XVvU/bQBzG8e/Zl1ecpiZAXwAFllRlqRhYKsZKTJWQUP8K/qZOnSt17FB1pwPtXKmiSLSKCjHE2DiY2Nfhzs45pV483OceP/7Zll0A6C1sTO7E0+iJeOTciVrG/Ue9+VxAaz0aHQBQg+5CCrwTsf9b5VXd8h7nbxC9oA7st757QMTuCDYFAVDnrYi9dCLaN6q5KNxXS5w1pWiwf/kACCECdpNjOQW592MTEdThurjAhPFtzfdEYz9j5gcryTGABIjw9sYed0Dta50WIb4n9XbtByRYHKL3O2cAZNors1b4hKBv8dmR0YIQAOfgA4REEQySIDDxUcVnhVexXg5NnQD8arrU8ZYXsvAJAfjUk5kvOC1CUMQ0TAEY6PjYypflA6P0KWOndmD7cZl+v3+ocwZJoOPH8+mmTuF9vVT4McCN7bNVPUxF3CDFP1nFqXqn0ibjF4BSsfE6bOYdCK14WGXomvGk+CcIkNTO8ct4z3q4sGraWx7ZnBjvAN72dYXnuDE0IPUxXlLxcxxo3DZIKfwUSVnfY5ujrSqfujRSSp/pCRq/zRGwlFkcMLzwSJqWz7HSmXLByz+Xthd6iI6uU/iCc8Ea+IaTQR9k0sIp49tMZ20uYA1OsPxwrSupeLQveQiz+v3iNTO+DTHUTfkK135oNlS8VV5/w3MemSf/+AtYM5xexe+oKwkc5dA2vFIeIHN1/SGwcV5z5byv8k5xu0Ngg+UrJFh+HasNdMy59MXH1SZmnRxyyNR1hfdPC86ynlKOWsz7Jbh8AQ63xKdz8Swvj0IXcTimCx/VuUwAWp2gK14DsOJwC5Pzn7CxxSiLFXxaEId8vrqLk+q/wxGdpqv3ZUAXuOLLyVQliGenefq/H9RUdB4IIUY9pXpKfQPgL2TlViScpH/NAAAAAElFTkSuQmCC");
+}
+
+.flag.CL,
+.flag.CHL,
+.flag.cl,
+.flag.chl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABv1BMVEVHcEzIyMihHRSjU1PPz8/T09OcGRCiHhWqeXCXFw/P0NHR0dGiHRTS0tICR5uYFw+VFxGYFw/R0dHPz8+kHxWkHhQASZ0ITp3R0dHS0tKjHRSdGREMSpsBRJiXFg+lHxbT09MITZ7Pz88FTJ8DSp3T09OgHBMDSZsCSJySFA7V1dUERpiUFQ/////SJhrMIRbTKBvWLB7QJRnOIxjNIhfUKRzWLSDPJBnLHxXVKh0AS7LXMCLJHhQATrMAUbbYMiQAQ60ASLD2+PsARq8ARa7XLyHZNSfHHBMARJgAQaylHRSSEw2aGBCXFg8ASqQCSZzP0NDe3t7IHRP+/f2/LSGvIxkUV7bHx8fGGxLW1dWfGREVUrPS0tIAQ57a2tqpGBDDIxiyKR7v7+8APpS7JhuqIBbV1dXMzMylFg81PYjz8/OsHBLCGxLVQDXIIxizGxLs8PfzxsPSNy3nioS0LyQATq06csKUsd1Hfce7HRPhamHcT0P55OIkRJ337O4qPZAIQ6l/PGAdW7j22NYPTrLk5OTp6empweTe5/W1yee+z+rto53tqKOcOUzCNTPqop6SMTjgdW5eiMrK2O63iYde3UhNAAAALXRSTlMA+3ITWG9jVgWwhcDAS65FKJRgrp7b9iDom+iBlKKhi9s/2mi0I/pXefEqsnl1tfa7AAACmElEQVQ4y42VZ1PiUBiFM0pVQXTtbd1eUQRBDSIEFF1BWoBV165BQaoN3bV33V5+8L43uYFQVM4HJpN5npOTkJkQBIqs8dXrtnblO2V7W4VY8VZG3BGZqBJ+G589b3CP4bg9IUhTZbNY8SLPK1c0N3lWiSfKBrfb5dreNkFIMpiMLF1ezIVCM5DOyuYKca1IJKoVVzx66vF4pkKrBNDbQxCOJ4NWNRtrZOnCOzfDxYMy5b20qr0guIaGsEAKBC40DSJKxEqzJzKCaXeX5alcoSBzWDCZ0mmEUyUKpuDOdfLqZoeibA8JH4kxF+xJwnES8bZPJQhwu8FbtToN+PDwA4KXE0jy7+3NNQW8pYQrzKK/6+rc9ucU+JIEeDynJJpjsVg+PCwsz6LHyfOlCSzP4qUJFMXXQ87vF6ZYgeWPD47C4fDRwSF9r/APBNtx+OT7D7PZbDQaR0aM9i+fN7+m9ot49Nnm1jSxHD7ZsNvtPG8wGHp6Bgb0ejN431JnhzTNvrX7qZ+/Y73d607il9+e5TE+gAy9RqPp6tLoN2Kx2Ia2T6fr7e1Gwpaf57l6AQ48ilar7cN8Pxby6jGuEeIc3z/vJBb9Ar4YLuT75ydA4Ofw9Zq8NXgO4gc5obA+F8/wWMjhi6zJ9g9igeeF9drcesz71iaIgD/LF10j5H1rDiKwgm+3oF4nrOf4URAWVwz34ALeB/wke4UMXzA+g/M8J3C8Lr6AEo/rcvDsHMRjQbuwEmDGs2HWE3sL8W5BPZo/OhlNTDtACAQYhqmXPy6TSKVSSVlrXVX9y2mUcfD2olEf4KPRvcQ80A55NcEwLXXS8rwPjaq6rKaqxcllgo3D8UYuQVyV9O4PlKpa0lrTIZfLO2reS1Xcyf97H4DU4jQhxAAAAABJRU5ErkJggg==");
+}
+
+.flag.CN,
+.flag.CHN,
+.flag.cn,
+.flag.chn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAA9lBMVEVHcEytKBSiFgi+MhfANRmfFQivJxHDORqxJBCuHw26LRW6KxOlGQm3KBGtJBGnLAq2KBGzIg2yIg6zIA20IAynGgmcEwbeJw/fKxHdJg/XHwvaIg3bJA3iNhfhMRTYIQzcJQ7gLxPeKRDhMxbUGwngLRLfKhDVHQrjORnjOxrAMxe4JxCuHQupGQm0IQydEweiFwjlQR3kPhy8LRP/4gDILhPAHgvLHwvjQRXLNRe7Hwu3HArTLBLEJg/POhqvFgflTBO0GAjmVhHQIQzylQvvhgv4uwT91gHrbRHYJw7teQ3aMxX6xwT80QH1qwfCLRPZPRzpYRZJGn0kAAAAF3RSTlMAKJpxtLNF/ldjkJ923RQHg65Rx+3f8VR/1AsAAAJtSURBVDjLddVrQ6JAFAZgVGDxml12dU1IzQpSsBABNY3A+23t//+ZPTMDwyU8H/z0vMeXUYBh8GSEXKHIsmyxUM3zmSvmwlwJt/BZybG/8Lz6MxyW2UKOzyR05aZ4p2kMj/R8fj4ruq4otuPu5+PRvyGeMlus5vKCIORzheuypmmTicaAPr/D6Mgryupky7Ioivv9xwhyvWAAz6xtzYTAHPPvb8QVe7dURDyPMJLU3n+Q2XaeO7XaX7NPArq+WACXYbkd4RBA81Sv15+xDwJQ53DAHrXZ7ewYx76DfYsE9PfNwjCOxspBy+XTWklw6klAd1cGmoVM2jiuHXDqa8Q3J33mdQzHs1kbxkH2y0tJHnocmKPjN9Zrw/Gv9VGM8qAO9s2JCt8Ax7M5uvZpSdbbm6UYnE24nvggIC/R5Tp+m8XRhu1Bm5i/JwFZVmj7ttR2XIlsr0c48fdTFJAjVysud2F53Cbm/QDx+GzE1cr2yyTXI/8AgeE4rAMjufVI+aTHgZHv27GjifCgDvgGCVAfO5ooD3xj+gYBWifJaRtSB3zjCweIj/zNfnLf0wD9F9OjCdtEPQkQH/uhEpz6FxKI3lTxa6Xc9yjQGwU+ur6Zsh581w88hTdJGqf+pfs5YHqzmE+0SXgSSPh0TjwJ0GdIWpvoehoIb8JWOqceBbQZfYZcahP6rooC2Le2nmfBeN5DCg88+YbO1jKn/WBUtd+fTkzL+7neMtUBBOARrmnl60IJP9dL1Sz3W8XziXKWR6xlfoEecDyjaXfFm0ri3ZHhS5B7ozNA84fLI3crXH5BZfh8KZvlOC6bLQn+C+k/JgDaAO1vRXUAAAAASUVORK5CYII=");
+}
+
+.flag.CO,
+.flag.COL,
+.flag.co,
+.flag.col {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB4FBMVEVHcEzMqhbUtiCaCheOBxLPsBuYCRevaBadDRrWuSOdCxnVtiHSsybSshzVtSCRCBSOCBWeDBrOrRjOrhfPrhegDBvOrRfRsRyNBxPSsiaJBBDVtyKXChaQBxORCBOiDRyjDRybDBilDR3XuiTLpxLLqRLRsxzTsx2NBxKWCheQCBT80RX91h/91Br91Rz90hb90xj8zxT91yH8zRMALoYAO5b91R792icAM43IDiDPESfLDyIAOJPDDBzNECTBCxrFDB0ANpIAMYv92CMAMIgANZAAQJn8yhEAK4LGDR/92SQAPZcAKX++Chi/ChmfChfUtBzYrxDVtx8ALYQALIPXuiOPCBIAPpjQrhWaCRXuyBnjxCThwB/Fnw6UCRQAQpujCxrxziK9DR/SsRrOqhKnDBwAI2yKBxGtChi4ChlkGkwAOYe2ECQANoCpDyHctxfKpRDBsToAIWP61iR4GUi1FDJAKm/3zBWcFDIDPIvnwRr40h4fRXtLaHCFH00qUXmzozbPsyp0e1W8DR8CHl4UPoCpFjfewSokK3dbIVubGT+UkEiKFTqyDiMVTpHBpywPRI4ENYpuJFohNYSSiUIKKHl6iGBeaFkwIWVMJFUgQXZeem8bI20ZNmNSFDx/cirm3ycgAAAAK3RSTlMAVGVisFpvBVawwEUoppRFKIhziduenrwUFDV7lXuhrdrb7fHG7W/i8eKTgLeO6wAAAsFJREFUOMt11fk/InEcx/FBp/u2Hpa9L2ypTWS1UUhyM4h2GSYVVkgqdyx2Lfa+r391P9/vd2aaZur96NEPPZ6vz+P7WxSFps5X1hQWaLXagsKa7Lx8NZVh6qy78F2drb1Dj3IbxntQVXhf1lVnVd5j16g8LU3T3hmGCYf7HI5weIeZ3vaGhhfQyqsqy0qzlVlKZWlZQTnLsiNTaxRNnzHhFlgfeJjR6DA2NppRB9kUGVh2KrQdbQhBMNOSwo3A0cxms06n24lOk0Ub9A2wET4gXsp1usdoTfomvR57IZD4VA7jvMHABYLPyDlvGHlOjc4QLzqf5FL/BAe8F5+Xc+xx4BV5GZd4Eoh9htfwng+IF58XrgvnsXdCMOx1iM+ne03Sk0DmU69jznkuEHy61wjnkXeyKCCcOVuHJc6YDOexd7L/UMCsf9276unpmXS7m5ub3x/sHb09pA2y5zidiaM/G9TC4a+r2VnEiYe1wzrjuEtsRzGPht59/vZzbHxxgzqIzxLvJr4dc1h3d3cr7MPJ7u7uSVeXyWQaG++FYDnO++R1wrFvtdvtXZgjj4KXcZFPx8W+HwXLMi9w8Xns+xdf4WBSel7MufPYc8Gk5Hyr9DX4OciTAPynrY/756eRSOT0fH/zzdZrk90uPi/433/9EGztR9pgz/Ce4llWYqgbMwnP6e3/8n0pNjg0Qf2ItbXJvAU+FovLdRm72FxC27xYtdlsgyhYXUl6npO5YB1oVqsVafADQpD0HE7hOEBeCNKe7xC8jfcDHj8OEHdZ549h81aXlIs8F1iOL31zsCFuc75A8NiWwm2IBwMev5/yrQZA37xRosrRaDQ5qpKK3FsevCFfIBAMDgwiHQwG5jwTfr+iiPL5bldorkn+aIqLVNdzH73gN4H3UKFCLleT+Q+quCintr5OoVDU1ddqismP/wGAfaIswpMo/QAAAABJRU5ErkJggg==");
+}
+
+.flag.KM,
+.flag.COM,
+.flag.km,
+.flag.com {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.CG,
+.flag.COG,
+.flag.cg,
+.flag.cog {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABnlBMVEVHcEwDjlEEik0GiEwCjlGaEQ/KsjzIsj15dzICiUudExGDo0uZExGgFBGfExDIsTzNt0TEqjbKsjshjUcBhEUBhEYBhEbKszwCikyZEA2lFxOlFhPKsjudEw+dEg/KszvKtDuuOhsBkFOLDAyaEg+fFBK8Zilvlzr73knYHxrUGhbXHRn830zVHBj73EUAnk/73UbZIBvSGBX73UgAoFEAnEwAmUj830v84FAApFgAo1UAnU4Am0v720TaIRwAm0r8304AmEbQFhMAoVQAp1v83koAoVObEQ4Aikv720KxFhMAnU2gExCsFhMAiUYAhETPuEC4GBWnFRIAk1IAkEsAjlG9GhbIrzcBl0QAhD4AmFSkFRLpdy7pzEADeznt00rMtT2Gvkv4zUDz2kwAfz7IGBShxUv431ArpEj11kbcLh7xpjhGrUrlYyn610NYsUrw0UDjWCjeOyKSwEjshzPBrTbd1kzhTSX1vz8Vnki+zkzs21DQ0kvbwkDFoDOvKRk1jT0MnktqtUhxuEvmbSxuuU6/tETeRyLztT+9QyGeySlOAAAAKHRSTlMAYUUosLBgVgWaRRMooJR0c3OLgrzM36509rzf2mt7nO2F8RZWZcbH7iQ3ogAAAuVJREFUOMt11WdXGkEYBeA1giu2Y8mJvaSviChtTWQBEQugIG0RAQ1CULD33tKTf52ZeWd2F9T3Ax/0ufdc9ohwHL762poug0Gn0xkMHTUvauu5Z66e/4BeG2t0b2RZ9st+euHwq5eGrke5Rn5w6O6ee6GLy3I87fN9Rjc56RtLpxOJ8BI5lOtoreN5vq61vbMvl8tF/gW5OMIz6MCjxNyc3W4fc4o4tvLwOwKH8O1q+SSJAukZjff5MLePoXM6Fxw714XCF3IFYUIQ/rqTIU5Oq95H6ymX9jc/4ZuaMpkmkC8fKQFaX8Ed0i/qTcjPCoLt0M0CzNM1hDsc60o98cKJGwLxGTZHy6VvG0o99G8jbyEB8HOKx1y6vFLr0XzBdrGFvCUa4vxx8Jp6SfKUbhiHObb8EfbD0RgOaDxZ4/GUzhRO6m1758RDALy6xuPZuUYc1pD6cfMheBJIKB7WeMT9TWina5DfpX6EBMDDesTFH5uU4zXYj2eZhwD1pF4UxXU6htWPm7MWC/Uj0QwXThDP6sVj+l5nWb1L40chwLyI+6u42Zx1q340mOGW/MTDHHGjmpN+4MjTgDIfew2nflj1RhwIO+l8r3eDPknGza6fld4YXESBBZjv9a6b1EeDuXlvd5hx8BDQ+Aruyp9bqjwOfA1LZI73u6A+ecxd+SMtJ95KAuB3BG29y+W62GKc1Rut1uA8ChBfKsCfGeOB7ac8Cawgn7o8q1gTCGxbNFzx1hAOIJ+6qqwPnFg0XPXTEEiljsEzHsg+qgePA2srqdS+Mofwvd2RpzjyNFAqVNTnD6vXKJ4GbvCHsHywiu/gIP+nmqt+OoYDx+XV28gy3Onp3X0oGE0mi1ZjBSc+GptHgYdIbnm5r7O9jfxfb3vd3NMbi8UymRgOFovTRBeLySDS3foGbu10aJBvrPqiaWrob+npzWQW6c3j69b3v0W//Mg//wXV1PB+oKVZr9c3twy8a4If/gfiyXJn32WLuAAAAABJRU5ErkJggg==");
+}
+
+.flag.CK,
+.flag.COK,
+.flag.ck,
+.flag.cok {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.CR,
+.flag.CRI,
+.flag.cr,
+.flag.cri {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAClFBMVEVHcEwAI2YEKGcAHl8BLXIAPIMAFU0DK28BH18BJWcAM0gKLFgAGFMAGFMAHVsCNnoAF1IAF1IAImYBKW4FNXkAIGQAI2cAImUBL3QAIWYDPIEBNnwDN3wCOH0GPH4DKGYDMnYAFU8AFUsCLXICO4AIQYYBOoAAFEsBMnb////NECTSFS7MDyPQEyrOECXTGDHIDiDPESfKDyLJDiEAK3/HDR/HDiABP5HFDR4AG2QAHWfECxwAJHMAI2kAMoUAPY4AJngAKHoAHWEAKX0ANYgAOIoAJHDUGTQAOowAIGUAH2sAF1IAQ5QAIm/q7fQBLoEAMIMAHFwAIW0ANX0AMnkAGVcBLXsAJXUAE0kAFU7W1tYAJ2wAKn4ALnTvsLf3+fvXUF0AOYDfW2zga3nhcX5IcKv9/PwkQIIAPYe9Fy66FCrk5OSaCheVCRXv8vbg4N/VKz/mgY31ztMpWp/X3eqJnsX88PHspKzU1NTplJ6oCxnRIzfb29vJycmlChe/v7/mi5X219r43+LVHTjtq7P79/fZQ1XdZXIKM4MVPIrwusBJYpquvNcAKXCVpMZBWJCxFSrcVGTokJm7y96arskrS4wicknkiJFtga86WZu2v9VlfrELR5UjTJU0T409Z6IGKHTg5O59j7gDJGzR0dGvFCizFy6uEydFWojBxs+1RVGrDBrqnab57OzezK98bTheZXDPxK+2speDq7dYaVqetLmwp4Ocxdnk6fJvjLtng7UrUpfXOEsDOozc4e3GGinKmJ+xucayFyzGSFvVpKoxQnLKEybIiY+jKDTHxcbmm6K2lZiTmKTmh5Lzxcvq4M7KvKTfsqTDqXUSYITYw6vJrHmklGEnaJl8p4WHtMCip4bt49Cn8i/XAAAAKXRSTlMAiBTCY/6wVVdyAgdloN2URZSu21/95Jy87bSisHsqI0l7Kp+uP/Hx4isz3p0AAANySURBVDjLpZXnUxNBHECPloJ0x1EEBRRLiEco0UBMxwQTokhNsEBCEgIWCAFEiCi9F6kWcECCBaQp2HvD3rv+M+7eXUASouP4PtzMzry3sx9+t4sgENeV5BWefsH+/n6eK5wDVy5C7LCI4gS+js7L16rV6iRAMsH6ZZ7UwADX+bYjeamvVIqsCXZRq12y+Xw+i8Xi87eKxTx1UvIejMXLVjtQnclksjPVwWcxFyJFXIAsl8tZLMwHBUQs3sJLSk3d0wLZBeFyzRKFMMYMgmy5tS+GbIHweDvimamQ3Uwmc3dMjFmEqLNxv6+gQKfrLyhg3ZnVYcDbAYmPx32h+QIM+nRFndezaAS5hZ2tN3SnxTyo83Cd8G8VDZch6v7mXNoCZBQ2F93U3Wqox+z6hpO9XWdotMNlyIN9tD+SsR2SQaxAsPMvwXz+PXiOBzXG4nxNJkSbX5JuPGjPP/j0GQgqS9qrYmMZsQyGprIm3UCno6ipVlOeXmHVVRa3z1zcj9x/VAV0YDMYmbldU51GBggg4eGooTZTW95RXF3ccVyjMkWGhW0Cwbkci0835v34cnm7ltABoaGhISEhGyAREdDfWLofeZhj8Q01V69du3LpzcI65lsCqNPptT+vfvs+dXks3KLb+lEgOJZD+PTaz9M9PT0T49b6b35U6QEQED6d8Wn665WPE+9DbfXIsE2Yv/kICPYSPoqOXprsnnyXb6Xj2+M+DM7utfioqWL8w1sjaqvP+nhg8dFwU3n1a8acTpwG03EfBuex4HYdGAlAdUe+RmVAbbYn/KiRlyAwaButhiCrsrFEqzLNhGHbY8cB/j3Vi7FDR5GRx1n2Rq2monH0uLZOpVLVacqrK6AHgqG8fxnv/wrm/4v2gldYcLer92RDvFAoEAhS67ubThQ1Fy4Y5rY+SUOGhgdP43eOECsECoWCo+AM6JtOtJ4qnL1Qss6cGmxjR8cpkQstTIsvIHwFByCRSLYBBvT6tqY2vd7MZkcDQMCV4L5AgRkSCYeD+2CRCJDJZGwZGzIXCDlmqVQEScAQiaRsWaJFhwWui1LSlCAAV7h0iYcPuNcpFIob1cHdySMhBQLLaDZOtCghJU6pVJK8EK7UdynZcf7T4RrgRfV28kiJI0jDWEdyg54Txf4DtcrLLcjbnUQiuXsHUVbhD9IvmFm8sC6b/ZoAAAAASUVORK5CYII=");
+}
+
+.flag.CI,
+.flag.CIV,
+.flag.ci,
+.flag.civ {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABj1BMVEVHcEzKycbPz88Ad0TTfwIAYzbHyMgCg1TCYAGfnIfExMQChlUBgVEAbUDVggXEYgDMeQfU1NTT09PEZQjUhAfHbggAYTXExMTExMTU1NTSgQvRgAwAZjjSfAHBwcEAZjkAglLEYQABglLFYgAAXTEBfk0Af08AYTbHZwEAXzXTfgMAYjXV1dX////5jgD4hAD4iQD4hwD4gQAAm1wAj1AAk1X3fwD4jAD4gwAAkVIAi0wAjU4Anl/5kQD3egAAnF73fAAAllgAn2Hz+vcAiEn++vQAhkfSewAAl1kAklQAmVsAoWQAmFoAgk8AjE0Ad0T5kAD4igD4iwAAlVcAiUvFxcT5lAAAfEoAcT/++vUAaDr1+/jEYQDUgQDZcwAAhVTOcwAAYTTU1NT3hBQAbDzMawAAZDf4kBX4ixUAmV/4lRbY2NjceQDegwDmcADghwAAg0XJZwDg4ODv7u3dfgDUdAD7+/vm7uv5lAnNz8708/HtdQDrjADXbADyjwDt9PH2kwDqehPwegDn5+e3vbuumXGJAAAALXRSTlMAiJz5sLBuWVkFJXOUFGiUFN+89jV1cLzfSfiUk6JJoa6t2to/xu3xxytXViozDUXPAAACY0lEQVQ4y3XV6VdSQRjH8YuH1SUtxXJL21dZZRMEwQIl8XJVlpALQqKlIiEeOqhZaX94M8/MvUzM5feCF/D5znneIQh4lom31pk5vV4/N6MzTr23CH1mMb1An2P39NNyQk7ApjtVtPsPBoxTgz3diGn4ZS4nTOhlWa43rm9u0itpm+348rJ1d35SrdJON2TCGxpeeJrCywmy3Lj+nc2uoCFvO/68CGvTrlMmS6XKZU8yUkZBI5sFn8ZeDejav76RRWKxUCjiTtFA9b6eYHHvEywGXg3oOTafr0+AOXrf7U6Jglxn/bZWEFN9EgWJOuslLoixfpMGacq3JccRFyjnY79OAsVLkoMPQvA89dEcDojHzzucTj6gPon9DgTES+C5YC2iPI+9J5cXEhfEO8BrBMo52NOAeMyd9qOPPYGb9RsQsF4jIOcTH0DB/oXq7Whfe4MknE99QMQB6/1csImfV/ySeCDsn0rKOXa/38UF6/h5xZOg610uPogSTnwQgu7zmkF0p+vVQPV8QDj1W2IBAnqOy+X1coGHPE/8ch4Cxnu/aARdD0FJ8YivrnLBBjmH+F0U1Eqs54NAgPEf8odC7ZT1YS5YYj0EJeoxD2sEhBMfh4D1mgE8Dz5+UIEAzgmHNYNgkPE0YLxWAOcQ/x0FzRLxV1dneH9a7f+DLfo8eBrcnv2sFenGM5lM5+T8rrVHg2XGi4UKCmq1ZrH47Mmo1Yxn1Q08fJSBQfcjvovOQW+LeaQrhudCszk+ah7r+aMZfGzUke5vAe8Q75VhcgT9+Nrc/w8KdcbZeYPBMD87+e4N+fIfzTSIjmRyUokAAAAASUVORK5CYII=");
+}
+
+.flag.HR,
+.flag.HRV,
+.flag.hr,
+.flag.hrv {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.CU,
+.flag.CUB,
+.flag.cu,
+.flag.cub {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.CY,
+.flag.CYP,
+.flag.cy,
+.flag.cyp {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABTVBMVEVHcEzR0dGjo6PCwsLY2Ni8vLzDw8PJycnFxcXS0tLJycnPz8/Pz8/W1tbX19fW1tbQ0NDW1tbCwsK+vr7BwcG/v7/Q0NDJycnT09PExMTNzc3IyMjExMS8vLzZ2dn////XewDVeADWeQDX19fZ2dn+/v7V1dX+/f3CwsLl5eTT09Pg4OD8+/nNzc2/v7/j4+Pw8PDPz8/b29vd3d3FxcXR0dHLy8vIyMjz9PPXfQDUdQCmrZnt7e3n5+fio1D67+LS1cuQl3/r6+m8vLzy2LTVdwDvzaHgm0WKknja3dT39/fcix3rwYv78uf4+PjZggruyZvflzf35c3VeAbpuHn9/fzXfwr29vbg4tvW2dCbooyzuajMzcn89/Daiyr46tf03LzZhBvx062hqJPmsW65vq/Lz8TCxrmBiW7Fyby/wbnUdAG/xLagppK9wrO0DkYXAAAAH3RSTlMAqAJjsLAUVnVbKtudRXts6pQHRaCUiYi8vMcj3/bxhDYsiQAAAlRJREFUOMu1lelzojAYh/HEs2pr7+7GC1oRFG1VLHgf4Fnbij2cXrs9Z7f7/3/ciGNrQHT3Q58BZjL5PQnJyxAMG2N02Fd8BrPZbPCteNyOVUyHVXwHPq0e8/ewAknCa4x3y+dx7xrRtBV3eRkGc5thMlZhL2iZAIRMtzghn0iRFCTt3HJteOx23G73bBicySRDUhksEkmwMlBD0NCLRai0QjIJbzJW6YFDKESBPoTc4lhWYFmuNxl0maAhlcHCXyxk/0nYP2v8l1AU+/RCgT6bbZ2JD42PRiSLkQntZrYLg9qNMnaxVjgv3IFFAgFf+SQXCAxPC+JpEPJjtlclwHCnfXrfCCiEQqFg8BHJg8gRIvRrtZNcbpqG+fqwCxYJRRj/zAeD9Xr9HhXCqEC3VfHj44euWqBmF91A42Lh/FYkEOEAFeT27OjnXVAkbmS1EEOKOhhO479uO/uaEmkEGXQ7jcf6oNbp3xFzvhJSLZSbLCycSOt9VhqhxF/KykR6QhxLo8LomkcSlSi/UABX5T/NymeTe7kuLRbk57fy6+V0vYRUHr3MdlMaAZabf/rJN2GYu3x9f5KaYJkAZ3mT3mVaKvOj61IJ3VyqiiVjczYj2pT439Lz1ZW6FnoCAEJpbi30BR3SH8L4nygIAstd0MRSoVU5pDJjshOS4Vie7Wk9Os9UoUCRTCbjNGzaTDiOm2yb/u29IwUGegLXo8enQIvNpzLx6jfLGsYwXhduRY8O4+6abX1772BCXKEK06ZxbgfXP6Acaybbut9isfjXbbhjciD9BZba8+kf19q2AAAAAElFTkSuQmCC");
+}
+
+.flag.CZ,
+.flag.CZE,
+.flag.cz,
+.flag.cze {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABcVBMVEVHcEydCg7W1tbT09PPz8/U1NTW1tbV1dWiDRK4bW2eCw+gCxDT09OkDRLS0tLX19fS0tKjDRDW1tacCg6XCgyYCg2WCQyiDBGnDhHS0tLOzs6TBwfS0tfZ2dmOCAiUCAysDxROKET////WEhjQDxTUEhfTEBbODhLREBXMDRESSIEUSoMVTIUWToYXUIgRRH0YUooRRn8SR4CnDBAbVo3KDBAcWY/X19caVIsfXJL+/f2tDBHR0dGVCAucCg7Z2dnIyMiZCQ0SQnIaUoDFDxTNzc2hCw8URXXv7+/c3NwYTnweV4XV1dUQPm7HCw8POmjXKi/4+Pi9DREmP3KBJ0MWSHoXSnf18vLh4eHp6en6+/u2Cw/p7vTIFh9Md54vY5VrkbSjHjGXITeQHzQ8OWb0wsOUr8jK1+TsnZ9nLlBMNV5bhq3iYmbd4+rS3eiSqL721NXngoW2Hyh7HC/YHCIeUoj54+TdPEG1xdejuM63hIYBXMLBAAAAInRSTlMAY66gWIK4bVcGkp9dcuQoS92Ufii4r0u1FNAUP/E/8e3Hf1KXHAAAAmVJREFUOMuNlfdT4kAcR0NHigUQTq8jOUGatKiJqDQbEaSpYAEd69n19Mpff9/dTUKN5g3DD5n3PuwyzEBRmBGLzqZR69Uam84wOjJEyTCknYT3CYP+8xyGFxnW26DrsSdGNcO5HPVJDeZefb3UYFk3yzZKu+v1vQ2eXwSG9RqdwaLVai0GnXpyMZfj+RyVP7q/bbh7YRuoW17sgN+rl9wbEOQXmq079wBY1MEHInZLLH4GQSa/AFxfuBUhBQzTOlAUrJCAYZj4wnlDWZAhfjw+f3SrJNjMiP78LHOuKJD82dnQ9Ts3WSYB8pEONC8UBOJ8KBQMBl/+vhPsZIgfwn4gEPC3Sm8Hmz2+33908HYg+KLun4k27+SCORx0+TNA5OWPTMD/o3Zqki/o0WgkErlnB/waHx6fVqm1GvaleaSHw6fHv37fPF6ePbyyqGTZ17PLm22Ph1uCoOs4WK+cTAE0vIBtBO31IKZJIPhkHvQqPUUA/QdAe72Cj4J0LRTsmr867NYBycfBmujj+dOntk6LuuT7cCAeB+Yr1T5dnMe+j0uhQPDD4Z+HA3RpHnxfLEVtrYl+rdp3+M555OMgLRy/ciw7L/kkIL5wnEF620/EkihA172i+77KTl3wUVBMo+tW5Q5PdNHHwRb4JwrmkV/AQbgG16U9vizG5/F6ZeYTBSE4yZY5LtaG4/bL2cR0p078/dUkBMVnjuPGPpisKqPRqLLazeNjq5gYdOVsIQF2oVDe58BOOr9QxedvZtfHnj8ah8tqGh9bIqQwyeTXcRXyvhvl/6AcLpXdZHY6nWaT3eggD/8DBTAjtnv2rywAAAAASUVORK5CYII=");
+}
+
+.flag.DK,
+.flag.DNK,
+.flag.dk,
+.flag.dnk {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABsFBMVEVHcEydCibU09OVDCWlDC6fCSWfDCmwFD2HBBeWByCaEyadDCmdDSmIBRmiDCnCqrDDw8OiCymyGUKXDCWLBRqtEzquEzrFxcWfCyacCSefCiaGBRiZDyyxFT2oDzHExMSCBBWwbHe0GUSoDzG0F0GAAxbFxcWEBBaPBx2PBhyvFT6NBhyKBRmrETbCc4bR0dHU1NTX19f////HDDHGCy/FCy7BCiq/CSi8CSbDCy3IDTPLEDrJDjXNEz/KDzfCCiy5CCTOFEG9CSfIDTS6CCW2ByDMETy3ByKMBhqZByCGBRe4CCPlip7PFUSgCSamDS3QFkWkCiiwEjrhhZbMEj2yFD7PFUO0CCezBh+cCiTQF0fHFUS3CiriiJm9DDCmBh3VT2nFHDq+DjTEEz/GxsaqByHcdonQJUyqDjCTBx7IHj7OI0jU1NS7Di2tEDWtBh/z8/Pr6+vLIULXWnLQMlPtsb3nnKzx29+9GzrV1dXmj6LaZXvxyNDSRmD78fPPO1fBDjH7+PjDETm3GELkkqL55Om6XnOuY3DrqLbr0NbuvcXdtLvELUacOkmoGDDBdYgnyPNfAAAAMnRSTlMAWl4VX19XX19fB2uCradfX47rQJecdbnVHbN3L6zKi+V0Uu6pUu7vw+2yXKHDkhY7efnmAl8AAAKxSURBVDjLndVnUxpRFIBhsWABNKjYTe89CMKCgigSQFlFUETAQlMTEZE2wYY9PX85t+9dhg+ZnE8MvM8ZvN4dGhrIjLSqdaMvR3VvPzS+f9dQdwa1SvKq4+Hj7uXlJTR/voDpfqNT9TTJ6ibFkCi24LwP1JeJSMTn86045g8OcrnL/R0wj+52avualUqFSt05IIqiP4xB6/JlZG1tbXFxEfSOih7MdtB6EV/a31lA44ezExWiDOAe7nc45jFwuaxgbBfV+DqYqmHMYDDKAFwP+slJDFButdlsExMzM5axMdgD0M4A/jqgJ6BeL0Q9DEh9kAGU870MsB6DzzDH6y0wR72dgaWIb4XkQRcG8vWgNwr28RADCam3EjBB17P94zwgPTxLDGBOeyPqawDrKeDXk94U2iVgP4F7dJQIHOJc1teA4HY+XakUS5VjBLj1rDdlbrso2Cxd6/kpFwP5gsVIe5hXT0rl5B0Mbr7p6815uXiVPtqEk776fqrX5who3DvQ/9P8B+iSwHUxcLRZKBROvsKPTuuCH7/aCCjPn1npxYyhUzo8SZeOeXZ+HPiZdWPQdXNhlS4yAp/A2Qh2YessfxSIxWLp/FnG6ZyioHkhznqDAQNy9uDwTabp6Wmz2eycmkpxAPTkIgcQsOOeANzPcQD25F9LAMul/iMP2HNFgHw97nkg9QICW/L1uJ/d8BLgX5+RLj4F3J9Leh5YpIuMgYn7OrTnAfdgMUDXs36VghYAyHMLDocCbj3pJSBmYG/PRENg0ucQ4Fze80CIpsRw2APnNplM7v1OheacKJf6rMfLgB/UA51qlUKpaH9wr7//aXgXjCe8kcquzoJ+NbvhcXu994c7CBCHFDW/Hj2q3ucv3HS8YJ5pnnSQT5Xawfo/UU09r4Z7X2s0ml512wh98y/denPvkFKL1AAAAABJRU5ErkJggg==");
+}
+
+.flag.DJ,
+.flag.DJI,
+.flag.dj,
+.flag.dji {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB9VBMVEVHcEwKexszjGc7inUMfx5vosgHcBVflb5pnsVnncQIdRcxhHhimMEKfhtflr9uoMZMlJAJdxgIdBddlb9Ykb1kmsFxpcoHcxZsosYJbxUNhiBZkbwLfhwMfhwNhh9mmcVWj7sHbhQOhyFnnMMPfB0JeRoKeRoQhx8NiiGJtZD///8QpyYNoCIPpiZosedpsucOoyQNnyEMnSBvtegQqShlruYPpSULmh4OoSNrs+hjreUQqihyt+lttOhwtul1ueoMmx90ueoLmB1gquRzuOkKlhzg4OAHbhNiq+V3uup6vOt9vutpn8YIcxbaGSDV1dUIdxfj4+N5u+rY2NgLhRxnsOYJfBjQ0ND+//6DwOxeqOMLgRxXlcZLg7ILiR4OnCRjmsL7/fxoqdlYkb1xsN4JgRhRkMJvo8gKkRxelsAXrS9bk75Qibeeze/rhYj++Pjz+f3j8foYpTxlrNyO1prl5eVuqNJSjbtdp+P88PDiT1X3z9A5uU7K7M9Nqbio0e13tuN7uubV6fjb8t8VpjVZxWq758LE4fX42tvwpKf63+D76uu02fNIv1sosz9hnMmu4rY3pIl0zYJWqM5XrcV1xajncnbmaG3ys7ZDrZreO0HdKjDlZGnq9+3p9+wro2u9z93I0NaMxOsyfXsThzBlqXBzs30Ke8icAAAAKnRSTlMAegIUV7CwVppxlAdiYsBFHqBF25SC9msqKpSuvNutI+3x2uIjvOJR7cd/xM37AAAC2UlEQVQ4y3WVV1caQQCFF6Rajy2o6T1ZUFEQCxiUSIixBgEh6iqCCZpgAQMqsWuMsaf3nvzOzMzuzs6A3geevu/u3VnOGYaBkZeptRqNUqnUaEpzC8pymBOSo84Hv1la5alHMJ04l/M12oLzcprOUpdcSCaZAkgnwiurqx0g7tWVcDiR6BxBKc7XlGpz1Wp1rrbkdHEoFBoMJZm+nz+WfwUCHSj3QNxud3u7fSU8mug8GBkHeQwTCo0fjMarBp8wfU9ZNjizHJD4dhC73d7a1tZmM4XD8VGQuLe6sbqqyisILOuf3g1k4jbbLRCTqbm5uRHxdVgAmd7l1xC4DeEmhEOeFlh2JsrXEziu53kk3McC618LpOM03zQ4RAlg13JrJs7zdYDPFFh2rYPCiXrA3304xPSkCex0lMIp/jYlTIlvsmUzUWv4+ZCnhUnpuAK4HdVj/gEpzH9+iY1gtJGqF3lSmPrQPZlKYWfLRtTD+Yifw8KLhW6YhR1iVlo95OeSv8Un7LwH/Lsp4rSCUa83jV86+uPDk1JA2KbON/j249KbeBM/5/XS0feYocbTy/TcEc7oU+rLAoF/nd23mvV6vXkjFottWIwNDQZDDSXMs+z2vPgp1l9NWM2Q11dWWiwWo8DXSoKfmO9f3IS4WcJFvnZMeoKEH+5ZBVwPcZJvAUI/LQSfP5Nwqh7y9WNdTD/154M4PZ7keYF4wvqm1UqO5+uFOaC/nhaCsxMZuFSPeIePEBZPWEPyDp9LFI6rF9YI8yHvxMK3PbGexsX6Fog7nFhY3MdrLGlrKF4UDsGHtTQMoxiMx+ECH+GF2WEnx3lABvh4OC7iaBFwPB/gnl4XEHr+cRx36VyFLE+hUOTpZIVnzg74YIAYiTgdCI9EuDFAu1RFTP/fGxXXs/CtIYe3iPxKkS776jVfL0oXist1UaWD3E3FcRcU8nLKi/Jk2YUqlaowW6Yo5y+k/1EWkF8pxi5mAAAAAElFTkSuQmCC");
+}
+
+.flag.DM,
+.flag.DMA,
+.flag.dm,
+.flag.dma {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAADAFBMVEVHcEwAWjYCcEwAQyQAPyABVzQEVzQAUS8DXTkIUDAAUy8CUS4DXj0BXjoAVzIATywAck4BVjIAVjIDcEwBbUkAQSIDbkoAQCICbEkAPyEAVzMEb0wAPyEQbUsGbE4HLBgEZkHFt3cKCgoKCgoAWTQAPSABYz8DSym6urq8v762kw7Ly8vSsh3LrhwAAAAAaD3///8AbkIAZToAWDEAaz8AVC4AeU4Aaj4AbEAAWjIAUy0AbUEAUSwAe1AAZzwAXTQAflMAeEwAYzkAWzMAcEQAfFLTGy8AVi8AXzUAdUoAf1UAcUUAQSIAglgAYTf91RsATysAZjsARCQAaT0APB/91h8UFBQAcEsAc04AdEgAbUjWHTL8zRMAc0fRGSsBaUT9/v0AWjUAXTcAXzkAYTsASCYATSrKGSv80BRsWwvy8/PLy8v6zRX5+/r8yxIAd1HBHS729vb71R69Gyo+hmfUITb5yhGvIy/7/PzwwxHzzx0AZT7T2NYEZDarq6uDbQylhw1emDkGd0nEITK6urrCnQ67mhDRrhU6TTWlISoNeEwmhUXR1NOpjxWJiYkHBgLiwB2Xfg9paWlITlK9JjrNIizMIjlFQS8rTjI9W0GdJCwqUkCnKDHi4+N/LCnZsxMyfl09kXBMinAjgVs2fTIYZkIfczZMhS4NbDlAjT6iqKZSjzmDg4O+rx3zxhIvLy8cFwM1LAR6enrFxcUUEALkdoIJbUTHI0CbKTCRXMHXLjPcS1uMNDW2HSrUOknrlSSnTBuQwa7m8e2s0MJ0sJkfdE9MmnsLYDqNtaRZiSs9c1tmezCntjBonzzneCGJnCOtybzXxyebm5vdSyddTw3DwSxacRxgTwhubm5SQDGgpB5TRwwVekPvzB/eVCxOQzNlgGphYWHHoxCZmZnbqawjV057X7BjVY2TMTEbXTqbSJBkOTCkQobPNyyUZ3oMUTRdOyVsbxuPLTSpLxPx0dO0NmjP0NAGbkV8ODbxrBfZQSXsyMs7Gx9MCxNTFhwjAwdcKyqWAAAALnRSTlMAna6gsHMUXVcF205Cia6I9sfts6KTlHt7ZrxmKhAqpPwjb5X98dv6vOJJSeK8jxXvEgAABChJREFUOMt1lXVUG1kUhx8QSJC6y+mp7G67lg0M7BKKLAEmSDINaUhCphlKEgjWAM2mtAsFtrgWp3jdZdueuq67u7u7uzyZSQI9/f0xc84733fnzsx9MwCgBC6SzJ0903eG78zZcxeELAoE10mgZBo8BiyYMdVgMJhgskxZKItvu33Z0luXTPACgn2mK5UgxHeq0WAsTkq6GyYpJubOFIPpt7EGqb7w18U3zfeZ5C+WSCRi/0mTg26gKDkVAYzG4lS1Wp2amgr5JGTArL9Xqh8ZySq32WxWq9VisWRnZ1ssitjVCVAoVnv4GMzHxyOhdGNKpjktMTQy/C6USHhefYc8ighuHuPxW3jBbE5LS0tMDA0NXUn4WHk0MBQj3o0jPoUX4AUgTvhwzMdSUDCqx5dPSREEs1Dezadj4RpeEITyK9FtYD6M0gCTMZU8Tjeembml6Mo/fyOB4Kh9wiuUSLiGNw+cd7lcF372bofwCmUuMBkI78HNA301rt8vsq4Bvjzm0xHPRCAB880tB+6DOXSg5e3TPT1DruFh9mzNnkhcnrSDeEb5KsgyxLQ88/QL6zMyMlaRXHG5ythf+nobSy6G8+UJv3nfmw114PShVzJIeH7Vu2Us+823X9IlLP3Uvt1790N+/97dTzx35KjDAYUjHQjuqO+sykep6mw731jG0t2fnaFp+7N5eXlFKGtgHA7Hhs7joKHjnbaX75d6ha6pYfs+/aSHHnzjJSjkrSFxHK3Phxxoe2urdHxolmXPnKOG6ZKm3vyq6ur6D+uqq6teO044gI/67hMfVRbCnKx88bDrbAlNnxv6iqY5+4Ra+g8qoXCsvWKjzCsX3iuj6a+H+ukSp7ew9djrtesqToLuWp5bSyKTnYIXsP/4XT832H+59mD74a6urhPtlYUFCKo4CFpHZLIHH3r40V3NiWgQmnfteJ+jnT9d/eF7jrt0SjYupc8/qQWtrQ/sMOMxJmMDX9TnlxrtvVdHmzjuY3evawsqHt/5mDJHC3ZmobEXNhWegy+cTdxgk32bs4xJf2T7PSjb9yTIKUqpzFEBW7nAk7FBc9BIc6OjnNO5jWGSYeLiEhLkmI+AgrVc4PmxgXOZ/sefdjt32ZunME+ERM+mQuXhnIUVbfrv379KedyLj9KqgMXG82SKEa7YvGGTVF+wjuHLe/horQ4J/DeE5xUKQRDK4/Yxj4Rsm+ebQHCGEQQBd/NYsLr5MLKr3ALuRmgH8xoVEjCfrmBwB3HJyUwyIwie8oTHgiU8lklQ8gsaTW5uriZ6bAwJ+Ga9+RyVTgeobDlcCJo8xV8slojF/lP85gctr6uX6msLoRkVgROtyc3RQlonCgGUcrpPcMCEH82SW5YuW3FzjhZHhaPT3Siah7hpkuv/oBYGz5szy08kEvnNmiNeSBb/B5rLEmYzVfblAAAAAElFTkSuQmCC");
+}
+
+.flag.DO,
+.flag.DOM,
+.flag.do,
+.flag.dom {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACEFBMVEVHcEwDKVBYHT6oDyGlDx9WHz6lDh6lECACPGmlECEAFjcBIUafCxmsEiSmDh+sEiUBKlKfDBoBOWWmEB+mDR0AFzq0MUAAFjkEPGcCOmYAFjjIyMjLy8sBKVDLy8sIRW2cCxoBPWsAFTYDPWgAFTYAFzgAGDsAGD2lOUMDOWTU1NQ2W3zU1NTU1NTCwsLCwsLDw8P////MDyPOECTPESbKDiEAI1MAPXHQEynPEigAQXYAH0zRFCsAP3MAOW4AJVUAN2wARHkBHUcANWoAO3AAHkoAJlgAIlEAGDwAPGoAIlAAIU8AIE0AOWfIDiAAFjiqDyGkDButDR3T09MANWLXPE4AFTWtEiUAGkGgDBrWNUioDR3FxcX5+vm9DSDh4+EAP27XR1bSFS2dCxjYSlnX2Nj+/v5yhqHFEie3Eye2DyIkR3FBZo5CapLy9PTX3OGTqsEkRG6xDR7s7vEjQWv219pzkK1QdZrKEynDDSDmiZThcH3wub/p6ObenKO9xc/TJDhacpLbWWcyWIJ9l6/VLEHfXm3ie4fuqrI9XYJldX21Q0Szuby3fIUbNFUsiD2XpbLKaF1IlleFcoGcs6yNmHsMQ3ZNaIveZnMSNmW/M0X55+nCfIW+LUAjTnzz5uitaWVqZzmYop3GxsayT0eGe2JqlneZxqR+lJSidYZ/tILLjpi9npONl5fBhIGhrLdFFRLgAAAAj3RSTlMAKgediBTCWLBzrkVgYK7bVtuiUe2h/Xtme2YjSWVvP5/xtJPxk7KT+pSV/eK84ryV/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////pfUrkMAAALzSURBVDjLjZXnUxpBHEAPRYq99zG916MkIopIE2IAwS6eggWjKBARFXvvGmt6n/T6L2Z3jz0WiDO+GfjAvfebnbtlj6IQvMyiC9kikSj7WlFhCi+BOoEEoQB8JxWKzpnMiEaWGzdvXS8rLYmxk3IScx026ozIaTI5nVUVkKqq+zqVybzha4DkZwgS+eI0oVCYJuanZ9Q7HHa7jXI6nRU1ANYHBWCYdjPewMzLgRZEPcI+2GmRjsCghvChrtMN04im7u7KiYlHiAmZTCaVSkBgckZ8VlepIkF3JaC8XKFAfiQgx6vIAOnYl0gk9jYUcD7S1WocsDrhw8DsrIksR4V8HLSHxyvY5QDkMDBhPzxerdUOhQNiPOvjgPVZHfhEoIj25fYeGJC+VksEnI59CwgaTdjHOhHIIuORjwIz8HVPl8bHlv1+/9jY+NBbNQ6I8axvyd+Bwbjfx9AETIDxbffBQEr68va1YF8H5VkO0LG49/bm/n70Bqdn154vNkEWpyanX4ELIGjoouODr98293/NxV+gTwi6Do5+Hx7/cJ868B782fl+9IQ5dcB8Pv55+OW/wTYK3MH1yVWXa35+pcm1OjW5Hpz9tLX/4X38knybGhBMT60Quxjeyl6a8c7MvvN5o9Y51++pazVSr9+gvwmxzaSSXnSraI/hxdKzhX7IwsZode2DOhi0DLA+p4MH1cvO9BgM1Qbwqa6+B4D+QzaI8uFjjQRIj/hsgH1uG5BBtK9stcIg1peHg8ecjn0Y1A9wvgRvMxxwOvb1RhAMliuid71c7uKC8Hjs643NIIjzLTggxyNfgwLuDAnrFhyMEuNZHwfAl4dCnYhQiAzQ+PBygK+xNlOOQZmlc8Rhs9naID0A21bXTIBx06O15Hjgt1qbQQCOcJstK50vTgXneqqYf1aQdbUD0rCr0euVSiXwoQxta3IK5XDkJuYkxbw7SkrL7t65vWvEWCEXzxdDTyA8+QXFSykuuJKXfDk571JBJo/98R9whqgRsGScEQAAAABJRU5ErkJggg==");
+}
+
+.flag.CD,
+.flag.COD,
+.flag.cd,
+.flag.cod {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.TL,
+.flag.TLS,
+.flag.tl,
+.flag.tls {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABrVBMVEVHcEzDMy6aEQ+wHhqpGhauIx+jFRKoIxe1JSC2JSG6KiWpICCrIyC4JiGpGBXAMi6+LyqnFxSzIBygFBGfExCxHRq6KSSvISHBNC6/MCqxHBmdEg/CNC+8LyiZEQ5lIw4AAADaIBzZIBvVHBjWHRnbIh3eKCPXHhnUGxfaIRzfKiXRFxTdJiHfLSfdJR/cIx7YHxrTGhbbIx7bIh7cJB/SGRX/yCfgLyniNjD/xybgMSvhMy3/yy2vGhb/ySm9GhaZEA7///+3Ih7/zDKrGBW7KSS4Gha/LymhFBGzFhKeEg+lFBHKHRmzHRmnFxOtExAFBQP9zjg4LQviOTPRJSHlUyH6syf29vbqaSHkSCbULScNDQ38xilNPQ3veyjxwi+CaRnPHRnJKyXcNS8RDQLEGhXMFxM9PT3hOSNQUFCigBlcXFv9viWurq71mybeLh7xvSfVOjGQcBb3pCbW1tYpKSnYJyKZmZmBgYHyjCVsVhHUIRzbsCr4qzUrIgboWjT1njdhYWDqaChsbGy5ubnb29vCmR1iUBVaRg2qbyrUbTOvkCjRnx/BRxqnOxdJ+dBaAAAAIHRSTlMA/rCIV0VtBWJVdBQq3cCulN2doJSuvCOzou178X7xx7QlcuYAAALvSURBVDjLdZX3V9pQGIYjAgLi3tqR46AqIhbQmhaEyFCEIKFlCaUiinuPat3d+2/unUmI5T0Hfsh5nu++93IPYRiYOrPR1NzT1N3U0/zYoDPXMVVSp20E3/WG7kc1czVzJMG5YLChs9mk61J59cbWXkFgdE01IIeHpdI0TKm0tLSyAhyYhs7WWpPBaDQaTLUdDYIghEIeJvHj5+FrGMRPvwJ5CWKDXnA2OEsjzK5FLx1eD8PGl8W7W8JT/AWMDWT0bOkNyplr3GV3DEGBZRNX4vWtgpdw2yiIxWIZGxsbh7xzBAvs6i9RvMtWwy0Ih/OHRrwBJLDssiiKBamNhMvjMS8L7DdR9F9nH+K0Dub7ZYF9+87v9xfoXitwzI8Avj8kC2wCGnsbKhzXsTsxP6EUsJFK2ipxNJ7yE6EYEnLgE4eG2+3Pf8Q4bUPrI/4ZEd7n2Nw5XOPADXJhk6fj8RJPhc+7p1+20c7zbvfMzPGG3IbUIfwgXYFPp3P4rGZgUtkH4zE/GIog4Zznd8nOP0BhaieJcHk84QfCSNhM83z6FAtHAAfhMg5pvIIfCM8DYR3wPH+COm1hnDvOOsl0jBMeCfH7zW1+d/PTOjhaxHNcKlk5HeCYH0YrgN+BX0d9thC+k3Ep8AqeCuwJvrKIL+xTXDke88+psE14jtvbcCpwNS8JcXig+SkulbEr9kpwXAfxk+EF+XrnOe5iX1VeOR7yk4uScHMANmv/L67grZKwesWlspUnT9qQOpiXha/c3r5DfZQUR/URb130YeGIK7icVdrg8Zinwncu41RcMzWO6iCeCDcHSekWP2yDx2MeC/HfScdQ/2UxClMsDlTich2QMhKOklGv4PF4AjixgCfkXYsWh2Wc8GVvxAeExB9At3SA/3WtVmvQ17Y1tsRisUgkFggDsVy2Wiet5fKaNwxon0bHrP7tbTXWq140XTp9e2PLPM4Cis/3RKOH3FNt9ReUWafva2/TaDRt7X1aM374D8NkQmYN0v5cAAAAAElFTkSuQmCC");
+}
+
+.flag.EC,
+.flag.ECU,
+.flag.ec,
+.flag.ecu {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.EG,
+.flag.EGY,
+.flag.eg,
+.flag.egy {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABrVBMVEVHcEwAAACwFysAAABbCRu3HTUAAACxFSsAAACrEiQDAwMAAAAAAAAAAAAAAACuFCeuFiqsEya0HTOzGzEAAAAAAAAAAAAAAACqESMAAACyGjMAAACxFSu3HDS0ITa1GjEAAAAAAAABAQGpESOpECK6Hja4HTavHSynDh4AAAD///8AAADQEyrRFS3SFi/PESfOECXTGDHVGjXVHDfXHzzUGTPWHTjPEijMECTMDyPWHjqvDR3KDiKqDyG1GC/ExMTTGTPV1dXX19e5HDXAGjSlDRy3GjNVVVXyu8LFEieuEibhzIigDBrq263fyIHv5MDj0JSWlpby6cvDHTjh4eEEBAT+/Pz59/X38d7UtVXRsUuxsbF0dHTfZXMlJSW8FCnjeoXcw3bYvWiioqLlgYzKEymIiIji4uK1FSvEFy/KGS/Z2dn0yc/66evn1qHPrD3up7FiYmLqlKDqnKTr6+tJSUkSEhLj4+PMHjrbQFbusbe+VmNCQkDRHDfeXWzx7+rr3bD69uveTWHQLD3ohpXasrjT09PWzra4uLiwqZK/pqmKg29kYE/YO03ejnV9+IZPAAAAKnRSTlMAY3RYBrCf/7BbU3KU3UXdVMBFlHvvFPqeKhS8gmYqooWLx4uu+vEj7SOatF4gAAACPElEQVQ4y+2VZ1faYBhAAwiEskHr1u5hBFIQtSAWGWqbhgQoe88WquCuC4/du7+5bxJWSNLDD+j9kA9P7n3Oc04+BIJo5nRi47xUKp03zswa5kYgAUYUevCcmpU+2ASst5HL5Vq9UWx4OGBP6SYe+f2QQXrf6/WFT1sOx/KyrdVq1Wu13Bs5jVY/MSNWKHQKhfjuPa3L5Xe6/JDXGz5doqB8gNVqtdvtbnO9lsvJX1C4GJzO3BrqBEGY0Rm/rbufAMxms8lUqTynqaAWFEVXuwHjW2m/q1OBybQIWFmx0P6q8yUTsNZzdMpHaf8pCDZ9Pb9zTVcf9NtB5xwhveev0UGf37mmp3fOZ3wqWPcxft96lt5ZT/vtwGZb+pA/2Num2DsoZ84ciz2d5dcvfoDg7NNOdIFFdHfnT/7qt9vC6G3/Y+Y89vYZdPF5wGYIxenu/LCcz1xl8uXD7V1qDIKNd1ybiL8PhRZiPJsEArIYJ0JUw8EDgtfcMZZsYoFiguQNvvAFzQRWSCaHDwJN8ppMJDH+4BV3XEg2MDKQCAwfEESiiBcL3Dcb/EEcx0kMJwLCQdRTqqa3KNLV4DdPjGjgeOM6zvFj1SwIjoLHJ0gE6SOSvfz18/vXGNs+Su2fIAhUumS57O54Px0MplKpUjC9lWWGECJMBEG4y/4V8PI/GD6IqOHbSpFEIhEpb8mm1eNC9jisAcGY7MbNgR/NY41SNa0e+GpjsIjy7kiEf1CTGtGoSgbDsEw1Kplkhn8B6itI+fc9qcgAAAAASUVORK5CYII=");
+}
+
+.flag.SV,
+.flag.SLV,
+.flag.sv,
+.flag.slv {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACN1BMVEVHcEwAJ28AOokAOogCVJ4ALnkBN4IIN4ABNIECSpYDR5MDPoYAN4UFR5EBTZgCTpoAOokBSJUDOokBSJYEU54BOooAL3sAL3oDO4sAKHAALHcAKHIAN4UAPo0IWaIAI2gBVqAAOYkAOooAJW0AJm////8ARKkAVrUAR6sASKwAPqIASa0AQqYANZkAQKQAN5sARqoAPKAAULEAWLYARKgBXbkATa8AUrIAM5UAVLQAQ6cAOZwAS64AT7AAW7gATK4AQaUAO54AYLoANJcAOZ0AMZMANIMAKXMAUp0AWrYAPY0AKXgAVqAAVKYAOpDW1tYAJm52nNIAPZoAQI9Tg8cAN4cAOovT09MAR5YATpsALnsAQpEFR6MAWKgAQ5kAMoAAJGwAN4sAK4AATJjDw8Po7vfk5OO1zekAPpXi4uL/++37/P7Z2dn+/Pb/9tMES6esweIAMYeUrtnGxsb87rKzxeKastqKrttYh8m41aWbuN9gh8YAWLEAMI4ucL8ANJFslM3H1+27zOb2+Pz/+eR8m8pIk0hUi6MAQJ4ATqsAXLISWbQATKEAU65Md6uirr7Nzc0JUrHY4vIgWbGivuJ7pddGdL2uvdD//vz/8sH39NfZ47jR2LHr69JmrFXP3N2Pr55AfVpvrm00cXTZwabkzrqgtaNIg486fMVReLxkicYlVaooXbGEpdZCc68pSoSNnbn/8sLs57CVv6nC1r62xNXk57l1mYqGu3t6ka6xwcU9nFIRlhl/KPUuAAAAJXRSTlMAsIhgsHZHBVd2WCqdE6GU2rxR32bHvN8jZpShra4/FvHt7fGTMYBFqgAAAyBJREFUOMuNlVdXGlEURgcFpNh7SU8kVooosaPYaYICiQVBEgzRgEqwYO816rL33tJ7T35c7p0ZEAZZy+9hHubu/a3zcO4MgsD4MRn0oEAymRwYRA+nMv0QL/GjRYBnQDj5VjlMDchjNGEhQXRqNMELCPW/o1EjN8hSqVSm7ZupyM/Pr+D39c3JZC9rHqEJCwn0ofsyGAxfus/1YLFGIweCVKqdEYlEGRmQr+Dz+fdBsrLmpluBVgdTDSIWi+WmqRSWCQhakZPnY3wWyAOQtLQ8wXRraz1IOjchMYHLYslxwcm74UDIEwgEwtzc5ORElE+Xl6IC5OE42DQuOOCFQgxH+WwglGsx3lnvhjvrMT4FCjIP3gWH9S58gVwHBZR3q3fiaP0FX9AIBXeegGP1Dp4NhBoZ4DNeDXWtPIXp6VJ2D8wKL3CsHudb5xeAMLA63BLvHuPwyqpqYDHRWQ/55d620ecvkPl1Ig0yZrNZLPEtxuE2q1LZq+pWKjtHjPAACJVNl/AW87652eJ54EXYsHz7vrPb1Dx2ufDM461592D85HTc/vkS4Qny0FMYs5+fnZz+/vml2eOo8lLBbD/++2/v7Hj7qsLGj4nJycnzw23zFYX4zV9Hf9YPJrbiryqYbUeHE3v2Te9Cy1Jbl1IF0q183zOyNNq8tf91x7bhwY9++ggEY49q1rn16B5wl9eGrCNGwgoY23rrDWXIwodFgeNSYWsG9gYsWgE7qf7d2ptxa2dHR0endej1W05qahEQ6hqcPL5m2SjOZifB8Hi8wsLi4hwOB/CoUN3gcmlZEE8h4C58pkEBBJdL65gG43l4/QWfWQsF7BvCxeqJOKzPwXDAl0gUiLgh2a3eYxpHPeRLJHogOO44Xu+GE3hUMKF8NnuqCk0hz3V4HHfwuJBSZdKo1aUgOjSl7Y2DRRwcx+pRvt8g0esRjViuVquDr/lQfGk0mi/Fxz8ySlcLo2tv7x8czCyC9SX97QaJQq8gURGN5rZ/aADhRxNNpcRGRtVKJJIyPAqF4i4p5iY4jKB5/0ExqTGU2DgSiRR3j0JjYi//A7mKiVGeBltFAAAAAElFTkSuQmCC");
+}
+
+.flag.GQ,
+.flag.GNQ,
+.flag.gq,
+.flag.gnq {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.ER,
+.flag.ERI,
+.flag.er,
+.flag.eri {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.EE,
+.flag.EST,
+.flag.ee,
+.flag.est {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABfVBMVEVHcEzDw8O8vLzIyMhQdaPDw8PDw8MCZawAeLkBdLZmkbMCarACb7MCbLHCwsLDw8MAYaoEcbRpjrC7u7sBY6wBarEEdLfExMQGcrTExMS8vLzCwsLBwcHKysrKysoDXqcBd7gHba8AXacBW6bMzMzNzc0BbLG2trb///8AAAAAf9QAdtAAgtUAcs4AddAAbswAgNUAeNEAe9IAfdMAetIAhdYAa8sAcM3V1dUAc88AidfAwMAAhNbg4ODS0tLOzs69vb0AYaoAcMQAcbYAbrPu7u4AXK0AJT/KysoAhtcAdbgAaLH8/PzGxsb4+PgAOmwDBAUAesLo6OgALlEAHDAAZa0Ad8AAU58AWKTz8/OqqqpKSkoAX7AAXKcAfM0AcLzj4+NhYWGHh4cAT4wARYEGDRVDQ0OQkJCbm5sAZr4AdsoAfMVpaWknJye0tLRoaGgAOmIACRAXFxcARHIATn8Ab8kAgswAgdB4eHh6enpXV1empqapqak0NDTd3d17yUuRAAAAKHRSTlMA/rBYAnaPWv6pFHS4kmOfo0UHKNuCZrwq3/ZTSa3aUfEj7cbtx+I/i7ysiQAAAhhJREFUOMvtlVdTGlEYQK/0XkSNiaY3SECEoC4Y2QWkI0sLSmgD0gR7TeW357t3QXZNdphkJjN5yHnYh51zvu/O3IeLEEa2qNTq1WqdWq2fXzAvziIRZpXP4atZ0D1JJEKY7RGvdHqt+alMaGsem55V95BZrUokioPrG/va2nu7/aZWGxTroSRhTmea1yoxWr1prlqtRiJ7SKXKXvt88Xic+Hb76uob4F2tH6zXkx8wAUw1UEkeXG1UIBj4sA865xOd4Ha7Pa5+P0i4cngdjg0nDrI8n4yf6B6Py+V6C6x4vdgnQSLrmxzndrxQX8E6zHc6K7sQjP3J+FudN57461ww8kV0vr8e2UWh7E8+TyfjueNjnwTFsT8ZP9HH40c+F4BfC1ye5qOY/OnFfiDI0wX+AdtG28XQRSFjE3JWyLPQ8XTwK60oeOiyYBOlXYjmWba132LZfOGM+4ds07izfXpg+x/8aZA5+vKp+xH42vzc6BxlRO+k04Xg/OQ4bBWQHjLdw875na5d7uWoTfS9l7aKUKKOe83DRrlcbpw0v1Ep+AWBf8v6G1DM3w78DKL/2SCVLoUxpXRqepDODf0xjh0gRlNbufAvbieVoxkIKIqOxR49VMgNUqnUIFcY792fgWxmh3TcRtifG8YY5oHkNaLpF8YljfDpkFmW5QrogE0OhsG2AXsvpeIPlGUZb5RIJEaFfMnCPUg/AAWuOFkE87hYAAAAAElFTkSuQmCC");
+}
+
+.flag.ET,
+.flag.ETH,
+.flag.et,
+.flag.eth {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.FO,
+.flag.FRO,
+.flag.fo,
+.flag.fro {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACoFBMVEVHcEySoLnOzs7Q0NDDw8N7jIzFxcXQ0NDS0tK8vLzCwsIARIm/v7/T1NTR0dHR0dHZ2dnNzc3Nzc23GybHx8e8vLzT09O6urq9vb2+vr6+vr7W1tbJMkLS0tLKysrKysrZ2dnMzMzOzs62GyZpLVLb29uOJj4AR44UVpI6ZpnCwsLCwsLDw8PZ2dkreK2MQ2HHNELW1tYAaKebQV0acq3////sJTXtJzfrIjDrJDLS0tL5+/3uKTnvNEXuLz8AYLnZ2dkAXbfU1NTuKzvg4OAAYbvvMkPvMEH9/v4AWrUBasAAaL8AbcL+/v7wN0jm5ubMzMw0is7X19fuLT3x8fHd3d34+PgAcsSLOmjOzs4Ab8MYccK1M1LAwMDCwsIAY7zb29u1N1gAV7I4TZX3+v2+vr7oIC7JycnQ0NCPSnbi7fcBZb3pJTWNPmwyfcY7XqLo6em2GiXGxsa6RmYAdcbvMULw9vvz8/Maf8qOTnoCVK4BYqUFX7jYMUjL3vAeVqa+1ew2gskAccPv7+/k5OQyecIBSZTExMRrRH3RNE4XZ7Tl6u6kMliORnMWdcXC2/ALWrC5QGC5QmO8vLzUMD/HLTyuzOgagsvGGyYVb6ziNkfJMT+z0ewMXrR4rNtVm9QCcsNRUJDDPVuXwOTY6fUpUZ9aWJPHL0pFTZC71ewYbr+hx+cNb8AZecebxudzToJxqdonaK1YldBAUoerMkyTsMnYJDcNVJjGJTGHS3aCRnIAaK91P2ugPF0ahcwpiM2Lu+LiJzlZotjSJjumx+YMY7YwWqMxY6mYQWttntJxLlTNO1XnOEumSm89ldLO0dOMJkAmXpba3d+Epb+MM18sPXpOiMceVI6KITeDOWjL0NW3HzBoiqtLM18te7PoOEm7xbyOAAAAiHRSTlMAB4lFFAJTV3CwKP6UsGDbsZzHklz2vERme6GUcZ+t2vHt7bzbK3NhWSPivG954ipJo6CUrv/////////////////////////////////////////////////////////////////////////////////////////////////////////////+HWFWrgAAA1dJREFUOMuVlfdXUlEcwJ8THKWmOdt7bxRFQEjxQSxHIKS5EBWlBFeCGzX1uFduT+XWylWd0957792/0vfxkCMapZ8f+OGez+edd+993IsgGDabCbt99i9bdujAwVWr9u21QMxgQVgBv9ZE53Xhepgd2ptdXV03tHvcfYhW9jamtrWtywaJELFyBjM4QyeioDzKrazM352d167/YjIDACf31ZbE5QQCYTnRco1TikQSzhQiQUFlOpSEgwV8Pj9PHMaj5OoEwUEQpRiQwFNFpKMQlJGMUM7MBoYBHirKjdQBuSL8oWaC0jCSGeKESLhJIM7kU6l5UvNBsmlwSpxJpVJTlxI0UamsVO7ig9ImKmtJgbSJxcr+RxC0IGjMzg5N5ZgP1IaAJ+uvbxu7WMdtDA2l1ZoPvv3AAsXFe7fFpVKplMvlNtJoEFw4P6JAF9iytqmrDsjry6+yxGJxafXjkxjnaLSI2iMY4yV9vee7CxU5KIrmKOrHJkry2eyKn0jH9azxwbxznTBZeBvQIyIKnlw6++hhGhAbG4JBpzMAdkLi1+8qRDv98gVsFubjesRhIDAwsCBeWXk2saiHnp/PYDQMDFfWXCGT21XITAsf87NnfYMe6Ifj65uuh6xHDkFrC/74UFpBVVVVgYnui+MP4L68/QsWsJ6nDp6s5nA4MNV4sKOv3RxKN/pGnSy/8uGjA9IafWkSlpPDMQZ+SmyuRcOVypqhu+kGX36/5kaiRlPxGZnWSrkX+u5098PyyerS4uFtlCFpx2Bl6NjiNBQNJAJFmoSEBE3Dp8sxiLZjot74F4XADwtK0JzCB71TJaMMth6we8qftuWQmDHI+3dzvqVjsXhwwjCAyhSFxcUjxcWFho2HICB4fuCrpJ8wDvF4Jl8HMwlJMQlComFd5gbz+HsQxVh8QP9PENBsEshGIfD3j2KULyGAfYpiLz5g/D+Q4AEqgiMxo1ozI5eT/xGk6ANRxtEAoVCYnKy+WvFGpVI9q5gU6ES8BTZFIGmGgBkO8to1lkQ3N9ttW7e4um7c5PBWrT6thvNaAKcwhYedyZGCOGFS80o7D0QiWe9ia216ddhst9rluHPHcSAGIwloBtsT81YQzF9Q9h6eXo7ednZ23o5etoYL6Q8MmeobuoaQ/QAAAABJRU5ErkJggg==");
+}
+
+.flag.FJ,
+.flag.FJI,
+.flag.fj,
+.flag.fji {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.FI,
+.flag.FIN,
+.flag.fi,
+.flag.fin {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABfVBMVEVHcEzDw8PU1NS5uryjo6vR0dG8vLzJycnW1tbS0tLCwsLQ0NDAwMABNXC/v7/Q0NDNzc3Nzc3Nzc0BMWsBMmwhSHu8vLy6urpwfJe+vr7T09MAJFzKysra2trZ2dkAI1vMzMwAI1rOzs7b29vCwsLCwsKSobUAOncGPXlDa5XW1tb///8ANYAAPYcAMnsAMHkAL3gAOoUAN4IAM30AK3IAP4nZ2dkAKW/Pz8/R0dHU1NQAPIYAQIoARI0ALnYALXUAQosALXTg4ODLy8v+/v4AQ4zn5+cAOnnAwMDw8PEBRo7X19dHa6HExMRMea28vLyxwtn4+Pjc3Nz8/P2tvdQCN3QAIlzt7e0WSIzk5OTz8/QAPX5cfKuRp8egs88AI1+2xNozX5yDm77z9fkAIVgAJWIAH1Vog654mL+jttJEcqjU3OlPbZ45YJCbrMWsu9Pa3eFBZZeXprpqh7Jli7ff5vCFkqdWc6PI1eU9b6c4UnyIp8keO2tFW4OUm6jIh9wBAAAAK3RSTlMAFHQmBJqwVbVbdkVknJSJrtrHY3hR9kQIoduFi2jxvO3b7SvivOL9Kq6jtEZLyAAAAoFJREFUOMuVlfl34VAYhlNbUHSftrPvm1oSRSitWhu0GhS1Fu1oS/XQZfb52+e7uUHQzPD+4Bw5z/Pmup9zL0GgKN5oZMrPavUnvX55aeXjGiERBbkInzPP1M9jOJ1IIQL58F6tlM3KFcP0DKl8zQSIWTWA/jDLcamg8SAa9flMhULXjeJ6rFbOyTQaUqORzc0vMAwTcwcIh+OYTRmFgBCNer2hwyCXz4b9DreLD4MCrZwxCcKxcZADHg+FDoXvwRSXZ9ksy+Y5XDouINznOzRKBITYkOBFuMczuQC8x+OxSwqOUQHV2+32yd+A6u0m0+RvQPWmaQQe39qSFvaxUP9WPr+9vLzMmXiekhLy979AuPv5PYo3B9dTFJWrFmvpZj0ohoN35Zb5LEN0r9CwfGKcomiapugNGrybWqlcLpdqjU7OurO7eXZKRApivofTGzg2m81sNlssFqt1G3gs9HlcTw94EY75zcopcVTg+V79MD7KOytfQPCJljPajnARzwuRAf9QO8YF3plBQn/5D9UjHOoFXhCgv1o8L11cXFQF3DzAe/U87/z9B4Tc7UlvRHGhvXRSuonnzKJ64I9abda9R1y1U4NpxoXFpPnR1psn7Vqj+LXTKjZq101UCoLLLxp/XPitaak/37iAFy8tJEYEYSunEPDOX/9DYIYEYSunEPid355cwDu/Iym4+gI6E7PZDkxoFyb1H4ELJ90BPj8qGUjlrAuneXCMToWZBAjuGJAL80+1OpJcWVp+on/xKnO/D0HndTaPbgE4k9lwMpBIPFKtEgzzUknOjFw08lmt4d3b/b1+EglE6xC3SCqkLqg1+apOa1hXqVTrBi0pxw//AhScVXoUJRfUAAAAAElFTkSuQmCC");
+}
+
+.flag.FR,
+.flag.FRA,
+.flag.fr,
+.flag.fra {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABiVBMVEVHcExjJFfHx8kAJYAAGW8HKoECInqUgZa9JDCrFB0CMo3KysrPz8/ExMTEJjYAG3UAM5HU1NTT09PExMTLy8vExMSqEhzExMQMNo+oExzJxcXMzMysFR6uFB8AGnLBKDXCJzPFKjcIOZLBJTLBJDEDNJEAG3YGNY7AIS6/IC2/Ii+mEBjV1dXDw8OmEh7////qIS/pHy3oHirrJDPsJTUAKJoAJJcAKpwAM6MAL6AAIpXtJzbrIzHoHCntKDgAJpgAIZLnGycALJ0ALp7+9fYAMaEANqX09vruKjruLD2rExwAH48ANaQAOKb29/uwFiDU1NQAMpIWQKcAHXwAL40AJ4YAGHAALYrDGCPmGSUVOqL+9vcAI4AAIIbEJjQAOagANJcAHYPCIjDKHyy2GSTGxsa+FR8VNJ0ALJAAJ4sUMZgAGna+Hyu6HCjGGyfOIi/g4ODjKzveKTjPzs/n5+fv7OzgGSbBwsMANp/7+/v08vLZ2dnt7vETM4/RFyLnKjoPJXXmJzbAubnJ2ZfJAAAAL3RSTlMAFIijXXJVBVawr0mcJWDR9t+8vN/f9v2UcHZlk6GLdItzP67atO0r7cacPypvKy+vKWYAAAJHSURBVDjLldWxb9NAFMfx751fndRukiZF1CqqgABFQiwsjEhInRgqIf4Bdv4t/gKGLoiBEVGWii5IrUBCtJAQVNWx5Sb2MZyT2I0TwU2W9Xk/v3c+2Q4AtbsX+nq8urKSbUZb2f3zlOpVW7mnQMmt3m7qgAPsRMfAe3V5+0RfJiWtat1sF9U9c59CK+AzQH/rQTYyY/8IbF108/cluG3lqCegjKee0wqOOgMSXPqwNf4GwDNl6+70ABAYt53Wu0ep0DKnMz9d++R1GygwND/wFVIQgKlvXJ1y/+EAAAMRpIktGJDY+MaCzcEQASmEnjhT34CwssbGk5IAGop+bv00ZY9wPvEheEvyE3utoehNPbniI6II0olHnJS+bcezd5irmLRjsDNMvTEM53xa9KvEmk0ahCEehgpPQlrwPjJp3/KMikckTHwIkuXtLPKUPVLwlXw6rvUI4GEm8fMvwqg8nhAUCGrmvUUnKY9X0NNQ9PHcWVo1RQ9ifc6rn2DbQQG/0PAfXoHUil7mebhmdyf3CHn7MZUeyh6ZeQHcaq/yGh80/ZJ3rnpV9iNNfepdt3rqmZcmMst3AX8xtycVHbPcU/YIxEu5MrkXILCj/nN8AAhivd9BgI1Our/MI0C7EwX0EhLAiQePm/Wh1A/tRxl/OPXb9bPvqBcQwOvwxqlBZ6jUq2m9B2/2mvWhKNTHMRJsU/+y9oODi656xdtjZ1T+vtTcrHvU1vol+J8AGAEHF+tnBtWKVbLoB+Vm60arPlwz6Z+dQwD+AmekAUXYmfccAAAAAElFTkSuQmCC");
+}
+
+.flag.GF,
+.flag.GUF,
+.flag.gf,
+.flag.guf {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABX1BMVEVHcEwQnUkNlUD61Qb41Qf14BFTnyr40QUMjzn10gdLjxgVmUnR0BILkTuwyyAnoj2XsBFttSveyQg0hiH21ge+zx330QYKkjsPmUQLkTv61gcPmUb30gX30AUUm0buyQQIjjYKjjj51wcOgCYclzRCrDpAnighjCa7ugvryQf61QaBuygPmD96pBUQmkiavxwGiDAIiTHXnBNnpRzewQT62wkRoE0Qn0vp1QrDgRP83Qj93gn93wr94Az82Af94Q381gb95BEIjTQGiTAIjzYGhi0EfCcGhy783Aj82gf82QcJkjr81AYKlD0Ffij94w8FgCoGizIGgiv70gUJkDgLlj8EeCUEdiQLl0EGgywEcSEGhCwEdCIEbx8Nm0baERkFeSYMmUMDbB4Onkn5yAkThTFRXijwmA3XExrobRA8ayrgNRcZfCvkUhK/IBydNiKDRCSCQyPcJBd+QiHujg0gRMGwAAAAZXRSTlMAqnefXP4JslVP/iP+nv7+/v7+/v3+eLeT3NxpbZNEJ2CIiP7+/v7+/hPv/v7+sf7F7P7+Psaz8f7+/////////////////////////////////////////////////////////ljG9nQAAAJMSURBVDjLddXnW9pQGAXwyzKALNkgiFtr97ZhJEFoBFSKSgtFC5Vt1c7//+ldSW4G52Oe3zl58ykA4Cy77Umb7ZnNn7Svri0vgQVZcr9AePXd++HwG8p3lE6nk0okYc+k/S9lGazZhigMb7fbnc4pSirh37Cvu93udftGItU6OpLlKnDFVoKsb6Mg3ThtNBqXMJVKpVxutYivAkmSXIEd6vE85khjjzkqEN9DBUlqxnbUeSOvUA69XO11SUFqNgNBbV7h7Dzer3bP6RtgXI+fmLnB92ihiSP4gorXc9Z/ApoXBNeKiZN5zaOC6gWhGNhmv1WbV/0Z0Pmi4Ns1ceJ7xJ8BlsPAszAfj3UczhNPCpovFvKF55dwfHJr8OfEfwQGjxLbLrd+/lK43qOC5jEv5KevIuPZg6zNM34Amob5Qj4/+tGf9fu/J7d36vmqHwDjPApsoDxMlHnNfwYWHjaQ/9vFHM+r/gtgPeU8P4V+dmfg2MOC0fMw93/+zfsf9rrkGtZfkYLeH4vz0XFtfn+4q3DNXwHFa5yGn5air1U/oB4XLH0Npl4PbSnz1H8FjDfxer3k26PnUA8LFl7lJVE89OJ5xV8DxevnCUcRS6EtxuOC5XyJRhTFcETzqKDzNd089idi9KnqbwD1VtcQjhP2Un8DWG++hvqTi4v9CPa4wPhFHGXfSwuat7xG8TDhkPcaEJ/mNuNOp8fpzGw6uHTUPE8y4t4Anj9weB4Z/h05TybLpQ3+gMsg99a5+AeV8zjjWQfHcY5s3JMjD/8DUn67LfIutFEAAAAASUVORK5CYII=");
+}
+
+.flag.PF,
+.flag.PYF,
+.flag.pf,
+.flag.pyf {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.GA,
+.flag.GAB,
+.flag.ga,
+.flag.gab {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACBFBMVEVHcEwDk2UEiVoEmGs0ZKIXZ3QtXZ4eRoS/mg4BeEnUtR/RsRwAfU0qWJcIiHIDlGcgSYokT48eR4YgSooqWZgqWJgChFUqWJcBkGIiSYYChlUCgVABl2oDjV4Bi1wCj18Dl2oBjF0bQoMEkmYkUJEkT48bQoICh1knVZS2ozIymVYBgVIrWpoBgE8EiVv90RX8zRP91Br8yxL90hcAoGIAqW4Ap2z90xgApWgAo2Y3ccL8yRApXrQ1b8D91R0yarwAqnEtZLj91Rw4c8T91h8vZroza74sYrf80BT8zhQAnV4rYLYAoWU0bb8Aq3I7dsUArXUwaLsAn2AArncAkWMBpmo+eccnW7I6dcQAmFooVpceR4gAm10AmlzwvxD0zx0ArHMlVqkAglEAjF0AlWgcQ4MyZKMAh1cAeEf8xw87dL8hS4x9loowZrMApnCzxzUAl1/TsxwAkVbRsBgAlVgkUJGYwDmTnG2no1bsyiEAmmUoWKBIslK/rEFru0xFd7PEnQ7Cmg30wxDAlwwAmWsyabYrXqgoW62IujkjqFpXrkN7uDxzszvPuTpjhJR5i3tlrj3ayB62wCcRmFXwyx23s1gemU0AoG0hT5srX6/LySiGlXiqvCqgpWW3r1DVwT1ugn1QdJhpbU7dsxtyjSTFng64pkL51B+Ei13AzDVJfr18pTqCRMN8AAAAL3RSTlMAell6ehT+enp6enr+WAmvXrSvmYWobGucO6eD74/HYYPu7zfH7oN1dXp60dGrQ488P5AAAAK7SURBVDjLddXnUxpBHMZxJQFTRBiwG3tJDyJiEDk5LGBEUYgQjQrSNEYliTEUeyYq9jZjS++m/JPZ3Tvudg/yvJTP98eOb0hLY5ZVWVqWL5PJ8ovTRZXitJQTF+UmtEh2LRAI9DHz+/3lJfm598hMLLqbmXmZ4WVAr5yEaNvIiI0ONZzMzsLIP1ZeUlh8vVQkEuUWFd72+TJ9bHBhZSX0EKwXeJuNpmmtVtvg7Jp9Dho4H9rY9PBAIgj0cp7lYE6nU6drBBnckMPh6OyceZIIRpK8E3ldI1hXV319PfRDfGDjfArO+WE+oJHHz+tw72D8wDQbpAdozqc+jzwW9IWQx883Cj34AiJIePI1ieczHg9stHZ+MfwMLry+OL+BceSHoZ85/n6JDZyLv8/bwJqbm1taWtRqtedteGt+g/DH+4fuH0xw62+srY3zarj7YBqN5+AwvLW9ubm/vf7+oK62zr3MBFdeeFjOeoZrNCpVB9gDsFqwOkFAnNcwXkV4MsDPYxz3Te7XfCD0KvI88oIA+WSOeS64+tKT5DsE56Fvcr/hA8xjnPTjWMB68n/DcN4Tgfr801FkEi7y4eNOLPk88OPfvmawQexo8o/L5erp6W9tbdXr9dTS7rvoTozw7p+f1waZ4OavJRfiCa+nKKq7u9u8tLsXiUYXFhaikb0vU1ZrnA0ujj4lPIW82Wy2G412u7293WSyWCxWq4EIAO8nzpvNRujboTchb/BiAedxLvB4QHozdp57j8HwyBvkA/75/Gu486wXBqnPo+cwHg+gp4yrU3CrSedZH+cCCUWtrkke85ubWzuzmLDnoPung1wwKpFI7uRk50mlUvmN7Jyq6ldwsIufQR73ek8ngsGKGjEbSHKkgl+PgjxlVfUE2iBasEIhz2I/zcv+309UgTxDqVQoFMoaeUHij/8AjuSbgi1rSgoAAAAASUVORK5CYII=");
+}
+
+.flag.GM,
+.flag.GMB,
+.flag.gm,
+.flag.gmb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACKFBMVEVHcExvNCQkURgoVxskUBm3HTWyFyy5HDWsFCcoVRusEiWwFywjUBhuLiytFSisEyYdRxSyGC6zIDMgSxYoVxwpVxsdRhMkUhmnDx8fSBQhSBWxGi+2GzMrWx2pECK6JD0uXyAdRRIkUB3///8uZx/TFi8tZR7VGzc0cCTTGDIzbiLRFS0yayLPEijPEScJF4IpYBvQEyorYh02ciU5dSfUGTPOECUNH5A6dygIFn8OIZEQI5MoXRrMDyMRJZXWHTgKG4swaSAMHY7KDiI+fCwKGIXXHjoLGokMHIwmWxjXHz22GjE3cyYfSRQcRBIIFXyrECIKGYYTJ5chTBWzFiwjUhg8eSopWRswYyILGYfCHDcnVhrUGjV8pHF2gL6uDR0sXh43ayevFCg0QJilDRxXYq/9/f4PIYYPIH4HEWoHEGCgDBrEEifyu8I5SKREUKOnrtWlv53JzeW/0brmg4/KGC8LG4wfMZmQmMtslWD3+PmEjcRlcbivx6i8FCnk5vL9+vrurLTbQlZvebqyDh8jMZDfZXMhTxbAGTLi6+DGFCr66etJfziTtIrroar0ys/e3uXQGjLNHTkWJHvW1tfw8PfI2MPqlqGLrIJbZ7C3u9wpPKHeXWzv8+7SKDx0e7fjfIcjL37S1em+VmNPg0Dkc4RSg0TxvsNIV61JVah9hbTLy86rt6dCZDqZqZXBwcF6fZy1vN+6u8BgZpsQGWjasri/pqlzfKp6Cf1rAAAAI3RSTlMAFJ/hbbBj/VZX4Y9IB3LArqEolIhgs7yceypJe62uP8fxI98DtjUAAAMlSURBVDjLfdVnUxpRGIbhVUFBsLdYUjVWbKCosQRjR0VFEStKBFJMQAUiWFCx9zL2XtJ7z9/Le84uLkswzwc+MNd9ODswA0HgBXNieEFsNjuIF+MdHexHXDE/TgC8enizfaqpNVU3ofkG8Pyjg120B+ear0ZD3GT7+Pi0tW1sJNyHJXSsm81ztqamh2i+AUE8f28Oh+Ptz7vhW6/RdHVpCNAbUqm0vLwcOFoHLDtp3bxgs0FWT2/KViKegqBN6uqzk9DuwlJSzAsLz9BKxGlisbjQEVx6BkdBSkomLDU1DXkIenHgxEnP5MhjXljY1UtUt0ldj6e5qycDJ++e076EDLBnHE9z+vrI42DO4d1z8njKU0FCgtT+amfiOdrKjmnGfpxJc4Y3X/yGwG5aHY9lTLe4umI6tK+nOfHCkuOZifHN78TFL12s7rxPtWc4GBwc1Ou1I8N9A2M61I0vrk7smE5nDmdOTStvFuGd8x8/ic21byMHcnkRLD8//x4sJyfngVyPui2d08eO7at68p48Jf5My105BLDKykpJUc877aRKpZrUGqbT09PzUPD4Efb5pHfmLySSCklFRUVrQ0NZWTr2VMA8nuYSzFuBO3wdDpi3/4c7e0dAX+d/HDwVAJfr4eGGLejx9IM5JCcvz/B1Z19R8NYyMOT8vQ2t7VtGDNP08ZSfPhnY/EKcvR+Dr2je2L/cibbcP7o9T+ZbA32WE62hB82wN9wHbujzJ+LD2tFo51Jpc3Nzbm5uFqympibrpXW3f3ve5QdzZOxUK2qJj9al0lLaA68RiRLRkrNeW9EnGo3G0f5d61K8UJgBgVrt8Jcc+2SYQCAoRouLi4sHLszImCUDJ8/krh4FLWqmT6Q8k1O+YFYGAXV997dh+oJGHND+ak76KhQIKO/+NvTxyDsC8KJEjOKKi91w8njwVbU4EAlauruVaO14SmWBUBhPcoZX1MogaAHd7XU9lBXG5XLDWKGeEV7tCrx2JbAM6jaKWdCyQD4B2JPv4fLfcYfPConwUjTi1eLJZLfDWcjd4l79BxXFZ0WGeAaGB3qGRHKjyDf/AtOArHQBINHMAAAAAElFTkSuQmCC");
+}
+
+.flag.GE,
+.flag.GEO,
+.flag.ge,
+.flag.geo {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABZVBMVEVHcEzCwsLS0tLCwsK8vLzDw8PQ0NDJycnS0tLY2NjCwsLJycnPz8/U1NS+ubnVtrbV1dXAwMDBwcHR0dHNzc3Q0NDNzc3Z2dnY2NjIAwPLBga6urrEm5vMAQHLAADKysrFxcXFxcXZ2dnSAwPTAgLUAQHEAADCAADDAAD/AAD////R0dH//v7Y2Nj/vb29vb3y8vL/2trJycnMzMzW1tb/wMDa2tr/19fUAADc3Nz4+Pj/bW3T09Pg4ODm5ub/i4v/zc3/Bwf/+/v/Skr/5OT/V1fFAAD/q6vk5OT8/PziAAD/3t7Pz8//09PZAADAwMDCwsL/JSX/6+v/DQ3/tbX/ycnu7u7/Pz//xcX/Gxv/o6P/rq7/FRX/dnb/hITp6en/9PT/np7/l5f/KirwAAD/lJT/x8fhwsL/Ly//NjbnAADWoKDera35AAD/Y2PTX1/jZWX/eHjGRkbCCgrWcXHOAADGAAAUJbPIAAAAbHRSTlMAY5gHsBSHVluwdyrDdfn+oY6g267k7WZEI/FE/JXi2rzb8UlvvEm8b/////////////////////////////////////////////////////////////////////////////////////////4xcG2NAAACcUlEQVQ4y83VZ3OiQBwGcGJUrDFtUiblelkCooK5BGyAhiSQpmJvOZNLv373+W+XEjnEmcu7e144O/D/7boLu2CYnnAg6pkNBoOzHv/ySngam5BpPAJ/fcvBlxRLsaPcbb7ZeP1q1VHtwz1LKoOtBCmKyvZrHHdAEuQBxyVq/fvjHZTYQmTWHw0E8EAg6l9cUFWVzTAYRe3XDggYraUQZtIAPFxc3F5RmS09Kgqb7XPELgT7ZlUJNGwAJYlGTCRqMAlO79QGSJIHjbjiAGbEctFsjUC9IsCStjuQQckCKQvcNJtAqlfdAElo4Fu5oLe3UxhrAAX+paOxOei5bA5BRZAcgCAkoToBwGbl7PMYEEnRHRSVBuiad+zAFsekyerjpP8NEEraeqaUBQaFdr7H83w+L6eTAycY5f47BGKVvxaALULHFYiF3vB4D4t97YAJOZP4fKutocgfuxKqg2DnEDwh/yP4YYBhqSd/KpTLSqEhX3ZLw4nL8HMGAum86FjtuHn7r8Wu1HsFgj3BvlyNPx4TfBDLWvs8j9KKJ/U3DYKtrFmlVRUnGO/KDkog/jQAN1Cy6A5E0pplhrZAaViBJbI7aD2+3iNwI1TAdXMCaACeVCygGkAboD1NuoHzeh00O5IDwD0Nqu6TRntaEMaBUhbdwVFcBl3SGHzrEcAzsWaeieTYHEZ72gBcfzfDMEzKinp3eHvxYANHLU3vNKfSEGRYWPxs0R+awnF8KjQ3//zF+h7M71+xbM4YEZ3JuW2Gpme8a5iqLnlwn+Pbsfr2/ca7zfXT09MTIzSNqqdQXQSf/IEKr6ERvV7v/FwIDxsX/wAsmzRHI9pocQAAAABJRU5ErkJggg==");
+}
+
+.flag.DE,
+.flag.DEU,
+.flag.de,
+.flag.deu {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABTVBMVEVHcEwBAQEDAwMCAgJaSQnBlQDDlwDJnwDFnAACAgICAgJmUQTIngDDmAC8jgABAQEBAQHGnAC+kQAAAAADAwMBAQEAAAAEBAQDAwO8jAC6jQAICAgGBgYHBwcGBga6iwC9kgDDlgDeAAAAAADdAADZAADfAADgAAD/0AD/wgD/ywD/ygD/xgDbAADhAAD/zwD/yAD/zADWAADYAAD/xQD/zQD/wwD/wQC9jgCiAAD/vgD/vwC7AADQqgDNowDBkwC0AADJAADgtgBpAADUoADziwDjOQDtuwDFmgBHAACrAADTAQDXqQD6vQDsZQDnUAAMAACNAADxvwDvcgD6rADHAADQmgDnrwAuAABRAACXAAD3xQDfrwD0uAB7AACCAADnSADiIAD+yQDwfQD8xAAfAADqVQC+MABbAAD0lADdFgD1lADiEgDYhAC5cgD43beFAAAAInRSTlMAoFd0BXOP/lqwkhS7n6/dwN1FYFGC72ZJ9io/KyMqtCP9ioOELQAAAfhJREFUOMvt1Ulb2kAAh/EhLBJ2sK5dhRJZhApoAYGIpgZZwo4IiPvS/fsfOzOZhJAh9fHQW/+HHPL83sncAgCa5Q1jdphYljU5VtbW31mAwSyMDz6da+xqaH5en8O8/lbXOV+ZoAOv2ZDhvD7TinmZYZhls4P1yu9A6IX7H/zDoH3+9bKTR+tcCtXztpFuVzsweBBqwSTctjyO44L1cofuHkbjerEGquPtZHLmObwgXmJQG18Jwqg6EoSr/CAczmRgUDyiPQmCH+ES8sJh5DNlNXieI58u5kFxsPA6mFM+XZaDv3ONJwHlaU68HMz8c1wTzPwCPvNqMO8T1PGKr5OA426um70TtF6zJd7oj1d9/ek3DH4+/riPRD7B7eOlUrf9b71H8buOp8Ve/8shePq1H4lgr/BULBaLx+O7u9n+yV2z1RJF8brVvOsXotkCDErHWp/CHnO0Hby9vc9w0WgWBjk50Hh8PM1lrwTEa26j4eR47Emg9XGD46OIFw5woF5nwW2014GeBNTxeq76gzMUYH876XYrcN3J/Tyf8ySYVC5KPM8vKeMbF8OKRHNpeJaDQaMBsd9ls9rRrDa3y3+Kh7upJEEtTafDBtQbngAo8Utuu1P3p/kQsNpc/q1DZTm0jfdW5Fx24x/UZgB90ePxuOH3N+WXfwD17xo8wkm59wAAAABJRU5ErkJggg==");
+}
+
+.flag.GH,
+.flag.GHA,
+.flag.gh,
+.flag.gha {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACAVBMVEVHcEyyFyyzGTAASCcAPyChDBoASChoKzCsFCcATSywFioASiitFSgAQySsEyYAQyO0HTOzGzEATyyrEiQATyxgNCu5IzqwFisAQCIASSgAQyQAPyG3HTUAQyOzIDO2GzMAUy8AVC8AOx6oECEAVTEBVjIDVS+6HjYAPSC4HTanDh4ARyb8zhP91Bv90xn8yhH8zBLSFy8AYjgAWTEAVy8AVC0AZjsAXzbPESfTGDIAXTQAWzP90hcAZDr91yDQFCsAaj78yBAAaD3OECUAUSz80BTVGjXQEynMECP91RwAAAAAb0PUGTPVHDfXHzzWHTkAbED91h7LDiLRFS0ATirNECTWHTj80RW1GTCrECIAQyOiDBsAPB+4HDWxFSoAQCHgvhsARiWuDR3BmQzGEynwniFTjjPiah7BHDbTtBwASSjBGTLUqA3XrA+vqx6XnR7pfyDtjx7CESXdUh6SpyfuyBf3yRWbgQwJCACskg/RsRmyDh/GoQ54nCvowRRcgyX50BfzqR5xkCUjHQLSICVGOgb2vxNDgDDEHTjLHDe7FSvQGzbatRHfViK3mBDVwh1TRQb1tB0/NQXZNiyqoxngeCUjcjM2LQTKFS0HZzi4sh7TrRO9SiDdRDHkZCwRdkIlaSvaPClpVwmMcwoTXyxRQwbZmCNRQgWLhhUpVB6+hRC3rWHpAAAALHRSTlMAY66WsPxvBVZXoGJyoMBFRZSIidsSFt97vBwqs08oe639+trtx1H68fHt4pmpS10AAAMVSURBVDjLjdVnUxpRGAXgFRkEe4uxjaZXQKUaWCVYsUUxKIogYlAMRrADsfdeRmM0juk9vzLvvXcLa8nkyDDj8pzjO36BolDiCqSFafGifFF8WmFMakEcdUXipMnwnhWT/9Dl6nB1kHRDrienJV7oZUnjH3V1Uami+y7XwPrGVjOkqWlra2NwcBO3UC8+IzFGKpXGJGaIbnd2dvX2dlGgN56hNDe3N0FqamoaGxuflJx4Nze7uzv59E6NtrZNQWGd4dgzHKUE8tx04vV6R0dHvd7K0srKNgsqDPC+BnuOQwFiMtXWlkLA8wV8ftR8NCe+Eu1bLL2kwJ5zgeP5KN9KCuw5l3DuHOJRoWPgEs9z/nzkcWGQ+H9xzpMC+Pb3H4ZH+lBGhn07n5dNPGc94q2Wsz9QODxasJaXW8utVmtdnQJeCuXkwpFv7HBZOL88NmIemqbOfpSjWDEHDFFCQrs0Xb26AH/QtzM25vMN960WFxcXQeFlD+85rlSufKFp2m63V+PI5fJi5IuGXpAC78HOzivpifqleTqK40IRVxDOzx4vrazU1+/OX/RFr3Ahel6ppOmJg3qU8NL+NsNZb4bC6x6Bp1Emv+PGwTbPiWcL2Cs5b7dHkP8q5znjmQLnGW6376NCSDiPPCmc99XVE+Hj6VD4p2Aee6agUMzvBcZn+lFmZsZP9yKhSbk8Ep48N282r/76DYWJ8f6PDQ0NLS0tT1EqdLp3b9cWx08j08L52Tdz3/wOKrjWgEN4RQV4na4MolJBb24xGAwEAsHg4twntUaj9bsplU7gdYxXQfToxwAxGtVq4Bqt1uOm9GXcOfy8CkcPEXq2wHr+GgHnfZXHSRnKzntu3sDNs77K4aSMqv/ixDMF1l9xDTOPvA0V9MSXkX+IwaC/yDlvc+OCTm/UoN/xI5QqrUajJlzgPW6nk1Ib1Rrtzcwb6ZIEmUyWIElPysm0+XGgWaXVEm3zexxO5y1xCqXW3Im9d+3cF01uiiQ257EH4sBxu2H7gViSCx/elV39BZWXkpAdmyQWi5Nis2V55OFfEey8BxmTj/AAAAAASUVORK5CYII=");
+}
+
+.flag.GI,
+.flag.GIB,
+.flag.gi,
+.flag.gib {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACAVBMVEVHcEydAAbT09OkAAnU1NSiAAfU1NTR0dGlAAfY2NifAAanAAjW1tbX19eeAAabAAaYAAWoAAjS0tLT09PU1NTX19eYAATMzMyaAAXT09OWAAPU1NScAATPz8/R0dGsAAnPz8+WAAStAwnZ2dmuAQquAAmkAAjNzc3Ozs6XAASkAAigAAegAAf////TAAnRAAjXAArPAAfbAAzVAAnZAArYAAvaAArW1tbNAAfaAAzdAA6/AAvU1NTIAAmsAAezAAnk5OT39/epAAe2AAmcAAbX19eZAAXR0dHb29v+/v4DAACkAAafAAfp6em8AAivAQnZ2dnh4eHd3d2VAAbPz8/Ly8vz8/Pdycr8+/vq4uPHx8fCAArcurvSsbK/W2DDw8Pv7++9Egjqb3T2zc7xsLKJAAc7AALOS1LaZGrDS1C5QkkTAABTAATow8X0vL7ukZXpe3/NOQmuQQe6QgjMpKaZSQafRzrCcnaAAQbktrgnAAFEAAMuAALl09RwAAfnam/xoaTXKjPdysvo4ODZIindFB7RDRbgPkW5EhGGNAXBhomrKC+4f4GjNQefQSG4KzLbxMbKfYO4BxPqjZD87+/cQUbOWWC5KwezU1fkYma7iAeRDQatdwaNCwWXAwrWpqjKnJ7CDgmWIgajEwd8AAaQDwc+JgIkFwHZnqDGGiPFi4/JcfPoAAAALXRSTlMAkmJyb5+WVlewsQpFKH5FrmAUqaB7HAdmvCrfT4uG2tr6UfHH7bzG7fHb4rwD+t+OAAADA0lEQVQ4y42V91PaUBzA42C597zuPQIBGYEQIgmiJBhAEKmMapXhqHud27ZuPUf33vOv7EtQwKAtn7vHD3mfz/clwF0giKdQUikul8lkFeLK7ILCaugMqiU3wGdZruxKE49OpzMauVVfK84tKBTYZRLxTU87VCADpqu1y+yz2WCbzWf2drW6WowczfW1FedzsyUSSXbuufKLHo9HZ2yHnM7GLh+cio1bPm9Xo8tpbObxcOjaWs1wGwgaYQFeGA5M/AqAbZg/kMNrtvF7pwb9oT87h4eO7QCcTks71JQWTJPYQT+G7U1vfZzIKHiox/eji9bYAUuE0oLO0wKDYSG6uBgLYFggs8BNLkTDTCygUnVkFswNLkTnI7EAyaYFzk5IJwjMW6HI3H7/7HwsMDeYSeDbptzhvrXI/F4wMhj0/j+AgxhmYjFcI/89414JmdMCozB4pDLICYyw2ym73fLKJwjunxaoVChYWgei1T6G0wOX4FpHPNDrMa1We0+w2XRqELag/tlBBFOr1RkF6MAAPkPTDGYhMgtwmsa/0XSYpWczCj5RkQEWnBCmaDrtGXTpgfkDyzLWrz9+ficH/hE8G1oefgAYGV7uDQZDG8SXTcLCOCw7gr/BxBTU7PL1Lq0YVBx68EWq1RrN6np0aqqvLzTd15/yS/t6RlZMFij4YtVg4H29ntO5QKP5PLnbgDxZfz0y3DvU09Mz1Pt06fmaUqEEAeU/9vnxvI4g47uT40gDQB5HwaNUmqwQ4U/4CR0wNqZM6gkfjQcnfF5H5KPdST3p8wGW8BPjEaRhtFug8z5KxgPwuKnjuZtPBIpU/yg49pO64uV4t2A876OkGwS8jyhQnANF5fIGOTr2pvvk+Lh/FMhxljCZTGQchjQRxOS7DUVCP/ZxinGDgKIcDtOFvKycUqlUWppTJLp+m2Hebr5nSIJi/eBMzsb9rIOxui+VFEMOxzXR5XzBu6OqOCfr7h07j4XDCriVV1MF9q5K8896QeXXFdcUZYlK8kpEWUXSuvjFv9F/eotD1B2JAAAAAElFTkSuQmCC");
+}
+
+.flag.GR,
+.flag.GRC,
+.flag.gr,
+.flag.grc {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.GL,
+.flag.GRL,
+.flag.gl,
+.flag.grl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABX1BMVEVHcEzPz8/R0dGXBh/U1NSZBx+YBiDW1dWeCCTV1dXY2NiZBx/T09PV1dXW1tbJycnU1NSNBBmTBhqYBx6RBB3Q0NDX19eTByCaByDX19ekCSecCCKnCimmCSjNzc3Nzc3b29vV1dWOBBiXBx7////HCCjRDDTFCCbVED7SDTfLCizUEDvJCSvICSrQCzLTDjnCByPMCi7PCzDY2NjDByTc3NzECCXVE0H+/v6UBhyOBRiZBh6jCCXT09Pj4+O/BiHICSmrCirSHUH+/P3v7+/Q0NC/CSquDTLMzMyiBh7WKk3TJEieBh+7Dja4Cy/5+fmnBiDHx8fYMFTyvsncPGH99vfmgJXm5ub09PSuBiD0yNHql6j319788fPaTWjsn6/76u3oip320dm1ByTwsL7dSGndZHreUnDjaYTg4ODp6enMETLkcYnjYH743OLsq7b44OXZsLm3NlW2g4uuIDiWDEiKAAAAJHRSTlMAWOFjmHaP/lZtr59dukULprJFriiJHBS8e9rbx+1Rxisq8eKpl48zAAACiklEQVQ4y42V+VPaQBhAA3KLeKBWex+AcgiEQBNBoCRAkagglwpyCyoqPf//6be7CRAE7PshM2Te2yzfhoGiMB/Nu5o1k8m0ptk1Wj6tUnNYVX2A67ZxRc9g9DLqFY3Rsj1tv9eoMxnKYgLzfpC8zAmcjRNyucvkIBbSRxHQbRnNKpXKbNxaU6dSGSaaoRgmlhRsYziOQ1foLu4ZiFLRFEF/P8jZQhBc2GaDOwFCBDwf31wUzGQ6EG7uSoXSU7P+n0G1xLLsPsBX5iShc4qJjT41Wcnfd7sLnZeDm7Hudvv44kvBUBz7PoCtzgiYc0ovB08K3el0ZusLgyE72g3WgceFQVu5POBwDxcFt0rdgagsCDhxf3I3SPd6swuCMlso9Xq9UpYf6UBrOtD/oaIxW7lYuS0IHHk5hPp1sfbYyDoC3kBAeRZcp/I3QkV/3Ylo+3XleyqUOzftu+Z1SxDwW/uzWuuLdns+Qv0+xdPxzTzYBk0HeFEUeZfn4OCb3b4HwfdT7Psqs4IsTdMuF9iSv5c/RAGeTlZ47rewDoHskwD5MJra86Ap6eDbsf/1GAdk+Pz1tJ8rTCyP/SAOiO9wFKanXpOXl305ID4crPJHU3wgy6PtkPWDfhSckaOFcw0427mx/+NhvLzs+4/DOJB8gG+TbyJUb5U68VGQOJvwYew03+j3G7wH6+PliU8ChU4m73Ep9JEfP8HBM39iN0qfBNinPWmJA88cHXwpoNPdxJHECXCUv+qmg5I+6V9FwhAkkPzaqtMuGQyGJa1ueedNBHMMXTce94Mfj3ev8mCH1zcgeLdseDX137G5odXtfIlEDkeA/Hl9CXlvDdRcNjfQE63r1mWd1rBJ7v0DN7Mo5trBcAgAAAAASUVORK5CYII=");
+}
+
+.flag.GD,
+.flag.GRD,
+.flag.gd,
+.flag.grd {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.GP,
+.flag.GLP,
+.flag.gp,
+.flag.glp {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.GU,
+.flag.GUM,
+.flag.gu,
+.flag.gum {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.GT,
+.flag.GTM,
+.flag.gt,
+.flag.gtm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB71BMVEVHcEw/e6c9c6PR0tJVkLjDw8QnX49CfquKorUybZzJycnKyso7eqc6eKfPz8/CxsdVj7c7eadOirRXk7rU1NTT09PT09M6eKc6eKfExMTIycnKysrExMQlXY4pYZIqYZLFxcVdlro9fKkkWYpZlLhWkbkmXY4kWYjAwMD///9KmNFGlM9DkcxEks5LmdE3g8Rbpdc9isg1gMI5hcVXotZBj8tRntRHlc/3+/1VoNU/jMk6h8ZIltBOm9JPnNNepthZo9Y8iMf2+vxNmtJAjcozfcBUn9RgqNlTn9RdpddBgK09fKr+/v77+/sqY5RMmtI0cKBJl9D4+/1RjbZXkrk6fK4tbKMlW40nXpBiqdlChrc6eaYvaZkxcqnW1tbs7u1ZmcP2+PVHhbA2dKPU1NRUj7gpZp3Gxsbw8/Th4eLJz7xJlMm4x6pQkb9Ii7pNibNVlcE8gLM2d6zf5tpco9RXoNRWntM+hr5Mjrxnqtrn5+fs3I/y9PHS3cuJj2BTm9FKkMRBib84dqVkqNgxerqJn22XrIOdtI2mupiwv6DK2MKdrIm5tajy56Tu5b1UndJJksZRmdBdoM3b29vNzs/Ex7SQoHh5Y0O/0bXd0ZlDjsdBi8Nam8a6vb+ZmlF0lFh6mVP39eDhzHzv69T69tdfMKGhAAAAKXRSTlMAcxT+rv6wVwVaJkmRqGyAmNpk9t+8msftvI6t33CToZ8//T8refErZeJzcfgAAANMSURBVDjLdZXpVxJhFIdxA9fcKs2T2l4DguCCK4IgijKjkiAqGZKismQq0iJoivuamUeP7dsf2r3vO4Mj5O8DHzjP8+M63gsSCSbzgexhQTqkoCD/Wk52puSKZMpK4DW1KL3Y6/UOkNjTJiDXb9xM9lJluaUul+RuerHdPvv1eGGhW69XL6xNR92Lvk9oTaSBV5ZSJIOk5OYV3rO6HI6YxG4fO14b7urS6/XdarX63VMGw3LUSzvpIbFarT0jq4GGORDGhocveAMv0LAsNx0IHK2sHAUCNrmttUExN04EgTcYLguQRp1OZzKpVHLkBYHwasLXrSUKJp2pD3gb9iuUIHjHkCfjGOrqwkmCSswrHf0S72yXMA7wTcmCSsRXESHOh8NNyYIcxxd4FAZmKY/1TU2d+kTBhrjA1xOB8mHCW5IFG3k8lK+fR4HyiHdatPpGePweluFYXmgg9QrAge8A4dXLOG+xaLXdICxtupngEsNwRBDqkW+efwYC5bFeq21DIbgdPTz8GeK23CAoxDwviHgUuO0ge3BwsBPd8YOgBJyMj7yGCITHcdra2nQLjYznR4j5G4n82g1usiDw9YTXjKJAeFIPa4PCXoj7E4kcBpc2WMZYxY9D+HYQXrwV8yYDCJs73Hnk9/lWaC8KAq2nfAsVKI9r2acKwx8d2tvnfL59/9YGxxjreV6DPBU6LUI9rA0K7Nmy3+Pe3j8NwkjxeuRrR3tBEHjcSjkKjH9jmdv9frYM/whjh5ivHQRhRsTbbK9RYPxLod3TZXiqjLEZcByf8NVUAJ4/KlsrFfA8o1GGCLSe8ij0zCBP62HNPjReXj6jRszXUCF+hLBmyQLi7YADD8IQCBdHC2vz3pggtPP1hCfCiOhoFcpkQcxToY98h9CjUn5MFFpa6PiI15gnnRLrSHwcXLMkofaivsZsHkRBdOP/E8Q8/QTCKz9/WX0DWZkWjpMXqhEXeF6oWp2zxsbHx/shroypqbTnvkW3h+WFC3x9dNIJgsPhisUK83JTsjAp+Xdu3QZpKmPqBD23uQZ48/r66ODkkNMpvS9xuUrzZKkJPzTZOdfKwIN86yUZgjySliNXIrv6Byo750l+RaVUKq2sKM96TN/8B4dRl2NYGW/QAAAAAElFTkSuQmCC");
+}
+
+.flag.GG,
+.flag.GGY,
+.flag.gg,
+.flag.ggy {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB8lBMVEVHcEzCwsLJxsfLy8u8vLzDw8PGxsbOzs63WWvY2NjU1NTKysrPz8/T09PV1dXV1dXExMTRzc7Nzc28vLzY2Ni3FijX19fY1dW6urqwECG+vr65ECi6t7e9vb24ESeuCRvKysrPz8/KysrFxcXZ2dnFu726urrDIzzEGDTEGDTDFzSvChyuCRuuChv////kDCTmDijqFjXoECznDyn+/f3+9vj63xfqFzflDSb+9fbY2Nj52xPrGDnjDCPqFTP53RXS0tLpFDL63xvpEjDrGDfa2dnW1tb52RLMzMzd3Nz4+PjKycng4ODnHzPU1NTDFC++vr7uTCrtWh/w8PDrGjvz8/PBCh38/Pzl5eXIyMjk4+POzs68u7uvCRvrJULvYCXQ0NDrRiHRFTLpES6zChz98fPwYiv5wcft7e3mGSrFFTLBwcHweB/vbSHCwsL6x83Wz9D84eTrKUb2sRr41BTsPC7ykxzuVCjsSSLRFzbq6ur2p7H72t796OvNJkDsQlj3s7v3qbT4uMDyf4/6zdL3yRXvZiLn5+fpLye/v7/pOSH1oR/zjSPoITfwd4XvYnP1maXqOU/LCyDdFjX3wxXrLjvBESTaDCLxaX7cmaPvUWrLipS9bnfEEyf4vcTqVWSwJDPOl533wx3LFjP3xx/yfivKXgLVAAAALnRSTlMAd/uJsBRTWAWwcJ3DYqF/Ytvt9kQjlCpE/KFvKpOVgq2u2rzx22j6SeK8SbzitC12pQAAAxRJREFUOMut1VdT4lAABeA4ohF77+5s70uCBEIzgSAtKCgglujaUEDACvbe1t5n3N73f+69CTqzEhwf9syQB3I+uCVzgyB8KtCC8nypVJpfXpBXWpGFpEgWmguuGdnSx1pLIk6nxTk+8uLlvZrnZTdcRmZOMWdDSqVarbZp3sOyBCEjCJZtC3YN/Bpxjbhcz4py8wuy81AUzctOf1DUx3EWpw0xm7s87bJ/otR79eT5+cDyuMFg6EuEszTNszI7AB2ym1GSer2+kSQnNUQ72+bxBD2eNpbgb4kDDdm6/2c4fjipSboFgFYEyMkDhvkdFwOOFGCYYWbkb0WBpSsZUHIAWqm7AyMPjGKgUxxQqYD5NmC6DRDKxbHVtbW19bHFJUJjMvaqVKJg/DMESwvvV7xwp+QgFOU9NZlEgWb1+IsfGf/w0esFO0uSZGMU1Cmj0SiAQfnGyfrmxBBBEEMTYwtHKyE15vMjy3NXfbmcmT6IbM/EmwVQz0fBX3AcV+NqDPP1ICNzXv7BgeNhGEbFqFSq2NSUit4OCUCh2IN1ECwB9InhUwCorkLTtG5rajoSdc/Mbl33GyAYuOpT1M/W+Exv5GD/wkrD6HQ6+NHFrvsQuAYSfTDZHZPJNDgIBxKl6f2pLSus66yx674AYJ9fHLg8JmGqvbRuVqEI7fS7o9Hp2HW/wfcdAvnk8cn6Ilw+uICBhQ1Ffa8OABwXZrsN67CPf/sRRlzLG2PEjQ3CFW4A8PqVQ370fD90erQ6JHPuIp/syc8SD/rxQw2hnNgMBL4GAptLwo8CYGgSAXgCJN0CoE8EqAGw9qvFQEsqYP1PwJACqCHAmu8MsJ0LqzWCNQ8lg25xENpzR6b3xAEnAAKcicFgEJyJ7YQGE3ZWBPTxgJ23G2w2mwOkE8Th8J2dXV4mg/YOrhsApwWUH95PTytEM9HCtPScR0+q/P6eHr/fZe4Iwn+UgTPZ885ua+kukVQiHFeck5lx40VT9qrm3us3Vd2jo+FweBekBaRE8hT2ctHUL6jaysK0umqJRFJdl5ZZK3z5F4NYjiE1dQLeAAAAAElFTkSuQmCC");
+}
+
+.flag.GN,
+.flag.GIN,
+.flag.gn,
+.flag.gin {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABpFBMVEVHcEzKphTFoxnJphYDdk+3HTUAXDajDx4Ab0SfeCWoFyTKpxgAaELAnBIAfVYCflYAeVGiDRysGi3SshvNqRUAWTXBmw24ITG3ITO1GjG+mA0AXjnQrxqiDRwBelKjDRwAVTEAcVW6JD0AUS4Bdk0Ad0/CnA64HTalDh2lDR0AWjYAWTW4JDvRsx7Rsxy3HjXAmA7UtiG0kwz80RX90xj90hb8zRP91BvTGDHQEyoAhFDVGzYAhlL91R0Aj1wAgU7WHTn8zhQAkl4AjlnPESb8yBAAjFcAgEz8yhLRFSzOECQAiFTSFi4AlmL8zxT91x/8yxIAkV3SFi/PEijXHzwAilbUGTMAfkoAlGAAaUDMDyQAe1DLDyIAfEi0GC/UGjQAl2UAb0XvxxSiDRoAdUsAekYAWTS4GzSqDh8AYzvxzBcAXjjz0BuvEyfSGC37zx/6xhPEnA3VtRv7zBnSICbVJSzPHSG9DR/QsBnXKTIAflW5Eye1DyG+GDC7FSzAGjTCHTe+lwzYrA7juBEAd0TNHTnkwRztvBDEFR/50hzNpA3FHTgaWkvAAAAAM3RSTlMAmiZJVrCwWf0FcIOQNGBzpZQU3/FwvP2UomqhvK3a2j8SPxbG7dvxx+3xKyu8b3niZX3tyCsnAAACqUlEQVQ4y3XVz2/SYBzH8fcDDx0MXCuGbZRE4sJhxnkx8WLij4snPaj/gPHm/+RF/wHvRi+7mHjyMhKTqdkgyxQp0uBK1/KAh+dpaZk2IU3g1U8/35b2KQJQ2fX3xKXzYnGrttj7Jcoz/r1V2BFQD+OdB8AU4N2LCHjjHtzsLtamOX2tX2vcR+z060/YrkW8B4jvTQg6DLEAXlVO1uUigHWh5MZdKlMq8iHN0mfPhMRQPMKD0ePjsKOeW1AAOAZoH/ZlE0nnE8DQeLPVP47qhxA9Ox4NbA+u+Jt896QNkrPEx0BH+5H+RLy9Xb6KjTfbhAF460qS8RkORMnpPKjCABsPZN5PU5/yvKfAgiHExveMj4xXeV8CCcNlfI9ZNl0BHlVggO1BiYqS02WdHrnySu+qMMD4op4hhg5TeuCuxIsLHslc+x7ay2W6ADTX9YvYhAXI+mwbAcznOR/oQO1diLRUSfocSOoYj8x6lW8zBx2v69sB/iYSjI9QMF7kOSR1sAN8QNrCeAVjnBXeWo4b4DPHkSx6SZ0xjM2sRjNJ6hgPEmH8GHNhl+kTLngkGe8C3ZQz4YyEa18y9yn1fvIP1W3O9GXN+LAsURd9hoeGa18GmeS7+OhHP5vusuILEnK+sGsteernaO/oGYy3AAczq+HhMl575H+95nlvzZAxqXegQJ4rTB3tIZYIXF3fMW8t7Q3P+7JUkqXPcML0EaVE6vUMPljZ+DxPx9Ve32kLp7D3G4DLiztfMm+AFd8+QQLbrdIwPtS/DzfE9WaIkD+75ogyiW93TxXiJcTwYf7nXAEURdBwHgHQDBFydgBgldvfQkfBa1fC/o+gOkqWmAAGg/652DptuE9ZRNT1bKel0v5XeyM6Ynetwv8WqELRvVVrWZbVqjXkDf3lXy9ZRCyhWnivAAAAAElFTkSuQmCC");
+}
+
+.flag.GW,
+.flag.GNB,
+.flag.gw,
+.flag.gnb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABzlBMVEVHcEzPrRfQsRuoEiQAYye3HTWKUSaPcR3NrBekESHQrhoCaSwAaiwAaCsAZivSsRsAaSsAaSuXEB3PrheiDRzJfS25JDwAcDAAby/QrhfRsCS3ITO1GjHPrxqiDRyjDRwAXSS4HTakEBylDR2lDh0AYSbLqRLTsx23HjX80BX90hf91BrPESf91R0Akz/WHDf8zRP90xgAkDwAl0L80RUAjjrXHjsAlUEAjDjSFi/RFCwAhzXOECTQEynVGjUAiTfUGTPTGDH91h8AmUQAm0YAlEAAkT4AjTr8zxQAnkn8yxIAhDPMDyTLDyIAaisAczAAby0AZikAnUe9GyjQrhX70B+1GDAAlkGgDBz90RbUJCwAAACsEyW7FCqxFSq5HDWrDyGnDR3SsRq3GzLXrQ/ZshEIlkTvxxi9DR+5FiW1DyIAYiYAeDHXKTIKnEi+GDDAGzX0zBnHog/Tthv7zRvDHTgAYCTOqxIAfjTLpxDEnQ4fmzrHEidGBg7oxRn8yRGSuCfPGDJbCBMaAgULAAKSEB7hwRrduRjTHDi2wiIUmj3VxxtwtDFMrTkqpkB9DRw2BQwiAwdyDRvNHTnvyx7BvRtepix5qyZ/ixgZfy7uIBbsAAAAKXRSTlMAu29jsLAUBVtXhX6gaShLTZRz25QcNbzfmSaUop+t2j/xUe3H8e3ieXU0kzcAAAL8SURBVDjLddVnUxpRFIDhRUHF3sYSTa8oRUUkguBiI5GyWLCBAjakWAhRJBR7iSnWtH+be8+2C45nGD7sPO+Zs5+WovAUN8jftbTKZLLWltKCqkfF1ANTXCJB/0WFsudLaKbwLC3G4/HFt5Lm+11RVfObZJJqkPl8vq3t29vzHo1Gc75+d3eXPT2LL+KpkzwuLSjBU1AqqUskksuTScrn277tgdHgWXcPwLjZbJKdBJrJs2xMsYKC7R7Cm/lgQKVCP5U7FgsGg9lgMKZo6+5WkAFwMx+ouGnH09nZhgb7DyufuEDDeRqCPI79LHgcLG2JnqZxkM8Jzwf8epq2rLtJzq0XfAcbEJ4P2sn1cD54HExtCedY0My57/FZ0Xcsc4HZfHCAfW/v3Oe8a9B60Xcsf6GmNmH/jBc8CnK2i+vBj7IBvufmEjwXENfkeDbA3nKVAW/AQee9a3iPg4VNM33gvTk+vj46MRhQkHeNsB77PQho+uTYg+bSgINgm8Bz1oPfS/zFgcWycOTxHGJvmtjY+Pnj+/7XbwphPX/O6F78zz8XtTCP3/bQ48kgbkLBRzzj41yX5fTpr/3fqS5dFAL0steZzBHiJiUbjKMZGhoaHBzUai9SqdTFsHpkpKtLp4s6UYB8+iptOgyblEoISK7VTuv1w2rOW/nAP4/OSStxsCpy7Ken9cOif884KS8KDHC+kg9Ezq0XPBeAB97XhwKCi+tZ38+MoYD0KBCPJ9ZzHoIQ7xHvs0+skhzWg7eCN7IB4SEguLCe9UbXGOUPCd5utztCq8TxLGfPAW90RSh/mPSOkJo8nl0vejYQvANNaCT3eOEc8DY+4NZDoM+9hlvPeptzBwLkHek1GK9VncvFc5DHQSCsdKyFAzPcnDAME93dtfVbdSLnfdS5gwK/PxAIPH1SX1sol8sLa8vKG5sYFx4IjUbwtt0o44zsRKTPqEDgZf2LorwPTWV1RU1jk8sJMwYTibyWVmD3Sv7wBwp1ZTXlUqm0vKasupJ9+B9maaYg+MXowgAAAABJRU5ErkJggg==");
+}
+
+.flag.GY,
+.flag.GUY,
+.flag.gy,
+.flag.guy {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.HT,
+.flag.HTI,
+.flag.ht,
+.flag.hti {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.HN,
+.flag.HND,
+.flag.hn,
+.flag.hnd {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABtlBMVEVHcEwARI8AXKYAUp4CbLIATZgATpkAUZsDZawBbLIAabAEXaADZawCdrgKWJ8DXKEBXqcAR5MAXKUAXKcAeLoBarEEd7cBXKcAXKcAT5oDX6QARJEARpIBabAAWaQIeboBYKoDeLoAUJwDcrYBbbIAQo4ATZf///8Acs8AbMwAdNAAdtEAbs0AasoAetIAc88Ag9YAfNMAYsUAgNUAcM4AaMgAZMYAXcIAhtcAeNEAiNgAX8MAXMEAftQAYcQAY60AVaH+/v4Af9QAdrkAcbYAQY4AZscAe9MAgtUAXqoAWcAAhdYAR5O32PLU1NQAWqbY2NgAaLcAYLJUouD1+f0AfcMATJ0ASZjJ4fUAV78AbLN1suTe7fn6/P4AcMTr9PsAW7AATaOSvuh6uObl8Ppfot6s0O7j4+Pi4uIAecEAUqttq+KYw+qHvOigze4AcsgAZr8Nb8sAgs7Hx8cAV7iy0e5Jk9jY6fhLnt4QgNQykNkegNMAZL0AaMGax+zj5+sAesqbscXCwsIAXbxmr+OLxOvA3fMnhtUnltxDkMLNzc3Dw8M6nd4leM2uydopYp1Sir3FxcUT1q03AAAAJ3RSTlMAsIj+dnaYV1eZ/hRNqwcqeUVgrva8ZsftvCNmodvaP9q027Di8eJuZSXKAAAC1ElEQVQ4y4WVZ1faYBiGwwZFOWLddtoWRwW1DlAUEEUjYhSjUoYoq2ULxV09WvVYT/c/7pM3O8TT+0MC4bru9yGEBMNQTHq1oamvr89gULcbTc3YI2nWd8C2sf3lEy9kgUk4HH7dZlAbuyV0o9HQSRDY8yags1vVqt/vt48sz1evrrJekBogT9sMSrVZr9eb1crWFziOu3AC83q3qtMQu93uH4EsL7+HzFuvyrsL4QYXF9y1cVEeD4KwNS3iET4/Ozs7CrE6bOXyLqRctg3a+sd5geFRPYcvLVkhDsfQ0NDgIOLfBd20ADxfX48Db0M8ErIUL6rncSuDs/zAHhIYXgbn+H6apwUBT08jxdH4iB8GYSHL8ly9AOfGoXlaAN7+4/auFKBSuktunp06HMJ6nq/8uQbhWzIUs/CJWiyeeKhEeTa+HvjzdIZc/4w9/BLSFk/p5Jh9HUuFMoVIJL2ZjiQLgRR1aP0vtvbRIkrgXlgQEn8oJ6SiAiF0f1kvfLLIJRpHA55Jllj/Xi94qA15kiepHRn/n+CJZdA+n5RdWGaF4jk6S/EoekdKha91QuBW8KVTRYmxVi94PB6BUEnIC7HjTDGySSVSvAwcc7VkQnyWyOvfIMQvT04FVzFcB+PnR/lEAP0gguXimXRlfxW7fhi1Ovg/FXPdUFfacOX+KB1JFA4PDwuJ/NHPuZmpKRBcGyzP1CN+mMoEFZ/PNzk5NjY3NwO8EwkO0ThsPY1P0DjLO/cXQeDuCfK4kF/ZRoKYr5tGwNMCd0+Qwfl6xH8AAd+Q8uJpRDwt0PzExcEXyMGFrw5H4yCeEQYOgjjhZqJSqdzEXvBmhsbZeoqv5XYWQXC5CIJ41qrUmHU6nVmj1Ha9Um1TUeVye7WbG6dzyrlSq+X2gV5UtGA40ak1NkqeHd0tGm3X2x3IKhOA3yh6KK5D//gDytTSo9H2KhSKXq1GZ6IP/gMY32j+PQHVRQAAAABJRU5ErkJggg==");
+}
+
+.flag.HK,
+.flag.HKG,
+.flag.hk,
+.flag.hkg {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABMlBMVEVHcEytKBSvIA28MBaoMAiyIw+9LxTDORqxIw+1JhHCOBukGAipGgqdFAetJBGnIA2+MRa/NBmhFgizIg28LRS0IAyzIA2mGQq9MhioGwqcEwbYIAzeKA/bJA3gLxPfLBHfKhDZIgzhMxbhMRXVHAraIw3iNxjdJg/iNRfcJQ7WHgv////jORnjOxvkPhzTGgndKA/AMxadEweiFgjlQR62Ig2sHAqnGQnILhOvHgu+IAy2GgnNOhrEJg+8LBOzHQr99PO4JQ/++vmuFgfiSDPTLBL76ea8GwrlVD/52dW5KBHLMxbgPinysKf63tvMIgz1v7jbLhb98e/YORnmXUr40s3OGwntiXvRIQzYJw7sgnLvl4rFGwreOCDvnJHre2vpc2LzuLDyrKL2ycLxo5joaliVKq51AAAAG3RSTlMAKIZ2Bd3+/lZjsHGfsBREoZSUrrztx7xJ+vFkcQKKAAAC70lEQVQ4y3XV51biQBgG4AACoVnXsitFQRSdRQGJIC0hxpBIQgkdpKr3fws7k0nF9T0HfnCe9zuTyYQQBMqOg3Qd7Pv9/v0Dl+/MsUP8kB3yBH7v+vxerzfrzerxeNy/Dlzfertk8JimiTOkK5XePJ2+T6f/znu9XrOZ9dRgYG/f6fKRJOlzOY/cFEWVKJqAupfP5+9h0rAAcw2Tindfi8Va7Q2ljkLVq+1JpvRMeCt57C38OpVKxVPxeCIR7b7iTDIX4XDmRi9sjYc8jjgsoMRgLlSvFwz/E49BjvwtLqjeHP+dGx4XdG+Oh1oYLePffaT0RGQrNo/5tQzAyuCm1wq6N1YTnQEAvmLm+PAN9pEGLDRtPoV8igEbtmMbj30SF0yeSEw5uHIB8DOmpXOLxwWrT3zy8kYQQAuAWYzjogbH/rJRQAWLjy7g6tm+IjKjFQ+Aspjb/GUZFTSPd/4LKFP2Y9Za9vmWyLNAlDSu+nNY8DTRUdN9ND4AHYWRNv3PAQAfS/jRxyOvFbDXbqzAAJGR5xIX40SWBYNO3+JRoVY0vbqRggj4Vkfi5HVf5j9jtxltOcjjgrEcbeOj/elqLiy/RGUViUT08aq/Kz+iAvbmfZ22Bh1+LYEWy215o2COh14ADGAHgykQgaxzzeOCxav3dQQ2MxEs1uxCUZLmeOTv6EfirZiwPFThcHSkAIUFvDQCMg+6xnjVX6kF3WvHhlvDFXW4yBweD2bL6wXrKYY3tit10bV2O0DWueavXnLEWzVqeajQOdAOQjLJKZLGdY8K9eqWN7d+LljGq/5BK6iXa+fG3ti8Vtgan7RsvZVDjwpU1XjG/8ftHhdUfzsZt1HG4/PL7fF3On8Y4sKkXaKeUZ5w6HLjvT22cdUPGy85WKjXafrZfeQMqP/rAWfw1P27gPICe+/D4QPSw/dGuZDL5UJ7BEUfB8ndrReNYy9weOouPOrJofwJBZA7IX9+QTn2fM7DYCgUCh4GSAf+8R9otQ83jalO+gAAAABJRU5ErkJggg==");
+}
+
+.flag.HU,
+.flag.HUN,
+.flag.hu,
+.flag.hun {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABuVBMVEVHcEywMUNnSDOvL0CwMUK3OUxxQDowUTerKzskQSpuPiwtTjSsLD0wUTe0N0goRi4oRi6zNEcxUTgxUjmqKTowUTgyVDm4O06uLz8uTjUmQy0lQywnPy20OUszVDunJjY0WDw2WD0iPScjPymlITGvM0KmIjMsUDMqSTL////SNkrTOE0+akjUOk/MKDzNKT00XT1FcU87ZURCbUxAa0rQMETOKz82Xz89Z0bPLkLRMUY4YUHRM0g5YkIyWjsvVzjWQVbVPlPKJjozWzzVPFIlQyw5ZENDb00vUjcxWDkvVTfBOk4oSC9IdFLPLUEtUTW3Ok2uITK0NkjUPFHExMSzMUMrSzKCnog8YUU4XEHi4uLW1tarKDn8+vqoJDTT09OvLT7xxMozVjvCKj4hPScjPymkIDDJJTefHSzBz8TttbxAZ0nZ2dnqpK1Vel6YrZ3NPlK/MkWtv7Gmu6vda3rjiJPkjpn66+2zxbfHLkKQp5Xh6OPK1s1xkXj00dbnlaDaWmvv8/DddIDj4+PKMELMN0t1kXvo7enXUWL00NXgdYPed4Rwi3a+aHSttq/aub5IYE28ZW6/qayncVV0AAAAKXRSTlMAYwKgdrAUVlawB2LdwEVFlJSIponb0fa8caF7Kip0rpztaPHGI+0j4pg4X3QAAAKESURBVDjL3dVZWxJhGIfxQUBAQFyvXNs3hBQRCZFNB5BVBAMkg1ABA2NRUNzKJaxsr0/c874zAwPCAR32P+DA63c/jnIwBIHWMS7k9XL5fD63l8fpHu8iWqxL+BA+Ozn8WysrgZUAWjAQhEmGenndjzrqdaeQ+ziVIrqRdrsLhYWFBevqM8XVlXt3NxiMo0mGuAM8jlAo5PAG7khisZQ/liJAFyww5CGAKWATVxXI4vFX1GIwv39rcdIPgdtCeavVynDFBJrBYNDPVo6OttCOtNqpqclaUH+e5ga9fhY2Nze3rKX8ov8NFTC+getpvow4+GqAPPt8jdfOY08H+N/TkrM9CgLum77G8XnKA1/cpgLG3/hbq+cZTwXgLaX9bGYDLZM9+HK+yuK1xwFf+f0HgvOz66i8fuX3mbPS54nqeeS3C5eZ6NsXxPef8laLlq/hF+5/LV3uH2Q3yuhHEKx/kLexfwpethm8bitY/4+C6Em6mA+j5YuHpyfRll9l/hcEF4fhnNc7Pb20tDQD02g0M7l3x3unnxq6i3R4J2QjfnzzehGnPXCNEqbT6dTQhfN7e+l0+rB4/DGnIk1OCNZ2GF/PdWqY3W40zs8/h6lUJGmqBiyvZM5jbgfO9mYPDho8fd7OPk97sycJAf34TZ+G5Z3gXSjQNfqmnPIoiKzRvvnD13ufLYED8EqdGiOj0c56eIrXPB1o1BFyE+bA8zkcrk0TqaI4fd4J3OXz2BIQRCJgB/v7bosFAoF4uK9fOugI4fkcLrMTz+zyhTy2ZCIpkhER8t5dQSe8hFivjo4nsuEe6dOQB8+Gl0w+EN0HR0gFrV9QYzLxaM+ISCQa6RkVjFEn/wLSynWG/CDl/gAAAABJRU5ErkJggg==");
+}
+
+.flag.IS,
+.flag.ISL,
+.flag.is,
+.flag.isl {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.IN,
+.flag.IND,
+.flag.in,
+.flag.ind {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACFlBMVEVHcExtcBvYkUIIXAPThjXUiTgHUwLZk0PUiTkMYgXViTkKYQMJXAMMZwULYwXVjDsIWQPOfy7Wjj4KVwTQgTAHWQfThzbSjToHUgEKXwQNZQQIVgLYkEIOaQbThjTPfiwMYQXPfiwObQYNbAUHUQLTijrOeynNeinUijoKXQP/////njn/oDz/nDYOegUOfAX/oj4NdwURhgb/pEIMcgT/o0APfgUPgAX/lzH/pkQLbwQTiwcMdAT/qEcRhQYQgwURiAYOeQUNdgUMcQT/lS//mzQKbAT/mDL/mTP/qUn/q0z/pkYQggYHUQLXjz8IWgP/ki4IVgMJXgMSiQcLZATVizoLaATQfivbfyji4uLW1tbJyeXSgi//u3fT09PV1ev/48bukzQWjQjll0DMdybDw8Pmm0X/3LjZ2dnJciT29/mrq9jAwOF7e8Fzc7xgsFj/1KigzZwskSRSoEr7/PzGxsb5o0a7u9+ams+217T/xo1+vXj/yZPzljb4lzTdjDaYyJXxmz///Pr/6dL/9ezb2+60tNxaWrFLS6pkZLbPz+hCQqaNx4iv1axqrGTs9ev/5czZ7NjimUX/s2H7njzj4+PkkjrehCt2tXG93br/zpr/79+Pj8mgoNFra7rh4fFjsFxZrlD/n0fwo0miu5/Wo23j0LsefhePro4vbivwoEfj8OLHuKran2n/rFjs7PaFhcVpabidJ0lxAAAAKnRSTlMABrBj/3aw/ZtXY/6So3JYflZFKIkUvBREvE2hKtrbrtvax+3xI+3G4uIiy4uDAAAC/0lEQVQ4y42VV1faYBiAIwiyHKh1du8CglgEoQoIShWKFlSwIsVBpWWVYRH3RsV1rNZ1tHbv5T/sly9hBs/xuchF8jxv3iQXQRDIxXwKjUYikWg0CqPwYhZyBlnsO+BYyiDltEG62row7pbQKIW30uxSNu223Y4UknJycl4P/QiFGhoadNJQaHZ2cHe6KxvlcgmtmMLIZ7MZlOIr18xme7fZjgD7o1arbW1FfZ1UKr0PqK3dme3fnZ7O7sUwA3r3+qfq9kAwpI37UsyvBVQDeDzeztTkZD9gcqq5ueVhXV03HsT9VJ3H4/K4XG5VVVUz5jfhAeqj62DbJHTUxv0W6Dd1v0DahjA/Pj6THvNhMEjwk/Q0/zEWQD9tfLKe8LEg1U/V8fExHw900lbrmM/Rh+LwTVi3dUk6Nh73W37/AsH24fwcJ5WFeceh9U916vgPVsfc81fI5y8cIn/DHpeTMwc638SY1Wodm/D1LaAXQNDzhuhblkcsriV3hkmZg+GlRUvEcnIazRw8Id7gKBpe8USiKxmCZ8hTYhBxjZyuLnttnkXCpZ6MweI/i2d19a07bDlnwDm1ubzecNRrO29g8Z64Ryy2peHzBhz3yrH7eJl4g3gwvLW+Nv4S8G58zX+w5eQ4I0fgyxFwfvsOgk3/+8ADQEeHUlkDkCtqAsH9mYOfaRttrm98ZRqQT8GBgQHoK6Evl8sVikcAiVgeCG6Mz/hHR0f9M/vBgKpeJDIaEJU47sd01JdIxBIxQMDn8xsbhUKVqh74ajQQpPhxHSKAvjDuy9CAH/cT20iS9GRfZtQjIgF8XOJ4qMPxCR8G/KR1krfhp46HvqZdj6gb8XVi7yZtmxQfC6CvkIiBAOALCDq6DubDQKhU8OtlJpROHJNGJlJhOj4e85kGvR6RqdUajelSLiuPTKfTyXkFueVXmUwjgAlCjUwN19GYOo3A1lPLEJnmRm7FhbQfTVFFHqv8nrEdxYCh19+kklHvOv3sH1RRGbmAVUmlUitZBfQi7OR/D+uWCynzAqMAAAAASUVORK5CYII=");
+}
+
+.flag.ID,
+.flag.IDN,
+.flag.id,
+.flag.idn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABLFBMVEVHcEzDw8PSAQHRAQHUAgLWAQHTAQHRAwO+WlrIyMjGxsbExMTWAgK+vr67u7u8vLy/v7/JycnHx8fRAADRAQHSAADSBwfPAQHUBASzs7PZBATExMTYAwPUAwPYBga/v7/CwsK8vLy+vr7KysrZAADbCAjTBwfZAQHNzc3MzMzUAQHOAAC8vLz/AAD////WAADaAADYAAC/v7/jAADT09PRAADCwsLQ0NDyAADf39///v7MzMzeAADHAADh4eH5AADMAAD/BATJycnu7u7Y2Ni8vLz/+/vnAADW1tb4+PjFxcX/OzvuAAD9AADn5+f/Hx//DQ3/3d3+AADy8vL8/Pz/5+f/s7P/Rkb/8fH/LCz/hIT/09P/Zmb/l5f/bm7Tq6v/o6PiNzfXu7vEQEDz5YffAAAALXRSTlMAn4XAdK6gVgVY3WKURSiulIhzYNv8FJNdFGa8s0kqa1Oze636PyPxx+3i7fFeZ+O0AAABeElEQVQ4y+XV2W6CQBSA4UFB3HdN6q7dF0AUFMEWowV33Ndq1/d/hw6QJq1b0wuNSf+LuZicb87lAKBmjuGo3YRFMJPdEIrGzGBLZtwIz2AocklTP7ox2tHoxYoL4qbbUgmcY2c0na22RLHdJ/ptUeRa1WyaoliWDfiNJgPqw3Hchxowf4AtUVQJwOlWm1itr7oizX6LKlZFoghBltge3MhxLRgn6o/+BtZK7x/cA+rfAfqoQbfThM063d3gQwXdyXw8knlSjZenT+Pl86SzaXw2f88B6u11Sq7HQzdfTGZfCzvNxbLHk7UceHkgN8fz2kJ51Ov1RrKsX0LAbAMbOwDIHADkC38BzP6BdMRgWB9U1Ab1Ib8D5DVQVwqMIAhlrUajnK8VlEp93Q0VQYKAqcFh66nHa7NYLDavBwlbG1qC6rSNPNyvPAoZSXI5gCBcI4mTlZ/G6Yi7w9acXkZLku6ScXXuyrL9g3I6bCk34kq6EHcq4dQvPwEjBi+Tpvhq0gAAAABJRU5ErkJggg==");
+}
+
+.flag.IR,
+.flag.IRN,
+.flag.ir,
+.flag.irn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACHFBMVEVHcEwpjUSgAACiAAApjUQylk5zSRumAQEihDoqjUSdAACgAAAliD83mFIrj0cxk0ylAACZAACpAAAtk0aZAACiAAArjkWXAAChAACZAACfAAAmi0Aggjc5mlUcgDUcgDQdgTauAQE1lU+uAACSAAAqjkWcAACaAAD////TAADZAADWAADQAAAkoEIup0wwqU8zq1HaAADbAAAinz85r1ghnD3VAAAppEcmokTYAAArpknSAAA0rFM2rlXNAADPAAAgmju1AAAoo0WaAAAyl0/pcXGrAADvkpLpdnbi4uIqkEW+AAAhhzscgjWCyZPZ2tmoAACf1awznVCMzJuHy5evAAAbhTQuk0rmXl4ZejDIAADshIT+/v3zra2kAAAlmkHgQkL75ORWtm0mjEHqe3vW1tb1vLzwmpqfAABdt3P1xMTeLCzD5cvyp6fmamqXAAD1+/er27bf8eOY06fsfX07qFbiOzt5xIql2bLT09PCwsLxoKC64cRNs2ZivXnU7drcODg1rFRrwIAqmUcvo03LAAD99PT3zMz++vrCAwPcDg6S0aI1olPr9u3XHh7ztLTsi4v0uLj6/fv53NzFxcXeHh7hSEhGsWDXDAz99vax3Lu6Nzf87OxCq1q13r53r4dRoGd+uY7fGBi3GBjXoKDPaGjNtLS3wLmPuJihwKg5hUrHx8fGxsYpfjzSwcGoPT2dCgrBZGSjJSXkT0/Yo0EYAAAAKHRSTlMAY2N0j7AGVlZ2rpK4+aEo3SieFBS8SfaBs0nb2j/txpzHV+0/4qCi3KNCNgAAAz5JREFUOMuNledX2lAcQKOI4Kqrzu4dFdQqjjpQ1JBUBEVAKcMKRSjTwbLFhQPFLbS4uvee/2BfhlEBe7w5Jx/euff33nn5EAgiyLyaknSGyWSeSUpJyM9Mhk4gmX0JvHMTmBkdHf0d/QSdODfSk1LyM6PsXPbli+J70AXc7l1d9fv9zf6myor5+fm5uc4HBOfS8R3ZbHZCSlL6ebFY3AcCYLt5gOZm4DdVAioA5fN1RNZFgctdra01fSBY5ZG+30/rFeUEDQ0NdfXc+yRcbnV1DRH0xvi03lAHaGurr+dySZ8ODo4TX68ndNxvpQLcPzb+mH7EpwLKj6NT42kfD/p7cZ83qTfPznqnpqYmt7cr6g71435r53cQ8PRTUqdzdGVFMi6Rj0tlK06ZZNasrzyik75b7/30Bcowj0vlzgnb9NjIGnjGpidso1KpXOIEtVevN5vd7snJ525wALlcIvv8EXr1enR6BD6KBoZDoTGbTTYuk8jkcqnUK5NKJDLv3t5aqPsr9LIb1mjgaMglTYjY8MWobWJsJISvdH+Dhu7CsQR0Jq0mzjrc/SRusGswoj5L+PSBVm1ETVpsKW7wKDbQoD4Q2NVbscHQ43gBrPWpTT4UNZ062NUqffa/dsupA/jZonUQtWtOH8BhRBmOd690ENBZtoxard24sbi4G6C/XAw/foJgKYyimMulxhA7gqCY0oBgm1sbi4FA9OXpjNjvP9CHdy414lJ6Ik+ty8vLVqvHE1EiqMGhdig3TSa7xaLTBXRg/41NxIE49n9B++8NnjdVgNuA0tLSO4Cysh2rRxlxGTC1AcMcDsQQUWNKZGa9RdgOvQ1WVVE+rRPU1taW7KzPzAxGrIODM+vrHE5LCx8EguBx/1CvLSFp5DRycIBPBCLajxpP6QDa5wuHieB/4ymd9Pk9w5BCRPtx9YPxhL9ABIRfxuEvqAAL/MaSGJ32qaBEJRIIcXpwBnqEAoFIxT/UD3yVYGAYBAKBQiHMSk1jJLJYrERGYU5e1gCBUCEQBcGWwF5QBUUKYBekXocUims5rLNRP5rsYkZaXtZDknaS4YKiRNy7wjr5B5VdnFiYdjO1KPVWGoOVTS7+A2gkoQwSneYAAAAAAElFTkSuQmCC");
+}
+
+.flag.IQ,
+.flag.IRQ,
+.flag.iq,
+.flag.irq {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABtlBMVEVHcEwAAAAAAACyFyxbCRu3HTUAAAAAAAABAQGsFCewFioAAAAAAACtFSgAAACuFCesEyYAAAC0HTOzIDOzGzEAAAAAAACrEiQAAACyGjMAAAAAAAAAAAABAQEAAACpECK6Hja4HTanDh60GDG3HjUAAAD////QEijVGzfQEyrPESfSFzDUGjTOECXTGDHMDyPWHTjLDiLRFS3XHjrXHz24GzTUGTPSFi+1GC/i4uKvDR3ExMSxFSqqDyD+/v6tEiXFEyjT09OlDRzY2NigzLXyu8JVVVXBGzWgDBrp8+51t5VZp4Dkf4rEHDfW1tb3+fhtsY4Vg0s2lmbfZXNxcXGYmJjurra/GDD7/fy118WRxaq93Myzs7PqlqHaPlO9EycGBgYnJydERET++frp7erLHDednZ3LFy3QHDXZ2dl8t5iKwKRPoXarq6vsoqzeXWwSEhLJEiiRkZHSKDxiYmLnhpNdXV30yc+Ghob77e++VmO6urrM4tYAcjbs9fEpj1vx9/SXybDkc4TeTWFLS0vasrggICD65+l5eXn0y9C/pqlorIgJeT/b7ONNoXfT59wBeDvd7eWPwipmAAAAJXRSTlMAY3RjBrCfsFZWoJTdckXdwChFKJSB74n6FLyLFscSrvrx7X55MaJo7gAAAkBJREFUOMvtledT2mAcgAPICEsZzu5BDlS0QBhSSC2ilIQpyN67UrWintZ9XXaP/7hvIitpoNcP/dbnLsndL8/zu3s/vRBEoYIfqsV8Pl+sfsBTqkagAYzAY+A9zePfMwNsbRwOx+iYWqZUMexpWHzf5YKU/Ltms8dfbWgfAbSNRtUfj5MR1YknZTwYhnmyyTujTqfL7nRBwK6iKGoymYBOMg+wLMzVl/N5x5M2ToDdnjfo7SDwo0zfYlmgsFqNxvruMsWuflav1y92gq7f0+esVjIwGnWAWYCeCp5RQZ8+z6LrOvoiFXjQ39Z3daZvoIJ+n13v+u2A8mnrezrdJwObp+sP0dt+O9Bq0Tevs7FVku2sL5Lb0/X0jk/qhvrxJ8gWzx0clhEEwZAu2KuP2wc7uQZ9/V4kVn7+GDp+12fSKV8dxrI+X2Qn4vNlV6/IEQgCSyyqd9AO9iCIuxEET7CFKywBdkkkwecFeM7T6WSKGTylBd50MBXCv//8liYDLIm7N2lBgBkkwhfhdUCIAAHWxEN/Cs6JZgon1sM/iIsmEgoTn92b2NDAm7ikzuH96k4hoS9nZ+5wcmjAOL/3tOI+ZQsSga2j6BpJ9Kh2shIctCHYKoKgsvH2pYZG4X0p2jpZYnSVrX3gQbVSQTOAQrG0/6G1kclkaq3oWvF6CGn+kv/Bvwykwhtcjkgk4nDHBTPSqUH2lFAOggmB6DbjolHIuZIZKcOeEHJugp+3RIMvKIWcMy4RCIVCgYQrUlwPfwFvVy9eKCqh+wAAAABJRU5ErkJggg==");
+}
+
+.flag.IE,
+.flag.IRL,
+.flag.ie,
+.flag.irl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABrVBMVEVHcEzJysjKysrPz8+7Tx4Pc0cWf1ObnJDMbTQjk2nPz8+7Uh++ViG+ViIYd03RdTrRdDkReEsghmARekwolWzPcDXU1NQllWrObzO5YCfExMTIyMjExMQplGofkGW7UR7JyckQd0vR0dHPcTYklGsRe03ObjPU1NS2TRy4TR7AwMDAurj/////hjsboWn/hDoWnGL/eDH/dC8Zn2f/fzb/ezQVmmD/gDcjqHP/ci0comsYnmYgpXD/ij8XnWQhpnH/gjn1+/gnrHofpG7/+vf/cSwkqXX/hz3/djAeo23/fTX/ejP/eTIip3L/iD29UiD/jEITlFv/byscjmH/+fYlqnYSilb3+/kgkWYUmF8YilwklGsUl10PdUnAVyMlq3cSf1DS09P/bCnW1tYrpnQeo2wyrXzbbjDKZi3XYifGxsbTXCPu7+4no28ek2QUglQknG/QcTXvgz7YaCvCwsEimWzRdDnGYSnNbDDDXCYvqncmoGsWjlwfl2gYhlj2hj4Tek3edDTg4ODn5+clnGj7+/vQzs3WcTP08/L2bCrb29vNVyHnYybuczH9iT/uzDlVAAAALHRSTlMAiEmc/F1VBVawbLKXqnNzYJQU0TWU33DQFLwj35SicCqtvK7x7e28PytlfWGm6F4AAAKVSURBVDjLddVXVxpBGIfxBaTaey/pjQUVRd2IGIhdJEhEcAkslhgQuybEaMBKjJ585sw7w+CE2bwXXsjvmfM/3CAIcMYGQ3Nnl9ls7urUWLQ9RuE/ZzS1oL91zeanchhfMCwn1tA1vdBZtO0lXaup8XkmIzSYZVk+3tsenlxamhwe/pz+lb68+L2WgGt6rNNU15hMpprqxict+/uZfD4jyPLeusfjiceRh2DZiu8ad4nEzVe4fXT584OseI6CPQ944Mj7aGClXfYALpv941qYEsXzLyQoPO/zuUsC6/sPcC504O2FgHq3Wz0ADl60b+LgwY+OqgUPHoLwcRx/PT7svVzgcjF+HAfEAx/1ek/UAuztyA+RgHqvd2aGCxaAU08Cxm9IfEDngB/Y/CaEz4iH5zck6eTdv8HHqanCfPAQBM+QJ3MkSbKtlwaiyPjZQwh8dI5ks6kG9qLHwQ7rHVxgZ/0gDpCHOTbwfDBOOfi5w+/Cyk7ROxyOtyoB4+dxUJyDPB8M0Tng+yAIsn5smwvo8+D7khBQj/gYHwywfhoH4MnzY729XDBbmIN9fzIm/AyyXi0g87HHwSmdg7jTyQWDdA74ERIw3vmDD8gc7ElAPeLOCBfMFeZgP7EVE3ZXWB/lgnnyPPETW34UFH0kEuWDPtYvkqAwH/Fo9Ko0mGY9DkKMDwRUAsKxX0WBEsIe5gQCKkE/62kAzwdOQ3A76euSoJ/MwX71DgfR0K6S+0Qud5RK3axdXKaXi8FI0d/f+csERVFyuVz9o9oqvd6g11dpdG0dKXy4S9+CX7y9vU/e+f1l5S8FJfes1lBX8kPTrrVo2jqO4GLk/KC7W9GH9QbVHyj4p7FH+/pNRUVleWVlRbfpFfngL4s6mAdCuV/eAAAAAElFTkSuQmCC");
+}
+
+.flag.IM,
+.flag.IMN,
+.flag.im,
+.flag.imn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABs1BMVEVHcEymECSnESSpFCiPCRWmESOlECOlEyWiFim4IDqjADOfCiyYCxqlFCavFiysGzGdDRy1HTaUChejGSqxGC6nESKuKym3HzmnDyGnECG2HTa3Hzi3HjaRCBWSCRaAAAyOCBSXCxrQFSzPEyrSFzDNEijLESbIECTRFi7OEynKESbSGTLMEifFDiHTGzXJECXVHTnTGjPDDR/UHDbWHzvHECPCDR3WID3EDiDUHTjGDyLXIj+/CxzYJELGDyO0GjKWChihDR6vDyG3HTaOCBOfDBu9ECSxFy66HzupECOmDiClCxqbDBqSCRauFSqsEifDIDy6Fi29GjHAHja3EiaqDR2uCxqdCRa0DiC7DB21VF3HFSzDFCnKFi66O0vDGSzq6ejy8fGzQ1HJxsa4eIDk3d7MpanY2Nf+/v7IGjTNHjvRIT+wMD+8Kz3W0dLHWGXNyanMy8ukeU+vX2O/mz7NGDGyNUO3MSerTD3AEie+hoqziYe8s3a+tbbMc36scXHERla3rmTJfYfZ1r2wrq6kNRnENyW4on68uJ3JwJS9VyCwl5qvhGvIv33Rlp6upWDDrpq4wapdAAAAInRSTlMAnttxsIhgVyiwAgd3SbgTt5SUP8xR+Gbtx+p7omahFvHiAetmQgAAAwtJREFUOMt11eVXImEUB+ChBBTM47HdXUJGZGHFbkUag1S6S1k7sWO7/+R9Y+IFj/cDX3h+99w3ZoaiYDXKpH1t/XK5vL+tr0spa6JeqSZpD/ht6ZL3OldxLeHqbW4TKWWNtbqlU9DtdlMdcqfT6fXuVipzc3NTU5Xd3Z2A37fkgCVsFkhEDVKptEEkaRa6XC6LxU0BXVkAhTio8fEPoGaMOzt+n2MD1iYsgINV/XAYBLwLhGf4zNjYmNFoHB0ZOUvEYvF4LJZQqdTqYS0XwH4ceY6PgoAGFE3TKuSHtZYVHGA9ak9w3qthfy0bIMaB7V9y1htAYNW7wLd/wev8EAoQHk3zguPxoUeBAOtx+yRa6l4Cc7Y94/UWGwiwHi/2/mLkLJn/fgV4IqXivQF6ExNgxkHT7H3NFstHj7kETX85jV4m2fbIm0I2ailAejD81X6u9PNX+YFWpU5yx9karwutgQAe34i9RhO99FXpp/QfME3+DnDSo4CfbA+WevEDrPUuU4ipU7cHPEd+Agc4r+G25iCTDqiT6YM6vwgCDj/pmZ1M/Xv8WwxESw+QE342tAwCyJP3QKV+Kj8/l/bvSw6Gs/69BwWM9dfSn8kcHZbTvw/tgKP2Jt0E9DhAjMOcUz5TyCeL6cKNneWMn4YBn7Hemw5vogatwf4xi6fhvRkENnysxxwe1PW3a5OBnwb6WeRxAHrimoGdjBePokNDde2hN3vWYYB4qJiD8hdu43q+PecnUYD0Wuag9vajn3VMezwO8pO2dWrTp6m99Xjnz3OnQbI99jjAvxMYDoc3f8ouYk76eZuV2gzWeHatluNFOA1qz/v5bRggHir2HphM5ycTNe2xhwFXkHsncDsPhvfbGc61hx4HkDfoqlU7rGkwOj98TXsuoLeHXe4VXDZQnpAlHDFjTvrI1rYVBMAr3O0WtkoU6L2ukAhahWuoQHArHInMQx4Jb3mAtoo7KJe7W9DZUvvpaJQpRe2t75ZxraOyWt+KB96AP3ukr3+gZMoBRfugWCwebFdImQ/Sf7upVWNToeAIAAAAAElFTkSuQmCC");
+}
+
+.flag.IL,
+.flag.ISR,
+.flag.il,
+.flag.isr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB5lBMVEVHcEzDw8PQ0NCjo6PS0tLDw8PY2NjX19fIyMjQ0NDCwsLS0tLGxsbW1tbKysrX19e+vr7V1dXW1tbCwsK/v7++vr7Nzc3S0tLU1NTIyMjExMS6urq8vLzNzc3Y2Ni6urq+vr7Pz8////8ANbYAJ6UAOroAOLkANrcAMrL9/f4AKqjY2NgAQr4ALq7R0dEARL8AUMUAPbsANLTa2toAScEAMLD+/v7U1NQAP7wAR8Dh4eEALKvMzMzCwsLk5OQfUMDOzs77+/z4+PgAS8LIyMi9y+wATcQ/Z8jw8PAAPLsALazFxcW/v78OQbotWsNsjNaHod18mNm4x+uXrOG7u7xdeMjJ1vD2+Pzy9Pugt+bX3/Pt8foJO7cxXsWdsOHd5PXt7e3n5+dhjtmmu+dLbcbk6vgWR7zC0O5zi9Hz8/N7kdNRe9AASLAARaeBo99bftAAH4gUTMEAHHk3Z8oALJwAKY4AMJfq6uomVsONrOP29vZDedJnhNErZMocS6hjidZWfNF2ltpzk9mxxesjTbx7nt5Od8nH0+8AM6Ld3d0eRbU9YsIrUboOWcjQ2vGvveYLScDh6PZBXaOcq8uJnNcZVcRylMh0irdVidiquc4ANaNjda0OKoB2hq+WnK4HK6UTNqoyUp8blpv4AAAAInRSTlMAFMICWXaw/laEY3LdRZ1lRaGUB5SvrvzfI7yx9u0qKqHa49sjiQAAAztJREFUOMuNlflXEkEAgFcUWPC+0g6PFlGmVRIytgwFrJX14Ea5r7ihNKNS8T6JvO0+rf+02VVCaH2P7wfmveH7Znm8nRkEoSlvrxA01PN4vPoGQW11eyNyBY0oB36W1fIInH8BwdDKaaisvl5eaJehNW1qJVLNw3F8cJ5Ka4ACUwBNOu4PDGaZrKWVUy+orK1AKyoqBddut6jVfEKJ4PgwpQG+rcWdpzQzi8FoGGAKDd3hhPQfan52fkTz/g+CD7scXw76R0cfQwYGBh5CjleSG45pF92l4xTlp6j4CMDsZkPk1Wvk6+5Bf3+hfxfSC5lbSRp2HA6SJB1e07pH3CMSweD5s5xfpPf2PoDIZLIxsVjc3d3dA/1cUOTndeiPXfbl5wHtryw93ZmZmdlcS6Y+3s3rzPJiWmd8yepPGIwuLU7bsDwKm3PLuJaaK1ge+vJtQ/TeE2T1UxhTYP8BgMKVCRoNSa1epVLptbOmIx/UYCAdxtgwBVmnYcBnDQ5lKjvbPM4STFvMPpdnPWVkDSYQojhwzR0/kIlTIZ35BJQUYJaF6Jhx0bAg7nEvZFiCweLAptfNwrV97ujCLiglwDa7T5ghogsXf8UfYgmmdXMb9JgRmbBSAuDxmHU+OGp1HlBKQHoiPSLVrNEgymxbSvpJ8J8l3btauVvi1tlLC+Cbod3TgnDUcVg0T0wiUtbAHtE52eb5VwWYxcI6TViZADiDG+sX73Fy2RjMuIAGsOgK5/cfiDRLrqnym0okl8slEklkb9l45LRdqoDLnNjvevES+bw6dnkTMrpEcp+mr++dPjQVSyQSsam9d3e6IDB48y2/x0UXuuRch4w/orkDOevKBW/zZ0Lh8rQ/nvOZ9S8CqIv1syavlyTNXotpObTv7mPXu85Of8FAZTDbMADPRL/fT8XTGgUGwqQlFtruK/R/h7x2qRU5fQ/S81lCqVQ+ySHlZwPUCOycpPdDbIom9uHIBzQBtdWKqAk+lKuuCbhCFEWFXEHNjaoJBnheB/zxEfhEeCZTgXvKSeutm3WIWt1Wg5YVXh3l1+u4TTeqhs6ZZLBCW0h7HPTqC6qjTsht6mxubu5s4qId5xfSX3GcWSGpNQGyAAAAAElFTkSuQmCC");
+}
+
+.flag.IT,
+.flag.ITA,
+.flag.it,
+.flag.ita {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABlVBMVEVHcEzJycnMzMwAik6OFRzGxsWcHiaUkIoAbjOqKDIIjlYCjVOaGySrKjQKcDmsKTMAcTYAczYHhk2TGyAEj1bT09PT09PExMTExMTExMSJEBjU1NTLy8sMjVUBiU/BwcEAcDbT09MIklmoJTAAdDgDcTkDj1UGjlmnIiymISyJFBsCjVLU1NSNFBwEi1CLFRuNFRv////HIy7FISzDICoAlUoAlEgAmU/LJzLCHijKJjEAoFkAl0wAn1fOKjbMKDTIJTAAmlAAnVT0+vcAkUQAkkYAnlb89fbPLDgAolvAHSfNKTUAiU2+GyTOKzfQLju/HSaNFBoAnFMAm1EApF0AjkIAkFTU1NSSFh6qJjAAhkcAjVEAgj0Aj0P99vcAgkQAjED2+/mYGCAAbjMAeDoWpWKeHCatICqpHCWjGSLGxsYAfD8ApV+lICq/HicVnVcVoVwAllexIy3+/v6dFh7BwcHDKzcDczjHLTnZ2dnPz87g4ODu7OwVmlMUl1AUlE708vLt8e+4GiMLmVXo6Ojn5+cTi0k33ml9AAAAMXRSTlMAJmr7sIKTBVtW+a6lc3NglLoUFF+avLya3zVJSZSiSdrbP9rtUbQr7cZoeeLxslZ5i7ws4AAAAnJJREFUOMt11VdTGlEYh/HVoUixlyRmNL1XiigsCBogIEgCCEpTMBiKkAQ2CiJJgNF87rznnC0nu+v/ggv8Pe+c8QaGQdM/W3i1smp6a1pd0Y7fHdMzN0xveAGfcwtPjblcLopn7O3DXi8tKrt5g+55s8k8NBnT6XQryLLhMMt6ToaD/tXlxT7eg6VF7eS0wWCYntSZH2UyzUqlyQBmG429vTDyLHtSsuCVBv1r1PUywtrtc1ekDUGrQTziHo8QkHHcoNs9h3W7sVBsMyIEkg/+H1i4w094oRD2XhLwHnhQHlgOeR/D3tv+yuRalN/eVgtCot+oQJCmfCKhCELkOcSTAP878flEIqkIYrR3QRBNh8XziWTyxwdFEJM8CUSfTG5tKYJNzCPAwftIIPn1dXnwMSKcRx4HOfDw/CT2ysAboby1igPhOeDdKoFX8tbqMQTic8CrBJjzHgXZqOjdbvfad3mwQc4Tb8MB7VUC2vMB/3zklYGLeCv2KDiKCs8HvuZQBD7hPPL2GgRZ6bzDoRb4JC8Ggg8EfikCwom31w4gEJ8DXhlYae8kgXg+EPArA55jj4LTLO39v+WBjfY7JBC83+8vqAWiJ8ER7VPKwEb5zz/jOOB9oZBSD+yC5wPxfCpV/CMP7OJ58Ls4kHyxqBLYKY+Ccl58TlEtcNJeCND5Yh7v75DjZIFT8nyQyp+WO1/IOmf1eu/i8npY4vgA8x3ER9XjOATlcqfTuT87MzWBNqW9fetOHQ91/f7uN3R9NKrWQMc1y0y583jmyZzsh2bs3jh0Z2gHZIDfaF7Owx9nJ27+gYJOqzNrNBqz7v27ZfLlP/VboNnAXa5yAAAAAElFTkSuQmCC");
+}
+
+.flag.JM,
+.flag.JAM,
+.flag.jm,
+.flag.jam {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACAVBMVEVHcEwChjkAZyAAZR8AbCQAbycEgjZOhyUDejQAdywAcygBgjYAfC4BiDsBiTwAfC4BiTzHowQAbiQAeTIAbSQCjUADikCinwsAaiPMpwECkUUDkUUBkETGogZQixivigHJpQIAZB8AcCYChzhckhsAbyYDjULZvAEAaiLMqgDLpwDMqQDLpwHMqAHLpwAEkUZFnzQDk0nEtwoDk0c+cBIAAAD+0AD+0QD/0gAAjjAAiy7/1wAApkr/1QAAkDIAnz//2QAAoEAAkjP+ywAAljYAokT/2gD+wgAAoUIBqE0Anj4AlDQAlTUAo0UAnj0AkzQApEcAiCz+yQAGBQD+zQAAgjT+xQD+zwD7zwAAjT8UEAAAcyfNqQAAhSoAiTrZugAAZyEAkkT+xwBpVwAMCgAAlTvdtQC6jgBbSwDnvwAAmkK5mgDLpgDOngB+uCA5pi3pzgXUyAkAdin2ywDjxAEAYx4AbSTVrgAAgCntxACqjAAImDQLnjkZnzOnvhOcfQCXvhrxzgHJvAkvJgAVpj5UpiJmsSOJthjfzQgiHACSeABGoiSghgD31AEAeSmDbAAGlzpRri0klCfbvQD3wQA9MQBNQADWtAAApEZLPAB7ZACvkAB8qhdFsjXIxw3BnwDIoADuuQBumBafsRC8yBMAfCawjABOPAAQiyflrgAqsUMLonD8AAAANXRSTlMAcpSvdldYBShhiImuvN/a7z+8Et+VSVFJV3uuohb+sWihn5/9+mWu/Zyc7cbH7bLxV7ST8YLheocAAAMTSURBVDjLhZXnUxpBHEBPBQXr2GJv6b0vzYCHihILohgliCERRJAuJooFxd4dHUuMbWxpf2W23HGiYN4HPrDv/W7vduaOohBJgleFb4qLXhQV5xbevyVIomKQVPAU/paUv375hfCRIT0tN+5al5336InRSWU+MJlMg1Mb7wnvtKr+fhh+QqSn3UmJEyYmJgrjUlIz7hqNQ0NOCtqhyro6+vwvm0C0KOuF1QeOU6vdL7KaKdNgHYSm61YnGRvqWu335uZmlUqtbOjvxYwFJWKxSLQESEDTNLzKwmGkrlKrlUplVVVDg2bch32HDlCLNscq8iG03I39sK5GelWDRrMRYn1AAQAMZlMlhq48monQyfixSTHxLYAEENsuCuTySu9hhI7GexYk2N/XAS4AwByQE9yXdW68aAL7XAAMK0wRnOF0zQYzXv+D0bgAgB07KXwzrO45Rzr0AzsgShC+iNcDdfgsJ/VkvMi4CKIG8E780JdIVuc0mjF3iBkvWtKBWAGY3pVg3HNeVrfvXRauBsCyL2HBun7CAG4MAFjXMzre/fSV1SjBojGsB8w68L9At+5n9c5jy/VxVwObldVFnZ3h04oZGEYu6Z3t7e0jhhsDm515NCLf7Ly+HTF0w01z471zo7W1s37o19Rs2WIF21ZmfMgN9aamRs9gDaLtpyVqYNYzBxUcx3pjS8vmFNQh1u0owRIz3rdcC32kV1dXj54hv62n49Jpk0A3Qnavnye7wbpCoZAeIB9yEj5BHFgczHgPuxusK6QK6WwA+T0dHa49LrA4Jdz4Rm48RCbbnEI6wmVjXgKM712O3I2UBDLZAfHr6+tPJn4ZKGA5xv7RONlNNbMbVpe1ti7biQ9x9VG6FewHGxVkXSqN0KHf2v37bKs+HKxbxX679XRtANJFGFgbHu5uZXVUdG9OQXvrj6uvj0KvcGdpRmoyT8jn84W85NtZOfe+Ibq61i5gibm4KHVAu68skzIanz/Oy77yoRHk8+Kzch5+ZviKeVtWXgIXnxXE/kAJ8oW8+IqEhISKeB5fQP78B5G2v2l7TIh2AAAAAElFTkSuQmCC");
+}
+
+.flag.JP,
+.flag.JPN,
+.flag.jp,
+.flag.jpn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABF1BMVEVHcEzQ0NDDw8PU1NTNzc3Dw8O8vLzR0dHFxcXExMTIyMjQ0NCjo6PY2NjU1NTBwcHDw8PV1dXX19fV1dXCwsK/v7/Nzc3Ly8vExMTNzc3Y2Ni8vLzHx8fFxcXZ2dm2trb///+8ACy/ADG3ACjAADO1ACa5ACq6ACvV1dXU1NS+AC/S0tLBATW9AC7a2tq9vb3Y2Ni4ACnPz8/g4ODo6Oj8+/v+/v7j4+PW1tbAwMDNzc3l5eXGxsbLy8vIyMjDw8PBFj/t7e309PT4+Pj78vTw8PD99/jd3d3c3Nzy8vK3CS/56+7prbzchJjVXXvwy9PIN1ngjaDkmqvrt8PvxM/adI3Yc4rWaYPEJ03BCzvPRmn01dz34OVRfRAXAAAAIHRSTlMAhxR0R3awV1dj3eYCr5Ymn7ploQeUrlG8xyr2hfrxPyQdfBgAAAIbSURBVDjLrZVpc6IwAEDxFu+j9tor4KKiIiCCFFGhSFu8qrXn7v7/37GB1tZExc7svmH8QN5LYBgTgnBJncdCmWI6nS5mAoXw+RGxh6PYGfwNFvLfBUFQPWoubDKfCYWzKdQOnmSSmkaE01CWOvalrChAUWTLMTvdmxrbgCTzxUCoEIvFyFDgONFuayrbJwSha8sAR5EdsycJbtWGl4sqdSxwDYMe2A9c8NK2Tdt2LMW7cSjY4uZ/BfLoanfQGhBqF785Wi5ems3np/tPBvdGE/IT8uv3Z4LpWqdpunl3OPhjvOt0nebwoqXjwdzzac/nOK6+QgMBDybr6et116coY4QHNSSYrnWO83yKmvkGysPrw9fXOiUasu8Kc1SnqtUK8jmEIcFiAapXK+Jyc1zFgxk6e0UUxQcsaEib77BCZxfFcvnRLwBXLx96xdXL5ZlvAB43dM9npkhwgQcTA9WZMfLlalsBmFIfOvSZJ3AgAMtNnTEmBwNwN37XmfEtOsbyOwJwu3jTmWfM3xMAsJobZWa8mI3wgQZPtKXdf/fRZNc+4BPs5h8CxXJs0zRtB27KPkHbC6zOdaPvMoDo+sDdd21ru5N7Gg8DVtX6/cRxIELG43Ey8jV3mvim6/pQ11SpZzoWXBHuyXan1ef5L9EfhKYlcydB9OhIZcOR0mliCLl4heddm3S9s/j+AyobJiOlXDQazZUi8bcD6S9mtvGZohy2eAAAAABJRU5ErkJggg==");
+}
+
+.flag.JE,
+.flag.JEY,
+.flag.je,
+.flag.jey {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACKFBMVEVHcEzPz8+9vb3Ozs7Dw8OqVGbBwcHNzc3JycmLBRDExMTT09PS0tLV1dXAwMDW1ta/v7/IyMjNzc3ExMTV1dW/v7/X19edEyTT09PY2NjU1NS9vb3Dw8PX19e/v7+0Ul2mDR66ID26HDiKBhCKBAzPz8/Mh5HZ2dmiYmelDB2lCx2mDB6nDB7////ODiTNDSPODyX+/v7Y2NjR0dHT09PW1tbQESjg4OC+CRjSEyzGDB7VGDXj4+P++frBChq+vr7MDSLXHTvLysvTFTDa2tr4+PjEChzJDSHJycnWGjnw8PDFxcXz8/PExMTBwcH77/DXM0n88vPpmqPc3Nz8+/vn5uenChztp7DTKz/66OvPFivZSVr99/fLKzjNzc3ojpn43+LeYnHVJDzaazn55ObQHTTYQFPcV2fcT2Hzx8z66+3wu8G5GDbt7e3trbXroqr1ztPjfIjMHCzZOVCsCx7Wf1Hvs7r21trgV2zidoPnfo389vPqlKDhcH322dzdkpe5dnzj1pfa0dLs4a3aYDjdbHfXVWHjc4HCGjjdaHTliZTHx8fSNju7EivFHSzRSk6+QlTa1bzcyna0UV3g0ILacFTcknncuUrXqU3gkj3ZfjvYbjDRQ0HjoDzPSzjwsrvStLngiZCZBhLId4DIb3mymJqbBhK8gIfe2sXUmaPh2riWJzC+Pk3YVDP59eTfh3bNyrnhz3jMx63RWETYkFjY1tDgfmPcky7XwXIsAAAAbXRSTlMATbCJdgSeWCj+YmJyoY6UTduuvLgSrha8s98NCHvqnFc/rq4/2mjxaMftxu3///////////////////////////////////////////7////////////////////////////////////////+Kpg5bQAAA3NJREFUOMuFlWdXE0EUhpeaREBAjwWO2LsOyaasAUxMgrApYIohPaQTQgq9Sge7xwYIKNh77/49ZyYQNhui74c9u3Pf586dmTN3CQKpgMupKi3ZWbGzpLSqKIe7h8iigv2n4HPX0YpjQglT4srdpcU53IJ0946cfactFuLAwVjs7rsWbYOZJAFJmhua4i33fom+fxWLRZW7S/KKizgcTlFx3rYjoklLX98cEYtdCymVvQkSbOjzzMzM1Pu394RiUUqtkpdymn9XRcSuKaE0mvYuBnH/2/zU/NQlgCbUauNabVODa0xQzXdOq4inE0PIr9EoR4wp4EH/z6XF+4wMwNgO/W3GiypC2ALsowaNpq6urjeyHl7oDwRmvzD8gzbk14MkAIDLaqhDGnEl4z8Wl1eXF1J2MuFA9cAKzqsJyVk8JvP4IVDf5sVfK7cez/b0r/v1YUF1NT8sA0wAgOBQPZTyCXq/s7T659HKWvqIAabnd+NtPH9zAwCk1Q+JmhEzXPTs40DgNx61+yjod1iT254GoElqoMJGkAg8fOSeQJVaQ6gc2+CagwUA0lQPCcO4qz/w8NM4AJE2ASpnLLXhQhYAQJetpobyRyMOagJ4fQKUPtS5ERbq2ADQt1MU5RhNmDqGKWTn+4LgnwAguyFBjd0I4Wps0bTgZgAAVgclEOBqHB5XekjYTIgzAdKTtAuu29khyWZAVzu28xWmjFQYOMNa9FW8VgVfoXB0ZgIXWABp8mO7rfOyAmpY9h/A68RbE/IYIapQ0LTT/i+AHHXgtQ4nXdEemqbdETYgSgFBJ15r2Ju6NbcgQd9gliVmAFE/PqgBsNEOOpy1UFcYZUnOrQOkiULV+IysU6ch0WNN5RCvA7KrqBxDV8Y+Jnoaoa54WYAL9QS+T595UmDcjYhaj4wJ6NvQpRoAm0p/ubFRLpe7O2UpwN4L/QYvyKaB2xCQS93PgkmgA13ysAtkV/A6AqDuTL4iWqdR/m4X7InxeBz2RDO5CRJ1S7Fe8wj1RwEtfSFuVUGp1Teh1CLJGdjN0zmZ6bZUannO4xFzfX2WN6rybXn5W2Bf35K/tXB7ebNOp2vWtUIujmeEPVnbMj35gcc7dJiwWE7uy9nB+tFwy/ILt+9tvrCmc1h7c4/vgsET+wuy/aD2cMvQjLm5uYVb88u4ycG/w+SE2gX0xGIAAAAASUVORK5CYII=");
+}
+
+.flag.JO,
+.flag.JOR,
+.flag.jo,
+.flag.jor {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABklBMVEVHcEwCAgICAgIELRQCAgIEJhIBAQEAWSsIKxYDAwMAUyYBAQECAgIBAQEAVSgAAAAAVykARx4AUiUATSIATiIBVigBAQEAAAAJKRQDAwMAVScAVikASB8AXy4AUCwAUiUAUiRjLyYAYS8AAAD////PEigAaTDPECbQEyrRFSwAZi7WHDcAYywAazLSFi8AcTYAbTQAbzUAdTkBdzvTGDEAczgAYSoATSLUGjTXHzsAXikARx4AUyUAWSnFxcXUGTOyFyytEia6FSnBGza3GzO2ECOnDyG9Fy8AXy6WxKzTHzb5+vmw0cDm6uhoqIbvsbn+/f1SUlKPEyXHEyZ6enp0dHRcXFwuBgvplZ5eDBfVLEDMESXkd4UTAgQODg7X19fZ2dk8WDQ3QS6WlpYlglBFmGwQbzq52cjNGTMlJSWZKyt+OC1WTDL77e/31tqsrKzaRlktYj3w9PKioqLW1tbY2NhQmHF4s5S7u7vywsgfhVHXQVJaSzLX6d98mH6CWF3eXW3soqzhaXnQHzsTcDyMqpr9/y7cAAAAI3RSTlMAdGMUsCmgWgVWn4WUwHX3hLKuaZRL2+g/Sbzb8doj4v3H7dri+zgAAAJkSURBVDjLldVXX9pQHMfhgGwQAUGt3SWA7A0KQXGhYYMsEW3FVffq3vN9939OEpakwu/Ci3ye78mJNxAEmkwsF6gkIpFIolIKH4hlBM9k8lH4OyIUjRm7NzmqEtzpRuSSSaORmLqjWxubGJUoBUK5XC4UKEUTzEMiXtzcNg4xYmV57nexOlwAS1SHDObsxe1hAjvs9ebggR0X9sXqgAHWs7OzC4O8BIKWDwQC938JEV9m/ALyLlf8e7nQ3OHTO4VbIr7G+AD2LlfyJ0nmM/O3pcJxT3dcubx5NU+srHV5q3WmkSKZpTLzl3ulcqVQKZf2PmTQIwjgDcgnMQdvnZm5OmeLPNk7HGDfuOI4rH5B8uwtDuA+ufyvtjeZkrn/BeCTF2StzU0Wi6nWP3iDAvjawI9cnfGYW7Y+f+wfvIRgCX3unNXFHg/cUs/lSd43LC6x/83W8ckaH28HnAduapyT5H1Bhz/5Rh99TfH51N9rFGCP+dKZ3+/3+fyfDrL0Uaanu0ln/1BhCNr+9BB7ny8YDLrdbv/+QfY9TafTaZrOvtu32RwOJmD9xheW+zCHeb0ej8fpdJphNuRxsMr6+HXX8aBZ3uFDVBQHyJ8c9uHc8ZxnA+Bbp63j25fpPJ7xoXCUSKwif9bDO2/T4SM4gM/dxb7v5THnPBtgH/Ri43R6ui7PHc94JtjY9ZrXYZFIjN36usNm7jqe8VQ4CkGiCfixTqOWoqk1iumHMQovFomEQoyGs5COaqeIRPOFwjDS80PzxDCun376jKLC3AA/0o4j91zK/wMlNoxr9AqdVqfQq6Vi5uE/I6kk/30hQfYAAAAASUVORK5CYII=");
+}
+
+.flag.KZ,
+.flag.KAZ,
+.flag.kz,
+.flag.kaz {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABwlBMVEVHcEwAe5MAfpQCnbICobUAcooCma4CjqQIh5sCma4Ehp0DiZ8AjqUAfZUAj6UAgZgAeZEEnrAAdo8Bf5UBk6kBl60AkqgAfJUDi6EBjaQBl6wAjaQAbYYBorYBma8AcIoAcYgAi6IAuNAAscsAs80AsswAr8oAts8AqcUApsQArcgArckAqscAob8AosAAq8cAudEAuNEAvNQAtM4AnbwAnr0Am7sAn74AqsYApMIAo8H/xgwApMEAm7AAu9IAmbkAlq4An7MAfZYAkqkAkKcAeZEarrQAhJwAgJpMtI8AiaEAi6SCt2QAorYAhp/+xQsAdY5SsIcAnrkAjadyuXUAlKuWu1gAb4gAqMAAcos8tp59vG9quHsBqsQqq6JZr39guYQat7xYtogusqcQsL+zw0t+wHekxl9Lonywu0ANqrsAg54KtMaqvkofrK3+xAoMp7k4rZkAkq0AlbUBpbwavsOqw1WkvlFVqHqSw2vAyUvNvyyNu2BHqolmsXZ5s2hSuZICscgmsq0DrcPdwSMRu8h3vnkzuaoqvLW0yVlZo3DtwxZDs5UDr8a6vTlow5IsopeJxXkAmbYNoK4bk5VzsGrORUScAAAAInRSTlMAY3SXsLBjVwV2FCqJvJ3doEWUS9u8qoEjx/rtP/Hi8VbtaU9SJAAAA5VJREFUOMt91edf2kAcBvAoIKLWWbsnCApIxdparKAIGAlJtJQle4NQwL33nq2j7f/bu8sZAv20zwte8Pk+v1wuFyAImPpGqUwkEovFIpGsrq2xnvhH6qVPwWdDnfglO8aOoZhQXnWKZG1PqnoN0ubnNE20iVmWXTrc75brR0b08m7l/uH00pjJDPLsYWdzk6xOKpXWyZoePbS5aKvNQbBsZO/4PcgIil6v75fLQe/79BJrMns8HiuIDcRj+tqjNYMCdX2+fO8xBwWYgYEuhSY8DRM2qBQqlVYDC86N7HKVxxykC0SpVCpAgNdqFiYJNprdWH7/X65EHMzX9MGC8/x8GXt+NTyv8r2eCWIsert+jHy/kHcVCkqe895gBYX57K2c3xx+fDx2spdSCpcPfQ8qZK7P8HL48V2BYCjmDib58dj32EAB7NIZ8oLFF9x73qMiFTyo8mqbHdzDeva0v2I8uIB7dXh4+CgRUmGu6TNAr3bZCdPaxvoZ58tbE0sMw3hDB3g89kOwEM2cdFd4cKMxNypcJpJavBzOD7kshCmSzRzj5eCNDygoVJiaShyg8bw30qCwnVmJ8+PhRiaZABWDfGo2QZU59J9hYS2djncLz0HghzuQ2AR89jJxVXIK/TsHLKyk4xXH7GqzmGLcsyBbTMntJQVe5xgnzGsrK3F+OfBBfS8GklQodDmbo3bDm7kS5Nhzhcx6YUB4ilUxMnRIMdS8k4nMb/7II875T5OgcJPOFCq8ltxKUX1XDBON5KNOhvOfkf8ICp7t0Mmp4BTDB0Ul87tkngyTO/ndEh6P/MdvXwjPTHo1LhgPH5QhSZI7UcbrVG/vVPgPsHDh9Z7yLwl3bnoN+TDpnFarS7+XuOVgP8hdIUgqy6cSP6l8LqKe257H49/pPkGPCtaZYHBfcIohhzs/x3hzR7tGIx7P+VG7n7DebDGp+5dKgznYeuNcJDKHx/MeFmwzW0VSIRiPONrKITye84PAo8KFN5fiX6p7rr7n5fHQj9p94ArFVVKFXxLD37zCj1pA4WI1l9JqDEbdVxSdEa+mzMt+ERZmgjs/zS7HJMgEiN0+MUlbzXcfdIjj8cgv0hafj3D9stEOR8ujptoa8LteU/u49UGL3QIz4XAtmBfvBiFfXHB9s/h9PskLgqbfNnc0VP3RPOmobX/QMs7lC4zf738tqYHuqfTff1CNHTWP21slEklre+2bRu7LP20UeAKXam0KAAAAAElFTkSuQmCC");
+}
+
+.flag.KE,
+.flag.KEN,
+.flag.ke,
+.flag.ken {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.KI,
+.flag.KIR,
+.flag.ki,
+.flag.kir {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.KW,
+.flag.KWT,
+.flag.kw,
+.flag.kwt {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABtlBMVEVHcEwCc0KXCReYChcCcUGXCheOBxJSOzADazudDRoBbT0BazoBdUMCe0oGd0gCd0Y+VzqcCxmRCBSRBxMBaTmfCxkAfk0De0sDdUSZCheLChKNBhUAZzUIfVGiDRwAZDMAYzGNBxJTBg+lDR0AAAD////LDyIAfkHGDR/OECXEDBzHDR/JDiHAChkAg0cAiU4AgEMAeDwAgUXMDyQAhkoAi1HCCxsAdjoAdDjBCxoAez4Aej2fChe+CRgAfD8AZjMAhUkAh0z8/PwGBgYAazgAjlQAYS+aCRUCd0SjCxmOCBKRCBO8DSAAbz7FDR4AcjcAe0kAWizX19eVCRaLBhCoDBwAdEPGxsazCxq22sl5uZpbqILttLrIDyQAgkwAckGsCRfExMS6ChmTx63poKcCDgneYG7XUl/nmKA1BAoAGg/BDiFGBQwgAgXZ2dl0tZSfzrhSpHvI4tXwvcLfdYHm8uvifojPLT0AMRzx9/TbaXTIGSr99/cKAAEARij32dwtk2ESiFE1mmqs078Ng0nQMkPmi5X54+X9+fkghFD67O2s0b1Sjm5zCRXEj5TCwsKdLziktKuYkkbGAAAAJHRSTlMAY3efdo+wBVZW3cChriiUE91FaYlg9rNJvBwqrj+tnO3xx+2PURFKAAACdElEQVQ4y92VR1caYRhG6R0R0Bg1PRMYQUQGBAUENEqTohEIHQIISLH3kt57/nG++WZghpZzssgm93BYDPc+vKxgMHD4QwKOTCIdk0pkHObNIT5jAHyBGLwPM8durON4ATFvLJaLicQyTk83LLh7z+1m3JYCO5vVz0H0+qVsdt0by+WCAJFYMsJhCgQCJmfklsjpdIMXo7aRnVvFIQP9EsDkmsHU3lxwhcSJsxK2GECAILVcy9cTvslkcrlcMwBsVu2wGnBsVqvNYLDAAEHO9KvUPE3HsFmAWq12OAjf4tyAAbIVJO6HPqVjLd1htUF/vhUgyHPaPE3v8ufd7QA5w8j5Xt2BnwN9eoDUvK1raDqcp/wwPQA/pPu3kvPwHOh3BshWIpHYKyZTr1/RdHKe8L1ff9GDx8uPSM4P9pL7L99arXCe8MOfUl/Od572DwiWjw/eFJO7qf3UbrKYOMYf/Tnow86zvwye/Pvgx/8WbJfL5ZP3pcMXV4P8q+8/aUHDOIVjNKqmTitH1cMPHzvtz+mLS98aFTQyhA4CyPT05bvKxUm1lE6nS9WjyqnZvKCzU8F2htSNpI6j1WpRFA2FQhqNBvj0oO136tqWTvg6u58MmnXCV1F+Wyfmod8OmoF+8yht3ozrukUyuI5S81067Rzgt4LNLr/jmvY5wF/0RPDgG/BVaD0AqaOdeodPBI1MIB71Aewkvmg+XljQ9OiFvCcCgmYU2PI7XNaoUCgcZXHZ43IPxO7Lx+OFArQL8bzP449EeArGtf8hWzjc9UczoVByx+WbkDWI3++/z1NOgA8fCAf/QU0qlOAbeTwem8sSThIPfwNR00Xsn2gNcAAAAABJRU5ErkJggg==");
+}
+
+.flag.KG,
+.flag.KGZ,
+.flag.kg,
+.flag.kgz {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAA/FBMVEVHcEzOAADSAQHFAADMAADJAwPHAADOAgLVAgLJAQG8AADNAADDBATGAgLCCgrKAQHZBATVAQHRAADBAADSAADJBATEAAC8AADUAQHCAAD/AADUAADWAADZAADgAADSAADyAADJAAD+AAC9AADFAADkAADMAADPAAD/JgDoAAD4AAD/CQD/RwD/kQDBAADbAADdAAD/HgD/gQD/jAD/XAD/aAD/vwDuAAD//wD/FwD/sAD/5gD/egD/hwD/cAD/9QD/mwD/twD/PwD/TgD/oAD/3QD/EQD7AAD/MgD/zQD/7gD/VAD/6wD/dQD/lQD/YAD/ygD/pwD/NwD/0QCK6TuxAAAAGnRSTlMAgJeQwChiWK9zsNsUUwdJZqHvoPw//Pbi4vrMoCAAAAJGSURBVDjLvdXHdqpQGAVgrKDGGFPvpYhiASlJqCK9WrG//7tcJJkIukgmdw8YwP+tw+CcfQAgSQUsFNsQBLWLhYdW5R64kXuwHD/vHqBHDMXQJEiSP+VirVVJTd81i4/kCHiBMAwbjif0nCBggpjT3cm484EgOI4/N8rtQq0KgmC1VoIazySJIiMgnp7M4XSIeXcy7GD4V8hz0M6Yhj9jMIRv57xgdxKnSxPJizyQycevQe/3AM0ChqE8j2eYn4IpLwkcJy/86c/AlDIc11UUbS3zGYBlAbPgtH1kR3a4FCUqAwYZMJO3oS6LwZZbKRo7ywcLZ6+vN6Z7Ete6ph2zALkEM0NcCY6xY1lBkCOH4/MAv9N0UxUWHruWzWBv+VnQuXzFnpYHRZB8ShLVTcTxTA6gOGV/kEyH3e3MpRkFm0uAvqfBVNBC6iAZh81hs+FOrsinAZ76JWq7YmV3rUaSJfrhnoXzAGstOd/aq6oRGJStrae5K5jBimVVVQ0tz4gEi8kDsB+4ure1Vfvo6Yq4uPyIXAGM5Cx1c0FR1io0d0w+gHnZWIa2bevKVuTToH8FwJQscYriBo7ApzffdQDz7FEyBcufZY7QDRDvwenRo+DsIcX7ANn5TQn8T0DQSSXGnTgncgE9/sRHo1EvyWDQO/fuhM66+ZDsxwBB4+EGVIp7vRn3euGp3HgdnBO74deK504ef4z6/bf6C0CSj8XmXeruqLRqpfLf1/fv9JO81avnuTJ4+4KqtKqF0lO9Xn8q1ZrfF9I/DGzRkLxNsPUAAAAASUVORK5CYII=");
+}
+
+.flag.LA,
+.flag.LAO,
+.flag.la,
+.flag.lao {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB7FBMVEVHcEyuFiqgESSxGC2uFiqXCReOBxKhCDCrEyadDRuqGCusHC2eDRupECKkDx+oDyG3HTSSCBS4HzumDh+wFCmvFSqmDR2mDh2aDB6ZChe3HTWZCxe1GjGOBhGNBhWRCBOcCxq4HTaxGC2NBxL////NECQALm4AMXEAIl0AI2DOECXPEScAM3MAJmXKDiEAK2vIDiDSFi8AKGi+ChgAH1jUGTTVGzfWHTkANXUAJWMAOHjLDyMAHFQALG3CCxsAI18AHlbTGDHXHzzAChoAMHABIVwAIFrQEynRFSzEDB0AJGEAJ2bQEyrDDBwAKmrGDR/FDR6lDByMBxG4HDWYCRW1EyyfCxkAGkqqDyDCHDezFy2RCBOwDR62GDEALmasESS9DSC1DyMAGEaoDR0BMWgAK2KiCxkAHFC4ChnFEidkFDhFHk2dBxNrKFbk6O4AFkLIFi3NHDetCReqFDCbFjXy9PeIGDtvGUEAM20dPnamHT4AKF60wNO/Fi5ZcptJZZKBJE0PNHA7WIn8/f15FDSEl7UmKGGcEi19HUQtTIAbHVICFD1jfKSYIUeKES6Ror4OLWhbGUNhIU4AJls9JlulsccsHlMJOHbK0d5thqswM2smTYMKG1FsgKNjKFEwGEVAFTeUDyVSDyuECRa3uTmWAAAAJHRSTlMAWBR2kHawBWJXRCZN24adrpT9rv687cf9vLPfomYqoZ/x4vGnrMKtAAADKUlEQVQ4y33VZ1MaURQG4EWKYC/YNaYARgxF0KggaWjsyIIoIBgRQSIWsBew98Re0vsfzS17l8WMeYfhA/O8Z87s3WUpCiY1nccXlOeU5pQL+OK09FTqjqRKisB3irj0gd3utXtB3G7wcbsfFgj4//RSMrILaZpKy8mz212uaLQB5ml9NBqJxx1uKUxmQXYWX8zj8cR8QX6m0+/3OGkK6OgrGMhh6mFe1kYicYdDKn2D4gTx+Ia1cg8ouAjnephakPZI5C2KUVmjVMoTBeKTOSi0t3d3d7fVgEAv9wRx4b8ceSXyRqZw27Mcjed4o6cfFqDPO96YBNnYOF5xcTlZB3v1r5+U19WwMvn5g8FgaGxsfAJSVaXYu7o4WImz4/H6cqN08WZsgFr5vmwwYN6IeFVViwLEZDrbC18cLMzNOhyO2bmFxfBRZ2c1KIwuEU94i+LLbix2uqXRaCwWnU7X1dWlUqmamoB/zhZYD7ji07wMJrYMOfGd0D8mhYQHy6xty3CmDrnjoYeFoSXGM+MViikZydTmLd86NgIL3PEm07oskV3M4frIvx4AhVHGt2Bves8pzOvY8cgzBewx12i4BdlWE7sO9HWgEBjlrAO8hbuSbA1x1tcNTFOBIcYjrrHoNue5BXYd5F+gAsejgzrlFJbJeOxJgfXooDYT1/VjNRrP+uaRaWp1CHvOfXBIGttbLMceFQLEYw6v/HIMHfb8OuRc3zzyDhSSvAof7OHu9fW3MzwerYP9GChcBoDfCy8m7uPz8E1rNbM8Gc/4o99/qMvVqwNvTU2bknlKQNRqrW9/5zx8hKYT//XHeLF+YpAK7zMPuZzxahQtSK/Vt3+yMw6zc0KbzWa9fsJGOX0Jn8S1vSBWa0dHR0/PMxDocYE846zncCvkCc8UyH8Ch2sJZ8cjjwvIG3uHcXp6k3mShwW/T6kd9vjpYDDYzyTonwmFzAlOfGimzwYKTg9N05n5WUKxRCIRC7Pul5QV98H00zOgqEc6FJoJAm0TpVF+ujA7I+XWiyY9Q5hbUgZbgyQ22yNRBXRFkrtfUPcyKoS5lSKRqDJXKLmHf/wLLnuWls8mkSQAAAAASUVORK5CYII=");
+}
+
+.flag.LV,
+.flag.LVA,
+.flag.lv,
+.flag.lva {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABelBMVEVHcEx4Jy55KjJjGB2MNT5yICd4KSmGMDd1IiiMNT6MNj9uHiRsHCOENTpyHyaPNkCSPEVrHCF+Jy5+Ji6XQUuKMzt+JS2LMzx+Ji15KTJ+Ji1wHSRmGR9yICaaRU1yHyaWP0lhFh1sHCP///+hMzycLjeXKjOVKTGjNj+aLTaPJi2mOkOeMDmOJCykOEGoPkenPEWRJy+qQEmdLzifMTqrQkuLIiqJIimYLDSiNT6FHyasRE6TKDCvR1GsQ012ICifMjuZLTWMJCtxHCOZLDViFhygMjtrGiCEJy+AJi6eLzidQUp7IyuNKTGEKzOHISiPNz9nGR+HLjeXQEmTPUaROkOBIyqzXWStVFvDiIyLMju4bHLYqq6+dnyOLTWYOkPU1NTY2NjPmZ2XMjt9HiXExMTMkJX8+PibMzzv3N737++qS1OkP0iQMTqdOULBfYLdt7rHhYvkx8nq1dekRk7h4eHi4uLhwMOZSVCsiYzy5OXBmJyicXS9uLgZxEksAAAAI3RSTlMARymwj/4GVVd2Y2+SE2KhsH6u2rG8x9+cHO28oZ8/2/Hx4qazkuAAAAKsSURBVDjLvdVZW9pQEAbgsAmIG+5VW9uKuFQRqFZRBIEiSQFBUaIC0iJVEcS1Vbv8986cSUiCcuFNvwsvfN5vGHISwnEserPV2N3T09NttLbr9G1ci7RZBuFvZ3v/213MHiaNGRowWnWvmnSneXhESHBv+jOZTDx+twYJLC15a7V6sZg+ZBkawE80m83tVmNvnyAIPBRA361DyEPD611YWHC76/Xji8MdzBaGF/jkUWiSh0J8nXwg0ODg3e4PENe07+zsGHO2uDj3cVIpkPfK4yXuck1DfA6HY5P8jFygdZ5w9D70G4tzzM/wQW43rnhpGxWn8Q3/mQp0eeTxGi77L+RXslh44pu54p1Q2IuT14xvcGkd2bNCUeubOY2fnAmhn8qaoEBes42KS+NDK+ixkC6iXxMvT0r5fP7kpJDbdztYNnAbGg/eid6/+wiFQCFfOZ1Q5fTXTf46V3UgZ+PZ+k5n9eD223fu4ff5xPM5rdzn8QMxucvSPToofP058YL8n8KPFxX+UqFyVSqI4lKtKoqF69LVbavrUPljgsLNdVW6LZWDqomX0NNc7PObg7twMMY9PuDZ4tFuqg4K7wS49vX9XOEAkxPjnvn58KfINrdz4VIeKvmgiEP8cLp+v8czOzuLngryOsp9IPMpxpmfZ36ZCpJXjZe5ajzzWNg68ikPlWp8g6t9KhKFgvohfG4btj75VSqw3xDZa7kynnkqbMq/Ca22IZ8CvxqLcvxRwz/D2XhaBz0WhCTzIac/yeLxa5ZvrMO8VAgl4Vc5kQhSTMFgIptdDktc7SOxKBR4HnBfr93WZbFYumz216PjpghLsFzOplLL7NuWy6ijBh0nCCPD5s6mF41eZ+sYfR+jbGMAvzPY8B0zaGn9gtLruuwdYwaDYazDbtHTP/8BUUtQgwOpwEEAAAAASUVORK5CYII=");
+}
+
+.flag.LB,
+.flag.LBN,
+.flag.lb,
+.flag.lbn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACB1BMVEVHcEzMKTKyEBW6HSO+Fx62GiDIIyy6FhyvESOrDBG8GiLEHya8FBu9Fx2uDROvDxS/Fx25EhnGICnIISrHJS7GISrHICnOLjbMKTG6HiS3ERi/Fhy/Fhy0ERfIJCu6GiG3GB2uDRLGICjBGSHNLDbNKTSpCw/MKjXLJzKqDRGxEBX////tGyPsGCDtGiHrFh3nERfuHSXoExnwLTfpFBvvIyzuISrwKTPuHyfwKzXwJzHvJi8ApVDxLzrNKDPBFx6rDBDW1tawDxTa2dnOExnvNz7EGyMDqVXKJC3//v67ExnYKjXT0tK+FBrGFBoBoUwAo00wt3LvJS7bFh2+DhJWw4r3k5fpFRzh4eHIHyjCwsK2EBWM1a8js2nhHiXQGSFqyJf8/v24EhjzZWvwT1XyVFvj4+PsLDUbrWEws23iERfD6tYSrV/yam7zhYnmGCD1en/cIyz83N3FxcXIyMjY8ePZEhia2rjd8+g3uXb2horwREriFh3mISri4uLuP0b5sbTzdHnSISroJzH97+/1+/ih3b1JvoHh9OtBvH0qs2tPwYXzf4PjLTf+9vfGf4L6xcf6vb/4mp56z6Pp9u9exZBwy53r+PGt4sf+9/f70dPnHSXLN0D95+jdhYrg3t7SNjy5v6rfrqjKa26+t7fCnY3mx8Kx4cjR7t/7ztCx4sjlc3Oi38CI7BNLAAAAK3RSTlMAr3cqYBSSWAWwSXKdUWmOrtu8oFaC3/1mP5DH7bxqI/ah+tq08fp5o/HiaIG/pAAAAwJJREFUOMuNlWdX2lAAQIOgEdx7H4/dbQARsBWNgpaYRoGIGK0VKjgKKENt3di6B+5t9979kX1JQCDEo/cDH5J733s5eY9AEE2yMPd20h2BQJCTlFcoESZDF5AMl4DfxMIbNxsAjyLkZyelSMo5XWJaaqnWCBUJChoaWlu3nU6VSqXROJeWRkcXF7tpruVn5+SliOBcWJSSlHldq9WaTEYI2Nv1AEbXaB4Aamtr65bmQNfdHIaWey1+qR4ErfXYuR/Sa+sA7e3V1dX35+aeMrytqpJKpXI24PrnOghoamqqqhhfKtW3sAHjx+vVrF4T0uVyeSgIDx9aDUeP8mVsAHzVQP9IJ2BmpH8Qq4tezflyaF9WsAsCVf/Bm9cIghAIC7Eztn/wd7D+fPiwj43sPXwBvfvwHomDmDKPE8u/5zvBhLMYhr0a9M7Mj4ERQWB4Fu8jK9O47Z+D5wYIGnkCh92D47h5/crBmXnjxLyBn/EEz3mCqWOPzebBUWry9GrB+vDhGm6bpsx2B2/wknvx1AoeAEdxD06t8AQGbjDsmaZQl20TdZkpKzdofMITTFGbKIq6ULTNtTHMEzzmvLNhG4oGQdFmc7v/EJcHq2brKmp2r7W1BYOT5M/LA4d1M2gHOoAkf1mPLl/S+JQDWUdJkhqn3K7Vy2dgmCRJ0k7vqUN77A0Db3BknZ48Jt3MaxvnzPCNCYix+Rkvs49n6YP0/ccygZzYrfG7fuxrE2T4uLeAhc+4nDlWAOfAQueXzztRe4NY3ve9UnTooN1P0YeW1QGVskqAc3bQu+Xz+ba8A5hSqVTQQXMvny9jfIC/q0utVisZFEyg7Y0sJ07vYnR1WA8HccNH9JjhwwHjy/wBC00g4I/VY/xQ4LfoTcYWhj4ao0k/YQmoo3TWH9J36EAA/sKNxqzM4gQRDMOihIzUsqy+HpoOk14/MTGkUCgVQ0MTelOPTndLXARptaWpaYmcD025JL247F5TBB3grjid9krgiz9QQkl6QkaFWCyuyEiAhezF/2fGhVTtXo+WAAAAAElFTkSuQmCC");
+}
+
+.flag.LS,
+.flag.LSO,
+.flag.ls,
+.flag.lso {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACOlBMVEVHcEwER2MAZSoCI4gAbS8AXSQAbC4IRlsCLJIDH4QAbDAAYykCK5EAYigAYigAIIYAbzEBH4YBHoUBG4EBJYsBJo0EL5QAaCwGMJYCLZMBLJIDSl0AXScAXyUAczQAczMINZoAay0AdjQDdDYAdjYBMJcBdzcAGoADMpUAWyMDJowDKo8AZir///8AJ6UAI6IAlUIALaoAH58AHp0AL6sAijoAK6gAmEcAMawAgzQAHZoAIaAAhTYAfTAAKqcAKKYAkT8Ajj0AJKMAAAAAhjcAiTkAey4Ajz4AjDsAGoMAMq0AgDIAkkAAM64ANbAAfzHi4uIAYSYAk0EAhDUAiDgALpYAXCQAHoYAgTIAJ48AKpIAaSoAl0QAL5wAIozT09Pa2trE5NEAbzAAejgAZCdUVFQAhDkAIpgAMZ8Ahj4BJpsAWSEAdjQBGXzY2NiGlNEAcjLW1tby9fP8/fzBwcHExMQsLCxnwI/Iz+rj5/WXpNgAfTsDMKcAdi2KioptbW0AFnh3d3dRUVGms9/W2+/5+vt8xJqUyKkAgT2HzKUAKqA9pmkAbiqSkpIGBgZ9fX3Hx8clJSVJSUmk17ql1bmj2LoiRLKzu98zTbJvg8tOZr+x3sYTnVFgcqxgt4UhlVCYmJgXFxc7OztZdcdsuIqAldTAyei9xueMnNYnp2MNiD1/yaDEydk+Yb9cq4KvxLl6iMnS693t7e2kva6pqak1NTU9f1fn5+ddXV0iOqW3ucHMzMzU2dapwLOJMGI6AAAALXRSTlMAFGNyV7D+BbBWcqCURZRgiIme0LzfZrwqe6IjKnut2j/bnFHt8cftV/FJSeKeC4xAAAAC/UlEQVQ4y5WVV1MaYRhGVwUEe++m9wRMFBVFkKIgohAVsCBGBaIgJIpKC2JAsfex95jee0/+W75v6bjMmDMMFzvnPLzDzSIIJDrrSnZcDpFIzInLzrieFY2EIZqUCr4jMogXpVJpG0orSnpaXNS13JAugpRyWa9HzhCBrOi12Wi02loa1WabmdFq21o7IOlpKclRiSQSKTEqmZgqEOjBB1FIe20ikai+Hug0GpVKvQUoKaHMaHtA1exFIGju6CgvatYj0l6Rz6e6/RIAk8msrKykUOhabQ+kiE4vLCzyBT4/RAdwOJyCAjrd7ZcLHqKB13dfE6hToF6A6sD3BsAPmD+mB/hooAj1A3TPvM/3BN5z0HVmsO73yyHgb21TAH/98dOxZ+Zxy7j5+diLre1NGydY9/o/936B4K3VQg7FsmHd2l6nBJ6j3fxgJncuIXtvyBjYj1Y6yWSXxTxmvQ+xboy74PN7S8jAbQz/+6L9cBRrKFzQOe902F1YwTB2YFj8oXb8T0B2fFVjnzSM3MEMRrlcO9bzgTDBlwUud9l18mAA+FyuAysYwgrmH0Gfu/D7hMEno9OIJstDJwsG55fVjtEjp1O9Ej4wdK1NT5hMptfTazsfDYZDtXFFbTSqDaHB528gcO2YXpaWtrffBDQ21tWx6nZn96cn//4ZDPnlrokDeQPy/t1uaanPBzqLxeez2eyaGvbB7P7E5GoXZHXyyewroVAslyFTGlRvd8+jOh/qgOLi6mqJpKqqoqKiqaysBfgMEDzQ+Hw4z/fM+3XgN3l9T+D1/ddAH+r++RahGPg8FQz85wRdIwmcb4HzDB4MlJqAc45fA+f9Pk/Vhyin3Oewi++iSKqDdPe81/cELM0DXT+gG0IgELr7dQxhmUf3nc/jjcw19IFAqdTpdKdPJcVE4nC4yJik2MyzBDlkrntkhMcQi8E8lOUqWZ8MH48odRfOnY8IedHkxsckZN5QQRpQZICr+EjoXcKFf0HlxUfmJ8Ti8fjYhHxcnvvhP/PKtA7C1W/qAAAAAElFTkSuQmCC");
+}
+
+.flag.LR,
+.flag.LBR,
+.flag.lr,
+.flag.lbr {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.LY,
+.flag.LBY,
+.flag.ly,
+.flag.lby {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABrVBMVEVHcExsQhu+AhQZeDTCAhm+AxdnNQAYdDLFAhwRYyUXczHAARXGAhy/ARTFARnDAhnGBB3GBiASaCgTZigYdTIYdjITZi3GByDBARcRZSW8ABARZicSZigRZicXci/BARUbejYXcjAcfjgbfTjJAyEWcS/JAR+7AA8QYSQUbCwVbiwWbi0AAADoABXqABrrAB/oABLpABfqABwinkUgmULmABEelT4hnEMbjzkZjTcXiDPJAB0koEgdkzy+ABEWhjEYizUTaSkflz8EBQTsACLGABkckTsYiTQTbyoYdzIckDoajjgVcy7UAB4Vgy+4AA4SZCcgmEHrACEbfjjCABQPYSMdlD3bABUdgzscijvHAA4MRhwRWSTLABIgjUAXejOqAA8MDAzUABUkJCTsACMXgTPpACB2AAySAA4KAADq6uoZGRkyMjLhABTfAB3lAB1uAAsFHgw0AATOzs6goKBzc3OFAA0NTB1/AAwJLBMcAAINORoDFQhcXFwaDQ0JNhW7u7vExMRKAAS1ABj////sACScAA1JAAcpAARQAAetra2JiYlOTk5sAA7V1dWeCX2+AAAALHRSTlMAB1ujdFUCVq+wct1lwKGSRShFKIhgFBSCZpx7k6G8+trbx+20+vHt8eKVvDivtcMAAAKBSURBVDjLtZXnU9pwGIAjGxQZ7qrdu0EFZJYEMQoBg6ARBQOyJGzErVVPT2t3+zf3lwQwWLjCXft8yJc8z5s34y4QxCDRiEWqfplM1q8a7VNreqA29IiV4DjS9/zle8DiHb1KlUitkTTbI+IHrwIBSC0Drt9f2aFpenqa3tmpbPhTscU1wKNeZf+oqE8gFghEKlkvigbW0AAE7Aq9vbCwsDrNYTAYaMMU6LgMbRBLlWc2QeC/vQX+Ks83GKZq6HXl8gZL2TQDMLHBNs9v0qf0LDqWGV7QWKe9zvomExe09vWt/FoAfHoxkTvJZrNHuQSa0rfSWd+UuAbB6k11Lw/zyH/5XM0FUjrdPX/zZA+GoZufH+DW5Pe+Vo8+JdBYLIYmctlrzoPycHdA8L8JsFKyq6C4f3BY6iY4+A4ugiU7DwppZq1DGOswwApgOJYuXKU7vkIRhtO/Ph50vNK3H+CQLOx3uhJcYlTssNjxSvDF1UWp1S23f9PJ4n/+NP4W7J5FXd5wJBIhva4odbmLtbHPL6MgOA1uORwOo9FosVhmASsr8/MRIkqdnje/zV0Kt+NB6Ix0OPg+owPM6+sI4s4QwegxRVHH0SDh8djtThCEtxo+O57TzUBH3G63z2e1Li3ZbHNzc4zvxENscG+8mRt/pzf8WlD3+TrC6XXfw/nLbMCtY0bc4ClZfW7kT50Zz/rLLhBEjLNbETIej3tZCILwxjMZj62m833CFQpBZDhMkuRj4aBiSCqVDikGhQ+fvCAIHMfZ0Gn3gHXA7Dhjh+RaiCSfCaXDkIT/95AMaBVv373BXXWCDK/lY8Pg5FNp+x/UgHZsfGJSLpdPToxLB7iRvwEZc2UX4OaKugAAAABJRU5ErkJggg==");
+}
+
+.flag.LI,
+.flag.LIE,
+.flag.li,
+.flag.lie {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABv1BMVEVHcEwCMXZRI0qYCRcCNnuRCBMCMXZSJUUDLG+dDRoBL3QBLHEBKm8EN3uaChecCxkCNnqRCBSSCBQBKW2eDBqgDBuZChcGPH6NBhWQBxORCBMAImcHM3UBOoClDh2lDR2NBxKSDxbDDBzJDiEALYEANIcAMoXNECTPESfIDiAAKn7OECXHDR/MDyPPEijBCxrFDR7KDyIAMITEDB0AL4PQEyrRFS0API4AP5AANokAKn0AOYwALIAAJne/ChgAKXwAKXsAQpMAOIoAKHoAJXUAM3kAJ3kAJ3iUCRUAI2oBI3LSFi8AIGUAL3UANX2eCRa8Chi5EyikChePCBIAHWABOICZCRWhCxquEimnDR0AKG6MBxAAKXgAOoSsECEDPIK9pDm8DR+1DyECPocAM4KznDYvK3AAG1obRneFdi4DLn3BDSCsCRezChkFBQOciDHnyEPLsT2plDSVgi0bJG1UHVU4ImQtTWx6czvEEiqrFTUaLnmVHER4GEWNGDx7JFYnHmBnGUkSQXxnZj5xdE7XukD820pxYiK9GTc7LnHHGTbTGDEyFEEMNnWHhlICEipKVU1RSSEoR2cABxJoWyA9OgrKAAAAInRSTlMAYxRvsLB2BVZWoN3ARWLdlEWUiYievCoqe6HtI/HH7fEjpgL2LgAAAvFJREFUOMt11edX2lAABfAgQ8C9R3dZoshwlGUtRamCEIYGQQ6CAhYRytK613F17z+4bySBBL16+OD53cvL80MIAqZ5QCrplItEInmnRNA20Ew8kGZpK/hsEoieUCAkSbpQfK6W1k5J22Ner0kqf+T1Em2iBEXFU2YLitnsjMfTpMuH0tIq75EIpFKpQNIjanG7veCXSCRSlrco+9CD2EGc1jSZ8/nWmLhB1ubnbLCQQtpiSf3KstzptFqtKpVKrU4rczmHw2GzzcyMjtreuFfoAhy/prJZDocF9cTExNSUUom9AxQoWLBkr7YPwE/1ymrncDXmSsChn4OFONw/yGT+bd8lk8X9Bl7v3+GCxZKoJJOZ7UolU/zD4Xi+5hdAgYyD27QXq8m7cjVZrOxbORzNw+Nj/9qLC+ZE+SZ5W73NlDIUn9Pz2KMCBW//+qZUSpbLpR/s1TCn4fh573vCRcHLz/7+APL35/fas06xHByH9kwBXL41nU7znxWdBs/T3gMLpNmO7p77j+LN096zAgus514NzfE87WHBR2KvPt6COc7V1uvnsfesfAMFp+rz+cmnVyDTIPrDo5PTvY+7tfmav7hcDBO+rfMvS0tLrNfrR0bG9GOaw6OzS9DzLODj7F7snUYmJ0OLxFnwK/bT2AMOotFoxkFMJoU2GIlEgkajTmc0Tr4EhUiw5uF8HYcFk0Kh1Wp1OuyZAuvRPMvhF0CvYz1dqHk8P944T3sDKmDPnzfx5pFnCuz8/bzmDavLxHqw3nN5gzf4YeEez+eMn6ULyD90GjyPPSpsTqPHpb3p/nnaz/pjoFB/HD6n5xkfQAXkG28ec3YeeViIbiJvMu5soOwY+bzOB8KooNjYjK7S8YOEovnChoHDsc+HY6Cwvh6NRjvEvcJ2mUzWLuzt6+8Io/hD+UIhEJgFOhAo5EPh5VhM3EVEo8/6ZE28F82LLmF3f8cik2WU52IhdE9lD7+gBrvah7qHxWLxcPeQbBD/8T+NKXEPSln/EwAAAABJRU5ErkJggg==");
+}
+
+.flag.LT,
+.flag.LTU,
+.flag.lt,
+.flag.ltu {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB7FBMVEVHcEyKFhuJFhqQGh7SoRnVpRuCEhaiYxaRGx/OmxbQnRWSGh/VpiDUoxrWqB6IFhmGFBeLFhuEFReYHSGAExvOmhK/oh/SoCDRnxfWqB/WqB/PnBXQmxXNmBLNlxPNlxKXHSKPGh3XqiSaHiTXqR/LlA+AEhXLlg+LFxv+vRb+xB8Abkn+wBu4HyW1HiOxGh8AYTwAXTn9uRL+wRwAakT+uhMAcEsAcky+JCkAXzuzHCG5ISb+wh27ISfBJiwAaUO8IygAWjf+xiL+vxkAZD+/JSu0HSIAbUcAdE7DKS/9thEAbEYAZ0L+uxWvGR4AZT8AZkD9uBIAYz4AdlHBJy0AZ0EBeVSEExf+vhjELDLOmBD9tBDXqh7jsR6sGR3UoxjCKC6VGh+TFxuAERXIjw3WphuOFhoAdVDRnhSJFRiwISXusRSrJCqfHyXanA4AZEWZHiIASCwCVjSkGyBIikEAaEjztRXvuB1jizRJRDGEPjaIkSjcphShJCkARCn3vx+dmyY1STEASy4AUDFrQzaroSVKVD6GmjIvUjo2fT1xNCr4uxjkrBfUmg+dFhtgPC10lzcYXDyHNC2hKyvJryZIeTATakJ9PDRcTj1RgzQTdEZdSDcac0AfZEa3MDTZuCeEfRsgVikwOCZoHxzgND5IAAAAKXRSTlMAY5dydpqwBVZW3cAoSa5+RaUolBSe8RS8ZrOGYYtgrtrbP+3xxvHt4uFRti8AAALgSURBVDjLddVXVxpRFAXgAQFBjTUuS3pPxEIMEgQMGHuwYENEQAFLLEQEpYgRsDfsJb3+0Zx7p49kP/DA+vZe5z4NQaBk5igkUmluea5UKim7kZNJ/CeZiifwW1JW/tgxgTNKJatUKrnWK1EUP7OPEw9zHQ6H0xmOxysghng8HHYerIy+R8kqLb4lua1QKO5K7tzLstvtqdQ4ATr8FqUCx2AwvIJU7odmqZqdSmrlINT7AQrONBzSVNnUZLPtQxElFKqtq+3tZQtcj3kT4jbbC5yurro67N/RBcE8za95usCfT8cpjwoTTtqz13A434/ggnA+Dac9U8D+2luBM/OkH0mRBUP8PHEcWUSJHG9vnod5nONnf/0mRp0/txet1v7+/qn29vbXEI1G+WU3sr3pCPHnVxIXqvU1IrZrtSI/RXkNeEhbW5vZ/G33cyQWS2wmYrHIxaVKVV8PhSUN6QXcbDar1Wqj0djZOWix9DT39amg8HJ9gVhS8ryS8mo19sAHLT3gVdhTBdpz5tW8ecajwrwSe2aez8l5xjeuQWGJ7wXrzDz2jWurUKA853jOOmcePFkgz2fnaW5hOOMDZIHyzDzF6WvIc7APLKwSzUZ0zvetTxvLkKuNr1s7J80WzjXMPPjAn79E3/zl1vKP4Y6OjrGxgTeQlhat6ex0I7pzwp9vDCT3gp4hYudqGIL8wADmLVqIyWRqaJg5O907ikaTyWQ0erTn1+l0NVD4OEd7AYfo9foqSDWktRV4DV1gvZb0XM71VIHvqXkhx74bF6jnCq+pSuO7J72ogJ9L+zTXsN4FBd8c69NcQ87Tnixgr9VXz+BUV/E5Ow+eKphmgj6/303F43b7g0GXjuGsP5z2QsEH2H+/oChDJJfLRRl54uwH7kkUj/sQiq5uxF3BQw9oryyf8PkfFclvCj40hfkZ4uzn02SGyHifykTIZcv//4EqzBfliQtkMlmBOE9eSP75D2WLwLjFyPlNAAAAAElFTkSuQmCC");
+}
+
+.flag.LU,
+.flag.LUX,
+.flag.lu,
+.flag.lux {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB3VBMVEVHcEzILz/HLTy2PT3MOEgAZp0Aa6AAY5vDKzjHMD4Cfa8AcqYAdKkAdKnKN0bKNEIAa58AaZ4AbJsBeavDKDYAeq3GM0DGLTvOOUnFKzkAZqDAIS4Ac6bHMkAAbqQAfa/BJTIAfa/OQU0AdKkAgLMBgbK/IC0AcKX////tJjbuLj8Aod4AnN3vMUHwOEntKDjvMkMAm9vuKjoAn93wNkcApeDwO0zuLDwAitQAjtXvNEXwPU4AltkAl9kAktcAjNQAlNjsJTQAmNoAo98AkNbwOksAkdfLNUQAmtsAZ57xP1DU1NTDJDHYOUkAj9YAiNEAbKPGKjjNOUnLIC0Ad6zxQVLJMD/Y2NgAh7kAdLD6w8j+/f1YwOngKjkAe7AAhLa/Hyy6HSnDw8MAc6gAh8n1kZn5tLoAkMwAktEAjcPh4eEAf7MAf773pKrzdX/bMUAAkcUAbqvGxsZ1y+yz3/Pya3ZrwumT0+/1h5H97O0kpd/70NTmL0Di4uL5+vziNkbSLz7pOkub1e+65PVFteWG0u/Y8PnyWWaZ2vHOJzar3fPnKDjj4+PjPU7OZW6WussAeLbwUF7h8/oFnt1RtOMKnNsRquFLv+jr9vzfub1Cqc3q9/wpfajEqasTlthW75AcAAAAKHRSTlMAY6AFsLCZ/VZ2VFhihCiURXAoc4meFLz23RTtvEkHra7aP9vtx8bieDM0uwAAAohJREFUOMu91flTEmEcx/HlPlXAK8vsLiSJS1DBC4NEhFAR8oYKEOPKvI8880jz6L77W/s+++zK7hLT1Ex9xnEc5/X+zsNPEASaoFQqK+MLhUJ+mYx3sVRAFJlAehN+V/GE5wa6u+EHLYxWU10mK+iqpPwL0ShxFfSA33+06XA4bDb35ub6em5jIxzuh9VU8ytkPKlUypNVXK7x+aJBX5QAfRQKeb1e5G1u9x1YY6PdvprLbbxEVb+PWnD80BCEwB9CnsVRYLcbjUa9bnV1nNyh2WwwGOqpgPYcbtTr9Tq0piYz9vXBhyjgeAbXY95EcvA4wJ58DnW+gNPeCUG3H/v8eSbneBzQnvFZ2TzvqYDp2Z+VeR55HID3zi1mEiNoiUw8u+dgcMZ5p1N3/B2CvfjKqPZs6M/RpZVEfO61neKUd2QTaw+eEcefGZo91GXii9m57GI8M7KE/gVB7ytt0RWe+k2g/WXw/I+CR/8jePJPg96/DUZ3D3ZmxtBmdva3d9eK+bWTbxB83f/44S652zCLxdLwdvnF/ML2G0736WDsx3AfcfLFarUyuaUBZjJ5PF3voZtZ2Jqdnd1amH+37Gpp6RjuIYaesj3NPV2wttbWTlh7+z2X6z54KqA9xfF5zDm+mQw4nj6f5+3Asc8HpGe9huJn50mPgsgU6zz78ZhjD7w5gIMzX/h48jz1HPCBaQkEpDe1JSfRkslONs8/BzwVmCanIhNog3gTqXQslqQ406enJRAMDaVSqSuXSsqVCrlCWV5SWXvtMbnB0zSEgQ7ggVgsfTrdI5GIVEQkdb1Sfp7zTaNRqcW1t/ro9ZCTiNTI3ZDXFfuCqtOolCVisUgkEovVCg3+509QfHdc55ePywAAAABJRU5ErkJggg==");
+}
+
+.flag.MO,
+.flag.MAC,
+.flag.mo,
+.flag.mac {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABZVBMVEVHcEwLWEsUb18RXVATa1sQXlAITj8MWkwIV1AHSTsVcGEITD8VbVwOYlIUbF0ITD0YdWYMXk4NXk4bem0ZemsLXk4MXk4TbF0TbV0WdGUGSDoGRTkJU0QGRDYITj8Oc2AQd2QLaFYSfGkLZFISemgWgW8KX00OcV4MalcReWYLZlT///8Vf20UfWsKYlENbVoPdWIMZ1UOcl8YhXIPdmMKYU8ZhnQXg3ENb10NblsMa1kJWEcJW0oVf2wJVUUVdGQTcWEVgG4JXUwUfmsYe2sHSzySv7cbiXcci3oGRzkIUUIGQzUWd2cah3UHT0Bxq6AQa1tOlogPaFgSbV2ozMZjopYwiGCbxLxtqJ31+fg6jn631c8Yd2E1iHhmnU4afmZXm47X6OWfyMCx0ct5sKYdf27l8O0mfWlHkFd5p03a0DHd6+nN4d1bmlOIuK+Lu7L6/PvF3tqFuK/I4NuitTmTsUXFyDotGBN3AAAAH3RSTlMAcmMUj0VjVwWzdpcmnVR+sK7asfbtx7zfoqEq2/HiZ5t8IAAAA1BJREFUOMt11WlT2lAUBuCoYMTdLtpqW2KAIETCJmoFIWLEBSooYRFkVdyX2u3395x7bxJox/OBGZjnPbyTewc4Dmdscnrc9nF2dvajbXzYPjnGvTJj/Dy8jgy/fZfDSeGoOB8WbOP/5Uamp95Lac7+9p2maZ6N9W8w69ENz6qWS6lFmELxw8IUfCM/zQ+P2+beKDFJiaU5TeutHxwc7O+jX49Goxs4nm13TlULhVOYcNjvcimKK7zldboSnNY7MH2UeY9nZ2d1dXt3NyD6hJBTjUScobW1kNMZUSDg6feDPCCKotvt9vkEgXqvQr8BPdahbfq5iBx9iHhvLM7lNOqt9YS3dk3e5zdJoM+TNri9fHvD2gAXsA7xXyUSIN5qs90si627u7K53vJBEjC80ab8B7Y3b92+clkQjDrUB9NJLqUZnrUJiNeszONdy1gf8W6i38JAzvC4PhB4vG2J7lqvUoXlN3Q9qUP8SgIDpseDEpu/YX03I5+V2sDPnawO9SuJI07NRWn9bXZQLWhTf5Hlehf8ryZy0y/HMWDUZ+fa6AmCfi/LL/WQM9K8oeuZD2MgZdUhB1WrZGo/rmT5Xqft2Xri/fFjrpgiHuvgs+l15O8/9S4EOpeN/I8GcMuH/UkMWHXwnDIyTAe/IXPRfT5J0Tp0v9+FAXXAC6UXmc7ZGb4+GJx4V3IPAsyza1PT6yjPvtNYfsArECiouwHrFq+FerlLvXOlXz6TWKWE3PSxIwh4AwO3vpSBqej5zJPeebjIXNP1zGPgtEi9cStDJzi1VLBdyTy1G9fmevQSDTBPr00kVc1X8/lqG2Klav5kud9Lx4cQMDy7Nl5vtVuBWpeQqzbMOsSnIRAuDHo8qPPSxUW9rldKKuOGpwHLUw5PPhislartImnT7xN7Wc5V8LHfEPOawZMnz8ZYb3kS2LJ+E8i1oZw9S2s98RhQTi1Pr80gH/BxDCxTHyS3yx9eXqFt+jipQ3z8EALhkHfFJZG3MEmYeDwhxRTKjfXEHx9ms1xMUeDtmznb0CjP86NDMxOOT8kjMsl4IpFOowd8hDrrsHOS9H6KH/nnj2bSPjTh+HK8x+YQJpv97BhFN8+//ge1ZB+dmVh0OByLEzP8Ev3wL6tKTX73D96gAAAAAElFTkSuQmCC");
+}
+
+.flag.MK,
+.flag.MKD,
+.flag.mk,
+.flag.mkd {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.MG,
+.flag.MDG,
+.flag.mg,
+.flag.mdg {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABm1BMVEVHcEzU1NTPOzLQPDLMNy7Hx8cATR7W1tbPOC6XaF/QPDMDVCTRPjMAUSAAUSEAUSAATiKgOizY2NjPOS/R0dHMzMzIyMjMzMzb29sATh/Z2dnRysrRRjvY2NjX0tHURDnPOzPKysoAWiYARRi0vLgAWiYARhcAWCYASBsASh3MMynMzMzLMSjTQzgAVSMAVSPZ2dnSS0H////8OzD8OS4AcTH9PzT9PTIAbi79QTYAbC0AczL9QzgAdjT9SD0AaSv9RToAeDX8Nyz9S0AAejcAaCr8NCoAfTkAdDMAcDAAZikAaizT09Pp9O4AYyYAShzY2Njl5eUATx8AUiEAViMAZSj8Niz+8PDi4uIAWiXZMCfSPjPf39/Qz8/JLSTLy8vPMyr8UkcBXyfWLSQKfz7uPjPq8e3EKCAKhEIJejrw8PD97+7r6+vURDoAfzsfazH5OC3Z2dnlRDrvST7+/v66STD0QDZ0WjHbQjX39/cqcjgUbzKVUC/eOCvoOi5QZjWQWTZJbTleWS3c5uG2vroZVyZ/NiD4ST76+vot7CUiAAAAMnRSTlMAnXKNVluv/v0DuH5iaU2UKAuu224UU9E1oVeQJrP4SZ+tvD9znxbbtPGc7cbi4rx5fiWvA38AAAJKSURBVDjLddVnVxpBGIbhpa4URbBHPcb0XiA0DQQlgEECBJaEFSG6mpOIGFCa2BLT9GdnZrbN7s4+5+gXr/tl/ARFwdmmb7wwGDzzHsPsS+fCnJvSmc38BPyeGJ+n8/k8+KFpunoA99RuMi7M2ZTabX40VKtR0x6Ay4364LrT8XY6+9vt9tHRceWgAjZmv2kyOs1ms9Noso9twdWow8Ny/dor7dN2HO0KZZUhfsieX7R8GyD44MUnBlG4WCzW631B6wWDQZ9PN4iK/jVYOBwOBHj/CgR5bSDxmMhFTwwUXOV1AyUPIA69ToBx+Tzyq4QgHlVyhV/d+ErRZVVA5IL/uEMKBC68RjoPfVIb7Mfl/1V1HnhyQOKCJwVR+TFaTwra4v+Kcfh85JM7/6iMMnj/bffksv+ze+zTnk9u9f8y2uA7XCq1d/Kjf9atXLRa8HzrvHv2qxkKcaQghfYWbAUsctpsNk/9fv+7UCi0xBa1gcR5H4msrS0vC14vUHPJrxOCXZmvQM6fF/wbtqANMI6fRz7BEAOZo/OyR0F1Ux3gXHwOfz+RhoH6E7DHS1z0aSan+YQ9/PF+ifO+VCQE+OPVPksMNK+RPTFQcv686LGgM6jXG41G/XfEjz0ePw99toCCQWMz81nYH45lOa6UXl+SuOQ5ppADQYYGbmpxdtximbRY7jju3rrPsgwYKkvpBPClLMdCnbPepqrVx4bJCfT1In/RjI4Mu54/Y4poBTiAHz4Yvgf+OGWx6X1BuUHncM1YrdYZl2NklHf/AfobkqjETRvqAAAAAElFTkSuQmCC");
+}
+
+.flag.MW,
+.flag.MWI,
+.flag.mw,
+.flag.mwi {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABelBMVEVHcEwCAgIfbyEANQASOxIBAQEUOxQjdCQBAQEDAwMbQhsicyQZYRoeax8CAgIhciQdaR4BAQEBAQEDAwMldSUAAAABAQEONhAkdiUOLg4gcCIbZRsbZh0bZhwCAgIDAwMmeigneiciciMofSkpfioYYRkebCAAAADOECXQEyrRFS3MDyPKDiHPESfHDR/SFi8vmjEojyrEDB0xnDMkiCUqkSwnjigumDDTGDHIDiAliyYhhSMtli83oTk0nzYynjQrky3UGTQslS4HAAEbaBwYYhkmjCi8FSynCxoebh8jdSSXECJzCxgshC4uAwk4BAtKBg4jAwcaAgVgBxKIDR0wjjF6ChiCDBudESQecx+ODBtBBQyIQiVncTEmeicrjC2yFiyvEiYqgCmVCRYQAQJTCBKaChcgeyFoCxeaMiJZaypqWSW6Dx4kgSWWDR6QDyC3Iyd5WiyKUi/JFSyfPCtEhC3IEiXEGSuQMSSkFCk+eCZCmTl3LBk2UhsyY+A+AAAAJ3RSTlMAY58CKK4UWptWB3KyjnJLlMDds4jviT+sNbxme657Sa3a2+3H8eILxbRJAAACqklEQVQ4y43VZ1MaURgF4AVBQR17dMaamKIohEURo4ICl6a7bnd3KWpECEWK2NP+e+7dQllAc2bgAz7nzOuni2EoAxb7ss1mnbbabMumFcsw1ifD9kn4PWiafrfWmalJ29iKZaBTD9pt0GFzVrBmDGA5Dv4KYG92zGS3201js9Yp9W9Yt6ZJQZYJgqS7l3oVgCjLMlmsE3JdSP9HgZUIoZhn2DTDSPU6yb1ZEGUpT4EcywJAMWKNBG8U0rLAcJxw73bf16gcI9bF3KsFIBA8R8XdbvcGDAlosca/WqAIiQZxlW84HCnASCnqtQJbpHL01b3KYXiOr5G9CoDKkwKBIpE8Q7F0nqxfuRyupxydEtr+C5CWMDT7MxQKfYNxa8c7nhNSMY16LEeL+k0cI2wlfmB0PRRq+Y3mNQ6Xa72SSIk8z6QZnhevK869va+w8D2u+ea8xmHWlWyiOJ3INwut+b5c8XrB4Nu4wW+phabvzdv8VuIaFjrme3Mn4tBrBcN8D657VLiKt3w/3vR6octvds2rXitAf/tw1zhHadxlHm6fuuY1X/nzFxae785/BwKBw8PDI5jtbRzHH8uNTOl2r3O+8nKTTUawl3JAic6Rx3fx3V2//+yxfNPIZEqlUiZzU/4V29/3wsLpWYfHFY+4PxwOB4M7MB6PxxeLId8sqOfo8y0eVLnH5/Mp3puMKgXda1z1LQ69uu89OFYKBm+4RptXvFp4k7e8VtC9ek3YcI1+DvJK4VL1/uDOJcpOsJPr84o/iESx7OURfnaavYA50XNRrXpjGm/3yUgUFk6R/vB+ZmQIZWTGPL96coySLBSq1QOvqgsFpKOjc1g2+9E8Pqg8Q9oHPUjjIxPzX2Apogfiz6MLyH0a6v9AWcYXFifMS6NL5onFIe1B+gfX610opahJnQAAAABJRU5ErkJggg==");
+}
+
+.flag.MY,
+.flag.MYS,
+.flag.my,
+.flag.mys {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.MV,
+.flag.MDV,
+.flag.mv,
+.flag.mdv {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABzlBMVEVHcEySBxuoDiunDiu6G0O3GD+bCSCrES+lFC+zFjmoDiuuETGgCyWfCiyVCB23Gj+XCR+UBx2oDSm8G0WyFDejDiuqEzK6GkKpDCmpDSmcCSGSBhu5I0aLABeQBhnQDjDSDzIAezjJCyjODS7VFDzXF0EAejbFCiTUEjjHCibKDCoAeDXTEDQAgDwAgz/ZGkcAdTPWFT7YGEPMDSwAhULYGUUAfTkAfjoAfzsAcTHTETbLDCwAh0QAgj4AdjQAhEHaHErDCSIAby+WCB3BDSqQBhkAiEbVEzqvEDHbHk2jCiSwCyi4Fz+1FTsAi0gAczKyEzanCyebCB+sDi3EGkWeCSKnCCAAbS7EDy67GkTZHEnAFTwAgT3QGkK6ETO9EzjFGT61DCnNFDm4HDPOFz0PZS24EC7///+qDCqsCiSiBxy9CiQAiEVxT0VnOSoPazHKETXRHEdGonCeKjStIjOMMzXHETLv9/ILhkUQcDUPbjNDVjQMfT4LgkIokVhWqXyq072wCCCbOUSPJiq9Hzp5PTZ9LyolYTJdRTGeIy2pLD7V6d6Ow6WFQEBjTjw4ZT7E4NHSFT00mmPM5diIREd6Ni8ciEwlckJutpBsto52iiXnAAAAH3RSTlMArGCIsJp2WCh2nt1TB5dFukWu9rwSt2btx99mFhbxmy1ZygAAA1FJREFUOMt9lVdTWmEQhrHQ7BodWxJRFFQsqGDDimDDBoqiggIioCQRsGFvo4ldx9R/m909hSMZ81544/O8s+c7+3FEIopMKheLU1NTxWJ5YbYsU/RGMqXF8Pd9Yeq7+fkxJuOU9HyxPFuWQBdkpBUFraJspGdmIpGFhYXGRr3e5XK7F5fHpzDp+Wkp8mSpVJosT8lLnw4GLRarCOjIyMhIX18f8Gjo9c3NVVXPPtCWpoaZTEOG/Q6lwgPCzAjDC3FME6Ty2esNh3d2wuFwXV2dQsELQj6ON1VChoaqq6s7Oxm+jBWYcQT1PF6JeJwv84yiwPP/4gl8mQUF4vXn3z9j7s9v3Il4J+HIozA2Q3xkAjM4OPipq+vo1+PD/Y2bcL6eeCUJdPwRHu/S6XS9vQ0N3YePBw+X25tbKysrW5vbSuRJcNP4LuLjOAhOp7O+vr29rbW1vLx8bwd5pcWOAj6ua4LqdVx9LBo9Jpx4lQoE4FtAGF+kw3dxPFP/e/flJFbP4sCr9hzIcwKcpkuAd3f/CTzFmGmoXqXR7DuQN6yRgKfvYnjCnbHdwHG7oF5DAvC1azYQkG/ydbHD47NGAy9tbYJ6TU/PhgN5RqB362Pr6WhOAqcMzvNaEIBHYWqRdsGnY+vxaKKBU7YdcU2PVgsC8hUoLCNf6etl63H2o91dvp3wyckNE/IVsyjQ6vi4epr9LhBV8dMg34FCBQgDJMCeebGff1FHt7eHAnyyo2PVhHwNI+DWe7u5ehrm59PpYby+w2hcNSHPCHRLvE7hi4L2k7tjLVdvZIQaEoaX6FZ5+TXjnrVHy9YjPwcC8GoSmEvL7/Hlt4Ov+xzO1BvnQEBevY4Ce0sU3C2BPW7xX/8Az8jhIISQV6+bSRBeQlp7XDRcBf/1xdUXzNWFGnn1rFk0vVQtvIQMjrzBgO8WD5Mel/j+dRTivwmv6glP4EnwC/j/4sBzAvIGh4niqDW8muYVzwpKk8ditVpHKXb7qHXN4gmp4zg7Tn/ozGY2i/An3GpNz0uRJEszpMmSlLScErvdbrPZR2fPPKFQP9Gh0Nks0OakXFEwWJSWUZDw7ZDlSrJySmy2AT4Af8wp/QD/K5a+/YGS5ZZKsrKSIFmSDPaD9BeyTXgV7SOqDgAAAABJRU5ErkJggg==");
+}
+
+.flag.ML,
+.flag.MLI,
+.flag.ml,
+.flag.mli {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABm1BMVEVHcEzFoxnJphYalDOOBxINiikTkzOrEiSUhB0gpUjNqhbFoBGhDyAfnTvNrBmYChgPjisgoECoDx+TBxvSshvRsRzBmw2JBBDBmg6ZCxoeokTEoBSRCBOpESMPjiupECIoqk0iqUwgpkkRkS4PkC2mDh6JBQ8kpk2NBxLMtCC7lQ28jwz80RXIDSD90xnGDB791BvNDyT8zBMcvUf90hYYukEUtjr91R0evkrCCxvEDB38zRPMDiPAChkfv0zDCxwhwE4XuD8Vtzwau0MjwlHOECX8yxLKDiL8zhQTtDjPESf8zxT91x/JDiESszf8yBASsTW9CRj8yREbu0SjChiNBxGeCRbQEyqSCBOrDyH01R/y0RoepEXyzRYgr0qvDR37zBgRlTCYCRX6wRAboUHDnQ36xhIPiyggp0n90hgWpTsSpDASoDXRsRqrChjUtBsoujoltjUTmTQXnDsPkCymDBsrvD/oxBu/lgwuvkPHEijEEicZqEEcq0UjsjIwwEfgsg4iuU7euxvSqRG2CxrsuQ4RqjT50hzNpA1uIlndAAAALHRSTlMAJkl1sF1VWwWwnIt1kWyWpRTkFN+8vDXfU6I5oYvarj9o8cftxmgr8X5lfSYBwDkAAAKmSURBVDjLbdUxb9NAGMbxv69nJ8huoYqpoBQlNAtSJYSExEAnJliQ2BgYQOIr8JUQggUWZoQQU0akDqjQIEJoadIGOwmxHTsMdz7bobdYln55/Lx3VrwCQL0d4vlz296gHSfU55y96ivbFqxfOLx8x2MMdZitC+CFNZHjRW1W0Q1nuvIMq3X0BKa0eQ+Q3d1nC5dhBvDSmlhWAmCvi/DeVs+Jt+R9pu2P0Acgg0XwBzh+uLeJ+zhjY888Yeed37uBZNrvA8yV1+vip+MvQPRo7xoWsKBjf/B6gNRiDhnE+u5YXSJe3fwKEIKdMAAO5JKPyzxfISQwABfkWOQ+BhLjo3yoqleV5nkd4wseQuFdhCz5JK9QSkf5AcqDqPqW8VkGsAskhXdA1JtkxDGJ8ilRVHCnQ6LqKN89j9Tj6vhRqcxupwMorr0euuSDsgdmOde+hsx9C0YEYCnu0IH85TOeyBMsjA+CfFt2HVA+cHFdXNdxuoCoISg84MV6VpjNyvF01ZYizis/GgXgecu86VP16qRbOh6ADnn5JqS44JB7V/1AeQ+wwHCapIATF/GufbAmOVnyhpMSgtod7XUl7S0Y62coTogqY3zMVFb9Mv9L1YOE3I+hAaLCfcNRHrkAPB3fMLPqdB9EVvJSzaB9A2zIZ1WctJovkIizvObmrE3/VELZi9VBqTweuJOiPoA8dfW4tj77It7T+SYeX12qvsxTVbPkkcaLvLJpk6p7U8c3vRrY4jY/AYab57r/c+O9UAKbV2qC7zr/hGY7SbG/DYo/+pxfHYdIJjsNeB2kU4G1IKsvPPEAEBvtJMXmZAD4t/jdXwt/8aZhPeftYOqeVj80keWlrniKeflI4fP+9nCI1f4hZmd9nGZQj6zrVm/1EC6F6Wp2BMA/9Oc2wUwdytwAAAAASUVORK5CYII=");
+}
+
+.flag.MT,
+.flag.MLT,
+.flag.mt,
+.flag.mlt {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABWVBMVEVHcEyuGC3ExMSXAC6PCRXY2Ni2traqFSjIyMjQ0NCbEB/S0tLS0tLT09OXDx7R0dGTCRaUChesFCnIyMisFCmsEyiTBxvIyMjNzc3Q0NCRCBWgDR2SCRfMzMySCRWSCRbY2NivFy2qEyawFy2qEyWoECLNzc2OCRW9vb3Z2dnZ2dn////OEynGDiHLESbIECPPEyrJECXEDh/QFSzRFi/BDB3SGDHCDR7NEijX19e+CxvZ2dn++/zTGjSgDBvLy8v++vrV1dXR0dHk5OScChiUChfMEievDiHf39+mDR7+/v6XCxj++vqqECTi4uLPz8+rDByNCBOQCRWtFCjx8fGxFi2lCxn39/fnxcrPtLfFFi3t7Oy0DiDHx8fo6OjDwL66trPDq6397O/XtLjZub3Zv8PKFi3HFS29Fy/LGjP35ObvzNHw4uO/Eifjub/eyMuuqKOil5DLnKKRQf9AAAAAK3RSTlMAcmUFsLAFVlaYRaVrgShFjJRgfImeFNu86GbB6hR7oSq8rtva7cdWI/FXjIW0ZQAAAjNJREFUOMt91el34VAcxvFQKqE4qvs++xKmVZTQ0VyTlqQHYUKkjKV076z//4u5N5G6CbnPcbxoP9/fyfEmFIW2ePA5yAS8Xm+ACS6FDxYphy34tuH37pL3E+DQAIAftM0NxuUPLVj1mm/1nShSYS/HacN/ispLEitJvKp0etU8KDbh3rxaXXEt+3y+ZdfK67eVSqVUEal8vqq0wZhlJRabpD5c3d83m9+NVRDu/kzEujD4xrJtoD2fXlsK/qu+k4fbuyu4u9tk8ugoljWC5+Ggr42063kBXAouqftYtiRS3O/2ePB3cAZuZgOTpxCH97PZUoHihqDY/zPQ2m3eFpxYzuv+Qg/Go35fe2St4/HzL/4LCm54/hf6lWwBxo3HR14P0K9UHM0GKfz8xKMAVFn26elxfpCc+gvkE5NgzlCQxM/rPiE7B+bTWPyhLDgH5nnckwI71/2hSAjm+bh86RhMOebjIiHAuelRUHQIrHzi4y1iYOG6PyYEtvOGP26dEwKcTzwpmDmPfIYQ2M/rPlOAQdkpSNgeB/p0oeEYJOznkScHU/7iUVBzCub5nFAnBjjXPSkwucVjgaQqSqfTURT1VDKCKTceB/lJoPbKxTO0H8ZqXLnXyWDc9LJQhwEAkK4HglE3TdPuaJTZWIdRXxAKolzq5nLpdAbirtwSGvW6x0/VapsMvQtfLvi742PYHdneuYQ7N9aA2/FsrcH/vaedX1Ah/9ZeZN/j8exH9j6EjD/+Bw3GTALdpZC0AAAAAElFTkSuQmCC");
+}
+
+.flag.MH,
+.flag.MHL,
+.flag.mh,
+.flag.mhl {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.MQ,
+.flag.MTQ,
+.flag.mq,
+.flag.mtq {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.MR,
+.flag.MRT,
+.flag.mr,
+.flag.mrt {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.MU,
+.flag.MUS,
+.flag.mu,
+.flag.mus {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.YT,
+.flag.MYT,
+.flag.yt,
+.flag.myt {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.MX,
+.flag.MEX,
+.flag.mx,
+.flag.mex {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACdlBMVEVHcEzKysoCUDfPz88ASzMAcVdVODWUjIqrEiQCbVTJysjExMTDwMGOBxIAUDarFCUHcVkEcFaoECHT09PU1NTExMTExMSZCxoMblbV1dUCa1EBalCNCBLCwsKQBxORCBMCTzUAUDcAUDcSVD6pECKoECEBUzoAUjkBb1YCblSLBhCmDh6nDh6JBQ+KBBCNBxLV1dWIBhLDw8ONBhO+trj////GDB7EDBzCCxvLDyLOECXMDyMAZ0YAa0oAeFgAaUjHDR/2+fgAZUQAb07BChoAelrQEikAc1K/ChgAcVDJDiEAbUwAY0MAe1wAdlYAclEAdFQAdVUAd1cAfV0Abk0Af2DIDiGNBxHPECcAWz7IDSD88/S8CReSCBOvDR0AYEMUb1L89PXX1tb+/v4AZksAVjwAaE6aCRWkCRbGxsYAcFYATTQAUjgAalCoDBqfCxkVdlcAY0cAXUH99fYAblSqDyDU1NT8/PsAdFn0+PesECOkDBwVelyVCRWsChifCBQWgmTn5+fDw8Pv7uUWfmAAbFLEEifi38bLDSGVYjft7u3e4eH09PHh0snn49PDw6HHEijP0M/v8e7QysaboG7p6+P69ul3SCd+UjNmQCZqSjby08bSu4/99fXb29u1DBzz6+zr4t/Vu6LY2saceGG9t7bc0KDPy6PMurG7vJa8squ0knJRLhqPvMCfwsJ5Tiy/o3Zpi3NEkZPJEScPVD4TZkq+DyLIpYHl5thjNRzNz7XAlFeEVjGocj2tvaaoq3+FZVR8raLSz7WOxcy63uS7ybPIlFvKu305i42GbmGnkYJai3mt193OqlTso15zp6iWgF1pvMS6kyG2AAAAg3RSTlMASVScXf4UBVuwgyX9rpRzNV+UvN+831OUaqmis2qToXSt2nOu2sft8Xn6xu1oP/EqK5V5ff///////////////////////////////////////////////////////////////////////////////////////////////////////vIZh/oAAANXSURBVDjLddX3V1JhHMfxqzlCj5Y21GNpe++6DoYjNReKmoomSobiCCwNRdMsJSLce7f31vbee/cf9f0+z72Xm+HnB/BwXu/H5wDnwDA4z7l+awODJRJJcKBXkMsWT2aGec5eD48efpI1JqvVaDTq9fq9vXWw+fNmBbl4T+s8Avw3NDYycyXuJpN7fVRCGiwh6lhfR1tL++m6Oq7zmjMbN8d/xcra2qqi2kbGvbI+LScnZ/du4AkQxLI4nZnr+g/jamFFZx7mSosamcr6HMFHRfEBN535bE/PCVjPPWmeVCqV8YHgs/4NWPbQLro89CQw1Tt8Vlb6DAHlMlnRAcbkjp4en56eeXx6kCf2kRBYK8U+w2kgeC7gr5OZmZH4XyDlr48eA2Ml9Xh8RqKTgHDOp2Bgoh6PT1Sp+KDzvIU8n5JyPhJ9bvMBRm+iHo9XJSeToMPy6IZ9pJMEMuF48Huayxi9lfpE4uOaMBi8/OyFfXSsC/4slol9TFUZU2LlvAp9XFMDyw4N2Sbsw6NPLupIIPIkMHIeeVw2Bjrb2/P2myPPh89hwHHiw0jg8NnZqRA8HeqamLhz5+LI8HUIIsWeBHqHT01VHGzQXRvv/PTDPvql//XVWLb4pNiHVR1hqvUZeH1yfKoCAtbW8bl//MbYza+X9g3oMEgBH0N8eDkEJcLx4DG40N1+99ftyd9j1wevsMUpjuPDwmkgXEehiI6GwHy56/utu9+mbo13X4AgJdfhMdCWqEQeA7bv1fs/P6duvxnstrAFe5DzPgKDat4Dl8sxYG1XPkx+fGcZgE+uIEbsI8oLIUCv4Lx8Lwa6x9deXh3otpkxEDj4eAhqqnkPXL6TBLBznYPka1gQJvbxRyFQir0QwL9haSD2JNDy1wcuDugKwimnPumomsnXir3SSUA58VwgeKXSSSD2GJTWOI5XKrX/BRH8ddBraCAcr9Q6CyIcXlOGAfFKbU0+7kGbWfdvIPYkyJfvrCk1GPbT3W+tqOjd197SF8u9rfGEU99cpoagFLRh2VLfJW5urm5uy71mLVgIUUUr6drOapJAazRnmstBr/PZxBgMq31dPab90Hi7LN4GHexSIZ1ard68aCO6Va4z/0BBtyMk1GeRT2jI9oCt9MW/Yo343DOOk3UAAAAASUVORK5CYII=");
+}
+
+.flag.FM,
+.flag.FSM,
+.flag.fm,
+.flag.fsm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABNVBMVEVHcExLeqFum7tThKd3osFfjK1Hdp1mlLZrmbpXh6hPfqRejbFdiqlXh61bi69aia5wnb1zn71Jd59mlbdWhqtsmrpejrNej7JDcZpHdZx6pMNvnLxOfaR1st1xsNx4tN5wrtt2s95tq9pqqtl5td+Du+JpqNiBuuFnp9dzsd19t+Bjo9V/ueBlpdZurdp8tt+GveJhotSHvuN7tt9+uOBdntNfoNOFvOKKv+NllbhWh6xwnb16tt9hkbVam9FDcpuGuuB0ocB9q8xcjLFrmbpglb16pMNwosZLe6NId59XjrlPf6WdyOf///9pncN2p8mLweTT5vRSgqhzq9Jpo86TwuSt0epVirRQhrJLga3N4/Nln8vE3vBalcR3sNf1+vyCtdhbms3k8Phwq9bb6/a62O59r9FDV+PUAAAAHXRSTlMAmm1WriiyVpoFdmAU+4mzf0VF29u87cf2ZvHi4m/gY3wAAALKSURBVDjLddXnVuJAGAbgIEIQPPay7i4EUKQYDVKWIBsNREAhEYKAilTb/V/CTsvMRNfvBz84z/vxztAEAc6KT9wILIMJBDaWNn0rwjezIu6Dx9Wl5Z+NaqOKpoLm127ga25VDOwZhrC53Gg0ah9zXc9mc1ldn88/ap1q5RrO9i54wZAoiqGltfVtTTPKmiEAPVe7qqrmcrlstlQqJRKJZDKpTO87zcp12RlNK9/1X9N1EKh1u13Ec5CXEIcjFwqFTH46vUczDcfC6XSEBJh3uGwOAM9klHz+79GRJEkx5CP1CxigdRLEy6o5HkKuQH6EOPJRFMCerZflQtK2ZnaCX489DFRrnz3snrBmgzxZz/kzFMCerYfdTftFpZz5OAlQL6P1oHtWKQ0Qp+uRJwHmC9zVEO7yh62eUO04nrQhV8O1Yf4YBCod4Fl7mV4N5s567EnAqQPXm6VPbVweB5gHbYajd/U/64lPtdogQOsoeeX9xRpxPBwpDPB67FMPOAA8Oaz6Zo0pT0f0kW3y/hQGmqQOPuxwNNIdDtqMLVuPMw8D103i8d2YmTA9ayR69ma9mA4H/uThBgR4H2Pb4WH14diMHzJPAtRzNwk5LC8NIHf8+SMMQM+vpxwdlvhT5M8fb2GA8/SNwjzO1iP/BwTKTezd6wnn60CPA3n+S0j4QIoqh671yBdh4M7lSZvkm60ff/XFJxRwe9RGt2ZRypkvPl2BAP0NYeUle2aNUym63vGXIKDdSTHXpx6fdTjUoy6OPA7Q7zh/87pC23AeB5CPvvb7z2D6/RQ66zHHcR3oSeC1X9cM44JM7+KhVZ88n2NO1wO/aN1cgUC5bBjGzvpaMOT1ekPBNc/6Tq/Xa7fbIDiZLBZF4C8Xk9Yj0D/8W4Jm7AW8q5/+aHxbQY//d/sGzS0aqA+g2xe//4PybR0EPR6/3+/xBL0+/OQ/9mAjz0X/hH0AAAAASUVORK5CYII=");
+}
+
+.flag.MD,
+.flag.MDA,
+.flag.md,
+.flag.mda {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACl1BMVEVHcEygCCXKpgHPrAGpCS4AVKFRLVtVX1QAMoMCU6COBBmpCy4KOH4ANoimCCjUsgHTsgEDVaIBR5aIAhbEnQDEmwDOrwfIpAOKAxYMVJm+lgIBT529dRiOAxmPAxkANYbSsAKnCSkANogIWaamCCkDOYcBOIwAOIsBVaLFngDFngCkBiWlCCcGWaCGABTUsgKLAxaIABLVtgbCmQC8kgDAlQD/1QD/zADEBiYAVLcAT7QARa7ABSP/0AD/1wDHByoASLAAVrgATLMAWLnCBSXKByz/ywAAQ6zJByvNCDHGByj/0gDIByv/2ADBBSTLCC29BR++BSHFBycAXLu7BB4AUbUASrEBRrD/zgDMCC8AUrYAS7EAX73OCTMAWrrABSTMCC710gj0zQejBSGKAxbUsgAAQakAW7oAUZ+tBib8xwCfBBvEngP0yQSpBiCOBBiRAxoAV6oAO4/9zQK/BiL8wgEATpzDCTEAQqoAM4UAN4qdBSGZBBz8ywDguQAAPJ2nBycVUKAVWqb/yQCDXju/mgoAP5MAQ5wASJ8ARZYUTJsATaMAVqOVBBvWtQDnvwEVVaPKogLClwC0kgfYrAGoCCoAUqcASZkAP5megwyHYUBUQCcWYar80wC1BR7yzQK7mQuDYS1vUDSriy0WXqnGBSiPaS2qCCxMWVEAR6MAWrPvyAAFP6PmuADvugDgsQDPsQRtVBqOchxrZjSZYA+vSCivTxB5cGLQqAHLBi64ByoTTZDoxAGAYSFzVCmLPwynRRCjgCKzkB+4gQU4QBzAXzmFbRO6KB7NQzKdLBWNaEuOZhKLehhPZH6EeEHAOyZIRCnBBSUPOneZfA5kSTEpQhx+dhyeXTauhUE4TF5ianKQhSpUUy2QPryWAAAAsXRSTlMAVUlsXf4UA1uwr3NzlJTfvHBXsZq8giNwlIGiB5OhrZ+u2j/aUcft8dv6xu0rP5XxKyriKmX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////4JXkP3AAADoklEQVQ4y3XVUWgbdQDH8e/d/dM7e2l66RLamLkQXVt0DhecsFX7Iqhj+jDRB4fCBoKFPeqTBR9FkPrkg+zJ+SJTkIEgrMLck2yok8HWtWDTMrpL1zTLNcmSXHLpnQ//S5oUPbj/w92H3//H//53pwGgP9cx4qOdSGQ8OuwqOa3Kfx8Ha0cEDJlu5mWAGPBafQ2Wf1Qyd4PkTmtAD3kj1hsozxQ68IV9kmvQtP33NaLxO461DLx5TrEa9Ra7Grp2QPsAtsY3lAXskz9DExJNG87+XoIK7pwafeBYy7zjAGVge+ttPreebAvsbenNpg0+UAGM71wwXOZ+GZZ9lkZ2vtWtBghAemx8Qo8bDhdnCwAl2LF0B5hQPwWaJEzbxgfXAHDdwcUpgWXpTqOhgfohNGV9P4SuC3P7PbrTQAPUrvd9XMjKNnM3T/V0qQSWLr0AlUnpwYWstwYwf/H5oYW+KSzdkb4GKqF3XbJZD4ALd0/F3r3P3AuQRNYn9BFEDOkh64F9FBhTm9/oGTqZ1y+BhU7Pm6CC9NmsBzYAidbIhc7O2YkzdRg+rztOo4EmpFcESN/jUOJZ1yhMVW64QDeeGiYGqNT7vYEClaDV2kyMjQKw0O8LoGYZ8DGYt6Bxdcmxgmq1Cg2tz9dRQ2/bYBikgOhDRv2pyQMUOcYjTUOIWjefuApkvTCelAdJZ6bYcFcm1iMk4iAQ1Ah9FNT9Hi5V3hrpnL915REz19OE3gg9ohp0fQqvKB9s+7HJ8dwav6WhBpgYFCDKsNzedje+KDf3trZ0aHN1svRUAIBJz8fZUPd8UeZThal82tvcwQY+MjGMQujzBiqyTsorAp4HVVaC+krH944ehHXCeOlPgCq9J72c4sGvV2dWlGvBvdh+nwexqxikejwK8A+vmFuH09cX3wPzayQnnj8BBCoM+CdM0vBD53Dt5iKXw80V+nweEH0+CkAaSH/50tgiMDrgIQAB/T4nI9f5U/LZahQYplwOPaKU3PM5ymPIpZEc+OoTWT/0dUF8L75MjzPKLACfdX0AiPhD0R+/99p3OcTJl3tenh5EyR3nTgrIRXZXK2EbeezVEYTDkZT+mFvy9vgf09PTq2lfuRGTF5LJnj99O7OM8jEYcHm3HHQARKytJJRXASa1tK/wfUchEKe5vfv0MlxJK/P8VJi43x74lurWthJXDp0DWEPmU/9rI1Juo0yV6q3/+0FN/P2irSklSATe1rF7LYB/AR1Xq8eSe29rAAAAAElFTkSuQmCC");
+}
+
+.flag.MC,
+.flag.MCO,
+.flag.mc,
+.flag.mco {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABR1BMVEVHcEy+vr6bCxnDw8O5Hje7u7vPz8+zGjCiDRzS0tK9vb2qEiSyGS+2trakDh2xGC2xGi7Dw8PCwsLAwMCuEyezGC6yHTO3HTXFxcW9vb3FxcW5JDurESTIyMjJycmwFirIyMiyGS28vLy+vr7KysrMrbCmS1SpESHLy8umDx6lEB/////Ly8v////PESbVGjXPEijRFSzQEyrLDyLMDyTSFi/OECTTGDDSFi7VHDfTGDLJDiHWHTnXHjzHDR+0Fy7KysrX19fUGTPGxsaoDB3+/v6sECL++/y4GTG6HDWiCxnDw8PAwMDOzs7T09PFEiewFCjbTF3WM0bNHDf4+Pi5Eifb29vs7Ozy8vLv7+/k5OT43+H55ujNJDXvsLjid4TYID3CFy/cWmjkg43KFi3CHDf0zNH0zdLro6v88fK9R1fGtbbxw8g/ZZX2AAAALXRSTlMAzMzKzc3MzMzM/Fp4HfyUQHGUQO2kF69fp1cmhoakxedmfrG3zMy47OOkA1mexH1FAAAB8klEQVQ4y92VSVPiQBhAcdBxjKHYBRxxHx0XwCiCwUEi0CaQATGA7CDu2/8/Tyfp7nQCVsF13iU5vPd9XalUtc2GWHKxTn8g4HeyG64l21gW98nrT3a2IElSBuNbc1oz18pe/gfWA4VC4ala/QPhs9XqcChlKhDfmn+FXYSwzl1fHoKDWWjfpdNp1ef5WCyWzaZOH4f1eqVypZPPX9WvE1RwR3xNz6ZSyeQphHu81ohHo4lEnA40n4yHuuqfnXEcdww5Un1TYPjUeKIj3xyQ44yOx/4JHZh8Wqd8KpB0nxrPjfFPijiYlyh/ZDzxz4vfSGD2ufG+KTB8erx+HOybA82nvqWum/wLI8ioftLiR/FxsG8OyHFGxhOfDjSfV24gCo90YzzyL4o7JEgpg35HBBEIELsv/Yd7JRq3+L3Bhx0H730xotkI+A7enl8H90ovrurnvZuHTzEi4ODXZeQLgCh2O52uvtsIFr4MUIa2TxxghJkpg9x/FZQnDOZQ8H3aYNIN8rQbLAGoNVuNRqtZEycIQLN9WRJUchChfNtu1YDlh2qUGBKUyiXh93bYHVxeDrrDq/Z1WMk5mDXUfQDUWu2yzDAhBwnWw174PCC3h8Pr9tgZWZb/IhhmbtNBhNXDg7FXlMMb3PSEtrZCHrcXD7f9A/n+GezqSLZhAAAAAElFTkSuQmCC");
+}
+
+.flag.MN,
+.flag.MNG,
+.flag.mn,
+.flag.mng {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB1FBMVEVHcEycFCCrIjCzIzSkFCG/L0GpIC2yHy6cEBsAXpmgEx4DU40BU425Jza5Jza5JzgDRoMCYJoAVYGqGCuvGigARoEARYKaADcFQnsQS4cAQn+bEBoBXpgBX5oKW5SxHSsAR4KsGSWvGinAMEOuGScCY5oBY5wBY52XDxgAQ34DaJ8MZZzXHC3ZHi8AYa/YHS4AXq3WGysAY7HbIDIAXKvTGSgAa7bUGSkAZbMAbLcAbrjRFyXPFSPfLkPTFybQFiQAZ7TNFCHaHzHbIjQAabUAc7vfLEDgMEUAcLnhNUreKTwAWKjhM0f/2gAAVqW9Kz3wkBbdJDauEh3EJDbdJjkAWqoJZ7EIYq20GyqdEh3MMEUIXaitGCapFiO1Hy+ZDxnseSHAL0L/3QC6GSelEh3KLEG1FSLAHi65JDXoZh7payHviRvymhMKcLbJGyuxGSjIKTwAY53rdB3znxTylhQAarUHV6PQIjSWDhf8zQTOM0sARYHIJDsBTZP1pxLoYyoKa7QASYgFUp/kSTvTHi8AZaTlVSbfMTvuhBnhOzcBQXvHEx/fNy/4uA390wL6wgcEVZbVM0cAaqwAbbDbMkftgiPgRCXqcC8AcbMJY5uuLkP6xgZLH33VAAAALHRSTlMAcjWVW7AUVrD+kCZJY3Wm/ZoDBse8mgKBCGqhvNuG2tva7fHtb7zi8eJlfogwJqAAAANiSURBVDjLdZXLb9xEHMc/Ho+98e7GVnedrkLDYRFcUlWAKlHx0gqQkJpeEBK3XjhzqPgruPbY/wB6rdQqBx5CCo8gRFQeJdAQgqqqJN6kW6dxdr0zNocZ726q4pNn5uPv7+1xAegc+w0VFq47r5YXjr34MU9/2sUpCX5t2Fw5aHEAcKncBG6VSfygrB2coH1HRZf3HeFeBnl0wWUVxtmbh2fH5SF9uAZxeTQ/KHPwnSPxzHuwi3Q+ZHRhFcBlDJw/3DSLS+Uh/Wt88hNATofdqHb6+isjyejhKvDaOmPIKvOamwAvq2+7ZmP+y0cRCSDN2o0v3pjhcQFScJdvu5oUBkQkCBxpz7caZEBwAqfkDoaPIIHKggt+lD0FR5s3ywtAHDRwGY/rlt/BBdIUyhL9JK9BmPS80fjhYlAFMIP3GDAwvBBojJUx2b+/LtwHpKTNDB5uwCAyPGg8EDAmI4Dlt0xA6SyuIIJkwrsIGmS820g6vwmbYoPT20ApHCr3NR5QE5CBLNtL4mugDiUaemG4oRTDIVFShesBKQIg+Mo5t32Ger1O447WEG6AgqExKSa8HyIWIeAdtrnXff2sAXohGPk8r8I1vMlS8Or57+rt4Y7zS0IVq2I4hBys+5YvQHCPf3bBqZ2uJWhgiudVI87wRwKA573QaQCkjVlcKSWFBs8D36cgAAEStkbbZdeBFJypujIWPOt+QUDfZAmcue01AJpMcGUC8JjyejIPj/ylF29TDsx4TdRFNc4UGL76YGF7/jEQWX6CSzwrT4BGgsiok3B/yduaq7pVKVsuI3eCr4wu8vMmpm2Y4pLuGXyKCW/mgRb8xdJLwylvcbrWfQJteV8Qa2Dhe/94DhCVWSmh2wXjTqAx/CTofm8vPgDB73MIs92l+o3YdJoGEWZq1/989tPWC+eYkYcsA2pBgEZafZB5QDx87tbaH1zni4nRrlV3m9hqmY5qxRIGn7OZkAirMeONa3vPynv22Mz4B3sA5GHOLM5E3vDIzpC3946a+5uOKdpnH4Oinf7ISd6DlbtFjHNlFwnfPBDHLq5Gd4qyMfjIVFgBa4zBW+FuvzVe5GruXOHm37LMT1wdrZETqjJ+PwI2bHfA+s7Iy3Hiw+b+/1xQi6kTFumpfWg/PHaLhV2A/wAL2YOc4qCVqgAAAABJRU5ErkJggg==");
+}
+
+.flag.ME,
+.flag.MNE,
+.flag.me,
+.flag.mne {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABy1BMVEVHcEyngCm1mD+jhjGdeyO7oEiTcR2jgymylDmoiDK3mkGXdB+niC2gfyaRbRu5m0a4nEKtjjGaeCGTdSKwkjaqii6qjC61ljuefSSffCS6nUSrjC2rjC2zlTqgfia2mT+8okmSbx3IAwnAAgfJAwvEAgfGAgm+AQbFAwi4AgXLBAzKAwzCAQe2AQXOBQ+7AgbBAge8AQW6AQXDAge0AQW5AQbPBg+zAQTNBA7MBQ3JBAy1HhCxkjW3mj/OnzS8oUiujzGbeSK9IhW0ljqgfiWwGw6nhiqUcB3FVR+kgyifGwrNkDOkHQuXdB/Hiy3KSx+5HxW5nUO+BwfHDg7DEwzCJhHINxjGLxfKbirNmDTKeSyriizQpDnEPRipHw3IkS/MizHIdCm8GAyaGQnEGxCzhDW+SB3JGBHFZiTHlC7GIhSHf0y+NBaWGAi+EArCNRq6kUDFkjajPxTFRB58elukgCeuSxqfVBixAQS6KRG9VSqlNBCsgiySYxmuFA2xWyHHgCrJlDGYaR3KljRicGhTbHK3DwmtaCO3by2fbi6/bSzDCgmuAgSsJg7KCQ+RizetDAfUrzuXYzqLcEaagEg3ZH9phzrCmTltiDpk1rcEAAAAInRSTlMABmMUj7CwVlZFdnN0Yv4olJ2gKImu2ry836LH7dv64vHxbzOIgQAAA1ZJREFUOMt11elbElEUB2BUdjX3UtsRhkmNIo0kc8AkHQWZZF9jiR1CHkBFy9ytbFHb/9zunXtnmqE8H/jA8/7Oc+YuMxIJW11KdfewTCYb7la3qrpaJBdUi+Iq+G1rld2yWCwrK5V0ZQbVzSvdalVXk25T9lwLhyUqmcVSOan5s1/MU1Pm0S/uwmpm6316Dtb1Kz396lalUtna0T9w2Wp9s1MNSyyVrYLBZDIYDFOgzGbzKKwxd6qU2XmffoLKCvC79U3XxIt5ieWpycR5M/ZjoB5rtWNaLelJPYWV/KgjdbqJcS7AewGHpWGLIAiSZP19HODGGcW+mROQA88FmtqzPOsWcs6PvFgEAYGH07DN3Vur//MwsPLcwI+D2ruzWk0uEPDxHI4P5gceBTjPTcP4NZpaKEAThJsUtIde70ABkc8GmCzDxA9SBOFLNXm9Yw0GsEdro/HHQ/6QnfSEEm6G0enYcTivd9hAQOjBc/rskULB7vNFct5EyMO2570RBGaem9lx+JVngpE4SQdCAbJAxVN8e9bfYwO8RwvJ2CPn/oTdXvtop+K+cZFnA9OCceBKgpGC/qPDo3rtnHJGMcf+wRIMiD1B26nIbn3m8MhLUTG/2D9cmoWBxwJOkNFAMEIdHhSLQSro9PKc9XdAYG5a7ElPNHjw60f9e52i9kKYcx4FsOeOzQTtj++dFotFKhaLNnkuID5m0QkPbf3989TppF1/OevvooDwkoCNWvV4Y870mz26/DbT5O++XAYBkQcb5Q0kEhkqmHNufvhqBFzgJ0HgyTPO42Mz7gVrE83nS5nct7QLc+y5gOASwo2iyx5nLE/rk7kS4EKPA8JLBTfKNeLazedjZTwNOw7yj14ugAD3TuCPGVjK8sluyShoj30DBfA7BLXHK59MIo7ac77xakFifSa6VIjrjRwXtAceB/7x/PDC9tA3Xl0CAdaPuJLTsI6PHxhFwwP+1+OAa3P93do8qEVQa7YPG+uvP7+dRBy1R/7TUnUbBKo78+Hw5QFpR6dCoejskPYODt2w2Wyz+xtVkDtrPIJP++nM8Xpje+GSXCUJh6/1KNqaPjR9qnbp4NAsrOXl/e39BVi35e3QXVVc/IHqU3W2S3vlcnmvtF3Rh/78A3lIZQ2cp7/6AAAAAElFTkSuQmCC");
+}
+
+.flag.MS,
+.flag.MSR,
+.flag.ms,
+.flag.msr {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.MA,
+.flag.MAR,
+.flag.ma,
+.flag.mar {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABF1BMVEVHcEyuNjyQKSmCEhaZJimWHiOdIymZIiewNz2JFhqaISWTJCunLTOkKjCTHB+YHiKpLzWqMzmbJiuWHCGqMTiGFRiaHyWmKzGbHyR/ERSNFxyFFBeyPUW+JCnCKC7BJizDKjDELDK8Iyi4ICW/JSvHMji7Iie5ISa3HyTBJy3FLjXJNTuxGh+0HSLFLTTGMDa1HiPIMzrGMTe6ISfJNz3KOT+zHSHLO0HNPUSIFRihJCquGh6kHSKqLzSBEhWVGyCfHySVFxulKy+OFhqtMzmbGR2sGBy5KS+aHSJ+OS0ZWTGwICatKS61MDaxLTK5OD+qIymQGR1XRS62Njw+TS+OODALXTGyHCArVTG+MDbDOkGwKSvCNDosN/gwAAAAHXRSTlMAsAawKGHcV/1ziBR3+k2doWlF6pSUrrzH9ryhP6/AaMEAAAJ+SURBVDjLddVpe+FQGAbgqCWxDFp0HUV0aixVOjpTBLGEJPZYqtr//zvmrDkn1Puhn+7nud6eI4kgoPGIoXjU5XJF46HzC8+ZcGLOxGvwN3jukgbSAE6LjO8qDnIHOhiOxHRd+OmSJGk13+//gXmt1b6+PqbTVg/OD99VNBDyiqLoDQUufaqqK6ouSNJ8/wYGcjC1Wq1YLFarIDabTHoNOqraWIzllAIC8zfmKa/+AvPy8lwof4zwPNzf51OpB6VDApxn/LlQKJczmUw6nb7HPkkDyNN6xjmfhx4FBnPonfVHnHoUWFFP63nO1kFeRgF7HbLNEcc+CbysogDvuf8Vcn4d4B/VJQhgf4rb60D/BwRaq1dWz7aZjgh3+BwMTJ2eHI2xSTNu+5yGAtjDi2XbrC2yDa4nPosCwNv1iG82rdFul3fWI/9b68MA9uyiWqZpbreWsflk9djDQG9me/toZjuzZ6xN0zj0OEDX5y6qtzU2W0tOUg58FvqKVocBe337ooz11tx9Yk7qkX9CAejh+uxeU2vTsEyDcuafujjgrE+lZAu0W2u6DfN/YWBCvfOikknjka9H/h0FCmX+V0xOEm/D1SNfAoHGpMw9VLSecFTPPAlQ/x2n6+D+UqnbhgHHQ2WfPM+px4EDzy/P6rFv9kFgQd8h3y5P67HHAe4hPNoG1TM/BAF1wT+08iHH61CPA8gnc5UxmkrWuQ2rB54E5DF4K3fILJedjqYozXfCea/V2yCgKrqu+y4DfvRe9wcit77lsg+mq4HgsNmEfKhoXaBv3BeCrsci4eDBh8YT9iduY3V72nBu3H7orsXTHyhP2OtP3Lnd7ruEXyQfpP+1Mxn5x4c1GQAAAABJRU5ErkJggg==");
+}
+
+.flag.MZ,
+.flag.MOZ,
+.flag.mz,
+.flag.moz {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.MM,
+.flag.MMR,
+.flag.mm,
+.flag.mmr {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.NA,
+.flag.NAM,
+.flag.na,
+.flag.nam {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.NR,
+.flag.NRU,
+.flag.nr,
+.flag.nru {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABtlBMVEVHcEwAHlwCOn8AFU0BH18DKWUAIWIAImIIMFcDK28BI2EEKGcAHl8AJmoAIGIDM3gAGFMCNnoAF1IAImYAO4EBL3QBNnwCOH0AF1ABLXIIQYYBLXIAImcAIWUBMnYAK38AJ3gAKHoAI3IALYEAHmkAMIQANYkAIW0AM4cAKn0AIm8ALIAAIGsAI3EAMYUAPI4AOYwAJncAPpAAKXwAL4MAJnYALoIAJHMAMoYAJXUAHWYAOIsAO40AG1z/ySEAQJIAHWAAG2QAKHv+//8CF1D/vxkAIWf/yyYANXv/xh0AGVgAQ5QAH2T/whsBKHAAN4kAGFQAOoMAOYsAFEsCMngAN4oAJGwAOH8BLXsAI2oCLnR2bksCKG0AE0kAKnMALXcVPYMCNIH9uxiUiksAPYfIoS8/TF00Vpk1Tm4aQY1Ub6hHZqNaX1dSWFmRfkCYqcvktSSLnsSquNRob1x/flba3+wIJGCahkGmkkMmQWz4wyPrviwwRWPhrSOKeT7SrCpUYmO8x92Clb5rhLV9eE+4nT1CWnDx9PgsTndZbGnEkRLAjhLYoBPXnxNzYjQ2Pk2LcCVLYHmgFJ6VAAAAH3RSTlMAdLCwVyiGYwVVRxTCndtuoJSUrva8onvq2z/67e3iySsG7QAAAy9JREFUOMt1lWdXGkEYhZcuiD2WVEQkShRbEKKBiIIrAQKiiC4oTZpS7Mdu1Kjp7R9n3plZ3NV4j8cPnue53J3jLAwDqVGo25vapFJpW1O7SqOoYR5IjVyLftc2SB8tongg4TD6Cb9obWq459Wq656xfuYJ0KGMfQRn0D4XDKU84Sjk6ePWOmWDSq1WqyTKlnqOZTkkhEKZEZ/PNzExAfzgoN0+NDQ0txBMpZYS0XggEFhGiUQ4LhIY1ZsiSMj4RDzgbxcWgi9Ret8MWAx9SxBTX5/OZHrNUQHztP4W70XCgNFotFgNBsJPcU5mMQO8oF6AY96CeR3m9USgPK2/hwt4LIT4OaierqnipN4AczDfyWKB52m9COfnE34YCZ4Qz6N6skaE0zmEH2UdIOD5gnqMGylO6ik/5kfCIpmD6wXPaqE4mTOl7wSeCpgPitZYb9fQeszbkBBO4fmUF43Ha3A9z3c5vUgAPnmzs7sK2d05LyTx0Qjqq7z59x8m7El+PTiegbzjc5w9uCoVwoJ64AO5s9Mf35iT1aOZGTH/nmYze1CJlcq5k1y5FNvPpqfT6Z/fmY+biD2+hil/bwqF852r/evTIyx84DNNkk6f/nIj4ePuFzid3nwxv05PcumwjCo3j0R49iwXccwyZ4f0dCzbWxsb9CThWdH46GGuFItVKpVYrHyy/Kqnpx8J0QTcE6NxbWvb5dreWtNVcfKwcDq2ri6zGXgQ4gnMW6yfXChFIU4OB3iEY77b60YC4YsXIFwUTUIc1wt4EAIJzBvW8Ces6+jJC3ABTwRyaXXbn12uvQ3ReH59lQdhOU4u+Vp+Y29vK58k9RSHNbie8uOz80ggl9xkulxfv/zfGgFPBCv5v+xL5ZPJzjtr+HrKTyIhEuffCeSW3MFv+XHEg8AFqu8Qwcnb7uKEn3SDgHn98BgmzGabaLyYn3SvgKC3RVi/34njQHE6/Wx/jxDvxrjT615ZYViO8/v99S1KiUoul6P3eqO23uGFgImKCe50eN3z8/MyDcOyz+vUtXe+aBQaSbO2YxbHjYPgDpkKOK384S8ohUalbG6UyWSNzRK5gvzxHyrIaqcZXBTyAAAAAElFTkSuQmCC");
+}
+
+.flag.NP,
+.flag.NPL,
+.flag.np,
+.flag.npl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB2lBMVEVHcEwBO5UAAGwFLYMCTqMCQZoEVagGNn4BM4sCSJ4BMogiMoYeKHcDOpQCNo8ANI0GOZECNo8BKn4DK3wALYQSM4oAKn8RWKcALYQCNo8BNI0HPZIBK38AK38AJXgAKH0GSqADSJ8XPpMDNo8CUaYJV6oBO5QAK4MCNpAAJXgAJ3oETaIFSZ8ER58CRZ0BRZ0DUaQBNZABOJILNIsENY4RLH4COJMFJHYBLID////XEDPZETXcEzreF0HdFT7fGkbaEjjgHEniIlHVDzHUDi7eGUPiIE7hHkvcFDzhH03ZEjfSDSygI1rfGUTdFD2iJ2CeHlbjJFRdJWn0ucbgKVDEFD799PbeJEnshZrjO17OEz0jMIPIGEalMGriM1nzrbzqbonlP2X//v7nWni6KF7oYoD++/wlLHzgOlp5HlujGk+jK2SkLWf52d9XL3dCK3YxJnFzJGWFHVZrIWCZFkXAEDacJ2DEEDcSUKKmMmzgL1P63OLyp7jVFD7reJHRHEr4z9hhIWLlSmvwnq/lRGj86+/409v2xtBDIGVjG1d+F0qQFEMZIW5aGVSnETpdOH+8G0x9J2ZHOoQ4Q484NYLZJlh9Nne2Ez7uh56sGk7lUW89J3DlU3C7HE4lmctPAAAAOXRSTlMA2AL72NjYB3vYLv7+65WqKXRYF2b+iR28Xp8OTDfJnvVm+E37ObfLxXauh3A9hdS0+cnnP/Z//tNlO1j7AAACb0lEQVQ4y72UV1caURRGlSITOkgRFbC3FNMTYIY+dIzSmzQFW0DAGuy9a3rPf81lgCQrlCEv+R5n7X3PveecNU1N/yvC/n4h5V+ElvX1vr773R2NC68mPkx/fNd1W9i4MKHVaqdvuu40drOWyQJvMJin347ebVgAvNGoWe25R2lEKPMazU56lI0rkCZ/8SqVarWnG1d4qQV8OBGdCgMBDb0faMUTDGZzLJKUJTfzdheKIG8YvThCLGb+LAPxRF0HCMhrGrPeGEkL2tSmsyDEI0dTCKJUKrcc9YqQFoyHzjgmpIr8mAn+Qhtg1xE0Gn9i2xcNI2Uehrey/PYayq0XWD/t6E46nR0PmTAehtWBJf4QR0whNFGqCnbQnh98xhCDv5idD6hBLIpA7huRSGyjVgpFHlGGaBwCW8R8+CC46FjK5eb2MsS2TkLllYq8H1w/FHxa+EShiiAmi8WEelurvgHMd98VPvJ+j5lCQQh3l4CAor7khiwV98NwIMjBE8g2uz+KDU52EpmF3bgG2YbuH8uK8YHuuGcgPAE53C0JHh+qtuAZZJv/4KRcwWWxKBTuGR5OBe+xB+N3N7wKELmbLqgrKKe+bnucsohn1lQQ5HL5JzpUVxgzJfJepzo/q7BgvFy+RhfU/B00jysL66Y2ge1RlHidbi3TRqkpYLwa40u4Tqe3ng6K6wh/8XoQ6xlxmFBdAAsxP+dwOPbmlld0ZV5vtS5fSjoJ1YT5xUcsSMTl8qD2wSeZpeWVIm+1rlw9kwxXLGwzjfX49zkEKk/6nH56dn5xfX1xfnUp4VbUaKdWFO0Q8wTSkRGpgPvn8T8BUBe65LdlQ5EAAAAASUVORK5CYII=");
+  background-size: contain;
+}
+
+.flag.NL,
+.flag.NLD,
+.flag.nl,
+.flag.nld {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABs1BMVEVHcEyYIy5cKUcULmGZIi5nAF0PJVUXMmaSHimgKTcTLWCcJTOQGiUVLmOUHikVMWYTLF8RKFoRKFkSKVqSHCYXNGiWICycLTZPJUcZNmymMT0VMGOiKTgZOG6LFiAPJFSMFyCZJDOWIy2aJjETLF7///8bPH+yIC0gRYscPoIWM3SwHiuuGyciSI21JTIeQYYZOXu0IzAfQ4i2JjQaO30YNnm5KzkXNXa6LDuvHCmsGia3KDW8Lz+4KTepGCSrGiUVMXEZOHoQJ1mhKTcOJFOcJDEfRIkdP4MlS4+zIi8UMG8TLWK7LTzU1NSNFR/ExMSQFyGYHywRKl6FExxshLEWM2kUMGYbO3SoHiq3KTceP3mSGyeqKzqbqsm9x9vpv8MaOnv9/P0YNm0iQ3/j4+Pi4uIZOHClIzHX19fZ2dndnqM5WJPWipGls8/KbHS1MD2nKDeyKTeVFiGsIzDSg4mGmb9cdaXuzdDq7vSfHCjjsrb5+frIZG3hqrAjRYh9kbfc4u3FU1736Om0wNbASFPNzc357u/nwcTTfIXUtrmuXWamrrtZcpw2SXCTnK+qXmS7p6m0rkjyAAAAJXRSTlMAYxRvdgKwVlaugpejYt3ApUUolImevCoH2j/b8e3G8e0jSUni71YnlgAAAnNJREFUOMvt1dlXEmEYx/GXfdgEwa3VNinIRAllFFBWhxQJUSFNSKGgkNUVQXM97duf3DPzDswMR07H+74XXODn9/jegRCdrJ+QqpWQWi0VPewfQB0aIO7Cp1ikvO2nC7bq6lNLH9yXCbWY0NyLRNBNJdDKerVMkmGSnFitVndyueAiU1efpkcqIghCJO3RdEUjkWg0gvz+9bILCofD5ATkdq86nc7nIzA7XHzNFqXbPpye2l5C/nUX9iTJcWgEGht7sfOKbXJyeHiKG2DvZjzHYfAYegphP9Mc4Oe0zrd409Oc9jNRPGj6Dpzz0/Sggj3/NRxv83gg8Fdxzk9HllCwgj3/NTyOzzc9HoB3nX3J19/QHecLpbMyj+PzrN/5/QcFc5eFg80hQZufDo4LR5fVSe48+HKp3vjwEn372qZ5u/ODen53t3RU2i3kP5/TX8Fg4e3QNbr24D0M3v0f/KMFdrB5epHcW6bbSxZTp41OvvHrJwxqxeWtUOgZ9ASyzdqsH7f2T5KpWtuudrGcmfeh7z9CIY7PztpsNitEUZQZdsx/TKWKyZP9La/DYYHBWobvbdhTdGaz2WQy2e32jdFR7/j4uIMbsJ5/nuVt3hJjBk3P4xSfc94TC6BERuiFr2HOe1lu8TCDtdZzhK/h8ZafwwPhebPwNQKPB4y3Umb7BmS3m67gTT/nYwZWUyKbXsHFoZWVdNbhZTl7nvHzvkAAZROJdDp9Q6+SaBUKhVai6tXdis/TwXLOY2ECHI+BDsi7UTZ7p1chRjIZ7+dDZuiWGHWPYkw+XCAwKJeI4Y86RecfKEO3VmXUy+VyvVGlMOCLfwHIf2G3ed7N+wAAAABJRU5ErkJggg==");
+}
+
+.flag.NZ,
+.flag.NZL,
+.flag.nz,
+.flag.nzl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACNFBMVEVHcEwAE0MBHlkAGVEDJWABG1UAG1QCHVUIF1AADzwLJWEAEUAAEkHU1dcAG1QBHloAHFUAGVQDGlUBGlQAE0cAED8AFEcAED4ADz8DIVgDKmgCJmQDKWcJMW8JM2wQNHDHqbIADDoADzsAFEjX0tKirrnZ2dkHKWUDMHC8dISsGDa7anyxGjywGDsAH2UAHWEBJW4AG10AHF8AGVkBIWkAIGcAF1MAHmQBImoAIGgBJm8AHmMAI2wBI2sAHGAAG1wBKXIAGloAF1UAGFYAFlEBKHEAGVgAFFABImvNFTcCHVkAFU3OFzsAEEAAK3QAFEoAEUQAE0cBImLPGT7////QGkABIF4AF08CImcAJ2f2+PoADjoADzzZSWbyxs8WM3MDLm4FJGoBMHfgbYQTO3/JEzXszdbur7vqws3SKUtIZpvRHEI6U4naV3DUN1WFmbssTIjWP1z21t0LJmnOkaILIVxTYZIdRoa0v9V1jbX46e0bPn68S2Xt7/S3nrbspLL99vcCNH0uRYCQdpexFjm7YnpEXZHnlKP68PL24ubqna28GT3jfZJygqvaboWersrzzdXvusQIMXfJpq7FqLl8UntsaJCsUXGacY87Q3e0P1eyRl9cbZu1i6HmiJzO1OPTeIzdxcq0usSUorva4Ou6KUnINU2tY4CYhqZjWIZ2cJRMQXGjeZOBhqwlL2WWj7COJEqZkrDxwMlwgJ/AxMybF0IjQ3ecGUPbt8Whm7jqn65pfKO3FCkoAAAAtHRSTlMAbNudd4hgVwWw/kWU/q7kEu1Rx7x736EqI7igSWYqlKkW8fo/Fq5v8ZW84q6y//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////5KQNfnAAAD6klEQVQ4y3XV51fiWBgG8NgGscyZ3tv2TlHMxCgDGEDpLQhEmoAiVUEsY+9t9Fin97a9z/b95/aWBNE9837wA/6e9zz3khMIAk71FVHl1Wuff3Ht4tXKy5euVBNvmWrRSfD3g8sXPg6Hw6HdhYU9H5zwm88+/eSjS+cP5Y6dqDhOksT7H9b/9mY8Epkd6Uu5eyORyM6/hdcTu/VOp7Om/MLFqsojIpHoSGXV0XIjw+gZkng9UVhluc0REHDDQHIvkNtmuX6dzOdzOjvhGPHIpZKmRi3x+FkgEd0CYqDP7eqN/R1N/DPDbo5brVa1Wq2jZUrKi4aiFM1NEr2HCI/c3FtPZILsZNDtyv8ViK6wowOYq3U6mqZlYFqV2KNAZDZ2cyw4xs5su8zBsRmW5UZfbiRHINdhrpN1UArkJQwILI1y+eloIJFyuVxmsyuVzUSX4/mVkvXpOcFfB4EXz5/kUm6324U8GAOaHlrgrcN3v1pqxr6FMRETt1K8N5d4GJDh9h30xN3uJuylpIlYuAV8NvokHpw2G+Jbv8aX1zM5V08P5sBT3V/PKyTYS0kbCGTWVlk2v74VNBvyHBtfnnw6ya5uC5xSdIMBHPobILD4/FV/PxfMFpJ9BkPvwKuZaO4XdSj9CLWh0GlRnTkp8A1aG/EyPZvk4tmpWAwG6J1Ndi0xNQ7Xd6DLRKeVXB+cfzR4o0HusRG+cJKbzv20YwWBnl4ZTW9wwURhQInWN6ebsG8Z/vI28HKPg/ClubXAD+CbxQGZjF6aXM0+S8I2oeHHIS+uH7p3B3iVyUH8UT8d2IBPQmzqz9+nWuFZx5+uZDIUbHPbPO8F68FxB71O4DUg8KKAvfAcwKsJ9Y8uNsPDfrN4H90OOC7cr9GY7MTuz8NWdYnnrwbfzdzgXEupb7TZiR99vMfrSzksjzj0Kuj1IOD0oee+uH6f4/LCeuQZPoC9sF7gJethHehRwCt4ZckXdZAXfZvDQnR6BU9Rh8vDNkId5EkYcEIP6xTbFHnpeuT5AO9L2gicX4/qQE/aYYCvLzxm++WF9aEawWvtfsLo5D1+ig+U59d/d1/wKNBZfIccaFPkmm8fPLzThn07CiiL74QDbRCHpzU+eGhEXNveboGBov9feXiZembo+3tDvDdZugijHHspfFxUGpVKvt8GXSZTYxwa4j0M6FUKSUMjqfWAMYGx2Wwmj5Zs0/McnRbWB95h6eoiGL0efFB+lH+vl1VVnDrzngMOSLZrtTw32ewWf5dfXEsw5PGKE8cO/dCcry2rO3XGYYdjQeP3+98Vl70D/nlS9PYfqHO1ZafrzorF4rN1p0Xn8If/AQ6Nw/RnxOyjAAAAAElFTkSuQmCC");
+}
+
+.flag.NI,
+.flag.NIC,
+.flag.ni,
+.flag.nic {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACAVBMVEVHcEwAO4YBWqUEUJoAR5MCY6oARZIDWKIIUJQCa7ABVJ0AVqEAT5sBVqIASZUBZawCZ64AQY0AP4sAUp4AUp8EVJ0BYaoEbbAAUp8ARpEDWJ0ARZEGbK4APYYAP4QAPYoBbrMAOYX///8AZMUAZsYAc8wAUrgAY8MAes8AccsAdc0AaMcAec4AULYAWr4Aa8gAYMEAaccAV7sAXsAAbckAasgAVroAWL0AXb8Ab8oAYcIAbMkAcMoAYsIATbQAftEAVbkAeM4AV6MAarAAOYT+/v4AXL4AVLkATJvi4uIASpcAVKYAQpcAQI0AZq0APIl2rOAAZr0AW7UAWqYAfNAAbrPW1tZVmtkAX6/T09MAYKn28df48t37+OwAcLoAWawAU6HZ2dm11e8Ac70AT537/P7FxcX8+/T+/fn49eMjc8iry+sAUZ/q8voAargATaUAUa6zzeuKvOabv+aWwOddm9kyj9aTueNspdxJi9EAb8K61O4AeMmfyOrCwsJ+teP2+f0AS6/t7+an0tLY5/ZimNURds0AR5REiL0AZbIMZcMAdcais8MARaPj7fjHx8dOmNjI3vOTrL7y68jHzsKsvZ6fw7+CpnKgtazE3vOuxtgTX70pW5YNcMpShLgthNHb7uTr6de85+e/1zm42FOixmu8yZ1/qlaUrYOt5OqpyjtbKjClAAAAInRSTlMAsF4UW3b+VQWySYmdw3KhlH6Urto/32btvCPfKmYqofHxF0bVlQAAAwlJREFUOMuNlWdTGlEUhhcFV8Deu8mCJQKKigoCKgqGgAULagQEI4aOvWvsLZbYnfRef2Xu3QJLm/H9wAfu87ycZc6dRRCYxCKUlZbKZrNT01i5nKJEJEYS0WTwGZ/LftRh7IDpIZPDTmNxCsK8eDQpz+tFstlGo3Fs4mRdWFlZKVStn6yu+v3Ho3hyklO5rDgUReNY3MysdptNr7cjRuPEemvr4OAg5IUqlaoKpKxMsdrnPx4ZHYBpxzNg7VfyrECYaA3wKoIvg3kCopBJavuIVAgEfD6Pp9fiQpAPwRUymUQikctrahpqCb6CEHAejlNF8hQuI3HA8yGPCx1jBB+sp+ESgIP6AK8khXA+gBP1Qb5Zr4MCzkfH8XoBgQNejAs0PuxZQ+ohX08IQtXg4vLsxguYjVnD8OJBjTwwTQj/+tMp0uNf3Hw7iYVE47vc2Lz4/FFA4YBvFrsXPFvjb5Cjd2E0FFxmk8uFTZ5feuYNhoXhBYNhfs0HT8ZfIkPPInjMZMG+7FhMmsiT6ILThDn/ftM4zA8VzBbs5uruK2ZyRhOeRwoWjWv3bncXczkijoZeRRM0zl//vv/4ueN4sOC4/XN///vWqXmgAP8l5874TeQjxBKwawv4HbMptjC55wErAWPYnFvb29KYzaZrS+REW1cfgOCbvzigLhWxBzz3yvLS2nnYCvg8+++7epHTIwW4JsFLRexZs1gMVs29sm9YmpuZmZlbWl5xt5WXi4AwMBLKV+B7CfD6eqlU2lldXd3UVFfX2Nj2tJwS5PRLSNbTcRoPhfYRkg+ZhsLx+iAv6lIDoSF4CWnTkDhRD3mAi1pwgX4Jo00D6imeEAJ86DRN1DTUOIDHBSvOK6X9ROo6O+nDE/UU39KtRmxWvrLfarNrQXQwhzqtfWp6uo3A6fXbZ91qIOj1Xrs9K5ObwmSiTGYKNym/MOEwAUSnnQKiSAT4lu3tsy5AqxnZiM2bl4TGh71oCjgpGfmF3WR6YdTqx4xiyCWjsV9QJZzi9IxSBoNRmpHOLCG+/A/RzGjI9b9eWQAAAABJRU5ErkJggg==");
+}
+
+.flag.NE,
+.flag.NER,
+.flag.ne,
+.flag.ner {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB3VBMVEVHcEy8UArAVwq7UQsCbBS3t7fMzMypQgsUjS7CYh8Hfhy5SwcHgBsGexlUmV/W1tYJiR/BWg/BWgwJhB65SwiQAAAJiR+1RQa9UggFdRa8UAoGfBoFchYFdxbAWAvBWgsFcRQGdRYGdRbEYQzCzMIKiiAIgRzEXwz/VQAAVQAIgB0IexkGdhf////gUQXjXAjhUwUMrykKpSPkYAneTQQInx/hVQblZAoJoiELqibiVwYLrSgInR3iWQfgUAXlZgrfTwULqCXkYgrjXgkKpiQLqycMsCoOsi4KoyIJoCANsSwGhBrmaAsHmxwIjR/l5eUHhxzEXgoHmR3CWQkFdBX+/PrmaQwFcBPDRAS5SAW1QgTAVAjuonjT09OvPAMLkibPXgq8TwcGgBgGeRfVUgXslWXSYwoKniUHkxzqi1Xc3NzCwsIRszH53M0MoCre3t5my3iD1JKc26a658LlcTH2z7ZcynHwr43jZyX77OTsmW/nekLpgkv0w6jV1dXFxcXOUgbYWgjbYgnzu5ep4rP1xqvlaiUhtTwwrkf99fHm9ulEu1duzoD30LaX2aLH7M7w+fFLv17N79Q+jkq1zLmLu5b30rnj1cz1ybLIilvApZjHx8fGxsbhYCHIaDrJPa9jAAAALXRSTlMAZp5YGRkZGBgZWMacaBkZu0Oufn4BYqnszjExRvGRhqKshtUZ0ebvAwM+H7G8E946AAACkUlEQVQ4y42V6VcSUQBHWSoR4YS45Xbc2gsMHJKEEkEFFyYGHDCd0iAESpLNFSjEfWnf17+1x5v1jdDhfuLM3Ps7b4YPI5EwXG+Tdsm0Wq2sS1pfKylHW0sN97upXnaNIHyAed884FKdTFpfI7RrpHVzc9wVeR9BLC4VhwGD9mJxe9E3/xQAskapXC6XNrYAe44Pagliadjvn54GPsButw8M9G8XCqXqEcNsAZsVBEt+zof6gMPh6Afc334G0d/R622zT5BA5PdDHzB0FwD8B6KA81Fd4GNIQPtn53kfCXyLvI/Ms74e+GhQ3oc6sy8OkOOL5mkfDQYH/TFq583q6ureDhXLOIZoXehjf3+e54PwV1IngIznqdwGPA7j/9mKr/zigh/fdAibVDYTjuuO4vl1aisWptb3NsHVld9scPHVQ9Tfh6cJk+jM89eVgjBz+hhZZZChX6be9r1CcOExEpD7UAdPm0ODFxUCXQ76Nptto8ogT79MG1ZtoItBHcOoagMyDP3M0f8C8uNuMrG2tnaaTKWPyfhWNrsu+h8+fzrHB+nEgXPSOTk5Pm4wGCyW5ZPT1Lv3Qvs4deIJscHlL4fLy05nyTdA3zI2dg9w8CGRfLubTqeSicMJk9UzwwaKhZfQH0f8kZGR0VGj0egym80TJpPJOiUK2OMw8yUd+i7GRwOxz87z+1Y3GrA+q5/10YB+3jPzQt8bDPBBpLxv5nyr24sGJX9s1BUBmI3CedZHAzxiiXhxD2QK4MGj3gl2nvGjwYAgWMBx/IqqoVmpVKobVJqrwRIgi3rdQPdG8alQINCqlHABrmlWCD8fiptqVWtniGamRGd3RxN/W9Ne9ht1q0Pdq+q53dPdq26/wV78B+PJW8vnhYJ2AAAAAElFTkSuQmCC");
+}
+
+.flag.NG,
+.flag.NGA,
+.flag.ng,
+.flag.nga {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABTVBMVEVHcEwAUy4Ce1IAXDQGbkYAbELKysoBZDt8looDdk0AXTXPz8/Pz8/AxMTExMQDglkAbEEAbEEAh14BbEEAbELT09PU1NTHycjExMTExMQMhV4BgVgAVS8AVC8BiGEIimEMi10ATSgDh18GiF8ATysAUCsATSoChV0AUizV1dXAwMD///8Ah1EAhE0Ai1YAj1sAlWIAhlAAlmQAhU8AjVkAeUX1+vgAcz8AilQAfUgAfEYAgEoAgkwAcT0AdkIAeEMAiVP0+vcAkV0AcEQAmmkAcDwAmGYAbToAVi8Af0kAdUEAZToAlGAAUCsAkl4Ah10AaT0BbEEAYTUAXDIAhFkAc0gWm2wAcD8AgVbExMQAjGDW1tYAdkrS09Pz+PYVlWQAe08AflIAajju8O8AekoVkV8Ak18Ui1ng4ODn6OjLzcwUi177+/u7wL4TgVLr/0hVAAAAK3RSTlMAr2Njc5RJVgVWE5xsgCWwrtr2x+28346835Sik6GuPxY/tCu08St5eSpllGOp0wAAAn1JREFUOMt11dlT2lAUwOEgS8B9a21duu8migE0KCISoewQFgcRLRZKFbX//2PPuUtyJ1fPAw/M97tzhrl3UBSc8MfI1/WNhYWFjfW52dD3sPLMhNUV+Hw39WG53obpwtxPLmFevpiZDc17uulIcNW2lbdvluv1Xi9qGPm8YUTPh8Ph3e3t5RUOdGuBqUgkMhUILi5Zlm1ZDQW0cQaTR28Y5/vbZB6uoYNs0ul3YCzL6vRHegyD3hn1yKNRHrB5GGpaDGdP07S9mO4E3Fc8wfb+DoyZyRDvBsQDr4ylwHS9rutWmQTcj8dScGqagk9B0O4JvlaTgkxG8Ec2BuTnxHXGtWxWCjTk3JOgnneOz2Z35QA590UIunXus+DjTwX48+gp9CzgfhfmlzfYY8cTn2w0lW5b9HEpiMUEfwjBTRs8rE94XA500dOg4hwfj+/IAefoEyRgPo5eDlKiT5RbyqDreLw2UnDE1iH+hASiN+WAH48+TQPHw7X5c+oJis464Elw43q4NlKQ5OugLzVpwNbBW+YNrpNsHeIPmgWlf7PL18FrJgWHbH3iacDXIddMDujx1B9jMBB97N4bJATPAvfRwjWTA+Qn6RKef5xrFZTOQHzk+l9vcEKPpz7XqiqdkfjIU1KQdtYB/5MEZsZ9VE8EacFjYI0y7qNKHUlBiazDPAn6zjpwy+TgADn3vws0QF9MJnD+DR88AePEsyA1suxGo1HGsR8vJleXt3fDfTdwfLNQhcBCvbQYDPhVVfUH5mZevb4gM8HuLncMHnELdNX3XrHt1aA67fmjmQ/NrtHusUAH8OdPfnQr6vN/UPOhH3ObWz6fb2vzm/qFfvkf/sFq4La24asAAAAASUVORK5CYII=");
+}
+
+.flag.KP,
+.flag.PRK,
+.flag.kp,
+.flag.prk {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.NO,
+.flag.NOR,
+.flag.no,
+.flag.nor {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.OM,
+.flag.OMN,
+.flag.om,
+.flag.omn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABtlBMVEVHcEwATQCRVUXV1NQAVADPz8+qERTAIimPgGsAVgABWQHS0tLS0tLT09MAUwDS0tIAUgAATgCzGBy5HyPBJizQ0NAATAAAWADU1NTU1NTT09PV1dWsEBUAWgCsEBQASwCvERawEhbNzc3Nzc3Ozs4AVgAAVwDCKDG/ISe/IyzEKi/////cFxzcFRreHCLdGiDaFBkAdgAAbADWEhbaFRnYExjXExcAcAAAeAAAbgDfHyXUEBQAcgDdGB7VERXhJCvgISjW1dUAfwD+/v4AdADS0tIASwAAagAAaQAAWAAAaAAAegAAXQAAZQDAFRmvDxPoX2ThKC8AYwAAUwAATwC1DxPc3Ny9HiS4Gh0AZwCzExgAfAAAewDUFRjFGiDOzs7vk5bLJCp/OQzv7+/SDxP5+fmhDA/kSk/JHyXXFxrz8/OmDhHKyclJWQiULQ7xpajqdHjujpDpa2/40tTuio7iMDbtgITxnJ7nU1hgSwobYgL98fHGExXMERXh4eHo6OjkQUb0t7naJSvzsbNsRQs7WwafLxFSSQj3ysv2wcPbPkTOOD4bbgP53+B0JgoiQQPMi4ysLC7oJUNKAAAAK3RSTlMAqxS2mFhY/gVqV3LdYn6FRSiTcrCes7wmSaeVrdva8e3HUcbt4vw/o1crH5w8XAAAAsZJREFUOMuN1VdTGmEUgOFFmti7iSYx1RQ0JAoqKAECFkBxQbHhCmIIQUMVEHvvqf845yuLu1mZ4czABTzv2XPBDAyDpvLd2+amNy1yeUdnfe3DB5VMialUvoD3iuYWNZp5tY2fGnlntaSreN76MhhkXiN9e3tyc2Lx2u32SGR97fBgzmYbhamRt9ZX1yqVytrq+o6aYDBoswUZtXr1xptiC6wFAi0/dtKNkgE6GrQdHEa0cxCselm2EN2yiAIcadET19fQrEfId3PfUZA7zoey0oBE4iGBJX+1GdpkrfcE2vuCwnX6euuokLNaygyi2dDVlsVqLTvIJY9DmXRZgR2C+W8WL+zPZE2m8p4AQf4I1rNHJhPLsql86HRzt5Tf/fMXgmgGvAnPezQ6nc4bzaSP/+9+JtmYfwM9gfc81+nM5h4Ycy7KptKh5GkylE1FTwYG+vtxIPQC3tPTi0av/wBjMBiQ/0QDkTdTTzn1A9jjYMVakgvXYz/s/8osrIi9iAvPQb4YUE/XC7cX12M/PE2Cor9vu9DTQLpewqn/ggPJer3oGrKeeD6gPhaPx7fPwhcLnGQ99fu/fqOA3x/7jCcQcP843w5feDjC6TnDe4nLHecsBMjjc2JYBwLLbvcQzMeRnfPLs3A4kUiEw9vxnb7x8QkIllaIh9tjhC8TjsbhGIEZHBw0GvvAk8DD+94Y4W7KHQ7sMafe5RxjFjy813PLxWuEXOAXIVjy8F7Pue+ucQiuAY7uBz81QwL6Q+CG3BJ+513gacD/cLgS15BzkPfhAHsDt7+/ZwQyIuZFv4g8Dbg9j38aZmOSjs/nGjcKOTofvHN2DAI/wk8eNTWrVFVVGk2dov1xtxMPhFOLrgm03uebRHpM1sAsTT9tUlUI/mTQq7FBo2h/1T2DZxYN4K42DXLPVKX/oKCrUyhkbTKZoq6qkXz4D7IEhDlfGGHdAAAAAElFTkSuQmCC");
+}
+
+.flag.PK,
+.flag.PAK,
+.flag.pk,
+.flag.pak {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABLFBMVEVHcEzKy8sCQiACOBktRTQAIwwBOBoCNxnV1dUBNBdzgHkAJw4AJg4AIwwCLxfT09MDQyAAKxHJyckDOxrR0dHW19cGTCkCQR8AIAgBORnIyMgCOBnKysoALBEBNRYBNhcAIg3Kysrb29va2trZ2dkCRiLNzc0AKRDb29v///8AORcAPBkAQBsANxcBQx0AMxQALhEANRUAMBMBRyEAOhgAPRoBRR8BSSMBSyT6+/sBQRwAPxsAKxABTSYAIgwAJg4BTygAMRQBUSnS0tLNzc3Y2Njl5uXj5OPZ2dnf398HQR/29/bv8O/i4uL+/v4lVzmnvK8CVCvT3dddgmzo6uk2Zkp9m4lFclgdUDE+aE9uk32zxbpmiHQSRCYsYkPM2dKUsKANSSacs6WLpZZSwGdxAAAAKXRSTlMAWJtyBbBKW/2CFKCUZiqbvLz2I4KusNs/rnTardvG7fHaP2i04sfiK3gFygMAAAKgSURBVDjLdZWHVupAEIYDSFOxXMvtva4hlNAkiUJsYBIB6cUC+v7vcGd3dk1B5hw4bM73bWZ+FiJJrP6F9re3Dw4Pw+FkPLa1Jq2otfgXeF//+StxSev85LhyXKkUCoXfO+FIbC/grcfCX/NZ6ccBoDd9x662qre3t2dnddAK5XI5k7He7oSTkTitSPL9RyUPlZWazYZTJayoAMZZvV4/YZam63qpVJLlYlFRlKJc0hVTal4RUVWBAw8GFLRHb5XRNPpK66V8QBDbc5zNg+0xngmXPsGPVxAXPHSXV30C5z14gGdCwyusxJGXswEBeYY/zEflJV7O5nxC3Z11avfKIiGXL5p+4UTglSGZ4e4ZbZFO64Jnwo1X4M2PqmSAuKZNJ/qDRXHgj0zDd4eX5B9JIyO66fU7c8ErqiElfAJGM2iRGR92MbwirbbglwSe5JSQDh9Wbz+37JkFOOXzORA8M7BTCrM+gUBxNu24a7XHnA8K4ovqEPKYFuFYA9YO418R2Kxz+LxAnIXJtmc/B6MmnXsEcZTvYNHjuCx7+GxQ4NE8tAjpWi7+wi8L/Bx0YTXFLHF7zpsBAY8Z9E57qg7821N+SRDRWI+wdCYcV/JKG3k1IGhpEU3bhrU9tBTG3z/dM95UayBcewTEafMjapDGcDC+nzw7PdxfXRIEDr2PHPd6L2sin6ud+gTdk/zRuMP/rvoTbAf4VwQRJR22PZx1u507y+WDgg/HLGk6yAOeM5aFII7pCJ4KFyi0bMfpK24Ftue8ccoEu399fgH1Bq/ncqpqmi7u8rVTKiQugf3+af9DKBSPpyLJjd3PqoGFMsUNpGvRdxJsvB1aDzxo9mKRzd2/Rs0toL9FU5T7E1r9gNqKpZKbG9FodGMzGd/Ci/8BTQFGuQKufzEAAAAASUVORK5CYII=");
+}
+
+.flag.PW,
+.flag.PLW,
+.flag.pw,
+.flag.plw {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABX1BMVEVHcEwAYLwAec0Ab8YBhdIAb8QAbsUIerwDeswCecoEesMBgNACjdYAa8IDeckChNIAdMkBi9UCjNYAY78AZb8Aes0BiNQEkdkAes0DfMgAa8QCj9cDk9kAbcUBktkAXrz//wAAjv8Am/8Al/8Apf8AmP8An/8Akf8Aov8AiP8Alf8Ajf8Ak/8Aiv8Amf8AnP8ApP8Ahv8Anv8Aof8Aq/8Apv8AhP8Ap/8AcskAZsIAf/8AgdMAfdAAYL4Aj9cAbMYAmOUAhtMAf90Aqf8AdswAgv8AiOAAjNYAjuEAiO0Ak+MAk9kAidYAedkAlPAAXLwActgAes4AbdUAZ9H7/QTR6y0dqeJcvqLk9Bp4yoYAlvcFnPIAduX2+wig2mDy+gwBnvwAldsAgvc3p8Sp3FVLtrIpq9YAj/oAi/QAovUAfe2M0HISp+264kNowJUAm+sApfoRoe2y4EuW0WYAjdzXD9FsAAAAIHRSTlMAsIi3W1ufBVRFFMKvdypy1KGUaZTa32btI997tPrx8W+czGIAAAKnSURBVDjLddVnU+pAFAbg0EGKg73cQjN4UYqgggYEIaIgigiIFMEBwV5u+f9ztyabdXw/8IF53jOHzWYQBBiLy7g643Y4HO6Z1UWbyyJ8EYvVDj6nFr/9OMA5hqlUKgv2mWnbMtebspqXajXB5jg9Pc29dx8/ksnkTuDjsfueK/+rHMIs2N36aaPRajRO6x3z6XRNkmQB6MfCdqFQSMLCzk4gEIvF1tdvu+flk8qhhJKGkYqljj8PCrntbdUTDpNIiKJ42+mco3QikciaP0QK2EMe0HBRjMfjURCfD3lSKKiejidcxJz6UCiUTwkHOdYDfNVqt8cvzHjGb5ICM/6q3/CA3PSvVK56UlDHxybXHpJBK6qOpz6ICsw6L4oHaavjqQ+eoQLy6Lf2PWxaPjreDznwwbOscFwGHh9OYtLQFAaTCDMeei8uUC8+e7S5o+PROsDjAvbw6JtcoTFZ0/oNUKiUFR8fcAVP26+uAz0poHXgxWnwhdeQ1odRgfr458I1w4HfCF/sCYcn1Mej13zhRuPD4V+4gD14THd8YYC54nEhoVzLFl9oUk78Fioo3veb36nPrA89LShvyRtXGNPxxO9eogLy+Nr84Tby0nWw373MCNIJ49e6r+wZjZTxxB/BQlHx8Jp11ZO6aWGuelJgX3LwoMbkRjVHzHjiaYF9CcHJT96e/7ZH95QzHhbSxaiPu/VBLz0bZfwW4kf79Soo+JiXapN5Usx46nGBWUfhXo4TTwvQ3z+UYB4e7jVc60mhU8qnZVlO4WRT8ln+qTTkOPS9ehUUJKkmy/MGvdNksppMTr3ZsPI9C5O66PWehsMh8PvDp95FPVOt6mxCrbZktk5xfzTLttk5w8oeTQblp24WOrv16z8ol23WOWfW6XTmOafJhb/8DyQBLy3BBPHoAAAAAElFTkSuQmCC");
+}
+
+.flag.PS,
+.flag.PSE,
+.flag.ps,
+.flag.pse {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABwlBMVEVHcEwCAgICAgIAVCcEJhIBAQEBAQEBWSsDAwMKCgoAHQAELRQAUyYKLhsBAQEAWCoDAwMARx4AUiUATiIATiICAgIBAQEDAwMBAQEBAQEAAAACAgIASSAAWSoAWi0AVykARR4AVikMCAgAVigBAQEASB8AXy4AUCwAUiUAUyZMOygAYS8AAAD///8AdDjRFS0AazLSFi8AbjQAdzsAaTAAZy8AYizQEyrTGDEAeTwAZS7WHDfPESgAcjcAcDUBdjoAYCoAZC0AXigAbDPUGjQAVCXXHjsAWSnFxcUATyMARh4ATCGpECG8FiyuEyYASSACXS2xFiy4GzS5Eyf5+voJAAK+GDC0GC/Z2dm2ECJ1dXX+/v6x0sCTwajk6edJmG6Tk5Mkg1Cbx697uJhdXV3tqLBUpn21tbWhoaHBGjT68vPY2NhUVFR7e3tvrY252cjs8O707u8mJibeWGlipIGLMy7cSFyLEyasrKwXbjxRUVElBQrBHDfCHTe9HTe+vr6sIirW1tYmZj5XTTOYEyJ5Mio1NTXX6eDpk50xYjjjd4RsDhzoj5lIChNYp392UUC3JDiyp6nMHTh3ESKNqprHFCetAoaDAAAALHRSTlMAkmOCKaCuVlf5AhSfB8ByS7KuRZR227OC0PpxZmFgvPrbP/ri8doj4rzH7bKdJy0AAAJoSURBVDjLlZXnUxpBGIePXqVbRk3vCU26wB31qCKYoCb0FkBjGzWxJaOxpPfy/2aXPaoD5H4fduZ2nuc37859eDEMRsjmjzI43HEuhzHBlLFHsD4Z4UvAKWKOC9TduS1hTMnYwm5aJOMADrvJnVT3yeSYhDMxxeTz+cxRBncMXWJ7R2pawR6//r1IT3gTWDiiKQR+faU1UiAQcHymIawA3uHYoyMA3u84/8+nY8srDhi/f26RjuAH+fGzVqvVC6m1d4J+tOCwji0vId5ms71a1WjSaQ04tkL19cPtHm+7sr/6NNQQEG+bgUZHkrnQfiGVqqxVUuuF4xy8QgLiZ0B2kprBAcLCUovX6XQ76cHCCyS0eJ31U3qoEGvzVqvuw2DhLRTa9Vbd8yFvQEKzfjgPhflYi3cO5ZsCxX/RDBeOsfknFG/9Xq1Wv5XLpc33ff9G8s8pECj+YhbF6HLNFvMb2c1cj7eV2T0gow0BzvMS0UbAa2FwnHAV87vlbCmTyZSyG/mi2W63IAHyJ0bEt3CcwAmCMBh8Pp/eZDKZAe7xIAHysQOqXtusJxo44PWQNyHeQsaxOSA4nR9767vxJu8OA+EZ4M8Qfwlv1kPeAngkOOGDm/V4axpfZz3Fe8MRKJy4OuqJS9N08Ej4ewp4LU4YAKLX+wxdOKqH40PeG4XCmctg8iRgglQSCYvd1FsPeDIaAcKFGXzfVbCkV3k83hUpS3ztxi2ykaA34XZbLLDeGwyS0XjkulyJnSceiXkiuIXaq0N4TylVPbhPhhuJwsTj8Tvyacg95PVfUGzlNEslVsgVYhWLRy2kf6zvXLBvCzRfAAAAAElFTkSuQmCC");
+}
+
+.flag.PA,
+.flag.PAN,
+.flag.pa,
+.flag.pan {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABtlBMVEVHcEwGG0SzEBm2Fh0FGT9gACC7u7vX19ezEhq8vLy0Ex06FTLPz8++v78FGD8HGUAFGUEEGT+zERkFGUDGxsbZ2dnX19fX19fW1tbY2Ni9vb2/v7/Dw8O6urq+vr6+vr61Ex2yERoFG0a3FR4GHEaxEBevDhbZ2dm2tra2HSTZ2dnT0dHU1NQHGTzCwsIDFTu7u7v////ZEBjaERnbEhoGIlbcExzWDxYGH1DcFR4IJlsHI1cGIFEGIVXXEBcGIVMHJVkFHUwJK2DdGCEIKF39/f3W1tbZ2dkGH04FHEn++vrTDRQEFz4EGUP+/v69vb0IJFS0EBjj4+PU09P39/jm5ubDw8P53+Dc3N63DRPAwMAMMGStDBO4FB26DRSzDBLFzNlnfZ6pCxHv7/ClChDf4+rSExu8xdRNaI7PEx388vMWOm3dOkD30dLYLTLz8/T7+/vCwsLO1N/76eomRXQuSXPYJy3rk5bxsrSrtsfGExzVGiLo6OjOzs54i6jgT1S+ERqSoLfgXGDaIirnb3NOYojlcHSJmrOfrcJYcpfuoqTjbHDtnJ/zw8XSvL3phomuR0vGxsZHd7CkAAAAMXRSTlMAVKNyXQT+sluwTRdFlIhznrXB2xZme5SiKmbqCCp7oYaL7dvH2u3xPyNXleJvvElWLWJ7QQAAAsBJREFUOMuFlfdX2lAAhSOiiOLeu3uvgIpiNEAJBFIDQhAQEChlCMhw79W92/+47yUkeUG094d3Diffd3MDnBMM4zP8ZGBwSKPRDA0O9OuGx7Br0tTSA86+fs1Dhx2N75nmaWPr4yYl3daqehCJYDqNw+HwHie5MsXiLFXmSsljb9Dui4Lc7VHdamyBabytur8ci4RiEQzQyTKOhGXBQXFH64eH59HospTQ+WFavwYEv4QmOVlzveYzd5Reh0mnDVMGg75G+HJwVYCZAZni+Rrha6JWEHmIQ16/9lYSMolsPp/NxhFBUc/zULB7q8hBPhze2ZTvMFeHX0QFPBEOn+JKQcBlfjGECNz2xedtFhVmpHqRN6JCEMzPpCRBxKV6yBtD75BJirjmJFysB7wxdpOA4lX+JqEuz9woyLhewI0MIrBcajMej2+mSpQgXK0HPBP7g/m8OJc5zW5brTabzWQy2cI7HxMXmeCMXq4X+cLvXyuY7yCRt4atIm82m+dBps25jf29D2eF93qB3i18+hagcPsKtmOCtMzz+PSCWVjGUq6tQCCw5RI+4vYK5jFba+oBvrAwT9X9LkRBUQ9wkrxOWMU8HgUP60nyPwLPy2sAThAeRNjKoQLhQXgRVwo/9msFgRfXQH5WEsAf/uwSZ6s38bkxmlTyBM/TpCjsF4pMuljcQIQqj+CzNE1IkzZ2GaYYwGWBMFXni2sAjgr4JcN8x2XBQki8jFsstPQMuaO9vV0KEWieR+stFkTAAz/BLGSSkxb4Wcg5nZZq6Lo/HOtrhgJJO5f4vBGztOQssVfwsv+kGQhOSPd2d3Sq1Q1qdWdHV3cvdCp/T+xBf7LElcFboMwl/cETt7tZ+wgId7oa2mpeNG0vn7e/GF2pVCqrQtwgo9qRPnDxXkNTnVcTf46N60Ym2ie1Wu1k+8SrceHSP39KiRHXvIBnAAAAAElFTkSuQmCC");
+}
+
+.flag.PG,
+.flag.PNG,
+.flag.pg,
+.flag.png {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAByFBMVEVHcEwDAACtGiynDR2WCRaNBxKUCRYDAwMCAgKiDhwAAAAAAAAAAABnFyKxGCy0GTAAAAAAAAAAAACqESKqEyUAAACqEyQAAAAIAwQDAwMAAAAAAACpESMBAQGwFioAAAC2GjKwFyu5Hja0HjO3HjW1GzO0GjEAAAAAAACvFSkAAAC4HzmoECG4HDavGy62HDS2HDIAAADMDyPKDyLTGDHRFSzQEyrEDBzSFi/GDR7VHDfHDR/OECX80RXCCxvPESe/ChnUGTTNECX90hf8zxXIDiChDBvEECSzGC/ADR8FAwPXHju3GjO8Cxu4ChiPCBKsESSrDyCYChYcAQMKCgqTCxhBQEC0CRbRFi4ODg6wFCnaRCCdChgNAALSFi40NDS5FSvSHCjfXxvbTh7kdBiHBxGenp7XMiTPGzfPJR/6yBX3vBfUORzLFiBaBQ6BDBs3BApMBw9XV1e1DR4rAwhDBg2np6dLS0vY2NjIEym/GjLEFi7IGTPzqRn1shnULCLrixnhahlrBg+2trZ3d3cpKSkcHBz+/v5oaGgXFxf19fXq6upjDRrkax7ZPCTfVyL5xBbwoRrtlRbJyclkZGTBwcHndyGHh4cnzHKLAAAAMXRSTlMAFBP+enp3enp6Wp6CBl6ZZLCrqFc7bI53VvXHiW3H7O13gyWxN2fR/O/vWtHyQ6uubMGBmQAAAsVJREFUOMuVlfdT4kAUx0W88UQFe++jc70sHMqhgpKgEsvpgSii0puCvffe+7V/997uJkpI/MHvTDKZyeez7+3bzCQtjSa3Sd2g+dL4VaOpVzelp8kmvapEoD80fuqD9Aipq9GUfBZr6UWFSmUWfWyo6+vb2IpGjb1GozEa3drc8I7hvKsprKpXFxWpS7IKPw4plUO8ULZ01dOLY6TpxBnd2vR6xwZJhnAWbbruLipkIsTNg0IKUPwbjsFg0Devr3dD1i3mtjZLkgCZ3zCKeMAnR/V6fTPEbMa8ViygidlOyvO4YRJwve+vT+BTBYTmvJLl9fdsROC1tlQBTQyLcGjHzTARgZcRELqi3RDcF3A33zJ3NxGe18kILrS8+bTZ3Z29a4Zl2q8pr7ONpwrn/xBa8vL4zfZ2YJph2ttZ1k94q0RYXbsIu5B9kPA+gBnKs1O7mAchI6XCyqUHb70Lz/52Z4plKc+yQczLCE6Xhw4Ln5Uv4vYTfGr67gHzrbafGZIp0XCzZjL8tm3g793+QBzzrf3PCBxcsxi3WGLQ13RMtx/E/Hex4BL4k1V8P8C8VpvY3WPdusQe5sUCF3Y5CL9w+GcB15ghw4dx7vutiYcA8I/Ca3jtWTkNUwH9unDSz1dHpo+3G4wHgW9JFmCiq5R3/D7y0KdlK+XdwXhiH/iWgeEngVtwHIt2Tb5eG14et++PAS8SHiFP8ryWFgkfC8QxbxIJfI7XzpMN+2IrHg/GW0wgvJIIjhNOdCYTXZgn64PwQyJw0kMPCeubOqSC4wxJM2Pi+Y6RVMEZXjtySY25fspLBXR46pQpgezjzwlnTlkB2urvkBWejz30QgEOMTQwEnqJAFXmD5KEt2+yc/JU5aq8stKCyvfyRm2OghcqCsoVor+Horg6u7JWRFfkq3L5t9U5CvlflKJYlVmanZ9fAMWLBfo/ipZbW8f4aqUAAAAASUVORK5CYII=");
+}
+
+.flag.PY,
+.flag.PRY,
+.flag.py,
+.flag.pry {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACB1BMVEVHcEwAInUAInWvJxy7OiwAHWy+PC1oMEGxLCAAJ3yxLCEAJ3wAJnq5NywAIXMAHnC4NigAH2+wKR6wKR4AJ36yOi0AJ30AIG21LyO1LyMAJHgAJHi6PC22LyS6OCq6NimtJRsDLIS9PTEBLYcALIW8Oi2sIhmrIRe2MyQAHGu4NSgAInX////XLyHbOivWLB8AMqEALpzbPC3cPy/VKh0AOqoALZvZNScAN6faNynYMyUAKpcANKTTKBzYMSMAJpIAKJMAN6gALJnSJxoAKZXi4uIAMJ4AM6LdQzMANaUAMJ/UKRwAPawAKpYAH3IAL4oAIXjZ2dkAG2mtIxjHPC0AJI+8OSvU1NS6NSimHhUAHW2xKB3dQTEAKIQBNqYAL5cAJnwAKIHCw8PPz8/KzMv0xcBUesXOLSC3Ixi1LiGzIRcAIX3W19b4+fu2w+N0j8zILB8ANJPFNigAJ4u4MybFxcXp6emrrKvtpZ/oioPkdm7qk4z++/sGN5nQMya2urftoJn77OvxuLMdS62Tp9YAMJK8LiLb4/LRPS7u8PbYQDLWOSqBmImcrdiGoNbhYVWru+BjfsLjb2easN3wsazfVkpGarvCZl/IyMi8vbzw68SFppF8qYzr57VRb7koUa/10M320c1Caa2fq8Hburf20s+NmbgpQoLGxsbBqqjK3dGZwqdtj3i2mOeBAAAALHRSTlMAY5KjsLD+BVZXcnKeRX5FlChgidsU6hS836i8Kv17otpRaMft8e3GI/Fl4jlCTjIAAALUSURBVDjLlZXXUxpRGEcXBAR7nSTW9IpR0RAVEkBFUekgGiPYUKygEOnC2BXs3ZheTfkjc+9dll1wnTHngQc458c3+7IYBkkt4ZbllLNYrPKcsseZJanYJaRyH4DPwtuseyaTqRvyBlJaeuN6Tlrmw6SukJty32DAMlkck8loXItEagCCaHQt5HSujEFAl5KflsflcvPS8lNuGgyG8XEDxuEY1xSK3t5e5AsETxH10ZBzemVl7DUBkEenmzpGX2EcowL6NVS/HvAc0NDwMmSzTQNstsrK2toOIkicJ3UQACoAlbj/AgQm40U/Wa+AOvTxgPDpdHIe+U3jKCDnY9ck6FQfBt3GBJ9OJ30UOAmfvIbUY/OEHwsEAsW2z7swDDnwBvzbEYqOz8f80PEvEBwGPgf5icx/PwjsHUYp88CP+BeCunPs+FuyDZEP6fj84PynBa/P59/z+wLe4Xn4PQi65DR+17n1ZHCK5gfdLG3gnvUMWcNDVw90nrPf4Y3T9asH4Xfv3/710PzF5CBtIPeAYOM/AnfY+uds4/TqAd8ql0+66R7TZcHUbJfbSveUiCC4urPlGIE4tvbtq2BafuKmG/rxEwTr+yOLSuUzgExWV2extIkti0eOJdRRWd/ZnZtQY1+/KJWELoN6W5tYLG5trapqt3w82nUsbdrt9s0lx4dFkapZOtGDzcwpKfOkDoL29paWaoBQKGwUiVSqZhRo5uI+nBcTfoIOfBH0JVoQzMT9xPm4TvHxAPnonIRrquPz+D1S4Eu0ehSQ51w4npyHfice4OfQHY/Pkz4eIF9cVd2HELZc0Em/Uw2CZVlr37LGPADpRwyYXS6pqhHX8XnkuybUehBoNGazuaCImc7g8XiM9KyM4oJ+LQSFEokU6p0uM7T17GxMY76bceta0osmNzudWfxEq47RA9E/YjOgd4d3+QsqN5uRxcxgs9lFzCxeLv7lP6/wovvIM/pjAAAAAElFTkSuQmCC");
+}
+
+.flag.PE,
+.flag.PER,
+.flag.pe,
+.flag.per {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABL1BMVEVHcEy+GjLJycmbBxGYBxG1FiipESCtDx+yESK3c3nIwcKuDh2uDR2vDh2uDRvBGzPT09PU1NTFxcWvDRzJx8fExMSXBg/ExMSgCRWpFiTU1NTV1dW/Ija9Fy7BwcHCwsLT09PCIDmxDx2vDRzBHDStDRyTBQ+uDBuSBAz////ZDyLXDiDRCxraECTPChjYDiHdFi3WDR7UDB3bEibSCxzfGjPNCRbgGzbbEyjcFSveGTH99fXcFCnhHTm/GjGqCRa2ChiYBxD99vayDR2tDBq7FSveGC+dCBK1ECLU1NTFxcXbITLKGjP99PTBESTgKkCkCBTGFSvCFy68DRywCRXeJTnIDB399vfk5OTw7O3OESS+EyfZ2dnRzs708fHHCBX7+/vVHDbTECXDvLzNHi3pevYXAAAAKXRSTlMAryaasHUUVmIGgIuu2tD2vN+fx4689t92K0lqlKJJapo/nO20nGjtP0P7LbAAAAIuSURBVDjLldS/T9tAGMbx7/1y7DZNCQEVKGpEhVQxMSCVrQv/PBm6VEVdOkCLVAQlwlJpzNlnd/DZuSQG1FsS2Z/31fNe7iIASNam5RtxCbvVdFhd9WZ0r6TsC4jk7s0hQA8eGP8GTqu1vLoqF3Uk3oo9xN754JABm3yVULLzmrxC30Jd9ydVFQgXCjadeBLiE4PN74AFSuRW/AWA47Ku27gBIAfzUvU/76eaQZq2npIaMMHX7WQAxKfKYQBdv/DeLE852U4NORaUw1A0BRZKOrxvZcH5t7meewP9zs1sfeEjPe0tgb9Fz30frhkv8QenvC+AyM8w913LEXh0D8o6zjWQdHofPwKGErPgo2VvQi/qSE2cpDORAYq6vah3KfSqq6SJI/Db2sZXFKtaB16C9j4BVPFMf8lGoWniKArIV3xk2ziSDHTrOzlBfEkGM60IveVhiYt5/AxAusbnOdbyd8mvAyLwSOW8B8vq79bGIas/JCrwbvacR+Nq70/xypIlkrlH03r3yJ1rxwVuYgn/4cFKaL0xHUcjC30MOvDQdTYyQt/c6fYSdg0denQe2Sfas9jefw8uYcT6k36IxtRxkg8ADO6PJx286V/PEO+7O8E0B5iOf+2NqgLRW6iLAQ4u1lLEick0TKrq1V0FwplYySMARlWBIPqWEXPAxUaRcjbdFyfiZ/mjsksxdsW9kEfA9mX793c2fX9uYdRLHtucRL4bv1BKa63UVm+7fvgPZYPj1eofdFQAAAAASUVORK5CYII=");
+}
+
+.flag.PH,
+.flag.PHL,
+.flag.ph,
+.flag.phl {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACDVBMVEVHcEwCRpsCPZMBO5KdDRoCPJSWCBZSJVuWCRYDNo5RJlkBNo6aChebCxgGRJkER5uMBxGRCBSWCRYAM4yZChcDPpWZCxcASJ6kDRwBOZAAMIoBMYkALYiaCxgBPpWNBxKSDxaIBhKSBhgQUaK6dXz////MDyPHDR/DDBzJDiDOECUANqfKDyLFDR4ANaUAOanAChkAOqoAPqwAOKgAPKsAQa4AP60AM6IARLAARrHEDB0AQq8ANKMAMaAASbLCCxr///791R2+CRgAMJ8BSrSfChcATLXS0tKjChmMBxAAPpf++ueaCRX//v395HIAPawAM40AL5wARZv+/O/j4+MALYoALo8AKoYAT7eWCRX94mj95nzV1dWTCRQAOZK9DR/k5OSPCBIAOaGxES7PFyv+9MenCxr//ff96ITY2NgAP6AAJ34AKIIAJHmtCRf++N739fgbW7YASqyov+S6Chm0Cxr920D+76v+8bjPy8ZUJG4AQKdpkdDvs7r0yc7+9tP91yn+7aAeMJODGk04K4LVM0VnHl4nJ4Pm7PfG1O3SIzbeYnDwu8H66uw0bcKTq9vh4eH94FyuIDrf39/94Fj3297h1qPa07Pb18XEESoQMZkVLJBMecXXPk/qnKXhb32RDib94GK1jKwyGlYASaLk4tnj0HLjyk3l5eV4lr3CyNLdwUbLHzLdxV6vOkZvpkz0AAAAJXRSTlMAsHagVo9xBZpWFMBihChmskWuYLxJ3/bk267a7fri8SMrKj/HmqbBZAAAAyFJREFUOMt9lfdX2mAUhgMCguLusHtGUEARRcVBi5UCxlCRIgVqrVURrQVFVNxa66jWWfXYvff4G3u/LwECSN+Tww+c57l5vxs4IQiU9GwJX5jG4/HShPyc49npRIqkSzLhMyOHd7KNSXNbM875TCE/ycuQpJ11OokriP4cDOpvQpr0+mBwamCg+R7OqUy4Y4FEIingC0+fcTiccBE/fwwH76AgHqLX63U6XY2W0VrZOByO1nZbvaJ9kOj/To9sRnkG19VA6urqtFrN1NQDnIqKsgqFohQJB2GSHhnGvJ4dH8G1VVUajeZWZWV5eRniGeGblSbJoelYGw5eFcPR/FIkHH7tI1GeDkfbcHBNZRxf73hI9H8hmaxOJ+N4PIevRsJ9VoCTNGGei+PxMT4mXB+ncS08nouz41m+AYS7t5Ew5+vto2hydTO6mkibCF+P+AYnFmiqL+Cxh91oW68jq+G0weMxf8P5CAnUXphy260e1Iqe5pwV8Hg+Ivjce4Z5D8WcfUuD8eh4Lm9jBJJyGwwGq70X3YEObGmOHI942yAI26TdPgbC/I4bDBqajWiieAJvG/wEgt26A7xhbMEHpWj3Bzv9cfLJY0UUZ+sAv7L83gXCuHUc3cFD4kPTcxvrJZAXu4vL4L2sZvBXK5OL3bW1Xhdh2qYDNJxh3trLHHpmDfElRUVwKZVKWTeKSiWTqVS1cjMS4DFbF8bsHiv6FQ69K2F5FBCUxcUyHMSzAuUOB2BH6DnMLnHwIoyzAubl5g4s+Kg5D97p2554PJG/xggQygd9htaT2sRwzMcEtKGNNynwGK82dhGm5+zfYX8pCU/k44TZNS6fgEd4jvCsJ1UbZjzDx4SZCK/8z3i1utFoIUwHATqOL045Xt2IhIlfPtQnVZt4vrEFhD8Ls8ArVfJOHLnqCDzCI8F0uP+7c9RrhhjZmL3+0ZCaxTnjQ/4WCwgTu0AX5meJpAKBQCrKEh87ca4Fxej1gxjCdGjUb3Z1WSy5ecTE30KxICPhRXMxTwSeC9KB04VyIVeKuKuC1C+oy3nSLLE4PzdfLBYJLjFf/gNooIgkEuzNNAAAAABJRU5ErkJggg==");
+}
+
+.flag.PN,
+.flag.PCN,
+.flag.pn,
+.flag.pcn {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.PL,
+.flag.POL,
+.flag.pl,
+.flag.pol {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABLFBMVEVHcEzY2NiqDSqiCiXS0tLU1NTU1NSpDSrY2Ni4bXikCyakCyXT09OoDSmnTlrR0dHS0tLW1tadCSKZCiKeCiGbCR+fCiKsDyvT09PNzc3U1NTT09OuDy7b29vPz8/U1NTOzs6ZCB7////cEzvUDi7ZETbVDzDeFkDaEjfbEznXEDPYETXWEDLdFD3fGEPTDSzRDSvW1tbQCynY2Nja2trfGkbk5OSsDSrS0tL+/v6cCR/6+PjIyMjv7++2ETOyDy7Nzc3e3t6mCyWfCiHFFj3p6emtCiKyCyaiCyPLDzPBEjaYCB24GDvdLE709PTLDCr74ub409q7CyfDDCriN1vcI0b3yNHwm6vnYHvREDT1vcjrc432w87qgpXmV3T76+7th56+PFvbsru5hI2qtScMAAAAInRSTlMAI+FjWG+CVrAGgp9ichPAnpRFKLivlMKpVEnbrT/a4u3x9aLYLgAAAgFJREFUOMvVlWlzmkAYgNcT4xGvaI4eaUlqErFWRIGVKGg0mhCC95Gzx///D91dEHWjyeRb+zB+WOZ5Xl5mnAEAgsvrj+8FAoFY3B8+cG2BDWztR7HsC/ACupY4jMZ9By7K3t6PfdE08CkgCILYqt4qELIQKspttSWWeBnzIRrz+8Jerzfs8+99ljWNlzWA7CpkF0BITqgT64JsoeEfX28pbB0FIvsKEIUY9HxyfjugzqW3AprS+TuD+jng3/uE/z4Q/r2AdwKodHvj8bjXVeCrwR8gi6zy8HM6LOfz+RPMaPh0P7nrrulg7/GmA+Tf90a5jHUr+I44QuSH08fJXe+Z/Nsh7D5MpkYm0+6AX82y7Z/YPtaPzjCniLORYRgjLpvLZTKZYxTcNJd8Wv+G4Dgum7X9eUD5zvQl3fKP2xc42KzT/g8SvPRXdWsd4s8Dy1+z/Mp45BcuKzhY9V/oC58Etaazzuq72tvM1yE+Ca4pf2V5oi/8ohU4/tptFnqhaAXU+DW64xcvdRzQ4+ltFr4VEP90NrsizHJr9LlvB9zVtSqpkk1DktT+wCzYuj0e+2a/oetArdVUVXV/DEY8DMN4IsHQrrtBkNr9wcA0iW0O+u1GRddTCYDkELNNfWiSiUh6x91BXBAqmK87HuztMps/UMmEJ5gOpVKpUDrIJK2bfwHRagvNr6eXfQAAAABJRU5ErkJggg==");
+}
+
+.flag.PT,
+.flag.PRT,
+.flag.pt,
+.flag.prt {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.PR,
+.flag.PRI,
+.flag.pr,
+.flag.pri {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB7FBMVEVHcEyrAAC/AQG0AADDAwPHAQHFAACvCAjEAAC3AADJAgK8AQGwAADEAQG3AADKAgKxAACvAAC9AAC/AQHEAQG6Bga0CQ/MBAS0AADMAwPMBga6AwOqAADKAgK4AAC/AwOoAADAAADNAQHIAQFEKn6+AADsAAD////wAADyAADuAAAAT/DrAAAAVfEAUvEAX/LpAAAAYvMAXPIAUfEAV/EAWfIAZfPIAADFAADOAADlAALBAAD+/f3iAQS1AADtFRWyAAC5AAD++fnzTk7819cAZ/MAVtcAXtoBW87cAACqAAD6uroAT9XMAAC/AACtAAD7y8v94eHo8P3wLS0AVMu9AADgAADSAADIyMgASdPV1dU6e/SYu/nvCgr0amoAS8cAafQARsbb29vAwMAAQ8P4oKD2ior3rrCvyPpomve/1PvW4/wqdvP4mpoLXfLqCAkETewAT8kAXNTuJSXXAAAbZPJKhPT2d3d0pPfz9/73k5PyGRmIKGv6xMSoGkktRLnWCRlSN5jDEyf7zs71hIT96ur2iorL2/wRZfJVjfVNjfXxXV0lQctvKYASR92SIlv0e3vCdnZjH2H7ysp3ccUTXOHuFhn25uqHr/gdWtqahMHvPj5CTrbWrq68RkbYrKy+Ly+yCgrAs7NgLIib+eq3AAAAJnRSTlMAsHJXV66fBf5it0l4wN2UoJSGi9sWP2a8syoj9nsSUSrt8eLH7esg2G0AAAMYSURBVDjLhZX3U9pQHMDDVA73HtXalWAIEBUkLFFArSJYoUCVUW2dqKAnWvf2HOe2e49/tO/lJScg6ucH7oDPJ3n5vkAwDJJVJa7Jl0oqJdL8mnJ5VRZ2C1niXPBaWl752MWid+kRT3LzhfLqtK72ofSR242VSYAZ6DLSOKlQKEicNvq7EgYQMUx2Sa60SCgTi8UyYbGkxGRy6xkf9nxj62yzvl6RCkkZ/YmAi4FkA0wmk97QRZMGEHQODrZ/X48rMgFPaPED4AIgLi5ob/6yaslYpIKjAPjNzQ0fVj+urKyE79Bh8BsEyAdMRQnCZnM4p9/ZveEMOmmN/HoFA87XaDRHHoLD1udcjti9Vt4Nz9l318zEGxggXwNpPAiZiWTMtj7HjvPK0WdD77mA8xshCx7iDkDwspPzp6Cu0+kOxu8JOjg/hHytVjuxdF8Al7M4qUG6VqWamrwt+PETBuzyo+YgpwNiX5ed/HVeD2Bn16tvAYFG0xBcBNNZ8nhCMdZXq9VbFjjJyOjI2AvIGNgbK0VRXHCElmCe0HK6uqnpeJvbXB4KR8FsBxwne50T17pSqZw5S/Fx6FNMKwjgdGJw+ovIZ3VYrONpOkVzgU4XJMYPPfvqJP30ZPOmTzN/sNke4Gs/h1Sq+eg88JF+vGrBM/hzF3+x1z1w+ofgctWqGHf44PinNfaWTfLp+LfdHWLgLQy0/HCQvhDlb0Dz3tXYyChkxOlgt4UNeJ89fNPC/l03HwqSDh+cNBP3Btf+/DhxDyAY6uf9mfdjDvBLufMUAxcwQP7GNtpXq9ceyXDrwRk4zrd7QcBe7swJTaZMPuy1n8PZoNC2tzYdmaNpdzc23A8Pf7pOpvo4TaHNilshcRpg5AK4nE1ScXNn4d6mwQZK5ZaRxMF/MMRvoalbdSPtY4N/CQPj8/naeNyMKwH+zm/6gbZuEAxdun2+PEmxUCYSiWTCooKKvBYWH+MKJPwWWILTB/Rtvd0PBGXY8OUz6cPatAdNtVxYWJHXiuhFAFtWCr58Kr79AVUnl+UUFggEgoLCHFEd+vA/mohiIVT87/kAAAAASUVORK5CYII=");
+}
+
+.flag.QA,
+.flag.QAT,
+.flag.qa,
+.flag.qat {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABYlBMVEVHcEx2GzdeDyR7HjzX19dZDCJXDCB1GzZsGTFxHTZcDR93HDjU1NRfECXJycnKysrOzs55Gzl9ID5XDSF+ID55HDnNzc3Ly8tyFjFjECfR0dFrFC3Z2dmAIkBjECh8ID7Y2NiAJEHMzMxVDB7Y2NheDyVSDB3a2tqCJEOQQ1zEwsKFSFn///+FFzeMGjuJGTmQHUCDFjWBFjSOGz6AFTOKGTqSIEN+FDGUIUWHGDiEFzZ8FDCNGz16Ey+VI0iYJkuRH0J5Ey7j4+N2EixjECbX19d4Ei10ESpVDB6NGjxnESjU1NRsECh3FzRZDSDa2trLyspzFDBrEit/Hz5/FTJdDiNwEy1yECnQ0NDg4OD69/j59PXx8fF6GzmKHD6fOlpgDiO/fpPv7u79+/vm5ua2aoLm0titXnXRobDt3OLUp7WLI0WDIkK0domIIEKDGzuaMFHIlqWNMk6JUWHjytGvmJ4nS9svAAAALHRSTlMAgui9UEhSaikSCHQLi3dnLNaYOaeU+bX5zo66QPenN+RO1bm5+7Gx40VsdSQ8/YcAAAIkSURBVDjLzdXpd+FQGAbwIEQp2tN9n31NRBlbMaOaahu1BSlhBrHNDHrazsz/Pzc3VyQ31c99vvo9b16vc4Ignm2WV/b3SZL8eORceootUYold9+8OFdTmj5MDj7Y1i3US1PTdeTe2xYJ8j1wxUamL8utliwPu+PxZFKZVEAOVm3rGxY3RVFuy4ZtdbsMIhLFYkaWaJRe9+4bzNfI+Pa2UvkOk0cJMuE8KPRpXZr3bdQAicVikXTgB0wylLzy+8N5gTg3FOhfXaQVDgqRdDoAEgol/cCzSiGjf8BgEVfGh9l4GSvQvZ/tGY/oOPQsGzcXwEqz4RqH41XPlHl8pcWcjTPMiYgVaOl3e7465PDLquOZk2NQyBlXGnZNXB0PfRAvSAPdLuoyOn4c/CJw2BPAlbThKjf4qqkArrSQA28qNEehAK4Vjnw0KnSIXAO70kJejSYSfA0r0MNp0sjRNqpP4QVpdDXT8+lofDSRSp2CQr1hvNLdIxyNT51mObxADwcsOoyBI3/GFYyF5mi+OtzdwLNnF3hBuZKZz/1FBy/Qf6fqz/QIB/6mc4mvpK2u55rXF6RmC0S+f0C8auLA39SUQq/VL+ZKKP/+8LwgiGI5m0poHPlrrnAJCvV6qbT5amvX6/X5Pn22eA73dqwcCn+NwnOdGtCFdw6ivrnlXTG9Qp12ynO4Y31bU1KAsb722F3gM9/yky9f55rd4XDY15yu5/tH8h9PlioLB191WQAAAABJRU5ErkJggg==");
+}
+
+.flag.RE,
+.flag.REU,
+.flag.re,
+.flag.reu {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACkVBMVEVHcExBa9jDAAA3YNMxW9DCAAA4Y9S+AADGAQGKQFPGAAC7AADBAADBAABAaNfEAADEAAAwWtA+adZAadfCAQGzAABBbdnHAADEAAAwW9E6ZtLT0wUzXdI0XtHFAACqAAjZ2QNEbtm3wDhqMnpXd6vU1AJUdrAsVs/T0wI6Y9TAAAArU86bqD7NzQH/AAA4a/81aP86bf80Z/82af9CdP89cP///wA3av8wYv9Edv9Ac/8sXP88b/8zZv8rWv9Hev87bv8oVv8/cv8pWP8lUf8mUv8uX/8vYf8vYP8wY/8tXf87ZtYwWtIjT/8/adchTP8sVtBGeP/KAAAnVP/+AAC+AADCAAAZOr1KfP9Ld9/Z4jCbtIHi6SbG1EbHAAA2ZPk2aPk9a+PNAAD8AAGPq4wfRdactHnO2j74AAJDcOQ0XtMbQNP4+gc/bu1TfdZiisQdQcEoU9zX2ATwBhEyX+DT3jetwmiCopylu3L8/QI2Y+Dy9Axwlbhyla4lT9ouW9/T0wLtAAC8zVbC0lCIpI7d5SxCc/fl6yDJFj00ZO83ZfRKVd3yAADeAACHpZbv8xUjS8noAABpjrhDbddKee5bgsYhR8clTsvMzAJuQ7CqJWSlK26HOJDvAABdRsDWAAAoUflHePh7naxAXexDdfq0xVU7aedchtGpvWSht3Hk5AB8nJ4qU857j2QyVfOCoJhXg92btoq4y2GVr37YEC1ymMJokc5BcvPr7hG7IVNUg+7CG0aNrKNOdcxJb7uLnltKRtGNK4DgCx/eECfgCh9fOrQ0YNlnM6fRBhN4G1xEJ4IeM697mJhsjq2Cm4NAaMlyj5ZGc+lbUMmgGkKTHUerNWW/Hk2zthFbdpA0WMSWq2kL/xhdAAAALnRSTlMAsY5SXWN3sFYG3SigSShxvImilHYUZpnv2xRLn7z6P67x+sdJlbyub+J9nO3GNrkCBwAAA/xJREFUOMuFlfdfE2cAxo+ZCIizzrbaVqtdR3IxZxgnEQUNAoIGm0EkJDEJNEODCYEkGgIBGlZZFSkgIFPArbjt0u6hrdr2r/EddwEptM8P+SGf7/fJ8969n08IAiUxKnbVyoiIiJWrYtdEJS4hFsmSjR+Bzw1rIt7qyOvIAznA5r13t27fkjiP3hD1wYfd3cTGzW//3lH6pHNwMD09vSB5uG7GOlpS9cDvf1BWtv6N11fERkdHRUfHrti2Pn/qocM/TTgcFzxF9xQKBeQLkpOTd8B0Wm4pR6sel+Xg5IPknP7HQj88Qzgu0CDBG6gf8ykpKcOVrXVicZpUqA19ChMqpigjTRtPnCHut1/RWIBy9U5BGM/IEHuKxGlpUqlQmJSUtHOnSEBp3TRtkACho1ShuHPPSdOtQ2gNxDPE4iKVFOKIF0HeRVsmJZwA5twMVNKuQbYejDGZhMJwvYCyauhWu0yy78RnRF6pAs+/WUOrxlg8TVoTQDiqF1C2IO1UAn4/EjAPxtxQWbwYlwoDrqRwPdXuoSeKJYDPYoUC9rTDassVyIMxLjXCIa81Vta3yxCffQoIJWw/OuxlZ6AOPRq1gcUppanSbQVzIJ996nPiQEmYh2vEBlMnHN9SgddQFR6NTQbnQz4VCXN50D4WsIExQz7IM0pNvU+G+CzI78IC4uFp8YuaUdtFIq8d1Gtbgpe0Mjwf8VgAPKpn3xN4kt52gV1JMV0uiOP5mN/z9zQUOr3qq6ZgUWt90FnjNniVIoFyzGa1TvoQjuZjvmvc30389qsJXiVLsMatNrQMVVQYjMYWn92mBEcN12dlp47+Ml5P044XRDe4rSq1fWbOPaAY5mnDsy5frXHimqG29lLttRHNLXinPSN/HSf8DvdltJ+7ZgBvvK0nyefnJfusXZPGcY0q6FSZRiZ+vj9w+NhxYjoPP02unmHOfwFwkOuN+9EauH7XHpDdh6FQVgX7Z+uLe8tJNuX9EM9OTQ3zmUjgeFTf/w05G3MvxsM8FqTsHFDPrWEjl/dc5OoRvxcIOSeF7ByGOVtOzs/1xjl8Zu6xj4HA8cWv1rM/Un52tn8vK+D5jQ3kgtH3XAzzuZ9AAfMLzOHy9ZccD4X8k+i4vXpy8Zi/GsiEeO5BKJyG83vI/863j6BwEAsUE7pN/m8a+gGPBSZ0FzwNc1NfdXV1X5NZL1/47PKG7wawELrb1nxOdwjlKMgh3bnmtj7zvz399z/8+BMxlf+HTqeL40WujuHz+THLIhOWx70JtCNHoVeNflGuNze1NesKCwt5m4ipP9et5b82748mfumytcvjjuAUslnHi4HcO/zF/6Dil8a8H5nA4/ESIlfz4/GXLwHib+5/fITTWQAAAABJRU5ErkJggg==");
+}
+
+.flag.RO,
+.flag.ROU,
+.flag.ro,
+.flag.rou {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABmFBMVEVHcExVH02cZybFoxkCOn8GNXaOBxKqEiQBIGKgCRehDx/NqhYzMmfIohLNrBm+lg0KJFsAHV4EPIDSshvRsRzMrh7Bmw2cDBvBmg7UtB/EoBS/mAyQCBSRCBMAH2EAH2EAIWIAPIKpECKoECEBOoABIWcAIWWmDh6nDh4CO4GnDx+KBBCNBxKLBhK7lQ391Rv90xn80RXGDB78zBLIDR/8yhH91h/90hYAMIQAOYwAPI4ANokALYEANIfJDiHMDyPEDB38zRMAK3/DCxwAMobCCxvOECX8yBEAPo/PESfKDiL8zhQAKn4AP5H8zxTACxrLDiPNDyQAQpONBxEAKHq/Chm9CRgANHsAKXylCxkAOoKgCheTCBQAL3fQEyqaCRUAKnL7zBjzzR0AHmAAN3/00CL6whEAJHAAImgVRYOuDR3RsRoVPXzyyRgUOHX90hipDh+qChjDnA0APYcAJmyrECMAJncTM2/VtRu/lw0ANIbxxhbivxyzDR3gsg7ruhDIESjEEifLog3SqRHrySDGEygPJ1f1wxBeiJrzAAAAL3RSTlMAFAcmsJuwWVb8cJwx82yIc2Bf37yCvILfSTlJk6GLrdr6rtrxx+3G7XmcP/FWZfDYf84AAAKhSURBVDjLddU9b9NAAMbx/52vNrWT0DQVbVVFlKCKAaSKkQGVL8AXYGPrzpfqzsKEmCALQ5EQAlVUqBJ9gQbVMU5j53IMZ/vstnixI//83JPL5SwAoOWvHmBAsDSNzsycmw+5sClAdOPNZwBjYFW3YbwnJl50ppta+PfnjxGty/4TWP/QYQHyeHvj++CSGWOAPTEJ/2oArx2J55D5p+LV8frnEMghB+7N9gHY1oNLZmPW4iI/z3qf/vQeHajj9cPKx278fT4GUxBPewszQOXvvQN6I1DF81c8wBQwyQXAL/A0EZwXD5TeNDTCCAqvIRoBUtk+Nt40OKL47HwXFMelN4B0HBBWO5+B4n9euG+jiSg8cuzqy5oX1u8A2vkEZM2DlF6DB0O0hogRXeuRhMQYg5S2ka7a7ARDAKJoNKJLRkIaKAVxEY+EwJXfGQIZEYwoPQZFVYe6DxhCBjQ8AuU7H0BSSycDfl6WnBTmIBk7nyS18pnN7zZ92d3667x/Jf8EBbLGFQwpy/dBk9me1nfQilq8siNaTh8NJC1Xp+OB8vy6h6jiaFJ8mt6unsr7frF6+n20JoW7Kanz0qYGJPai4qAhBWJ7ch7lvA/hNU7J8exsKrjmG3wuaz4E5XwILbv6HZeN/BBQK7/rfraYatIaB+hQep+JouGhU8VLYJlOXMQT4lusbP0Ws2KSatzVIcRHVLNZ+kGtzTIA5Y9lvUIROD+odumSU3GbDyoBQlqzARdcwJJaGUHNSxoeBSz32kl+bu/fHj9cQuSIW+/cNlP6jVGC2AXyhTfGxGICi8bMIvkCgCWRI/hiMnzBg+TET+D1ltjl7aE3Nc192Fsbi0C+BDgCYAJ8/aYmBrF1lN30gpJzkGKt96MtTmHV5HcO7R/yH6ulLBVG6giXAAAAAElFTkSuQmCC");
+}
+
+.flag.RU,
+.flag.RUS,
+.flag.ru,
+.flag.rus {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABp1BMVEVHcEzW1tbT09OdGhKdGhGTFQ7U1NSiHhXR0dG4eG2dGhLT09OhHBPX19fS0tLW1taYFw+XFg+VFxGkHRPQ0NDR0dHT09PS0tKTExPU1NTY2NjR0dHX19enIRbb29uhHBOqIRjZ2dmqIRjNzc2SFA6cGhH////RJhrTKBsAPKnKHhQAMZ3VKRwANqMAN6UAPqoAQKsAMp8AQqzOIxgAOqfWKx7LIBUAL5vIHBMAOKYARK7MIRfZ2dnQJBkALpnNIhcANaHWLSAALJbW1tYANKDT09MARq+XFg/XMCIBSbGSEw3l5eXFGxKoHxXv7++wJRvc3NyjHBPEIxgAI3TPz8+nGBCeGRHy8/bMIRatIBbJycpTLGeIo9ZJecS8KiAAPJkAKIQAJX1jiMqOMEw5LHIAOpAFQZ4APpT+/v66JBv6+vqjFQ60GxKftN33+Pji4uK9HROsvuF5mdEWSq1nMGJ2MFrIIxnZ4fLp6ek3ZbrJ1u04MX0bM5CaMEWsJCtROXc8aLOIKkFQdL8hPo5zJEwIKo6UKD99KUzJMSuTpcGFlbl2GSQ3IFgM+2QuAAAAJnRSTlMArqB3j7BvVlcGn2K3KEuURWkoYInbvBQUt7Poe9o/28fx7cbx4iQoZ14AAAKRSURBVDjLvdXnUxpBHMfhA2k2sJtRk5gGEiCiCKKCJScIJ4IFRQI2QgwgTQVEE7um/9H57e3ecZwwmclM8h3BGXg+yw5voCh2raoBjVTSJ5FqBprVrY1UnTWqXsBzr6LvmYOmafTAc/X3aBTqVpHuVUv7g0HqicThcOTK/mwqkdAmEqlsyF/OLdMutO4eaZeiWaVSNSu6JN3BYJB2vaNA+1NawaCDp1TIv5hzQBTkRi+Xs9plCBa19cd+IFoom2Bf+FPwYP8loP9t4PibIAf/s2eZo9gWWuwoengWqudDP24hOIlueb1ut3tycnJ0dNRsNg8PH5/Goocnou4kczO7u0d9vwLtFXDww3r9GPo7Pr2JRaOZw0z0KHZ1PGIwGCD4uO/1equOR14/hjYx8QZmMplmZ+dHkB/fXWMD4itcj/kEz4knAfL88dWcPx77aTbgfR0u8Gyw465cpybHfhz5t3tr1Icdsa/FiScB8WJuqnDO46ByfeE3yV2e+GnWkwD87WWh+B6tWIh8+jxfdRt8POvvf/2EYP/y/JvHMzdntVqNRqPVOjSk2z4vQmeo9vfxu+T6AhW/9ngQJ95oHILp2JUuvnwtRCLxeDwSubu+eA2DILDNeZ6TwKlzOp0W2MzM1JTNZhMEtbyTHeGct+OA98LjeQ5+k/P2dQYC/voPOT5+E3PwJMBedBvLw+Ptdt8BBEmBF12eHF/xXIC8pbTKrmSpxYlHQThp1a0mw0toK3hL4XR+tbSJudCnDxgIAgGgj1tkDZ1KpbKzQdbU8nRlA20lnE7n8z47cJ8vn17fYBhG3kaFw8+blI9EPzQdbe2yllcQLWwskDHMS3k7coPKmj9QjaSDT5TL5U2yBmUHfuM3z/hl2XiRo1oAAAAASUVORK5CYII=");
+}
+
+.flag.RW,
+.flag.RWA,
+.flag.rw,
+.flag.rwa {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACB1BMVEVHcEwTQCcNaHMCjrwPNh8JaWYCl8IVRSsDibcBj70TPiUUPyYWRSoVRCsBjLoOdo0ElL8ROyQWRiwBiLgBiLgQOCABjLwQOSEUQCcBjbsGlsAClcAZSi4ZTC8PNh8BgbMAgrQBmcMHir0BkLwAquIApuAApOAAo98AruP5ywD60gD71gD70wD6zAAAqeH6zgD71QAAp+EAq+IVSCoAreMZUjIAsuUVSiwAn90bVjUWSy0eXjsaVDT6zwAdWzkXTS4YUDAURSn5yQAAmNr60QAgYD0RPCMcWDYAndwAsOT5xgAPNyAdWTgAmtsAldkAod4AmcMAkb4AlcEAns3dvAEBnNgAhbcEm9EAhr4AibnPsQEAjbwan8ATQSfRpwAhYT4OMx0Dn9YAgLMspbQipb47bjTVyB/51AI2YSsAmMwEqtoBotwEpNcrobAAgboAe688paG+mQBvrXJLbyiFihg/sqojXTh9iBuyqBMAmMlEqp8Eoc8UoskOpNE0oahfrIMAdquqsjKctEixxUJXeSnmyA3t0Qwxr7UAjcHfwQdnrn3VvxMTnce5lAD2zgJohScfq8Vvgh+EvGr0ygJ+kyQjY0DWtQeYwllpdBgAc6l+rmW6tibkvACLsFaSr07i0RmSlhjrvwKUmhrLtgu9pgskZEHBthIcPx4Acqc/f21Pp5B1q2hJp5c19h/mAAAAJHRSTlMAghRvsAawWlaZSJZywGIeRSim24lmvKHfqSp72u3xxu3xI+LyPAiTAAADSklEQVQ4y3XVZ1MaURgF4FURwTb2mh4VUKwEBUWkKSggthWNWCgKUgyiDthjd9TYo8aW3vMjc+/dwoJ6mOHDznPOvLNfFsNQCjiF3Hw2m83lFqamFcRjDySe8xT8x8axn3dR6UR5mcONS3sRpWM53Gc2G5bG7ujo6J73umv4/FZ+TYXba+2e7eocgMnM4WbFpXI4nNS4rPzM3l5bf68NA9rdWtsKw+fzX4HUgFQUe83js9sD/TC9KP3b47hkGxTma2spT/EikIqK6urqYp7HajWD4LiJZzJJJH1vUCHS0xw2iktKSnggHhP0OljoZnhyPswJ7/EsLiwsSnSo0NUdPR/NeR6vw2732S1WHV2g5tE1TI7O8TrmlgOBOd88biQLDE/OMzjPs+gPrK6sBPx7RmPfW1gg/f0cFBz+m93rq1u/BTdOwALDM14NxXkmq2N5tef66mbJgquJAnlOxDzNTaDw73J15XZ5yayGhc7xCH+Hg7e/YP/zN7Djs6jV7RMfsM5Z5jlR1yAv0Vl8Sz7kiULY38slOh1u3tszQ98+8QsWEHcfbs3MzGwdLjI4mgcxGnE18u2239jAbJF75njto9NZVSUUCp3OzbG18505h4eah95IeN9laBIb8J9vlpWVVVUhT0RTWqoBvePlOfsCbkTesrSzuqtSDU1iKz1lhKe5sBR4jWa/EaRyf39jbGxs40QgUAlUqPC6J8oTXNOIUllZWY4CdbgQ6cO8keKUbyMKDE/MN0bNl6tI3zb0DhQi/H1cQHuqcI8Pc6YnC0Lnbuj0YH0UZGr9IPgl9HVDcIcjf3bxExR+nI4ODw83NzQ3gMjlcoPBoHVNHX0KnZ2oqOuB//xt2iVq0WNB1/f3yIe5QavVSqVSmUzmmlo/Ck5PTwcvplz19XUiWJAZaC8n55GXwYhBFApFEwjyRAFw5jX0POKkrye8smUEE2tpH3ENk9MeFaTIyw1aKURARlxDnUN4pR4V5FIxeSJ6qFSK6pqaFAoFY57c14+MYAqxGDx8lBGTnACTHJORkqccRAFNkaiuHvwAHmzR60f0rERM0fQ4KTE26kOTnpiclJLXQkWP8oSVDV1KwsMfqPTE7JikXBaLlZsUk5BOPPwPYfqgOuWw4pYAAAAASUVORK5CYII=");
+}
+
+.flag.SH,
+.flag.SHN,
+.flag.sh,
+.flag.shn {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.KN,
+.flag.KNA,
+.flag.kn,
+.flag.kna {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.LC,
+.flag.LCA,
+.flag.lc,
+.flag.lca {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACClBMVEVHcExTo81kr9VQncNKm8ZttdhElcNstthcqtFQobxClMJWn8k9j75dq9JPoMpostZnstY7i7s+j74+kL9SpM1So81grtNhrtRSpM1Spc04irxptNZqs9dRochGl8RdrNJfrdNHmcVDlMJmzP9qzv9v0P9jyv9ky/9sz/9TwP9z0v9ZxP9hyf9Qvv9ex/9ozf9y0f9cxv9nzf9Wwv920/9pzv8BAAB61f/8zxRtz/9x0f/8yxFbxf9u0P9gyP9Mu/9Vwf910/981v/8zRNKnMn8yRA5i7141P9bq9JOocxksdY/kcFos9dgrtRXqNBlw+9GmMZTps9Trd1DlMNZuu1/1f9KpdhBnNNvuNluv+RjuOFnu+NFoddlx/drvONVq9ZOqdu86f/u+f9avvRfteBywud2zPTZ8v+W3P/o6erU1NQQDwxNsetQufdZst9ctN9vx/Gg3v+p4/89l8/l9v85OThycnKTeAs3MA+N2f/O7v9aWlqIiIgdHR1Fque7x29zwOVuzfvg7vWnpqSsrKx30PrDoQ/k5eXfwSj5/P7qwBLbyT/dtRD82VecnJzG7P9PQQZcTQZ6xMuQxapfw/erp5R3zv+5p1zhwlD0xBH89+HDzXPI3bjwyyOk4f9jxv/18dHCwsJ2YAhISEenxorIyMjt8vSt4/8+Pj7RrBCL1P3vyCC41LSlw4jTHaVEAAAAI3RSTlMAiGMUVrB2/lYFYyqlcp1FlLFFlK7avN/H7faieyO8n/rb4vTWTqwAAANVSURBVDjLddXlVyJRGAbwUSlb7NwaUFZRUfFKKAYWmIi4Firo2rp257GOrdvdHf/jvvfeKT3H5wMfOL/nPS8zdwaGwQkOVaVGpcjl8pSo1MDI0GDmhgSrEuEzKFCuhNRDnPVOkoT4qPDItGu9IFVEksvBRMrb25UdDwcH94qKamqMe4NTUx1d9c4GyJ2E+NsB4YEqlSowPCA2rtHl6u11MO3tW4OeioqiIuxrjEZjeXlmZqZhe6qpq9PZUIvTSNI72erNaIHClod6yo2YZxoMFUaLVqs1b3u9TSReNp9lM9JpQeLpeIPB8n4YfEmJWafTaTSa3Nx87ElBuSV6gVu0Kz7MzYQXgmfx/HQ9LRAvbgNcazicI/ya17dUMsoOqcfjYRft8OiBR+Cit0GhvoN6bh08XltiPl87m8GcjKfrY5/TRwrEixy8xT+/uiIdz3lakHgtd2mWR9D6d8qv+Dxc6KGe34b8Vt8ZQt+WJTxdb8M+r68ZClc8vTRzXxBa8JFt+PHEF0PB2cN5yY3yjIwhND9HudRnkYLouRulmdlFkBEDzwWf1QaFLvB4HTKeXsmhVVzYmZaMpz6rzc00dHFePAeWwzFcWD1PF8ZzvoAUuHX4Y5abP/0JocsltO5nCSe+mHhS6OS9cF9XFtDY0T5Cox6e876MFERP76vOv44WTaYLtPaD44K/311HCtRzx4ZdHkUXdpPpF/o5lCOOJ54rgBdPMZvhW0MnJsjl2AgrGY89LtR2Ui+eA/88LGSy20/Q7jDmEp9NCmad+JCA9xws2YFDPi/4ioV1sKeFAamHKz+zs0+43Xq05Oc49dnZ2Q+qoXDF621DLzhvtS6OPr/qcaFxgPP0FOs1r3lurXr1bBpz0ZeSQqHkIdTbhk95D42XQwXC+tiTwiPpQ2jLeWsVOOTjhzKppwXxnQDe9ub4ncCrqk5/E857WiBe/7S/Fae/P6u46fGTr5vHf0jjL8+JL52tZlyTrLd10uWAVHJxtLWMt04UQO/f5qbUb8xWQwFe4Q5HXGyAIkQmk4UoAiJu3W2GuJsr2/rGxycmiJ4Y3+gGnayOZlyupAhZ0LU/mrRoRcyte263u46mGidZHYJdouzmP6jQ6BBFTJharQ6LUchC6Zf/Af09dsr8ZdqtAAAAAElFTkSuQmCC");
+}
+
+.flag.PM,
+.flag.SPM,
+.flag.pm,
+.flag.spm {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.VC,
+.flag.VCT,
+.flag.vc,
+.flag.vct {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.WS,
+.flag.WSM,
+.flag.ws,
+.flag.wsm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABWVBMVEVHcEx1HD6WCBV2FT+nESKXCRelDx+iDx2RCBMCOX6WDRqpECKoDyGsFSgGPoGeDx6SCBQENXqmDh6mDh0EOX6ZCxcBNnsDOHyRCBMCOH2cCxqvFSmlDR2nDh6KBBCNBxIBMXbLDyLJDiHOECXQEijFDB3NECTMECTDDBzQEyrHDR/IDiDSFi/RFSzPEScANokAO40AM4cAOIsAOYwAMIQBQJEBPo/AChrMDyMBNYieChgBLoHCCxulCxq+CRiqDyG/ChkAQ5QAPIWvDR0ANXytEiWiCxkAOH+VCRUDMoWqChmaChe6FCm2ECOoDR2PCBLEEym9DSCMBxAAMniSCBOwFCoBL3UFLH4/aKcxXKAzKW0AN4IkUpebBxISSpZsibrJFCu1Chm3xd26ChmTG0AmKnLI0uSRp8zn6/NRdK1/H08aLnnCGTYUKnFZIFlvJlo7LnEZRoSFn8ckwVccAAAAIXRSTlMAFGMHW3aIVbOsJrOdcjFJlJTax2bf6lChe5/b7e0/8bysnl00AAACs0lEQVQ4y3XVWVPiQBQF4Igscd+32YFSxBlNiBgnYESSSAQhKgoCIiC4a832/x+m+3ank6CcKnj6zuWSleMgk0srMyM4MyvzS5PD3IAMh+bQ99D8yKJpmobR/GsY55DFbzMTU6N9eig0/tlSuckRzTQ1TZTlVrfbkkVJuLoyzqvVCsrHsfHghN8f8vsngmOzGcvSMyqnaZqczWZ3UB7+ybIoitvb25KkdE6LxUrlECcD0UtnkTUdF7LEo59oiWILuCQoPyCbnc4ppBPdikbXYnqOMzXimzIe33yoYy6wwuZmHGULBXlWQL7WreNt5Mc25oKSd/E4cDQ/9pMU8D7tRxlvLz3VMVcSeeD9PgwF2L9Wk9H2OwLhiUTezZkP6ynO0LCHgyNJD2g+5lCIxz3rYw+FK8cLT00Yn8gnk3HPeOojUCAecUlgPJm2ue3D2H8vQIGOF2rNhO1xwc2ph4LJ/P19nfJkOm1ztg72G4Vj7tykXlHuu5Qjf8nGuz0UDOQFODjtdoJyKHg5eFoAn3+5azQady+Xachl9D2/igpVQ1L+/L59ZdfBaeX2+VfjLubizK+qR1y18fzquczQJwbDXTyCOfK4cFukl6X7RJHpcCzZeOzXUaFSdLyXO9swzwoe7+V0PPF7qHBYdHn7RFHujKd+L3eBC+DfnKi+8eBJwfZv/qvNHb9LCi7vXf6N302dcIclj3+f2/4AFTIl6gdvQzj2tOC5CQeNB7+fKqOC56Z6jzt+/xoK7JngOfKEs/HgSQF8eOOMZH3Vyz0eF6xSNHKmWzmcFEmuoN/0dh0OHule4bqMChldVdXZsWDAh57rvkDwA79wDEmpuNg7wLp3U8hdn5TL/BfOsj6Nh4b63h2jU4FpfuEIcoFygvOV92E3Fxr8ghqd8gWml3meX54OhOgL6T/ZvjknHf6wKQAAAABJRU5ErkJggg==");
+}
+
+.flag.SM,
+.flag.SMR,
+.flag.sm,
+.flag.smr {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.ST,
+.flag.STP,
+.flag.st,
+.flag.stp {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.SA,
+.flag.SAU,
+.flag.sa,
+.flag.sau {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABU1BMVEVHcEwAPxsAVysCZzoDVi8AYjUCcEMBUykBXTIASDMARiADYTMEVy0AUCYBVy8AUygAVykARB4CbD4AQx4AVyoEWDIAVikBZDcBZTgAQB0KTywBYzYAc0YBckUAPRkARyAAaDIAbDUAZjAAYCwAbjcAWCgAXisAcDkAXCoAUyUAekQAWikAazQAViYAaTMAdD0AcjsAYi4AYy4AZC8AfkkAZTAAgEsAUSQAdj8AfEcAeEIAQRwAdT4ATSMAd0EASSEAbT8AczwAeUMAaToAckQAekYAZTcAPBkAWy0Ag04ARR6hyLQAXzF+tJg5jWKdxbAxh1toqIdvrY7F3dFbo3/R5NpElWwAYjRNl3Cly7dWnHiGuJ0QbTsPdEGw0cCVwKkNfEng7eepzrtMnHUmfU+Yxa53r5G21cWLvKNjoH8afUyQwakchlW82MmQvqbz+PWQuqO9+Li1AAAAIHRSTlMAsIhjKJ+wWHQCY1QUwknb+KCUlK4/7bzfewf6+vHx4qhaxhUAAANASURBVDjLddVnU+JQFAbgoDQLOvayjRaBRRDLCqj0psQ0Uui92vf/f9rbAom7e8bRwXneO6/HC6EoOCvmNfu2xWq1WrbtyxvmY+o/c2xzgO/ry9Zv+XQafIHJpXNgDg+27RvmFaNeX7Ps0yFqz/o1n88X4ldo4oVsEiRzRThfDg8sS/Zl25pt2b60u3lP00EQAPjq4eHh+voa+ni88BNM9iZ55svlitVHNPdoPJfOsD9A5QsPn302e3OTTMZisbuziM/ndZ2Gw6cuMOBnkASQ/4vfnZ1lIhGQ8Xm92DuDURTQjsdtdDxDuOadNAoQT4438E/eDQLp/KLOa6/X+wcH/hR7EtDqZF/lQX0svMpqTO3dIa4dT/yvUAIE5j4pTpUXZVhhVUnsSrzMPbe9bXS85i9xANWB7Tv1vtIZyqo0bohsXVE7A1+dfx9VwsC7ob8IwAD2YDmxXmUwqbwIqjybNZmGVBkzkdoHX+mg46E/B4FcGnu4nOFwzPeVgcwzQk0R6+qMrTHd+ohxwzrQewIpEMAeLqfHssOxOHweNwd9iZsxzSeOe+9zjFvznigMEA92KTJMXeIqijoV3z76TE2qiZX3yTsP6yBPAtiD1csc88Kxk+lbg3njBLbdrU1qzSdFgvWRPwGBYpr4xT14brt8siALjYHY7CrcaArrIO+HgRzx+nuAVu9qtEZN9ynLNnEd4P2JMggkYf3MZ47/VaC9s3Ux90EU+Ow17sTLIXWQh4FqLkb8/Pg5R8shxyNPp2AAesM1m3O0HL2nU7dUtah5xBuq0EZa32buQyDwWMxEdMe3xVm90+EntVH4grQhHHoc0Dy5xfDetIQGyzP87+7TqKX3oTIIVOd+scpLXL71NJX6eh/AAcOb0Fje3xL8uD7ygXKJuq8a3oSYL/7YkyA+HvsoDDwuPhN0bQhHbXAd6HFA53Wbx3xxPPLRWxwA3n15DsnJiYeMxg0+AQMel/PcT6PX4DdwotFAiA4aOPKJ1G2pRNHBIHi9ubtkX7XZbKv2pS3HZiKFBiYDmANcBrpk2qNoet+ytm58dKyYN+w7jh+pMppbNKXSd9MqdA7b/x9Q5o3Vo50tk8m0tXNkIw+kPz5pS2dev3VqAAAAAElFTkSuQmCC");
+}
+
+.flag.SN,
+.flag.SEN,
+.flag.sn,
+.flag.sen {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB7FBMVEVHcEzJvTnIvD4KZi0AYy/KvjgHgUmUhDe1GR+hDBEAZy+8HCEAYSsAaDAHeUABczwHh1K5GB4DhU7Rx0SmExPBtSugDA/BtSvUx0nTyUe8sCoDgUq5rCejDRKkDRG5HSO7GiEAZy/Qx0IBh1G8HSbPwD8BhE0DaC+5GSADhU4AaTEDhEy4Fxy3FhydCg+aCAzTyUfBsyzKxkmaDBIEgUqgDRG9sSj97TriGSDeFRzhFx8AhT797j7dFBoAh0DbEhjaERcAi0X+8En+8EffFR3970DkGyTgFx4AkU0AjkkAkk8Aj0v+8UvjGiIAjEcAgz0AlFH97DcAiEL+8EX+8EP97jz+8U0AmVcAlVPcEhkAllTkHSb+8VD97DUAiUMAfjmmDhIAf0ehDBDCtSsAfEIAhk4Ag0oAbTP17U+7EBb75jn07UYAdz0AgTu/FBq1DhIVjT/z60AVk0axEhfEFBqsDxT75DTUykX86D8Ai1ADaC/QxkK2FBrXEBX96UXy6TwUiDoAYywWmE0AdTafxz8AcjkAeDi6Fx3XHSW8GiHm5UBosD/cGyTr5krp1zDc4UO61EKrzUDn3EnLvi3e00fz5UssmEEgkj9SpTzr3zXQFBrVxy4Wm1Dczi9KpUJzsz2EuTwTfjUSg0a+rCdiOuxYAAAAN3RSTlMASRpzWJqbBVawlGBguhSCNaVwvBS89t8maoGuJpOhdIva265zhvFR2rTtV+3GaD/ib34rsnll53igkwAAAvRJREFUOMt11c2LHEUcxvFvvUx6wk4vDdvj7Iw7oyDJRjQkRHJciR7Fw4IEFAQvQv4tD0IEL0EiEsWDSC55OSTmkkBcnSQzLr1r7J6XnpftGg9VPdM90To03fSnnvpVNV2lAPD8t7JMbe+KqbrAaHue8d/Nq7wtYFM3siswB+CDxyfArWdJ+Ffj5bSkw+Hp1/cRwdaHQPhgEwlmcmmjOqlInoGG63Hy5qKfgQpF3PgC+mzqq4QHCxJfgmFC694QgNr5DHlVw6aNN/SPzyYHu2jC3wGU9bN8/L9/gTGMP0lPALT6Ee+hF+2i7XsFZsIMegDMgDEw5vCpBREeXgSpLvs1nrcID4gAtABUXo5Z4+IVj7bexhsU6zyqF7ycVTRHuTcsfc4DC5feBz3XS6/A/MO4xFlxpG9LKno3Qs6F5QWPRFivFMZQQVn/0TkQwi6BLcd6JDDDGBtfARCCIEjPIICYiCgCJD6QIbVihkE5PgABAbSOBcSrcqwfzT3tVnPpIXh/sTBffdY4jAGkKXhAM1/6AbQhwHjfwNf7zdrsJ1bx1iPdh67kHsTt4adZxo0fPG/da5DOY/3QIODOFAj3n3ybponvynEeXZ3kvs0QOAUxkhAWd6GJi8f5SIPJyx9yRIcY8C6HXndGE8hU0dtrwdv2rtf6ji8nTfeYMXJyB7T1jrvd4tFd4PsL3Q7desn3AjS84lOgCQ86XWC0UfCcSnXzIPcZEFrfBOja7jlnp2fnUC35YOF8t7AjLb0ADW2GtpwQOpR5q6ZPSl5qWPkOZd9axdNzv6xe92ucneclj+6+8XDFE7ZKvGbvCx7NKj4pzLO1xq3fS9Bk1ie7vAZ0Ju/dL/FeIX7PjXCp+Se+b7f7x4d8TlXGG0/7bqxlPHupGCCuwRZcP8qmpydQTRtRID8G4GJVxvDyVxZij/aTUe2Ym4Oz4trWjT/a/aR80NRfXHxk+135mXyzuDk40ztC+Kma/t8BVX9x+bkSEdQX27+9cx+AfwEz+1cQENh52AAAAABJRU5ErkJggg==");
+}
+
+.flag.RS,
+.flag.SRB,
+.flag.rs,
+.flag.srb {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.SC,
+.flag.SYC,
+.flag.sc,
+.flag.syc {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.SL,
+.flag.SLE,
+.flag.sl,
+.flag.sle {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB+FBMVEVHcEwVa1oAS48hmTkelTQZdWUAeV0BUpYknj4AQ4YgmjkAUpUsokQqokYASI0AR4oAU5celzYclzMAVZkAVJgjnDsspkcjnTwknD4Wam0qo0UpokQro0UARIYARYQARYoclDIAV5simzoAUJQvqUwXki0vp0otpkkZki4AWp4BW58ro0YAQYUAUJIATI4ATI7///8etjsuwE0huD4nu0UAYbsAbMIAccYlu0MAaMAAZr4pvEcwwVAsv0oAXrgctDgAY7wAd8kAX7kAbcMAcMUAZb0kuUEAW7YdtDkqvUgAWbUjuUAAb8Qcsjczw1MbsTUAasEqpEUAQIQmoUAAXLctrkoAc8cAV7IAdMgAUpcAVpwASIwdmDUAZ68AYaYAXKHW1tYARIn6/P3T09MXly0AS5jA68lUodkfrTstp0kjsT8hnToarzQATpKwz+uw5boalTHj4+Pi4uIWjisAR5IUiSjCwsLZ2dkAV6uC1pKL2puaxedtzn8AZbYyuk4ZmzAAYrMmqkIXky3FxcWTvuN1sd/b6/YkfcjN79RLx2UAUKJFk9KGvOS61+6c4KpvqdpmzXl304no9+tin9Xr8/ry+vQos0UtuEtfsG6i360KbsJRk9Cg36xazHIepTgRf8y21b1Cjb+ftscTab2NqMEpYZaovKvHx8fC7yzMAAAAMHRSTlMAB5JyWBQCVo+w3XJFKH5FYGCentu8Zu9UNXuirmYqoa6t+ryuxrTx7e3HsvEjvOI6dUW8AAACmUlEQVQ4y83TTWsTQQDG8f9sJsmum900aUxqMQmVqlhaKfUieJGi9OjBkx58r+A38iRS8AMoQkFBoScRWjx4qm01QcmLaTXZJts0L+th87KJBqwn5zj7m2efYWYEAIGgruyNi3DZ2Y02a2Lf4c9D+KYE+CNjYsadUDofVnWroYn64YD2jx/Gb5ZlaOIqlFjMvTxGDZZx+A4TAKt5vVVrmBYYFf9E8WGULIhHlM59gD2gBqBDCCr1ex8TyXXKbngMCJN+/vPyvqRUd72HUyH4rA4ScxracMCXAiRsQAI9r+PGA/XOpy0/eaANJGzMzmzfD3IT/Hm8/ltE5mXfu228vBfvegVkN78XP8zdeDrerTTof+c9nzxAdr03vs+HPClLKtTg5LWt4xkbQEuXFKO6PswxFUjSjk+L6+fVsrm5MXhnlq2cHq+/qA3ER9vWmey8eKyubYy4agvztdzcNr5YqSXS67NPgKWQuBN5y9+PpZDCEYeCONoC6TsSLzj/UOm/W+A+oIXpfKqeBUgFf0TrWyOPclGI++FTudLFFRJtyIABqq1dkrKqDa97sHl6bK0pVpynkIB2l2NjwSQU7u5KteLYFhiaHiq9bhKPNMUt5yskul7FBotJoAAI0KFBFQOacaxUUwL9OqpNN97l6DSo0vWdTbve8LSh0Ode76MsPX5EGzBo4nqQve2q9mAbHU98xxvhXSkcMmC4dYbKd+L73v1DBgy16LuCD2jNvauO4Bjdk3aWMsJkGxyAWEzgP6G+sV3u9ReKO4jbDqLBKyOj+W3QGj7/WPkGACUxv8dnq2Vg+Yyp6KfwDqwGxG3eF/fbjd4FCBxC4Gy2ac+K2d4cUGZzO5ZvwExw5BsVqXDSVNKapqUVM5gKAPALrecdoE/m7C0AAAAASUVORK5CYII=");
+}
+
+.flag.SG,
+.flag.SGP,
+.flag.sg,
+.flag.sgp {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABd1BMVEVHcEzMOEjCwsK4HCfIyMi7u7vDw8O1dnbEJzXCJjTHMD/HLTy9vb3EKDbGxsbGxsbJN0TKNUTFLjy7u7vAwMDKN0a/v7/KNELDKDbHLjyzs7PHx8fGM0DExMTCwsK7u7vBJTLBJDHLy8vNzc3MzMy2trbNOUn////tJjbuLT7uKTntJzfvL0DvMUHsJTTrJDLuLDzwN0juKzvvM0PvNkfvNUXwPE3rIjD//v7wOUrxQFG+vr7CwsLJMUDPz8/DIzHxQ1PILDvg4ODV1dXX19fNOUnYOkq4GybLNUTMzMy+HyvJycnhKzvT09P0eILWM0Py8vLwSVfIHSnzZ3Th4eHLIC3+8/T4+Pj6w8jxXGryYW3xUV797O3n5+f1g432j5jFxcX4rLL++vru7u7cMkH3nKP9/PzyV2b6ys784OLSLz7oMkLOIjDzbXnoOEj2oKj82t384+XnKDj5ub/c3Nz4trzjPU7sMEDXW2bQs7XaJTS5UlnVv8B3TZDhAAAAJ3RSTlMAsGP7Vvx2Bfxbd6CwwLfdRWlUKI4oTZSJ3xSQFPygqK7anMftP/F0df6HAAACfElEQVQ4y92VV1MaURhAFwZQmr1GE9OvgkQNu1fugrAWiGBYXVF6EYQFRCDW1B+fbwtIUWd4yEvOAzMw53z32wszUJTE0PSEadas0WjMs6bxsekh6gmGjFZ4XRzXfPTv+/eBLZV562x/tzhhHg6FqDGN3+8PBO4Tzbssh0mj0SgWDy+2Zeat5jmT0ThhNJrmXr/x+UKnvhAF9j3LcnmxUsZYIIRsADRdqxWLkA1L+BQuf13bLyEIcBzL3qA4xjhS4RWdZhjGCTi+174qXNtsNrtdCViWzaE0hzFJVRJdusOxurq6srKyvv5Z8ZdPlYBLoxzGPKyDNyLMg+6Q9Q6/FfBILJNctAzjU9Vch66Ob/ufTr9Q+wEWN2EjkohgWIdkI1266tsVXwkwzqMoBw9L1OX79La/pgYlJMLT4ixmCO9wduo9/toxBIdwnQjlaToh1p3lAv+obgcdfCnYOsSExJFYZ7iU4OQigno1rW3a4yV/Uw7gNtk4KpRw1813jW/5aiB9WZF8JZ6lO5+1Q2/7SgB+63IelrfZusarvhrIPhESyWQyJdBdyz+Ml/3N49/U9gWN66V4WnQhCZcY/RZvZpNcz3jZF3J/PNT2j7so6ge6mxKfFJhlxadTfL7qQnse6ucJegaXWEhfVa/SBVF5D0H42aCX3X8fuAcM9tyDn+DdGSQIQ3AyaLDz3wRi7Ohc4iim/mwfx6uXgljmNhwMBg9kzs4OvHs7mfNYfydmvHoIwrsgj44sGLQ6nU5rmHo1MvryTELu5BNdcH7mNuh265c+UF7v+7e6Fz1/NJMzhgXoPDJuFb1FK3nvdE//QU3OSCdaLJalKcPMpPLhX54tQQ0d5uQSAAAAAElFTkSuQmCC");
+}
+
+.flag.SK,
+.flag.SVK,
+.flag.sk,
+.flag.svk {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.SI,
+.flag.SVN,
+.flag.si,
+.flag.svn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB4FBMVEVHcEzU1NTT09PZ2dnR0dHDAADU1NTW1ta2V1fGAQHCAAC7AADDAAC7AADT09PS0tLR0dHGAADW1ta+AADHAQHX19fX19ezAADU1NTGxsbEAADR0dHEAADEAAC6AAC+AADT09PMAADNAQHV1dXOzs7b29u9AAC8AADDAAD/////AAAAVuQAXuYAXeYAZegAYOYAWOQAUeIAWuUAYucAUOEAaOgAVOMBa+kATN/X19cATuAAW+UAU+LfAAC+AADS0tLa2trBAAD9/f4AQr3KAADv7+/NAADVAADyAQT6+fn4AADc3Nzk5OTQAADOzs7GAADJycr8AAGqHkwAO6pgn+7m5ub09PQAXMIAV8DTAADnAACqyfbc6vtEUbJpMoQAYM/uAACJsvPL3/oAP64SbunB2PkeedJJN55hMolGOqGOI2M5hezh4eEAXc4sUMAAW8zp6enYAAAEYdSArvGewfXv9f30+P4IYOD/8fGLufREQKaIKWp5MXjVDCG1GkIdUL5JherjCBaZHlcLRtIVW9QAP7U1g9ShxPVSk+4aX9KAV5x4qe+GaKoIb+IuXcZZXbQ/Wby6Fz1onO5XQJgWY+WUr881QJCgGjxNM5eGodCUDCRFKXtpa7pZZ74rfsVtZbIoc2qWAAAAKXRSTlMAgqCyV49v/gRWY/6fsWLdwN2URXMcRBSuDbxN/K0qe/rtxyrtKyPxb/P7qNYAAAKWSURBVDjL5ZVZU9pQGEADsgvuWq1Vu7dxCVSMcUW8agTUWCy1la1KAR1Fq6Ms7mvdt9p9/6u994YIyITa554JmQlzzne/yUsIAqF6IJMUSEuzSqUFkpzye2WECCpZHrwXK7KUzRilQG5egaKkWJVql5VL73McUZIFzdBsz7AVABIAq3W4ZzbUp+yA3M7Nk0oUOTKZLEchKc3lOE7ZwRFmc38PIJPADwB2z0PmDh6Ogz9laNZK9sGgnxQHoBABz8d/9D1NDgBIL648w6BZCHyO3aAjQGYmEYDYwUkweDITyxyYEyfETplfQdpjvXYAThk/Q3vAtQPy3O/YZ87IvwZKFER8C0eePbd78dxxtOjyhcX88Nd1GLgXpxiGoX/DbcBPiqKMRqN/yjHv8kVSbffChqHrNfFxl0HQ9A93IBA4Q7pRr9fX1sLLP7V/MTa24Nobm7/Y+NDW9qQBBi9eYZ2mPfMu15FH0CF1da2trfX19QaDoaamsRH5QoB8KnocCR/rka7HdrJeA3Xkt/AB9inq4PBwJ67z09P9lq5nMIj7lDEaFdEvfRxM8zp1uf0VHY+P+00weDkt+CI6Hh/3+SB1fEK/3AaN530cvBH81DeZtE3Cb3rLB0b9zPuV5SHE8srE0kxb0jbCeOxvf/8Ggx3vmqU6Bdvmu0nv0npD0njob3/Z2uztJD59tleLYFld21r2ToyPj094J4dWkddrIgbaq/+Bkf87sNssowiLzZ4pGMhGgc3ZPsJ2YwYh3QNz7c5RW7ptd7LZMBjpZVk2v0JepFGr1ZoiufZm/i3UDbKo40+E5zvnWJMpW1dIsOwdrfrGlQ/Nw8LHcth1xjFhHuk0yLurVol+oCoLNVVybYVOp5VXqSt57w/wZlwJNMiNNAAAAABJRU5ErkJggg==");
+}
+
+.flag.SB,
+.flag.SLB,
+.flag.sb,
+.flag.slb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB1FBMVEVHcEwCUaATPB4NRmUROBwCXKgTOyBLaVAWQCIUPCACU6IROB0ROh0SOB0RNR0EV6YVQCIBTJ4BVaQET58OMRkDSpsBUJ8GWqgBUaEEW6i7oBfKpxIATJ4PMhgHUKAASJoBXaoARZjLpxIhU4MxUyTKqBIcUy0AVLz80RUfVzAAVr0cUSwAWL4AXMAAYMIXSCYeVi8aTioeVS8aTSkXRyUAXcEAVbwbUCsWRSQAWr8YSicZTCgAZcQBY8MBZ8UVQyIbTyoROR0AU7sVQSMUPyAUQiEQNhsTPB8ARpoBXaoAV6YAS50AX7IAV60AUqMEVrb+///3zhkOMBcPMhkAT6Cpx+kRYsIAUKnRuBsAUbLnxR1noNpxhSb1zBUkWzA/aizOrBIASqVYk9V2qd43f85Ii9K/sj7avyyTu+XuyR3U5PUrZ58Fa8dBcpC6qRsyYi2AjSQmdsoRW7Ccv+aBrd4VbMYaYakAYLvC1+90jG9rh3WfolKKmGCXmSGAkmdMeIlMcCrh6/enoh+dnSBvotb2+fwyeLpbf4BeeihvpNzfwBhTdCkbU4w2WSSymhObmyHf6fatqElYfoETZ63l7finpk31+PwnTyWtmSZccCJUcmw6YHGBga7+AAAAJnRSTlMAdEgUr7CCBVptkqC6lChF3d2hVKhZvCqCZu1XYfEjYPGuxpycxxCCQ+0AAANhSURBVDjLdZXnV9pgGMWDAta9jla7J00ohFpRAYnIKBjKSEXQiihFcI/WbYdWjx3aavf+Z/s875uE4fF+yAfO717ue0kCw6Aqzjdrqpp0Ol1TVVt7/fkK5gxVXLwB1/J23TVRDIrBoLgRDAYjoMbWKk39lRJfefPNC+kTpl4nfhNDoU3B6XRmkwK/uRkKh4ORIVRja1Ob5lJLc8tVTdX1xoGPv9PpY0YUQwcLC32oZHzrcF3gUV32aDQ8HHlINED1cSSV+mNlxNDC3EwScKcz91Nak/kuM8hutxuj0cdUnvlRlh3rBMPbOWluAXmn8P3NehFuN5lMRqOxu/uOx7M4CzzXa4NvmJTilH82mcmV4IS/A/z2IzY1xnEOYkjOAJ0VhD6eF/hTOMZHf7Bs6j3H3SOGHMmP58sX4DR+cZplRz8Af9/hZYIh4IXczJutLK/GqzjGe54/YtmRCeQNFmLA+nPSpBpfgAM/P8Wy7NI44akBeIGP7x12FU0j49GXEJ96CjjyBisYwsgLk3zGbOYTBWclbb5Ce7kO8netPjDgOjyP8c8y+WnUNqlXch3ge2zEkJRPm12LZxPqNJ6NF6wcr/L9YIiE+a1khtQ/kKRVk1J+Bcuzo0/HlfrId7gCTORtXNpbJ+MYP0sJ5azbsxj/aZlT6hO+0wuG8Iy0SsdMxNdytM27UcSXSBs5HnliGAonV+N0y4SpO4H44hQp/57ieb6zs5cYMuaEveA22/iC+NHYeB5XeYfPzQwNm+Xfit5mO+pZuQJc5qkBeSV+d5osv8yVxMu8BQwPhxUepiTL70+U4OS4hLcE/GBQ6+ziNiOvi3GlDuGt1EDrRHcAny06K43P8xYbMVB+hdzFy/nlaXw/rUPzrcTwhNSfh9PiQ3uqDcEV3ub2MwNPlHcCti/BsY1SB3mXOwYG4N/B+PvjRW161DYybwOeGuChpXWK4ilO4vP8Az8xbCvvhNLyarzCUwPkH01wBgNCHR39PQXllXiF9/kHmYG/bCp97KCfealsNqvDoeIkHnmf2z84yPxLp09+WRq0+spzqEp9dU2D1xcA+XwuF6K4zgNfwO2PxWLaMmYpfeFWWTn5e8lf6soqa2saAm4iP1EsdrmmErnbF8/+gwKfvrZaq9VW1+rP1VHuP15xdld8pnO2AAAAAElFTkSuQmCC");
+}
+
+.flag.SO,
+.flag.SOM,
+.flag.so,
+.flag.som {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABOFBMVEVHcEwuZalPhsE5bq03brA+d7c9drgiU5xRiMMwXqhKgb4jVJxFfrw0bak8dLYoXqMya68tY6lLg70lWJ8nW6EmWZ81bbEkV55BerksYqg2b7M0bbJGfrwpXaRAid1Ij99Ci942fNg6gNlLkuA4ftg9hNtJkOBFjd9EjN40edb///8zd9VRluJNk+E/h9wxddRTl+I7gto+htxVmeNPlOE8g9pXmuMwc9MtcNImWqI7dbc8g9s7gdo+hdxaneQtZas2cbUvctMwaK5BerpNhcEqYKczcLtJgb8qZLROlOFFfr0rbdBDhtI4esxCgMZIhckzbLEmXa7j7fpOistTjs07esMtabj2+v4vbsafwu1bmuJ5rOdlnuM2dL5UldrJ3fWNuOptpOXr8vtMjtU4fNFGituyz/GpyvD5/DIYAAAAHnRSTlMAVq4oclaf/v0Fh7BjFMJjibdFRaCU2nvb2+3t4uJ6wm38AAACsUlEQVQ4y3XV6VbiQBAF4CCrgODurMiIEcxAjBIGNyCKguJCBGQXcGHm/d9gqqsXGtQ6B35wvlvnpklAUcjMO91+/xyMx+8PLjvnlU9m3h2C94XgnO+CTBmnAvMj5HG9yy24Pd9sW1me8/l89cZgYKTTacMYDF5f69VypVgpFotfQh6/K+h2u4OuRc+6Zdkly1Z8vsagm8//gQFvGMlk0jTNVOz1tnpfKR6LsY4f7zL6EwQa+Tz6NPPAzetUKhWD2dkc39LRI9FIRD94OqcB7ul6wXd2NmHi8UQiGiVez7HApM5HHH2E7D9QIXDR4F60kfhkPXq1RAKyf8enfaZUUC7qkqdtZjn1OfD7NIBeXg/4uYucred+CwLlevqj9f9GjON67mmA+muZx+O1oeCkfk49IX6bBmTPyve1lsk5Xu7JPvHbzUulXKWerzdHvX4s0dG0nvA54X9BoFJNkvpifaLX0rQXeA27UZ2th/qn6GlA9uRo+jWNTqs27IzJeuFZgPjJbZOIGjyh/d1UsQ73uxiY9uRoYi3ktWeVr2d+9+pIKVZTog7/orroX8bI95FT/5sE7iXPTrJDC5mEn8qeBWa9WtNqPQiNMhJHv4cB4iWu691WZ6xmRtpwS15PPAvM+INnA8v3XsbIJZ+FwPE99/w+oCcPbfp9uQ74vewDBiSPXGXXyg6Trif7s2cPXgiAl+9ifvK8jewPSeAxPnkIRZspPvE0kJAeQtGGcbaeexqQ6khtpjnzNxCwHsVvwidtJE8D6NWttzuct4859SyQuXuyznEKOOfNUru9R/mUbx55IVAq2ba9vrToCjscjrBrcXXp6yVO4arZbrcPs6TOTbt5BdobWFEs+7vHsTDzR+Ncca0t/TwS48UJhIkLOT7/g3KuhDfWVgOBwOrahsNJP/wPf/sjXfu0uPEAAAAASUVORK5CYII=");
+}
+
+.flag.ZA,
+.flag.ZAF,
+.flag.za,
+.flag.zaf {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.KR,
+.flag.KOR,
+.flag.kr,
+.flag.kor {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABs1BMVEVHcEzCwsLT09PCwsLDw8PNzc3Q0NDJycnS0tLS0tLS0tK5ubnW1tbBwcHY2Ni+vr7BwcG8vLy/v7/c3NzNzc3ExMTZ2dnY2NjY2NjX19fT09PFxcXKysrPz8/Z2dnU1NS6urrCwsK8vLy9vb3////PMDzPMj4AQprX19f+/v4ARqDW1tYARJ3U1NT+/f0AQJjS0tLNLTng4ODw8PC/v7/b29vs7Ozj4+PPz8/Nzc37/Pzo6Ojl5eXHx8fz8/Obm5vExMQGBga8vLzZ2dnLy8snJif4+Pj19fURERHBwcHGxsbQNEDc3Nz3+fs6Ojqzs7M0NDRgYGCwsLAMDAwdHR2Dg4NbW1tycnNLS0sCAgIYGBjJycmUlJSioqJEREQbVaQAAADyycy2trZpaGmtra2JiImnpqfK1+jTRlH88/QKQ5nbZm8LTaLd3d1SUlLmlJoaQJB2NmKBNFzRPEeFo81SPXfEMkC8MUNLPnv22tzt8vi3yuI7bbFficB8fHyOjo6qvtugt9jssLXts7j99/dmOWypg56mTGaiM05APn/ff4bcyNPX4e8jYa1aWpKgfZzX0N3sUzikAAAAQXRSTlMAB1xjdojCVqaXchNFJq5FoK6UFu3fZiqze9u82trx4rS88bL//////////////////////////////////////p5w9A0AAANTSURBVDjLhZVnW+JAFIWzigZc+/beIhACoQQDCZKQBDCg0rugrL2tur2v23v7yTuTgpLos+dDnjvJeefOTGbuIIiiCz2XbNbhi8NW26XzgxdOISfoFNoPnmfOX7zuVEQQhEfRjX7bwOCQwX0atZ1lGGRwGDgDEWqaJXEMJ9kkR0dCsx6PD+hyv7VvoKcHRXsG+qzXwmGG8MQRSQpRLKYoGsB04SxHTwUkn6Zw2BcmApEkdg8AU7qJKuWjONYlHCSkKJqiuCSpvOgCqo2skOUws/DpTjgbR5w6EBX4XI5PUCY/W8l3Es/OdwAys7BaXJLzuLH7bG6tXtBbkwAIqSFfLAjlWsmYgM5l5WqlwZkASi7Xcnw7qzQ+3n3/4bk6SzyTOxCCay0t8WRUB5oJvg4GBMPNvYczQBt7m7AlCc1MrtDmVUCKIoQK4HSmmi/RINjchna73T6zcRd+KR9EhXJFDhgADOMkYQmS26rdbp+YmFGI5YVVIZgomAAMi8DHD9U/oejhc/Am2G5lFrRZS2nEE+pelj+H9gm/fxtOPd+IRrCTAPZ3x++HgoOimqz+2WkCXiw+1exf7z946vd/787vjJmAnWdq74/dLvfWff/G/wD2l+vxEzCUTy431AO7CfAFurfOa5dr69uzfcXucOw/MQCpIwD7Bq7dSxeQW/M7HF+6AeIIIIlyFaZ4dcTu9X4+EeAyuaaQAsHPHd0O/Ft/YWqmA3iCOtAqgd29kIAL/nJHt3u9r3Fl5zP6mSM6gLNYqZak4iqM1xc1u/fVHGiG5OXdWoA0ZMCa9exStVyEi4zPPVqE9sVHyh+ulFr1FZk3AmQtIdb5xK56Utj1d2/X55SwsJJq7Oa1s34EwEHmSqOQoQ1nNCRXYny2vaa2fCIS7vyHVnslkSKNNaDWWKmviW/IYwC8tsyaakykxCcyq7JeG7oAjMOPqWIUL2SLZcwEkKAm0jRNcdMsbqiW6dphdVOBZOSeLx6PzwNFgebDsJonDznPvLbZphgRAB6CicevWvssvSiK9lr6Rq+ci6XT6ViacQamaC4JMoKaTEUm40FRHBtBGOasDT1tuDuGRizjt87FUoqCikTx9s1e6OtHT76ghkZ6LeOjY3fGRsctqHYh/QOtYTptVZ1KigAAAABJRU5ErkJggg==");
+}
+
+.flag.SS,
+.flag.SSD,
+.flag.ss,
+.flag.ssd {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.ES,
+.flag.ESP,
+.flag.es,
+.flag.esp {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.LK,
+.flag.LKA,
+.flag.lk,
+.flag.lka {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.SD,
+.flag.SDN,
+.flag.sd,
+.flag.sdn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAByFBMVEVHcEwAAAC0FTquETFbCRsAAAAAAACvFDOzFjm6G0MAAAAAAAAAAABABRABAQG2Gz+3GT4AAAAAAAAAAACuEjEAAACvETIAAACtETAAAAAAAAAAAAC8G0WzHz6zFDi6IUIAAAC4F0CqDSoAAAAAAACzFzsDAwMBKg8AAAD///8AezLWFj/YGUQAdy3SDzPVFDvUEjfRDzIAeTDZGkfUEjnWFT3XGELXF0DPDi/TETYAgjoAgDcAeC/QDzHTEDUAfTTaHUsAdSy3Fj0AaCkAayzExMQChD2vEDAAhz8AejrZ2dmkCyYAfjUAdTYAcyoAZCbJETarDSuzEzaxDCkAXyMAcTNUVFQAbjDQG0cCBAO2DSu6GUOwsLCRkZH9/fzzu8fhY3sGFArGG0W/EjfOFjyamppwcHD39/fsmamizLHXHEgARRnHFj65ubkhISFFRUXmgZP1ytJ+fn7hXHXle47upbT65+o4l15tU0VLn2vv9/KYNkQwdEMxZTwnJyfWJUnVG0X88fPvsLsAMBHX19cAUx7r6+vh4eFiYmKMwJ9tsIbdQ2PbOlnohJhUWz7ofpRhYWEQSSWHvZpDYjzksrq7Lkq/WGnApqqqA42eAAAAKHRSTlMAn2O7Bq6SVnawdWJFE1ZFlFmBs4n629ueKrxr9hz8Ku+i7SPi4lHHL7Pa3gAAAmpJREFUOMuV1Vdb2mAch+EAsgQF96qrM6BYB0MFQYQiVkYBFSIgGyniHrV14Oze8+v2HWGYSoHfQQ5y3c//CkcQBFovXyDtFwqF/VIBW9JbQ5RYDZ8Dnt1s4R2/3z9TWM8DjlQg6WboOn77XZeLkEAdjfp86fT0WHrwzBfPZGIzbrieVk57s4DN5/PZgmZOq8vl8njmiZOjqG8abwxuEEyt1gzEM7GY2z2L55oFeDk2PrI8T8zNHWaZXK3RaAbAVCpl/Bk9vX5oaAQH1uNftGdy1WMwpXJ4eGIC+ykQ2OesVstR8dcwOPZDyE95cGC1HKaRR+eLODpf5MfpwGKZ/HxWdL7A0fmCpwPgJyd/+HLnb/D85yMPg0U78lrtSTT3NTc4fR57OkBeqz3+GQqF9lNfwh+yygLPecjH47//gAB7m83w4pUMb+V8e//T7ke1Xl98Phu+OH/6hPDasTcYDPJ8QXcH2xeprb3wbnhvKxU6gK9wgM4b5HL56MsV2f8Hg8WCHy1bXKEAe8B1OsX7soF5seAVCt278oHXhj8HnFconssqCGgPuK6cx0HeG8t6GJi8ef9dVlFgxt5o/LYEltxJrF+tlvKrwVMQ0H6NBKMoCj43NpPB9TeM7nXga4QkCacZ+2vyn1Gnm293golAIJAIJpc2wCkKBcgvULcE5C0jnCbgHaYIWeFgYHQ4KvYwAP6SrDxYMDkca2Q1gdOxQFUXmCNkdcElWV0AfwDVxuXVihrqG0S1jazOtpZSuoUrJq6pPtbDOsYfzT1xF6/zPuOn9TV1QfeovvQfVIdY1MhjcZu4LF5tfQd++RcX1lMbXJnH3wAAAABJRU5ErkJggg==");
+}
+
+.flag.SR,
+.flag.SUR,
+.flag.sr,
+.flag.sur {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACTFBMVEVHcEwxYDQhVycxZThBekguZTRIgU4yajgzSDMlWSofUiRCekgcTSEfUSMeUCMfUSQzbDkzbDosZTIsZTJHgE4sZTIsZTI6cz9Ce0kjVyhBekgbSB8vZjcsWCw3cD04cj84cj5KglEkWCorZDEsZjNIgU5Bd0ccSiA/eUc9dUMiVSb///+sBya3CzK2Ci+wCCm5DTWnByOqByU1fD26Djc4f0CuCCizCCxMj1S4CzOyCSskYyu7DjgxdTgvczY3fj8rbTIyeDqtCCe9ET0mZi3sxxu8DzpEiEszejtBh0lIjFAucDUoaS8+g0Y/hUdPkVY7gUNJjlG1CS24DDQzbjotbzRFik09eEMmXywcTCGkBiEuajX9/fxFfkwsaDPtyR0eUSM5ekBQk1jYe48aSR4hVif7+/pJhVArZTHp8ekqazF/BRokWykpYi9Be0fjqR9al2G8PVRyo3fN38+oDTbKTmmeDTOkCzE5cz+aCy7hnauGBRwjYSnQX3jf6uGsyK/Z5tq8JCzIViK1GifCNCzbjJ3F2cf13eLouxyPBh7k4+O4MEzR0dHW1taMCSDOaCG/Jkj39/XKRGSSuZfUa4PNa32cwKD68fPEMlUnZC2Lso/ux9CSBiDe3t7Bv7+5Givglabpsb7GW27qvh/GPVxXjlzpusTi7OPR2tLXhJTx1drDh5aDr4iCnYWdLkX35em2xLjJycnReorLYCHVfiDMXCZim2i20LnTcCfMXCndliPowMfZix+uvbBUgVlgk2apgYi4c4BOeVK1FzcGFTrmAAAAK3RSTlMAFIIqmnP7VgJboEWvaUWUYImu2q6cx7ywvHS0Iwef2/po2+3ttH7xZeLi83bKIwAAA5xJREFUOMt91fdfEnEYB/BT0RNn2VLL9iZOTRFDxYEIQUrhlqWiDBMpiAaJ4ra03Gaatutlu17tPf6xnu997+Aw7fMDv/D+PPfA6+57BIESHUGm8ngbk5N5vP0HYyPSiDWSRm6Gz7Bd+6IMBkMHnVo6h7bwUmO3RYfqMHLTXpuNiN0I2mpV5aKcOqWqURwv76i9iLJzx5bt6yPXkSS5LnJ90gad0WY0OghrlDW3uVmj0dAeGipVTU2NQlFRXtt0sYqJDkVdoMzSOYgoazPyeD7DwSsUxyEV5eUnRU0ohSJRYVYWKhisQa9ixzO8AgpQgYiwVxrpAl6n+QxKLpdXMBx8Ie2Vxt9Q0GhcU4P+CYsAxTLx2P1h9tl71YrxtFc8e/WaMPzotgv+jd7u7p5ynVGx/KTGNevWCxZfE9+uCv4TvcX+2D/o77Lj6wsWl4hrqPDy7sC0Z3Ju/MGkx2e+c/fJjTX6Q7+uQ2HBPCeTycrK8vPzs7OzMzIyKiuPjXum7zwasnDxxMLy2SO3LhNPR2QyxmMOXigU9vcIKapy/IFv2owy4xmR5JQcQYXz52hexhkPXvjxE0VRWq1WLBZLJJL09PQc5NkC8iGcopyfGR7ij16hC5zxx+htKKrfdP82Zzzrj145DYWAZ8b335c7nSbTu9tiyUqfiQvIs+NhG6pn2GQyyeXyYWdvOuasx4WVXqvtccpRhllfUoI4+MzrULjA+ACH3ceQ/9oX5IxvgMKlC3j9oIefSl9hLLgN49kCsw47XizugW3eyp2B8QHfcBkVQjz9T469hW3G5H3B8YxnCuBlkz7zgNfrXTb7PHN/8PK9vSHjkW948RMKMp93SM+9zSwvF7xv4Obp447PbMgcefPk2hLx4ula97Jl6JF3eebeWZR7MwNfkIPC6CLztb3LP9gVeFLWyOhzVNC7Z10aEXrGlcriYsND13y3e9Wif76qnhh9Na/CZ0gW7YsLUKTSpoeuqe7BLgtzNsAj/txQmtfYQnyvCpwhHC6VqtXq6urqoqIC+rBVnyiF5KGCrmqll2JPc0hb2wkI9riAfQE21erAeA5nfScUjOpCpVRnczgcdSjtkLq6m7Y2hnPHd7bWt0DBaAS9ISk8ks8n+fzI8JiU3e2tKHTzZmkp8nmd7a2NLS31cQmEzbZnExkGLyHO6yN6W0J8Ysrh1kY29SgHtsaDIzaTq76gUD0tIiE+PDEmLi4uJjGcH4En/gV4h9gUO7xBtAAAAABJRU5ErkJggg==");
+}
+
+.flag.SZ,
+.flag.SWZ,
+.flag.sz,
+.flag.swz {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.SE,
+.flag.SWE,
+.flag.se,
+.flag.swe {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB+FBMVEVHcEwAQnEAWIkCWYk6YWMAS3kAPm0DXo0Cb5sEV4ADU4MAR3gBS3kAUIAATXMAQW8AQmwAXowAVYbEmgABaZcAcZ4AVYcBVYcAVYYGbJoAQW/LpAIBZJIDZJIAP20Ca5gEbZjUsQMCapgCYI/FmwAIdZ4AU4QFc5/EmQAAPGvVsAbVsgPRrgTGqhz/0QAAa6j/zwAAaqf/0gAAXJoAb6v+ygAAbqoAWpn+xgAAX54AeLEAbakAdq8AVpX+xwAAaKUAWJcAe7MAZ6QAVJP/zQAAaaYAYZ8AZKH+xQD+yQAAerIAU5L+zAAAXpwAZaMAY6AAcawAfbQAZaIAUpAAf7UAgbcAcJ4Acq0AWIoAO2oAVIcAQnP5xQIAdK4ASXwARngAW4wAT44AY5QAbZoAP28AZqQCaKAAdKQATn8Ge6/EmAD+wwADa6MAX4/5zgMAUYMAWI0AaJj8ywExd4L5yAIGd6tyjFT80QLgugHWpQABXJT60ATTrgDWsgWUqUr9zwEAX5TUsQBNhHFxmF/vxQQ0hIoWd51QkXrxvgODmUoeboUATIVZg2OwrDJjjGIUbJU4foIfd5V5nlzWvhu4qCm6tTDLnwDOtBwpZnTmvwdAdnGSoUdcjGnSwSKjrT/qyxBjlmt0ikJgckTTsBcMSGu1jwZ8fCwHa5SJ+uO5AAAALnRSTlMAl4l0AkarV7AUUlhi3Qa2KGCurvb27cecJ2tsvN97dKKJlJ+FP/1o2/EqSf0JvV55XgAAAz1JREFUOMt11U+P20QYx/HvOGPH3iQTLzjbRdAsaVRUIZDYC0JUBRUhIYQQggNCXPpGeAVceQ0cKoR6bEUrVdADCPGvFKRSpK62jdJk283mn9eJN7Y5jO04u8VH6zOPfzPPzFgAIBuDzVLcg01B6CalOzz9UXNXgNPcrV2sTWqAev0ewDejxIq63uPFinaEit9FnH1Yu8i64u8yMDxnskFjZz4C4HpS3hHqENbGiXv0AcZG75T4lHXjsUgggiHn1HXg/e9p3d8OK6MKwARghv3ir+b+diJZH5B7J//+jhgRhINOeRsLYGcc3/bGJZAAx/wCaEEIvND5CQxMphheSFsPSCBiiMOQrSKfQyfneGGJ/pm5XPFU0StT4AVflSBrFLwBYDAJU46BScH7PVdqv+QYsOSYTNG+3Ze+DfKYt/WonOvypD6oIDnQ3kBPtuBNsvKkHg6lmuS+RZgOMGCZhrBE6iceEhyGnHeNRf0JePvpkKw6XkiJaup5S0nYagZbty9ncwaP+5f6ZlL/95aBh46Dbwe8WmrtjsSXycZXLIocAHvGa1uh6j3XHQHUq0cV80obNZLjxeWC97K9NMO+e7evX/m6lW4b9NZ4iseGlK96JCyOxznJCV20R3KyfMazNITk/rwEg4+8ytSPEVSSB3/a8NIzg1tFnvs3kkR8sThd6f7cSXfxBesefd7+7UMRH8m1/e8K5U9XH5z5uhXJs/0f5nTyXa/TuDeR+Ngfd+prewAbaji8xo+A/EWe9GhOcHUCeF1A4hBh4Uigg5FyPW+v54NNABPw6GpOhAVIRrn3CEMLT6+T5svyRFjYAjkxch9SwvDweTbnrHrdB2N5aNtpo4IVjkMEFjY2vqT5D1MMfaj6m2nvsvB5+dTrTk/zQ0X/EAgpT3R4zfV0bWxUjJxprw8Jtr6/iml0ee1ZINM7wY3i7nuAeuWvJ2Rh0vJZHKXfhrR2L+w14PkBHFZRb/Iwng+jYMkzH0Ux4jM29xpXH5lD4SQg6s4BjXd8gGSt/Xt5PGOGbauXuRPF8G0iPueGMU6ClV+HrPqNRyr+RF+b+or2+aNbOQjgVFn9z/9JKtesNoWw6pYlmhVXAvAf61NuPBAexGMAAAAASUVORK5CYII=");
+}
+
+.flag.CH,
+.flag.CHE,
+.flag.ch,
+.flag.che {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAAzFBMVEVHcEzLAADECQm/AADLAgLWAgLKAgLSAgLEAAC8AADLAQHZAwPIAQHMAQHXAwPHAgLVAgK/AADAAADIBATLAADQAADQAgLMAADGAwPXBwfNAgLMAADYAQG7AAD/AAD////6AAD8AAD/f3/TAADYAADQAADVAADwAADCAADGAADJAAD//PzNAAD+AAC8AADgAAD2AAD/np7rAAD/FRX/oKD/Skr/4uL/Pz//Jib/YGD/d3f/ra3/Cgr/NTX/29v/7Oz/rq7/urr/8fH/Xl6AtYOdAAAAHnRSTlMAdQX+mppWmpqasZphfo8do46iLNjdaF8mMzjM5eXBJzxgAAABYElEQVQ4y7XVaVOCQBjAcQElI0AORUdLUUDuQwi88qi+/3dqYadklRAm+r9bhh/7YplnW62fRInlKIpjMVLEWzfhNIOsR+yzmrVMUyYdaZxXPWzgtPNrTlX9UA/m7nQuB3roqwpoQLHYkCRphutrjoaAJ9UP3Gk+GSoNpvi6fAXm04JcsBsokNMvVAHIllaTYHHc7+KoDHSuwAxkJ1sUdO+A2WxRApZy88BsAmzi7XZ9iKqDV/jix+kueEDAd+/xITuMqAAoRSA7DdCqDkiDwGgCrOwkse3fwOMtyHrbxOda4HJwycmuBxZgtzUoqg7yB4cC7R8A0ST4TOx6APxv8W5/RIFXCgrGzN9AOwPpGA7BZHQrAd3XLJhpaWCUB+iU1R0UgGnu9AWGJskhxlN90zQNS4EXAJjIoWp6ntBDwADLr/Gx1J0QBowgPO+FHyH3D0MXXVIiifECRQk8LV6efgEK2JuxHJugWgAAAABJRU5ErkJggg==");
+}
+
+.flag.SY,
+.flag.SYR,
+.flag.sy,
+.flag.syr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABv1BMVEVHcEwAAAAAAABnADOwFywAAAAAAAABAQGtFSixGC2zGTBiCh2wFioAAAAAAACvFCgAAAAAAACsEyYAAAC0HTOzIDMAAAAAAAAAAAAAAAAAAACyGjMAAACwFiu3HTUBAQGoECG6IDi4HTanECOnDh4AAAD////OECXQEijQEyrUGjTTGTLMDyPVHDfRFSzSFi/XHjvWHTjTGDDLDiLSFi7PESfBGzXVGzarECLXID0CfkL+/f61GC+5HDXR59z7/fyvFCilDRy3GjOzFy0Aczjyu8Li4uL3+fjY2NitDR3Z2dmgDBrEEifmg4/eYnDj4+PT09PW1taAu53KGC+wDR1VVVXDw8PGxsYdh1GUlJQlJSW8FCmcnJzNHThssY7keYbuprD66evaPlPGFCoGBgazs7Pm5uYzlWR1dXWLwqap0r4QfETTHDex1MHN5Nhvb2+rq6veTWFOTk7r6+vqlKDqnKS0EST0yc9FRUViYmKGhoa83Mzusbe+VmMojVoPhkzI4tXu9vIIdj1/f38RERH0y9DJECUTExNCQkLC3tDQLD27u7vasriNjY24uLiWxay/pqn99fZfpYBImW5LoXeMI5kDAAAAJXRSTlMAn/wCj653Vld2rgeglN1iaUXAKEUoYIiz7xQUvN+zx9po8VHtDT3IeAAAAl5JREFUOMvtlddX2lAcgMPeDgRHrXaSHIpAGUZJGEZRpC20QAcbFDmyROuse5zW7t0/uPcGAgnrpa/9HnJy7/m+371vF0EgAq1UJlTKJ+VKoaxfo1UgXVBI1eA7fmfy7jzESbMAmFALZRqtgGuP31PepyhEI3e5XDieSlUsFouxUklFInjCuTAHmVDDE6VSab9MKL89S1F+P4UAO+VwPAQAHzDzAGIwR3KJxP7c3CwD5d9PXGPPQYA7WP4M7RsMBqvVajab7aZILvcEco1NYxg2VQ8Yv0U32+0mk0kPmAZgdPAYBo3xtdu06XpGn4LBPM7xuXqrb6sHjevQt2nXG77NTwe0zx7P0rk+DJw44zfHt+t1vx4YjY7Xmd3sIiS7GwiuOvRNnfGhbouc/gDBauCARBk8HvAhV95lQWfgjv8UPPn56BVy+qVpA47dzB8JuoOTvUAmGAxmAnuLK3ATBKGnbB9Nh1kLMIrkjGsJPNVqNbrOEdCPbs5yGQRLzWXpnCCI8/Wip8uJIHiJPGMF6EUUFGFffeUrHbtbTgy1BOQZQfxh9WWv11s+C3u6Bm6imCZ8rHXU67363uOEUhVFixusE0Hwu9eVaC6bv9Wr9K/yZYfAE9o6KryAFI6S35Ybl9q4QMkw60Tf1zgIdmLbb3Uc1uJvNmOfl+odk+9sHb7X6ZDkhzVdF0B3WIgl8/l8Mra5Ha9tIroedBrVM9D9D/4p4PeJRsTDEolkWDzCu9nH72bzRYMgGONJbnCfDsHQ4ICqrRsbHYDeLUnHBwq+PgrQiVU80aiIpxJLhmoP0l8LFzN3h4EzpQAAAABJRU5ErkJggg==");
+}
+
+.flag.TW,
+.flag.TWN,
+.flag.tw,
+.flag.twn {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABR1BMVEVHcEzLAwPCAADOAQHFAADDAADLAADIAQGMCDHAAAC5AADFAADCAADHAAACAo4EAonOAwPQAQHRAADLAwMFBY3CAAAEBI3MAAC6AAABAYvIAwMGBoq0AAACAo0BAYy+AAAMDJcDA5HEAAABAYYDA5AEBIz/AAD+AAAAAJ0AAKEAAJwAAKcAAJn9AAAAAKMAAKTfAAABAJEAAIwAAJ/////SAADbAADXAAABAJfCAADUAAAAAIfLAADFAADIAAC+AADvAALOAAACAJQHAJn3AAD8AAG6AAA/AHLQAADyAADsAADnAABaWsBFRbgTE6eNjdOVldZ/f8309PtKSrpUVL4JCaOzACciAIQ/P7X7+/3MzOstLbKamtiMAEYyAH0kJK3V1e7k5PRpacVycsmjo9uHh9HVABltAFXlABGiADu1teKdndinp962MWYmAAAAJnRSTlMAVkbDYpCecwWvE91Yg66UWdv8UUS8Zu326iMqKnuioRa0+rxXsj/D2foAAAJXSURBVDjLldXpU6JwHMdxPNE07W6728svEiqIKJoWKOSB91naXXvv//94fz/IY0mm/DxwHOf9EkYYJAg8z96Xg+Bh4GvgMHiwtbHnISzmsTnQ6/HWx534eKf6dj4HSfuuyS2tu7flLLER4Dguz1B8OFbvRcM8xYgch1xJENZWHe5l0rliW3GSLu/qmixnhCzBcSJ/ghYbxbqdcC2MxqMVpIrGpoSSMVkulTKspkASAeZE72N/a9ffqs9GzlMFNYQGqlIuS2hlJRICtCmoxx4bzWaj2hvhnHoBs4MxEPXvbz08tROJ9lO7i/M5AAxwRsRF3MeinWECbXip5xRtBjAFedzfNRtXGLT//EaEps0AZgH+/lGt9oDB/eUdzk0AwASi4XB92EKHuGrd1/WemQXTHlI6QH2v1a3iX6lTe8Q5w4jqnByBHBHnosa1eq6i63BNG/0UgBmcckZPValuje4YOcPk1Tn5BBjXiqr3XuoxAJgPjJwenw0+IREDmAPSCOg9XRjcFovF2wEnohwDAAsQ5wvFm/5PNaKfdESVvvdvfhQH1qD4Swq9vtHUiBXos6G59yVYgRL7/hwgc04I7AL9awDwJvjvlGAxAG9PmAWwGABYDMA7wQUhswv0EwALgnf3UNIBfoeeiVKlUkHPRIvbbgaAoiWFbDZ7pi+XO5NTSU1SXjtFy14gkMmg2Od1kU6/ze8kl92bvk+5XDqdk1OsVtGPGFEVSUui+oPXTsjytnt9yfRHs2snXZu+dDp9Phmunbhz2Kz/oPbtzmXXkdfrPXKR/n3jw3+4Th/nh5T8eQAAAABJRU5ErkJggg==");
+}
+
+.flag.TJ,
+.flag.TJK,
+.flag.tj,
+.flag.tjk {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABsFBMVEVHcEyvAgJhIgQAQgBnHQCzAgIAQgABSgEAPgCqAwOuAQGvAgIAQQAASQCrAgKqAQGwAQEAPgCyBAQAQAAATACpAQEASgAAOAAAPQAARgC0BgZiLgoAUgABUgG3AQGvBwelAACwAQEAQwD////UAADPAADVAADOAAAAUgAATgDQAADMAAAAYgAAWQAAWwDSAAAAVAAAVwAASwAAXwAAZgAAZAAAXQDJAAAAVgAAaQAAUAAAOQAAPQDU1NQAYQCuAADZ2dn//v64AACoAADBAAAARQD+/v3+/fji4uKxAAChAAD++fmrAAC2AAD++eTFAADWAAD5+/kAQQDCwsLGyMbbODjhWFja6dr85pf74YU5fDnk7eS9AAC0AACXvZf733z99df966/61E8ZaBn0xsb76elspWz99NEqfir9777+++/98sn86qf87rj5zDf63Xb755/PFBTTJibWGxsadRp/r39AfUDjd3fqlpbRCgrtoqKxzrFNkE362WL999350EAMXQw+jT7ZTU3t8+3tra3WEhLJSUnRu7vyt7cxZjG40biWpJbVPT2uUlLXy8vngoIANb5+AAAAI3RSTlMAYxSSArBjVrBWoJJ+cnLAf0VFKJ7b2/ahvCoH7cfxI+3i4ruuTLQAAALJSURBVDjLjZXnW9pAHICDyHavOroPJYiBIEgUQYpoUhESobJaUMC992rr6G7t+pd7l6HExD68H/Lkubzv7y6fDsMQtd2mJotZp9OZLU2alu4e7B56TI3wWaPRPY4XeKZEnjVaGlqe1MrtGpP5aTSKtejG4/E8R9n6XVary9XroLiJfGEqBIm1N5qbGjQmk0nTYNG1RyLRWCSKjcfzlHWmr6/PinCJ9DtgFp8KxRARnlghzzlCUSw+MTMj+a4bXwTtx01AOM6BoMTgjt9/Sy/EZrM5RMRA7it1yacoIRB85fhepU/FolghX+nfr/O+GPD+QSqVTqdTqYMzmS73udBvGFi/pE8Xp4HE9NLi27/p1JlMF/xfp39mscLX70gOAzkMA7uTdGp/j/f39j+efF4C4MUs9u0lUMBs0dlNQPPv9DSCFr/AIKgShMtscYXNMcovqkG4CBg4kcmBaoPzNQA2WPQf1QVgfR0w2RINSvPK4JVKQMPB9GaWAeyKYnPVYA0NRkdS+we1gN2Aj60i3CbLVrUDYJnc7vk8vQ5yijMFVYOLy9zOZm57h6bp6gIAdnezpdLOdhH8L0gkMplMIoFety7L5e1yNqycFPyJAjozt/zh0Ov1Dg0NDRyuvl+ee5dJ0Bfza3f1T3M/Alhw9mh1BCLoiLExj8czgLpr2En7v7k+Oib9yQB2PDYi83nd5/M5EQSxsPAasXCF436/354cxQhPpc/rkk9A3G738DBJkoKPArcP6V75eF+lXuGLgeRX6k5Bl8bjvG4fhMGw88aXn8ZdMV7yBwNCgHyPk3cIQnka8TjQRwFJeAecblxcELH7cVLQZf5kYBQGJAkXOozaer3BYNDX17V1dUwKwNBu9/M6lJPQfmBsxnD8YZuh5vbaQLdIbWtzvbbr+WQSEeAZRbYeeY8M919Qrc36Om2n0Wjs1NYZWoUL6R/qDUN7PtwggQAAAABJRU5ErkJggg==");
+}
+
+.flag.TZ,
+.flag.TZA,
+.flag.tz,
+.flag.tza {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB+1BMVEVHcEwqokYooUIooUIAaJwCAgIsokQRXlAAbaEspUgmoEAAdqcAbJsBc6UAbqIAAAABAQEAAAAAAAAAAAAAAAAEAwAgh28qo0UjnDsAc6YsmTLJphQHeaTJqBKVnjAjmzwAbqEgmDcAcaMAbqEimzotpkkAdqiIcAuCbg0vpEkAYZYlnj8AZpogmjkAcaQAAAAAmtkovEYlukIAltcAmNgAk9UqvUgrvkr8zRItv0wAkdT90xonu0Umu0QAl9ckuUEAj9MAldYvwE4AjdIwwVAPDAAAitEAZZsloD8inTsAbqIAap8Ac6YemTcAeKsookP80xkAe7MDAgDPrBK6mhAZFQEmqUIrpUYipTwywlIur0v0yRXdtxMtp0r00RoAf7gAdbD5zRUAgrsrrEgsuj8AcKtoVghero3swxTHow+0yiYzw1MlHgJLPgbizCHqzh0InNJbTAeCbAs0LAQAiszCohLXsBEnr0Mpt0fDzSRFvTpAp6VQvjnkvBOJcQtvwDJ1YQnLwzgqIwNxsX54s3njwhgjoryRuGYjs0AsJQMAk9A0w1QwuE6Odgwuu02XxyymySmPxi1/wzDVyiilihCbgAutvU48MQQAiMX7zBMAhMNzmjiTqyGFtW46uz3DwT1dvzcUn8gpo7gboMPWuiBKoJCfulpFh3VqmmaWWQSmAAAAL3RSTlMAKJRlsFRFBZqwoXEoV379x5ztEtquFnu8vP90/WBZcWVXSbfb8duLi1c/4vGG4jy6HRgAAAMZSURBVDjLddXnNyNRGAbwQZDovazubG+TtcRwETYm0SWZSJCCCKIFEb2uo/dda/Xt7c/ce+9MkjuD94MP8nve87yXc0JRaCJDnqWHRikUiqjQ9LCIkEjqnokMT4A/08IUjywWSyueOjwvMkLzbuWSwxOTaJqKUNjtlt7O/cN3aMoOZ2dnZsx19XgeZkS9ygsrKMjNyXqamhJPo6Hs9s79juGO2tpa5MvKSktLVSrVm9ntGXN7fTOaB9cc52VpYSh7596eyKuQh1NRUVlZpN7eXtlw2yZomggMCz643s+LitTzQwBwO0G/Q1k6kSfWk9z1wQF6vMagbzPBgN8H2vi5esUDgGmSJv0UDATqSPi3EwCW+mnSc9N/KUvvLY/54hwAjmVW7Jl/LVRrL+/J9Wp4qx7oP43QEn/jxAFiPd/my7ED6EXl4YzYmC0lDvA+2AY9DeBGaaPIn7mZG2UxCpgDnm+zMgYA+Zfip9/KrCuLi7uaqDoz74X18/BW96pRwtlTpmcAeiEQ8GrXkR44Dljp+rVBxrOAfBUOYI/rLHrgrSNSbly1Mu83sX8LA/Vm7FH7jw6w0W+8Y33P1jjvawwoIHjXHHx59q71YwNKwdcYGqj6dt4vjoGNUSmnzwYZfx3kS3AA+xU9mGqT8rbTC7h+POj5APJHer331lsuu5mezz8Rh3WwL4eB5nboj4FbWoftX4JtFpSCr8G+3NCIAq4hYNuR3DphYxjPgMADvrobBdRDgJPUH+UYxro+riTrQC8EhsCU+DXXTAx8+u/i9Wh/NQ5cSzx7YIW3/uA5vz7gNTBwZeNIb0S3fl3wc7w+6DXdOoozkX4StjmBt/rbCOv9XgsDpjby5S+IW0lejrhGq+3TUcQ/5+Q0w/zZFJWXeBQgn37p1+/d3SpxeZ4Lngyw3sHBq+wWNIYu57lvtwRz0vu6+nRCID4l9UlWTm5sbH50nDzzcXYTmhaD8/Lc59NArvVdOg1Q62TPYSApMTxZ8kUTUxgtz3zdwE8jHp3upSw/DX6YEH7/F1RMYX6cXC6TyeTyuNgY/pf/AcN+mVhvVd00AAAAAElFTkSuQmCC");
+}
+
+.flag.TH,
+.flag.THA,
+.flag.th,
+.flag.tha {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB4FBMVEVHcEySHzZ0Dx1+FSiZJj+BGSySHzaIGSx6ETB1Dx6EFSiAFyuLGi9zDh5rDBl1EB5wDRxwDRuEFSh8ESKcJ0KQHTSPHDKFFCaRHjWZJj91Dx+IFiqHFSmeLUWFFCiDEyZnChdoCxdyDx309fj29vn29/rz9Pfy8/cvLEs2M1QtKkoyL0/z9PgpJkUoJUMkIT4mJEEsKUkwLU0rKEczMFA4NValGTEnJEIiIDslIz+ZFCk1MlGPECKcFSqsITyhFi2jGC+uJD+WEiaLDyCSESM6N1ixJkLu5OmfFixwDBqrHzksKUcdGzLQ0dWDEiS0K0eHFCiyKEWnGzR/ECGcJ0DIysxwboWTFSp7Dx+1LUqpHTeLGC0hHjlnChaTHzeYIzzx8fRfXXOfGzKjIDmQHDOMFChqCxizsr95eIy5SF48OVmdnKujJ0Pd3uCsrLny7fHasbvp193X2NoaGC2/wMKTkqO5ucWAf5NAPVzEcoGMi5zWnKmrJ0GjNEWZHja0tbeXl6fAWm/o6e7Z2uGlpbK0VmjOj5uQkJ2tK0WvPFBSUGatTl5aV3Hr7PDivca6WGq1PlXl0ddGRGHEX3VnZn3MgpLAe4fLl6DLvcKaT11jYXjFZHjFsbenSVeJOUWjj5RRaaulAAAAI3RSTlMAj21Hrih2VgX+YBSekq9YfqCu2/a8p8ffZrza/T/t7bTx4nEV1jIAAAMgSURBVDjLjdX5OyJxAMfxKTLkZj2OvXdQ1DoSVoWILaqpVUrWMUl00LGLSuyikPNxH3v+q/v9fqdjKj3Pvnn6oef1+c48nlEYBivk4AWsfFAJq6A+j1OI5agQrwWvxfX5z4zzxnm6OVhdDasga1eMl7wiSewl0MaVlVjsE+zj0NaWzfbt29wirK4GXJGL4zi3gFX1/IVeb9eTGNAxi0Wn09ED2BBoAM4WFz/Hg9gsGZTbwWDFkvQJDQeo8WmbbQEl7+npkcvldgMaQG9xOq9/7jqdOgYfH5+GTYBoP2h/RIPr8LmSaGqk8/rPw7e7F0Pj2f7o4GENM+77vE2gxmQEQe98B6Hdi60BpKdjzlDYTxDaNezXalO6T4XepZQwikAJwUC7msszrxn3ycF/ceATg0ZK61kPmGCBTfeydi+X39uUYtpIxH0TdI2Odnd3t4CkUqlYHDx1rG9oz5icICLRG/WMBnNbgy5X0iMuFohgfFHw1BRY34kue3YOHdbu3t6ODjCQtsQ9fTzk0PNhrZ2dnequrvewtjbg+8BALAWecTziyLe2Is70fRoNJpCmfCZnHo98OxowfSbP8O2ar5hInORiwVOnM/0HMOAL0m4n6/Q4pz09YNzOU5zp0UCU5Z/m0M+AgZoP/5zHJvBIgDw7m44fV3zGzaf5vuNDMLgKbOylPzZUZMPtsLq6aJ7waqt7dfI7dhylMp8y+kETCs+0G9FDh8lqtZoc6x4txePxwGDyS7ZHXNjc3Mzjgd9EFPhhDDJ9Mx0vvdSAILzx/0Uhw6cfT4Er/EUDfzjkjE0MglQLtqP90IHv0pt9Oo+nvP+zhE0+3B6hzxA5GqhU/SjV9v7dve9SmVhRft/db5libBZ7NPckvSrpJbDh4WGJZHv75ORk22iWyWQKBRzozfRnWr/EDAMkxVEjKNrHB4Nm8KlsgE2hDCSpkI1kcOinxmbBQG8nSbK6isXmluPlXHZFZUN1EWrKYCAVCpkMeoXCAPVsWR6mJ1+X4MUZXzScPHZpw7uisURLsLdv2NDV4rm/oMCuorSyrKyssrSinEO/+Q+41oYsTSCkjAAAAABJRU5ErkJggg==");
+}
+
+.flag.TG,
+.flag.TGO,
+.flag.tg,
+.flag.tgo {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACLlBMVEVHcEwCUD0/QDoAPisAWUMARjIBUT27GkUCVT8AUz06MzMKTza4GUAAWUICYEkAQzAASTMAQi65GkIAVT8BVT8APisBZE0ASDOiJEK4GUEBYkwAUjwBWUMAVD0AVj++IEm9HUgAPCm7HEW+JEcBZ1C3G0L/zAD/0QD/zwAAZkr/0gAAYEb/zgD/yQDYGUUAYkcAaEwAXkQAblL/ywAAaE/bHUsAUzrWFT7/zQAAak4AW0EAUTnZG0gAZEj/xgDVFDwAa08AXUMATjcAWUEAWD8Ac1gAdlv/yAAAcFXVEzrXF0C4Fz/////XGEL/xQAAbFDUEjgAY0z/wwAAVTz/wgD/wQABRzEAPioAQi4ASjTiwgjMtw4AXkMAOyjFGkbRrQOdoRrCF0CzFDgZYjaKlx6fKD3TEDbfRi3++/zcMVhqky0BVzy/FDrIngDVogDAkgC5tRb4zAHYvwvaJ08sbzbhuADbrQAjeENJiTlMgzL1qAv6wQOuqhftmKv2ytMUakHBtBH8yQCjMEl3lSb5wwAQdk6EnST7zwH64uc2eDfvjhR+jh7QG0eSpyMtgkfOuw7Ytgi6qhDrvgQNbUn31NxXhy/UQDILXjzwp7fphZveRWbQLj3iVHXVHEl2dhPpdRzjWSZUkzzGqgx5oS/bMjOcriOalhbkY4HTiBn4uAbxtMH42d9mgCHkY4DxtcHlbof76+/cpQe/Vx6xlAceUihHZyGsnw8vYiucL0iJKkHv1lqHAAAAJnRSTlMAJxSwi3ZH/lZeAgebnXKgvJR1rsdmvN9ertva2u3tP67xtCvisrYrhIoAAAOoSURBVDjLhZXnVxNZGIcH0iZIEey79kISAyEJISHOYBImFkKQMpqQsAFEERJdF0iUJk2lY+8e+65lV7eou5b/zve9dybJuHj8fciHOc9zc8/vvXOHYTB5O9aX5Odv2LUhP79kvTZnBfONrGBXw29uyXadrl5KV/1nh8Oxc626UJuTp6Rz2YLNoshs2arT6drblx4+5CEWy9KnfQftjmZHM+SHtQXqQj3LsvpC9aqNgh8iMkAvVWF4KljO78eA5XU0V5ghNp/PJwjCHluFySo4GV07waseJAkuC6BgDtobvbBFq8Pt9bqtVpPAoZDE9cdeUr7hfAYHAWK32xsbCW81+TnpH3j+5l2CNxDha7zR68b1TSb/RyrwfDw4V4V4Q+B23/Nfn16epriSn0h8+JmpB4GPP7gb7L05Pj5mCQR6dmNmo32XEkOXpxEH3uoeHJ6ZnCo/C8LRqvh4b5BkjA8EXCgYDIbdBqPBaDT2Rweu9LUNRPtLS0sry6nA88kxNHrvAe4CwYAxplNWVlZdTXlZsFj+RCGJvKtHict8JfIHqADt3Av+0xv8G3CPp2c5XOKpgG2Oz8Xvz/3lAd5ze6A/G1fwe9//R4SG5Ou4y5X8IwB8XbfdPjiUuNQXnaXLp/mptuMpLsJ0HYX678dx966Ap66uCQToHiZ7A7yZznNtmHOdF4YnbD/5akNM1ykYVoDsHpZvamrqJs2TUVnJdGtqairwFAK/hwoyX4c8Ctm4gqeCgj9xovtrnPA2wgtUkHiCg7AMDrwPeX8EBeB/e/J4YWRkdPT3kZGFVxduzd8wmdK7yeZTj96D0LMwmpkVbbI6Ogm1pNI4bufO/GLH4dO/MO/eSsdMMShoHqqfug59Hsd0Xrt6saXlMAodZzJHJ2tQOCk6XMyhQy0tyB+RhO/gGV4SlMesNIP/j6cC5cmbMgBvSnnlcjjlj5x+hMLs5MzQoFtufmJ+ONE5GZ2ScWl55DsW/w0zHR8S09Idkt28eSJ1axG7uUjWH73+7MWbYxzXGmNSZnonWBU4Vg/dw7DuHMOcFJ1OJ8fVgiCY5TsnfcwAJ6MCnNynJ0XEkSeCjfIVcIcC4vPZbPLyaZwuD3xtmAgmsyDiA3xCwjlF0U9xBR8Kx2KMX/DDox9XqTV6PavXa9RFK9dFIpFQKBSJ1HKckwTgSKg1FgurtIxf3FTA5io/HXk5Wk3xynWhVjlhzDbVGuRWs9/+QOVo12iKi1QqVVGxhpU+SF8AQqKu9gp+RWUAAAAASUVORK5CYII=");
+}
+
+.flag.TO,
+.flag.TON,
+.flag.to,
+.flag.ton {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAA81BMVEVHcEyhS0uUAACgAQGDAACdAACaAACYAQGVAQHY2NiMAgKWCgrX19efAwOSAACIAACGAACGAACGAACbAQGmAQHZ2dnV1dXZ2dnY2NjEAADBAAC9AAD////DAAC6AADAAAC1AAC3AAC+AACzAAC8AAC5AADFAADHAACwAADJAACtAADLAAD89fWhAACMAACeAACbAAClAACpAACUAACHAADW1tbZ2dmYAACQAADienqAAADj4+PmjIzLFBTp6eny7+/VRUXyxMTZ2dnlior9/f3cYGDtt7f339/QMDDl5eX0zc3T0NDaVFTWrKyuKirqqKjcaWnOyQIwAAAAGXRSTlMAFN2bsraIWnWsJgeITu+gRWmUx99mKldExAVURwAAAllJREFUOMt1lYl2ojAYRtFq1daly7RTF1CwYxAJEFBxHbVia+1s7/80k4QYEtTvHJXjuffjBwIoCs3z93K5RFIuP7083yoXclt4xN+Zp9JoPBLyhb7lr4qVmxSdqVxVPU95KY3H4/nP1fu/3XsriiJ7tZqbFkI+QsS7LhZIitf5rOt60A2Vt7f5Kmq1WtPBYIF/yKYNAFANvWv5CEJIPhC6LvRNrY2w8NmimQ76i3iLCgD0SFTjVdNxtGYDp22IQj8RegzHqeOoqtqIeQMFypgK9uFXv7+eTjex0LvAG5AJ234csJAEEad8EwujeTwPwQHYCkL9lH+VBCAJKTzmEwEslwDsd/hSEKHOcaGe8BqcxMLHKpqyeirIeMJrLhPoThJBlfGE/yEJvURQ0/WMF4Xtfv1XEBpyPeN1z+GCELshTxPXE14QIvvjsNlsDh92hIUz9ZRngv0+XS/JmaejL/druV7gO1j4+r1byuugfQbXCK53OqGj/DHB6boRcV6P+S4WkHnkT3CD4QnfDYdMOFk34jQJzwXKSxeKT8PrCd8Nhgq02Pk5O3xST3kzFoSbKoWz+iPPBPkmFI5VqI/7TSZIq54f6xEXeXMyw4I0Tnp4jlPeDLDgq/IqloZP8Rbeg+sLN9WlaY58IrTlC5vgMs+FttHUu+Qf0+zqF3DCWw4VNBO5YRjEmUyC0IPIMjnO633PmWEBQi8Ms3n+XK/lsxOHJAhdiHyL0j5yA0zPcneK51WvKpnUu+Pm7v4hl3WcIQ+Gq7l7wj0WLr+gsFd8qOVyudpDscBeSP8B4TffaLHqoOcAAAAASUVORK5CYII=");
+}
+
+.flag.TT,
+.flag.TTO,
+.flag.tt,
+.flag.tto {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB1FBMVEVHcEyjFSbPzs6nEyexGC+zGjG3IzmuGCudESqyGzHDv8CuFSqvFSoBAQEBAQG3HzeqFSuvFSmvFSm5IDgDAwOjECIBAQEAAACiDyKrGi8AAADHw8UBAQEjHiMCAgKiDyEBAQG5Iz2fDh8BAQGqGC5ISEikECLZ2dmwsLDW1ta8tLQAAADaGTTZGDLbGjbWFi7dIT7XFzDcHjrUFCvaGjX////eIkDTEynbHDjYGDHeJELcHTnVFS3REifcHzvfJkW0GC/OECXgKEfhK0sGBgb9/Py4HTWvFCm1ESWoESS6IDnGITysEia6EynHFSyvDyHCHDa3t7eqDR2iECGfDh7PHDWlECLytb7wq7Tl5eX29va/Fy8ODg5oaGgCAgK9Iz6/J0MbGxvAwMCRkZHIJULVHzi2FCv2yc/mZnnqf4/hVGY3NzfKKUfNFCvTFzCEhITfNE6oqKj1wMj88PH66Oqurq7umaXVJUDXHDX20tb63+PbLkVJSUmbDRz99/jv7u7HKEaWCxmjoqLOIj7V1dXWGTEoKCjbQlPhRFv64+bc3NzjQl5PT0+ZDBqZmZm/ESXRq7JYWFh5eHjrusHfQVftipzGUWeYDBqbKDPhcX2xi4+5nJ8KFsdDAAAAK3RSTlMAiP5NYZuMWAV0qa7aeVa8Esft3yuak3G8I/E/tBZo36NJaq4qsvqu+q6gSg91/wAAA0dJREFUOMt1lek3W0EYh6811hZVp9ZauymuMBEhEonrJiKxJGTBVYlsFCERazm1K62te//ZzsydmZvq8X7wQZ5n5j3vb2Yux6HKKX1UWFbb0PQ6Lzs3s64xh3ugclTF8G91TVVFMypJuj26nh2C9eRxdm5d+T2vKCOrRBS5ypfpN1IzrYBwt3F4aIPW4OAg9LLgjiqVKjM3O7/AKIqhkMh9v/buj81RQToAHoPBoNNtbBzaRqFlJCUaQ1OO5Rb7MPfufTQOvIvUGFgHSR0qjUbD83xfMDiBa7OztfNtiyyYL9aAb4YZfiGqITgUYKl7tFptK+a7ZcFs/iYIK9SYThciBEe8GvEQR7wimCJxEBggxtynvYX/lpf5brtVFsymi20wRo2T/cQZwVk7Mt+OhHnEm0yxMPBPE2PRtx1LwWW+G/JImJ3HvMFgXlP2uBTCOhmX26F8mwULCIejN7mZIc0AN69NWZ7wbZZJKBBep9G5wToJXQqApIyz9hHfKwuE1/A6D1ilx2QVRDspzngs2BjP83CPLzQOvxCBOGsH8x1QGLIpPN/HrwGSoDQN4yDL4/YR32FxIoHhcJK6MKCnZM4b/6osj3lZSOV7tDvbvl0ax/55TGkH8V2ykMprtbGEj57dXWFrhy6P+a4RFzdoo7xaLQ/+LO6l92MGhDdTeSKkLI8Hv7B3RA/JCnBvIpzweiSMKjwNKgL89JAEgOcY45inAmuHBhVlAaI7e8x4IqRcKhpUksaB7qynl/L6kQ9QoO0o5wBO0i3QOAbGgGeZ8P1QMI5Sni2PJh8MCyQOCRruoB7z/eNIYLyCw0nunPtOlK7CQcz3j3+Gwr98O03qVIkD7rG1gXgsTDFeWR6PfkFgcQwcgMQpFn4ggb0JqTicZERgccA3dO8XEj5CgfGsm14SFYyDGTM+4JmQBcy3Ly85UC0tdRAcjl6fZPepWVr0gsQCFMSpzmWHPTSMyopq0jpssV85lrrQ7D0gwIy5MW/6758cesJFsSA/jbzraU+fPX8x6XQ6J60jlivHne+WfQuky1d5lZwolmRlFN370JRn1EPP6XK5nH/8N4SvqKqphj8Wqx7+QDVm1KelvclraqgtK3xUKv/zLzoehtEotiwCAAAAAElFTkSuQmCC");
+}
+
+.flag.TN,
+.flag.TUN,
+.flag.tn,
+.flag.tun {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABCFBMVEVHcEylAAi5ABC9AhS5ABCsAArDAhnJAB27AhS7ARSzBBS4AA2yAg6wCgqpAAm0AxW3ARLAARXFARnIAh69ARe6AA+zAA20BBW6AA63AxaoAAnFARrJAyHGBB7nABHkAA/qABvhAA3pABjoABPoABXiAA7////lABDpABfrAB/fAAvsACLqAB3rAB7GABnXAA7AABC3AAy9AA2qAAmlAAjCABXFAA26AAyzAAvdABjKAA6vAArNABT83+H+9vfsOEbSABzVAB798PHQABfpGCnoCRz1lp3tRlPqKTf71tnxdHzwYm385+n6ys3kAxTlAB32pqz4ub30jJTuWmTzgYn3tbr5wMTsUVsAySFFAAAAHnRSTlMAsIhywJqW/1hjFPhTB3EqSd2hrnyu2z/tI+r2tLLwGqMyAAACtElEQVQ4y3XVe1eiQBgGcCxN7Jia3dvdQQFHM0sli3AF8gKi5rXLfv9vsu8Mtxk8PX94PJ7f8zoDIwoCTVE8Pyqf/TkrH53nSsUT4YeciGl4Pc79/pWFPMY5TR8dlm4S+jhfvtZ14eoM7NvQWK/vIK312jCG48EzzWm6fHCYE0Uxd3hwcappeqejC9ns0LinIYW7h4dWq1WpVKA3HjxCqUOjaVqn366iflfIDu9j/0B8JYwsy+rKMIx22zBWSFEQQi9xIRzPclluQFRZVRWF+rjAribmxKskoY8KyfFyPD7gvqeFtz3P83g8QvWXV1LYG+9MFwtbjnnkSeHxLTne2VkY8v7p7HkpKMQeljJZAt5+mRibNsuJDwqcl7fYWsBsxYY3U3Y8eKlDCuCZzU6xZauq5y6/dy4eeYjzQYHxDXWDXVW1R/gd45GJtwrnpc5fKLC+UTGxrSqwjc8Z2Tm2OU8LY4Y31MkIO6oHcj5durBx1+eBr0Hhecx6UmgoNt58TBD6gN6szvqaFhSYc2PiieLh0Q4KsA08ijn4sOB7/8Zu8EJBsP65M1mQghRy4qvaEynE4+GyT/HMIYuZb6wN7GEmsZ4WBpxX0BJ/IrTD/kXCLufDAneKPQvP6/UFTLdMuImcDwrMeJKphbd2ve5N4RC6EafeLyQ8QjZMf/9ewpn9WvG+qT8JnUHoUXRunLlJ1m/Ok76p96DAj/dv7Mr7+OfFPPRhgT/19E6tpFWN58QHhaSXJPbis77Z7QnagPsR/sR9Twv9yNd5X0uOjwuApWrbT7O6zyMfFKrtvtaleaXRtZc+FCMe+nb/tQcFeITr3csL8lzPi7nCQSZ9+ZemS3rwldTCTNC91JWg69eZ/HHiv+OmVMikb5/igO3dpgrEpcWf/6CKpdx5JpNKpTKZQr7of/gfXW/9gP6RCc4AAAAASUVORK5CYII=");
+}
+
+.flag.TR,
+.flag.TUR,
+.flag.tr,
+.flag.tur {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABHVBMVEVHcEy+DBrFEiOoBQ2zDRmmBAu+DRu1CxW4CxezDBehBAq/DhyzERenCgq3CBK3CBO/DRzADhu/DRy1CRS3CBK3CBGrBg2rBQ6gAwmqBQ3GEiSsBg7iCRXhCBTkCRfkCxreBxLgCBPjCRblDBvnDyHmDh7bBg/kChjdBxHnECT////cBxDoESa8CRW1BQ3DDh7ZBQ6iBAqnBQvoEyjADBqtBQzGECK4BxHRECPJCRbNDRy/BhC7BQ2xBg/YCxrkFCLEBg/QBhHKDx/lHSrpEyjoMz/VBhD++vv3t7vtZ3D86Orvd3398fLhDRv0oafrSFXqP0zrU13+9vbhECLzmZ/xgYjsX2j619rmKzbcEST5ys34w8b1qa773uDyjpWRDuoNAAAAHHRSTlMAn7BxKJqQV2NFsHQUB67avN+CUcftvN/2gfH6Gy5+DgAAAqtJREFUOMt11dla4kAQBtCwhs1dZ3SGCEQRiBhQ1GaTgCEIAgLD5v7+jzHVS5pOhLrggu/8laLSJJJEyi9Hgx6v1+sJ7ofC/i1pQ23Jh/AZC3n/3OMq8NrbDUbDfpeOHXiOEJLCXqDl8tvUyOXzudx0+tYoVx9vSe3tevajIVmWQ9Hg9g5CqFZDEui3UrtdKuXzOAB1jmvaaFQrhdsru9BVrdLKqk1dui+DbhOe5xwqTWo4bNBKqqeqqsZZoO1qb/N0+gxXIpHIZIiPNx/oFVzt06JPEK8SzwIuv4bbXiGBksBLo8n43DkNG4d4pYYD3Oes7pOmac/fpoMLPgWBQpn3H/0DvvycdZcjmwvtsWcB5sfgn3t4GHM+WtMePA2w8XNLTRtYdPiEZQp85VO1O6lQZdtZwDw9PrzBp2HjEM8CdJldGKgkrsb66ZMkQP3Zs6Z1hd+aOf3IrDjzOHBbpffqHDY6E7iqDvqvi1ehPfhknQbIjYLAy2o1r71v+KIrtMc+SwPEJ2Ck99VqjPkAlmYoTp+t30CAnYQXTXuy+GpUxYDbsuCc+lUAfuwYRvhUMypfzaDf+zBTDn9pB8hy4BJan/O4MkspKYNz4u0AXabxDom5QTdpKspQEdpTf4EgUEnbfyoDX+Orb5nmpD/kw4v+Qr+Rriq2h1HGXXxgta9e/Acn/kK/JgHs2ak0Jr2JlXJy2h57FnCdekXZ6GnA+Sdcx7kv0oD9DBHPgc2dngZWz4SN3PYssNFnxfbY4wCqEK9cdjotqE4xm3RxwRcfSCDbatZ1/YGXXm9WWkUnx77TvLuGADzCEdrZDvrIc913Evj1++8dLr1ea+JLYt2BnqCPI2EJoSPPQcz17vCHfZC74XWN6zjiw+5Q3vyC8odDJ4FAJBIJBHwyeyH9B8LbACPrx/XOAAAAAElFTkSuQmCC");
+}
+
+.flag.TM,
+.flag.TKM,
+.flag.tm,
+.flag.tkm {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.TC,
+.flag.TCA,
+.flag.tc,
+.flag.tca {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.TV,
+.flag.TUV,
+.flag.tv,
+.flag.tuv {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.UG,
+.flag.UGA,
+.flag.ug,
+.flag.uga {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACSVBMVEVHcExYBASgAACiAACYAAADAwMCAgJZCAgCAgKlAAABAQEGBgamAACmAACbAACZAACdAAABAQEAAAADAwMBAQEDAwMBAQEBAQGnAAAEBAQDAwOiAACbAAACAgIICAgBAQEAAAAAAAABAQGrAACsAAABAQECAgKtAwOkAACuAACXAAAAAAD93QT83AP94AXZAAD94gbeAAD93gTVAADdAAD81gL82APSAADXAAD82gP70gHUAADbAADPAAD////NAAD81QL80wKqAADRAABHPgCeAACxAADJAADGAAC1AACkAACZAADmWQBlWAD5yAEGBQC5AACWAADmRAGplQIaAADqeADVvgSuAADUvATiywXfwgLRrwHozAMNCwAlIQC+AADXHwC7AADHqwGjAAD35eWIeAIrJwChjAHiNQA5MwAQAAD8+/uUfwHfQAD32APPtgPCAADcFADZuwK8nQEYFgf08PDn5+fx1gVMAAB1ZwHYCQDvlAG0nwKDcQHragHuhwFqAACoAAD2tgLaNwDxmAL38/PGwsHZ2tm3tbViZGHUzcxZTQDviwLmawDdIwC/qAPueQL2sQTv0APStQK/dgD6zgPbDg6ymgHhNjbzsrIxMC/jgIA6OzkkJCSIiIienp5ucG58AAD2uQEmAQD3vAL4wAPNMgHLgwL4wgXYpgK7OwCrHACzKQDeJycxERDviRjuk0HoYTHkRET30tLl0KSuhoTbvgKhXhYoKChdUVBgWB+fjBClpaWWiC5OUE6NVFM1NjXGFRWqPTwt8RtTAAAAK3RSTlMAFGOfsFd0BbBXwChywEUolKJglNtRnoKIZknfe4s/8e36+q3a4pVR+u3xuD6h3wAAAy5JREFUOMudlVdTGlEARlcEBHuLJZreg6IGhYhxAVlhaYoKMmpQFMSCNbH33nvvmt577+WX5d5lXVDBSXIeeNg558IM351FEIiXD4MZEsRisYJCwiOP+nghbvBieINPj0jWCc5eznmfZx7oPI6EneRwkOOsUxw3nA71DgtnBjMYjGDmMVao/SHC+Uf+PzBarRhWYS00Hu5jMDBipdN53HgIl8ttzu2oasUKM13Y1s7pEoRTkdMcT8J1ojl3uVSDWY32MLOhQlOWn5x8owRZzot35XOvkNRch9TEJkP4IMjNc+Xv6jEEsbGk7xy41518KuDPTnSpsyHqrpmB2UVXOvQXF56A4OFMeUJiQiLkGkn9q5cvBvqEe/zku93VPIUSeXA/AeKsX3ttsXx4u/osrr48W63Xd7dP6CfV5fU8XooABMU4qTv8FRs6tPYOHVyJA1wl4EFSBDDQ4vv9uFUUHflkQ1HLEqlTvkBmhgGhp9TJ0tJ6FXWpcUsWFB3dAQG67qQTvsDQA4JEnrmnRUf9/5XPG1H0+8bQMIq+cToe+mk9Og6iVbVU7psMUMd+jv5eRxvTFTh5epHylv1Q5M7BjW2hqG1484fI0kR8o06nqzz8PjQ0NY5u7wz9atz+2wu0MWhrGhkca/roNsgsHG8tzQGUlbZqwF3Y/Lo1YhtbO2BnYlUgaNB0zO2dZc37ji/fPjfsu0NGrCq/4CZSUVazOzTHbODQ+Py5+eWqTo0Gw7BxTWfZvFAiEYKgNv+gz3eQBBCLxRKIULgbuDqe8sVOPhnYfXEGJMmF7vAXCxZAEBNzrxust41YQVvbVLVa394npH6NXSf8DP1TFVL7qGtq74qJ4aSYQDfQl5EkIf3b7ZP9IlFvFvK4iFo9pRPDBEilUoHJ1F/dbzKliiByEMiKCJ8nFclxHJfLRVKBQ5emEohI5GQgwIvBXQD0QpS9Bpm2CBdRusPXKrNAoFAYDIazZyJ8aWw2m+Yb4ekXdVFpNpuVaTJFcR0uJ1S8TitTqrKy6P6IzHDJ84LHvhdNgL9voF9UOoUKcplOg54f2/0LKsCfFh3oSafTPQOj2QH2h38AuZKVj4c7r5AAAAAASUVORK5CYII=");
+}
+
+.flag.UA,
+.flag.UKR,
+.flag.ua,
+.flag.ukr {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABblBMVEVHcEwCWqMCWKHCnAACZKrDnQC8kwADU50CXaXIpQFpfFnDnQAAVJ7GoQDGoQAEYKYGXabGoQC+mAC7lQABUZ0BTZnIpAAHWaAAZqwBWaGzkwC+lwABSZcASpfNqgHMqgABWqK8kgC7kQD/1gD/1QD/0AD/zwAAWrv/ywAAXr3/zQD/ygD/0QAAYr8AaMIAX77/2AAAVrgAVLUAZcEAZsH/0wAAbMQAasP/2QAAWLkAbcUAXLwAYb4AZMAAUbMAc8gAcMe/lgD/yAAAXKXvwwAATpvCmwAAZavTsgAARpYASZwAYKfJpAAAaLPhvwAAYK8AWKLQrQAAT7DUpgDYrADMqAAAb8W8kgAAUaAGaLgAQ4/fuwDktQDFnwD5xQA5fJUAWrMAPor91gHdvxYAX7QhbqWzsjj7zgGKn1dpiWvx0Ar4zgEwaZAAbr4XX6Poxg7TwB9GgYs+d4UAYbmgpkWzoRnPoADlzBVBXViAjVX8aoJEAAAAI3RSTlMAY3RjsI+wVppWB5+4crdFKN1FKNuUyxT2ghR7xu3H7eLxVpWWwB8AAAJtSURBVDjLhdVpU9pQGAXgsIOAbDrW2h0QaAEVAWWTHQGLLIJAobSyiApo3Wj773uXhNybyPQww4fMc945ky9hGBSjSqpWy+VytXpTYjCuMEuyonoD/jck8lfHxycoaZwPOrXUYBToDdX620KBMUBdas9m5yDh4IG/3R6W0xWUNZ16UypRqVQS6bpuLZstZIsFBuhZPB5PJBLn4XA4GAwegHi9sUdYa8Fk2bRqvlALFErxhQ9i7wXx+/37sVgs+jgc/oQJRSIORyjU+oYLC0/zmMfjiUZ3XC5XBPu9Ii4AjjxeQ3JPdAd7B/RcgT5Pcf488rgg9CQXeB8onJQS3Bz+PM0jLN/z4QLlBZw8DzwqlLGn1hCc8kfFC1igPP9qCM75o8IFky5jD9ZTr4ZbQ3m2gP0+tSZCn2d9DRUW/sXx3Hnk2QL0sfboB8yozXPyPPa1wh+mUva2768uf/f7u1aQfv/m1+XV9f0IX6f99O9zjqk8PN0cHu6CWBexWW249zC99WF+O71+Gjid9RzzfIo5720wgUDA7Q6A3+RuMBjcjcefQVAhf0p7jgdQBcZut29vY88XqPMvc+hxQXBeyEn/5SyJCmLvJs5zc4BP4cL/OevZwhJPrOHup1Chs/BiTpxHnihwXryG9KmzJlPtiL1oDZxPFpZzgWcLlLeL1/A+NYcF5N2TDE5vvJxzhUmmk280Gl+5VOvdbqbnFPled94EhTzEplWFXqbRaGR6hXbV9B2lAXuZXg/SXqZbnyebTaWZqVbfazWvBd8Oi1mvWDXlcJIozeZHpQy6d5rlHyiLWbal0CqVSq1i65MFP/wHsGtWYmeyC0IAAAAASUVORK5CYII=");
+}
+
+.flag.AE,
+.flag.ARE,
+.flag.ae,
+.flag.are,
+.flag.UAE,
+.flag.uae {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABj1BMVEVHcEwDYywAAAABaTEAAAAAZy8AAAAAAAAwNhvHAAAAAAAAZzACaDIAAAAAaDAAAADXAwK0AAABZC0AAAABAQEBZC0EYiwAMxbRAwMAAAAAAADMBwcAAAAGbTvRAQHQAQHbBwcCbzjRAQEFcjwAAAAAAAABXSXKAAAAXifZAQEDbDQBbTYDcDgCbDXMAADNAQHZAwMAAAD/AAD///8AfToAdDAAezgAejYAgj8AfzwAdzMAci8AcC0AdjIAbyzgAAAAci4AeDXZAAD//fzkAAAAbCv7AgDTAADQAADY2NgAZSz6AQAAYCjLAAAAXiUAbjX/BgXXAADpAAAAWiMAajIAaioAVSHDw8MAcTixsbF5tpK32MX3+PfZAADxAADGxsaTk5NxcXFTonSTxKddo3gAdTj3AAAEgT+5ublFRUWampoiIiJSUlL/BQV0sYzI4dGfzLP/BwdXVlZiYmLm8eoODg4ZgUSJiYkoKCjh4eF5eXnr6+udnZ2s0bstjVU1lV/s9fCsz7kOcTRSimeks6qU27jOAAAAMXRSTlMAWPdioP9lsAZYlLh3RZ4osAmJe1bbUxRucbwU3yaCqDWVmLCFWcba7fFJ4klv7cdXp6g8bQAAAdNJREFUOMvllUdTwkAYQIM06QxWRFGxd0EIAiJkQKmiYKWINBEs2HsvP9zdxGhImUHHgzO+Qw6b977Z5PIhCE7XpN7Qqe7pUXbL+aMd9QgH9bx+8NS1qoeiEN8GZBEwIuseG+6g2S3NysHIMtKlBqorli6GTKFpgM2MboNoBdIkU2rkfF4zjy/XyJrCkUgYBJub3vS8CQcP8MhmM2MgWxEKhUFIGBJcnZ0Jg8BrIgntkLrNDEFR1Gp3Whw4FovDPcMWUHXUarViGGZ3Oi2EPxtZQ6LVAU0Hvh33HbjPCMjxdJ3052gBQ//03YTPCD6/tUr/8leXqwOm/nEd0qcFS8lk8iifyD1eYMS/+Rr/4b+8vlGDY88Ugefp8CiRezBTxgP/ovCcCmyxBmR3dnifT1QKuUIlkU+ewSMQ+ChXogUs/ChwfStY/+PBwe8Hnupg/mT/JHu5WwqkuILU5RU1CBlJ9srZTOma1t3GT8+NRvaA4PyqfHqT2Y3H43eZ7P4ecYj4uQNW/ndQTKdjtQbFmMu3AKkt8EWBOtCpb5VIGvtE2l5BW3sdl10nViB+/7hBooPbhbJoVAqttK2dYYtawMsJCfeCUilEDVKBWCwWSBsaVcThO7edZPwoA0fcAAAAAElFTkSuQmCC");
+}
+
+.flag.GB,
+.flag.GBR,
+.flag.gb,
+.flag.gbr,
+.flag.UK,
+.flag.uk {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.US,
+.flag.USA,
+.flag.us,
+.flag.usa {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.UY,
+.flag.URY,
+.flag.uy,
+.flag.ury {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.UZ,
+.flag.UZB,
+.flag.uz,
+.flag.uzb {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.VU,
+.flag.VUT,
+.flag.vu,
+.flag.vut {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB1FBMVEVHcEwAZy0AZyxkPzMBbjAAXSS6G0NoOzC7GUOvFDMAaCuwEzQAai0AbC4AYii3GT4AXygAYiivETGuEjGtETCyFDcAaCu0GDu4GUC6IUK4F0C6GkKxFDarDy2sDy6vHTqpDSmqDSoAWyMAczOzFzuyIEUBKhMAdjYAAADRDzHUEjnVFDsAiTkAjj0AkD7TEDXUETYAhTYAhzgAgzQAkkAAgDEAfS/WFT4AizsAYifPDi/YGUXSDzPZG0nXF0AAhjcAhDUAgTPYGEIAXCS4FTv+0BMJCADNDS0AaCoAeS0AczKwCyiuDy8AjDwAby81LAQVEgGAaQkPDAD+1R0DAQDODi/UrQ/xwg8IAgEAeTOzEzcAbCy0kg0cAQZZSQeghA3HEjf9zRGmCyf8xw6hCiQdGAHMqRJqWAoqIwMAIA3METeqDCoAViK2DSvRGkbDGELetxL1yBGIcAlGOARyCyCNdg5lUgYADAW6mxHwyBitjQz2yhQAPRp5ZAvAmgvMpAzMF0DpwxjEoxPlvhZyXQfqvhCWfAzBDS8AMxX3zhmFCSCmjBIRFwU9MwQAFAhjBhZMPwYSAQUARh4vBAyTEi83BhJIBRIAGgtCOAYjHQJECRiCEi5MzmmTAAAAKHRSTlMAb4IUVrCwBf1Wn3Jit0WUKJRgiZ6830l7KqJm267aI8bt8driP8ftZVm4CgAAA59JREFUOMt1lflX2lgYhqOCDu52X2bvLNeOaBUVMlopYiLgQBZogiWA2AoiyKYIqID7erR2LzP/7NybjdDW9weWnOd5830JnGAYStt9w72eB62trQ967j28e78NuyZthp/ha8vD1u9QZtS8+O12T8fdn77wWgy3fkkksN8RnU6nUk9RJiZSOzvp9MwLMd/fvnWz44bBYLjRcfOHHxOJxNzcIuYP/vtf+qmaCZjp6ekp887CAtT+0WT1+Hn/6iIGYHwf3qcUGuHTUzDmKbPZ/HhlZQFlZWVyaHKyHwn58hUNnTfrOyov4mL+gnkM82RoSOSRkNn3evdiNFJS1+FPEI74frjD59j5rtd7Gl4GIPhe4uu4pl7k/557hXbwUXnonEPlw8zXuJaXBRgyFPV6wzTwrzfiYn2df64K8DRXUW8pBMC7GS0u1yv8rEaASmzXu1cD/rMGvF4PeUUgy8VwDb6zudOtAx/4uNAwjYaXBTpa4k5LlLh+lCjWQHARtmunQeMgfjaxjgShyJJXW4K0PUMchoBv/XjoG/zc6yCAAlW6KJfZo31SWoXKEEd+eB/ffXx99mp1Vhpn9njxDNIALEMhdg6YIzpWouXlyTDBUaRyJfxBFL/4hQ2FK1Bg8p9D1EF+V2EAKxCRLLeZ21irseo1pNfKAv+yegCFELcMaIaLKnjuMJIVqnwEJctznCAIVY5/CVPZYNEO5N5+UcgTMRFfYrIRnkHTLV1s5MIVjkcof1jdZK7Q6eLifahRYSJKitcoS2Ri8FOhUL+hNK1sd7mN49KdpogiOhjKEPsbEL9MWgYtLvztSfzSJ7OFTydJj8kUkIWlNWTtEYcIj+ODo4MoRqPRbRmYRxm2WoefmUw2RUBhsls5OGXcM1rH3RbLAMzIiHVY5MfqQq1KROEfIu4alXgRd4t4nbeNORRhjY8wflCwN+JKvdI/NuawS8JBJAN/e9tudRoNjuoVflwSfGFikwWfGqaxqNOgeoWXBFKIMAC8NX5rGrVe4kWBrWRDoBBQ6xtwpd4m4uNOKJCb/AWIP/tqGhlH9XXeiduxoygFToyjg+4BBFitIwOa4dV6mXfiSayyDLZHbPMuGI+YgMfjmp+3mWRcywfwZBKDPKQfdTU3dep0us6m5vauOwEHSsDjcjrHx0Xc6fQ4cLvdru/GwPaf7bqWLx40vd1NfV13HLgayNp/1Tch7g/d9Q+o3u7O5r52vV7f3tes65UO/g8KP5hHuh/5wwAAAABJRU5ErkJggg==");
+}
+
+.flag.VE,
+.flag.VEN,
+.flag.ve,
+.flag.ven {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAACH1BMVEVHcEyXChnSqwLXsgKXCxmPCRXSrAKvaBadDR6cDBufPg7OpwTRqgHWsgTWsgKbDBuUChefDh6fDiDQqQHXswnQqQHXswSaDRuaDBvWtAHYtQLXswKNCRWSCRXTrAHPpwCkDyHPpgHZtwGmDyHZtwOnESGKCBDbuAbOpQDUsAHVsAaOCBSZDx2YCxn/0wD/zwD/zAAAIXfDDR8ALYbGDyLKESX/0ADQFCsAKYL/1QD/0gD/zgAAKoQAHnHNEifRFi7/ywAAInnIECTBDB3/1gAAI3vFDiAAMIgAHW/LEScAIHUAH3PHDyPPEykAJX4AHGzXtADNEynUrACgDBu/CxsBMoqSCRYAJoCOCBMAJH3/yQDZtwPkvgAAKnebChi3EykAGmoAF1vcrgLQqADvwgIAFVPWsQABJ3GkDh+sEiWpDyETNIfNogC9DyP4zgGuCxuKGUdjaE8aOIfyyQAEGWMfP44NMITowQDInQCkCxm0DR9PGVQALXuHfDo6GFcTMX1UaqUqRpD90wC7DBxMXmGgiizAECUzHmGJmMJ6jbsbLnB2FULL0uT4yADzxQGslyrMrxs5UmbftQDCDyNEX6EaH21LXWB1eEpcGlRjHVeSFDxSF09oFUZxHFGnEC6YjS+EFjymsM48SlyKhkBdda7mtwpQVlFtgbQIKoDg5O+vutZHImWBdjvEGDWVHUlWI2ISKn6FciYgLUs1EkNyDCNZa8rZAAAALnRSTlMAY3Jl/rBaBVeiE1TARZRLlIhziRyesrzfoq57Knvbrtra8e20xz8r7eIq8SNvyMQG/wAAAyBJREFUOMt91VdTWlEUhuGjBgR7TWJL70XBWFAjKiiJUhTbQcFOLKAQUDBiQMXesEbHXseWXn5g1j4VieQbxwvnefcsxgswDC34MTcpIiHxemJCRFJQ+LNgzM+CQ8Pgd1zQg3vaCmLt1J6GRQSGx/l0IaHxT7q7sfBErVar6+81mdzuVLfbZOrV9+uW2yvRboXFxwYGcUO53MDY23fb2rorK7sx0L3u4pycnFR6ubAsk0dPZm30Kpf75wtbIegvLvb2uYSnliaY93j0MM98oUAgKKynAh+fxS4NlpeXJyBWSAY6L381p319fX3rBwj8+bR/PQoqdLT/Lyc9FVzhGc6ezwaM98sZzwSmxb11y9jY2NqaZf1oYVF/mbNe//MX1q7THi3V1LyBn1dor2GioSWLc2HR43PO+ElHXwu2BxowjOEikX0Ex0Uq1czhicXpHF8Yd36xHM6UyeX5EDR8JD39vEi0eoyfnlttFzZVXQmsqKhIKBSWyZGnA/Z5eF00PWe0rdqNF6tnRiPNYci/bXmHAm9vmzLarbhKpaqrs9vPTxkvJzwZMB49PzI3rCI4HHM2bC0RXvLlEHQ0EJ46R4TbaE5cMzI1RJ+DPBUwHrdPH5+xHK4ZnrMyz4NvJgLW4/jUtMqLC8tKhoTeng7Ic3D4rLi9juXoeOHwSFk+46kA/MznjZ33aDsbg5OfhDSH1w8O2Peb+37/geDH929fC2DZ2dlKpVqtVItLmzZnoUP/K7l1CHHw5X2uWcdALTa5X0AOeTWaWFyKlpk5sbs5u7016HK5Bre293fTYRB0NdFeqSQ5EWQSk0gkCoUiIyNDJpMhL61iAsqLSc9wCc1JzwbUOd7PM9zLS6s0RECd7/caxleTwSXvw5nnCV/diALWX32Nl6cD8KWSlYke2MSKwg9HHgWGpuzSHoehE1ZFrdNgdvSsyGS+ftTcqIGgqwvsHX50TACPxwuIiebfuHmtEa1qwGx2jI5KpenS6lGHeQC0hvMIMxju8yNDfL5oXkS+jIKOWC05jeY5JwC5hzz/X1DJkQEpUXwOh8OPSuElk3/8C8TT1F6pSx9yAAAAAElFTkSuQmCC");
+}
+
+.flag.VN,
+.flag.VNM,
+.flag.vn,
+.flag.vnm {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABFFBMVEVHcEyqHRe5LCO/NSufFhGgFhCrJRyYEQ2tIRqwJBygFhCoHxipIB2zIxy4KiKnLBWrHBW8MSfBNiu5KyKvHRevHReiFxHCPTGgFRHaIxvVHhfcKyLWIBn//wDXIRreMCfeLybdLSTcKCDYIhrbJx7THRbQGRPSHBbaJR3RGxXgNizbJh3fNCrfMijOGBLhOS+0IhqoGBKeFA+uHBWjFhC6LCO0GhThPDG4KB+9MSe5GhSuFhDCKB/JHxjKNizGLSTANSu/IBn2ywXgTxf99AHPJx/mcBLwqQv42AXaNizGGBLqhg/ePhffPR7iXBT76gLbNBfLMSf++QDVJhz0vwfWLiXbMBr64wPTOC7tlhDtlxHdQBblKCsGAAAAGXRSTlMAhnawr5oo/ldjcUcUwqAH25T231HtvD/iS2fmIQAAAo1JREFUOMt11ela2kAUBuAACYRFhFZtUwxCAItQNsMiYV9kCbKL2nL/99E5sySTtJ5H/fV+HydDYgQBj1/2xqM+ny8a9wbD/kvhk7mUL9DfSND3ZdgetvE00E+j8fUi7g37XTpyFb3WdeEb0sN+/2O5rFQqhcJyedrvB93GExqUi3q8QVmWg16PGKvqutHUBaQ/Wq1WBXM0v9CUSnen0/Ogi0JVe0a9ozJCgX6L84SX7tCkUul0OnF6JnPMF/OKohg0QL2bowCMpmWzRezzNODwHE8TDj4PXskYNQjY65B6F+c8BNp9Vz3hk3XCqs/idcAnaeA/9X9Wdn2R1meSNMA8f62LV01j9ba/hcCe92z3iTpdE26tA/62SQLgnUf5W1VnhFvrg//RrAuNQYGv36xxYKGqc2sb2+PAnnhSn5hND+/j+VxV1W2+aHHmySfwHm2/VemM56vZ5GXH1gdPAtjbX9R6oXIzndF67HMk4PBa9m1s+9ezw5OA7enBZ8f/1FP/s/MoPA2cHk6SLjXeAWf14Ekg5ahHJ/nC9kly9dg/QKDrqleUFWxzQL9vPAfPAq67Hl3CfLeZqurG7e9JwPFQKcr5sNigXdAXMqccrwOeBJhn98FsRa71/L7l6rGHQLXLPLsPiuzkd+MJtw74+04AApzPZKyTR+3HiV2PfRkHnN55lC6PAyONewi5ent725drEHA8hC5O65knAcs7tmGc1WNPAtgncz0yDzn3Npwv13Hg2Bs1dV2vsdGbxsgsOzj2plEPBAS9CjgmekL4/3rII93E6nhqHcMwzV4ZtGkaHaQDYljQ9WvpKuJ6d/jDIenme/3RmgCMGAJ3IX/+gvKHgx5JEkVRkkIyfSH9BRNP8oznHcTqAAAAAElFTkSuQmCC");
+}
+
+.flag.VG,
+.flag.VGB,
+.flag.vg,
+.flag.vgb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAADAFBMVEVHcEwAGVEBHVgAGVUAG1QEI14GK2MIF1ABF00CG1IAFksAEkMADzwAFUoAEkECIFwCKWcILmwDIl0AG1QCIF0AGVQAED0AE0cAED4ADzwADz8AE0TZ2dkCJmQDKWexGTsADDkADjoADzsCJGHX0tLZ2dmirrkEMnEDMHC8dISsGDa7anzHrbYaPXbHpK4AIWkAJG0BImoBJW4AH2YAGVgAIGcAIGgAG1wAH2UAFlMAHmQAFlAAHmMAHF8AGFUAHWIAHWEAFlIAHGABKnMAFU4BI2wBJ3AAFUsAGlvQG0HPGT4BKHEAE0gAK3QAGloAEUIAEEDOFzsADjrNFTjMFDb///8BH14CImcAG14AJ2cJH1sBI2MBHFgBKXIAEkUNK2719/nZSWYhZD8BIWABHlsBMHccQ4QCLW4kakXszdYAXSYVOn37+vvaV3AOXSb57fDUN1XgboXyxM4CUiDusb1HZ5wpTIgADz3Pmx3qws1TcCA1VRokYCHo5uaYdh4PLXI5az/qnKuEl7rt7/Q4V4vtqbb2193TJ0zQk6T99fcSKmjyydHgqSMeXjYCNH0YXyLJpbB1fiamfRuxFjkKVyI9aCDIFTbGyMNMYZUEIGT55OgNJWK3wdbmhpq8GT2QoLy3nLUcYjrWPVyGe2G9TGYIMXfrobBBW3zz0NiykkUhYjq9jx4lZjw2YR+WiWzxwMmKhiFicB6tm29qdh40TBxVdVbGvbKitajk4uB8hay8YXhwhq4/Zm2YkbDQLUrWQV1MU2fTeIypt9Duu8bie5FEY3ngaIHdxconOmu0usR3kbg5SXHQ1eBcXWdSd21pbXba4OucGEKZqsgPPIJxfqLAjp+6KUlrgKNzb1wUN3bEq7rusyh7gYZqUxZNURqIiok2Z0/e29oTVCFUcYLmkKAlL2Vdc6Hnk6OOJEpBUHe0pLxIYn0lVSLAxcwjQ3fQ0NG0iBnbt8Whm7g1XljCmCyebD1/ZRthXRxwg2F4mYNrg3FfcD6er6F/pI1fgmZrZRxfPKHSAAAA1XRSTlMAncP4YFQmBVdzE36z3ZSOf2lZrtvtZryhripJ+qBJsD/68fo/rha08ZW84q6To/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////4OQDjAAAAEp0lEQVQ4y3XVdVwbZxgH8IMPEkqBeku7rnPfgBCWpCkHoYGQ4HJAGiQJFtwp7u46fLhThhRZ3ZV6qZfK3N2tz3uX0LCtzx/54/L9vXne957cYRgqbS3NFW++tWXLG5sNVqx8Wksbe0Jp09Th86WVL78SHBx8s6q29pYIld/V11979b+5ZZpqa3Ece+HFp766HhQYWBGULBCEBAYG9l6fv9ZT9Y1YLH5+jfpmAx2NVZqrNHQMVq/xxnEGzsWu9RSlh0suBykDCVXSrnhCkmNHF4nE/h5QAVDe3t6OHpYsM0cONn9YWnhiAERiskAYcuX7mMK+YuJykIODw/btPnY2dGsTT7JMTIzeNjNlcLDgxDO3jhVGlBK5pQJhwXfSmCiiNZHiPnZ2NjZ0Ot3Y2Nqa8iwUCKy4ciYqtpkoPip0iY0qJghJa/vehCCKk57kyJuycAjkHZEU9MVICwVCodDFRSiIjoj5ML4gykfJVf1WnIedPtnWJYASkh7KDcrd/R2Ko+XJdii/DQI97/4PhwCdvrg8ah/6B2+B87FaFIg+0ZYf2+fiFl/6Xv4nxyK6hGQAuN8Hx7/o7+8/vm/feU/wlmwUiMhuJoiCtoFSF7cBCRGfnTuXSzQfJVe3zpR/WRkamRqaGinzBG/F5WN7Tl5szwmPjS5KSHZzD0m8WBxzcL/PzbyPqW4y5eNjkVk/1WVUj3iCN+fwsfa8igRJfHRHWBgK0HuPENkHOsKovZoYZcrT6kNHRkN3VXY2gffi2GOi4ITw/IP7ex3Ckt0hYEPfGx57YD5RsdlM+S8pkb+lZ/2cMtQEnokCeZJs6ftwZ6kAVGNuc/ThRursM+X11aEzD35N2dXZBJ7Js8e+nssnvU9Yx6VLnxujvQbNRUVEkGdv5idfSMuabrixkDZkCd6W54udLpJeRZ4cG2PyaEwyc1r3IG5q6iebHJuamc0aS+n0B+/I98WqPm2k5tJG5UYZUZzF8pOF7s6ama5bqCz3AM+AwEciBzSXj8dskcMobIXAP9UNDZEZk+Ue4Bl8J0wsUvrFMVNwGIVtfrLdafXp6fLUunImeIY9FbBbsrySg7cokWWMR6bPTmWMlzPB4xDw91TxRtRYKrmFZYksNS1uVvJXaqUMfgAnA2K7x+0o96rgllZWP9ytr3sQ/ufd+vMl4Nn2zpiH2EblT6XYq5KbX5ioTqmbbvh78o+J0R04m+2LAkqv0o2Cm58tu31nKO7hw7iRe7eTzrEhsBMLEKt6RTcU9/I6NJz04537cXH372UkDR5is7ko4K98JpipdoM4k9nyWXdZzejvUxM1ZTdOgeeQAeUzZGk3wGEWbEu6v00aTqop696BPMfJFfP2sF58Jqh2Q3JHR0bLhcHhmsFzDDYXPI8MLHqym6UcVcvZU3A+pOc5owDpWRbmyNjaMpleVDcKDqcPHLUDngwEGLG8HHEOdYGPisfhsHGGKld4X2dXVwy+wblsvdXwXKfRaBo6umrr9fj2ZPF5PA6XS3Ie3x7pZw2fwXB8rZrmsn+9aLQ26eiv1/N1IssZaifUc8vXIadOe/ILauOmdbr6GwyXG27Q16VtpC4+As+IMuWytz9mAAAAAElFTkSuQmCC");
+}
+
+.flag.VI,
+.flag.VIR,
+.flag.vi,
+.flag.vir {
+  background-image: url("data:image/png;base64,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");
+}
+
+.flag.WF,
+.flag.WLF,
+.flag.wf,
+.flag.wlf {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABgFBMVEVHcEy+Ii+/Ii6FJEevKSnFKzmrFB27IS29IjCwGCO6HSnFLjywHinILz6uFR/X19euFiC/Ii69Ii+/IC20GiSqEhwCNZHHNkS3jp6xFiHGLDoIOZIANJEFNpEBM5DIMT/Z2dnUtbfZ2dntKDjrIjHuKjr////sJjXsJDPtJzfpHy3uLT7uLz/uLDzvMkLqIS/vMEHuLD3vNETnGyfoHCnoHSrvNkbtJzbwOEnpHywANaQAOae8HSn71NcAMZGrExzDJDKxFyHFKDbHLTvAIC3wPEwAMqGdsdu5Gye/FSC1GSTcIjHEGSTwQ1KuFR/yY3AAM5bIHCngKzvTLTzMHiv6xMn2mKAALYvRJzbGIS/PIjD4t7z1lZzJMUDzdH7WMEDzaHTxWGTgGyfX19fwcX3lJTT1jZXkOEjnLD34rLL9+vrzeoPRGCP3oKf0ho7ZHCn83eDOLTzJOkeLnsPz8/Ont921dptyd7Y+Vpifa4wdSaz3sbb97vDKWmTdYWzUs7b2dRgiAAAAI3RSTlMAiK4UBpuwV2JzwnUmuEWhlNpR7d/2sUkqoNs/+mjx4leyeQiz68YAAALuSURBVDjLhZX3V9pQGIZDle3WOrrbAAkCAUUDZToCdYA4kAqiCBVw4+pe/3q/+92EXDh6+h5Ofnqejzc39yYch5l8825wcPBtv9Fot0xM9nKPpNdsg2vPy/FXd59I/h6Q3P4+eN1vtE/0ddE9I8ZRReGej79IJDbv7u/PXK54KhVuNpt/KjfLmGf9RoPdYjabLXbDk+EFRSkWFQ7odDT6wUUCQioczh6FZXm2uV3ZuVnCLGCKpfW6uxTjEpvRaFsIk2SPZBAgkiR5T062MSdOJ8+7HxRkEFRcCnghnpkZn5PyQl4VIrogg6DhhPd4Znw+ggMf0oSIJsikTOpIx/XxyKtChBVmZ1M5Hafj27yYX+E+bkZ0gXQnQhvH8ZQXgEchAXxaFyQpldNxdbzGi1tUSGsC6Q4Ci9PxKq8KaVYIBMI5xNttaH3kHSgAH/l8dr27e3p5eHgMvxxOJ3zg6rxazaaykso7ttZA+PH1y3FVxqXHhZcltYxT4s/PyD/v+kTK+0H49j0Xxp2gP6h2+XLV3UA+dE55ItxWkNfGs/fKF35lQ5fA86f7lCfCcoXlWZx3F1zXsvvKK1669h3IT2dQ0OswS0PWpgALB/XLLhD8hJ/OLHLLOxrP7ANc+pBQwPsV4iBQXhX0Oh24AALwOVGKowD8exQ0ntkHiIPwU4A+BYcU36f8PBXUOt24KGYFAfq7yn7vFeXnMxvc0k6go46Oi3A5xS1TJjjhqaDVYceL9NHy2erxYaPRkFV+jgh7HTyDw6PCxaf1kZ9bJYJHP4RugRmv4QwfBGFhr+PQPohjHcIHV5Mg+JhDyLTxP8BT4b/jKR8MtoWOQ9WNM+M1gdapr9PU/Z14B08EpcTX10vFGGYFE9vKt1rzOq7xtYvVJAjwCldiw08MVnyvWw1TtrGVNZJYJn/RqtWCBK+1LjJryeRT0wCnKKPGkZ6uD03fgHXINrZIs4EhtJVwNvPjH6i+AYt1aMpkMk0NWc3qB+kfL/FGPEkfoQUAAAAASUVORK5CYII=");
+}
+
+.flag.EH,
+.flag.ESH,
+.flag.eh,
+.flag.esh {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAAB+1BMVEVHcEwCAgIAAAAELRQAWCoBAQECAgIIKxYDAwMEJhIBAQEBAQECAgIAVSgAVykAVSgDAwMATyQAUiUATiIBVigBAQEBAQEBAQEAAAACKBEAVScASSAAWCoAVCcATCIEBAQCAgIDAwMAQxwARRwMCAgASB8AXy4AUCwAUiQAYC8AYS9IOyQAAAD////IFSEAazLHFB8AZC0AbjQAdjoAcTYAYizLGSbNHCkAczgAeTwAaDAAZi7KGCUAajEAYCrJFyPGEx4ATCEAbDMAdzsAdTkAbzUAXijFERwBWSoAVSb+/v7GEh3OHi0AXi0ATyOuERqzFR+nEx4ASB+iDxiqGSN3d3cARR2vGibDw8O2GCTGxsbX19fxyMpVpn6xHiq5Gii6HCr8+/vqqKzkkJXXXmXuu76y08FdXV2bx6+1tbXk6ecKAQEJdjyTwagkg1APDw+hoaHZ2dn2+PfUSVL88fLHHyr66uv23N6WlpZUVFR2tJRyRzKGEx2srKwmJiYjBQegGx+52chvrY1RUVHs8O7Y2NglZj2RExnWVV16LiL009Xmm6DKKjPabnS7u7tRmHFHl21jp4OKMSYabTned36EvqBoDhUuYjWNjY1FCg5STi+yp6iszbtyERo1NTVioH4TcD2NqprX6eC9FBxEmW3IyMhUTC7fgofNNj9zDNFBAAAALHRSTlMAY/wUV650BVcpwN2UdYRiS6CulEuinoLvaLyztd9rsou0rj8/8doj/Zztx1ViDCMAAAKkSURBVDjLldVXUxphFIDhRboFVFAzOpreXUAERECa1AUsRGwhJghYscQC9h676b335GfmKywEZGfkXHDxzfMezt0SBBy+UMArruCe51YUV7FKhXyCYfiCQvDLZl08V58xBUWFxbxTHbu0EjjiCregnmFAV1nFYwkEAhbvArcIO2JlvT6vIQYefBrPM/B2recZeOff5RH0gMDb9DqP4D4MmlbyCprA7I2fPYBeo9kYP2uAvcYw8GF0dHT6bWDx8xSTntqeJnr6kt5gmp0j8VA7v6YD22tZ3drw6szDfqKrj/amdEEeHsVJMjTWv7oQCAwvDgcCC4/H4DsOIIdeJtsPYR89PqTgP5HZg4K0l8kiyFB/j8gomWseoQBx6BUKxUtYJMzBuVkqZ9ALgtR64BVh6ILzwXnnfjBHcLeX6OwwpNabZYPoOWGKh50nFFNwypPUcfAk8odkDpA3m52D9Hs4kqCizAHtw6n3UGSQzHURhYKk9yzfA7P0amTz+wxJReO5/mDm2y4K0P7lZjStrY2NzZM/tyY2x0KZeufjl69uC9HZDr3H8zzJgbfZtFqtSqWKTT59tjQxMjQ0NDKx9WRSp29QowB6c1eMXm+DXgXHbrcrlVarVd7SogNa34CCO+3AOzteJNfb6PWYAy/HXg+9us0PAuCdb1Lrc/C0N6IA+PfY/3+NEl9Drwf3A48Dp+cgvT7zeMTp9cA7cLARw+sZr0l5R1s3CH7sAm/T2pWAyOVWZQZPeSP0DgsMftvsugYfHFdyfD61XpfBsXdbukFwoFP7fNfKRSViDocjLhGVVde63GhcDp/RqFbD9Q7wZPF3+y9dJvZct25K2VkfmuvSOkl17Y02NBY4fr//ak0ddLc5zB8ooVQskpSV15SXSUo4Qvz4Dx13ctNpN95TAAAAAElFTkSuQmCC");
+}
+
+.flag.YE,
+.flag.YEM,
+.flag.ye,
+.flag.yem {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABTVBMVEVHcEwAAAAAAACwFiqxGC2wFyy3HTUAAAABAQGsFCcAAAAAAAAAAACvFCiuFCesEyYAAACzIDNiCh0AAAAAAAAAAAAAAAB6AD0AAACyGjMAAACxGi8AAAABAQGpECK6JD26IDi4HTanDh4AAAD////QEyrOECXSFi/UGjTVGzbRFS3WHDjTGDDMDyPXHjvLDiLPEijTGTLPESfY2Nji4uKvDR2sESPU1NTXID22GjK1GC+5HDVVVVXyu8L+/PzEEympDh+wFCmzFiuwsLDmg4/DHTfAGTOlDRzCwsKgDBrqmKKRkZFGRkYlJSW8FCnDGjTFxcVwcHCZmZnuprDkeYYPDw/0ys/cRVrIESfeZHLLFy3NHTm6urqGhoZ2dnZiYmLeXWz65+nr6+uenp739/fUM0Xusbf88fPMGjTfaHXasri+VWS9WGPHx8e/pqk8+g0iAAAAI3RSTlMAn2Ogdo+wsFZWcpTdYt3AKCgHiHsU7wO8FElJP8euP2jx7cm5DxcAAAHNSURBVDjL7ZXHUsJQFEAfLQWUYgF7Q4MCogHRhCgGEkBpSpFq7/3/l75LUAiZLHTGGReeRRZvzrm5u4sQ4HHRZouJIAiTxTw87RpBOozQDvydXCAWeV7geT4GJDF2h8U87fKo7UnatJTJoHlCEIR0qt0OhAKBwNrq4+NRuhhLJgC7A/5I0/Sw2TJnF8VMVMwgQUi1OS6EAR+zCrC+1n6xmExsdxFFMRotNpgoDlKcxmdZNhgM+nw+v7/V2AcaDSbMMMx6N1B8jQ6B37+C2dwMg4+DQwi+xivbaHTwO/o6BHxK5av1QX8DgqO+dTrbaPSe3w2043t6b33wO0H60/8ar9KV8V0fglga+1y9mq3sAZWs3KxzKz390wd9o/X6joO6XIsvq4g/1Cry5R0bDvePv2veP0Te0MvzgN3XXdXus3L16bJZlbN7V/AUOUY7W8vf4C8GB38u2PlpEI9IZ6Vd4PysfBq51fNvcwUcXJfzJ141hXwpd7o10F1LF9hDN3mvHieF/MV5rixJ0k2utFtQHpH3m/wHvxkMkaNWI0VRRuuoYWJIXydncOA2UOPq0+FxTlltms5NGsGbpfQPlHPKOGYzkCRpsI1RTuUgfQDmGweTWW3ScwAAAABJRU5ErkJggg==");
+}
+
+.flag.ZM,
+.flag.ZMB,
+.flag.zm,
+.flag.zmb {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAMAAAD4m0k4AAABelBMVEVHcEwjggIVbQAgfgIYYgMTaQEmhgIZcgERZQgWbgJIagQfewMadQATaQAZXQAniQAUbQETbgBtaQQPYAAVbgAPXwAAAAChEAgdegETagAceQEffQEgfgGpRgAWcQGqSAB6NQAAAACpRwAAAABSCQOfEAefEQmfEAgAAAAZiwAhkwAbjgAekAAXhQAfkQAajAAllwAWgwAYiADXFwsYiQAnmADcHA4VgQAjlQAXhwAUfwAWhADaGgwUfAAilAApmwArnQAdjwATcgAYdQATeQCrSQAYigAbfAAjhAAhfwDsbgAomgAhiAARaQCuTgASbQAQZQDraQDqZgDqYgBwDgUmiQAdgwA5cwHGWwDBUgAmjwBtDAQOXgA1bAKwVwCBagCPbQC0UwBFfADudAAyfgAzZQHBZwDXcwBddAC7YQDSFQqmZgDNagC3VwDMXgCISwieQAoIKgBlWwAiWAChEQiiEgi2MwsFFwACBgBLQgPlXwCGOQBSCQOjEQgAymAmAAAAKHRSTlMAmp5jKFewcwVLFFiDjmL2x+0/vK7fm4jb2ry84q7atPFWaHmurbKgb4bpagAAAqxJREFUOMt11b1v00AcxvHv2T+/1rHaQtqlKQJV6sCIRAcQYoKRif+Sgf8AiQVRqQPvSBVC0IqXUCLSpI4TO2cGv+Rsiqco+dzj586Xsw2AT2Bp5dq2VtHSx825/PJVLBDObe9+jwmAKn94U3xzrUzSlg6LeXAPtTkNHoDz3tkCGGbxDueEYwBeWT/CLPchFdcL9+hN6KnHOMdrQEEEQ8gAH/dsey1kTC51u0KpZBKFkeB863gf4OpPQNA2NnsfcJgxiOLtK8dSjScyuMsZIACb1zl6h2ztfGU389xJ+S2FGb/iGtaC7O6Fn9vpjdSx3PzTmkw2a1/HG7zP5yBUrvJnvtI46cs+Uua34xvOkPdyaxktg2xJ8CyPsYWs9pdxEF4QbG8p5qd5nHgIGL5qY3IWA0a/rqX+EXFCD6Gpb8T3gWHJGTDSfOGcOMEFYVZ7s02dzoAR2uOUOE5wby4LUUadS9ow0nhMiZONfe2d7BXS9QZnwO7mgoIwxVVPd5yTasHL+m2+gAGMNl4D7L4F4DsM+2LU1+3yjNDdP8TWRHRR+Tre5F53wDAQ4qTxXT7NTPwHytufGXXETJ9W0m3GeOWkSz9crWTN4399tb21Eb9Kj0lMjgf8FpCVXz2oipu+vCSv8o14g3e8AmFceyO+nT4zR0i51YRFtc2mQFxzu+VVtayNN9u0ePn8Zr1qQOPbbex6SGsOMwFkwWCE9rptuhxV3kFWdcw2dnfC1RyKpKnTKm8DeP4/B7jgDRhpbyo92yNgzpKGX3biC/B93Y2uUroIYGlNsBpy8LL6sD/9dYag9Q04zOYLbwbB3Ek2rDtRD5iytDgADsrD//YhfLxQj3g+tp2k/aLJHe261kPYDlMK/CcAaWH/SFDrF3b6vxdU7jgB61rpc3r6pHxT/AXIg0juIZ/ULgAAAABJRU5ErkJggg==");
+}
+
+.flag.ZW,
+.flag.ZWE,
+.flag.zw,
+.flag.zwe {
+  background-image: url("data:image/png;base64,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");
+}
diff --git a/packages/core/css/index.js b/packages/core/css/index.js
new file mode 100644
index 0000000..726af0d
--- /dev/null
+++ b/packages/core/css/index.js
@@ -0,0 +1,246 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+/* istanbul ignore file */
+
+import {
+  backgroundColor,
+  borderColor,
+  colors,
+  textColor,
+} from "./tailwind/colors";
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(
+  ({ addUtilities, matchUtilities, addBase, theme }) => {
+    matchUtilities({
+      area: (value) => ({
+        gridArea: value,
+      }),
+    });
+    addUtilities({
+      ".z-1": { "z-index": 1 },
+      ".z-2": { "z-index": 2 },
+      ".z-3": { "z-index": 3 },
+      ".z-4": { "z-index": 4 },
+      ".z-5": { "z-index": 5 },
+      ".area-content": { "grid-area": "content" },
+      ".area-head": { "grid-area": "head" },
+      ".area-foot": { "grid-area": "foot" },
+      ".area-side-s": { "grid-area": "side-s" },
+      ".area-side-e": { "grid-area": "side-e" },
+      ".area-body": { "grid-area": "body" },
+      ".overflow-wrap": {
+        "overflow-wrap": "anywhere",
+        "word-break": "normal",
+        "text-wrap": "wrap",
+      },
+      ".fixed-numbers": {
+        "font-variant-numeric": "tabular-nums",
+      },
+      ".bg-alternate": {},
+      ".scroll-thin": {},
+      ...Object.fromEntries(
+        Object.entries(theme("spacing")).map(([key, size]) => [
+          `.gap-${key}`,
+          { gap: size, "--gutter": size },
+        ]),
+      ),
+      ".span-1": { flex: "0 1 calc((1 / 12) * 100% - var(--gutter, 0px))" },
+      ".span-2": { flex: "0 1 calc((2 / 12) * 100% - var(--gutter, 0px))" },
+      ".span-3": { flex: "0 1 calc((3 / 12) * 100% - var(--gutter, 0px))" },
+      ".span-4": { flex: "0 1 calc((4 / 12) * 100% - var(--gutter, 0px))" },
+      ".span-5": { flex: "0 1 calc((5 / 12) * 100% - var(--gutter, 0px))" },
+      ".span-6": { flex: "0 1 calc((6 / 12) * 100% - var(--gutter, 0px))" },
+      ".span-7": { flex: "0 1 calc((7 / 12) * 100% - var(--gutter, 0px))" },
+      ".span-8": { flex: "0 1 calc((8 / 12) * 100% - var(--gutter, 0px))" },
+      ".span-9": { flex: "0 1 calc((9 / 12) * 100% - var(--gutter, 0px))" },
+      ".span-10": { flex: "0 1 calc((10 / 12) * 100% - var(--gutter, 0px))" },
+      ".span-11": { flex: "0 1 calc((11 / 12) * 100% - var(--gutter, 0px))" },
+      ".span-12": { flex: "0 1 calc((12 / 12) * 100% - var(--gutter, 0px))" },
+    });
+  },
+  {
+    darkMode: ["selector", '[data-color-scheme="dark"]'],
+    safelist: [
+      "font-san",
+      "font-serif",
+      "font-mono",
+      "object-fit",
+      "object-cover",
+      "object-contain",
+      "self-start",
+      "self-center",
+      "self-end",
+      "self-stretch",
+      "items-start",
+      "items-center",
+      "items-end",
+      "items-stretch",
+      "justify-start",
+      "justify-center",
+      "justify-end",
+      "justify-between",
+      "animate-spin",
+      "animate-pulse",
+      "animate-bounce",
+      "animate-progress",
+      {
+        pattern:
+          /bg-(black|white|base|dimmed|muted|dark|light|invert|silver|steel|olive|sand|info|danger|success|warning|scarlet|pumpkin|marigold|avacado|jade|denim|iris|lilac|coral|wood|primary|accent|tint)(-\d*)?/,
+      },
+      {
+        pattern:
+          /text-(black|white|base|dimmed|muted|dark|light|invert|silver|steel|olive|sand|info|danger|success|warning|scarlet|pumpkin|marigold|avacado|jade|denim|iris|lilac|coral|wood|primary|accent|tint)(-\d*)?/,
+      },
+      {
+        pattern:
+          /ring-(info|danger|success|warning|primary|accent|tint)(-\d*)?/,
+      },
+      {
+        pattern:
+          /border-(black|white|base|dimmed|muted|dark|light|invert|silver|steel|olive|sand|info|danger|success|warning|scarlet|pumpkin|marigold|avacado|jade|denim|iris|lilac|coral|wood|primary|accent|tint)(-\d*)?/,
+      },
+    ],
+    theme: {
+      fontFamily: {
+        sans: [
+          "Avenir Next",
+          "Avenir",
+          "Noto Sans",
+          "Roboto",
+          "Helvetica Neue",
+          "Segoe UI",
+          "Arial",
+          "sans-serif",
+          "BlinkMacSystemFont",
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji",
+        ],
+        serif: [
+          "Noto Serif",
+          "Georgia",
+          "Cambria",
+          "Times New Roman",
+          "Times",
+          "serif",
+        ],
+        mono: [
+          "Noto Sans Mono",
+          "Menlo",
+          "Monaco",
+          "Consolas",
+          "Liberation Mono",
+          "Courier New",
+          "monospace",
+        ],
+      },
+      colors,
+      gap: {},
+      fontSize: {
+        xs: ["0.75rem", { lineHeight: "1rem" }],
+        sm: ["0.875rem", { lineHeight: "1.25rem" }],
+        reset: ["1rem", { lineHeight: "1.5rem" }],
+        md: ["1.125rem", { lineHeight: "1.5rem" }],
+        lg: ["1.25rem", { lineHeight: "1.75rem" }],
+        xl: ["1.5rem", { lineHeight: "2rem" }],
+        "2xl": ["1.75rem", { lineHeight: "2.25rem" }],
+        "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
+        "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
+        "5xl": ["3rem", { lineHeight: "1" }],
+        "6xl": ["3.75rem", { lineHeight: "1" }],
+        "7xl": ["4.5rem", { lineHeight: "1" }],
+        "8xl": ["6rem", { lineHeight: "1" }],
+        "9xl": ["8rem", { lineHeight: "1" }],
+      },
+      extend: {
+        backgroundColor,
+        borderColor,
+        stroke: borderColor,
+        outlineColor: borderColor,
+        textColor,
+        fill: backgroundColor,
+        screens: {
+          xs: "320px",
+        },
+        keyframes: {
+          cardpulse: {
+            "50%": { opacity: 0.5 },
+          },
+          progress: {
+            "0%": {
+              "background-position-x": 0,
+            },
+            "100%": {
+              "background-position-x": "1em",
+            },
+          },
+        },
+        animation: {
+          pulse: "cardpulse 2s cubic-bezier(.4,0,.6,1) infinite",
+          progress: "progress 750ms linear infinite",
+        },
+        aspectRatio: {
+          screen: "4 / 3",
+        },
+        flex: {
+          full: "1 1 100%",
+          content: "0 0 auto",
+        },
+        maxWidth: {
+          screen: "100vw",
+        },
+        minWidth: {
+          screen: "100vw",
+        },
+        borderRadius: {
+          capped: "var(--fabric-rounding-cap)",
+          DEFAULT: "var(--fabric-rounding)",
+        },
+        boxShadow: {
+          1: "0 0 0 1px var(--fabric-shadow)",
+          xs: "0 1px 1px 0 var(--fabric-shadow)",
+          sm: "0 1px 2px 0 var(--fabric-shadow)",
+          DEFAULT:
+            "0 1px 3px 0 var(--fabric-shadow), 0 1px 2px -1px var(--fabric-shadow)",
+          md: "0 4px 6px -1px var(--fabric-shadow), 0 2px 4px -2px var(--fabric-shadow)",
+          lg: "0 10px 15px -3px var(--fabric-shadow), 0 4px 6px -4px var(--fabric-shadow)",
+          xl: "0 20px 25px -5px var(--fabric-shadow), 0 8px 10px -6px var(--fabric-shadow)",
+          "2xl": "0 25px 50px -12px var(--fabric-shadow)",
+          inner: "inset 0 2px 4px 0 var(--fabric-shadow)",
+          paper: "0 1px 3px 0 var(--fabric-shadow)",
+          none: "none",
+        },
+        boxShadowColor: {
+          ...borderColor,
+          DEFAULT: "var(--fabric-shadow)",
+          base: "var(--fabric-shadow)",
+        },
+        ringOffsetColor: {
+          base: "var(--fabric-bg)",
+        },
+      },
+    },
+  },
+);
diff --git a/packages/core/css/reset/_gradients.css b/packages/core/css/reset/_gradients.css
new file mode 100644
index 0000000..4c369a6
--- /dev/null
+++ b/packages/core/css/reset/_gradients.css
@@ -0,0 +1,51 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer reset {
+  :root {
+    --click-gradient: linear-gradient(
+      var(--fabric-gradient-deg, 180deg),
+      rgb(255 255 255 / 8%) 0%,
+      transparent 25%,
+      transparent 50%,
+      rgb(0 0 0 / 8%) 100%
+    );
+    --active-gradient: linear-gradient(
+      0deg,
+      rgb(255 255 255 / 5%) 0%,
+      transparent 15%,
+      transparent 85%,
+      rgb(0 0 0 / 5%) 100%
+    );
+    --progress-gradient: linear-gradient(
+      -45deg,
+      color(from var(--white) srgb r g b / 10%) 25%,
+      color(from var(--tint) srgb r g b / 10%) 25%,
+      color(from var(--tint) srgb r g b / 10%) 50%,
+      color(from var(--white) srgb r g b / 10%) 50%,
+      color(from var(--white) srgb r g b / 10%) 75%,
+      color(from var(--tint) srgb r g b / 10%) 75%,
+      color(from var(--tint) srgb r g b / 10%)
+    );
+  }
+}
diff --git a/packages/core/css/reset/_reset.css b/packages/core/css/reset/_reset.css
new file mode 100644
index 0000000..e49a5f3
--- /dev/null
+++ b/packages/core/css/reset/_reset.css
@@ -0,0 +1,398 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer reset {
+  html,
+  body {
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    vertical-align: baseline;
+  }
+
+  :root {
+    font-family: theme(fontFamily.sans);
+    font-size: 16px;
+    line-height: 1.5;
+  }
+
+  p,
+  div,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  input,
+  textarea,
+  fieldset,
+  section,
+  aside,
+  header,
+  footer,
+  nav,
+  menu,
+  dialog {
+    margin: 0;
+    padding: 0;
+  }
+
+  fieldset {
+    min-inline-size: unset;
+  }
+
+  body {
+    a,
+    label,
+    button {
+      user-select: none;
+    }
+
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: color-mix(in lab, var(--fabric-bg) 72%, var(--tint));
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: color-mix(in lab, var(--fabric-bg) 35%, var(--tint));
+
+      &:hover {
+        background-color: color-mix(
+          in lab,
+          var(--fabric-text) 50%,
+          var(--tint)
+        );
+      }
+
+      &:active {
+        background-color: color-mix(
+          in lab,
+          var(--fabric-bg) 50%,
+          var(--fabric-text)
+        );
+      }
+    }
+
+    ::-webkit-scrollbar-corner {
+      background-color: var(--fabric-bg);
+    }
+
+    .scroll-thin {
+      &::-webkit-scrollbar,
+      & ::-webkit-scrollbar {
+        width: 3px;
+        height: 3px;
+      }
+    }
+
+    .scroll-hide {
+      &::-webkit-scrollbar,
+      & ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+    }
+
+    :focus-visible {
+      outline: 0;
+    }
+
+    ::placeholder {
+      color: theme(colors.tint.400);
+    }
+
+    ::selection {
+      background-color: color-mix(in lab, var(--accent) 35%, var(--fabric-bg));
+    }
+
+    *,
+    ::before,
+    ::after {
+      --tw-ring-offset-color: var(--fabric-bg);
+      --tw-ring-color: var(--primary);
+
+      box-sizing: border-box;
+      text-underline-offset: 0.25em;
+    }
+
+    img,
+    svg {
+      display: inline-block;
+      fill: currentcolor;
+    }
+
+    hr {
+      transform: scaleY(0.5);
+
+      height: auto;
+      margin: 1rem 0;
+
+      background: none;
+      border: 0;
+      border-top: 3px solid color-mix(in lab, var(--fabric-bg) 95%, var(--tint)) !important;
+      border-bottom: 2px solid
+        color-mix(in lab, var(--fabric-bg) 50%, var(--tint));
+
+      &.vertical {
+        transform: scaleX(0.5);
+
+        display: inline-block;
+
+        margin: 0 0.25rem;
+
+        border: 0;
+        border-inline-start: 3px solid
+          color-mix(in lab, var(--fabric-bg) 95%, var(--tint)) !important;
+        border-inline-end: 2px solid
+          color-mix(in lab, var(--fabric-bg) 50%, var(--tint));
+      }
+    }
+
+    label {
+      cursor: inherit;
+    }
+
+    [data-clickable="true"] {
+      cursor: pointer;
+    }
+
+    @media (min-width: theme(screens.xs)) {
+      .hide-xs {
+        @apply hidden;
+      }
+
+      @media (max-width: theme(screens.sm)) {
+        .hide-xs-only {
+          @apply hidden;
+        }
+
+        .show-sm-only,
+        .show-md-only,
+        .show-lg-only,
+        .show-xl-only,
+        .show-2xl-only {
+          @apply hidden;
+        }
+      }
+    }
+
+    @media (min-width: theme(screens.sm)) {
+      .hide-sm {
+        @apply hidden;
+      }
+
+      @media (max-width: theme(screens.md)) {
+        .hide-sm-only {
+          @apply hidden;
+        }
+
+        .show-xs-only,
+        .show-md-only,
+        .show-lg-only,
+        .show-xl-only,
+        .show-2xl-only {
+          @apply hidden;
+        }
+      }
+    }
+
+    @media (min-width: theme(screens.md)) {
+      .hide-md {
+        @apply hidden;
+      }
+
+      @media (max-width: theme(screens.lg)) {
+        .hide-md-only {
+          @apply hidden;
+        }
+
+        .show-xs-only,
+        .show-sm-only,
+        .show-lg-only,
+        .show-xl-only,
+        .show-2xl-only {
+          @apply hidden;
+        }
+      }
+    }
+
+    @media (min-width: theme(screens.lg)) {
+      .hide-lg {
+        @apply hidden;
+      }
+
+      @media (max-width: theme(screens.xl)) {
+        .hide-lg-only {
+          @apply hidden;
+        }
+
+        .show-xs-only,
+        .show-sm-only,
+        .show-md-only,
+        .show-xl-only,
+        .show-2xl-only {
+          @apply hidden;
+        }
+      }
+    }
+
+    @media (min-width: theme(screens.xl)) {
+      .hide-xl {
+        @apply hidden;
+      }
+
+      @media (max-width: theme(screens.2xl)) {
+        .hide-xl-only {
+          @apply hidden;
+        }
+
+        .show-xs-only,
+        .show-sm-only,
+        .show-md-only,
+        .show-lg-only,
+        .show-2xl-only {
+          @apply hidden;
+        }
+      }
+    }
+
+    @media (min-width: theme(screens.2xl)) {
+      .hide-2xl,
+      .hide-2xl-only {
+        @apply hidden;
+      }
+
+      .show-xs-only,
+      .show-sm-only,
+      .show-md-only,
+      .show-lg-only,
+      .show-xl-only {
+        @apply hidden;
+      }
+    }
+
+    @media (max-width: theme(screens.xs)) {
+      .show-xs,
+      .show-sm,
+      .show-md,
+      .show-lg,
+      .show-xl,
+      .show-2xl {
+        @apply hidden;
+      }
+    }
+
+    @media (max-width: theme(screens.sm)) {
+      .show-sm,
+      .show-md,
+      .show-lg,
+      .show-xl,
+      .show-2xl {
+        @apply hidden;
+      }
+    }
+
+    @media (max-width: theme(screens.md)) {
+      .show-md,
+      .show-lg,
+      .show-xl,
+      .show-2xl {
+        @apply hidden;
+      }
+    }
+
+    @media (max-width: theme(screens.lg)) {
+      .show-lg,
+      .show-xl,
+      .show-2xl {
+        @apply hidden;
+      }
+    }
+
+    @media (max-width: theme(screens.xl)) {
+      .show-xl,
+      .show-2xl {
+        @apply hidden;
+      }
+    }
+
+    @media (max-width: theme(screens.2xl)) {
+      .show-2xl {
+        @apply hidden;
+      }
+    }
+  }
+
+  .scroll-snap-start {
+    scroll-snap-type: both proximity;
+
+    & > * {
+      scroll-snap-align: start;
+    }
+  }
+
+  .scroll-snap-center {
+    scroll-snap-type: both proximity;
+
+    & > * {
+      scroll-snap-align: center;
+    }
+  }
+
+  .break-words {
+    word-break: break-word;
+  }
+
+  .outline-thin {
+    outline-width: 0.5px;
+  }
+
+  .outline {
+    outline-width: 1px;
+  }
+
+  .container {
+    margin-inline: auto;
+  }
+
+  p,
+  pre,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .mixed-lang {
+    unicode-bidi: plaintext;
+  }
+}
diff --git a/packages/core/css/reset/_text.css b/packages/core/css/reset/_text.css
new file mode 100644
index 0000000..f73eba7
--- /dev/null
+++ b/packages/core/css/reset/_text.css
@@ -0,0 +1,183 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 500;
+  }
+
+  h2 {
+    font-size: 2rem;
+    font-weight: 500;
+  }
+
+  h3 {
+    font-size: 1.75rem;
+    font-weight: 500;
+  }
+
+  h4 {
+    font-size: 1.5rem;
+    font-weight: 500;
+  }
+
+  h5 {
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+
+  h6 {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  p {
+    line-height: 1.5;
+
+    & + p,
+    & + article {
+      margin-top: 1rem;
+    }
+  }
+
+  article {
+    & + p,
+    & + article {
+      margin-top: 1rem;
+    }
+  }
+
+  ul,
+  ol {
+    margin: 0;
+    padding-inline-start: 2em;
+    list-style-position: outside;
+
+    & > li {
+      padding: 0 2px;
+      line-height: 2;
+    }
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  dl {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 0 0 1rem;
+    line-height: 1.5em;
+
+    dt {
+      overflow: hidden;
+      flex: 0 0 33.3%;
+
+      min-width: 6em;
+      max-width: 12em;
+      padding-inline: 1em;
+
+      font-size: 0.875em;
+      color: theme(textColor.dimmed);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    dd {
+      flex: 1 1 66.6%;
+      margin: 0;
+      padding: 0;
+    }
+
+    &.align-end > dt {
+      text-align: end;
+
+      &::after {
+        content: ": ";
+      }
+    }
+
+    &.bg-alternate {
+      & > dt:nth-of-type(odd),
+      & > dd:nth-of-type(odd) {
+        background-color: color-mix(in lab, var(--fabric-bg) 99%, var(--tint));
+      }
+
+      & > dt:nth-of-type(even),
+      & > dd:nth-of-type(even) {
+        background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--tint));
+      }
+    }
+  }
+
+  span + span {
+    padding-inline-start: 0.25em;
+  }
+
+  abbr {
+    cursor: help;
+
+    display: inline-block;
+
+    padding: 0 2px;
+
+    color: theme(colors.accent.700);
+    text-decoration: underline dashed 1px;
+
+    background-color: color-mix(in lab, currentcolor 10%, var(--fabric-bg));
+  }
+
+  mark {
+    display: inline-block;
+    color: var(--fabric-text);
+    background-color: theme(colors.accent.100);
+  }
+
+  .link {
+    cursor: pointer;
+    user-select: none;
+
+    font-weight: 500;
+    color: theme(colors.accent.600);
+    text-decoration: underline dotted;
+
+    &:hover {
+      text-decoration: underline solid;
+    }
+  }
+
+  .bg-alternate {
+    & > :nth-child(odd) {
+      background-color: color-mix(in lab, var(--fabric-bg) 99%, var(--tint));
+    }
+
+    & > :nth-child(even) {
+      background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--tint));
+    }
+  }
+}
diff --git a/packages/core/css/reset/_theme.css b/packages/core/css/reset/_theme.css
new file mode 100644
index 0000000..83abed4
--- /dev/null
+++ b/packages/core/css/reset/_theme.css
@@ -0,0 +1,110 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer colors {
+  [data-color-scheme="light"] {
+    --fabric-bg: theme(colors.white);
+    --fabric-text: theme(colors.black);
+    --fabric-input: color-mix(in lab, var(--fabric-bg) 90%, #fff);
+    --fabric-input-focus: #fff;
+    --fabric-shadow: #8ba0b0;
+
+    color-scheme: light;
+  }
+
+  [data-color-scheme="dark"] {
+    --fabric-bg: theme(colors.black);
+    --fabric-text: theme(colors.white);
+    --fabric-input: color-mix(in lab, var(--fabric-bg) 90%, #0a1218);
+    --fabric-input-focus: #0a1218;
+    --fabric-shadow: #010101;
+
+    color-scheme: dark;
+  }
+}
+
+@layer reset {
+  :root {
+    --black: theme(colors.black);
+    --white: theme(colors.white);
+    --scarlet: theme(colors.scarlet.DEFAULT);
+    --pumpkin: theme(colors.pumpkin.DEFAULT);
+    --marigold: theme(colors.marigold.DEFAULT);
+    --avacado: theme(colors.avacado.DEFAULT);
+    --jade: theme(colors.jade.DEFAULT);
+    --denim: theme(colors.denim.DEFAULT);
+    --iris: theme(colors.iris.DEFAULT);
+    --lilac: theme(colors.lilac.DEFAULT);
+    --coral: theme(colors.coral.DEFAULT);
+    --wood: theme(colors.wood.DEFAULT);
+    --silver: theme(colors.silver.DEFAULT);
+    --steel: theme(colors.steel.DEFAULT);
+    --olive: theme(colors.olive.DEFAULT);
+    --sand: theme(colors.sand.DEFAULT);
+    --info: theme(colors.info.DEFAULT);
+    --danger: theme(colors.danger.DEFAULT);
+    --success: theme(colors.success.DEFAULT);
+    --warning: theme(colors.warning.DEFAULT);
+
+    /* app default primary */
+    --primary: theme(colors.denim.DEFAULT);
+    --accent: theme(colors.jade.DEFAULT);
+    --tint: theme(colors.silver.DEFAULT);
+
+    /* default rounding */
+    --fabric-rounding: 0.25rem;
+    --fabric-rounding-cap: 0.25rem;
+    --gutter: 0.5rem;
+
+    /* z levels */
+    --z-overlay-mask: 25;
+    --z-overlay: 30;
+    --z-popover-mask: 45;
+    --z-popover: 50;
+    --z-tooltip: 60;
+    --z-notifications: 60;
+  }
+
+  [data-color-scheme] {
+    color: color-mix(in lab, var(--fabric-text) 95%, var(--tint));
+    background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--tint));
+  }
+
+  [data-rounding="sm"] {
+    /* default rounding */
+    --fabric-rounding: 2px;
+    --fabric-rounding-cap: 2px;
+  }
+
+  [data-rounding="md"] {
+    /* default rounding */
+    --fabric-rounding: 0.5rem;
+    --fabric-rounding-cap: 0.5rem;
+  }
+
+  [data-rounding="full"] {
+    /* default rounding */
+    --fabric-rounding: 9999px;
+    --fabric-rounding-cap: 0.5rem;
+  }
+}
diff --git a/packages/core/css/reset/index.css b/packages/core/css/reset/index.css
new file mode 100644
index 0000000..ac75ce5
--- /dev/null
+++ b/packages/core/css/reset/index.css
@@ -0,0 +1,27 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@import url("./_theme.css");
+@import url("./_reset.css");
+@import url("./_text.css");
+@import url("./_gradients.css");
diff --git a/packages/core/css/styles.css b/packages/core/css/styles.css
new file mode 100644
index 0000000..7c778a7
--- /dev/null
+++ b/packages/core/css/styles.css
@@ -0,0 +1,31 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer colors, reset, comp, util, var;
+
+@import url("tailwindcss/base") layer(reset);
+@import url("tailwindcss/components") layer(comp);
+@import url("tailwindcss/utilities") layer(util);
+@import url("tailwindcss/variants") layer(var);
+
+@import url("./reset/index.css");
diff --git a/packages/core/css/tailwind/colors.ts b/packages/core/css/tailwind/colors.ts
new file mode 100644
index 0000000..9efdbb1
--- /dev/null
+++ b/packages/core/css/tailwind/colors.ts
@@ -0,0 +1,158 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+/* istanbul ignore file */
+
+const COlORS = {
+  silver: "#989da5",
+  steel: "#7c99af",
+  olive: "#769b8d",
+  sand: "#9b9789",
+  info: "#00bfff",
+  danger: "#f24c3d",
+  success: "#44bc69",
+  warning: "#edaa00",
+  scarlet: "#e5484d",
+  pumpkin: "#f76a15",
+  marigold: "#ffc100",
+  avacado: "#46a758",
+  jade: "#29a383",
+  denim: "#0190ff",
+  iris: "#5b5bd6",
+  lilac: "#8e4ec6",
+  coral: "#e93d82",
+  wood: "#ad7f58",
+};
+
+const colorMix = (color: string, shader: string, percent: number) =>
+  `color-mix(in lab, ${applyAlpha(color)} ${percent}%,  ${applyAlpha(shader)})`;
+
+const applyAlpha = (color: string) =>
+  `color(from ${color} srgb r g b / <alpha-value>)`;
+
+export const colors = {
+  black: "#0e171e",
+  white: "#fefdfc",
+  bg: `${applyAlpha("var(--fabric-bg)")}`,
+  text: `${applyAlpha("var(--fabric-text)")}`,
+  primary: {
+    DEFAULT: "var(--primary)",
+    50: colorMix("var(--primary)", "var(--fabric-bg)", 10),
+    100: colorMix("var(--primary)", "var(--fabric-bg)", 27),
+    200: colorMix("var(--primary)", "var(--fabric-bg)", 45),
+    300: colorMix("var(--primary)", "var(--fabric-bg)", 62),
+    400: colorMix("var(--primary)", "var(--fabric-bg)", 80),
+    500: applyAlpha("var(--primary)"),
+    600: colorMix("var(--primary)", "var(--fabric-text)", 80),
+    700: colorMix("var(--primary)", "var(--fabric-text)", 62),
+    800: colorMix("var(--primary)", "var(--fabric-text)", 45),
+    900: colorMix("var(--primary)", "var(--fabric-text)", 27),
+    950: colorMix("var(--primary)", "var(--fabric-text)", 10),
+  },
+  accent: {
+    DEFAULT: "var(--accent)",
+    50: colorMix("var(--accent)", "var(--fabric-bg)", 10),
+    100: colorMix("var(--accent)", "var(--fabric-bg)", 27),
+    200: colorMix("var(--accent)", "var(--fabric-bg)", 45),
+    300: colorMix("var(--accent)", "var(--fabric-bg)", 62),
+    400: colorMix("var(--accent)", "var(--fabric-bg)", 80),
+    500: applyAlpha("var(--accent)"),
+    600: colorMix("var(--accent)", "var(--fabric-text)", 80),
+    700: colorMix("var(--accent)", "var(--fabric-text)", 62),
+    800: colorMix("var(--accent)", "var(--fabric-text)", 45),
+    900: colorMix("var(--accent)", "var(--fabric-text)", 27),
+    950: colorMix("var(--accent)", "var(--fabric-text)", 10),
+  },
+  tint: {
+    DEFAULT: "var(--tint)",
+    50: colorMix("var(--tint)", "var(--fabric-bg)", 10),
+    100: colorMix("var(--tint)", "var(--fabric-bg)", 27),
+    200: colorMix("var(--tint)", "var(--fabric-bg)", 45),
+    300: colorMix("var(--tint)", "var(--fabric-bg)", 62),
+    400: colorMix("var(--tint)", "var(--fabric-bg)", 80),
+    500: applyAlpha("var(--tint)"),
+    600: colorMix("var(--tint)", "var(--fabric-text)", 80),
+    700: colorMix("var(--tint)", "var(--fabric-text)", 62),
+    800: colorMix("var(--tint)", "var(--fabric-text)", 45),
+    900: colorMix("var(--tint)", "var(--fabric-text)", 27),
+    950: colorMix("var(--tint)", "var(--fabric-text)", 10),
+  },
+  ...Object.entries(COlORS).reduce(
+    (ret, [key, color]) => ({
+      ...ret,
+      [key]: {
+        DEFAULT: color,
+        50: colorMix(color, "var(--fabric-bg)", 10),
+        100: colorMix(color, "var(--fabric-bg)", 27),
+        200: colorMix(color, "var(--fabric-bg)", 45),
+        300: colorMix(color, "var(--fabric-bg)", 62),
+        400: colorMix(color, "var(--fabric-bg)", 80),
+        500: applyAlpha(color),
+        600: colorMix(color, "var(--fabric-text)", 80),
+        700: colorMix(color, "var(--fabric-text)", 62),
+        800: colorMix(color, "var(--fabric-text)", 45),
+        900: colorMix(color, "var(--fabric-text)", 27),
+        950: colorMix(color, "var(--fabric-text)", 10),
+      },
+    }),
+    {},
+  ),
+};
+
+export const backgroundColor = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  DEFAULT: colorMix("var(--fabric-bg)", "var(--tint)", 99),
+  base: colorMix("var(--fabric-bg)", "var(--tint)", 99),
+  dimmed: colorMix("var(--fabric-bg)", "var(--tint)", 90),
+  muted: colorMix("var(--fabric-bg)", "var(--tint)", 80),
+  gray: colorMix("var(--fabric-bg)", "var(--tint)", 50),
+  dark: colorMix("var(--black)", "var(--tint)", 75),
+  light: colorMix("var(--white)", "var(--tint)", 75),
+  invert: colorMix("var(--fabric-bg)", "var(--fabric-text)", 5),
+};
+export const textColor = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  DEFAULT: colorMix("var(--fabric-text)", "var(--tint)", 95),
+  base: colorMix("var(--fabric-text)", "var(--tint)", 95),
+  dimmed: colorMix("var(--fabric-text)", "var(--tint)", 65),
+  muted: colorMix("var(--fabric-text)", "var(--tint)", 45),
+  gray: colorMix("var(--fabric-text)", "var(--tint)", 50),
+  dark: colorMix("var(--black)", "var(--tint)", 75),
+  light: colorMix("var(--white)", "var(--tint)", 75),
+  invert: colorMix("var(--fabric-text)", "var(--fabric-bg)", 5),
+};
+export const borderColor = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  DEFAULT: colorMix("var(--fabric-bg)", "var(--tint)", 65),
+  base: colorMix("var(--fabric-bg)", "var(--tint)", 65),
+  dimmed: colorMix("var(--fabric-bg)", "var(--tint)", 72),
+  muted: colorMix("var(--fabric-bg)", "var(--tint)", 80),
+  gray: applyAlpha("var(--tint)"),
+  dark: colorMix("var(--black)", "var(--tint)", 75),
+  light: colorMix("var(--white)", "var(--tint)", 75),
+};
diff --git a/packages/core/package.json b/packages/core/package.json
new file mode 100644
index 0000000..7f6561f
--- /dev/null
+++ b/packages/core/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "@react-fabric/core",
+  "version": "1.0.0",
+  "description": "RUF: Core package",
+  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
+  "license": "MIT",
+  "repository": "https://github.com/adarshpastakia/react-ui-framework/tree/main/packages/core",
+  "source": "src/index.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "directories": {
+    "src": "src",
+    "styles": "css",
+    "test": "tests"
+  },
+  "files": [
+    "css",
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "makelink": "yarn link",
+    "removelink": "yarn unlink",
+    "prebuild": "rm -rf ./dist",
+    "build:dts": "tsc -p ./tsconfig.build.json",
+    "build:rollup": "rollup -c ../../rollup.config.mjs",
+    "build": "npm-run-all -p build:rollup build:dts",
+    "watch:dts": "tsc -w -p ./tsconfig.build.json",
+    "watch:rollup": "rollup -w -c ../../rollup.config.mjs",
+    "watch": "npm-run-all -p watch:rollup watch:dts"
+  },
+  "dependencies": {
+    "@react-fabric/utilities": "^1.0.0",
+    "@floating-ui/react": "^0.26.19",
+    "@headlessui/react": "^2.1.2",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.13",
+    "boring-avatars": "^1.10.2",
+    "classnames": "^2.5.1",
+    "color": "^4.2.3",
+    "resize-observer-polyfill": "^1.5.1",
+    "tailwindcss": "^3.4.4"
+  },
+  "peerDependencies": {
+    "i18next": "^23.11.5",
+    "react": ">=18.0.0 <20.0.0",
+    "react-dom": ">=18.0.0 <20.0.0",
+    "react-i18next": "^14.1.2"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=9.6.4"
+  }
+}
diff --git a/packages/core/src/components/actionLabel/ActionLabel.module.css b/packages/core/src/components/actionLabel/ActionLabel.module.css
new file mode 100644
index 0000000..2c921e2
--- /dev/null
+++ b/packages/core/src/components/actionLabel/ActionLabel.module.css
@@ -0,0 +1,38 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .actionLabel {
+    & > .actions {
+      --width: 4rem;
+
+      width: 0;
+    }
+
+    &:not([data-disabled="true"]):hover > .actions {
+      width: var(--width);
+      transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 100ms;
+      transition-delay: 500ms;
+    }
+  }
+}
diff --git a/packages/core/src/components/actionLabel/ActionLabel.tsx b/packages/core/src/components/actionLabel/ActionLabel.tsx
new file mode 100644
index 0000000..dee4aec
--- /dev/null
+++ b/packages/core/src/components/actionLabel/ActionLabel.tsx
@@ -0,0 +1,94 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { type ReactElement, useCallback } from "react";
+import { type AriaProps, type ChildProp, type CssProp } from "../../types";
+import { ButtonGroup } from "../button/ButtonGroup";
+import classes from "./ActionLabel.module.css";
+
+export interface ActionLabelProps extends AriaProps, CssProp, ChildProp {
+  /**
+   * action buttons aligment
+   */
+  align?: "start" | "end";
+  /**
+   * disable actions
+   */
+  disabled?: boolean;
+  /**
+   * buttons
+   */
+  actions: ReactElement[];
+}
+
+/**
+ * A simple label component with additional actions (like a button or icon) that becomes visible only when the user hovers over the label, useful in interfaces where space is limited or where it's important to keep the UI clean and focused
+ */
+export const ActionLabel = ({
+  children,
+  className,
+  align,
+  actions,
+  disabled,
+  ...rest
+}: ActionLabelProps) => {
+  const calculateBasis = useCallback((el: HTMLElement | null) => {
+    if (el) {
+      const clone = el.cloneNode(true) as HTMLElement;
+      clone.className = "";
+      clone.style.left = "-200%";
+      clone.style.overflow = "hidden";
+      clone.style.position = "absolute";
+      clone.style.whiteSpace = "nowrap";
+      document.body.appendChild(clone);
+      el.style.setProperty("--width", `${clone.offsetWidth}px`);
+      clone.remove();
+    }
+  }, []);
+
+  return (
+    <div
+      className={classNames(
+        className,
+        classes.actionLabel,
+        "flex overflow-hidden gap-1 items-center cursor-default select-none",
+      )}
+      data-disabled={disabled}
+      {...rest}
+    >
+      <ButtonGroup
+        variant="link"
+        ref={calculateBasis}
+        className={classNames(
+          classes.actions,
+          "overflow-hidden flex-content",
+          align === "end" && "order-2",
+        )}
+      >
+        {actions}
+      </ButtonGroup>
+      <div className="flex-initial truncate">{children}</div>
+    </div>
+  );
+};
diff --git a/packages/core/src/components/animations/Animations.module.css b/packages/core/src/components/animations/Animations.module.css
new file mode 100644
index 0000000..ae83318
--- /dev/null
+++ b/packages/core/src/components/animations/Animations.module.css
@@ -0,0 +1,253 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  @keyframes l2 {
+    0%,
+    25% {
+      background-position:
+        0 50%,
+        0 calc(50% - 2px),
+        0 calc(50% + 2px),
+        50% 50%,
+        50% calc(50% - 2px),
+        50% calc(50% + 2px),
+        100% 50%,
+        100% calc(50% - 2px),
+        100% calc(50% + 2px);
+      background-size:
+        8px 0,
+        8px 4px,
+        8px 4px,
+        8px 0,
+        8px 4px,
+        8px 4px,
+        8px 0,
+        8px 4px,
+        8px 4px;
+    }
+
+    50% {
+      background-position:
+        0 50%,
+        0 calc(0% - 2px),
+        0 calc(100% + 2px),
+        50% 50%,
+        50% calc(50% - 2px),
+        50% calc(50% + 2px),
+        100% 50%,
+        100% calc(50% - 2px),
+        100% calc(50% + 2px);
+      background-size:
+        8px 100%,
+        8px 4px,
+        8px 4px,
+        8px 0,
+        8px 4px,
+        8px 4px,
+        8px 0,
+        8px 4px,
+        8px 4px;
+    }
+
+    75% {
+      background-position:
+        0 50%,
+        0 calc(0% - 2px),
+        0 calc(100% + 2px),
+        50% 50%,
+        50% calc(0% - 2px),
+        50% calc(100% + 2px),
+        100% 50%,
+        100% calc(50% - 2px),
+        100% calc(50% + 2px);
+      background-size:
+        8px 100%,
+        8px 4px,
+        8px 4px,
+        8px 100%,
+        8px 4px,
+        8px 4px,
+        8px 0,
+        8px 4px,
+        8px 4px;
+    }
+
+    95%,
+    100% {
+      background-position:
+        0 50%,
+        0 calc(0% - 2px),
+        0 calc(100% + 2px),
+        50% 50%,
+        50% calc(0% - 2px),
+        50% calc(100% + 2px),
+        100% 50%,
+        100% calc(0% - 2px),
+        100% calc(100% + 2px);
+      background-size:
+        8px 100%,
+        8px 4px,
+        8px 4px,
+        8px 100%,
+        8px 4px,
+        8px 4px,
+        8px 100%,
+        8px 4px,
+        8px 4px;
+    }
+  }
+
+  .bars {
+    --c: linear-gradient(currentcolor 0 0);
+    --r1: radial-gradient(farthest-side at bottom, currentcolor 93%, #0000);
+    --r2: radial-gradient(farthest-side at top, currentcolor 93%, #0000);
+
+    aspect-ratio: 1;
+    background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2),
+      var(--c), var(--r1), var(--r2);
+    background-repeat: no-repeat;
+    animation: l2 1s infinite alternate;
+  }
+
+  @keyframes l4 {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  .spinner {
+    --b: 8px;
+
+    aspect-ratio: 1;
+
+    background: conic-gradient(#0000 10%, currentcolor) content-box;
+    border-radius: 50%;
+
+    mask: repeating-conic-gradient(
+        #0000 0deg,
+        #000 1deg 20deg,
+        #0000 21deg 36deg
+      ),
+      radial-gradient(
+        farthest-side,
+        #0000 calc(100% - var(--b) - 1px),
+        #000 calc(100% - var(--b))
+      );
+
+    animation: l4 2s infinite steps(10);
+
+    mask-composite: destination-in;
+    mask-composite: intersect;
+  }
+
+  @keyframes loader {
+    from {
+      transform: translateX(calc(-100% * var(--multiplier)));
+    }
+
+    to {
+      transform: translateX(calc(100% * var(--multiplier)));
+    }
+  }
+
+  .loader {
+    --multiplier: 1;
+
+    & > div {
+      height: calc(0.125rem + 2px);
+
+      &::after {
+        animation: loader 1s cubic-bezier(0.65, 0, 0.45, 1) infinite;
+      }
+    }
+
+    :global([dir="rtl"]) & {
+      --multiplier: -1;
+    }
+  }
+
+  @keyframes check-stroke {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes check-scale {
+    0%,
+    100% {
+      transform: none;
+    }
+
+    50% {
+      transform: scale3d(1.1, 1.1, 1);
+    }
+  }
+
+  @keyframes check-fill {
+    100% {
+      box-shadow: inset 0 0 0 1em currentcolor;
+    }
+  }
+
+  .checkAnimation {
+    width: 1.5em;
+    height: 1.5em;
+
+    color: theme(colors.primary.DEFAULT);
+
+    box-shadow: inset 0 0 0 currentcolor;
+
+    fill: transparent;
+    stroke-miterlimit: 10;
+    stroke-width: 4px;
+
+    animation:
+      check-fill 0.4s ease-in-out 0.4s forwards,
+      check-scale 0.3s ease-in-out 0.9s both;
+    animation-delay: 0.75s;
+
+    & .circlePart {
+      fill: transparent;
+      stroke: currentcolor;
+      stroke-dasharray: 166;
+      stroke-dashoffset: 166;
+      stroke-miterlimit: 10;
+      stroke-width: 8px;
+
+      animation: check-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+      animation-delay: 0.25s;
+    }
+
+    & .iconPart {
+      transform-origin: 50% 50%;
+
+      stroke: currentcolor;
+      stroke-dasharray: 48;
+      stroke-dashoffset: 48;
+
+      animation: check-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+      animation-delay: 0.75s;
+    }
+  }
+}
diff --git a/packages/core/src/components/animations/Animations.tsx b/packages/core/src/components/animations/Animations.tsx
new file mode 100644
index 0000000..1f37d23
--- /dev/null
+++ b/packages/core/src/components/animations/Animations.tsx
@@ -0,0 +1,192 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { useMemo } from "react";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ColorType,
+  type CssProp,
+  type PaletteType,
+} from "../../types";
+import { getColor, getColorClass } from "../../utils";
+import classes from "./Animations.module.css";
+
+export interface AnimationProps extends CssProp, AriaProps {
+  type?: "info" | "check" | "cross" | "question" | "exclaim";
+  /**
+   * icon color
+   */
+  color?: ColorType | PaletteType;
+  /**
+   * icon mark color
+   */
+  strokeColor?: ColorType | PaletteType;
+}
+
+export const AnimationIndicator = ({
+  className,
+  color,
+  strokeColor,
+  type,
+  ...aria
+}: AnimationProps) => {
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (strokeColor) {
+        s.stroke = getColor(strokeColor);
+      }
+      return s;
+    },
+    [color, strokeColor],
+    "Animation styles",
+  );
+  const path = useMemo(() => {
+    if (type === "check") return "M14.1 27.2l7.1 7.2 16.7-16.8";
+    if (type === "cross") return "M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8";
+    if (type === "question")
+      return "M18.949 17.621c0.426-0.787 1.354-1.6 2.108-2.223 1.279-0.984 3.87-1.778 5.805-1.778 3.837 0 6.189 2.689 6.189 6.034 0 2.23-1.193 4.214-3.751 6.346-2.886 2.361-3.497 3.362-3.497 5.788v0c0-2.263 0.689-3.509 3.476-5.772 2.689-2.23 3.772-3.968 3.772-6.362 0-3.772-2.492-6.034-6.789-6.034-2.132 0-3.903 0.722-5.28 1.804-0.82 0.623-1.476 1.377-2.033 2.197zM26 41.329v0-2.948z";
+    if (type === "exclaim")
+      return "M26.611 10.873c-0.002 1.015-0.002 2.071-0.002 3.086v11.777c0 3.086 0.002 2.232 0 3.288h-0.018c-0.001-1.056 0-0.202 0-3.288v-11.777c0-1.015 0-2.071-0.002-3.086zM26.59 37.472h0.018v3.655h-0.018z";
+    return "M26 22L26 41M27 22L27 41M25 22L25 41M26 11L26 16M27 11L27 16M25 11L25 16Z";
+  }, [type]);
+  /** ***************** component *******************/
+  return (
+    <svg
+      data-ref="animated-indicator"
+      className={classNames(
+        classes.checkAnimation,
+        className,
+        "inline-block rounded-full",
+        color && getColorClass(color),
+      )}
+      style={styles}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 52 52"
+      aria-hidden="true"
+      {...aria}
+    >
+      <circle className={classes.circlePart} cx="26" cy="26" r="25" />
+      <path
+        className={classNames(
+          classes.iconPart,
+          getColorClass(strokeColor ?? "invert"),
+        )}
+        d={path}
+      />
+    </svg>
+  );
+};
+
+export const AnimationBars = ({
+  // @ts-expect-error ignore
+  color = "tint",
+  size = "2rem",
+}: {
+  color?: ColorType;
+  size?: number | string;
+}) => {
+  return (
+    <div
+      className={classNames(
+        "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
+      )}
+    >
+      <div
+        className={classNames(
+          "outline outline-tint-500/20 p-4 bg-tint-200/20 backdrop-blur-sm rounded",
+        )}
+      >
+        <div
+          className={classNames(classes.bars, getColorClass(color + "-500/50"))}
+          style={{ width: size }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const AnimationSpinner = ({
+  // @ts-expect-error ignore
+  color = "tint",
+  size = "2rem",
+}: {
+  color?: ColorType;
+  size?: number | string;
+}) => {
+  return (
+    <div
+      className={classNames(
+        "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
+      )}
+    >
+      <div
+        className={classNames(
+          "outline outline-tint-500/20 p-4 bg-tint-200/20 backdrop-blur-sm rounded",
+        )}
+      >
+        <div
+          className={classNames(classes.spinner, getColorClass(color))}
+          style={{ width: size }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Loading = () => {
+  return (
+    <div
+      className={classNames(
+        classes.loader,
+        "area-[loader] relative overflow-x-clip",
+      )}
+    >
+      <div className="absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500" />
+    </div>
+  );
+};
+
+export const Skeleton = () => {
+  return (
+    <div className={classNames("p-2 animate-pulse flex gap-2 max-w-lg")}>
+      <div className="bg-tint-100 rounded aspect-square h-12" />
+      <div className="flex-1 flex flex-col gap-2">
+        <div className="bg-tint-100 h-3 rounded-full" />
+        <div className="flex gap-2">
+          <div className="bg-tint-100 h-2 rounded-full basis-[30%]" />
+          <div className="bg-tint-100 h-2 rounded-full basis-[60%]" />
+        </div>
+        <div className="flex gap-2">
+          <div className="bg-tint-100 h-2 rounded-full basis-[30%]" />
+          <div className="bg-tint-100 h-2 rounded-full basis-[60%]" />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/components/avatar/Avatar.module.css b/packages/core/src/components/avatar/Avatar.module.css
new file mode 100644
index 0000000..88b1885
--- /dev/null
+++ b/packages/core/src/components/avatar/Avatar.module.css
@@ -0,0 +1,90 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .avatar {
+    width: 1em;
+    height: 1em;
+
+    vertical-align: -0.125em;
+
+    border-radius: var(--fabric-rounding);
+    box-shadow: 0 0 1px theme(borderColor.base);
+
+    & > i,
+    & > svg,
+    & > img {
+      pointer-events: none;
+
+      overflow: hidden;
+      display: block;
+
+      width: 1em;
+      height: 1em;
+
+      line-height: 1;
+
+      object-fit: cover;
+      background-color: theme(backgroundColor.dimmed);
+      border-radius: inherit;
+
+      fill: currentcolor;
+    }
+
+    & > i::before {
+      line-height: 1;
+    }
+
+    & > .imagePlaceholder {
+      z-index: -1;
+    }
+  }
+
+  .avatarGroup {
+    & > .avatar {
+      box-shadow:
+        0 0 0 1px theme(borderColor.muted),
+        0 0 0 0.125em var(--fabric-bg);
+
+      &:not(:first-child) {
+        margin-inline-start: -0.125em;
+      }
+    }
+
+    & .avatarGroup--extra {
+      width: 1em;
+      height: 1em;
+      font-size: inherit;
+      border-radius: inherit;
+    }
+  }
+}
+
+@layer util {
+  .avatarGroup {
+    & > .avatar {
+      font-size: inherit;
+      border-radius: inherit;
+    }
+  }
+}
diff --git a/packages/core/src/components/avatar/Avatar.tsx b/packages/core/src/components/avatar/Avatar.tsx
new file mode 100644
index 0000000..158b1c0
--- /dev/null
+++ b/packages/core/src/components/avatar/Avatar.tsx
@@ -0,0 +1,217 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isSvgPath } from "@react-fabric/utilities";
+import BoringAvatar from "boring-avatars";
+import classNames from "classnames";
+import { Fragment, useState } from "react";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ColorType,
+  type CssProp,
+  type RefProp,
+  type SizeType,
+  type TestProps,
+} from "../../types";
+import { getBgClass, getColor, getColorClass } from "../../utils";
+import classes from "./Avatar.module.css";
+
+export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
+  /**
+   * avatar name for generated fallback
+   */
+  name: string;
+  /**
+   * svg path
+   */
+  fallbackIcon?: string;
+  /**
+   * avatar image url
+   */
+  avatar?: string;
+  /**
+   * avatar variant
+   */
+  variant?: "text" | "beam" | "pixel" | "bauhaus";
+  /**
+   * background color (CSS color / tailwind color)
+   */
+  bg?: ColorType | string;
+  /**
+   * icon color (CSS color / tailwind color)
+   */
+  color?: ColorType | string;
+  /**
+   * icon size
+   */
+  size?: SizeType | number | string;
+  /**
+   * viewbox for svg path (default 24)
+   */
+  viewBox?: string;
+  /**
+   * rounded icon
+   */
+  rounded?: boolean;
+  /**
+   * click handler
+   */
+  onClick?: React.MouseEventHandler;
+}
+
+const SizeMap: KeyValue<string> = {
+  xs: "0.875rem",
+  sm: "1.125rem",
+  md: "1.5rem",
+  lg: "2rem",
+  xl: "2.5rem",
+};
+
+/**
+ * An avatar is a graphical representation of a user's identity.
+ */
+export const Avatar = ({
+  ref,
+  name,
+  avatar,
+  fallbackIcon,
+  bg,
+  color,
+  size = "",
+  rounded,
+  variant = "beam",
+  className,
+  viewBox = "0 0 24 24",
+  onClick,
+  ...aria
+}: AvatarProps) => {
+  const [fallback, setFallback] = useState(true);
+
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (bg) {
+        s.backgroundColor = getColor(bg);
+      }
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (size && !(size in SizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in SizeMap) {
+        s.fontSize = SizeMap[size];
+      }
+      return s;
+    },
+    [bg, color, size],
+    "Avatar styles",
+  );
+
+  /** ***************** render icon *******************/
+  const avatarImage = useMemoDebugger(
+    () => {
+      setFallback(!avatar);
+      return (
+        avatar && (
+          <Fragment>
+            <div
+              className={classNames(
+                classes.imgPlaceholder,
+                "absolute inset-0 bg-gray animate-pulse",
+              )}
+            />
+            <img
+              src={avatar}
+              alt={avatar}
+              onError={() => setFallback(true)}
+              onLoad={(e) => e.currentTarget.previousElementSibling?.remove()}
+            />
+          </Fragment>
+        )
+      );
+    },
+    [avatar],
+    "Avatar icon",
+  );
+
+  const fallbackAvatar = useMemoDebugger(
+    () => {
+      if (fallbackIcon) {
+        return isSvgPath(fallbackIcon) ? (
+          <svg viewBox={viewBox}>
+            <path fill="currentColor" d={fallbackIcon.toString()} />
+          </svg>
+        ) : (
+          <i className={fallbackIcon} />
+        );
+      }
+      if (variant === "text") {
+        const [, first, second, group] =
+          name.match(/(?=(\w).* (\w).*)|(?=(\w\w).*)/) ?? [];
+        return (
+          <svg role="img">
+            <text
+              x="50%"
+              y="50%"
+              dy=".1em"
+              dominantBaseline="middle"
+              textAnchor="middle"
+              style={{ fontSize: ".5em", fontWeight: 500 }}
+            >
+              {group ?? `${first}${second}`}
+            </text>
+          </svg>
+        );
+      }
+      return <BoringAvatar square size={64} variant={variant} name={name} />;
+    },
+    [name, variant, fallbackIcon],
+    "Avatar fallback",
+  );
+
+  return (
+    <dfn
+      role="presentation"
+      className={classNames(
+        classes.avatar,
+        className,
+        "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center",
+        bg && getBgClass(bg),
+        color && getColorClass(color),
+        !rounded && "rounded",
+        rounded && "rounded-full",
+      )}
+      onClick={onClick}
+      style={styles}
+      data-clickable={!!onClick}
+      ref={ref}
+      {...aria}
+    >
+      {!fallback && avatarImage}
+      {fallback && fallbackAvatar}
+    </dfn>
+  );
+};
diff --git a/packages/core/src/components/avatar/AvatarGroup.tsx b/packages/core/src/components/avatar/AvatarGroup.tsx
new file mode 100644
index 0000000..d9f08a0
--- /dev/null
+++ b/packages/core/src/components/avatar/AvatarGroup.tsx
@@ -0,0 +1,140 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { Children, useMemo, type ReactElement } from "react";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type CssProp,
+  type RefProp,
+  type SizeType,
+} from "../../types";
+import { type AvatarProps } from "./Avatar";
+import classes from "./Avatar.module.css";
+
+type AvatarChild =
+  | ReactElement<Omit<AvatarProps, "size" | "rounded">>
+  | false
+  | undefined;
+
+export interface AvatarGroupProps extends CssProp, RefProp, AriaProps {
+  children: AvatarChild | AvatarChild[];
+  /**
+   * rounded icon
+   */
+  rounded?: boolean;
+  /**
+   * icon size
+   */
+  size?: SizeType | number | string;
+  /**
+   * max count
+   */
+  totalCount?: number;
+}
+
+const SizeMap: KeyValue<string> = {
+  xs: "0.875rem",
+  sm: "1.125rem",
+  md: "1.5rem",
+  lg: "2rem",
+  xl: "2.5rem",
+};
+
+/**
+ * Group multiple avatars together
+ */
+export const AvatarGroup = ({
+  ref,
+  children,
+  className,
+  totalCount,
+  rounded,
+  size,
+  ...aria
+}: AvatarGroupProps) => {
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (size && !(size in SizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in SizeMap) {
+        s.fontSize = SizeMap[size];
+      }
+      return s;
+    },
+    [size],
+    "Icon styles",
+  );
+
+  const avatars = useMemo(
+    () => Children.toArray(children).filter(Boolean),
+    [children],
+  );
+  const diff = useMemo(
+    () =>
+      totalCount && totalCount > avatars.length && totalCount - avatars.length,
+    [avatars, totalCount],
+  );
+  return (
+    <div
+      {...aria}
+      ref={ref as AnyObject}
+      className={classNames(
+        classes.avatarGroup,
+        className,
+        "inline-flex flex-nowrap",
+        !rounded && "rounded",
+        rounded && "rounded-full",
+      )}
+      style={styles}
+    >
+      {avatars}
+      {!!diff && (
+        <dfn
+          className={classNames(
+            classes.avatar,
+            "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center",
+            classes.extra,
+          )}
+        >
+          <svg>
+            <text
+              x="50%"
+              y="50%"
+              dy=".1em"
+              dominantBaseline="middle"
+              textAnchor="middle"
+              style={{ fontSize: ".375em", fontWeight: 500 }}
+            >
+              {`+${diff}`}
+            </text>
+          </svg>
+        </dfn>
+      )}
+    </div>
+  );
+};
diff --git a/packages/core/src/components/badge/Badge.module.css b/packages/core/src/components/badge/Badge.module.css
new file mode 100644
index 0000000..2be4562
--- /dev/null
+++ b/packages/core/src/components/badge/Badge.module.css
@@ -0,0 +1,163 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  @keyframes pinger {
+    0% {
+      transform: scale(1);
+      opacity: 0.7;
+    }
+
+    100% {
+      transform: scale(3);
+      opacity: 0;
+    }
+  }
+
+  .badge {
+    box-sizing: content-box;
+    color: theme(textColor.base);
+    background-color: theme(colors.tint.200);
+    outline: 0.5px solid theme(backgroundColor.base);
+
+    & > span {
+      font-size: 0.625rem;
+      font-weight: 500;
+      line-height: 1;
+      vertical-align: 0.125rem;
+    }
+
+    &[data-ping="true"] {
+      --translate: calc(50%);
+
+      &::before {
+        content: "";
+
+        position: absolute;
+        z-index: -1;
+        inset: 0;
+
+        background-color: inherit;
+        border-radius: 999px;
+
+        animation: pinger 1s linear infinite;
+      }
+    }
+
+    &:not([data-ping="true"]) {
+      --translate: 0.75rem;
+
+      min-width: 1em;
+    }
+
+    &[data-placement="top"] {
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &[data-placement="top-start"] {
+      top: 0;
+      inset-inline-start: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(calc(var(--translate) * -1), -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(calc(var(--translate) * 1), -50%);
+      }
+    }
+
+    &[data-placement="top-end"] {
+      top: 0;
+      inset-inline-end: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(calc(var(--translate) * 1), -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(calc(var(--translate) * -1), -50%);
+      }
+    }
+
+    &[data-placement="bottom"] {
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, 50%);
+    }
+
+    &[data-placement="bottom-start"] {
+      bottom: 0;
+      inset-inline-start: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(calc(var(--translate) * -1), -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(calc(var(--translate) * 1), -50%);
+      }
+    }
+
+    &[data-placement="bottom-end"] {
+      bottom: 0;
+      inset-inline-end: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(calc(var(--translate) * 1), -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(calc(var(--translate) * -1), -50%);
+      }
+    }
+
+    &[data-placement="start"] {
+      top: 50%;
+      inset-inline-start: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(-50%, -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(50%, -50%);
+      }
+    }
+
+    &[data-placement="end"] {
+      top: 50%;
+      inset-inline-end: 0;
+
+      :global([dir="ltr"]) & {
+        transform: translate(50%, -50%);
+      }
+
+      :global([dir="rtl"]) & {
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
diff --git a/packages/core/src/components/badge/Badge.tsx b/packages/core/src/components/badge/Badge.tsx
new file mode 100644
index 0000000..fbb3b0b
--- /dev/null
+++ b/packages/core/src/components/badge/Badge.tsx
@@ -0,0 +1,137 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isNumber, isObject, mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { cloneElement, useMemo } from "react";
+import {
+  type BadgeType,
+  type ChildProp,
+  type CssProp,
+  type IconProps,
+  type RefProp,
+} from "../../types";
+import { Icon } from "../icon/Icon";
+import classes from "./Badge.module.css";
+
+export interface BadgeProps
+  extends CssProp,
+    RefProp,
+    IconProps,
+    Partial<ChildProp> {
+  /**
+   * badge value
+   */
+  value?: number | string;
+  /**
+   * max value for number display
+   */
+  max?: number;
+  /**
+   * ping animation
+   */
+  ping?: boolean;
+  /**
+   * badge placement
+   */
+  placement?:
+    | "top-start"
+    | "top-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "top"
+    | "bottom"
+    | "start"
+    | "end";
+}
+
+export const getBadgeProps = (
+  badge?: string | number | BadgeType,
+): AnyObject => {
+  if (isObject(badge)) {
+    return Object.assign({ forButton: true, placement: "" }, badge);
+  } else {
+    return {
+      value: badge,
+      forButton: true,
+      placement: "",
+    };
+  }
+};
+
+export const Badge = ({
+  ref,
+  className,
+  value,
+  max,
+  ping,
+  placement = "top-end",
+  children,
+  // @ts-expect-error ignore
+  forButton = false,
+  icon,
+  iconBg,
+  iconColor,
+  rtlFlip,
+  ...rest
+}: BadgeProps) => {
+  const label = useMemo(() => {
+    if (isNumber(value) && max && value > max) {
+      return `${max}+`;
+    }
+    return value;
+  }, [value, max]);
+
+  const innerRef = useMemo(
+    () => mergeRefs(ref, (children as AnyObject)?.props.ref),
+    [ref, (children as AnyObject)?.props.ref],
+  );
+
+  return (
+    <div
+      className={classNames(forButton ? "contents" : "inline-block relative")}
+    >
+      {children &&
+        cloneElement(children as AnyObject, {
+          ...rest,
+          ref: innerRef,
+        })}
+      <div
+        data-ref="badge"
+        data-ping={ping}
+        data-placement={placement}
+        className={classNames(
+          classes.badge,
+          className,
+          "inline-block p-px min-w-2 min-h-2 text-center rounded-full leading-none z-5 pointer-events-none",
+          forButton && !placement ? "relative" : "absolute",
+        )}
+      >
+        {label && <span className="p-1">{label}</span>}
+        {icon && (
+          <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/components/breadcrumbs/Breadcrumbs.module.css b/packages/core/src/components/breadcrumbs/Breadcrumbs.module.css
new file mode 100644
index 0000000..2ac2b6d
--- /dev/null
+++ b/packages/core/src/components/breadcrumbs/Breadcrumbs.module.css
@@ -0,0 +1,189 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .breadcrumbs,
+  .breadcrumbOverflow {
+    --color: theme(colors.primary.DEFAULT);
+
+    &[data-color="accent"] {
+      --color: theme(colors.accent.DEFAULT);
+    }
+
+    &[data-color="info"] {
+      --color: theme(colors.info.DEFAULT);
+    }
+
+    &[data-color="danger"] {
+      --color: theme(colors.danger.DEFAULT);
+    }
+
+    &[data-color="success"] {
+      --color: theme(colors.success.DEFAULT);
+    }
+
+    &[data-color="warning"] {
+      --color: theme(colors.warning.DEFAULT);
+    }
+
+    & :global(.link) {
+      padding: 0.25em 0.5em;
+      text-decoration: none;
+    }
+  }
+
+  .breadcrumbOverflow,
+  .breadcrumbs[data-variant="classic"] {
+    & :global(.link) {
+      color: color-mix(in lab, var(--color) 90%, var(--fabric-text));
+    }
+
+    & :global(.link):hover {
+      color: color-mix(in lab, var(--color) 99%, var(--fabric-text));
+      text-decoration: underline;
+      background-color: theme(colors.tint.50/50%);
+    }
+
+    & :global(.link):active {
+      color: color-mix(in lab, var(--color) 85%, var(--fabric-text));
+      background-color: theme(colors.tint.50);
+    }
+  }
+
+  .breadcrumbs[data-variant="classic"] {
+    & > .breadcrumbLink {
+      list-style: none;
+
+      &::after {
+        content: attr(data-separator);
+        display: inline-block;
+        margin-inline: 0.125em;
+        color: theme(colors.tint.300);
+      }
+
+      &:last-child::after {
+        content: unset;
+      }
+    }
+  }
+
+  [data-ref="viewport"] .breadcrumbs {
+    grid-area: crumbbar;
+    padding: 0 0.25rem;
+  }
+}
+
+@layer var {
+  .breadcrumbs[data-variant="classic"] {
+    & > :global(.link) {
+      overflow: hidden;
+      max-width: 24rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    & > .breadcrumbLink:last-child > :global(.link) {
+      pointer-events: none;
+      color: theme(colors.tint.600);
+    }
+  }
+
+  .breadcrumbs[data-variant="modern"] {
+    & > .breadcrumbLink {
+      --linkcolor: color-mix(in lab, var(--color) 50%, var(--fabric-bg));
+
+      position: relative;
+      list-style: none;
+      border-radius: var(--fabric-rounding);
+
+      &:last-child {
+        --color: theme(colors.tint.500);
+
+        pointer-events: none;
+      }
+
+      &:first-child > :global(.link) {
+        border-start-start-radius: var(--fabric-rounding);
+        border-end-start-radius: var(--fabric-rounding);
+      }
+
+      &:last-child > :global(.link) {
+        border-start-end-radius: var(--fabric-rounding);
+        border-end-end-radius: var(--fabric-rounding);
+      }
+
+      &:not(:first-child) {
+        margin-inline-start: -1em;
+
+        &::before {
+          content: "";
+
+          display: inline-block;
+
+          vertical-align: middle;
+
+          border: 0.625em solid transparent;
+          border-block-color: var(--linkcolor);
+          border-inline-end-color: var(--linkcolor);
+        }
+
+        & > :global(.link) {
+          margin-inline-start: -0.625em;
+        }
+      }
+
+      &:not(:last-child) {
+        &::after {
+          content: "";
+
+          display: inline-block;
+
+          vertical-align: middle;
+
+          border: 0.625em solid transparent;
+          border-inline-start-color: var(--linkcolor);
+        }
+      }
+
+      & > :global(.link) {
+        display: inline-block;
+
+        padding: 0.125em 0.5em;
+
+        line-height: 1;
+        color: color-mix(in lab, var(--color) 50%, var(--fabric-text));
+        vertical-align: middle;
+
+        background-color: var(--linkcolor);
+      }
+
+      &:hover {
+        --linkcolor: color-mix(in lab, var(--color) 65%, var(--fabric-bg));
+      }
+
+      &:active {
+        --linkcolor: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
+      }
+    }
+  }
+}
diff --git a/packages/core/src/components/breadcrumbs/Breadcrumbs.tsx b/packages/core/src/components/breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000..a25f6d8
--- /dev/null
+++ b/packages/core/src/components/breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,109 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { Children, useMemo } from "react";
+import { type AriaProps, type ChildrenProp, type CssProp } from "../../types";
+import { Link } from "../../typography/Link";
+import { Dropdown } from "../dropdown/Dropdown";
+import classes from "./Breadcrumbs.module.css";
+
+export interface BreadcrumbProps
+  extends CssProp,
+    AriaProps,
+    ChildrenProp<typeof Link> {
+  /**
+   * breadcrumb styling
+   */
+  variant?: "classic" | "modern";
+  /**
+   * classic breadcrumb spearator
+   */
+  separator?: string;
+  /**
+   * breadcrumb color
+   */
+  color?: "primary" | "accent";
+}
+
+export const Breadcrumbs = ({
+  variant = "classic",
+  className,
+  separator = "/",
+  children,
+  color,
+  ...aria
+}: BreadcrumbProps) => {
+  const [start, overflow, end] = useMemo(() => {
+    const nodeList = Children.toArray(children as AnyObject);
+    if (nodeList.length > 7) {
+      return [nodeList.slice(0, 3), nodeList.slice(3, -3), nodeList.slice(-3)];
+    }
+    return [nodeList];
+  }, [children]);
+
+  return (
+    <nav
+      data-color={color}
+      data-variant={variant}
+      className={classNames(
+        classes.breadcrumbs,
+        className,
+        "flex flex-nowrap items-center",
+      )}
+      {...aria}
+    >
+      {start.map((link, idx) => (
+        <li
+          key={idx}
+          className={classes.breadcrumbLink}
+          data-separator={separator}
+        >
+          {link}
+        </li>
+      ))}
+      {overflow && (
+        <Dropdown closeOnClick showArrow>
+          <li className={classes.breadcrumbLink} data-separator={separator}>
+            <Link>...</Link>
+          </li>
+          <div
+            data-color={color}
+            className={classNames(classes.breadcrumbOverflow, "flex flex-col")}
+          >
+            {overflow}
+          </div>
+        </Dropdown>
+      )}
+      {end?.map((link, idx) => (
+        <li
+          key={idx}
+          className={classes.breadcrumbLink}
+          data-separator={separator}
+        >
+          {link}
+        </li>
+      ))}
+    </nav>
+  );
+};
diff --git a/packages/core/src/components/button/Button.module.css b/packages/core/src/components/button/Button.module.css
new file mode 100644
index 0000000..d0ab6e0
--- /dev/null
+++ b/packages/core/src/components/button/Button.module.css
@@ -0,0 +1,345 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .buttonWrapper {
+    --color: theme(colors.primary.500);
+
+    font-size: 1rem;
+
+    & .button {
+      color: var(--text);
+      background-color: var(--bg);
+      background-image: var(--click-gradient);
+      outline: 1px solid var(--outline);
+
+      &.spinOnHover:hover .buttonIcon {
+        & :global {
+          animation: spin 2s linear infinite;
+        }
+      }
+
+      & > * {
+        pointer-events: none;
+      }
+    }
+
+    & .rounded {
+      border-radius: 9999px;
+    }
+
+    & .buttonLabel {
+      order: 1;
+      padding: 0.5em 1em;
+      line-height: 1;
+
+      & + .altIcon {
+        margin-inline-start: -1em;
+      }
+    }
+
+    & .buttonIcon {
+      padding: 0.3889em;
+      font-size: 1.125em;
+    }
+
+    & :global(.hotkey-label) {
+      align-self: center;
+      order: 3;
+    }
+
+    & .altIcon {
+      align-self: center;
+      order: 4;
+      padding: 0.125em 0.5em;
+    }
+
+    & [data-ref="badge"] {
+      align-self: center;
+      order: 2;
+      margin-inline-end: 0.5em;
+    }
+  }
+
+  .buttonGroup {
+    & > .buttonWrapper {
+      flex: 0 1 1em;
+    }
+
+    &:not(.flex) + &:not(.flex) {
+      margin-inline-start: 0.5rem;
+    }
+  }
+}
+
+@layer util {
+  .buttonWrapper {
+    &[data-size="xs"] {
+      font-size: 0.625rem;
+    }
+
+    &[data-size="sm"] {
+      font-size: 0.875rem;
+    }
+
+    &[data-size="md"] {
+      font-size: 1.125rem;
+    }
+
+    &[data-size="lg"] {
+      font-size: 1.25rem;
+    }
+
+    &[data-size="xl"] {
+      font-size: 1.5rem;
+    }
+  }
+
+  .button {
+    --bg: color-mix(in lab, var(--fabric-bg) 99%, var(--tint));
+    --outline: color-mix(in lab, var(--bg) 90%, var(--fabric-text));
+    --text: color-mix(in lab, var(--color) 80%, var(--fabric-text));
+    --bg-hover: color-mix(in lab, var(--color) 18%, var(--fabric-bg));
+    --bg-click: color-mix(in lab, var(--color) 25%, var(--fabric-bg));
+    --bg-active: color-mix(in lab, var(--color) 36%, var(--fabric-bg));
+
+    &[data-color="accent"] {
+      --color: theme(colors.accent.500);
+    }
+
+    &[data-color="info"] {
+      --color: theme(colors.info.500);
+    }
+
+    &[data-color="danger"] {
+      --color: theme(colors.danger.500);
+    }
+
+    &[data-color="success"] {
+      --color: theme(colors.success.500);
+    }
+
+    &[data-color="warning"] {
+      --color: theme(colors.warning.500);
+    }
+
+    &[data-variant="outline"] {
+      --outline: var(--color);
+    }
+
+    &[data-variant="solid"] {
+      --outline: var(--color);
+      --bg: color-mix(in lab, var(--color) 96%, var(--fabric-text));
+      --text: theme(colors.white);
+      --bg-hover: color-mix(in lab, var(--color) 90%, var(--fabric-bg));
+      --bg-click: color-mix(in lab, var(--color) 80%, theme(colors.black));
+      --bg-active: color-mix(in lab, var(--color) 70%, theme(colors.black));
+
+      & :global(.hotkey-label) {
+        color: theme(colors.white/70%);
+        background-color: theme(backgroundColor.dark/30%);
+      }
+    }
+
+    &[data-variant="link"] {
+      --bg: transparent;
+      --outline: transparent;
+
+      background-image: none;
+      box-shadow: none;
+    }
+
+    &[data-color="invert"] {
+      --bg: theme(backgroundColor.invert);
+      --text: color-mix(in lab, var(--color) 90%, theme(textColor.invert));
+      --bg-hover: color-mix(
+        in lab,
+        var(--color) 15%,
+        theme(backgroundColor.invert)
+      );
+      --bg-click: color-mix(
+        in lab,
+        var(--color) 35%,
+        theme(backgroundColor.invert)
+      );
+    }
+  }
+
+  .buttonIcon[data-align="start"] {
+    order: 0;
+
+    & + .buttonLabel[data-colored-icon="false"] {
+      margin-inline-start: -1em;
+    }
+  }
+
+  .buttonIcon[data-align="end"] {
+    order: 2;
+
+    & ~ .buttonLabel[data-colored-icon="false"] {
+      margin-inline-end: -1em;
+    }
+  }
+}
+
+@layer var {
+  .buttonWrapper {
+    height: unset;
+    padding: unset;
+
+    &[data-disabled="true"] {
+      cursor: not-allowed;
+
+      & .button {
+        pointer-events: none;
+        opacity: 0.5;
+        background-image: var(--active-gradient);
+      }
+    }
+
+    &[data-loading="true"] {
+      cursor: wait;
+
+      & .button {
+        pointer-events: none;
+        background-image: var(--progress-gradient);
+        background-size: 1em 1em;
+
+        & :global {
+          animation: progress 750ms linear infinite;
+        }
+      }
+
+      & .button:not([data-variant="solid"]) {
+        background-color: color-mix(in lab, var(--color) 15%, var(--fabric-bg));
+      }
+    }
+  }
+
+  .button {
+    --tw-ring-color: var(--color);
+
+    &:hover {
+      background-color: var(--bg-hover);
+    }
+
+    &:active {
+      background-color: var(--bg-click);
+      background-image: var(--active-gradient);
+
+      .buttonIcon,
+      .buttonLabel {
+        transform: translateY(1px);
+      }
+    }
+
+    &[data-active="true"],
+    &[data-checked="true"],
+    &[data-dropdown-open="true"] {
+      background-color: var(--bg-active);
+      background-image: none;
+    }
+
+    &[data-dropdown-open="true"] {
+      pointer-events: none;
+    }
+
+    &[data-active="true"] {
+      pointer-events: none;
+    }
+  }
+
+  .buttonGroup {
+    & > .buttonWrapper {
+      margin: 0;
+
+      & .button[data-variant="link"] {
+        --outline: theme(backgroundColor.base);
+      }
+    }
+
+    &:not(.vertical) {
+      & > :not(:first-child) {
+        &::before {
+          content: "";
+
+          position: absolute;
+          inset-block: 5%;
+          inset-inline-start: -0.5px;
+
+          border-inline-start: 0.5px solid theme(borderColor.base);
+        }
+      }
+
+      &.separator > :not(:first-child) {
+        margin-inline-start: 2px;
+
+        &::before {
+          inset-inline-start: -1.5px;
+        }
+      }
+
+      & > :not(:last-child) .button {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+
+      & > :not(:first-child) .button {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+    }
+
+    &.vertical {
+      & > :not(:first-child) {
+        &::before {
+          content: "";
+
+          position: absolute;
+          inset-block-start: -0.5px;
+          inset-inline: 5%;
+
+          border-block-start: 0.5px solid theme(borderColor.base);
+        }
+      }
+
+      &.separator > :not(:first-child) {
+        margin-block-start: 1px;
+
+        &::before {
+          inset-block-start: -1px;
+        }
+      }
+
+      & > :not(:last-child) .button {
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
+      }
+
+      & > :not(:first-child) .button {
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+      }
+    }
+  }
+}
diff --git a/packages/core/src/components/button/Button.tsx b/packages/core/src/components/button/Button.tsx
new file mode 100644
index 0000000..ecb6c10
--- /dev/null
+++ b/packages/core/src/components/button/Button.tsx
@@ -0,0 +1,308 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useEffectDebugger } from "../../hooks/useEffectDebugger";
+import { HotKey } from "../../hotkeys/HotKey";
+import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
+import { Tooltip } from "../../overlays/tooltip/Tooltip";
+import {
+  type AriaProps,
+  type BadgeType,
+  type CallbackReturn,
+  type ColorType,
+  type CssProp,
+  type IconProps,
+  type PolymorphicProps,
+  type RefProp,
+  type SizeType,
+  type TestProps,
+  type TooltipType,
+} from "../../types";
+import { AnimationIndicator } from "../animations/Animations";
+import { Badge, getBadgeProps } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
+import classes from "./Button.module.css";
+
+export interface BaseProps
+  extends CssProp,
+    AriaProps,
+    IconProps,
+    RefProp,
+    TestProps {
+  /**
+   * primary icon alignment
+   */
+  iconAlign?: "start" | "end";
+  /**
+   * alternate icon align end (caret, arrow)
+   */
+  altIcon?: string;
+  /**
+   * button size
+   */
+  size?: SizeType;
+  /**
+   * button color
+   */
+  color?: ColorType;
+  /**
+   * button type
+   */
+  type?: "button" | "reset" | "submit";
+  /**
+   * button styling
+   */
+  variant?: "outline" | "solid" | "link";
+  /**
+   * active state with click disabled
+   */
+  active?: boolean;
+  /**
+   * loading state with animation and click disabled
+   */
+  loading?: boolean;
+  /**
+   * full rounded edges
+   */
+  rounded?: boolean;
+  /**
+   * spin icon on hover
+   */
+  spinOnHover?: boolean;
+  /**
+   * disabled state
+   */
+  disabled?: boolean;
+  /**
+   * stretch to full width
+   */
+  fullWidth?: boolean;
+  /**
+   * action completed message works best with `onClick` Promise return.
+   * To hide completed message onClick/Promise return should be false
+   */
+  actionMessage?: string;
+  /**
+   * manually force show action message
+   */
+  showActionDone?: boolean;
+  /**
+   * show action message `onClick` or manually by setting `showActionDone` true
+   */
+  showActionDoneEvent?: "click" | "manual";
+  /**
+   * click handler, return Promise to autoset loading state
+   */
+  onClick?: (e?: React.MouseEvent) => CallbackReturn;
+  /**
+   * badges
+   */
+  badge?: string | number | BadgeType;
+  /**
+   * keyboard shortcut
+   */
+  hotKey?: string;
+}
+
+export type ButtonProps =
+  | { children: string; "aria-label"?: string }
+  | { children?: never; "aria-label": string };
+
+/**
+ * Clickable action button
+ */
+export const Button = <Tag extends React.ElementType = "button">({
+  as,
+  ref,
+  children,
+  className,
+  active,
+  color = "primary",
+  icon,
+  iconBg,
+  iconColor,
+  iconAlign = "start",
+  altIcon,
+  rtlFlip,
+  rounded,
+  size,
+  disabled,
+  loading,
+  variant,
+  badge,
+  fullWidth,
+  spinOnHover,
+  onClick,
+  actionMessage,
+  type = "button",
+  hotKey,
+  showActionDone,
+  showActionDoneEvent = "click",
+  tabIndex = 0,
+  ...aria
+}: BaseProps & ButtonProps & PolymorphicProps<Tag>) => {
+  const refEl = useRef<AnyObject>(null);
+  const [busy, setBusy] = useState(false);
+  const [actionDone, setActionDone] = useState(false);
+
+  const clickHandler = useCallback(
+    (e: React.MouseEvent) => {
+      setBusy(true);
+      e.stopPropagation();
+      const ret = onClick?.(e);
+      void Promise.resolve(ret).then((b) => {
+        setBusy(false);
+        if (b !== false && actionMessage && showActionDoneEvent === "click") {
+          setActionDone(true);
+        }
+      });
+    },
+    [onClick, disabled, actionMessage, showActionDoneEvent],
+  );
+
+  /** ***************** reset done state on timeout *******************/
+  useEffect(() => {
+    actionMessage && showActionDone && setActionDone(true);
+  }, [showActionDone, actionMessage]);
+  useEffectDebugger(
+    () => {
+      if (actionDone) {
+        const timer = setTimeout(() => setActionDone(false), 2000);
+        return () => clearTimeout(timer);
+      }
+    },
+    [actionDone],
+    "ActionButton done handler",
+  );
+
+  const TooltipWrapper = useMemo(
+    () => (actionMessage ? Tooltip : Fragment),
+    [actionMessage, actionDone],
+  );
+  const tooltipProps = useMemo(() => {
+    if (actionDone && actionMessage) {
+      return {
+        content: actionMessage,
+        placement: "top",
+        color,
+        open: true,
+      } as TooltipType;
+    }
+  }, [actionDone, actionMessage, color]);
+
+  const badgeProps = useMemo(() => {
+    return getBadgeProps(badge);
+  }, [badge]);
+
+  const E = as ?? "button";
+  return (
+    <div
+      className={classNames(
+        classes.buttonWrapper,
+        className,
+        "relative align-text-top select-none focus-within:z-1",
+        fullWidth ? "block w-full" : "inline-block",
+      )}
+      data-ref="button"
+      data-size={size}
+      data-loading={busy || loading}
+      data-disabled={disabled}
+    >
+      {hotKey && (
+        <HotKey
+          keyCombo={hotKey}
+          handler={() => !disabled && refEl.current?.click()}
+        />
+      )}
+      <TooltipWrapper {...tooltipProps}>
+        <E
+          ref={mergeRefs(ref, refEl)}
+          role="button"
+          className={classNames(
+            classes.button,
+            "pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none",
+            `focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner`,
+            fullWidth && "max-w-full w-full",
+            !rounded && "rounded",
+            rounded && "rounded-full",
+            spinOnHover && classes.spinOnHover,
+          )}
+          type={type}
+          disabled={disabled}
+          tabIndex={tabIndex}
+          data-inner-clickable
+          onClick={clickHandler}
+          data-color={color}
+          data-active={active}
+          data-variant={variant}
+          {...aria}
+        >
+          {icon && (
+            <Icon
+              className={classes.buttonIcon}
+              icon={icon}
+              bg={iconBg}
+              color={iconColor}
+              rtlFlip={rtlFlip}
+              data-align={iconAlign}
+            />
+          )}
+          {children && (
+            <label
+              className={classNames(classes.buttonLabel, "truncate")}
+              data-colored-icon={!!iconBg}
+            >
+              {children}
+            </label>
+          )}
+          {badge && <Badge {...badgeProps} />}
+          {hotKey && <HotKeyLabel keyCombo={hotKey} />}
+          {altIcon && (
+            <Icon className={classes.altIcon} icon={altIcon} rtlFlip />
+          )}
+        </E>
+      </TooltipWrapper>
+      {actionDone && (
+        <div
+          className={classNames(
+            "absolute inset-0 overflow-hidden flex justify-center items-center",
+            `bg-${color}-300`,
+            rounded ? "rounded-full" : "rounded",
+          )}
+        >
+          <AnimationIndicator type="check" color={color} />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/core/src/components/button/ButtonGroup.tsx b/packages/core/src/components/button/ButtonGroup.tsx
new file mode 100644
index 0000000..0bfbc7d
--- /dev/null
+++ b/packages/core/src/components/button/ButtonGroup.tsx
@@ -0,0 +1,112 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { Children, cloneElement } from "react";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type RefProp,
+  type SizeType,
+  type TestProps,
+} from "../../types";
+import { type Button } from "./Button";
+import classes from "./Button.module.css";
+
+export interface ButtonGroupProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    RefProp<HTMLDivElement>,
+    ChildrenProp<React.ReactElement<typeof Button>> {
+  /**
+   * vertical orientation
+   */
+  vertical?: boolean;
+  /**
+   * button styling
+   */
+  variant?: "outline" | "solid" | "link";
+  /**
+   * button size
+   */
+  size?: SizeType;
+  /**
+   * button color
+   */
+  color?: ColorType;
+  /**
+   * full rounded edges
+   */
+  rounded?: boolean;
+  /**
+   * disabled state
+   */
+  disabled?: boolean;
+  /**
+   * stretch to full width
+   */
+  fullWidth?: boolean;
+}
+
+export const ButtonGroup = ({
+  vertical,
+  className,
+  children,
+  variant,
+  rounded,
+  disabled,
+  fullWidth,
+  color,
+  size,
+  ...aria
+}: ButtonGroupProps) => {
+  return (
+    <div
+      data-ref="buttonGroup"
+      className={classNames(
+        classes.buttonGroup,
+        className,
+        fullWidth ? "flex" : "inline-flex",
+        "flex-nowrap align-middle rounded",
+        vertical && classes.vertical,
+        vertical && "flex-col items-stretch",
+      )}
+      {...aria}
+    >
+      {Children.map(children, (child: AnyObject) =>
+        cloneElement(child, {
+          color,
+          size,
+          variant,
+          disabled,
+          rounded,
+          fullWidth,
+          ...child.props,
+        }),
+      )}
+    </div>
+  );
+};
diff --git a/packages/core/src/components/button/ConfirmButton.tsx b/packages/core/src/components/button/ConfirmButton.tsx
new file mode 100644
index 0000000..08d0bc0
--- /dev/null
+++ b/packages/core/src/components/button/ConfirmButton.tsx
@@ -0,0 +1,202 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  FloatingArrow,
+  FloatingPortal,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from "@floating-ui/react";
+import { mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { type PolymorphicProps, type RefProp } from "../../types";
+import { Button, type BaseProps, type ButtonProps } from "./Button";
+
+interface ExtendedProps extends BaseProps, RefProp {
+  /**
+   * confirm message
+   */
+  message: string;
+  /**
+   * ok label
+   */
+  okLabel?: string;
+  /**
+   * ok label
+   */
+  cancelLabel?: string;
+}
+
+export type ConfirmButtonProps = ExtendedProps & ButtonProps;
+
+/**
+ * Button with confirmation dropdown
+ */
+export const ConfirmButton = <Tag extends React.ElementType = "button">({
+  ref,
+  message,
+  color,
+  okLabel,
+  cancelLabel,
+  onClick,
+  loading,
+  actionMessage,
+  showActionDone,
+  showActionDoneEvent = "click",
+  ...props
+}: ConfirmButtonProps & PolymorphicProps<Tag>) => {
+  const { t } = useTranslation("core");
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [actionDone, setActionDone] = useState(false);
+
+  const clickHandler = useCallback(
+    (e?: React.MouseEvent) => {
+      setBusy(true);
+      const ret = onClick?.(e);
+      void Promise.resolve(ret).then((b) => {
+        setBusy(false);
+        if (b !== false && actionMessage && showActionDoneEvent === "click") {
+          setActionDone(true);
+        }
+      });
+    },
+    [onClick, actionMessage, showActionDoneEvent],
+  );
+  useEffect(() => {
+    if (actionDone) {
+      const timer = setTimeout(() => setActionDone(false), 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [actionDone]);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    strategy: "fixed",
+    placement: "bottom",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      shift({ padding: 8 }),
+      flip(),
+      offset(9),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const click = useClick(context, {
+    enabled: !props.disabled,
+  });
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    click,
+  ]);
+
+  const ButtonWrapper = useCallback(
+    ({ ref, ...props }: AnyObject) => <Button ref={ref} {...props} />,
+    [],
+  );
+
+  const innerRef = useMemo(
+    () => mergeRefs(ref, refs.setReference),
+    [ref, refs.setReference],
+  );
+
+  return (
+    <Fragment>
+      <ButtonWrapper
+        {...props}
+        color={color}
+        loading={busy || loading}
+        showActionDone={actionDone || showActionDone}
+        showActionDoneEvent="manual"
+        actionMessage={actionMessage}
+        ref={innerRef}
+        {...getReferenceProps()}
+        data-dropdown-open={isOpen}
+      />
+      {isOpen && (
+        <FloatingPortal>
+          <div
+            data-color={color}
+            className={classNames(
+              "select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base",
+            )}
+            ref={refs.setFloating}
+            style={floatingStyles}
+            {...getFloatingProps()}
+          >
+            <div className="font-medium ">
+              <p className="py-2 px-4">{message}</p>
+              <div className="flex justify-end py-2 px-4 gap-2">
+                <Button
+                  size="sm"
+                  variant="link"
+                  color={color}
+                  onClick={() => setIsOpen(false)}
+                >
+                  {cancelLabel ?? t("action.cancel")}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="solid"
+                  color={color}
+                  onClick={(e) => [clickHandler(e), setIsOpen(false)]}
+                >
+                  {okLabel ?? t("action.ok")}
+                </Button>
+              </div>
+            </div>
+            <FloatingArrow
+              ref={arrowRef}
+              context={context}
+              strokeWidth={0.5}
+              className="fill-base stroke-muted"
+            />
+          </div>
+        </FloatingPortal>
+      )}
+    </Fragment>
+  );
+};
diff --git a/packages/core/src/components/button/ToggleButtonGroup.tsx b/packages/core/src/components/button/ToggleButtonGroup.tsx
new file mode 100644
index 0000000..0e87cf5
--- /dev/null
+++ b/packages/core/src/components/button/ToggleButtonGroup.tsx
@@ -0,0 +1,161 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isArray } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Children, cloneElement, useCallback, useMemo } from "react";
+import { useControlledValue } from "../../hooks/useControlledValue";
+import {
+  EMPTY_ARRAY,
+  type AriaProps,
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type SizeType,
+} from "../../types";
+import { type ButtonProps } from "./Button";
+import classes from "./Button.module.css";
+
+interface BaseProps
+  extends CssProp,
+    AriaProps,
+    ChildrenProp<React.ReactElement<ButtonProps & { value: string }>> {
+  /**
+   * vertical orientation
+   */
+  vertical?: boolean;
+  /**
+   * button styling
+   */
+  variant?: "outline" | "solid" | "link";
+  /**
+   * button size
+   */
+  size?: SizeType;
+  /**
+   * button color
+   */
+  color?: ColorType;
+  /**
+   * full rounded edges
+   */
+  rounded?: boolean;
+  /**
+   * disabled state
+   */
+  disabled?: boolean;
+  /**
+   * stretch to full width
+   */
+  fullWidth?: boolean;
+}
+
+export type ToggleButtonGroupProps = BaseProps &
+  (
+    | {
+        /**
+         *
+         */
+        value: string;
+        /**
+         * change handler
+         */
+        onChange?: (value: string) => void;
+      }
+    | {
+        /**
+         *
+         */
+        value: string[];
+        /**
+         * change handler
+         */
+        onChange?: (value: string[]) => void;
+      }
+  );
+
+export const ToggleButtonGroup = ({
+  vertical,
+  className,
+  children,
+  variant,
+  rounded,
+  disabled,
+  fullWidth,
+  color,
+  size,
+  value,
+  onChange,
+  ...aria
+}: ToggleButtonGroupProps) => {
+  const isMultiple = useMemo(() => isArray(value), [value]);
+  const { currentValue, updateValue } = useControlledValue<typeof value>(
+    value,
+    isArray(value) ? EMPTY_ARRAY : "",
+  );
+
+  const clickHandler = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      let newValue: AnyObject = `${e.currentTarget.dataset.value}`;
+      if (isArray(currentValue)) {
+        if (currentValue.includes(newValue))
+          newValue = currentValue.filter((v) => v !== newValue);
+        else newValue = [...currentValue, newValue];
+      }
+      updateValue(newValue);
+      onChange?.(newValue);
+    },
+    [currentValue, onChange],
+  );
+
+  return (
+    <div
+      className={classNames(
+        classes.buttonGroup,
+        className,
+        fullWidth ? "flex" : "inline-flex",
+        "flex-nowrap align-middle",
+        vertical && classes.vertical,
+        vertical && "flex-col",
+      )}
+      {...aria}
+    >
+      {Children.map(children, (child: AnyObject) =>
+        cloneElement(child, {
+          color,
+          size,
+          variant,
+          disabled,
+          rounded,
+          fullWidth,
+          ...child.props,
+          onClick: clickHandler,
+          "data-value": child.props.value,
+          "data-checked": isMultiple
+            ? currentValue.includes(child.props.value)
+            : currentValue === child.props.value,
+        }),
+      )}
+    </div>
+  );
+};
diff --git a/packages/core/src/components/callout/Callout.tsx b/packages/core/src/components/callout/Callout.tsx
new file mode 100644
index 0000000..2951f63
--- /dev/null
+++ b/packages/core/src/components/callout/Callout.tsx
@@ -0,0 +1,109 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorType,
+  type PaletteType,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { getBgClass, getBorderClass, getColorClass } from "../../utils";
+import { Icon } from "../icon/Icon";
+
+export interface CalloutProps extends AriaProps, ChildrenProp, TestProps {
+  /**
+   * callout color
+   */
+  color?: ColorType | PaletteType;
+  /**
+   * legend title
+   */
+  legend?: string;
+  /**
+   * callout icon
+   */
+  icon?: string;
+  /**
+   * callout title
+   */
+  title?: string;
+  /**
+   * callout border style
+   */
+  border?: "solid" | "dotted" | "dashed";
+  /**
+   * close action handler
+   */
+  onClose?: () => void;
+}
+
+export const Callout = ({
+  children,
+  // @ts-expect-error ignore
+  color = "tint",
+  legend,
+  title,
+  icon,
+  border,
+  onClose,
+  ...aria
+}: CalloutProps) => {
+  return (
+    <fieldset
+      className={classNames(
+        "block rounded-capped border max-w-full relative overflow-hidden mb-4",
+        getBgClass(color + "-50"),
+        getColorClass(color + "-700"),
+        getBorderClass(color + "-300"),
+        border === "dashed" && "border-dashed",
+        border === "dotted" && "border-dotted",
+      )}
+      {...aria}
+    >
+      {legend && <legend className="px-2 mx-4 font-medium">{legend}</legend>}
+      <div
+        className={classNames(
+          "break-words whitespace-break-spaces p-4",
+          legend && "pt-2",
+        )}
+      >
+        <div className="flex flex-nowrap items-center text-xl pe-4 gap-2 mb-4 empty:mb-0">
+          {icon && <Icon icon={icon} />}
+          {title && <p className="flex-1">{title}</p>}
+        </div>
+        <div className="pe-4">{children}</div>
+      </div>
+      {onClose && (
+        <Icon
+          size="md"
+          className={classNames("absolute end-2", legend ? "top-0" : "top-2")}
+          icon={CoreIcons.close}
+          onClick={onClose}
+        />
+      )}
+    </fieldset>
+  );
+};
diff --git a/packages/core/src/components/card/Card.module.css b/packages/core/src/components/card/Card.module.css
new file mode 100644
index 0000000..0fe706e
--- /dev/null
+++ b/packages/core/src/components/card/Card.module.css
@@ -0,0 +1,152 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .cardWrapper.selected {
+    &::before {
+      content: "";
+
+      position: absolute;
+      z-index: 5;
+      top: -4px;
+      inset-inline-start: -4px;
+
+      border-top: 1rem solid theme(colors.accent.500);
+      border-bottom: 1rem solid transparent;
+      border-inline-start: 1rem solid theme(colors.accent.500);
+      border-inline-end: 1rem solid transparent;
+      border-start-start-radius: var(--fabric-rounding-cap);
+    }
+
+    &::after {
+      content: "✓";
+
+      position: absolute;
+      z-index: 5;
+      top: -4px;
+      inset-inline-start: -4px;
+
+      padding: 4px;
+
+      line-height: 1;
+      color: theme(colors.white);
+    }
+  }
+
+  .card {
+    background-color: var(--fabric-bg);
+    box-shadow: 0 0 0 1px theme(borderColor.muted);
+
+    & > * {
+      background-color: transparent;
+    }
+
+    & .cardCover {
+      &.inheritScheme:has([data-colorset="dark"]) > .cardCoverContent,
+      &.dark > .cardCoverContent {
+        color: var(--white);
+        text-shadow: 0 0 2px var(--black);
+        background-image: linear-gradient(to bottom, #0000 0, #0006 100%);
+      }
+
+      &.inheritScheme:has([data-colorset="light"]) > .cardCoverContent,
+      &.light > .cardCoverContent {
+        color: var(--black);
+        text-shadow: 0 0 2px var(--white);
+        background-image: linear-gradient(to bottom, #fff0 0, #fff6 100%);
+      }
+    }
+
+    & .cardBody {
+      padding: 1rem;
+    }
+
+    &.clickable {
+      box-shadow:
+        0 0 0 1px theme(borderColor.dimmed),
+        0 1px 2px 0 var(--fabric-shadow);
+      transition: box-shadow 0ms;
+
+      &:has(.cardBody:hover):not(:has([data-inner-clickable="true"]:hover)) {
+        box-shadow:
+          0 0 0 1px theme(borderColor.dimmed),
+          0 1px 4px 0 var(--fabric-shadow),
+          0 8px 16px 0 color-mix(in lab, var(--fabric-shadow) 35%, #0000);
+        transition-delay: 150ms;
+      }
+
+      &:has(.cardBody:active):not(:has([data-inner-clickable="true"]:hover)) {
+        transform: translateY(1px);
+        box-shadow: 0 0 0 1px theme(borderColor.dimmed);
+        transition-delay: 0ms;
+      }
+
+      & .cardBody {
+        cursor: pointer;
+
+        &::after {
+          pointer-events: none;
+          content: "";
+
+          position: absolute;
+          z-index: 5;
+          inset: 0;
+
+          background-image: linear-gradient(
+            175deg,
+            rgb(255 255 255 / 5%) 0%,
+            transparent 18%,
+            transparent 72%,
+            rgb(0 0 0 / 5%) 100%
+          );
+        }
+      }
+    }
+  }
+}
+
+@layer util {
+  .card {
+    & .cardBody {
+      & > * {
+        grid-area: unset;
+        background-color: transparent;
+      }
+    }
+
+    & .cardCover {
+      & > [data-ref="image"],
+      & > [data-ref="video"] {
+        position: absolute;
+        z-index: 0;
+        inset: 0;
+      }
+
+      & .cardCoverContent {
+        & > * {
+          flex: 0 0 auto;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/core/src/components/card/Card.tsx b/packages/core/src/components/card/Card.tsx
new file mode 100644
index 0000000..53e7a08
--- /dev/null
+++ b/packages/core/src/components/card/Card.tsx
@@ -0,0 +1,154 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import {
+  Children,
+  useMemo,
+  type DragEvent,
+  type MouseEventHandler,
+} from "react";
+import { ErrorBoundary } from "../../core/boundary/ErrorBoundary";
+import { type ContentProps } from "../../core/content/Content";
+import {
+  Footer,
+  Header,
+  type HeadFootProps,
+} from "../../core/headfoot/HeadFoot";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type CssProp,
+  type TestProps,
+} from "../../types";
+import { nodeCheck } from "../../utils";
+import classes from "./Card.module.css";
+
+export interface CardProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
+  /**
+   * apply flex fill styling
+   */
+  flex?: boolean;
+  /**
+   * click handler
+   */
+  onClick?: MouseEventHandler;
+  /**
+   * body css classname(s)
+   */
+  bodyClassName?: string;
+  /**
+   * show selected ring
+   */
+  selected?: boolean;
+  /**
+   * show tick mark ribbon
+   */
+  selectedRibbon?: boolean;
+  /**
+   * make card draggable
+   */
+  draggable?: boolean;
+  /**
+   * drag event data key
+   */
+  dragKey?: string;
+  /**
+   * drag event data
+   */
+  dragData?: KeyValue;
+}
+
+export const Card = ({
+  children,
+  className,
+  bodyClassName,
+  selected,
+  selectedRibbon,
+  onClick,
+  flex,
+  draggable,
+  dragKey,
+  dragData,
+  ...aria
+}: CardProps) => {
+  const [header, body, footer] = useMemo(() => {
+    return Children.toArray(children as AnyObject).reduce<AnyObject[]>(
+      (ret, node) => {
+        nodeCheck(node, Header)
+          ? ret[0].push(node)
+          : nodeCheck(node, Footer)
+            ? ret[2].push(node)
+            : ret[1].push(node);
+        return ret;
+      },
+      [[], [], []],
+    );
+  }, [children]);
+
+  return (
+    <div
+      className={classNames(
+        classes.cardWrapper,
+        "rounded-capped relative",
+        flex && "flex-1",
+        selected && selectedRibbon && classes.selected,
+        selected && "outline outline-2 outline-accent-500 outline-offset-2",
+      )}
+    >
+      <ErrorBoundary>
+        <div
+          className={classNames(
+            classes.card,
+            className,
+            "rounded-capped flex flex-col flex-nowrap overflow-hidden",
+            onClick && classes.clickable,
+          )}
+          draggable={draggable}
+          onDragStart={
+            !draggable
+              ? undefined
+              : (e: DragEvent) =>
+                  dragKey &&
+                  e.dataTransfer?.setData(dragKey, JSON.stringify(dragData))
+          }
+          {...aria}
+        >
+          {header}
+          <div
+            role="none"
+            className={classNames(classes.cardBody, bodyClassName, "flex-1")}
+            onClick={onClick}
+          >
+            {body}
+          </div>
+          {footer}
+        </div>
+      </ErrorBoundary>
+    </div>
+  );
+};
diff --git a/packages/core/src/components/card/CardCover.tsx b/packages/core/src/components/card/CardCover.tsx
new file mode 100644
index 0000000..048b173
--- /dev/null
+++ b/packages/core/src/components/card/CardCover.tsx
@@ -0,0 +1,87 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { Children, useMemo } from "react";
+import { type AriaProps, type ChildrenProp, type CssProp } from "../../types";
+import { nodeCheck } from "../../utils";
+import { Image, Video } from "../media/Media";
+import classes from "./Card.module.css";
+
+export interface CardCoverProps extends CssProp, AriaProps, ChildrenProp {
+  /**
+   * cover height
+   */
+  height?: string | number;
+  /**
+   * cover color scheme
+   */
+  colorScheme?: "light" | "dark";
+  /**
+   * justify content
+   */
+  justify?: "start" | "center" | "end";
+}
+
+export const CardCover = ({
+  className,
+  children,
+  height = 120,
+  justify = "end",
+  colorScheme,
+  ...aria
+}: CardCoverProps) => {
+  const [media, body] = useMemo(() => {
+    return Children.toArray(children as AnyObject).reduce<AnyObject[]>(
+      (ret, node) => {
+        nodeCheck(node, Image, Video) ? ret[0].push(node) : ret[1].push(node);
+        return ret;
+      },
+      [[], []],
+    );
+  }, [children]);
+  return (
+    <div
+      style={{ height }}
+      className={classNames(
+        classes.cardCover,
+        classes[colorScheme ?? "inheritScheme"],
+        "relative z-0",
+      )}
+      {...aria}
+    >
+      {media}
+      <div
+        className={classNames(
+          classes.cardCoverContent,
+          "relative pointer-events-none z-1 flex flex-col flex-nowrap p-4 h-full",
+          className,
+          `justify-${justify}`,
+          className,
+        )}
+      >
+        {body}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/components/chip/Chip.module.css b/packages/core/src/components/chip/Chip.module.css
new file mode 100644
index 0000000..7349ba3
--- /dev/null
+++ b/packages/core/src/components/chip/Chip.module.css
@@ -0,0 +1,116 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .chip {
+    --blank-gradient: linear-gradient(to bottom, #00000005 0%, #0000 10%);
+
+    color: theme(colors.tint.500);
+    background-image: var(--blank-gradient);
+
+    & > .chipLabel {
+      padding: 0.25em 0.5em;
+    }
+
+    & > .chipIcon {
+      & + .chipLabel {
+        margin-inline-start: -0.5em;
+      }
+    }
+
+    & > .chipRemove {
+      /* mayble add styles later */
+    }
+
+    &.clickable {
+      cursor: pointer;
+      background-image: var(--click-gradient);
+
+      &.disabled {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+    }
+  }
+}
+
+@layer var {
+  .chip {
+    height: unset;
+    padding: unset;
+    background-color: color-mix(in lab, currentcolor 10%, var(--fabric-bg));
+    box-shadow: 0 0 1px color-mix(in lab, currentcolor 25%, var(--fabric-bg));
+
+    &[data-variant="outline"] {
+      box-shadow:
+        0 0 1px color-mix(in lab, currentcolor 25%, var(--fabric-bg)),
+        0 0 2px color-mix(in lab, currentcolor 50%, var(--tint)) inset;
+    }
+
+    > * {
+      color: color-mix(in lab, currentcolor 50%, var(--fabric-text));
+    }
+
+    &.clickable {
+      &:hover {
+        background-color: color-mix(in lab, currentcolor 35%, var(--fabric-bg));
+      }
+
+      &:active,
+      &[data-dropdown-open="true"] {
+        background-color: color-mix(in lab, currentcolor 15%, var(--fabric-bg));
+        background-image: var(--active-gradient);
+      }
+
+      &[data-dropdown-open="true"] {
+        pointer-events: none;
+      }
+    }
+
+    &[data-variant="solid"] {
+      background-color: color-mix(in lab, currentcolor 50%, var(--fabric-bg));
+
+      & > * {
+        color: color-mix(in lab, currentcolor 5%, var(--fabric-text));
+      }
+
+      &.clickable {
+        &:hover {
+          background-color: color-mix(
+            in lab,
+            currentcolor 65%,
+            var(--fabric-bg)
+          );
+        }
+
+        &:active {
+          background-color: color-mix(
+            in lab,
+            currentcolor 35%,
+            var(--fabric-bg)
+          );
+        }
+      }
+    }
+  }
+}
diff --git a/packages/core/src/components/chip/Chip.tsx b/packages/core/src/components/chip/Chip.tsx
new file mode 100644
index 0000000..17c9ff6
--- /dev/null
+++ b/packages/core/src/components/chip/Chip.tsx
@@ -0,0 +1,195 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { useCallback } from "react";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ChildProp,
+  type ColorType,
+  type CssProp,
+  type IconProps,
+  type PolymorphicProps,
+  type RefProp,
+  type SizeType,
+  type TestProps,
+} from "../../types";
+import { getColor, getColorClass } from "../../utils";
+import { Icon } from "../icon/Icon";
+import classes from "./Chip.module.css";
+
+export interface ChipProps
+  extends CssProp,
+    AriaProps,
+    IconProps,
+    TestProps,
+    ChildProp<string>,
+    RefProp<HTMLDivElement> {
+  /**
+   * chip size
+   */
+  size?: SizeType;
+  /**
+   * chip color (CSS color / tailwind color)
+   */
+  color?: ColorType | string;
+  /**
+   * chip styling
+   */
+  variant?: "solid" | "outline";
+  /**
+   * full rounded edges
+   */
+  rounded?: boolean;
+  /**
+   * disabled state
+   */
+  disabled?: boolean;
+  /**
+   * prevent click propagation
+   */
+  stopPropagation?: boolean;
+  /**
+   * click handler
+   */
+  onClick?: React.MouseEventHandler;
+  /**
+   * remove handler
+   */
+  onRemove?: React.MouseEventHandler;
+}
+
+const SizeMap: KeyValue<string> = {
+  xs: "0.625rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem",
+};
+
+export const Chip = <Tag extends React.ElementType = "div">({
+  ref,
+  children,
+  className,
+  size,
+  color,
+  variant,
+  icon,
+  iconBg,
+  iconColor,
+  rtlFlip,
+  disabled,
+  onClick,
+  onRemove,
+  rounded,
+  stopPropagation,
+  as,
+  ...aria
+}: ChipProps & PolymorphicProps<Tag>) => {
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (size && !(size in SizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in SizeMap) {
+        s.fontSize = SizeMap[size];
+      }
+      return s;
+    },
+    [color, size],
+    "Chip styles",
+  );
+
+  const clickHandler = useCallback(
+    (e: React.MouseEvent) => {
+      if (stopPropagation) e.stopPropagation();
+      onClick?.(e);
+    },
+    [onClick, stopPropagation],
+  );
+
+  const removeHandler = useCallback(
+    (e: React.MouseEvent) => {
+      if (stopPropagation) e.stopPropagation();
+      onRemove?.(e);
+    },
+    [onRemove, stopPropagation],
+  );
+
+  const E = as ?? "div";
+  return (
+    <E
+      ref={ref}
+      role="term"
+      className={classNames(
+        classes.chip,
+        className,
+        color && getColorClass(color),
+        "select-none inline-flex flex-nowrap items-center max-w-72 text-sm leading-none rounded",
+        rounded && "rounded-full",
+        !!onClick && classes.clickable,
+        disabled && classes.disabled,
+      )}
+      style={styles}
+      data-variant={variant}
+      data-inner-clickable={!!onClick}
+      {...{ onClick: clickHandler }}
+      {...aria}
+    >
+      {icon && (
+        <Icon
+          className={classNames(classes.chipIcon, "m-1")}
+          icon={icon}
+          bg={iconBg}
+          color={iconColor}
+          rtlFlip={rtlFlip}
+        />
+      )}
+      {children && (
+        <label
+          className={classNames(classes.chipLabel, "leading-none truncate")}
+        >
+          {children}
+        </label>
+      )}
+      {onRemove && (
+        <span
+          role="none"
+          className={classNames(
+            classes.chipRemove,
+            "cursor-pointer pe-1 opacity-65 hover:opacity-90",
+          )}
+          onClick={removeHandler}
+        >
+          &times;
+        </span>
+      )}
+    </E>
+  );
+};
diff --git a/packages/core/src/components/collapsable/Collapsable.module.css b/packages/core/src/components/collapsable/Collapsable.module.css
new file mode 100644
index 0000000..68e5294
--- /dev/null
+++ b/packages/core/src/components/collapsable/Collapsable.module.css
@@ -0,0 +1,30 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .collapsable {
+    & + & {
+      border-top: 1px solid theme(borderColor.base);
+    }
+  }
+}
diff --git a/packages/core/src/components/collapsable/Collapsable.tsx b/packages/core/src/components/collapsable/Collapsable.tsx
new file mode 100644
index 0000000..8d61ef2
--- /dev/null
+++ b/packages/core/src/components/collapsable/Collapsable.tsx
@@ -0,0 +1,153 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import {
+  Children,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type RefObject,
+} from "react";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type CssProp,
+  type RefProp,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { Icon } from "../icon/Icon";
+import classes from "./Collapsable.module.css";
+
+interface CollapsableRef {
+  button: RefObject<HTMLElement>;
+  body: RefObject<HTMLElement>;
+  open: boolean;
+}
+
+export interface CollapsableProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    RefProp<CollapsableRef>,
+    ChildrenProp {
+  /**
+   * expand icon alignment
+   */
+  iconAlign?: "start" | "end";
+  /**
+   * panel body className
+   */
+  bodyClassName?: string;
+  /**
+   * header button className
+   */
+  headerClassName?: string;
+  /**
+   * open state icon
+   */
+  iconOpen?: string;
+  /**
+   * closed state icon
+   */
+  iconClosed?: string;
+  /**
+   * open state
+   */
+  open?: boolean;
+  /**
+   * open handler
+   */
+  onOpen?: () => void;
+  /**
+   * open handler
+   */
+  onClose?: () => void;
+}
+
+export const Collapsable = ({
+  ref,
+  className,
+  bodyClassName,
+  headerClassName,
+  children,
+  iconAlign,
+  iconClosed = CoreIcons.chevronRight,
+  iconOpen = CoreIcons.chevronDown,
+  open,
+  onClose,
+  onOpen,
+  ...aria
+}: CollapsableProps) => {
+  const [openState, setOpenState] = useState(open);
+  const headRef = useRef(null);
+  const bodyRef = useRef(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      button: headRef,
+      body: bodyRef,
+      open: !!openState,
+    }),
+    [openState],
+  );
+
+  useEffect(() => {
+    setOpenState(open);
+  }, [open]);
+
+  const [head, body] = useMemo(() => {
+    const [h, ...b] = Children.toArray(children);
+    return [h, b];
+  }, [children]);
+  return (
+    <div className={classNames(classes.collapsable, className)} {...aria}>
+      <div
+        role="none"
+        ref={headRef}
+        className={classNames(
+          classes.collapsableHead,
+          "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70",
+          headerClassName,
+          iconAlign === "end" ? "flex-row-reverse" : "flex-row",
+        )}
+        onClick={() => setOpenState(!openState)}
+      >
+        <Icon size="1.125em" icon={openState ? iconOpen : iconClosed} rtlFlip />
+        <div className="flex-1 px-2">{head}</div>
+      </div>
+      {openState && (
+        <div
+          ref={bodyRef}
+          className={classNames(classes.collapsableBody, bodyClassName)}
+        >
+          {body}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/core/src/components/divider/Divider.tsx b/packages/core/src/components/divider/Divider.tsx
new file mode 100644
index 0000000..647f844
--- /dev/null
+++ b/packages/core/src/components/divider/Divider.tsx
@@ -0,0 +1,104 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { useCallback } from "react";
+import {
+  type CssProp,
+  type ChildProp,
+  type ColorType,
+  type PaletteType,
+} from "../../types";
+import { getBgClass, getBorderClass, getColorClass } from "../../utils";
+
+export interface DividerProps extends CssProp, Partial<ChildProp> {
+  /**
+   * apply text bg
+   */
+  fill?: boolean;
+  /**
+   * vertical rule
+   */
+  vertical?: boolean;
+  /**
+   * rule color
+   */
+  color?: ColorType | PaletteType | "tint";
+  /**
+   * text alignment
+   */
+  align?: "start" | "end" | "center";
+}
+
+export const Divider = ({
+  children,
+  color,
+  vertical,
+  fill,
+  align = "start",
+  className,
+}: DividerProps) => {
+  const Rule = useCallback(
+    ({ flex }: KeyValue) => {
+      return (
+        <hr
+          style={{ flex }}
+          className={classNames(
+            vertical && "vertical",
+            !flex && "self-stretch",
+            vertical ? "mx-1" : "my-1",
+            color && getBorderClass(color + "-200"),
+          )}
+        />
+      );
+    },
+    [color, vertical],
+  );
+
+  return children ? (
+    <div
+      className={classNames(
+        "flex flex-nowrap items-center",
+        vertical && "flex-col",
+        className,
+      )}
+    >
+      <Rule flex={align === "start" ? "0 0 1rem" : "1 1 1em"} />
+      <div
+        className={classNames(
+          "px-2 whitespace-nowrap",
+          vertical ? "mx-1" : "my-1",
+          fill && getBgClass((color ?? "tint") + "-200"),
+          !fill && getColorClass((color ?? "tint") + "-600"),
+          "rounded-full text-[0.75em]",
+          vertical && "origin-center -rotate-90 z-1",
+        )}
+      >
+        {children}
+      </div>
+      <Rule flex={align === "end" ? "0 0 1rem" : "1 1 1em"} />
+    </div>
+  ) : (
+    <Rule />
+  );
+};
diff --git a/packages/core/src/components/dropdown/Dropdown.module.css b/packages/core/src/components/dropdown/Dropdown.module.css
new file mode 100644
index 0000000..48d13a9
--- /dev/null
+++ b/packages/core/src/components/dropdown/Dropdown.module.css
@@ -0,0 +1,39 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer var {
+  .dropdownBody {
+    grid-template: 1fr /1fr;
+
+    & [data-ref="card"],
+    & [data-ref="panel"],
+    & [data-ref="panelGroup"] {
+      grid-area: unset;
+
+      border-top: 0;
+      border-inline: 0;
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+}
diff --git a/packages/core/src/components/dropdown/Dropdown.tsx b/packages/core/src/components/dropdown/Dropdown.tsx
new file mode 100644
index 0000000..6a559b1
--- /dev/null
+++ b/packages/core/src/components/dropdown/Dropdown.tsx
@@ -0,0 +1,216 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  FloatingArrow,
+  FloatingFocusManager,
+  FloatingPortal,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  type Placement,
+} from "@floating-ui/react";
+import { mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Children,
+  Fragment,
+  cloneElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { type ChildProp, type RefProp } from "../../types";
+import classes from "./Dropdown.module.css";
+
+export interface DropdownProps extends RefProp {
+  children: [React.ReactNode, React.ReactNode];
+  /**
+   * dropdown placement
+   */
+  placement?: Placement;
+  /**
+   * show dropdown arrow
+   */
+  showArrow?: boolean;
+  /**
+   * fit with to anchor' parent element
+   */
+  fitToParent?: boolean;
+  /**
+   * close dropdown on click
+   */
+  closeOnClick?: boolean;
+  /**
+   * open handler
+   */
+  onOpen?: () => void;
+  /**
+   * close handler
+   */
+  onClose?: () => void;
+}
+
+export const Dropdown = ({
+  ref,
+  children,
+  showArrow,
+  closeOnClick,
+  fitToParent,
+  placement = "bottom",
+  onClose,
+  onOpen,
+}: DropdownProps) => {
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [anchor, panel] = useMemo<AnyObject[]>(
+    () => Children.toArray(children as AnyObject),
+    [children],
+  );
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: (open, _, reason) => {
+      if (reason === "reference-press") return;
+      setIsOpen(open);
+      (open ? onOpen : onClose)?.();
+    },
+    strategy: "fixed",
+    placement,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      shift({ padding: 8 }),
+      flip(),
+      showArrow && offset(9),
+      showArrow &&
+        arrow({
+          element: arrowRef,
+        }),
+    ],
+  });
+
+  const click = useClick(context, {});
+  const dismiss = useDismiss(context, {
+    referencePress: true,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    click,
+  ]);
+
+  const minWidth = useMemo(() => {
+    if (fitToParent) {
+      const el: HTMLElement =
+        // @ts-expect-error ignore
+        refs.reference.current?.closest('[data-ref="buttonGroup"]') ??
+        refs.reference.current;
+      return el?.offsetWidth;
+    }
+    return undefined;
+  }, [refs, isOpen, fitToParent]);
+
+  const tryClosing = useCallback(
+    (e: React.MouseEvent) => {
+      if (
+        !!closeOnClick ||
+        (e.target as HTMLElement).closest("[data-dropdown-dismiss]")
+      ) {
+        setTimeout(() => {
+          setIsOpen(false);
+          onClose?.();
+        }, 100);
+      }
+    },
+    [closeOnClick, onClose],
+  );
+
+  const innerRef = useMemo(
+    () => mergeRefs(ref, anchor.props.ref, refs.setReference),
+    [ref, anchor.props.ref, refs.setReference],
+  );
+
+  if (!anchor || !panel)
+    throw Error("Dropdown requires two elements [Anchor, Panel]");
+
+  return (
+    <Fragment>
+      {cloneElement(anchor, {
+        ...getReferenceProps(),
+        "data-dropdown-open": isOpen,
+        ref: innerRef,
+      })}
+      {isOpen && (
+        <FloatingPortal>
+          <FloatingFocusManager context={context}>
+            <div
+              ref={(el) => {
+                refs.setFloating(el);
+                el?.focus();
+              }}
+              style={{
+                minWidth,
+                zIndex: "var(--z-popover)",
+                ...floatingStyles,
+              }}
+              {...getFloatingProps()}
+            >
+              <div
+                role="none"
+                className={classNames(
+                  classes.dropdownBody,
+                  "shadow-lg rounded-capped overflow-auto bg-base scroll-thin grid max-h-[50vh] ring-1 ring-tint-100",
+                )}
+                onMouseUpCapture={tryClosing}
+              >
+                {panel}
+              </div>
+              {showArrow && (
+                <FloatingArrow
+                  ref={arrowRef}
+                  context={context}
+                  strokeWidth={0.5}
+                  className="fill-base stroke-muted"
+                />
+              )}
+            </div>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      )}
+    </Fragment>
+  );
+};
+
+export const DropdownDismiss = ({ children }: ChildProp) => (
+  <div className="contents" data-dropdown-dismiss>
+    {children}
+  </div>
+);
diff --git a/packages/core/src/components/empty/EmptyContent.tsx b/packages/core/src/components/empty/EmptyContent.tsx
new file mode 100644
index 0000000..f3a2741
--- /dev/null
+++ b/packages/core/src/components/empty/EmptyContent.tsx
@@ -0,0 +1,141 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isString } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { isValidElement } from "react";
+import { type ChildrenProp, type CssProp, type TestProps } from "../../types";
+import { Icon } from "../icon/Icon";
+
+export interface EmptyContentProps
+  extends CssProp,
+    TestProps,
+    Partial<ChildrenProp> {
+  /**
+   * empty title
+   */
+  title?: string | JSX.Element;
+  /**
+   * empty message
+   */
+  message: string | JSX.Element;
+  /**
+   * content size
+   */
+  size?: "sm" | "md";
+  /**
+   * empty icon
+   */
+  icon?: string | React.ReactElement;
+}
+
+const SizeMap: KeyValue = {
+  "": "1rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+};
+
+const DefaultIcon = () => (
+  <svg
+    version="1.1"
+    viewBox="0 0 512 512"
+    width="1em"
+    height="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      opacity="0.5"
+      fill="currentColor"
+      d="M106.1,296.01c-0.46,0-0.92-0.05-1.37-0.14c-0.45-0.09-0.89-0.22-1.31-0.4c-0.42-0.17-0.83-0.39-1.21-0.64c-0.38-0.26-0.74-0.55-1.06-0.87c-0.33-0.33-0.62-0.68-0.87-1.07c-0.26-0.38-0.47-0.78-0.65-1.21c-0.17-0.42-0.31-0.86-0.4-1.31c-0.09-0.45-0.13-0.91-0.13-1.36c0-0.46,0.04-0.92,0.13-1.37s0.23-0.89,0.4-1.31c0.18-0.42,0.39-0.83,0.65-1.21c0.25-0.38,0.54-0.74,0.87-1.06c0.32-0.33,0.68-0.62,1.06-0.87s0.79-0.47,1.21-0.65c0.42-0.17,0.86-0.31,1.31-0.4c0.9-0.18,1.83-0.18,2.73,0c0.45,0.09,0.89,0.23,1.31,0.4c0.43,0.18,0.83,0.4,1.21,0.65s0.74,0.54,1.07,0.87c0.32,0.32,0.61,0.68,0.87,1.06c0.25,0.38,0.47,0.79,0.64,1.21s0.31,0.86,0.4,1.31s0.14,0.91,0.14,1.37c0,0.45-0.05,0.91-0.14,1.36c-0.09,0.45-0.23,0.89-0.4,1.31c-0.17,0.43-0.39,0.83-0.64,1.21c-0.26,0.39-0.55,0.74-0.87,1.07c-0.33,0.32-0.69,0.61-1.07,0.87c-0.38,0.25-0.78,0.47-1.21,0.64c-0.42,0.18-0.86,0.31-1.31,0.4S106.55,296.01,106.1,296.01z"
+    />
+    <path
+      opacity="0.5"
+      fill="currentColor"
+      d="M475.5,458.25H36.5c-8.78,0-16.58-4.58-20.86-12.24c-4.28-7.67-4.09-16.71,0.51-24.19l70.18-114.04c2.03-3.29,6.34-4.32,9.63-2.29c3.29,2.03,4.32,6.34,2.29,9.63L28.07,429.16c-1.91,3.1-1.99,6.84-0.21,10.02s5.01,5.07,8.64,5.07H475.5c3.64,0,6.87-1.9,8.64-5.07s1.7-6.92-0.21-10.02l-219.5-356.7c-1.84-3-4.92-4.71-8.43-4.71s-6.59,1.72-8.43,4.71L124.24,272.88c-2.03,3.29-6.34,4.32-9.63,2.29c-3.29-2.03-4.32-6.34-2.29-9.63L235.64,65.13C240.03,58,247.64,53.75,256,53.75s15.97,4.25,20.36,11.38l219.5,356.7c4.6,7.48,4.79,16.52,0.51,24.19C492.08,453.67,484.28,458.25,475.5,458.25z"
+    />
+    <path
+      opacity="0.5"
+      fill="currentColor"
+      d="M354.79,279.28c-1.85,0-3.65-0.75-4.95-2.05c-0.33-0.32-0.62-0.68-0.87-1.07c-0.26-0.37-0.47-0.78-0.65-1.2c-0.17-0.43-0.31-0.87-0.4-1.31c-0.09-0.45-0.13-0.91-0.13-1.37c0-0.46,0.04-0.92,0.13-1.37c0.09-0.44,0.23-0.89,0.4-1.31c0.18-0.42,0.39-0.83,0.65-1.21c0.25-0.38,0.54-0.74,0.87-1.06c1.62-1.63,4.04-2.37,6.31-1.91c0.45,0.09,0.89,0.22,1.31,0.4c0.43,0.17,0.83,0.39,1.21,0.64c0.39,0.25,0.74,0.55,1.06,0.87c0.33,0.32,0.62,0.68,0.88,1.06c0.25,0.38,0.46,0.79,0.64,1.21c0.18,0.42,0.31,0.87,0.4,1.31c0.09,0.45,0.14,0.91,0.14,1.37c0,0.46-0.05,0.92-0.14,1.37c-0.09,0.44-0.22,0.88-0.4,1.31c-0.18,0.42-0.39,0.83-0.64,1.2c-0.26,0.39-0.55,0.75-0.88,1.07c-0.32,0.32-0.67,0.61-1.06,0.87c-0.38,0.25-0.78,0.47-1.21,0.64c-0.42,0.18-0.86,0.31-1.31,0.4C355.7,279.23,355.24,279.28,354.79,279.28z"
+    />
+    <path
+      opacity="0.5"
+      fill="currentColor"
+      d="M403.86,423.48H108.14c-10.56,0-20.31-5.72-25.46-14.94c-5.15-9.21-4.91-20.52,0.62-29.51l147.86-240.29c5.35-8.69,14.63-13.88,24.84-13.88s19.49,5.19,24.84,13.88l68.87,111.91c2.03,3.29,1,7.6-2.29,9.63c-3.29,2.02-7.6,1-9.63-2.29l-68.87-111.91c-2.78-4.52-7.61-7.22-12.91-7.22s-10.13,2.7-12.91,7.22L95.22,386.37c-2.88,4.67-3,10.55-0.32,15.34c2.68,4.79,7.75,7.77,13.24,7.77h295.72c5.49,0,10.56-2.98,13.24-7.77c2.68-4.79,2.55-10.67-0.32-15.34l-54.14-87.97c-2.03-3.29-1-7.6,2.29-9.63c3.29-2.02,7.61-1,9.63,2.29l54.14,87.97c5.53,8.99,5.77,20.3,0.62,29.51C424.17,417.76,414.42,423.48,403.86,423.48z"
+    />
+    <path
+      fill="currentColor"
+      d="M270.12,335.13h-28.24c-6.17,0-11.22-4.83-11.5-10.99l-0.5-11.01c-0.18-3.86,2.81-7.14,6.67-7.31 c3.85-0.21,7.14,2.81,7.31,6.67l0.4,8.64h23.49l5.23-114.15h-33.96l3.79,82.55c0.18,3.86-2.81,7.14-6.67,7.31 c-0.11,0.01-0.22,0.01-0.33,0.01c-3.72,0-6.81-2.93-6.99-6.68l-3.91-85.15c-0.14-3.13,1.01-6.22,3.17-8.48 c2.16-2.26,5.2-3.56,8.33-3.56h39.17c3.13,0,6.16,1.3,8.33,3.56c2.16,2.26,3.32,5.35,3.17,8.48l-5.46,119.12 C281.34,330.3,276.29,335.13,270.12,335.13z"
+    />
+    <path
+      fill="currentColor"
+      d="M268.47,394.55h-24.94c-4.83,0-9.39-2.12-12.5-5.81s-4.44-8.54-3.63-13.3l2.69-15.79 c1.34-7.89,8.13-13.61,16.13-13.61h19.56c8,0,14.78,5.73,16.13,13.61l2.69,15.79c0.81,4.76-0.51,9.61-3.63,13.3 S273.3,394.55,268.47,394.55z M246.22,360.04c-1.15,0-2.13,0.83-2.33,1.96l-2.69,15.79c-0.16,0.94,0.26,1.61,0.52,1.92 c0.26,0.31,0.85,0.84,1.8,0.84h24.94c0.95,0,1.54-0.53,1.8-0.84c0.26-0.31,0.68-0.98,0.52-1.92L268.11,362 c-0.19-1.14-1.17-1.96-2.33-1.96H246.22z"
+    />
+  </svg>
+);
+
+export const EmptyContent = ({
+  children,
+  title,
+  message,
+  icon,
+  className,
+  size,
+  ...test
+}: EmptyContentProps) => {
+  return (
+    <div
+      className={classNames(
+        "p-6 flex flex-col items-center area-content place-self-center",
+        className,
+      )}
+      style={
+        size && {
+          fontSize: SizeMap[size],
+        }
+      }
+      {...test}
+    >
+      <div className="text-tint-500 leading-none" style={{ fontSize: "4em" }}>
+        {isString(icon) && <Icon icon={icon} />}
+        {isValidElement(icon) && icon}
+        {!icon && <DefaultIcon />}
+      </div>
+      {title && (
+        <p
+          className="font-medium text-center text-dimmed"
+          style={{ fontSize: "1.5em" }}
+        >
+          {title}
+        </p>
+      )}
+      <p
+        className="font-medium text-center text-muted"
+        style={{ fontSize: "0.875em" }}
+      >
+        {message}
+      </p>
+      <div className="flex gap-1 pt-6">{children}</div>
+    </div>
+  );
+};
diff --git a/packages/core/src/components/icon/Icon.module.css b/packages/core/src/components/icon/Icon.module.css
new file mode 100644
index 0000000..6d3e6d6
--- /dev/null
+++ b/packages/core/src/components/icon/Icon.module.css
@@ -0,0 +1,71 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .icon {
+    position: relative;
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.125em;
+
+    & > i,
+    & > svg,
+    & > img {
+      pointer-events: none;
+
+      overflow: hidden;
+      display: block;
+
+      width: 1em;
+      height: 1em;
+
+      line-height: 1;
+
+      object-fit: cover;
+      border-radius: inherit;
+
+      fill: currentcolor;
+    }
+
+    & > i::before {
+      line-height: 1;
+    }
+
+    &[data-clickable="true"] {
+      opacity: 0.75;
+
+      &:hover {
+        opacity: 0.9;
+        background-color: theme(colors.text/10%);
+      }
+
+      &:active {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  [dir="rtl"] .icon[data-flip="true"] {
+    transform: scaleX(-1);
+  }
+}
diff --git a/packages/core/src/components/icon/Icon.tsx b/packages/core/src/components/icon/Icon.tsx
new file mode 100644
index 0000000..0e7c2db
--- /dev/null
+++ b/packages/core/src/components/icon/Icon.tsx
@@ -0,0 +1,188 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isString, isSvgPath } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ColorType,
+  type CssProp,
+  type RefProp,
+  type SizeType,
+  type TestProps,
+} from "../../types";
+import { getBgClass, getColor, getColorClass } from "../../utils";
+import classes from "./Icon.module.css";
+
+export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
+  /**
+   * svg path / webfont className / 1-4 letter text
+   */
+  icon: string;
+  /**
+   * background color (CSS color / tailwind color)
+   */
+  bg?: ColorType | string;
+  /**
+   * icon color (CSS color / tailwind color)
+   */
+  color?: ColorType | string;
+  /**
+   * flip icon in rtl
+   */
+  rtlFlip?: boolean;
+  /**
+   * icon size
+   */
+  size?: SizeType | number | string;
+  /**
+   * viewbox for svg path (default 24)
+   */
+  viewBox?: string;
+  /**
+   * rounded icon
+   */
+  rounded?: boolean;
+  /**
+   * apply animation
+   */
+  animate?: "spin" | "pulse" | "bounce";
+  /**
+   * click handler
+   */
+  onClick?: React.MouseEventHandler;
+}
+
+const SvgTextSize = ["", ".875em", ".5em", ".35em", ".25em"];
+const SizeMap: KeyValue<string> = {
+  xs: "0.625rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem",
+};
+
+/**
+ * An icon is a display component for svg icon path / image
+ */
+export const Icon = ({
+  ref,
+  icon,
+  bg,
+  color,
+  size = "",
+  rtlFlip,
+  animate,
+  rounded,
+  viewBox = "0 0 24 24",
+  className,
+  onClick,
+  ...rest
+}: IconProps) => {
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (bg) {
+        s.backgroundColor = getColor(bg);
+      }
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (size && !(size in SizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in SizeMap) {
+        s.fontSize = SizeMap[size];
+      }
+      return s;
+    },
+    [bg, color, size],
+    "Icon styles",
+  );
+
+  /** ***************** check if icon is svg path *******************/
+  const isSvg = useMemoDebugger(
+    () => {
+      return isSvgPath(icon);
+    },
+    [icon],
+    "Icon isSvg",
+  );
+
+  /** ***************** render icon *******************/
+  const iconEl = useMemoDebugger(
+    () => {
+      if (!isString(icon)) {
+        throw Error("Invalid icon expected string");
+      }
+      return isSvg ? (
+        <svg viewBox={viewBox}>
+          <path fill="currentColor" d={icon.toString()} />
+        </svg>
+      ) : icon?.toString().length <= 4 ? (
+        <svg role="img">
+          <text
+            x="50%"
+            y="50%"
+            dy=".1em"
+            dominantBaseline="middle"
+            textAnchor="middle"
+            style={{ fontSize: SvgTextSize[icon.length] ?? "1em" }}
+          >
+            {icon}
+          </text>
+        </svg>
+      ) : (
+        <i className={`${icon}`} />
+      );
+    },
+    [icon, isSvg, viewBox],
+    "Icon el",
+  );
+
+  return (
+    <dfn
+      {...rest}
+      ref={ref}
+      role="presentation"
+      className={classNames(
+        classes.icon,
+        className,
+        "select-none overflow-hidden inline-block box-content leading-none not-italic text-center",
+        bg && getBgClass(bg),
+        color && getColorClass(color),
+        !rounded && "rounded",
+        rounded && "rounded-full",
+        animate && `animate-${animate}`,
+      )}
+      onClick={onClick}
+      data-flip={rtlFlip}
+      style={styles}
+      data-clickable={!!onClick}
+    >
+      {iconEl}
+    </dfn>
+  );
+};
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
new file mode 100644
index 0000000..2838fe2
--- /dev/null
+++ b/packages/core/src/components/index.ts
@@ -0,0 +1,59 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export { ActionLabel } from "./actionLabel/ActionLabel";
+export {
+  AnimationBars,
+  AnimationIndicator,
+  AnimationSpinner,
+  Skeleton,
+} from "./animations/Animations";
+export { Avatar } from "./avatar/Avatar";
+export { AvatarGroup } from "./avatar/AvatarGroup";
+export { Badge } from "./badge/Badge";
+export { Breadcrumbs } from "./breadcrumbs/Breadcrumbs";
+export { Button } from "./button/Button";
+export { ButtonGroup } from "./button/ButtonGroup";
+export { ConfirmButton } from "./button/ConfirmButton";
+export { ToggleButtonGroup } from "./button/ToggleButtonGroup";
+export { Callout } from "./callout/Callout";
+export { Card } from "./card/Card";
+export { CardCover } from "./card/CardCover";
+export { Chip } from "./chip/Chip";
+export { Collapsable } from "./collapsable/Collapsable";
+export { Divider } from "./divider/Divider";
+export { Dropdown, DropdownDismiss } from "./dropdown/Dropdown";
+export { EmptyContent } from "./empty/EmptyContent";
+export { Icon } from "./icon/Icon";
+export { Image, Video } from "./media/Media";
+export { ContextMenu } from "./menu/ContextMenu";
+export { Menu } from "./menu/Menu";
+export { MenuItem } from "./menu/MenuItem";
+export { Meter } from "./meter/Meter";
+export { Navigator } from "./navigator/Navigator";
+export { Panel } from "./panel/Panel";
+export { PanelGroup } from "./panel/PanelGroup";
+export { ProgressBar } from "./progress/ProgressBar";
+export { ProgressCircle } from "./progress/ProgressCircle";
+export { Tab } from "./tabpanel/Tab";
+export { TabPanel } from "./tabpanel/TabPanel";
diff --git a/packages/core/src/components/media/Media.module.css b/packages/core/src/components/media/Media.module.css
new file mode 100644
index 0000000..872d172
--- /dev/null
+++ b/packages/core/src/components/media/Media.module.css
@@ -0,0 +1,112 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .mediaContainer {
+    &.mediaReel {
+      &::after,
+      &::before {
+        content: "";
+
+        position: absolute;
+        inset-inline: 0;
+
+        height: 0.5rem;
+
+        background-image: linear-gradient(
+          to right,
+          #222c 0,
+          #222c 0.25rem,
+          #fff8 0.25rem,
+          #fff8 0.75rem,
+          #222c 0.75rem,
+          #222c 1rem
+        );
+        background-repeat: repeat-x;
+        background-position: center center;
+        background-size: 1rem;
+        border: 0.125rem solid #222c;
+      }
+
+      &::before {
+        top: 0;
+      }
+
+      &::after {
+        bottom: 0;
+      }
+    }
+
+    & .mediaPlaceholder {
+      /* might add styles later */
+    }
+
+    & .mediaControls {
+      & [data-ref="button"] {
+        margin: 0;
+
+        & > :first-child {
+          color: #fff;
+          background-color: theme(colors.black/50%);
+
+          &:hover {
+            color: theme(colors.primary.600);
+            background-color: theme(colors.black/80%);
+          }
+        }
+      }
+
+      & .mediaControlAction > :first-child {
+        background-color: theme(colors.black/70%);
+      }
+
+      & .mediaControlPlaceholder {
+        /* might add styles later */
+      }
+
+      & .mediaControlAction + .mediaControlAction {
+        margin-top: 8px;
+      }
+    }
+  }
+
+  .media {
+    /* might add styles later */
+  }
+}
+
+@layer util {
+  & .mediaControls {
+    &:hover {
+      & .mediaControlPlaceholder {
+        display: none;
+      }
+    }
+
+    &:not(:hover) {
+      & .mediaControlAction {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/packages/core/src/components/media/Media.tsx b/packages/core/src/components/media/Media.tsx
new file mode 100644
index 0000000..74a798e
--- /dev/null
+++ b/packages/core/src/components/media/Media.tsx
@@ -0,0 +1,224 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { getImageColorset } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemo, useRef, useState } from "react";
+import { type AriaProps, type CssProp } from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { Button } from "../button/Button";
+import classes from "./Media.module.css";
+
+export interface BaseProps extends CssProp, AriaProps {
+  /**
+   * media source
+   */
+  src: string;
+  /**
+   * show media reel decoration
+   */
+  reel?: boolean;
+  /**
+   * media content fit
+   */
+  fit?: "cover" | "contain" | "fill";
+}
+
+export interface ImageProps extends BaseProps {
+  /**
+   * image alt text
+   */
+  alt?: string;
+}
+export interface VideoProps extends BaseProps {
+  /**
+   * video poster
+   */
+  poster?: string;
+  /**
+   * auto play video
+   */
+  autoPlay?: boolean;
+  /**
+   * play on mouse over
+   */
+  playOnHover?: boolean;
+}
+
+export const Image = ({
+  src,
+  alt,
+  reel,
+  fit = "cover",
+  className,
+  ...aria
+}: ImageProps) => {
+  const [colorSet, setColorSet] = useState("light");
+  const loadIndicator = useMemo(
+    () => (
+      <div
+        className={classNames(
+          classes.mediaPlaceholder,
+          "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse",
+        )}
+      >
+        ●●●
+      </div>
+    ),
+    [src],
+  );
+  return (
+    <div
+      data-ref="image"
+      className={classNames(
+        classes.mediaContainer,
+        "relative overflow-hidden bg-gray inline-block",
+        reel && classes.mediaReel,
+        className,
+      )}
+      data-colorset={colorSet}
+      {...aria}
+    >
+      {loadIndicator}
+      <img
+        alt={alt ?? src}
+        src={src}
+        loading="lazy"
+        crossOrigin="anonymous"
+        className={classNames(
+          classes.media,
+          "pointer-events-none w-full h-full",
+          fit && `object-${fit}`,
+        )}
+        onLoad={(e) => {
+          e.currentTarget.previousElementSibling?.remove();
+          setColorSet(getImageColorset(e.currentTarget));
+        }}
+      />
+    </div>
+  );
+};
+
+export const Video = ({
+  src,
+  poster,
+  reel,
+  autoPlay,
+  playOnHover,
+  fit = "cover",
+  className,
+  ...aria
+}: VideoProps) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const [state, setState] = useState(true);
+  const [volume, setVolume] = useState(false);
+
+  return (
+    <div
+      data-ref="video"
+      className={classNames(
+        classes.mediaContainer,
+        "relative overflow-hidden bg-gray inline-block",
+        reel && classes.mediaReel,
+        className,
+      )}
+      onMouseEnter={() => {
+        playOnHover && videoRef.current?.play();
+      }}
+      onMouseLeave={() => {
+        playOnHover && videoRef.current?.pause();
+      }}
+      {...aria}
+    >
+      <div
+        className={classNames(
+          classes.mediaPlaceholder,
+          "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse",
+        )}
+      >
+        ●●●
+      </div>
+      <video
+        loop
+        ref={videoRef}
+        controls={false}
+        poster={poster}
+        autoPlay={autoPlay}
+        className={classNames(
+          classes.media,
+          "pointer-events-none w-full h-full",
+          fit && `object-${fit}`,
+        )}
+        onPlay={() => setState(true)}
+        onPause={() => setState(false)}
+        onVolumeChange={(e) => setVolume(!!e.currentTarget.volume)}
+        onLoadedData={(e) => {
+          e.currentTarget.volume = 0;
+          e.currentTarget.previousElementSibling?.remove();
+        }}
+      >
+        <source src={src} />
+        <track kind="captions" />
+      </video>
+      <div
+        data-inner-clickable
+        className={classNames(
+          classes.mediaControls,
+          "absolute bottom-6 end-6 rounded-full flex flex-col",
+        )}
+      >
+        <Button
+          rounded
+          variant="link"
+          className={classes.mediaControlPlaceholder}
+          icon={CoreIcons.ellipsis}
+          aria-label="controls"
+        />
+        <Button
+          rounded
+          variant="link"
+          aria-label="controls"
+          className={classes.mediaControlAction}
+          onClick={() => {
+            videoRef.current &&
+              (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+          }}
+          icon={volume ? CoreIcons.volumeOn : CoreIcons.volumeOff}
+        />
+        <Button
+          rounded
+          variant="link"
+          aria-label="controls"
+          className={classes.mediaControlAction}
+          onClick={() => {
+            videoRef.current?.paused
+              ? videoRef.current?.play()
+              : videoRef.current?.pause();
+          }}
+          icon={state ? CoreIcons.pause : CoreIcons.play}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/components/menu/ContextMenu.tsx b/packages/core/src/components/menu/ContextMenu.tsx
new file mode 100644
index 0000000..7c74035
--- /dev/null
+++ b/packages/core/src/components/menu/ContextMenu.tsx
@@ -0,0 +1,116 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  FloatingPortal,
+  autoUpdate,
+  flip,
+  offset,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from "@floating-ui/react";
+import { cloneElement, useRef, useState } from "react";
+import { type ChildrenProp } from "../../types";
+import { type Menu } from "./Menu";
+
+export interface ContextMenuProps extends ChildrenProp {
+  menu: React.ReactElement<typeof Menu>;
+}
+
+export const ContextMenu = ({ children, menu }: ContextMenuProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    strategy: "fixed",
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(8), flip()],
+  });
+
+  const click = useClick(context, {});
+  const dismiss = useDismiss(context, {});
+
+  const { getFloatingProps } = useInteractions([dismiss, click]);
+
+  const handleClick = useRef((e: MouseEvent) => {
+    const virtual = {
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: e.clientX,
+          y: e.clientY,
+          top: e.clientY,
+          left: e.clientX,
+          right: e.clientX,
+          bottom: e.clientY,
+        };
+      },
+    };
+    refs.setReference(virtual);
+    setIsOpen(true);
+    e.stopImmediatePropagation();
+    e.preventDefault();
+    return false;
+  });
+
+  const wrapperRef = useRef((el: HTMLElement) => {
+    el?.parentElement?.removeEventListener("contextmenu", handleClick.current);
+    el?.parentElement?.addEventListener("contextmenu", handleClick.current);
+  });
+
+  const tryClosing = useRef((e: React.MouseEvent) => {
+    if ((e.target as HTMLElement)?.closest("[data-dropdown-dismiss='true']"))
+      setTimeout(() => setIsOpen(false), 50);
+  });
+
+  return (
+    <div
+      className="contents"
+      ref={wrapperRef.current as AnyObject}
+      onMouseUpCapture={tryClosing.current}
+    >
+      {children}
+      {isOpen && (
+        <FloatingPortal>
+          {cloneElement(menu as AnyObject, {
+            ...getFloatingProps(),
+            style: {
+              ...floatingStyles,
+              borderRadius: "var(--fabric-rounding)",
+              zIndex: "var(--z-popover)",
+              fontSize: "0.875rem",
+            },
+            className: "bg-base outline rounded-capped shadow-lg",
+            ref: refs.setFloating,
+            onMouseUp: tryClosing.current,
+          })}
+        </FloatingPortal>
+      )}
+    </div>
+  );
+};
diff --git a/packages/core/src/components/menu/Menu.module.css b/packages/core/src/components/menu/Menu.module.css
new file mode 100644
index 0000000..1165444
--- /dev/null
+++ b/packages/core/src/components/menu/Menu.module.css
@@ -0,0 +1,104 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .menuSection {
+    font-size: 0.875em;
+    font-weight: 500;
+    color: theme(textColor.dimmed);
+  }
+
+  .menuItem {
+    --color: theme(colors.primary.DEFAULT);
+
+    &[data-color="accent"] {
+      --color: theme(colors.accent.DEFAULT);
+    }
+
+    &[data-color="info"] {
+      --color: theme(colors.info.DEFAULT);
+    }
+
+    &[data-color="danger"] {
+      --color: theme(colors.danger.DEFAULT);
+    }
+
+    &[data-color="success"] {
+      --color: theme(colors.success.DEFAULT);
+    }
+
+    &[data-color="warning"] {
+      --color: theme(colors.warning.DEFAULT);
+    }
+  }
+}
+
+@layer var {
+  .menuItem {
+    color: color-mix(in lab, var(--color) 80%, var(--fabric-text));
+
+    > * {
+      pointer-events: none;
+    }
+
+    &[data-focus="true"] {
+      background-color: color(from var(--color) srgb r g b / 15%);
+    }
+
+    &:active {
+      background-color: color(from var(--color) srgb r g b / 35%);
+    }
+
+    &[data-open="true"] {
+      background-color: color(from var(--color) srgb r g b / 10%);
+    }
+
+    &.active,
+    &:global(.active) {
+      pointer-events: none;
+      color: theme(colors.white);
+      background-color: color(from var(--color) srgb r g b / 85%);
+    }
+
+    &.disabled {
+      pointer-events: none;
+      color: theme(textColor.tint.500);
+      opacity: 0.5;
+
+      & > label ~ * {
+        display: none;
+      }
+    }
+  }
+
+  .menuIcon {
+    padding: 0.3em;
+    font-size: 1.25em;
+
+    &.minimal {
+      padding: 0.375em;
+      font-size: 1.5em;
+      font-weight: 500;
+    }
+  }
+}
diff --git a/packages/core/src/components/menu/Menu.tsx b/packages/core/src/components/menu/Menu.tsx
new file mode 100644
index 0000000..20cd725
--- /dev/null
+++ b/packages/core/src/components/menu/Menu.tsx
@@ -0,0 +1,243 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingList,
+  FloatingNode,
+  FloatingTree,
+  offset,
+  safePolygon,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useFloatingNodeId,
+  useFloatingParentNodeId,
+  useFloatingTree,
+  useHover,
+  useInteractions,
+  useListNavigation,
+  useRole,
+  useTypeahead,
+} from "@floating-ui/react";
+import { mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Children,
+  cloneElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { CoreIcons } from "../../types/icons";
+import { nodeCheck } from "../../utils";
+import { MenuItem } from "./MenuItem";
+import { type MenuProps } from "./types";
+
+const MenuComponent = ({
+  children,
+  minimal,
+  menuClassName,
+  onClick,
+  // @ts-expect-error ignore
+  ref,
+  ...rest
+}: Partial<MenuProps>) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const elementsRef = useRef<Array<HTMLElement | null>>([]);
+  const labelsRef = useRef<Array<string | null>>([]);
+
+  const tree = useFloatingTree();
+  const nodeId = useFloatingNodeId();
+  const parentId = useFloatingParentNodeId();
+
+  const isNested = parentId !== null;
+
+  const { floatingStyles, refs, context } = useFloating<HTMLButtonElement>({
+    nodeId,
+    open: !isNested || isOpen,
+    onOpenChange: isNested ? setIsOpen : undefined,
+    placement: isNested ? "right-start" : "bottom-start",
+    middleware: [
+      offset({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }),
+      flip(),
+      shift(),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const hover = useHover(context, {
+    enabled: isNested,
+    delay: { open: 75 },
+    handleClose: safePolygon({ blockPointerEvents: true }),
+  });
+  const click = useClick(context, {
+    event: "click",
+    toggle: !isNested,
+    ignoreMouse: isNested,
+  });
+  const role = useRole(context, { role: "menu" });
+  const dismiss = useDismiss(context, { bubbles: true });
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    nested: isNested,
+    onNavigate: setActiveIndex,
+  });
+  const typeahead = useTypeahead(context, {
+    listRef: labelsRef,
+    onMatch: isOpen ? setActiveIndex : undefined,
+    activeIndex,
+  });
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [hover, click, role, dismiss, listNavigation, typeahead],
+  );
+
+  // Event emitter allows you to communicate across tree components.
+  // This effect closes all menus when an item gets clicked anywhere
+  // in the tree.
+  useEffect(() => {
+    if (!tree || !parentId) return;
+
+    function handleTreeClick() {
+      setIsOpen(false);
+    }
+
+    function onSubMenuOpen(event: { nodeId: string; parentId: string }) {
+      if (event.nodeId !== nodeId && event.parentId === parentId) {
+        setIsOpen(false);
+      }
+    }
+
+    tree.events.on("click", handleTreeClick);
+    tree.events.on("menuopen", onSubMenuOpen);
+
+    return () => {
+      tree.events.off("click", handleTreeClick);
+      tree.events.off("menuopen", onSubMenuOpen);
+    };
+  }, [tree, nodeId, parentId]);
+
+  useEffect(() => {
+    if (isOpen && tree) {
+      tree.events.emit("menuopen", { parentId, nodeId });
+    }
+  }, [tree, isOpen, nodeId, parentId]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      const el = e.target as HTMLElement;
+      if (el.dataset.id) {
+        onClick?.(el.dataset.id);
+      }
+    },
+    [onClick],
+  );
+
+  return (
+    <FloatingNode id={nodeId}>
+      {isNested && (
+        <MenuItem
+          {...(getReferenceProps({
+            ...rest,
+            id: undefined,
+            "data-dropdown-dismiss": false,
+            onClick: (e: AnyObject) => e.preventDefault(),
+          } as AnyObject) as AnyObject)}
+          data-open={isOpen}
+          minimal={minimal}
+          altIcon={CoreIcons.chevronRight}
+          ref={mergeRefs(refs.setReference, ref)}
+        />
+      )}
+      <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
+        {(!isNested || isOpen) && (
+          <FloatingFocusManager
+            context={context}
+            modal={!isNested}
+            initialFocus={isNested ? -1 : 0}
+            returnFocus={!isNested}
+          >
+            <div
+              className={classNames(
+                menuClassName,
+                "flex flex-col bg-base",
+                isNested && "outline shadow-lg rounded-capped max-h-96",
+              )}
+              autoFocus
+              ref={mergeRefs(refs.setFloating, isNested ? undefined : ref)}
+              {...getFloatingProps({
+                onClick: isNested ? undefined : handleClick,
+              })}
+              // @ts-expect-error ignore
+              {...{ style: !isNested ? rest.style : floatingStyles }}
+            >
+              {Children.map(children, (child: AnyObject, index) => {
+                labelsRef.current[index] = child.props.label;
+                return cloneElement(
+                  child,
+                  nodeCheck(child, MenuItem, Menu, MenuComponent)
+                    ? {
+                        minimal: !isNested && minimal,
+                        "data-focus": activeIndex === index,
+                        "data-dropdown-dismiss": true,
+                        ref: (el: HTMLElement) =>
+                          (elementsRef.current[index] = el),
+                        ...getItemProps({
+                          tabIndex: activeIndex === index ? 0 : -1,
+                        }),
+                      }
+                    : {},
+                );
+              })}
+            </div>
+          </FloatingFocusManager>
+        )}
+      </FloatingList>
+    </FloatingNode>
+  );
+};
+
+export const Menu = (props: MenuProps) => {
+  const parentId = useFloatingParentNodeId();
+
+  if (parentId === null) {
+    return (
+      <FloatingTree>
+        <MenuComponent
+          {...(props as AnyObject)}
+          menuClassName={props.className}
+        />
+      </FloatingTree>
+    );
+  }
+
+  return <MenuComponent {...props} />;
+};
diff --git a/packages/core/src/components/menu/MenuItem.tsx b/packages/core/src/components/menu/MenuItem.tsx
new file mode 100644
index 0000000..55214ca
--- /dev/null
+++ b/packages/core/src/components/menu/MenuItem.tsx
@@ -0,0 +1,160 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useFloatingTree } from "@floating-ui/react";
+import { iconToken } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Fragment, useCallback, useMemo } from "react";
+import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
+import { Tooltip } from "../../overlays";
+import { type PolymorphicProps } from "../../types";
+import { Badge, getBadgeProps } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
+import classes from "./Menu.module.css";
+import { type MenuItemProps } from "./types";
+
+export const MenuItem = <Tag extends React.ElementType = "button">({
+  as,
+  label,
+  color = "primary",
+  className,
+  icon,
+  iconBg,
+  iconColor,
+  appendLabel,
+  rtlFlip,
+  altIcon,
+  id,
+  active,
+  disabled,
+  onClick,
+  badge,
+  hotKey,
+  // @ts-expect-error ignore
+  minimal,
+  // @ts-expect-error ignore
+  "data-open": childOpen,
+  // @ts-expect-error ignore
+  ref,
+  ...aria
+}: MenuItemProps & PolymorphicProps<Tag>) => {
+  const tree = useFloatingTree();
+  const badgeProps = useMemo(() => {
+    return getBadgeProps(badge);
+  }, [badge]);
+
+  const iconEl = useMemo(() => {
+    let path = icon;
+    if (minimal && !path) {
+      path = iconToken(label);
+    }
+    return (
+      <Icon
+        className={classNames(classes.menuIcon, minimal && classes.minimal)}
+        icon={path ?? ""}
+        bg={iconBg}
+        color={iconColor}
+        rtlFlip={rtlFlip}
+      />
+    );
+  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
+
+  const Wrapper = useCallback(
+    ({ children, ...rest }: AnyObject) => {
+      return minimal ? (
+        <Tooltip
+          content={label}
+          placement="right"
+          disabled={childOpen}
+          {...rest}
+        >
+          {children}
+        </Tooltip>
+      ) : (
+        <Fragment>{children}</Fragment>
+      );
+    },
+    [minimal, label, childOpen],
+  );
+
+  const menuLabel = useMemo(() => {
+    return (
+      <Fragment>
+        {iconEl}
+        {!minimal && <label className="flex-1 pe-4 py-1.5">{label}</label>}
+        {appendLabel && (
+          <span
+            className={classNames(
+              "font-bold whitespace-nowrap text-center leading-none mx-1",
+              minimal && "absolute inset-x-0 bottom-0 overflow-clip",
+              minimal ? "text-[0.5rem]" : "text-[0.625rem]",
+              active ? "text-white/50" : "text-tint-600/50",
+            )}
+          >
+            {appendLabel}
+          </span>
+        )}
+        {badge && (
+          <Badge
+            {...badgeProps}
+            placement={minimal ? "end" : ""}
+            className={classNames("me-1", badgeProps.className)}
+          />
+        )}
+        {hotKey && <HotKeyLabel keyCombo={hotKey} />}
+        {!minimal && altIcon && (
+          <Icon className="text-muted px-1" icon={altIcon} rtlFlip />
+        )}
+      </Fragment>
+    );
+  }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
+
+  const E = as ?? "button";
+  return (
+    <Wrapper {...aria}>
+      <E
+        ref={ref}
+        data-dropdown-dismiss
+        data-color={color}
+        className={classNames(
+          classes.menuItem,
+          className,
+          active && classes.active,
+          minimal && classes.minimal,
+          disabled && classes.disabled,
+          "flex flex-nowrap text-start items-center relative",
+        )}
+        data-open={childOpen}
+        disabled={disabled}
+        data-id={id}
+        onClick={(e) => {
+          onClick?.(e);
+          tree?.events.emit("click");
+        }}
+        {...(minimal ? {} : aria)}
+      >
+        {menuLabel}
+      </E>
+    </Wrapper>
+  );
+};
diff --git a/packages/core/src/components/menu/types.ts b/packages/core/src/components/menu/types.ts
new file mode 100644
index 0000000..64f2a6d
--- /dev/null
+++ b/packages/core/src/components/menu/types.ts
@@ -0,0 +1,100 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { type ElementType } from "react";
+import {
+  type AriaProps,
+  type BadgeType,
+  type CallbackReturn,
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type IconProps,
+  type TestProps,
+} from "../../types";
+
+export interface MenuItemProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    IconProps {
+  /**
+   * menu id passed via menu.onClick
+   */
+  id?: string;
+  /**
+   * item label
+   */
+  label: string;
+  /**
+   * append label badge text
+   */
+  appendLabel?: string | false;
+  /**
+   * menu color
+   */
+  color?: ColorType;
+  /**
+   * item active
+   */
+  active?: boolean;
+  /**
+   * item disabled
+   */
+  disabled?: boolean;
+  /**
+   * badge
+   */
+  badge?: string | number | BadgeType;
+  /**
+   * keyboard shortcut label
+   */
+  hotKey?: string;
+  /**
+   * alternate icon align end (caret, arrow)
+   */
+  altIcon?: string;
+  /**
+   * click handler
+   */
+  onClick?: () => CallbackReturn;
+}
+
+export interface MenuRootProps extends CssProp {
+  label?: never;
+  minimal?: boolean;
+  menuClassName?: never;
+  onClick?: (id: string) => CallbackReturn;
+}
+
+export interface MenuInnerProps extends MenuItemProps {
+  label: string;
+  minimal?: never;
+  /**
+   * floating menu className
+   */
+  menuClassName?: string;
+}
+
+export type MenuProps = ChildrenProp<ElementType<MenuItemProps>> &
+  (MenuRootProps | MenuInnerProps);
diff --git a/packages/core/src/components/meter/Meter.module.css b/packages/core/src/components/meter/Meter.module.css
new file mode 100644
index 0000000..7696a63
--- /dev/null
+++ b/packages/core/src/components/meter/Meter.module.css
@@ -0,0 +1,116 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .meter {
+    & .meterBar {
+      flex: 1 1 1rem;
+
+      min-width: 1rem;
+      max-width: 12rem;
+      height: 0.5em;
+
+      line-height: 1;
+
+      &::after {
+        width: var(--width);
+      }
+    }
+
+    & > label {
+      font-size: max(0.75rem, 0.5em);
+      line-height: 1;
+    }
+
+    & .meterBar[data-active="true"] {
+      &:nth-child(1),
+      &:nth-child(2),
+      &:nth-child(3),
+      &:nth-child(4),
+      &:nth-child(5),
+      &:nth-child(6) {
+        &::after {
+          opacity: 0.85;
+          background-color: currentColor;
+        }
+      }
+
+      &:nth-child(1) {
+        color: #eb5e28;
+      }
+
+      &:nth-child(2) {
+        color: #f9a03f;
+      }
+
+      &:nth-child(3) {
+        color: #f3c053;
+      }
+
+      &:nth-child(4) {
+        color: #a1c349;
+      }
+
+      &:nth-child(5) {
+        color: #87a330;
+      }
+
+      &:nth-child(6) {
+        color: #6a8532;
+      }
+    }
+
+    &[class*="text-primary"] .meterBar[data-active="true"],
+    &[class*="text-accent"] .meterBar[data-active="true"],
+    &[class*="text-info"] .meterBar[data-active="true"],
+    &[class*="text-danger"] .meterBar[data-active="true"],
+    &[class*="text-success"] .meterBar[data-active="true"],
+    &[class*="text-warning"] .meterBar[data-active="true"] {
+      color: currentColor;
+
+      &:nth-child(1)::after {
+        opacity: 0.2;
+      }
+
+      &:nth-child(2)::after {
+        opacity: 0.35;
+      }
+
+      &:nth-child(3)::after {
+        opacity: 0.5;
+      }
+
+      &:nth-child(4)::after {
+        opacity: 0.65;
+      }
+
+      &:nth-child(5)::after {
+        opacity: 0.8;
+      }
+
+      &:nth-child(6)::after {
+        opacity: 0.95;
+      }
+    }
+  }
+}
diff --git a/packages/core/src/components/meter/Meter.tsx b/packages/core/src/components/meter/Meter.tsx
new file mode 100644
index 0000000..9a208fc
--- /dev/null
+++ b/packages/core/src/components/meter/Meter.tsx
@@ -0,0 +1,80 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Format } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { type AriaProps, type CssProp, type TestProps } from "../../types";
+import classes from "./Meter.module.css";
+
+export interface MeterProps extends CssProp, AriaProps, TestProps {
+  /**
+   * meter value (0-100)
+   */
+  value: number;
+  /**
+   * hide value label
+   */
+  hideLabel?: boolean;
+}
+
+export const Meter = ({ value, hideLabel, className, ...aria }: MeterProps) => {
+  /** ***************** calculate active meter dots *******************/
+  const activeCount = useMemoDebugger(
+    () => {
+      return value / 16.67;
+    },
+    [value],
+    "Meter activeCount",
+  );
+
+  return (
+    <div
+      className={classNames(
+        classes.meter,
+        className,
+        "flex flex-nowrap items-center gap-[2px]",
+      )}
+      {...aria}
+    >
+      {[0, 1, 2, 3, 4, 5].map((step) => (
+        <div
+          key={step}
+          className={classNames(
+            classes.meterBar,
+            "first-of-type:rounded-s last-of-type:rounded-e bg-tint-100 relative outline -outline-offset-1 outline-muted overflow-hidden after:absolute after:inset-0",
+          )}
+          data-active={activeCount >= step}
+          style={
+            {
+              "--width": `${Math.min((activeCount - step) * 100, 100)}%`,
+            } as AnyObject
+          }
+        />
+      ))}
+      {!hideLabel && (
+        <label className="text-muted">{Format.percent(value / 100)}</label>
+      )}
+    </div>
+  );
+};
diff --git a/packages/core/src/components/navigator/Navigator.tsx b/packages/core/src/components/navigator/Navigator.tsx
new file mode 100644
index 0000000..98f768b
--- /dev/null
+++ b/packages/core/src/components/navigator/Navigator.tsx
@@ -0,0 +1,77 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { HotKey } from "../../hotkeys/HotKey";
+import {
+  type AriaProps,
+  type ColorType,
+  type CssProp,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { Icon } from "../icon/Icon";
+
+export interface NavigatorProps extends CssProp, AriaProps, TestProps {
+  /**
+   * navigator button color
+   */
+  color?: ColorType | string;
+  /**
+   * navigation handler
+   */
+  onNavigate: (dir: -1 | 1) => void;
+}
+
+export const Navigator = ({
+  className,
+  onNavigate,
+  color,
+  ...aria
+}: NavigatorProps) => {
+  return (
+    <div
+      className={classNames(className, "inline-block leading-none")}
+      {...aria}
+    >
+      <HotKey keyCombo="left" handler={() => onNavigate(-1)} />
+      <HotKey keyCombo="right" handler={() => onNavigate(1)} />
+      <Icon
+        rtlFlip
+        color={color}
+        className="text-[1em] p-1"
+        aria-label="previous"
+        icon={CoreIcons.chevronLeft}
+        onClick={(e) => [e.stopPropagation(), onNavigate(-1)]}
+      />
+      <Icon
+        rtlFlip
+        className="text-[1em] p-1"
+        color={color}
+        aria-label="next"
+        icon={CoreIcons.chevronRight}
+        onClick={(e) => [e.stopPropagation(), onNavigate(1)]}
+      />
+    </div>
+  );
+};
diff --git a/packages/core/src/components/panel/Panel.module.css b/packages/core/src/components/panel/Panel.module.css
new file mode 100644
index 0000000..aa9e044
--- /dev/null
+++ b/packages/core/src/components/panel/Panel.module.css
@@ -0,0 +1,86 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .panel {
+    grid-template: "head" auto "content" 1fr / 1fr;
+    background-color: theme(colors.bg);
+
+    & > * {
+      background-color: transparent;
+    }
+
+    &:global(.fixed) {
+      box-shadow: 0 0 18px theme(boxShadowColor.base);
+    }
+
+    & .panelHeader {
+      background-color: theme(backgroundColor.dimmed);
+    }
+
+    & .panelAction {
+      padding: 0.25rem;
+    }
+
+    & .panelBody {
+      grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    }
+  }
+}
+
+@layer util {
+  .panelGroup {
+    & > .panel {
+      &[data-collapsed="true"] {
+        flex: 0 0 auto;
+      }
+
+      &[data-collapsed="false"] {
+        flex: 1 1 auto;
+        min-height: 15rem;
+
+        [data-ref="panelCollapse"] {
+          pointer-events: none;
+          color: var(--tint);
+          opacity: 0.25;
+        }
+      }
+    }
+
+    & > .panel:not(:first-child) {
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    & > .panel:not(:last-child) {
+      border-bottom: 1px solid theme(backgroundColor.base);
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+
+  [data-ref="asideBody"] > .panelGroup > .panel {
+    border-radius: 0;
+    outline: 0;
+  }
+}
diff --git a/packages/core/src/components/panel/Panel.tsx b/packages/core/src/components/panel/Panel.tsx
new file mode 100644
index 0000000..c2a1c6d
--- /dev/null
+++ b/packages/core/src/components/panel/Panel.tsx
@@ -0,0 +1,244 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { useMemo } from "react";
+import { type ContentProps } from "../../core/content/Content";
+import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
+import { usePropToggle } from "../../hooks/usePropToggle";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type CollapseProps,
+  type CssProp,
+  type ExpandProps,
+  type IconProps,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { Loading } from "../animations/Animations";
+import { Icon } from "../icon/Icon";
+import classes from "./Panel.module.css";
+
+export interface PanelProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    IconProps,
+    ExpandProps,
+    CollapseProps,
+    ChildrenProp<HeadFootProps | ContentProps> {
+  /**
+   * panel id used by panel stack
+   */
+  panelId?: string;
+  /**
+   * panel title
+   */
+  title?: string;
+  /**
+   * header actions
+   */
+  actions?: JSX.Element;
+  /**
+   * header css classname(s)
+   */
+  headerClassName?: string;
+  /**
+   * title css classname(s)
+   */
+  titleClassName?: string;
+  /**
+   * loading state
+   */
+  loading?: boolean;
+  /**
+   * height
+   */
+  height?: string | number;
+  /**
+   * width
+   */
+  width?: string | number;
+  /**
+   * minimum height
+   */
+  minHeight?: string | number;
+  /**
+   * minimum width
+   */
+  minWidth?: string | number;
+  /**
+   * maximum height
+   */
+  maxHeight?: string | number;
+  /**
+   * maximum width
+   */
+  maxWidth?: string | number;
+  /**
+   * close handler
+   */
+  onClose?: () => void;
+}
+
+export const Panel = ({
+  children,
+  className,
+  titleClassName,
+  headerClassName,
+  title,
+  actions,
+  icon,
+  iconBg,
+  iconColor,
+  rtlFlip,
+  panelId,
+  height,
+  width,
+  minHeight,
+  minWidth,
+  maxHeight,
+  maxWidth,
+  loading,
+  expandable,
+  expanded: _expanded,
+  onExpand,
+  collapsable,
+  collapsed: _collapsed,
+  onCollapse,
+  onClose,
+  ...aria
+}: PanelProps) => {
+  const [collapsed, toggleCollapse] = usePropToggle(
+    _collapsed,
+    onCollapse,
+    panelId,
+  );
+  const [expanded, toggleExpand] = usePropToggle(_expanded, onExpand, panelId);
+
+  const hasTools = useMemo(() => {
+    return !!expandable || !!collapsable || !!onClose;
+  }, [expandable, collapsable, onClose]);
+
+  return (
+    <div
+      className={classNames(
+        classes.panel,
+        className,
+        "rounded-capped overflow-hidden outline grid",
+        expanded ? "fixed inset-4 z-50" : "relative",
+      )}
+      data-ref="panel"
+      data-collapsed={collapsed}
+      style={
+        expanded
+          ? {}
+          : collapsed
+            ? { width, minWidth, maxWidth }
+            : {
+                height,
+                width,
+                minWidth,
+                minHeight,
+                maxWidth,
+                maxHeight,
+              }
+      }
+      {...aria}
+    >
+      <header
+        role="none"
+        className={classNames(
+          classes.panelHeader,
+          headerClassName,
+          "flex flex-nowrap items-center area-head",
+        )}
+        onClick={collapsable ? toggleCollapse : undefined}
+      >
+        {icon && (
+          <Icon
+            icon={icon}
+            bg={iconBg}
+            color={iconColor}
+            rtlFlip={rtlFlip}
+            className="p-2 text-md select-none pointer-events-none"
+          />
+        )}
+        <div
+          className={classNames(
+            titleClassName,
+            "flex-1 select-none truncate",
+            title && "py-1 first:px-2",
+          )}
+        >
+          {title}
+        </div>
+        <div className="px-1">{actions}</div>
+        {hasTools && (
+          <div
+            role="none"
+            className="px-1 gap-px flex"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {expandable && (
+              <Icon
+                data-ref="panelExpand"
+                className={classNames(classes.panelAction, "cursor-pointer")}
+                icon={expanded ? CoreIcons.minimize : CoreIcons.maximize}
+                onClick={toggleExpand}
+              />
+            )}
+            {!expanded && collapsable && (
+              <Icon
+                data-ref="panelCollapse"
+                className={classNames(classes.panelAction, "cursor-pointer")}
+                icon={collapsed ? CoreIcons.expand : CoreIcons.collapse}
+                onClick={toggleCollapse}
+              />
+            )}
+            {!expanded && onClose && (
+              <Icon
+                data-ref="panelClose"
+                className={classNames(classes.panelAction, "cursor-pointer")}
+                icon={CoreIcons.close}
+                onClick={onClose}
+              />
+            )}
+          </div>
+        )}
+      </header>
+      {(!collapsed || expanded) && (
+        <div
+          className={classNames(
+            classes.panelBody,
+            "area-content grid overflow-hidden",
+          )}
+        >
+          {loading && <Loading />}
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/core/src/components/panel/PanelGroup.tsx b/packages/core/src/components/panel/PanelGroup.tsx
new file mode 100644
index 0000000..78a470f
--- /dev/null
+++ b/packages/core/src/components/panel/PanelGroup.tsx
@@ -0,0 +1,99 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { Children, cloneElement, useCallback, useState } from "react";
+import {
+  useEffectDebugger,
+  useMemoDebugger,
+} from "../../hooks/useEffectDebugger";
+import { type ChildrenProp } from "../../types";
+import classes from "./Panel.module.css";
+
+export interface PanelGroupProps extends ChildrenProp {
+  /**
+   * active panel id / index
+   */
+  activePanel?: string | number;
+  /**
+   * active change callback
+   */
+  onActiveChange?: (panelId: string) => void;
+}
+
+export const PanelGroup = ({
+  children,
+  activePanel,
+  onActiveChange,
+}: PanelGroupProps) => {
+  const [expandedPanel, setExpandedPanel] = useState<string>();
+
+  const panels = useMemoDebugger(
+    () =>
+      Children.toArray(children).map(
+        (child: AnyObject, index: number) => child.props.panelId || index,
+      ),
+    [children],
+    "PanelGroup children",
+  );
+
+  useEffectDebugger(
+    () => {
+      setExpandedPanel(activePanel ?? panels[0]);
+    },
+    [activePanel, panels],
+    "PanelGroup setActive",
+  );
+
+  const changeExpanded = useCallback(
+    (collapsed: boolean, id: string, handler?: AnyObject) => {
+      if (!collapsed) {
+        setExpandedPanel(id);
+        onActiveChange?.(id);
+      }
+      handler?.(collapsed);
+      return id !== expandedPanel;
+    },
+    [onActiveChange, expandedPanel],
+  );
+
+  return (
+    <div
+      data-ref="panelGroup"
+      className={classNames(
+        classes.panelGroup,
+        "flex flex-col overflow-auto area-content p-px",
+      )}
+    >
+      {Children.toArray(children).map((child: AnyObject, index: number) =>
+        cloneElement(child, {
+          panelId: child.props.panelId || index,
+          collapsable: true,
+          onCollapse: (b: boolean, id: string) =>
+            changeExpanded(b, id, child.props.onCollapse),
+          collapsed: expandedPanel !== (child.props.panelId || index),
+        }),
+      )}
+    </div>
+  );
+};
diff --git a/packages/core/src/components/progress/Progress.module.css b/packages/core/src/components/progress/Progress.module.css
new file mode 100644
index 0000000..c76bf7f
--- /dev/null
+++ b/packages/core/src/components/progress/Progress.module.css
@@ -0,0 +1,70 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .progressbar {
+    height: 1em;
+    box-shadow: 0 0 4px 0 theme(boxShadowColor.dimmed) inset;
+
+    & > div:last-child {
+      width: calc(var(--progress) * 1%);
+
+      &::after {
+        content: attr(data-label);
+
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: 0;
+
+        width: calc((100 / var(--progress)) * 100%);
+        padding: 0.75em;
+
+        font-size: 0.5em;
+        line-height: 0.5em;
+        color: var(--white);
+        text-align: center;
+        vertical-align: middle;
+      }
+    }
+
+    .progressTrack {
+      width: calc(var(--progress) * 1%);
+      transition: width 0.5s;
+    }
+
+    & > div:first-child {
+      padding: 0.75em;
+      font-size: 0.5em;
+      line-height: 0.5em;
+    }
+  }
+
+  .progressAnimate {
+    background-image: var(--progress-gradient);
+    background-size: 1em 1em;
+
+    & :global {
+      animation: progress 750ms linear infinite;
+    }
+  }
+}
diff --git a/packages/core/src/components/progress/ProgressBar.tsx b/packages/core/src/components/progress/ProgressBar.tsx
new file mode 100644
index 0000000..6b4a07d
--- /dev/null
+++ b/packages/core/src/components/progress/ProgressBar.tsx
@@ -0,0 +1,113 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Format } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { type ColorType } from "../../types";
+import { getColorClass } from "../../utils";
+import classes from "./Progress.module.css";
+
+export interface ProgressProps {
+  /**
+   * progress value (0-100)
+   */
+  value: number;
+  /**
+   * size
+   */
+  size?: "sm" | "md" | "lg" | "xl";
+  /**
+   * color
+   */
+  color?: ColorType;
+  /**
+   * animate
+   */
+  animate?: boolean;
+  /**
+   * progress label
+   */
+  label?: string;
+}
+
+const SizeMap: KeyValue = {
+  "": "0.875rem",
+  sm: "0.625rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem",
+};
+
+export const ProgressBar = ({
+  value = 0,
+  size,
+  color = "primary",
+  label = "",
+  animate,
+}: ProgressProps) => {
+  /** ***************** make sure value is between 0 and 100 *******************/
+  const actualValue = useMemoDebugger(
+    () => Math.min(Math.max(value, 0), 100),
+    [value],
+    "ProgressBar value",
+  );
+
+  const progressVar = useMemoDebugger<KeyValue>(
+    () => ({
+      "--progress": actualValue,
+    }),
+    [actualValue],
+    "ProgressBar cssVar",
+  );
+
+  /** ***************** component *******************/
+  return (
+    <div
+      className={classNames(
+        classes.progressbar,
+        getColorClass(color),
+        "block bg-dimmed relative rounded font-bold overflow-hidden whitespace-nowrap",
+      )}
+      style={{ ...progressVar, fontSize: SizeMap[size ?? ""] }}
+      data-animate={animate}
+      aria-hidden="true"
+    >
+      <div className="absolute inset-0 text-center z-0 align-top">
+        {label} {Format.percent(actualValue / 100)}
+      </div>
+      <div
+        className={classNames(
+          classes.progressTrack,
+          animate && classes.progressAnimate,
+          "h-full overflow-clip bg-current relative z-0",
+        )}
+        // data-label={`${label} ${Format.percent(actualValue / 100)}`}
+      />
+      <div
+        className={classNames("h-full absolute inset-0 overflow-hidden z-1")}
+        data-label={`${label} ${Format.percent(actualValue / 100)}`}
+      />
+    </div>
+  );
+};
diff --git a/packages/core/src/components/progress/ProgressCircle.tsx b/packages/core/src/components/progress/ProgressCircle.tsx
new file mode 100644
index 0000000..c84dda1
--- /dev/null
+++ b/packages/core/src/components/progress/ProgressCircle.tsx
@@ -0,0 +1,118 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Format } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { type ColorType } from "../../types";
+import { getColorClass } from "../../utils";
+
+export interface ProgressProps {
+  /**
+   * progress value (0-100)
+   */
+  value: number;
+  /**
+   * size
+   */
+  size?: "sm" | "md" | "lg" | "xl";
+  /**
+   * color
+   */
+  color?: ColorType;
+}
+
+const SizeMap: KeyValue = {
+  "": "1rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem",
+};
+
+export const ProgressCircle = ({
+  value = 0,
+  size = "sm",
+  color = "primary",
+}: ProgressProps) => {
+  /** ***************** make sure value is between 0 and 100 *******************/
+  const actualValue = useMemoDebugger(
+    () => Math.min(Math.max(value, 0), 100),
+    [value],
+    "ProgressCirle value",
+  );
+
+  /** ***************** calculate stroke offset by actual value *******************/
+  const strokeDashoffset = useMemoDebugger(
+    () => {
+      const circumfrence = Math.PI * 2 * 44;
+      return circumfrence * (1 - actualValue / 100);
+    },
+    [actualValue],
+    "ProgressCirle dashOffset",
+  );
+
+  /** ***************** component *******************/
+  return (
+    <div
+      className={classNames(
+        "inline-block w-[4em] h-[4em] text-lg relative",
+        getColorClass(color),
+      )}
+      aria-hidden="true"
+      style={{ fontSize: SizeMap[size] }}
+    >
+      <svg
+        viewBox="0 0 100 100"
+        className={classNames("absolute inset-0 w-full h-full stroke-dimmed")}
+      >
+        <circle
+          cx="50"
+          cy="50"
+          r="44"
+          strokeWidth="12"
+          strokeOpacity="0.25"
+          fillOpacity="0"
+        />
+        <circle
+          cx="50"
+          cy="50"
+          r="44"
+          stroke="currentColor"
+          strokeWidth="12"
+          fillOpacity="0"
+          style={{
+            transform: "rotate(-90deg)",
+            transformOrigin: "center",
+            strokeDasharray: Math.PI * 2 * 44,
+            strokeDashoffset,
+            transition: "stroke-dashoffset 0.5s",
+          }}
+        />
+      </svg>
+      <span className="flex w-full h-full items-center justify-center select-none font-bold text-[0.625em]">
+        {Format.percent(actualValue / 100)}
+      </span>
+    </div>
+  );
+};
diff --git a/packages/core/src/components/tabpanel/Tab.tsx b/packages/core/src/components/tabpanel/Tab.tsx
new file mode 100644
index 0000000..d53f62e
--- /dev/null
+++ b/packages/core/src/components/tabpanel/Tab.tsx
@@ -0,0 +1,151 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { useMemo } from "react";
+import {
+  type AriaProps,
+  type BadgeType,
+  type CallbackReturn,
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type IconProps,
+  type PolymorphicProps,
+  type RefProp,
+  type TestProps,
+} from "../../types";
+import { Badge, getBadgeProps } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
+import classes from "./TabPanel.module.css";
+
+export interface TabProps
+  extends Partial<ChildrenProp>,
+    CssProp,
+    RefProp,
+    AriaProps,
+    TestProps,
+    IconProps {
+  /**
+   * tab id
+   */
+  id: string;
+  /**
+   * tab label
+   */
+  label?: string;
+  /**
+   * tab color
+   */
+  color?: ColorType;
+  /**
+   * tab badge
+   */
+  badge?: BadgeType;
+  /**
+   * disabled
+   */
+  disabled?: boolean;
+  /**
+   * tab flex to fill button
+   */
+  tabFlex?: boolean;
+  /**
+   * className for active state
+   */
+  activeClassName?: string;
+  /**
+   * close handler
+   */
+  onClose?: () => CallbackReturn<boolean>;
+}
+
+export const Tab = <Tag extends React.ElementType = "button">({
+  ref,
+  as,
+  id,
+  className,
+  label,
+  icon,
+  iconBg,
+  iconColor,
+  rtlFlip,
+  badge,
+  disabled,
+  onClose,
+  // @ts-expect-error ignore
+  active,
+  // @ts-expect-error ignore
+  minimal,
+  onClick,
+  tabFlex,
+  color,
+  activeClassName,
+  ...aria
+}: TabProps & PolymorphicProps<Tag>) => {
+  const badgeProps = useMemo(() => {
+    return getBadgeProps(badge);
+  }, [badge]);
+
+  const E = as ?? "button";
+  return (
+    <E
+      data-id={id}
+      disabled={disabled}
+      data-color={color}
+      className={classNames(
+        classes.tabButton,
+        active && "active",
+        active && activeClassName,
+        disabled && "text-tint-500",
+        tabFlex ? "flex-1" : "flex-initial max-w-36",
+        "flex items-center justify-center p-1 rounded overflow-hidden",
+      )}
+      onClick={() => onClick?.(id)}
+      ref={ref as AnyObject}
+      {...aria}
+    >
+      {icon && (
+        <Icon
+          icon={icon}
+          bg={iconBg}
+          color={iconColor}
+          rtlFlip={rtlFlip}
+          className="flex-content"
+        />
+      )}
+      {!minimal && (
+        <label className="flex-initial truncate text-center px-2 py-1.5">
+          {label}
+        </label>
+      )}
+      {badge && (
+        <Badge
+          {...badgeProps}
+          placement={minimal ? "end" : ""}
+          className={classNames("me-1", badgeProps.className)}
+        />
+      )}
+    </E>
+  );
+};
diff --git a/packages/core/src/components/tabpanel/TabPanel.module.css b/packages/core/src/components/tabpanel/TabPanel.module.css
new file mode 100644
index 0000000..08a282f
--- /dev/null
+++ b/packages/core/src/components/tabpanel/TabPanel.module.css
@@ -0,0 +1,179 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .tabPanel {
+    --color: theme(colors.primary.500);
+
+    & > .tabList {
+      grid-area: tablist;
+
+      & > .tabButton {
+        &[data-color="accent"] {
+          --color: theme(colors.accent.500);
+        }
+
+        &[data-color="info"] {
+          --color: theme(colors.info.500);
+        }
+
+        &[data-color="danger"] {
+          --color: theme(colors.danger.500);
+        }
+
+        &[data-color="success"] {
+          --color: theme(colors.success.500);
+        }
+
+        &[data-color="warning"] {
+          --color: theme(colors.warning.500);
+        }
+
+        &:hover {
+          color: color-mix(in lab, var(--color) 65%, var(--fabric-text));
+          background-color: theme(colors.tint.100/50%);
+          box-shadow: 0 0 calc(var(--shadow-offset) * 1px) 0 0 var(--color)
+            inset;
+        }
+
+        &:global(.active) {
+          font-weight: 500;
+          color: color-mix(in lab, var(--color) 65%, var(--fabric-text));
+        }
+      }
+    }
+
+    &[data-variant="solid"] {
+      & > .tabList > .tabButton:global(.active) {
+        color: theme(colors.white);
+        background-color: var(--color);
+      }
+    }
+
+    &[data-variant="soft"] {
+      & > .tabList > .tabButton:global(.active) {
+        background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
+      }
+    }
+
+    &[data-orientation="top"] {
+      grid-template: "tablist" auto "content" 1fr / 1fr;
+      padding-inline: 2px;
+
+      &[data-variant="solid"] > .tabList,
+      &[data-variant="soft"] > .tabList {
+        box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
+      }
+    }
+
+    &[data-orientation="bottom"] {
+      grid-template: "content" 1fr "tablist" auto / 1fr;
+      padding-inline: 2px;
+
+      &[data-variant="solid"] > .tabList,
+      &[data-variant="soft"] > .tabList {
+        box-shadow: 0 1px 0 theme(borderColor.dimmed) inset;
+      }
+    }
+
+    &[data-orientation="start"] {
+      grid-template: "tablist content" 1fr / auto 1fr;
+      padding-block: 2px;
+
+      &[data-variant="solid"] > .tabList,
+      &[data-variant="soft"] > .tabList {
+        box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
+      }
+    }
+
+    &[data-orientation="end"] {
+      grid-template: "content tablist" 1fr / 1fr auto;
+      padding-block: 2px;
+
+      &[data-variant="solid"] > .tabList,
+      &[data-variant="soft"] > .tabList {
+        box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
+      }
+    }
+  }
+}
+
+@layer util {
+  .tabPanel {
+    & > .tabList > .tabButton:global(.active) {
+      pointer-events: none;
+    }
+
+    &[data-orientation="top"] > .tabList {
+      & > .tabButton:global(.active) {
+        box-shadow: 0 -2px 0 var(--color) inset;
+      }
+    }
+
+    &[data-orientation="bottom"] > .tabList {
+      & > .tabButton:global(.active) {
+        box-shadow: 0 2px 0 var(--color) inset;
+      }
+    }
+
+    &[data-orientation="start"] > .tabList {
+      & > .tabButton:global(.active) {
+        box-shadow: -2px 0 0 var(--color) inset;
+      }
+    }
+
+    &[data-orientation="end"] > .tabList {
+      & > .tabButton:global(.active) {
+        box-shadow: 2px 0 0 var(--color) inset;
+      }
+    }
+
+    &[data-orientation="top"] > .tabList > .tabButton {
+      margin-top: 2px;
+      margin-inline: 1px;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &[data-orientation="bottom"] > .tabList > .tabButton {
+      margin-bottom: 2px;
+      margin-inline: 1px;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    &[data-orientation="start"] > .tabList > .tabButton {
+      margin-block: 1px;
+      margin-inline-start: 2px;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &[data-orientation="end"] > .tabList > .tabButton {
+      margin-block: 1px;
+      margin-inline-end: 2px;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+  }
+}
diff --git a/packages/core/src/components/tabpanel/TabPanel.tsx b/packages/core/src/components/tabpanel/TabPanel.tsx
new file mode 100644
index 0000000..22ef54d
--- /dev/null
+++ b/packages/core/src/components/tabpanel/TabPanel.tsx
@@ -0,0 +1,153 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import {
+  Children,
+  cloneElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { type CallbackReturn, type ChildrenProp } from "../../types";
+import { nodeCheck } from "../../utils";
+import { Tab } from "./Tab";
+import classes from "./TabPanel.module.css";
+
+export interface TabPanelProps extends ChildrenProp<typeof Tab> {
+  /**
+   * tab list orientation
+   */
+  orientation?: "top" | "bottom" | "start" | "end";
+  /**
+   * justify buttons
+   */
+  justify?: "start" | "center" | "end";
+  /**
+   * tab variations
+   */
+  variant?: "soft" | "solid";
+  /**
+   * tab button flex to fill tabs
+   */
+  tabFlex?: boolean;
+  /**
+   * tab button gap
+   */
+  gap?: number;
+  /**
+   * current active tab
+   */
+  activeTab?: string;
+  /**
+   * tab list className
+   */
+  headerClassName?: string;
+  /**
+   * change handler
+   */
+  onChange?: (id: string) => void;
+  /**
+   * before close handler, return false to prevent change
+   */
+  onBeforeChange?: (nextTab: string, currentTab?: string) => CallbackReturn;
+}
+
+export const TabPanel = ({
+  children,
+  headerClassName,
+  orientation = "top",
+  activeTab,
+  justify,
+  variant,
+  tabFlex,
+  gap,
+  onBeforeChange,
+  onChange,
+}: TabPanelProps) => {
+  const [active, setActive] = useState<string>();
+
+  const [tabs, rest] = useMemo(() => {
+    return Children.toArray(children as AnyObject).reduce<AnyObject[]>(
+      (ret, node) => {
+        nodeCheck(node, Tab) ? ret[0].push(node) : ret[1].push(node);
+        return ret;
+      },
+      [[], []],
+    );
+  }, [children]);
+
+  useEffect(() => {
+    setActive(activeTab ?? tabs[0].props.id);
+  }, [activeTab, tabs]);
+
+  const activeTabPanel = useMemo(() => {
+    return tabs.find((tab: AnyObject) => tab.props.id === active)?.props
+      .children;
+  }, [tabs, active]);
+
+  const handleClick = useCallback(
+    (id: string) => {
+      void Promise.resolve(onBeforeChange?.(id, active)).then((ret) => {
+        if (ret !== false) {
+          setActive(id);
+          onChange?.(id);
+        }
+      });
+    },
+    [onBeforeChange, onChange, active],
+  );
+
+  return (
+    <div
+      className={classNames(
+        classes.tabPanel,
+        "area-content grid bg-base overflow-hidden",
+      )}
+      data-orientation={orientation}
+      data-variant={variant ?? "default"}
+    >
+      <div
+        className={classNames(
+          classes.tabList,
+          headerClassName,
+          justify && `justify-${justify}`,
+          ["start", "end"].includes(orientation) && "flex-col",
+          "flex flex-nowrap overflow-auto scroll-thin",
+        )}
+        style={{ gap }}
+      >
+        {tabs.map((node: AnyObject) =>
+          cloneElement(node, {
+            tabFlex: node.props.tabFlex ?? tabFlex,
+            onClick: handleClick,
+            active: node.props.id === active,
+          }),
+        )}
+      </div>
+      {rest}
+      {activeTabPanel}
+    </div>
+  );
+};
diff --git a/packages/core/src/context/Global.tsx b/packages/core/src/context/Global.tsx
new file mode 100644
index 0000000..2330ca1
--- /dev/null
+++ b/packages/core/src/context/Global.tsx
@@ -0,0 +1,241 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import i18next from "i18next";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ComponentType,
+  type FC,
+  type PropsWithChildren,
+} from "react";
+import { HotKeyWrapper } from "../hotkeys/HotKeyWrapper";
+import {
+  NotificationManager,
+  type NotificationManagerRef,
+} from "./NotificationCenter";
+
+interface State {
+  locale: string;
+  colorScheme: "light" | "dark";
+  calendar: "gregorian" | "hijri";
+}
+
+export interface GlobalProps extends PropsWithChildren {
+  /**
+   * application default error display
+   */
+  errorElement?: ComponentType<{ error?: string }>;
+
+  defaultLocale?: string;
+  defaultCalendar?: State["calendar"];
+  defaultColorScheme?: State["colorScheme"];
+}
+
+interface GlobalContextType {
+  /**
+   * change language locale
+   * @param locale
+   */
+  changeLocale: (locale: string) => string;
+  /**
+   * change date calendat
+   * @param locale
+   */
+  changeCalendar: (calendar: State["calendar"]) => State["calendar"];
+  /**
+   * toggle theme between light and dark
+   * or force to theme provided
+   * @param theme
+   */
+  toggleColorScheme: (
+    colorScheme?: State["colorScheme"],
+  ) => State["colorScheme"];
+  /**
+   * application default error display
+   */
+  errorElement: GlobalProps["errorElement"];
+
+  currentLocale: string;
+  currentCalendar: State["calendar"];
+  currentColorScheme: State["colorScheme"];
+
+  notificationManager: NotificationManagerRef;
+}
+
+const KEY_LOCALE = "ruf:locale";
+const KEY_CALENDAR = "ruf:calendar";
+const KEY_COLOR_SCHEME = "ruf:colorScheme";
+const systemLocale = () => {
+  return (
+    (typeof window !== "undefined"
+      ? localStorage.getItem(KEY_LOCALE)
+      : undefined) ?? "en"
+  );
+};
+const systemCalendar = () => {
+  return (
+    (typeof window !== "undefined"
+      ? (localStorage.getItem(KEY_CALENDAR) as AnyObject)
+      : undefined) ?? "gregorian"
+  );
+};
+const systemColorScheme = () => {
+  const theme: AnyObject =
+    typeof window !== "undefined"
+      ? localStorage.getItem(KEY_COLOR_SCHEME) ??
+        (window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light")
+      : "light";
+  return theme;
+};
+
+export const GlobalContext = createContext<GlobalContextType>(
+  {} as GlobalContextType,
+);
+
+/**
+ * global context provider
+ */
+export const ApplicationProvider: FC<GlobalProps> = ({
+  children,
+  errorElement,
+  defaultLocale,
+  defaultCalendar,
+  defaultColorScheme,
+}) => {
+  const [refNotifications, setNotificationRef] =
+    useState<NotificationManagerRef>({
+      closeAll: () => undefined,
+      showAlert: () => undefined as AnyObject,
+      showError: () => undefined as AnyObject,
+      showMessage: () => undefined as AnyObject,
+      showToast: () => undefined as AnyObject,
+    });
+  const [colorScheme, setColorScheme] = useState<State["colorScheme"]>(
+    defaultColorScheme ?? systemColorScheme(),
+  );
+  const [calendar, setCalendar] = useState<State["calendar"]>(
+    defaultCalendar ?? systemCalendar(),
+  );
+  const [locale, setLocale] = useState<State["locale"]>(
+    defaultLocale ?? systemLocale(),
+  );
+
+  /** ***************** set initial theme and locale dir  *******************/
+  useEffect(() => {
+    document.documentElement.lang = locale;
+    if (!document.documentElement.dataset.colorScheme) {
+      document.documentElement.dataset.colorScheme = colorScheme;
+    } else {
+      setColorScheme(document.documentElement.dataset.colorScheme as AnyObject);
+    }
+    if (typeof window !== "undefined") {
+      try {
+        void i18next.changeLanguage(locale).then(() => {
+          document.documentElement.dir = i18next.dir();
+        });
+      } catch {
+        //
+      }
+    }
+  }, []);
+
+  /** ***************** theme toggle *******************/
+  const toggleColorScheme = useCallback(
+    (forceTheme?: State["colorScheme"]) => {
+      const newTheme =
+        forceTheme ?? (colorScheme === "dark" ? "light" : "dark");
+      setColorScheme(newTheme);
+      localStorage.setItem(KEY_COLOR_SCHEME, newTheme);
+      document.documentElement.dataset.colorScheme = newTheme;
+      return newTheme;
+    },
+
+    [colorScheme],
+  );
+
+  /** ***************** change locale *******************/
+  const changeLocale = useCallback((locale: string) => {
+    try {
+      void i18next.changeLanguage(locale).then(() => {
+        localStorage.setItem(KEY_LOCALE, locale);
+        document.documentElement.lang = locale;
+        document.documentElement.dir = i18next.dir();
+      });
+    } catch {
+      //
+    }
+    setLocale(locale);
+    return locale;
+  }, []);
+
+  /** ***************** change calendar *******************/
+  const changeCalendar = useCallback((calendar: State["calendar"]) => {
+    setCalendar(calendar);
+    localStorage.setItem(KEY_CALENDAR, calendar);
+    return calendar;
+  }, []);
+
+  /** ***************** context provider *******************/
+  return (
+    <GlobalContext.Provider
+      value={{
+        errorElement,
+        changeLocale,
+        changeCalendar,
+        toggleColorScheme,
+        currentLocale: locale,
+        currentCalendar: calendar,
+        currentColorScheme: colorScheme,
+        notificationManager: refNotifications as AnyObject,
+      }}
+    >
+      <HotKeyWrapper>{children}</HotKeyWrapper>
+      <NotificationManager onLoad={setNotificationRef} />
+    </GlobalContext.Provider>
+  );
+};
+
+/**
+ * internal usage only
+ * @internal
+ */
+export const useGlobals = () => useContext(GlobalContext);
+
+/**
+ * global application context
+ */
+export const useApplicationContext = () => {
+  const { errorElement, ...rest } = useContext(GlobalContext);
+  return rest;
+};
+
+export const useNotificationService = () => {
+  const { notificationManager } = useContext(GlobalContext);
+  return notificationManager ?? {};
+};
diff --git a/packages/core/src/context/NotificationCenter.tsx b/packages/core/src/context/NotificationCenter.tsx
new file mode 100644
index 0000000..4ec1721
--- /dev/null
+++ b/packages/core/src/context/NotificationCenter.tsx
@@ -0,0 +1,223 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isObject, isString, uuid } from "@react-fabric/utilities";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Alert, type AlertProps } from "../overlays/alert/Alert";
+import { Message, type MessageProps } from "../overlays/message/Message";
+import { Toast, type ToastProps } from "../overlays/toast/Toast";
+
+export interface NotificationManagerRef {
+  showMessage: (
+    props: string | MessageProps,
+    timeout?: number,
+  ) => Promise<boolean | string>;
+
+  showToast: (
+    props: string | ToastProps,
+    timeout?: number,
+  ) => Promise<boolean | string>;
+
+  showAlert: (props: string | AlertProps) => Promise<boolean | string>;
+
+  showError: (
+    props: string | Omit<ToastProps, "color">,
+  ) => Promise<boolean | string>;
+
+  closeAll: () => void;
+}
+
+/** ***************** refactor props *******************/
+const makeProps = (obj: AnyObject): AnyObject => {
+  if (isString(obj)) {
+    return { message: obj };
+  } else if (isObject(obj)) {
+    return { ...obj };
+  }
+  return { message: "" };
+};
+
+export const NotificationManager = ({ onLoad }: KeyValue) => {
+  const refItems = useRef<KeyValue>({ toasts: {}, messages: {}, alerts: {} });
+
+  const [messages, setMessages] = useState<AnyObject>({});
+  const [toasts, setToasts] = useState<AnyObject>({});
+  const [alerts, setAlerts] = useState<AnyObject>({});
+
+  const updateMessages = useRef(() => {
+    setMessages({ ...refItems.current.messages });
+  });
+
+  const updateToasts = useRef(() => {
+    setToasts({ ...refItems.current.toasts });
+  });
+
+  const updateAlerts = useRef(() => {
+    setAlerts({ ...refItems.current.alerts });
+  });
+
+  const handleCloseAll = useRef(() => {
+    Object.values(refItems.current.messages).forEach((msg: AnyObject) =>
+      msg[1]?.(false),
+    );
+    Object.values(refItems.current.toasts).forEach((msg: AnyObject) =>
+      msg[1]?.(false),
+    );
+    Object.values(refItems.current.alerts).forEach((msg: AnyObject) =>
+      msg[1]?.(false),
+    );
+    refItems.current.messages = {};
+    refItems.current.toasts = {};
+    refItems.current.alerts = {};
+    updateMessages.current();
+    updateToasts.current();
+    updateAlerts.current();
+  });
+
+  const openNotification = useRef(
+    async (
+      map: KeyValue,
+      update: AnyObject,
+      Notif: React.ComponentType<AnyObject>,
+      props: AnyObject,
+      timeout = 5000,
+    ) => {
+      let timerRef: AnyObject = null;
+      const obj: AnyObject = makeProps(props);
+      return await new Promise<boolean | string>((resolve) => {
+        const key = uuid();
+        const handleClose = (b: boolean | string = false) => {
+          clearTimeout(timerRef);
+          setTimeout(() => {
+            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+            delete map[key];
+            update();
+            resolve(b);
+          }, 250);
+        };
+        map[key] = [
+          <div key={key}>
+            <Notif
+              {...obj}
+              onClose={handleClose}
+              onCloseAll={handleCloseAll.current}
+            />
+          </div>,
+          handleClose,
+        ];
+        update();
+        if (obj.type !== "confirm" && timeout > 0) {
+          timerRef = setTimeout(handleClose, timeout);
+        }
+      });
+    },
+  );
+
+  const showMessage = useRef(
+    async (props: string | MessageProps, timeout = 5000) => {
+      return await openNotification.current(
+        refItems.current.messages,
+        updateMessages.current,
+        Message,
+        props,
+        timeout,
+      );
+    },
+  );
+
+  const showToast = useRef(
+    async (props: string | MessageProps, timeout = 5000) => {
+      return await openNotification.current(
+        refItems.current.toasts,
+        updateToasts.current,
+        Toast,
+        props,
+        timeout,
+      );
+    },
+  );
+
+  const showAlert = useRef(async (props: string | MessageProps) => {
+    return await openNotification.current(
+      refItems.current.alerts,
+      updateAlerts.current,
+      Alert,
+      props,
+      0,
+    );
+  });
+
+  const showError = useRef(
+    async (props: string | MessageProps, timeout = 5000) => {
+      return await openNotification.current(
+        refItems.current.toasts,
+        Toast,
+        { ...makeProps(props), color: "danger" },
+        0,
+      );
+    },
+  );
+
+  useEffect(() => {
+    onLoad({
+      showMessage: showMessage.current,
+      showToast: showToast.current,
+      showAlert: showAlert.current,
+      showError: showError.current,
+      closeAll: handleCloseAll.current,
+    });
+  }, []);
+
+  return (
+    <Fragment>
+      {createPortal(
+        <div
+          style={{ zIndex: "var(--z-overlay)" }}
+          className="ruf-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent"
+        >
+          {Object.values(alerts).map(([el]: AnyObject) => el)}
+        </div>,
+        document.body,
+      )}
+      {createPortal(
+        <div
+          style={{ zIndex: "var(--z-notifications)" }}
+          className="ruf-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end"
+        >
+          {Object.values(messages).map(([el]: AnyObject) => el)}
+        </div>,
+        document.body,
+      )}
+      {createPortal(
+        <div
+          style={{ zIndex: "var(--z-notifications)" }}
+          className="ruf-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide"
+        >
+          {Object.values(toasts).map(([el]: AnyObject) => el)}
+        </div>,
+        document.body,
+      )}
+    </Fragment>
+  );
+};
diff --git a/packages/core/src/core/aside/Aside.module.css b/packages/core/src/core/aside/Aside.module.css
new file mode 100644
index 0000000..1fc4646
--- /dev/null
+++ b/packages/core/src/core/aside/Aside.module.css
@@ -0,0 +1,230 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .aside {
+    --aside-bg: color-mix(in lab, var(--fabric-bg) 95%, var(--tint));
+    --aside-border: color-mix(in lab, var(--fabric-bg) 75%, var(--tint));
+
+    background-color: var(--aside-bg);
+
+    &[data-align="start"] {
+      grid-area: side-s;
+      grid-template:
+        "head resizer" auto
+        "loader resizer" auto
+        "content resizer" 1fr / 1fr auto;
+      border-inline-end: 1px solid var(--aside-border);
+
+      & .asideHeader {
+        grid-template-areas: "icon title actions collapse";
+        grid-template-columns: auto 1fr auto auto;
+      }
+    }
+
+    &[data-align="end"] {
+      grid-area: side-e;
+      grid-template:
+        "resizer head" auto
+        "resizer loader" auto
+        "resizer content" 1fr / auto 1fr;
+      border-inline-start: 1px solid var(--aside-border);
+
+      & .asideHeader {
+        grid-template-areas: "collapse icon title actions";
+        grid-template-columns: auto auto 1fr auto;
+      }
+
+      & .asideCollapse {
+        transform: scaleX(-1);
+      }
+    }
+
+    & .asideBody {
+      grid-area: content;
+      grid-template: "head" auto "content" 1fr "foot" auto / 1fr;
+
+      & > [data-ref="content"] {
+        background-color: transparent;
+      }
+    }
+
+    & .asideHeader {
+      font-weight: 500;
+      color: theme(colors.primary.600);
+
+      &:not(:empty) {
+        border-bottom: 1px solid var(--aside-border);
+      }
+    }
+
+    & .asideTitle {
+      grid-area: title;
+    }
+
+    & .asideIcon {
+      grid-area: icon;
+    }
+
+    .asideActions {
+      grid-area: actions;
+    }
+
+    & .asideCollapse {
+      grid-area: collapse;
+
+      &:hover {
+        background-color: color-mix(in lab, var(--fabric-text) 10%, #0000);
+      }
+    }
+
+    & .asidePlaceholder {
+      z-index: 4;
+      grid-area: content;
+      background-color: var(--aside-bg);
+    }
+
+    & .asideResizer {
+      cursor: col-resize;
+
+      position: relative;
+
+      grid-area: resizer;
+
+      width: 0.25rem;
+
+      background-color: color-mix(in lab, var(--fabric-bg) 90%, var(--tint));
+
+      &::before {
+        background-color: color-mix(in lab, var(--fabric-bg) 60%, var(--tint));
+      }
+
+      &:hover {
+        background-color: color-mix(in lab, var(--fabric-bg) 60%, var(--tint));
+      }
+    }
+  }
+}
+
+@layer util {
+  .asideBody,
+  .asideHeader {
+    width: unset;
+    height: unset;
+    margin: unset;
+  }
+
+  .asideBody {
+    & > [data-ref="content"] {
+      background-color: transparent;
+    }
+  }
+
+  .aside[data-collapsed="true"] {
+    position: relative;
+    overflow: visible;
+    width: 2rem;
+
+    & .asideBody {
+      position: absolute;
+      z-index: -1;
+      inset: 0;
+
+      background-color: var(--aside-bg);
+
+      transition: transform cubic-bezier(0.4, 0, 0.2, 1) 150ms;
+    }
+
+    & .asideHeader {
+      position: absolute;
+      z-index: 5;
+      width: 2rem;
+    }
+
+    & .asideTitle {
+      position: absolute;
+      top: 1rem;
+      grid-area: unset;
+      font-size: 1rem;
+    }
+
+    .asideIcon {
+      margin-inline: 2px;
+    }
+
+    & .asideCollapse + .asideIcon,
+    & .asideResizer {
+      display: none;
+    }
+  }
+
+  [dir="ltr"] .aside[data-align="start"][data-collapsed="true"],
+  [dir="rtl"] .aside[data-align="end"][data-collapsed="true"] {
+    & .asideBody {
+      right: unset;
+      transform: translateX(-100%);
+      grid-area: unset;
+    }
+
+    & .asideTitle {
+      right: calc(2rem + 2px);
+      transform-origin: 100% 100%;
+      transform: rotate(-90deg) translateY(2rem);
+    }
+
+    & .asideCollapse {
+      transform: scaleX(-1);
+    }
+
+    &[data-flyout="true"] .asideBody {
+      z-index: 3;
+      transform: translateX(2rem);
+      box-shadow: 0 0 1rem 0 var(--fabric-shadow);
+    }
+  }
+
+  [dir="ltr"] .aside[data-align="end"][data-collapsed="true"],
+  [dir="rtl"] .aside[data-align="start"][data-collapsed="true"] {
+    & .asideBody {
+      left: unset;
+      transform: translateX(100%);
+      grid-area: unset;
+    }
+
+    & .asideTitle {
+      left: calc(2rem + 2px);
+      transform-origin: 0 100%;
+      transform: rotate(90deg) translateY(2rem);
+    }
+
+    & .asideCollapse {
+      transform: scaleX(1);
+    }
+
+    &[data-flyout="true"] .asideBody {
+      z-index: 3;
+      transform: translateX(-2rem);
+      box-shadow: 0 0 1rem 0 var(--fabric-shadow);
+    }
+  }
+}
diff --git a/packages/core/src/core/aside/Aside.tsx b/packages/core/src/core/aside/Aside.tsx
new file mode 100644
index 0000000..96face3
--- /dev/null
+++ b/packages/core/src/core/aside/Aside.tsx
@@ -0,0 +1,262 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Loading } from "../../components/animations/Animations";
+import { Icon } from "../../components/icon/Icon";
+import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
+import { usePropToggle } from "../../hooks/usePropToggle";
+import { useResize } from "../../hooks/useResize";
+import {
+  type ChildrenProp,
+  type CollapseProps,
+  type Elements,
+  type IconProps,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { ErrorBoundary } from "../boundary/ErrorBoundary";
+import classes from "./Aside.module.css";
+
+export interface AsideProps
+  extends IconProps,
+    ChildrenProp,
+    CollapseProps,
+    TestProps {
+  /**
+   * page title
+   */
+  title?: string;
+  /**
+   * align inline-end
+   */
+  align?: "start" | "end";
+  /**
+   * header actions
+   */
+  actions?: Elements<JSX.Element>;
+  /**
+   * header class
+   */
+  headerClassName?: string;
+
+  /**
+   * show loading indicator
+   */
+  loading?: boolean;
+  /**
+   * allow resize
+   */
+  resizeable?: boolean;
+  /**
+   * allow flyout with collapsed
+   */
+  flyout?: boolean;
+  /**
+   * event handler when shown
+   */
+  onFlyout?: () => void;
+
+  /**
+   * fixed width
+   */
+  width?: number | string;
+  /**
+   * max width
+   */
+  maxWidth?: number | string;
+  /**
+   * min width
+   */
+  minWidth?: number | string;
+}
+
+/**
+ * Side panel
+ */
+export const Aside = ({
+  children,
+  title,
+  icon,
+  iconBg,
+  iconColor,
+  rtlFlip,
+  headerClassName,
+  resizeable,
+  flyout,
+  onFlyout,
+  collapsed,
+  collapsable,
+  onCollapse,
+  actions,
+  loading,
+  align = "start",
+  width: wd = "20rem",
+  minWidth = "2rem",
+  maxWidth = "30vw",
+  "data-testid": testId,
+  "data-test-value": testValue,
+}: AsideProps) => {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(wd);
+  const [peek, setPeek] = useState(false);
+
+  const [isCollapsed, toggleCollapse] = usePropToggle(collapsed, onCollapse);
+
+  useEffect(() => {
+    setWidth(wd);
+  }, [wd]);
+
+  const handleResize = useRef(({ x }: { x: number }) => {
+    if (elementRef.current != null) {
+      setWidth(elementRef.current.offsetWidth + x);
+    }
+  });
+  const resizeHandleProps = useResize(handleResize.current, {
+    isReverse: align === "end",
+  });
+
+  const tryPeek = useCallback(() => {
+    if (isCollapsed) {
+      if (flyout) {
+        setPeek(!peek);
+        !peek && onFlyout?.();
+      } else {
+        void toggleCollapse();
+      }
+    }
+  }, [peek, flyout, isCollapsed, onFlyout, toggleCollapse]);
+
+  useLayoutEffectDebugger(
+    () => {
+      if (peek) {
+        const handler = (e: MouseEvent) => {
+          if (
+            (e.target as HTMLElement).closest(`[data-ref="asideBody"]`) ==
+              null &&
+            (e.target as HTMLElement).closest(
+              `[data-ref="asidePlaceholder"]`,
+            ) == null
+          ) {
+            setPeek(false);
+          }
+        };
+        document.addEventListener("mouseup", handler);
+
+        return () => document.removeEventListener("mouseup", handler);
+      }
+    },
+    [peek],
+    "Aside peek",
+  );
+
+  const widthStyles = useMemo(
+    () => ({
+      width,
+      minWidth,
+      maxWidth,
+    }),
+    [width, minWidth, maxWidth],
+  );
+
+  return (
+    <aside
+      className={classNames(classes.aside, "overflow-hidden grid")}
+      data-align={align}
+      data-flyout={peek}
+      data-collapsed={isCollapsed}
+      style={isCollapsed ? undefined : widthStyles}
+      data-testid={testId}
+      data-test-value={testValue}
+    >
+      <header
+        className={classNames(
+          classes.asideHeader,
+          headerClassName,
+          "grid area-head items-center",
+        )}
+      >
+        {title && (
+          <div
+            className={classNames(
+              classes.asideTitle,
+              "truncate py-0.5 px-1 select-none pointer-events-none",
+            )}
+          >
+            {title}
+          </div>
+        )}
+        {collapsable && (
+          <Icon
+            aria-label={isCollapsed ? "expand" : "collapse"}
+            className={classNames(classes.asideCollapse, "p-2 select-none")}
+            icon={CoreIcons.chevronLeft}
+            rtlFlip
+            onClick={toggleCollapse}
+            data-ref="asideToggle"
+          />
+        )}
+        {icon && (
+          <Icon
+            icon={icon}
+            bg={iconBg}
+            color={iconColor}
+            rtlFlip={rtlFlip}
+            className={classNames(
+              classes.asideIcon,
+              "p-1 text-lg select-none pointer-events-none",
+            )}
+          />
+        )}
+        {actions && <div className={classes.asideActions}>{actions}</div>}
+      </header>
+      {loading && <Loading />}
+      {isCollapsed && (
+        <div
+          role="none"
+          onClick={tryPeek}
+          data-ref="asidePlaceholder"
+          className={classes.asidePlaceholder}
+        />
+      )}
+      <section
+        ref={elementRef}
+        data-ref="asideBody"
+        className={classNames(classes.asideBody, "overflow-hidden grid")}
+        style={isCollapsed ? widthStyles : undefined}
+      >
+        <ErrorBoundary>{children}</ErrorBoundary>
+      </section>
+      {resizeable && (
+        <div
+          {...resizeHandleProps}
+          className={classNames(
+            classes.asideResizer,
+            "before:absolute before:max-h-[80%] before:h-40 before:w-1 before:top-1/2 before:-translate-y-1/2",
+          )}
+        />
+      )}
+    </aside>
+  );
+};
diff --git a/packages/core/src/core/boundary/ErrorBoundary.module.css b/packages/core/src/core/boundary/ErrorBoundary.module.css
new file mode 100644
index 0000000..b51432e
--- /dev/null
+++ b/packages/core/src/core/boundary/ErrorBoundary.module.css
@@ -0,0 +1,65 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .errorBoundary {
+    grid-area: inherit;
+    align-self: flex-start;
+
+    max-height: calc(100% - 2rem);
+    margin: 1rem;
+
+    background-color: theme(colors.danger.500);
+    background-image: repeating-linear-gradient(
+      135deg,
+      rgba(255 255 255 / 50%) 0 4px,
+      rgba(255 255 255 / 20%) 4px 8px
+    );
+
+    & .boundaryContent {
+      grid-template: "icon message" auto "detail detail" auto / auto 1fr;
+      background-color: var(--fabric-bg);
+    }
+
+    & .boundaryIcon {
+      grid-area: icon;
+    }
+
+    & .boundaryMessage {
+      grid-area: message;
+    }
+
+    & .boundaryDetail {
+      grid-area: detail;
+      grid-template-rows: auto 1fr;
+
+      & .boundaryLink {
+        /* might add styles later */
+      }
+    }
+
+    & .boundaryStack {
+      /* might add styles later */
+    }
+  }
+}
diff --git a/packages/core/src/core/boundary/ErrorBoundary.tsx b/packages/core/src/core/boundary/ErrorBoundary.tsx
new file mode 100644
index 0000000..1dc0ba5
--- /dev/null
+++ b/packages/core/src/core/boundary/ErrorBoundary.tsx
@@ -0,0 +1,146 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useLogger } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Component } from "react";
+import { useTranslation } from "react-i18next";
+import { Fragment } from "react/jsx-runtime";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import { usePropToggle } from "../../hooks/usePropToggle";
+import { type ChildrenProp } from "../../types";
+import classes from "./ErrorBoundary.module.css";
+import { ErrorIcon } from "./ErrorIcon";
+import { useGlobals } from "../../context/Global";
+
+const DefaultError = ({ error }: { error?: string }) => {
+  const { t } = useTranslation("core");
+  return (
+    <Fragment>
+      <h6>{t("error.title")}</h6>
+      <p className="line-clamp-4">{error}</p>
+    </Fragment>
+  );
+};
+
+const ErrorMessage = ({ error, errorElement }: KeyValue) => {
+  const { errorElement: globalError } = useGlobals();
+  const EE = useMemoDebugger(
+    () => errorElement ?? globalError ?? DefaultError,
+    [],
+    "ErrorBoundary element",
+  );
+  return (
+    <Fragment>
+      <ErrorIcon />
+      <div className={classNames(classes.boundaryMessage, "p-2")}>
+        <EE error={error} />
+      </div>
+    </Fragment>
+  );
+};
+
+const ErrorStack = ({ error, stack }: KeyValue) => {
+  const [show, toggleShow] = usePropToggle(false);
+  useLogger().error(error, {}, stack);
+  return (
+    <div className={classNames(classes.boundaryDetail, "overflow-hidden grid")}>
+      <div
+        className={classNames(
+          classes.boundaryLink,
+          "px-2 py-1 text-xs text-end",
+        )}
+      >
+        <span role="link" tabIndex={0} className="link" onClick={toggleShow}>
+          {show ? "Hide Detail" : "Show Detail"}
+        </span>
+      </div>
+      {show && (
+        <div
+          className={classNames(
+            classes.boundaryStack,
+            "overflow-auto p-2 text-xs border-t",
+          )}
+        >
+          <pre className="whitespace-pre-wrap">{stack}</pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * An error boundary wrapper higher-order component designed to provide consistent error display across the application will trap runtime errors
+ */
+export class ErrorBoundary extends Component<
+  {
+    /**
+     * custom error display
+     */
+    errorElement?: React.ComponentType<{ error?: string }>;
+  } & ChildrenProp,
+  { hasError: boolean; error?: string; stack?: AnyObject }
+> {
+  public static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error: error.message, stack: error.stack };
+  }
+
+  constructor(props: AnyObject) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  public componentDidCatch(error: Error) {
+    this.setState({ hasError: true, error: error.message, stack: error.stack });
+  }
+
+  render() {
+    const env = process.env.NODE_ENV;
+    if (this.state.hasError) {
+      const { errorElement: E } = this.props;
+      // You can render any custom fallback UI
+      return (
+        <div
+          className={classNames(
+            classes.errorBoundary,
+            "grid grid-rows-1 overflow-hidden p-0.5 rounded-capped",
+          )}
+        >
+          <div
+            className={classNames(
+              classes.boundaryContent,
+              "overflow-hidden grid rounded-capped",
+            )}
+          >
+            <ErrorMessage error={this.state.error} errorElement={E} />
+            {env === "development" && (
+              <ErrorStack error={this.state.error} stack={this.state.stack} />
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/packages/core/src/core/boundary/ErrorIcon.tsx b/packages/core/src/core/boundary/ErrorIcon.tsx
new file mode 100644
index 0000000..3f1224c
--- /dev/null
+++ b/packages/core/src/core/boundary/ErrorIcon.tsx
@@ -0,0 +1,50 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import classes from "./ErrorBoundary.module.css";
+
+export const ErrorIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 64 64"
+    className={classNames(classes.boundaryIcon, "size-6 m-2")}
+  >
+    <path
+      fill="#808080"
+      d="M64 32c0 17.673-14.327 32-32 32s-32-14.327-32-32 14.327-32 32-32 32 14.327 32 32z"
+    />
+    <path
+      fill="#fff"
+      d="M63.5 32c0 17.397-14.103 31.5-31.5 31.5s-31.5-14.103-31.5-31.5 14.103-31.5 31.5-31.5 31.5 14.103 31.5 31.5z"
+    />
+    <path
+      fill="#f44336"
+      d="M60 32c0 15.464-12.536 28-28 28s-28-12.536-28-28c0-15.464 12.536-28 28-28s28 12.536 28 28z"
+    />
+    <path
+      fill="#fff"
+      d="M50.667 35.733h-37.333c-1.031 0-1.867-0.835-1.867-1.867v-3.733c0-1.031 0.835-1.867 1.867-1.867h37.333c1.031 0 1.867 0.835 1.867 1.867v3.733c0 1.031-0.835 1.867-1.867 1.867z"
+    />
+  </svg>
+);
diff --git a/packages/core/src/core/content/Content.module.css b/packages/core/src/core/content/Content.module.css
new file mode 100644
index 0000000..64debac
--- /dev/null
+++ b/packages/core/src/core/content/Content.module.css
@@ -0,0 +1,40 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .content {
+    --fabric-content: color-mix(in lab, var(--fabric-bg) 97%, var(--tint));
+
+    overflow: auto;
+    padding: 1rem;
+    background-color: var(--fabric-content);
+  }
+}
+
+@layer util {
+  .content {
+    width: unset;
+    height: unset;
+    margin: unset;
+  }
+}
diff --git a/packages/core/src/core/content/Content.tsx b/packages/core/src/core/content/Content.tsx
new file mode 100644
index 0000000..afd31c5
--- /dev/null
+++ b/packages/core/src/core/content/Content.tsx
@@ -0,0 +1,91 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { useImperativeHandle } from "react";
+import { useDebounce } from "../../hooks/useDebounce";
+import { useResizeObserver } from "../../hooks/useResizeObserver";
+import {
+  type ChildrenProp,
+  type CssProp,
+  type PositionObject,
+  type RefProp,
+  type SizeObject,
+  type TestProps,
+} from "../../types";
+import { ErrorBoundary } from "../boundary/ErrorBoundary";
+import classes from "./Content.module.css";
+
+export interface ContentProps
+  extends ChildrenProp,
+    CssProp,
+    RefProp,
+    TestProps {
+  /**
+   * scroll vevent handler
+   */
+  onScroll?: (event: PositionObject) => void;
+  /**
+   * scroll vevent handler
+   */
+  onResize?: (event: SizeObject) => void;
+}
+
+/**
+ * Scrollable content element
+ */
+export const Content = ({
+  ref,
+  children,
+  className,
+  onScroll,
+  onResize,
+  "data-testid": testId,
+  "data-test-value": testValue,
+}: ContentProps) => {
+  const resizeHandle = useResizeObserver(onResize);
+  const scrollHandler = useDebounce(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      onScroll?.({
+        // @ts-expect-error ignore
+        left: e.target.scrollLeft,
+        // @ts-expect-error ignore
+        top: e.target.scrollTop,
+      });
+    },
+    [onScroll],
+  );
+  useImperativeHandle(ref, () => resizeHandle.current as AnyObject, []);
+  return (
+    <section
+      data-ref="content"
+      data-testid={testId}
+      data-test-value={testValue}
+      ref={resizeHandle}
+      onScroll={scrollHandler}
+      className={classNames(classes.content, "area-content", className)}
+    >
+      <ErrorBoundary>{children}</ErrorBoundary>
+    </section>
+  );
+};
diff --git a/packages/core/src/core/headfoot/HeadFoot.module.css b/packages/core/src/core/headfoot/HeadFoot.module.css
new file mode 100644
index 0000000..6b7ca2d
--- /dev/null
+++ b/packages/core/src/core/headfoot/HeadFoot.module.css
@@ -0,0 +1,38 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .headfoot {
+    .buttonWrapper + .buttonWrapper {
+      margin-inline-start: 0.25rem;
+    }
+  }
+}
+
+@layer util {
+  .headfoot {
+    width: unset;
+    height: unset;
+    margin: unset;
+  }
+}
diff --git a/packages/core/src/core/headfoot/HeadFoot.tsx b/packages/core/src/core/headfoot/HeadFoot.tsx
new file mode 100644
index 0000000..a221417
--- /dev/null
+++ b/packages/core/src/core/headfoot/HeadFoot.tsx
@@ -0,0 +1,111 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { useMemoDebugger } from "../../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorWithGrays,
+  type CssProp,
+  type TestProps,
+} from "../../types";
+import { getBgClass, getColor, getColorClass } from "../../utils";
+import classes from "./HeadFoot.module.css";
+
+interface BaseProps extends CssProp, AriaProps, ChildrenProp, TestProps {
+  /**
+   * background color
+   */
+  bg?: ColorWithGrays | string;
+  /**
+   * background color
+   */
+  color?: ColorWithGrays | string;
+}
+
+type DefaultProps = BaseProps & { flex?: false };
+type FlexProps = BaseProps & {
+  flex: true;
+  align?: "start" | "end" | "center" | "stretch";
+  justify?: "start" | "end" | "center" | "between";
+};
+
+export type HeadFootProps = DefaultProps | FlexProps;
+
+const HeadFoot = ({
+  as: E,
+  children,
+  className,
+  bg,
+  color,
+  flex,
+  area,
+  align = "center",
+  justify = "start",
+  ...aria
+}: KeyValue & { as: "header" | "footer" }) => {
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (bg) {
+        s.backgroundColor = getColor(bg);
+      }
+      if (color) {
+        s.color = getColor(color);
+      }
+      return s;
+    },
+    [bg],
+    "HeadFoot styles",
+  );
+
+  return (
+    <E
+      className={classNames(
+        classes.headfoot,
+        className,
+        bg && getBgClass(bg),
+        color && getColorClass(color),
+        area === "head" ? "area-head" : "area-foot",
+        `leading-none`,
+        flex && "flex flex-nowrap gap-1",
+        align && `items-${align}`,
+        justify && `justify-${justify}`,
+      )}
+      style={styles}
+      {...aria}
+    >
+      {children}
+    </E>
+  );
+};
+
+export const Header = (props: HeadFootProps) => (
+  <HeadFoot as="header" area="head" {...props} />
+);
+
+export const Footer = (props: HeadFootProps) => (
+  <HeadFoot as="footer" area="foot" {...props} />
+);
diff --git a/packages/core/src/core/index.ts b/packages/core/src/core/index.ts
new file mode 100644
index 0000000..b907176
--- /dev/null
+++ b/packages/core/src/core/index.ts
@@ -0,0 +1,32 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export { Aside } from "./aside/Aside";
+export { ErrorBoundary } from "./boundary/ErrorBoundary";
+export { Content } from "./content/Content";
+export { Footer, Header } from "./headfoot/HeadFoot";
+export { Page } from "./page/Page";
+export { Col, Container, Row } from "./responsive/Responsive";
+export { Section } from "./section/Section";
+export { ThemeProvider } from "./theme/ThemeProvider";
+export { Viewport } from "./viewport/Viewport";
diff --git a/packages/core/src/core/page/Page.module.css b/packages/core/src/core/page/Page.module.css
new file mode 100644
index 0000000..77122c4
--- /dev/null
+++ b/packages/core/src/core/page/Page.module.css
@@ -0,0 +1,46 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .page {
+    --fabric-page: color-mix(in lab, var(--fabric-bg) 94%, var(--tint));
+    --fabric-page-title: color-mix(in lab, var(--fabric-bg) 90%, var(--tint));
+
+    grid-template: "title title title" auto "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    background-color: var(--fabric-page);
+
+    .pageTitle {
+      grid-area: title;
+      color: theme(colors.primary.600);
+      background-color: var(--fabric-page-title);
+    }
+  }
+}
+
+@layer util {
+  .pageTitle {
+    width: unset;
+    height: unset;
+    margin: unset;
+  }
+}
diff --git a/packages/core/src/core/page/Page.tsx b/packages/core/src/core/page/Page.tsx
new file mode 100644
index 0000000..bc2f098
--- /dev/null
+++ b/packages/core/src/core/page/Page.tsx
@@ -0,0 +1,100 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { Loading } from "../../components/animations/Animations";
+import { Icon } from "../../components/icon/Icon";
+import { type ChildrenProp, type IconProps, type TestProps } from "../../types";
+import classes from "./Page.module.css";
+
+export interface PageProps extends IconProps, ChildrenProp, TestProps {
+  /**
+   * page title
+   */
+  title?: string;
+  /**
+   * title element className
+   */
+  titleClassName?: string;
+  /**
+   * paper style drop shadow
+   */
+  paper?: boolean;
+  /**
+   * loading indicator
+   */
+  loading?: boolean;
+}
+
+/**
+ * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
+ */
+export const Page = ({
+  children,
+  paper,
+  title,
+  titleClassName,
+  icon,
+  rtlFlip,
+  iconBg,
+  iconColor,
+  loading,
+  "data-testid": testId,
+  "data-test-value": testValue,
+}: PageProps) => {
+  return (
+    <div
+      data-testid={testId}
+      data-test-value={testValue}
+      className={classNames(
+        classes.page,
+        "overflow-hidden grid area-content",
+        paper && "shadow-paper m-[6px] rounded-capped",
+      )}
+    >
+      {title && (
+        <div
+          data-ref="pageTitle"
+          className={classNames(
+            classes.pageTitle,
+            "select-none flex gap-1 items-center justify-center px-1 py-0.5 font-medium text-center",
+            titleClassName,
+          )}
+        >
+          {icon && (
+            <Icon
+              icon={icon}
+              size="1.25em"
+              rtlFlip={rtlFlip}
+              bg={iconBg}
+              color={iconColor}
+            />
+          )}
+          {title}
+        </div>
+      )}
+      {loading && <Loading />}
+      {children}
+    </div>
+  );
+};
diff --git a/packages/core/src/core/responsive/Responsive.module.css b/packages/core/src/core/responsive/Responsive.module.css
new file mode 100644
index 0000000..346ff94
--- /dev/null
+++ b/packages/core/src/core/responsive/Responsive.module.css
@@ -0,0 +1,85 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .row {
+    margin: calc(-0.5 * var(--gutter));
+
+    & + .row {
+      margin-top: calc(0.5 * var(--gutter));
+    }
+  }
+
+  .col {
+    flex: 0 0 auto;
+    max-width: calc((12 / 12) * 100% - var(--gutter, 0px));
+    margin: calc(0.5 * var(--gutter));
+
+    &.stretchContent > * {
+      min-width: 100%;
+      min-height: 100%;
+    }
+  }
+
+  [data-gutter="0"] {
+    &.container,
+    &.row {
+      --gutter: 0px;
+    }
+  }
+
+  [data-gutter="xs"] {
+    &.container,
+    &.row {
+      --gutter: 2px;
+    }
+  }
+
+  [data-gutter="sm"] {
+    &.container,
+    &.row {
+      --gutter: 0.25rem;
+    }
+  }
+
+  [data-gutter="md"] {
+    &.container,
+    &.row {
+      --gutter: 0.75rem;
+    }
+  }
+
+  [data-gutter="lg"] {
+    &.container,
+    &.row {
+      --gutter: 1rem;
+    }
+  }
+
+  [data-gutter="xl"] {
+    &.container,
+    &.row {
+      --gutter: 1.5rem;
+    }
+  }
+}
diff --git a/packages/core/src/core/responsive/Responsive.tsx b/packages/core/src/core/responsive/Responsive.tsx
new file mode 100644
index 0000000..10926f3
--- /dev/null
+++ b/packages/core/src/core/responsive/Responsive.tsx
@@ -0,0 +1,172 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type CssProp,
+  type SizeTypeWithZero,
+  type TestProps,
+} from "../../types";
+import classes from "./Responsive.module.css";
+
+export interface ContainerProps
+  extends AriaProps,
+    CssProp,
+    ChildrenProp,
+    TestProps {
+  /**
+   * use full width
+   */
+  fullWidth?: boolean;
+  /**
+   * gutter size
+   */
+  gutter?: SizeTypeWithZero;
+}
+
+export interface RowProps extends AriaProps, CssProp, ChildrenProp, TestProps {
+  /**
+   * no wrapping
+   */
+  noWrap?: boolean;
+  /**
+   * gutter size
+   */
+  gutter?: SizeTypeWithZero;
+  /**
+   * flex orientation
+   */
+  orient?: "row" | "row-reverse" | "col" | "col-reverse";
+  /**
+   * align items
+   */
+  align?: "start" | "end" | "center" | "stretch";
+  /**
+   * justify items
+   */
+  justify?: "start" | "end" | "center" | "between";
+}
+
+export interface ColProps
+  extends AriaProps,
+    CssProp,
+    TestProps,
+    Partial<ChildrenProp> {
+  /**
+   * align items
+   */
+  align?: "start" | "end" | "center" | "stretch";
+  /**
+   * column flex
+   */
+  flex?: "auto" | "fill" | "full";
+  /**
+   * stretch inner content
+   */
+  stretchContent?: boolean;
+}
+
+/**
+ * Responsive layout container
+ */
+export const Container = ({
+  children,
+  fullWidth,
+  className,
+  gutter,
+  ...aria
+}: ContainerProps) => {
+  return (
+    <div
+      className={classNames(
+        classes.container,
+        className,
+        !fullWidth && "container mx-auto",
+      )}
+      data-gutter={gutter}
+      {...aria}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const Row = ({
+  children,
+  gutter,
+  noWrap,
+  orient,
+  align = "stretch",
+  justify = "start",
+  className,
+  ...aria
+}: RowProps) => {
+  return (
+    <div
+      className={classNames(
+        classes.row,
+        className,
+        "flex",
+        orient === "row" && "flex-row",
+        orient === "col" && "flex-col",
+        orient === "row-reverse" && "flex-row-reverse",
+        orient === "col-reverse" && "flex-col-reverse",
+        noWrap ? "flex-nowrap" : "flex-wrap",
+        `justify-${justify}`,
+        `items-${align}`,
+      )}
+      data-gutter={gutter}
+      {...aria}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const Col = ({
+  children,
+  flex,
+  align,
+  className,
+  stretchContent,
+  ...aria
+}: ColProps) => {
+  return (
+    <div
+      className={classNames(
+        classes.col,
+        className,
+        stretchContent && classes.stretchContent,
+        flex === "auto" && "flex-content",
+        flex === "fill" && "flex-1",
+        flex === "full" && "flex-full",
+        align && `self-${align}`,
+      )}
+      {...aria}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/packages/core/src/core/section/Section.module.css b/packages/core/src/core/section/Section.module.css
new file mode 100644
index 0000000..50ce016
--- /dev/null
+++ b/packages/core/src/core/section/Section.module.css
@@ -0,0 +1,28 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .section {
+    grid-template: "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+  }
+}
diff --git a/packages/core/src/core/section/Section.tsx b/packages/core/src/core/section/Section.tsx
new file mode 100644
index 0000000..c26dad5
--- /dev/null
+++ b/packages/core/src/core/section/Section.tsx
@@ -0,0 +1,44 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { type ChildrenProp } from "../../types";
+import { ErrorBoundary } from "../boundary/ErrorBoundary";
+import classes from "./Section.module.css";
+
+/**
+ * The section component provides a structured layout used within a page to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
+ */
+export const Section = ({ children }: ChildrenProp) => {
+  return (
+    <div
+      data-ref="section"
+      className={classNames(
+        classes.section,
+        "grid area-content overflow-hidden",
+      )}
+    >
+      <ErrorBoundary>{children}</ErrorBoundary>
+    </div>
+  );
+};
diff --git a/packages/core/src/core/theme/Theme.module.css b/packages/core/src/core/theme/Theme.module.css
new file mode 100644
index 0000000..3b9b64f
--- /dev/null
+++ b/packages/core/src/core/theme/Theme.module.css
@@ -0,0 +1,30 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .themeProvider {
+    & > * {
+      background-color: theme(backgroundColor.base);
+    }
+  }
+}
diff --git a/packages/core/src/core/theme/ThemeProvider.tsx b/packages/core/src/core/theme/ThemeProvider.tsx
new file mode 100644
index 0000000..702b68c
--- /dev/null
+++ b/packages/core/src/core/theme/ThemeProvider.tsx
@@ -0,0 +1,108 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isColor } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { type ChildrenProp } from "../../types";
+import classes from "./Theme.module.css";
+
+export interface ThemeProps {
+  /**
+   * light/dark color scheme
+   */
+  colorScheme?: "light" | "dark";
+  /**
+   * branding css className
+   *
+   * .branding {
+   *  --primary: #color;
+   *  --accent: #color;
+   *  --tint: #color;
+   * }
+   */
+  branding?: string;
+  /**
+   * primary color
+   */
+  primaryColor?: string;
+  /**
+   * accent color
+   */
+  accentColor?: string;
+  /**
+   * tint mix color
+   */
+  tintColor?: string;
+  /**
+   * component rounding
+   */
+  rounding?: "minimal" | "normal" | "full";
+}
+
+/**
+ * Theme override
+ */
+export const ThemeProvider = ({
+  children,
+  branding,
+  primaryColor,
+  accentColor,
+  tintColor,
+  colorScheme,
+  rounding,
+}: ThemeProps & ChildrenProp) => {
+  const styles = useMemo(() => {
+    const ret: KeyValue = {};
+    if (primaryColor && isColor(primaryColor)) {
+      ret["--primary"] = primaryColor;
+    }
+    if (primaryColor && !isColor(primaryColor)) {
+      ret["--primary"] = `var(--${primaryColor})`;
+    }
+    if (accentColor && isColor(accentColor)) {
+      ret["--accent"] = accentColor;
+    }
+    if (accentColor && !isColor(accentColor)) {
+      ret["--accent"] = `var(--${accentColor})`;
+    }
+    if (tintColor && isColor(tintColor)) {
+      ret["--tint"] = tintColor;
+    }
+    if (tintColor && !isColor(tintColor)) {
+      ret["--tint"] = `var(--${tintColor})`;
+    }
+    return ret;
+  }, [primaryColor, accentColor, tintColor]);
+
+  return (
+    <div
+      style={styles}
+      data-color-scheme={colorScheme}
+      data-rounding={rounding}
+      className={classNames(classes.themeProvider, "contents", branding)}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/packages/core/src/core/viewport/Viewport.module.css b/packages/core/src/core/viewport/Viewport.module.css
new file mode 100644
index 0000000..5d09b78
--- /dev/null
+++ b/packages/core/src/core/viewport/Viewport.module.css
@@ -0,0 +1,32 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .viewport {
+    --fabric-viewport: color-mix(in lab, var(--fabric-bg) 76%, var(--tint));
+
+    grid-template: "head head head" auto "crumbbar crumbbar crumbbar" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    color: var(--fabric-text);
+    background-color: var(--fabric-viewport);
+  }
+}
diff --git a/packages/core/src/core/viewport/Viewport.tsx b/packages/core/src/core/viewport/Viewport.tsx
new file mode 100644
index 0000000..3ff7d62
--- /dev/null
+++ b/packages/core/src/core/viewport/Viewport.tsx
@@ -0,0 +1,43 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { type PropsWithChildren } from "react";
+import classes from "./Viewport.module.css";
+
+/**
+ * The application viewport is the main container that defines the visible area where content is displayed and interacted with.
+ */
+export const Viewport = ({ children }: PropsWithChildren) => {
+  return (
+    <div
+      data-ref="viewport"
+      className={classNames(
+        classes.viewport,
+        "grid overflow-hidden absolute inset-0",
+      )}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/packages/core/src/hooks/useClientService.tsx b/packages/core/src/hooks/useClientService.tsx
new file mode 100644
index 0000000..e6926c5
--- /dev/null
+++ b/packages/core/src/hooks/useClientService.tsx
@@ -0,0 +1,29 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export const useClientService = (
+  clientApi: AnyObject,
+  serverMock?: AnyObject,
+) => {
+  return typeof window === "undefined" ? serverMock : clientApi;
+};
diff --git a/packages/core/src/hooks/useControlledValue.tsx b/packages/core/src/hooks/useControlledValue.tsx
new file mode 100644
index 0000000..45e702e
--- /dev/null
+++ b/packages/core/src/hooks/useControlledValue.tsx
@@ -0,0 +1,43 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useDeferredValue, useState } from "react";
+import { useEffectDebugger } from "./useEffectDebugger";
+
+export const useControlledValue = <T extends AnyObject = string>(
+  value: T,
+  defaultValue: T,
+) => {
+  const [currentValue, updateValue] = useState<T>(defaultValue);
+  const deferred = useDeferredValue(value);
+
+  useEffectDebugger(
+    () => {
+      updateValue(deferred ?? defaultValue);
+    },
+    [deferred],
+    "useControlledValue change",
+  );
+
+  return { currentValue, updateValue };
+};
diff --git a/packages/core/src/hooks/useDebounce.ts b/packages/core/src/hooks/useDebounce.ts
new file mode 100644
index 0000000..24f2c7a
--- /dev/null
+++ b/packages/core/src/hooks/useDebounce.ts
@@ -0,0 +1,60 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useRef } from "react";
+import { useMemoDebugger } from "./useEffectDebugger";
+
+export const useDebounce = (
+  callback: undefined | ((...rest: AnyObject) => AnyObject),
+  deps: AnyObject[],
+  delay: number = 100,
+) => {
+  const timerRef = useRef<AnyObject>();
+
+  const cb = useMemoDebugger(
+    () => {
+      if (typeof window !== "undefined") {
+        window.clearTimeout(timerRef.current);
+      }
+      const fn = (...args: AnyObject) => {
+        if (typeof window !== "undefined") {
+          window.clearTimeout(timerRef.current);
+          timerRef.current = window.setTimeout(
+            () => callback?.(...args),
+            delay,
+          );
+        }
+      };
+      fn.cancel = () => {
+        if (typeof window !== "undefined") {
+          clearTimeout(timerRef.current);
+        }
+      };
+      return fn;
+    },
+    deps,
+    "useDebounce",
+  );
+
+  return cb;
+};
diff --git a/packages/core/src/hooks/useEffectDebugger.ts b/packages/core/src/hooks/useEffectDebugger.ts
new file mode 100644
index 0000000..740defa
--- /dev/null
+++ b/packages/core/src/hooks/useEffectDebugger.ts
@@ -0,0 +1,152 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+import { useLogger } from "@react-fabric/utilities";
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  type DependencyList,
+  type EffectCallback,
+} from "react";
+
+const loggerM = useLogger("useMemoDebugger");
+const loggerE = useLogger("useEffectDebugger");
+const loggerLE = useLogger("useLayoutEffectDebugger");
+
+const compareInputs = (
+  oldInputs: DependencyList,
+  newInputs: DependencyList,
+  prefix: string,
+  logger: ReturnType<typeof useLogger>,
+) => {
+  if (
+    process.env.NODE_ENV === "production" &&
+    typeof window !== "undefined" &&
+    // @ts-expect-error ignore
+    window.DEBUG_HOOKS !== true
+  )
+    return;
+
+  // Edge-case: different array lengths
+  if (oldInputs.length !== newInputs.length) {
+    // Not helpful to compare item by item, so just output the whole array
+    logger.debug(
+      "Deps have a different length",
+      { process: prefix },
+      oldInputs.length,
+      newInputs.length,
+    );
+    return;
+  }
+
+  // Compare individual items
+  oldInputs.forEach((oldInput: AnyObject, index) => {
+    const newInput: AnyObject = newInputs[index];
+    if (oldInput !== newInput) {
+      logger.debug(
+        `Dep [${index}] has a different value`,
+        { process: prefix },
+        oldInput?.type?.name ??
+          oldInput?.tagName ??
+          oldInput?.name ??
+          oldInput?.substr?.(0, 24) ??
+          oldInput,
+        newInput?.type?.name ??
+          newInput?.tagName ??
+          newInput?.name ??
+          newInput?.substr?.(0, 24) ??
+          newInput,
+      );
+    }
+  });
+};
+
+export const useMemoDebugger = <T>(
+  func: () => T,
+  inputs: DependencyList,
+  prefix: string,
+): T => {
+  // Using a ref to hold the inputs from the previous run (or same run for initial run
+  const oldInputsRef = useRef(inputs);
+  return useMemo<T>(() => {
+    // Get the old inputs
+    const oldInputs = oldInputsRef.current;
+
+    // Compare the old inputs to the current inputs
+    compareInputs(oldInputs, inputs, prefix, loggerM);
+
+    // Save the current inputs
+    oldInputsRef.current = inputs;
+
+    // Execute wrapped effect
+    return func();
+  }, inputs);
+};
+
+export const useEffectDebugger = (
+  func: EffectCallback,
+  inputs: DependencyList,
+  prefix: string,
+) => {
+  // Using a ref to hold the inputs from the previous run (or same run for initial run
+  const oldInputsRef = useRef(inputs);
+  useEffect(() => {
+    // Get the old inputs
+    const oldInputs = oldInputsRef.current;
+
+    // Compare the old inputs to the current inputs
+    compareInputs(oldInputs, inputs, prefix, loggerE);
+
+    // Save the current inputs
+    oldInputsRef.current = inputs;
+
+    // Execute wrapped effect
+    return func();
+  }, inputs);
+};
+
+export const useLayoutEffectDebugger = (
+  func: EffectCallback,
+  inputs: DependencyList,
+  prefix: string,
+) => {
+  // Using a ref to hold the inputs from the previous run (or same run for initial run
+  const oldInputsRef = useRef(inputs);
+  useLayoutEffect(() => {
+    // Get the old inputs
+    const oldInputs = oldInputsRef.current;
+
+    // Compare the old inputs to the current inputs
+    compareInputs(oldInputs, inputs, prefix, loggerLE);
+
+    // Save the current inputs
+    oldInputsRef.current = inputs;
+
+    // Execute wrapped effect
+    return func();
+  }, inputs);
+};
diff --git a/packages/core/src/hooks/useIsDark.ts b/packages/core/src/hooks/useIsDark.ts
new file mode 100644
index 0000000..b978bf5
--- /dev/null
+++ b/packages/core/src/hooks/useIsDark.ts
@@ -0,0 +1,50 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useCallback, useState } from "react";
+import { useLayoutEffectDebugger } from "./useEffectDebugger";
+
+export const useIsDark = () => {
+  const [isDark, setDark] = useState(false);
+  const checkTheme = useCallback(() => {
+    const [r] = getComputedStyle(
+      document.documentElement,
+    ).backgroundColor.match(/\d?\d?\d/g) as AnyObject;
+    setDark(+r < 50);
+  }, []);
+  useLayoutEffectDebugger(
+    () => {
+      if (MutationObserver) {
+        const ob = new MutationObserver(checkTheme);
+        ob.observe(document.documentElement, { attributes: true });
+        checkTheme();
+        return () => {
+          ob.disconnect();
+        };
+      }
+    },
+    [],
+    "useIsDark",
+  );
+  return isDark;
+};
diff --git a/packages/core/src/hooks/useIsRtl.ts b/packages/core/src/hooks/useIsRtl.ts
new file mode 100755
index 0000000..41534b0
--- /dev/null
+++ b/packages/core/src/hooks/useIsRtl.ts
@@ -0,0 +1,46 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLayoutEffectDebugger } from "./useEffectDebugger";
+
+export const useIsRtl = () => {
+  const { i18n } = useTranslation("core");
+  const [isRtl, setIsRtl] = useState(false);
+
+  /** ***************** update RTL flag on i18n locale change *******************/
+  useLayoutEffectDebugger(
+    () => {
+      try {
+        setIsRtl(i18n.dir() === "rtl");
+      } catch {
+        //
+      }
+    },
+    [i18n.language],
+    "useIsRtl",
+  );
+
+  return isRtl;
+};
diff --git a/packages/core/src/hooks/useNavigator.tsx b/packages/core/src/hooks/useNavigator.tsx
new file mode 100644
index 0000000..48f1739
--- /dev/null
+++ b/packages/core/src/hooks/useNavigator.tsx
@@ -0,0 +1,54 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useCallback, useMemo, useState } from "react";
+
+export const useNavigator = (totalCount = 0, defaultIndex = 0) => {
+  const [currentIndex, setCurrentIndex] = useState(defaultIndex);
+  const onNavigate = useCallback(
+    (dir: 1 | -1) => {
+      if (dir === -1) {
+        setCurrentIndex(currentIndex > 0 ? currentIndex - 1 : totalCount - 1);
+      }
+      if (dir === 1) {
+        setCurrentIndex(currentIndex + 1 < totalCount ? currentIndex + 1 : 0);
+      }
+    },
+    [currentIndex, totalCount],
+  );
+  const headLabel = useMemo(
+    () => (
+      <span className="text-muted leading-none">
+        {currentIndex + 1}/{totalCount}
+      </span>
+    ),
+    [currentIndex, totalCount],
+  );
+
+  return {
+    headLabel,
+    onNavigate,
+    currentIndex,
+    setCurrentIndex,
+  };
+};
diff --git a/packages/core/src/hooks/useOverlayService.tsx b/packages/core/src/hooks/useOverlayService.tsx
new file mode 100644
index 0000000..fa3361f
--- /dev/null
+++ b/packages/core/src/hooks/useOverlayService.tsx
@@ -0,0 +1,51 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useState, type FC, type ReactNode } from "react";
+
+type OverlayComponent = FC<{
+  onClose: (args?: AnyObject) => void;
+  [key: string]: AnyObject;
+}>;
+
+export const useOverlayService = (
+  ModalOrFlyout: OverlayComponent,
+): [
+  Overlay: ReactNode | null,
+  openOverlay: (props?: KeyValue) => Promise<AnyObject>,
+] => {
+  const [Overlay, setOverlay] = useState<ReactNode | null>(null);
+
+  const openOverlay = async ({ onClose, ...props }: KeyValue = {}) => {
+    return await new Promise((resolve) => {
+      const handleClose = (args: AnyObject) => {
+        setOverlay(null);
+        resolve(args);
+        onClose?.(args);
+      };
+      setOverlay(<ModalOrFlyout {...props} onClose={handleClose} />);
+    });
+  };
+
+  return [Overlay, openOverlay];
+};
diff --git a/packages/core/src/hooks/usePropToggle.ts b/packages/core/src/hooks/usePropToggle.ts
new file mode 100644
index 0000000..3d1c5b4
--- /dev/null
+++ b/packages/core/src/hooks/usePropToggle.ts
@@ -0,0 +1,61 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useCallback, useRef, useState, type RefObject } from "react";
+import { useLayoutEffectDebugger } from "./useEffectDebugger";
+
+/**
+ * hook to control boolean props
+ * @param isOn (is prop true)
+ * @param callback (optional callback)
+ * @param key (optional key to pass to callback)
+ * @returns
+ */
+export const usePropToggle = (
+  isOn = false,
+  onToggle?: (is: boolean, key?: string) => unknown,
+  key?: string,
+): [boolean, () => void, RefObject<boolean>] => {
+  const toggleRef = useRef(isOn);
+  const [toggleOn, setToggleOn] = useState(isOn);
+
+  /** ***************** update toggle state on change *******************/
+  useLayoutEffectDebugger(
+    () => {
+      toggleRef.current = isOn;
+      setToggleOn(isOn);
+    },
+    [isOn],
+    "usePropToggle",
+  );
+
+  /** ***************** toggle handler *******************/
+  const doToggle = useCallback(() => {
+    if (onToggle?.(!toggleOn, key) !== false) {
+      toggleRef.current = !toggleOn;
+      setToggleOn(!toggleOn);
+    }
+  }, [toggleOn, onToggle, key]);
+
+  return [toggleOn, doToggle, toggleRef];
+};
diff --git a/packages/core/src/hooks/useResize.ts b/packages/core/src/hooks/useResize.ts
new file mode 100644
index 0000000..d912d2d
--- /dev/null
+++ b/packages/core/src/hooks/useResize.ts
@@ -0,0 +1,90 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useCallback, useRef, type RefObject } from "react";
+import { useIsRtl } from "./useIsRtl";
+
+interface Options {
+  /**
+   * is vertical resize
+   */
+  isReverse?: boolean;
+  /**
+   * is vertical resize
+   */
+  isVertical?: boolean;
+  /**
+   * callback on drag start
+   */
+  onStart?: () => void;
+  /**
+   * callback on drag end
+   */
+  onEnd?: () => void;
+}
+
+export const useResize = <T extends HTMLElement = HTMLDivElement>(
+  onResize: (diff: { x: number; y: number }) => void,
+  { isReverse = false, isVertical = false, onStart, onEnd }: Options,
+): { ref: RefObject<T>; onMouseDown: React.MouseEventHandler } => {
+  const refEl = useRef<T>(null);
+  const isRtl = useIsRtl();
+
+  const onResizing = useCallback(
+    (evt: MouseEvent) => {
+      if (refEl.current != null) {
+        /** ***************** check if reverse enabled of RTL *******************/
+        const reversed = ((isRtl ? 1 : 0) ^ (isReverse ? 1 : 0)) === 1;
+        const box = refEl.current?.getBoundingClientRect();
+        const x =
+          (evt.clientX - (reversed ? box.left : box.right)) *
+          (reversed ? -1 : 1);
+        const y = evt.clientY - box.bottom;
+        onResize({ x, y });
+      }
+    },
+    [onResize, isRtl, isReverse],
+  );
+
+  /** ***************** dettach handlers on mouseup *******************/
+  const onResizeEnd = useCallback(() => {
+    document.body.style.cursor = "unset";
+    document.removeEventListener("mousemove", onResizing);
+    document.removeEventListener("mouseup", onResizeEnd);
+    onEnd?.();
+  }, [onEnd, onResizing]);
+
+  /** ***************** attach handlers on mousedown *******************/
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      document.body.style.cursor = isVertical ? "row-resize" : "col-resize";
+      document.addEventListener("mousemove", onResizing);
+      document.addEventListener("mouseup", onResizeEnd);
+      onStart?.();
+    },
+    [onResizing, onResizeEnd, onStart],
+  );
+
+  return { ref: refEl, onMouseDown: onResizeStart };
+};
diff --git a/packages/core/src/hooks/useResizeObserver.ts b/packages/core/src/hooks/useResizeObserver.ts
new file mode 100644
index 0000000..be8683b
--- /dev/null
+++ b/packages/core/src/hooks/useResizeObserver.ts
@@ -0,0 +1,55 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useEffect, useRef, useTransition, type RefObject } from "react";
+import ResizeObserver from "resize-observer-polyfill";
+import { type SizeObject } from "../types";
+import { useDebounce } from "./useDebounce";
+
+export const useResizeObserver = <T extends HTMLElement = HTMLDivElement>(
+  onResize?: (size: SizeObject) => void,
+): RefObject<T> => {
+  const ref = useRef<T>(null);
+  const [, startTransition] = useTransition();
+
+  const callbackResize = useDebounce(() => {
+    startTransition(() => {
+      if (onResize && ref.current != null) {
+        const { offsetWidth: width, offsetHeight: height } = ref.current;
+        onResize?.({ width, height });
+      }
+    });
+  }, [onResize]);
+
+  useEffect(() => {
+    if (ref.current != null) {
+      const ob = new ResizeObserver(callbackResize);
+      ob.observe(ref.current);
+      return () => {
+        ob.disconnect();
+      };
+    }
+  }, [callbackResize, ref]);
+
+  return ref;
+};
diff --git a/packages/core/src/hooks/useStorage.ts b/packages/core/src/hooks/useStorage.ts
new file mode 100644
index 0000000..127f9ed
--- /dev/null
+++ b/packages/core/src/hooks/useStorage.ts
@@ -0,0 +1,80 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useState } from "react";
+import { useClientService } from "./useClientService";
+import { useEffectDebugger } from "./useEffectDebugger";
+
+export const useLocalStorage = <T>(
+  key: string,
+  defaultValue: T,
+): [T, (value: T) => void] => {
+  const service = useClientService(localStorage);
+  const [value, setValue] = useState<T>(
+    JSON.parse(service?.getItem(key) ?? "undefined") ?? defaultValue,
+  );
+
+  useEffectDebugger(
+    () => {
+      setValue(
+        JSON.parse(service?.getItem(key) ?? "undefined") ?? defaultValue,
+      );
+    },
+    [key, defaultValue],
+    "useStorage initial value",
+  );
+
+  const changeValue = (value: T) => {
+    service?.setItem(key, JSON.stringify(value));
+    setValue(value);
+  };
+
+  return [value, changeValue];
+};
+
+export const useSessionStorage = <T>(
+  key: string,
+  defaultValue: T,
+): [T, (value: T) => void] => {
+  const service = useClientService(sessionStorage);
+  const [value, setValue] = useState<T>(
+    JSON.parse(service?.getItem(key) ?? "undefined") ?? defaultValue,
+  );
+
+  useEffectDebugger(
+    () => {
+      setValue(
+        JSON.parse(service?.getItem(key) ?? "undefined") ?? defaultValue,
+      );
+    },
+    [key, defaultValue],
+    "useStorage initial value",
+  );
+
+  const changeValue = (value: T) => {
+    service?.setItem(key, JSON.stringify(value));
+    setValue(value);
+  };
+
+  return [value, changeValue];
+};
diff --git a/packages/core/src/hotkeys/HotKey.tsx b/packages/core/src/hotkeys/HotKey.tsx
new file mode 100644
index 0000000..052b7cb
--- /dev/null
+++ b/packages/core/src/hotkeys/HotKey.tsx
@@ -0,0 +1,39 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useEffectDebugger } from "../hooks/useEffectDebugger";
+import { useHotKeys } from "./HotKeyWrapper";
+import { type HotKeyProps } from "./commons";
+
+export const HotKey = ({ keyCombo, global, handler }: HotKeyProps) => {
+  const { addHotKey, removeHotKey } = useHotKeys();
+  useEffectDebugger(
+    () => {
+      addHotKey?.(keyCombo, handler ?? (() => undefined), global);
+      return () => removeHotKey?.(keyCombo);
+    },
+    [addHotKey, global, handler, keyCombo, removeHotKey],
+    "HotKey add",
+  );
+  return null;
+};
diff --git a/packages/core/src/hotkeys/HotKeyLabel.tsx b/packages/core/src/hotkeys/HotKeyLabel.tsx
new file mode 100644
index 0000000..66eeae9
--- /dev/null
+++ b/packages/core/src/hotkeys/HotKeyLabel.tsx
@@ -0,0 +1,61 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useMemoDebugger } from "../hooks/useEffectDebugger";
+import { reduceHotKey, type HotKeyProps } from "./commons";
+
+export const HotKeyLabel = ({
+  keyCombo,
+}: Omit<HotKeyProps, "global" | "handler">) => {
+  const label = useMemoDebugger(
+    () => {
+      const item = reduceHotKey({ keyCombo });
+
+      const label = [];
+      if (item.alt) label.push("ALT");
+      if (item.ctrl) label.push("CTRL");
+      if (item.meta) label.push("META");
+      if (item.shift) label.push("SHIFT");
+      if (item.key.toLowerCase() === "tab") label.push("TAB");
+      else if (item.key.toLowerCase() === "space") label.push("SPC");
+      else if (item.key.toLowerCase() === "arrowleft") label.push("LEFT");
+      else if (item.key.toLowerCase() === "arrowright") label.push("RIGHT");
+      else if (item.key.toLowerCase() === "arrowup") label.push("UP");
+      else if (item.key.toLowerCase() === "arrowdown") label.push("DOWN");
+      else if (item.key.toLowerCase() === "enter") label.push("ENTER");
+      else if (item.key.toLowerCase() === "delete") label.push("DEL");
+      else if (item.key.toLowerCase() === "escape") label.push("ESC");
+      else if (item.key.toLowerCase() === "backspace") label.push("BKSPC");
+      else label.push(item.key.toUpperCase());
+      return [<span key="label">{label.join(" ")}</span>];
+    },
+    [keyCombo],
+    "HotKey label",
+  );
+
+  return (
+    <kbd className="hotkey-label inline-flex gap-1 select-none self-center font-mono items-center text-[0.625rem] leading-4 bg-tint-500/10 text-base/50 whitespace-nowrap rounded px-2 mx-1">
+      {label}
+    </kbd>
+  );
+};
diff --git a/packages/core/src/hotkeys/HotKeyWrapper.tsx b/packages/core/src/hotkeys/HotKeyWrapper.tsx
new file mode 100644
index 0000000..b864433
--- /dev/null
+++ b/packages/core/src/hotkeys/HotKeyWrapper.tsx
@@ -0,0 +1,137 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useRef,
+  type FC,
+  type PropsWithChildren,
+} from "react";
+import { useEffectDebugger } from "../hooks/useEffectDebugger";
+import { reduceHotKey } from "./commons";
+
+/** @internal */
+export const HotKeysContext = createContext<{
+  addHotKey: (key: string, handler: () => void, global?: boolean) => void;
+  removeHotKey: (key: string) => void;
+}>({} as AnyObject);
+
+export const useHotKeys = () => useContext(HotKeysContext);
+
+export const HotKeyWrapper: FC<PropsWithChildren> = memo(
+  ({ children }: PropsWithChildren) => {
+    const refEl = useRef<HTMLDivElement>(null);
+    const keyList = useRef<KeyValue[]>([]);
+
+    const addHotKey = useCallback(
+      (keyCombo: string, handler: () => void, global = false) =>
+        (keyList.current = [
+          ...keyList.current.filter(({ _key }) => _key !== keyCombo),
+          reduceHotKey({ keyCombo, handler, global }),
+        ]),
+      [],
+    );
+    const removeHotKey = useCallback(
+      (key: string) =>
+        (keyList.current = [
+          ...keyList.current.filter(({ _key }) => _key !== key),
+        ]),
+      [],
+    );
+
+    const handler = useCallback((items: KeyValue[], event: KeyboardEvent) => {
+      if (items.length === 0) return;
+      const { key: keyCode, code, altKey, ctrlKey, metaKey, shiftKey } = event;
+      if (
+        keyCode !== "Enter" &&
+        keyCode !== "Esc" &&
+        ["INPUT", "TEXTAREA", "SELECT"].includes(
+          (event.target as HTMLElement).tagName,
+        )
+      )
+        return;
+      const find = items.find(
+        ({ key, alt, ctrl, meta, shift }: KeyValue) =>
+          (key.toLowerCase() === keyCode.toLowerCase() ||
+            key.toLowerCase() === code.toLowerCase()) &&
+          alt === altKey &&
+          ctrl === ctrlKey &&
+          meta === metaKey &&
+          shift === shiftKey,
+      );
+      if (find?.handler) {
+        find.handler();
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    }, []);
+
+    const handleGlobal = useCallback(
+      (event: KeyboardEvent) => {
+        handler(
+          keyList.current.filter((i) => i.global),
+          event,
+        );
+      },
+      [handler],
+    );
+    const handleHotKey = useCallback(
+      (event: KeyboardEvent) => {
+        handler(
+          keyList.current.filter((i) => !i.global),
+          event,
+        );
+      },
+      [handler],
+    );
+
+    useEffectDebugger(
+      () => {
+        const el: HTMLElement | null | undefined = refEl.current?.parentElement;
+        if (el) {
+          el.tabIndex = 0;
+          el.addEventListener("keydown", handleHotKey);
+          document.addEventListener("keydown", handleGlobal);
+          return () => {
+            el.removeEventListener("keydown", handleHotKey);
+            document.removeEventListener("keydown", handleGlobal);
+          };
+        }
+      },
+      [handleGlobal, handleHotKey],
+      "HotKeyWrapper attach handlers",
+    );
+
+    return (
+      <HotKeysContext.Provider value={{ addHotKey, removeHotKey }}>
+        <div ref={refEl} style={{ display: "contents" }}>
+          {children}
+        </div>
+      </HotKeysContext.Provider>
+    );
+  },
+);
+HotKeyWrapper.displayName = "HotKeyProvider";
diff --git a/packages/core/src/hotkeys/commons.ts b/packages/core/src/hotkeys/commons.ts
new file mode 100644
index 0000000..9eb1f7c
--- /dev/null
+++ b/packages/core/src/hotkeys/commons.ts
@@ -0,0 +1,74 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export interface HotKeyProps {
+  /**
+   * Hot key combination
+   *
+   * ctrl, shift, alt, meta
+   * enter, space, escape, tab, backspace, delete
+   * left, right, up, down
+   */
+  keyCombo: string;
+  /**
+   * Global hot key
+   */
+  global?: boolean;
+  /**
+   * Callback handler
+   */
+  handler?: () => void;
+}
+
+export const reduceHotKey = ({ keyCombo, global, handler }: HotKeyProps) => {
+  const item = {
+    key: "",
+    meta: false,
+    shift: false,
+    ctrl: false,
+    alt: false,
+    _key: keyCombo,
+    handler,
+    global,
+  };
+  keyCombo.split("+").forEach((e) => {
+    if (e.trim().toLowerCase() === "ctrl") {
+      item.ctrl = true;
+    } else if (e.trim().toLowerCase() === "alt") {
+      item.alt = true;
+    } else if (e.trim().toLowerCase() === "meta") {
+      item.meta = true;
+    } else if (e.trim().toLowerCase() === "shift") {
+      item.shift = true;
+    } else {
+      if (e.trim().toLowerCase() === "left") item.key = "arrowleft";
+      else if (e.trim().toLowerCase() === "right") item.key = "arrowright";
+      else if (e.trim().toLowerCase() === "up") item.key = "arrowup";
+      else if (e.trim().toLowerCase() === "down") item.key = "arrowdown";
+      else if (e.trim().toLowerCase().startsWith("del")) item.key = "delete";
+      else if (e.trim().toLowerCase().startsWith("esc")) item.key = "escape";
+      else item.key = e.trim().toLowerCase();
+    }
+  });
+  return item;
+};
diff --git a/packages/core/src/i18n/ar.json b/packages/core/src/i18n/ar.json
new file mode 100755
index 0000000..da40b0e
--- /dev/null
+++ b/packages/core/src/i18n/ar.json
@@ -0,0 +1,21 @@
+{
+  "error": {
+    "title": "أُووبس! لقد كسرنا شيئا"
+  },
+  "action": {
+    "ok": "حسنا",
+    "add": "اضف جديد",
+    "save": "حفظ",
+    "more": "أظهر المزيد",
+    "less": "عرض أقل",
+    "back": "عودة",
+    "copy": "ينسخ",
+    "copied": "نسخ",
+    "close": "قريب",
+    "apply": "تطبيق",
+    "delete": "حذف",
+    "submit": "تقديم",
+    "cancel": "إلغاء",
+    "preview": "معاينة"
+  }
+}
diff --git a/packages/core/src/i18n/en.json b/packages/core/src/i18n/en.json
new file mode 100755
index 0000000..556a67e
--- /dev/null
+++ b/packages/core/src/i18n/en.json
@@ -0,0 +1,34 @@
+{
+  "locale": {
+    "en": "English",
+    "ar": "عربى",
+    "de": "Deutsche",
+    "es": "Español",
+    "fr": "Français",
+    "it": "Italiano",
+    "jp": "日本語",
+    "ko": "한국어",
+    "pt": "Português",
+    "ru": "Pусский",
+    "zh": "中国人"
+  },
+  "error": {
+    "title": "OOPS! We broke something"
+  },
+  "action": {
+    "ok": "OK",
+    "add": "Add New",
+    "save": "Save",
+    "more": "Show more",
+    "less": "Show less",
+    "back": "Back",
+    "copy": "Copy",
+    "copied": "Copied",
+    "close": "Close",
+    "apply": "Apply",
+    "delete": "Delete",
+    "submit": "Submit",
+    "cancel": "Cancel",
+    "preview": "Preview"
+  }
+}
diff --git a/packages/core/src/i18n/index.ts b/packages/core/src/i18n/index.ts
new file mode 100755
index 0000000..8998afb
--- /dev/null
+++ b/packages/core/src/i18n/index.ts
@@ -0,0 +1,50 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+/* istanbul ignore file */
+
+import i18n from "i18next";
+import ar from "./ar.json";
+import en from "./en.json";
+
+/**
+ * add language bundles using bundle keys as namespaces
+ * @param key
+ * @param languageBundles: {en: {}, ar: {}}
+ */
+export const addTranslationBundle = (
+  key: string,
+  languageBundles: KeyValue,
+) => {
+  const callback = () => {
+    Object.keys(languageBundles).forEach((lang) => {
+      const bundle = languageBundles[lang];
+      i18n.addResourceBundle(lang, key, bundle, true, false);
+    });
+  };
+  if (i18n.isInitialized) {
+    callback();
+  } else {
+    i18n.on("initialized", callback);
+  }
+};
+addTranslationBundle("core", { en, ar });
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
new file mode 100644
index 0000000..3a0bc23
--- /dev/null
+++ b/packages/core/src/index.ts
@@ -0,0 +1,49 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export * from "./components";
+export * from "./core";
+export { addTranslationBundle } from "./i18n";
+export { Flyout, Modal, Tooltip } from "./overlays";
+export * from "./typography";
+
+export * from "./hooks/useClientService";
+export * from "./hooks/useDebounce";
+export * from "./hooks/useEffectDebugger";
+export * from "./hooks/useIsDark";
+export * from "./hooks/useIsRtl";
+export * from "./hooks/useNavigator";
+export * from "./hooks/useOverlayService";
+export * from "./hooks/useResizeObserver";
+export * from "./hooks/useStorage";
+
+export { HotKey } from "./hotkeys/HotKey";
+export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
+
+export { CoreIcons } from "./types/icons";
+
+export {
+  ApplicationProvider,
+  useApplicationContext,
+  useNotificationService,
+} from "./context/Global";
diff --git a/packages/core/src/overlays/alert/Alert.module.css b/packages/core/src/overlays/alert/Alert.module.css
new file mode 100644
index 0000000..14cefca
--- /dev/null
+++ b/packages/core/src/overlays/alert/Alert.module.css
@@ -0,0 +1,44 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .alert {
+    z-index: var(--z-overlay);
+
+    grid-template: "icon title" auto "icon message" auto "input input" auto "actions actions" auto / auto 1fr;
+    gap: 0.5rem 1rem;
+
+    margin-top: -100%;
+
+    opacity: 0;
+
+    transition:
+      margin 0.4s,
+      opacity 0.3s 0.2s;
+
+    &[data-show="true"] {
+      margin-top: 0;
+      opacity: 1;
+    }
+  }
+}
diff --git a/packages/core/src/overlays/alert/Alert.tsx b/packages/core/src/overlays/alert/Alert.tsx
new file mode 100644
index 0000000..41900bd
--- /dev/null
+++ b/packages/core/src/overlays/alert/Alert.tsx
@@ -0,0 +1,229 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from "@floating-ui/react";
+import classNames from "classnames";
+import { useCallback, useLayoutEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { AnimationIndicator } from "../../components/animations/Animations";
+import { Button } from "../../components/button/Button";
+import { Icon } from "../../components/icon/Icon";
+import { type ColorType, type Elements, type IconProps } from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { Title } from "../../typography/Title";
+import { getBorderClass, getColorClass } from "../../utils";
+import classes from "./Alert.module.css";
+
+export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+  /**
+   * toast type
+   */
+  type?: "alert" | "confirm" | "prompt";
+  /**
+   * toast title
+   */
+  title?: string;
+  /**
+   * toast text
+   */
+  message: string | JSX.Element;
+  /**
+   * theme color
+   */
+  color?: ColorType;
+  /**
+   * extra action button
+   */
+  actions?: Elements<JSX.Element>;
+  /**
+   * ok label
+   */
+  okLabel?: string;
+  /**
+   * cancel label
+   */
+  cancelLabel?: string;
+}
+
+export const Alert = ({
+  title,
+  message,
+  color = "primary",
+  icon,
+  rtlFlip,
+  actions,
+  // @ts-expect-error internal prop
+  onClose,
+  type,
+  okLabel,
+  cancelLabel,
+}: AlertProps) => {
+  const { t } = useTranslation("core");
+  const { refs, context } = useFloating({
+    open: true,
+    onOpenChange: () => {
+      handleClose(false);
+    },
+  });
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true,
+  });
+  const role = useRole(context);
+
+  // Merge all the interactions into prop getters
+  const { getFloatingProps } = useInteractions([dismiss, role]);
+
+  const iconType = useMemo(() => {
+    if (icon)
+      return (
+        <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={color + "-600"} />
+      );
+    switch (color) {
+      case "danger":
+        return (
+          <AnimationIndicator
+            type="cross"
+            className={getColorClass(color + "-600")}
+          />
+        );
+      case "success":
+        return (
+          <AnimationIndicator
+            type="check"
+            className={getColorClass(color + "-600")}
+          />
+        );
+      case "warning":
+        return (
+          <AnimationIndicator
+            type="exclaim"
+            className={getColorClass(color + "-600")}
+          />
+        );
+      default:
+        return (
+          <AnimationIndicator
+            type={type === "confirm" ? "question" : "info"}
+            className={getColorClass(color + "-600")}
+          />
+        );
+    }
+  }, [color, type, icon]);
+
+  const handleClose = useCallback(
+    (ret: AnyObject) => {
+      refs.floating.current && (refs.floating.current.dataset.show = "false");
+      setTimeout(() => {
+        onClose(ret);
+      }, 250);
+    },
+    [onClose],
+  );
+  useLayoutEffect(() => {
+    setTimeout(
+      () =>
+        refs.floating.current && (refs.floating.current.dataset.show = "true"),
+      100,
+    );
+  }, []);
+
+  return (
+    <FloatingPortal>
+      <FloatingOverlay
+        lockScroll
+        style={{ zIndex: "var(--z-overlay-mask)" }}
+        className="bg-base/50 backdrop-blur-sm grid place-items-center"
+      >
+        <FloatingFocusManager context={context}>
+          <dialog
+            role="alertdialog"
+            className={classNames(
+              classes.alert,
+              getBorderClass(color + "-300"),
+              "grid bg-base border-2 pointer-events-auto overflow-hidden rounded-capped select-none",
+              "min-w-72 max-w-sm p-6 relative outline-0 shadow-lg",
+            )}
+            ref={refs.setFloating}
+            {...getFloatingProps()}
+          >
+            <div className={classNames("area-[icon] text-lg py-2")}>
+              {iconType}
+            </div>
+
+            <Title className="font-medium area-[title]">{title}</Title>
+            <p className="area-[message] py-4">{message}</p>
+            <div className="area-[message]">{message}</div>
+            <div className="flex gap-1 justify-center flex-nowrap pt-2 area-[actions]">
+              <div
+                className="contents"
+                onClickCapture={(e) =>
+                  handleClose((e.target as AnyObject).value)
+                }
+              >
+                {actions}
+              </div>
+              {type === "confirm" && (
+                <Button
+                  size="sm"
+                  variant="link"
+                  color={color}
+                  onClick={() => handleClose(false)}
+                >
+                  {cancelLabel ?? t("action.cancel", "Cancel")}
+                </Button>
+              )}
+              <Button
+                size="sm"
+                variant="solid"
+                color={color}
+                onClick={() => handleClose(true)}
+              >
+                {okLabel ?? t("action.ok", "OK")}
+              </Button>
+            </div>
+            <div className="absolute top-2 end-2">
+              <Button
+                size="sm"
+                variant="link"
+                className="m-0"
+                color={color}
+                onClick={() => handleClose(false)}
+                icon={CoreIcons.close}
+                aria-label="close"
+              />
+            </div>
+          </dialog>
+        </FloatingFocusManager>
+      </FloatingOverlay>
+    </FloatingPortal>
+  );
+};
diff --git a/packages/core/src/overlays/flyout/Flyout.module.css b/packages/core/src/overlays/flyout/Flyout.module.css
new file mode 100644
index 0000000..989a9eb
--- /dev/null
+++ b/packages/core/src/overlays/flyout/Flyout.module.css
@@ -0,0 +1,52 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .flyout {
+    z-index: var(--z-overlay);
+    width: 32rem;
+    max-width: 70vw;
+    transition: margin 0.5s;
+
+    & .flyoutHeader {
+      background-color: theme(backgroundColor.base);
+      border-bottom: 0.5px solid theme(borderColor.dimmed);
+    }
+
+    & .flyoutBody {
+      grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    }
+
+    &[data-align="start"] {
+      margin-inline-start: -100%;
+    }
+
+    &[data-align="end"] {
+      margin-inline-end: -100%;
+    }
+
+    &[data-show="true"] {
+      margin: 0;
+    }
+  }
+}
diff --git a/packages/core/src/overlays/flyout/Flyout.tsx b/packages/core/src/overlays/flyout/Flyout.tsx
new file mode 100644
index 0000000..cae0d71
--- /dev/null
+++ b/packages/core/src/overlays/flyout/Flyout.tsx
@@ -0,0 +1,263 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from "@floating-ui/react";
+import classNames from "classnames";
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  type PropsWithChildren,
+} from "react";
+import { Loading } from "../../components/animations/Animations";
+import { Icon } from "../../components/icon/Icon";
+import { Header } from "../../core/headfoot/HeadFoot";
+import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
+import {
+  type AriaProps,
+  type CallbackReturn,
+  type ChildrenProp,
+  type Elements,
+  type IconProps,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import classes from "./Flyout.module.css";
+
+export interface FlyoutProps
+  extends AriaProps,
+    TestProps,
+    IconProps,
+    ChildrenProp {
+  /**
+   * flyout alignment
+   */
+  align?: "start" | "end";
+  /**
+   * header className
+   */
+  headerClassName?: string;
+  /**
+   * icon className
+   */
+  iconClassName?: string;
+  /**
+   * show loading indicator
+   */
+  loading?: boolean;
+  /**
+   * modal title
+   */
+  title?: JSX.Element | string | false;
+  /**
+   * header actions
+   */
+  actions?: Elements<JSX.Element>;
+  /**
+   * modal size
+   */
+  size?: "sm" | "md" | "lg" | "xl" | "screen";
+  /**
+   * width
+   */
+  width?: string | number;
+  /**
+   * minimum width
+   */
+  minWidth?: string | number;
+  /**
+   * hide backdrop mask
+   */
+  hideMask?: boolean;
+  /**
+   * close handler
+   */
+  onClose: (...args: AnyObject) => void;
+  /**
+   * before close handler, return false to prevent close
+   */
+  onBeforeClose?: (...args: AnyObject) => CallbackReturn;
+}
+
+export const Flyout = ({
+  icon,
+  iconBg,
+  iconColor,
+  iconClassName,
+  rtlFlip,
+  title,
+  actions,
+  headerClassName,
+  onClose,
+  onBeforeClose,
+  children,
+  loading,
+  size,
+  width,
+  minWidth,
+  hideMask,
+  align = "start",
+  ...aria
+}: FlyoutProps) => {
+  const { refs, context } = useFloating({
+    open: true,
+    onOpenChange: () => {
+      handleClose(false);
+    },
+  });
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true,
+  });
+  const role = useRole(context);
+
+  // Merge all the interactions into prop getters
+  const { getFloatingProps } = useInteractions([dismiss, role]);
+
+  const handleClose = useCallback(
+    (...args: AnyObject) => {
+      void Promise.resolve(onBeforeClose?.(...args)).then((ret) => {
+        if (ret !== false) {
+          refs.floating.current &&
+            (refs.floating.current.dataset.show = "false");
+          setTimeout(() => {
+            onClose?.(...args);
+          }, 250);
+        }
+        ret === false &&
+          setTimeout(
+            () =>
+              refs.floating.current
+                ?.querySelector<HTMLElement>('[role="dialog"]')
+                ?.focus(),
+            50,
+          );
+      });
+    },
+    [onBeforeClose, onClose],
+  );
+
+  useEffect(() => {
+    setTimeout(() => {
+      refs.floating.current && (refs.floating.current.dataset.show = "true");
+      refs.floating.current
+        ?.querySelector<HTMLElement>('[role="dialog"]')
+        ?.focus();
+    }, 50);
+  }, []);
+
+  const Wrapper = useCallback(
+    ({ children }: PropsWithChildren) => {
+      if (hideMask) return <Fragment>{children}</Fragment>;
+
+      return (
+        <FloatingOverlay
+          lockScroll
+          style={{ zIndex: "var(--z-overlay-mask)" }}
+          className="bg-base/50 backdrop-blur-sm"
+        >
+          {children}
+        </FloatingOverlay>
+      );
+    },
+    [hideMask, handleClose],
+  );
+
+  return (
+    <FloatingPortal>
+      <Wrapper>
+        <FloatingFocusManager context={context}>
+          <Wrapper>
+            <div
+              data-align={align}
+              className={classNames(
+                classes.flyout,
+                "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
+                align === "start" ? "start-0" : "end-0",
+                size === "sm" && "w-[20rem]",
+                size === "md" && "w-[40rem]",
+                size === "lg" && "w-[60vw]",
+                size === "xl" && "w-[80vw]",
+              )}
+              style={{
+                width,
+                minWidth,
+              }}
+              ref={refs.setFloating}
+              {...getFloatingProps()}
+              {...aria}
+              {...aria}
+            >
+              <HotKeyWrapper>
+                <Header
+                  flex
+                  className={classNames(classes.flyoutHeader, headerClassName)}
+                >
+                  {icon && (
+                    <Icon
+                      icon={icon}
+                      bg={iconBg}
+                      color={iconColor}
+                      className={classNames(iconClassName, "p-1")}
+                      rtlFlip={rtlFlip}
+                    />
+                  )}
+                  <label className="flex-1 truncate py-2 px-1">{title}</label>
+                  {actions}
+                  <Icon
+                    data-ref="panelClose"
+                    className={classNames(
+                      classes.panelAction,
+                      "cursor-pointer p-1 text-xl self-stretch",
+                    )}
+                    icon={CoreIcons.close}
+                    onClick={() => handleClose(false)}
+                  />
+                </Header>
+                {loading && <Loading />}
+                <div
+                  role="dialog"
+                  className={classNames(
+                    classes.flyoutBody,
+                    "flex-1 grid overflow-hidden",
+                  )}
+                  {...({ tabIndex: 0 } as AnyObject)}
+                >
+                  {children}
+                </div>
+              </HotKeyWrapper>
+            </div>
+          </Wrapper>
+        </FloatingFocusManager>
+      </Wrapper>
+    </FloatingPortal>
+  );
+};
diff --git a/packages/core/src/overlays/index.ts b/packages/core/src/overlays/index.ts
new file mode 100644
index 0000000..4efa66e
--- /dev/null
+++ b/packages/core/src/overlays/index.ts
@@ -0,0 +1,29 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export { Alert } from "./alert/Alert";
+export { Flyout } from "./flyout/Flyout";
+export { Message } from "./message/Message";
+export { Modal } from "./modal/Modal";
+export { Toast } from "./toast/Toast";
+export { Tooltip } from "./tooltip/Tooltip";
diff --git a/packages/core/src/overlays/message/Message.module.css b/packages/core/src/overlays/message/Message.module.css
new file mode 100644
index 0000000..4f4f1c9
--- /dev/null
+++ b/packages/core/src/overlays/message/Message.module.css
@@ -0,0 +1,37 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .message {
+    margin-top: -100%;
+    opacity: 0;
+    transition:
+      margin 0.4s,
+      opacity 0.3s 0.2s;
+
+    &[data-show="true"] {
+      margin-top: 0;
+      opacity: 1;
+    }
+  }
+}
diff --git a/packages/core/src/overlays/message/Message.tsx b/packages/core/src/overlays/message/Message.tsx
new file mode 100644
index 0000000..6e079f8
--- /dev/null
+++ b/packages/core/src/overlays/message/Message.tsx
@@ -0,0 +1,107 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { useCallback, useLayoutEffect, useRef } from "react";
+import { Icon } from "../../components/icon/Icon";
+import { type ColorType, type Elements, type IconProps } from "../../types";
+import { getBgClass, getColorClass } from "../../utils";
+import classes from "./Message.module.css";
+
+export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+  /**
+   * message title
+   */
+  title?: string;
+  /**
+   * message text
+   */
+  message: string | JSX.Element;
+  /**
+   * theme color
+   */
+  color?: ColorType;
+  /**
+   * extra action button
+   */
+  actions?: Elements<JSX.Element>;
+}
+
+export const Message = ({
+  title,
+  message,
+  color,
+  icon,
+  rtlFlip,
+  actions,
+  // @ts-expect-error internal prop
+  onClose,
+}: MessageProps) => {
+  const elRef = useRef<HTMLDivElement>(null);
+  const handleClose = useCallback(
+    (ret?: AnyObject) => {
+      elRef.current && (elRef.current.dataset.show = "false");
+      setTimeout(() => {
+        onClose(ret);
+      }, 250);
+    },
+    [onClose],
+  );
+  useLayoutEffect(() => {
+    setTimeout(
+      () => elRef.current && (elRef.current.dataset.show = "true"),
+      100,
+    );
+  }, []);
+
+  return (
+    <div
+      className={classNames(
+        classes.message,
+        color ? getBgClass(color + "-300") : "bg-invert",
+        color ? getColorClass(color + "-900") : "text-invert",
+        "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none",
+      )}
+      ref={elRef}
+    >
+      {icon && <Icon icon={icon} size="md" rtlFlip={rtlFlip} />}
+      {title && <div className="font-medium">{title}</div>}
+      <div className="truncate flex-initial">{message}</div>
+      {actions && (
+        <div
+          className="flex gap-1 flex-nowrap"
+          onClickCapture={(e) => handleClose((e.target as AnyObject).value)}
+        >
+          {actions}
+        </div>
+      )}
+      <div
+        role="none"
+        className="cursor-pointer opacity-65 absolute end-1 hover:opacity-90"
+        onClick={() => handleClose()}
+      >
+        &times;
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/overlays/modal/Modal.module.css b/packages/core/src/overlays/modal/Modal.module.css
new file mode 100644
index 0000000..b5ddd90
--- /dev/null
+++ b/packages/core/src/overlays/modal/Modal.module.css
@@ -0,0 +1,53 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .modal {
+    z-index: var(--z-overlay);
+
+    width: 32rem;
+    max-width: 90vw;
+    max-height: 90vh;
+    margin-top: -100%;
+
+    opacity: 0;
+
+    transition:
+      margin 0.4s,
+      opacity 0.3s 0.2s;
+
+    &[data-show="true"] {
+      margin-top: 0;
+      opacity: 1;
+    }
+
+    & .modalHeader {
+      background-color: theme(backgroundColor.base);
+      border-bottom: 0.5px solid theme(borderColor.dimmed);
+    }
+
+    & .modalBody {
+      grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    }
+  }
+}
diff --git a/packages/core/src/overlays/modal/Modal.tsx b/packages/core/src/overlays/modal/Modal.tsx
new file mode 100644
index 0000000..2b6d9d1
--- /dev/null
+++ b/packages/core/src/overlays/modal/Modal.tsx
@@ -0,0 +1,244 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from "@floating-ui/react";
+import classNames from "classnames";
+import { useCallback, useEffect } from "react";
+import { Loading } from "../../components/animations/Animations";
+import { Icon } from "../../components/icon/Icon";
+import { Header } from "../../core/headfoot/HeadFoot";
+import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
+import {
+  type AriaProps,
+  type CallbackReturn,
+  type ChildrenProp,
+  type Elements,
+  type IconProps,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import classes from "./Modal.module.css";
+
+export interface ModalProps
+  extends AriaProps,
+    TestProps,
+    IconProps,
+    ChildrenProp {
+  /**
+   * header className
+   */
+  headerClassName?: string;
+  /**
+   * icon className
+   */
+  iconClassName?: string;
+  /**
+   * show loading indicator
+   */
+  loading?: boolean;
+  /**
+   * modal title
+   */
+  title?: JSX.Element | string | false;
+  /**
+   * header actions
+   */
+  actions?: Elements<JSX.Element>;
+  /**
+   * modal size
+   */
+  size?: "sm" | "md" | "lg" | "xl" | "screen";
+  /**
+   * height
+   */
+  height?: string | number;
+  /**
+   * width
+   */
+  width?: string | number;
+  /**
+   * minimum height
+   */
+  minHeight?: string | number;
+  /**
+   * minimum width
+   */
+  minWidth?: string | number;
+  /**
+   * close handler
+   */
+  onClose: (...args: AnyObject) => void;
+  /**
+   * before close handler, return false to prevent close
+   */
+  onBeforeClose?: (...args: AnyObject) => CallbackReturn;
+}
+
+export const Modal = ({
+  icon,
+  iconBg,
+  iconColor,
+  iconClassName,
+  rtlFlip,
+  title,
+  actions,
+  headerClassName,
+  onClose,
+  onBeforeClose,
+  children,
+  loading,
+  size,
+  width,
+  height,
+  minHeight,
+  minWidth,
+  ...aria
+}: ModalProps) => {
+  const { refs, context } = useFloating({
+    open: true,
+    onOpenChange: () => {
+      handleClose(false);
+    },
+  });
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true,
+  });
+  const role = useRole(context);
+
+  // Merge all the interactions into prop getters
+  const { getFloatingProps } = useInteractions([dismiss, role]);
+
+  const handleClose = useCallback(
+    (...args: AnyObject) => {
+      void Promise.resolve(onBeforeClose?.(...args)).then((ret) => {
+        if (ret !== false) {
+          refs.floating.current &&
+            (refs.floating.current.dataset.show = "false");
+          setTimeout(() => {
+            onClose?.(...args);
+          }, 250);
+        }
+        ret === false &&
+          setTimeout(
+            () =>
+              refs.floating.current
+                ?.querySelector<HTMLElement>("[role='dialog']")
+                ?.focus(),
+            50,
+          );
+      });
+    },
+    [onBeforeClose, onClose],
+  );
+
+  useEffect(() => {
+    setTimeout(() => {
+      refs.floating.current && (refs.floating.current.dataset.show = "true");
+      refs.floating.current
+        ?.querySelector<HTMLElement>("[role='dialog']")
+        ?.focus();
+    }, 50);
+  }, []);
+
+  return (
+    <FloatingPortal>
+      <FloatingOverlay
+        lockScroll
+        style={{ zIndex: "var(--z-overlay-mask)" }}
+        className="bg-base/50 backdrop-blur-sm grid place-items-center"
+      >
+        <FloatingFocusManager context={context}>
+          <dialog
+            className={classNames(
+              classes.modal,
+              "rounded-capped relative overflow-hidden flex flex-col flex-nowrap",
+              "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl",
+              size === "sm" && "w-[20rem]",
+              size === "md" && "w-[40rem]",
+              size === "lg" && "w-[60vw]",
+              size === "xl" && "w-[80vw]",
+              size === "screen" && "w-screen h-screen",
+            )}
+            style={{
+              width,
+              height,
+              minHeight,
+              minWidth,
+            }}
+            ref={refs.setFloating}
+            {...getFloatingProps()}
+            {...aria}
+          >
+            <HotKeyWrapper>
+              <Header
+                flex
+                className={classNames(classes.modalHeader, headerClassName)}
+              >
+                {icon && (
+                  <Icon
+                    icon={icon}
+                    bg={iconBg}
+                    color={iconColor}
+                    className={classNames(iconClassName, "p-1")}
+                    rtlFlip={rtlFlip}
+                  />
+                )}
+                <label className="flex-1 truncate py-2 px-1">{title}</label>
+                {actions}
+                <Icon
+                  data-ref="panelClose"
+                  className={classNames(
+                    classes.panelAction,
+                    "cursor-pointer p-1 text-xl self-stretch",
+                  )}
+                  icon={CoreIcons.close}
+                  onClick={() => handleClose(false)}
+                />
+              </Header>
+              {loading && <Loading />}
+              <div
+                role="dialog"
+                className={classNames(
+                  classes.modalBody,
+                  "flex-1 grid overflow-hidden",
+                )}
+                {...({ tabIndex: 0 } as AnyObject)}
+              >
+                {children}
+              </div>
+            </HotKeyWrapper>
+          </dialog>
+        </FloatingFocusManager>
+      </FloatingOverlay>
+    </FloatingPortal>
+  );
+};
diff --git a/packages/core/src/overlays/toast/Toast.module.css b/packages/core/src/overlays/toast/Toast.module.css
new file mode 100644
index 0000000..4ff4227
--- /dev/null
+++ b/packages/core/src/overlays/toast/Toast.module.css
@@ -0,0 +1,37 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .toast {
+    margin-bottom: -100%;
+    opacity: 0;
+    transition:
+      margin 0.4s,
+      opacity 0.3s 0.2s;
+
+    &[data-show="true"] {
+      margin-bottom: 0;
+      opacity: 1;
+    }
+  }
+}
diff --git a/packages/core/src/overlays/toast/Toast.tsx b/packages/core/src/overlays/toast/Toast.tsx
new file mode 100644
index 0000000..9697b62
--- /dev/null
+++ b/packages/core/src/overlays/toast/Toast.tsx
@@ -0,0 +1,216 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { Fragment, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { AnimationIndicator } from "../../components/animations/Animations";
+import { Button } from "../../components/button/Button";
+import { Icon } from "../../components/icon/Icon";
+import { type ColorType, type Elements, type IconProps } from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { getBgClass, getBorderClass, getColorClass } from "../../utils";
+import classes from "./Toast.module.css";
+
+export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+  /**
+   * toast type
+   */
+  type?: "alert" | "confirm";
+  /**
+   * toast title
+   */
+  title?: string;
+  /**
+   * toast text
+   */
+  message: string | JSX.Element;
+  /**
+   * theme color
+   */
+  color?: ColorType;
+  /**
+   * extra action button
+   */
+  actions?: Elements<JSX.Element>;
+  /**
+   * ok label
+   */
+  okLabel?: string;
+  /**
+   * cancel label
+   */
+  cancelLabel?: string;
+}
+
+export const Toast = ({
+  title,
+  message,
+  color = "primary",
+  icon,
+  rtlFlip,
+  actions,
+  // @ts-expect-error internal prop
+  onClose,
+  // @ts-expect-error internal prop
+  onCloseAll,
+  type,
+  okLabel,
+  cancelLabel,
+}: ToastProps) => {
+  const { t } = useTranslation("core");
+
+  const iconType = useMemo(() => {
+    if (icon)
+      return (
+        <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={color + "-600"} />
+      );
+    switch (color) {
+      case "danger":
+        return (
+          <AnimationIndicator
+            type="cross"
+            className={getColorClass(color + "-600")}
+          />
+        );
+      case "success":
+        return (
+          <AnimationIndicator
+            type="check"
+            className={getColorClass(color + "-600")}
+          />
+        );
+      case "warning":
+        return (
+          <AnimationIndicator
+            type="exclaim"
+            className={getColorClass(color + "-600")}
+          />
+        );
+      default:
+        return (
+          <AnimationIndicator
+            type={type === "confirm" ? "question" : "info"}
+            className={getColorClass(color + "-600")}
+          />
+        );
+    }
+  }, [color, type, icon]);
+
+  const elRef = useRef<HTMLDivElement>(null);
+  const handleClose = useCallback(
+    (ret?: AnyObject) => {
+      elRef.current && (elRef.current.dataset.show = "false");
+      setTimeout(() => {
+        onClose(ret);
+      }, 250);
+    },
+    [onClose],
+  );
+  useLayoutEffect(() => {
+    setTimeout(
+      () => elRef.current && (elRef.current.dataset.show = "true"),
+      100,
+    );
+  }, []);
+
+  return (
+    <div
+      role="alert"
+      className={classNames(
+        classes.toast,
+        getBorderClass(color + "-300"),
+        "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none",
+      )}
+      ref={elRef}
+    >
+      <div
+        className={classNames("flex-initial p-2", getBgClass(color + "-100"))}
+      >
+        {iconType}
+      </div>
+      <div
+        className={classNames(
+          getBgClass(color + "-50/50"),
+          "flex flex-col flex-1 flex-nowrap overflow-hidden p-2",
+        )}
+      >
+        <div className="flex flex-nowrap gap-2 items-start">
+          <div className="font-medium flex-1">{title}</div>
+          <div>
+            <Button
+              size="sm"
+              variant="link"
+              className="m-0"
+              color={color}
+              icon={CoreIcons.closeAll}
+              aria-label="close-all"
+              onClick={onCloseAll}
+            />
+            <Button
+              size="sm"
+              variant="link"
+              className="m-0"
+              color={color}
+              icon={CoreIcons.close}
+              aria-label="close"
+              onClick={() => handleClose(false)}
+            />
+          </div>
+        </div>
+        <div>{message}</div>
+        {(type === "confirm" || actions) && (
+          <div className="flex gap-1 justify-end flex-nowrap pt-2">
+            <div
+              className="contents"
+              onClickCapture={(e) => handleClose((e.target as AnyObject).value)}
+            >
+              {actions}
+            </div>
+            {type === "confirm" && (
+              <Fragment>
+                <div className="flex-1" />
+                <Button
+                  size="sm"
+                  variant="link"
+                  color={color}
+                  onClick={() => handleClose(false)}
+                >
+                  {cancelLabel ?? t("action.cancel", "Cancel")}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="solid"
+                  color={color}
+                  onClick={() => handleClose(true)}
+                >
+                  {okLabel ?? t("action.ok", "OK")}
+                </Button>
+              </Fragment>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/overlays/tooltip/Tooltip.module.css b/packages/core/src/overlays/tooltip/Tooltip.module.css
new file mode 100644
index 0000000..038e05e
--- /dev/null
+++ b/packages/core/src/overlays/tooltip/Tooltip.module.css
@@ -0,0 +1,53 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .tooltip {
+    z-index: var(--z-tooltip);
+    color: theme(backgroundColor.invert);
+
+    &[data-color="primary"] {
+      color: theme(colors.primary.600);
+    }
+
+    &[data-color="accent"] {
+      color: theme(colors.accent.600);
+    }
+
+    &[data-color="info"] {
+      color: theme(colors.info.600);
+    }
+
+    &[data-color="danger"] {
+      color: theme(colors.danger.600);
+    }
+
+    &[data-color="success"] {
+      color: theme(colors.success.600);
+    }
+
+    &[data-color="warning"] {
+      color: theme(colors.warning.600);
+    }
+  }
+}
diff --git a/packages/core/src/overlays/tooltip/Tooltip.tsx b/packages/core/src/overlays/tooltip/Tooltip.tsx
new file mode 100644
index 0000000..6dfcf83
--- /dev/null
+++ b/packages/core/src/overlays/tooltip/Tooltip.tsx
@@ -0,0 +1,198 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  FloatingArrow,
+  FloatingPortal,
+  arrow,
+  flip,
+  offset,
+  safePolygon,
+  shift,
+  useFloating,
+  useHover,
+  useInteractions,
+  type Placement,
+} from "@floating-ui/react";
+import { isObject, isString, mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Fragment,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+} from "react";
+import { Icon } from "../../components/icon/Icon";
+import { useIsRtl } from "../../hooks/useIsRtl";
+import { type RefProp, type TooltipType } from "../../types";
+import { CoreIcons } from "../../types/icons";
+import classes from "./Tooltip.module.css";
+
+export interface TooltipProps extends TooltipType, RefProp {
+  /**
+   * force open
+   */
+  open?: boolean;
+  /**
+   * show copy action, pass string as copy content
+   */
+  copyContent?: boolean | string;
+  disabled?: boolean;
+  children: ReactElement;
+}
+
+export const getTooltipProps = (
+  tooltip?: string | TooltipType,
+  innerRef?: AnyObject,
+): (TooltipType & { ref: AnyObject }) | undefined => {
+  if (isString(tooltip) || isValidElement(tooltip)) {
+    return { ref: innerRef, placement: "top", content: tooltip };
+  }
+  if (isObject(tooltip)) {
+    return Object.assign({ ref: innerRef, placement: "top" }, tooltip);
+  }
+};
+
+export const Tooltip = ({
+  ref,
+  children,
+  color,
+  content,
+  open,
+  copyContent,
+  disabled,
+  placement: _placement,
+  ...rest
+}: TooltipProps) => {
+  const arrowRef = useRef(null);
+  const isRtl = useIsRtl();
+  const [isOpen, setIsOpen] = useState(open);
+
+  useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
+
+  const placement = useMemo<Placement>(() => {
+    if (isRtl)
+      return (
+        _placement?.includes("left")
+          ? _placement.replace("left", "right")
+          : _placement?.replace("right", "left") ?? "top"
+      ) as Placement;
+
+    return _placement ?? "top";
+  }, [_placement, isRtl]);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    strategy: "fixed",
+    onOpenChange: !!open || disabled ? undefined : setIsOpen,
+    placement,
+    middleware: [
+      shift({ padding: 8 }),
+      flip(),
+      offset(9),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const hover = useHover(context, {
+    restMs: 250,
+    delay: { open: 1000 },
+    handleClose: copyContent ? safePolygon({ buffer: 1 }) : undefined,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    open ? undefined : hover,
+  ]);
+
+  useEffect(() => {
+    context.update();
+  }, [content]);
+
+  const innerRef = useMemo(
+    () => mergeRefs(ref, children.props.ref, refs.setReference),
+    [ref, children.props.ref, refs.setReference],
+  );
+
+  const copyEl = useMemo(() => {
+    if (copyContent) {
+      const copyText: AnyObject = isString(copyContent) ? copyContent : content;
+      const handler = () => {
+        setIsOpen(false);
+        void navigator.clipboard.writeText(copyText.toString());
+      };
+      return (
+        <span
+          role="none"
+          className="ms-2 cursor-pointer text-invert flex-content opacity-75 hover:opacity-90 active:opacity-60"
+          onClick={handler}
+        >
+          <Icon icon={CoreIcons.copy} />
+        </span>
+      );
+    }
+    return null;
+  }, [copyContent, content]);
+
+  return (
+    <Fragment>
+      {cloneElement(children, {
+        ref: innerRef,
+        ...(open ? {} : getReferenceProps(rest)),
+      })}
+      {isOpen && content && (
+        <FloatingPortal>
+          <dfn
+            data-ref="tooltip"
+            data-color={color}
+            className={classNames(
+              classes.tooltip,
+              "select-none text-sm not-italic flex py-1 px-2 rounded shadow-md bg-current",
+            )}
+            ref={refs.setFloating}
+            style={floatingStyles}
+            {...getFloatingProps()}
+          >
+            <span
+              className={classNames(
+                "font-medium text-invert flex-1",
+                isString(content) && "whitespace-pre-wrap",
+              )}
+            >
+              {content}
+            </span>
+            {copyEl}
+            <FloatingArrow ref={arrowRef} context={context} />
+          </dfn>
+        </FloatingPortal>
+      )}
+    </Fragment>
+  );
+};
diff --git a/packages/core/src/types/global.d.ts b/packages/core/src/types/global.d.ts
new file mode 100644
index 0000000..0e4e08c
--- /dev/null
+++ b/packages/core/src/types/global.d.ts
@@ -0,0 +1,63 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+declare type Key = string | number | symbol;
+declare type AnyObject = any;
+declare type KeyValue<T = AnyObject> = Record<Key, T>;
+
+declare module "*.md" {
+  const content: any;
+  export default content;
+}
+declare module "*.wav" {
+  const content: any;
+  export default content;
+}
+declare module "*.mp3" {
+  const content: any;
+  export default content;
+}
+declare module "*.mp4" {
+  const content: any;
+  export default content;
+}
+declare module "*.png" {
+  const content: any;
+  export default content;
+}
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}
+declare module "*.html" {
+  const content: any;
+  export default content;
+}
+declare module "*.json" {
+  const content: any;
+  export default content;
+}
+declare module "*.css" {
+  const content: any;
+  export default content;
+}
diff --git a/packages/core/src/types/icons.ts b/packages/core/src/types/icons.ts
new file mode 100644
index 0000000..a26a159
--- /dev/null
+++ b/packages/core/src/types/icons.ts
@@ -0,0 +1,310 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+/* eslint-disable @typescript-eslint/no-namespace */
+
+export module CoreIcons {
+  /**
+   * carets
+   */
+  export const chevronDown =
+    "M5.293 9.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+  export const chevronLeft =
+    "M15.707 17.293l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414l6 6c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+  export const chevronRight =
+    "M9.707 18.707l6-6c0.391-0.391 0.391-1.024 0-1.414l-6-6c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z";
+  export const chevronUp =
+    "M18.707 14.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+  export const chevronsDown =
+    "M16.59,5.59L18,7L12,13L6,7L7.41,5.59L12,10.17L16.59,5.59M16.59,11.59L18,13L12,19L6,13L7.41,11.59L12,16.17L16.59,11.59Z";
+  export const chevronsLeft =
+    "M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z";
+  export const chevronsRight =
+    "M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z";
+  export const chevronsUp =
+    "M7.41,18.41L6,17L12,11L18,17L16.59,18.41L12,13.83L7.41,18.41M7.41,12.41L6,11L12,5L18,11L16.59,12.41L12,7.83L7.41,12.41Z";
+
+  export const pageFirst =
+    "M18.207 17.293l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414l6 6c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM5.5 5v14c0 0.552 0.448 1 1 1s1-0.448 1-1v-14c0-0.552-0.448-1-1-1s-1 0.448-1 1z";
+  export const pageLast =
+    "M7.207 18.707l6-6c0.391-0.391 0.391-1.024 0-1.414l-6-6c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM16.5 5v14c0 0.552 0.448 1 1 1s1-0.448 1-1v-14c0-0.552-0.448-1-1-1s-1 0.448-1 1z";
+
+  /**
+   * arrows
+   */
+  export const arrowDown =
+    "M18.293 11.293l-5.293 5.293v-11.586c0-0.552-0.448-1-1-1s-1 0.448-1 1v11.586l-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l7 7c0.092 0.092 0.202 0.166 0.324 0.217 0.245 0.101 0.521 0.101 0.766 0 0.118-0.049 0.228-0.121 0.324-0.217l7-7c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z";
+  export const arrowLeft =
+    "M12.707 18.293l-5.293-5.293h11.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-11.586l5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-7 7c-0.096 0.096-0.168 0.206-0.217 0.324-0.051 0.122-0.076 0.253-0.076 0.383 0 0.256 0.098 0.512 0.293 0.707l7 7c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+  export const arrowRight =
+    "M11.293 5.707l5.293 5.293h-11.586c-0.552 0-1 0.448-1 1s0.448 1 1 1h11.586l-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l7-7c0.092-0.092 0.166-0.202 0.217-0.324 0.101-0.245 0.101-0.521 0-0.766-0.049-0.118-0.121-0.228-0.217-0.324l-7-7c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+  export const arrowUp =
+    "M5.707 12.707l5.293-5.293v11.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-11.586l5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-7-7c-0.092-0.092-0.202-0.166-0.324-0.217s-0.253-0.076-0.383-0.076c-0.256 0-0.512 0.098-0.707 0.293l-7 7c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z";
+
+  /**
+   * button icons
+   */
+  export const close =
+    "M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+  export const closeAll =
+    "M21.707 17.293l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414l6 6c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM2.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+
+  export const maximize =
+    "M8 2h-3c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h3c0.552 0 1-0.448 1-1s-0.448-1-1-1zM22 8v-3c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1h3c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v3c0 0.552 0.448 1 1 1s1-0.448 1-1zM16 22h3c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1zM2 16v3c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h3c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1z";
+  export const minimize =
+    "M7 3v3c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1h3c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1zM21 7h-3c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h3c0.552 0 1-0.448 1-1s-0.448-1-1-1zM17 21v-3c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h3c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v3c0 0.552 0.448 1 1 1s1-0.448 1-1zM3 17h3c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+
+  export const expand =
+    "M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+  export const collapse =
+    "M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+
+  export const expandAll =
+    "M5.293 16.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM18.707 7.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+  export const colapseAll =
+    "M18.707 21.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM5.293 2.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+
+  export const zoomIn =
+    "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM8 12h2v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+  export const zoomOut =
+    "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM8 12h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+
+  export const refresh =
+    "M19.547 14.667c-0.736 2.083-2.245 3.67-4.094 4.553s-4.031 1.061-6.114 0.325-3.67-2.245-4.553-4.094-1.061-4.031-0.325-6.114 2.245-3.67 4.094-4.553 4.031-1.061 6.114-0.325c1.188 0.42 2.209 1.088 2.987 1.882l2.824 2.659h-3.48c-0.552 0-1 0.448-1 1s0.448 1 1 1h5.997c0.004 0 0.009 0 0.013 0 0.137-0.001 0.267-0.030 0.386-0.082 0.119-0.051 0.229-0.126 0.324-0.225 0.012-0.012 0.023-0.025 0.034-0.038 0.076-0.087 0.134-0.184 0.175-0.287s0.065-0.213 0.069-0.328c0.002-0.014 0.002-0.028 0.002-0.042v-5.998c0-0.552-0.448-1-1-1s-1 0.448-1 1v3.685l-2.916-2.745c-0.993-1.012-2.274-1.846-3.748-2.366-2.604-0.921-5.336-0.698-7.644 0.405s-4.197 3.088-5.117 5.692-0.696 5.335 0.406 7.643 3.088 4.197 5.692 5.117 5.335 0.697 7.643-0.406 4.197-3.088 5.117-5.692c0.184-0.521-0.089-1.092-0.61-1.276s-1.092 0.089-1.276 0.61z";
+  export const search =
+    "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+  export const filter =
+    "M19.845 4l-6.609 7.814c-0.147 0.173-0.236 0.399-0.236 0.646v6.922l-2-1v-5.922c0.001-0.227-0.077-0.457-0.236-0.646l-6.609-7.814zM22 2h-20c-0.552 0-1 0.448-1 1 0 0.247 0.089 0.473 0.236 0.646l7.764 9.18v6.174c0 0.389 0.222 0.727 0.553 0.894l4 2c0.494 0.247 1.095 0.047 1.342-0.447 0.072-0.146 0.106-0.301 0.105-0.447v-8.174l7.764-9.18c0.357-0.422 0.304-1.053-0.118-1.409-0.189-0.16-0.419-0.238-0.646-0.237z";
+  export const ellipsis =
+    "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
+  export const filterPlus =
+    "M15 17H18V14H20V17H23V19H20V22H18V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";
+  export const filterRemove =
+    "M14.73,20.83L17.58,18L14.73,15.17L16.15,13.76L19,16.57L21.8,13.76L23.22,15.17L20.41,18L23.22,20.83L21.8,22.24L19,19.4L16.15,22.24L14.73,20.83M13,19.88C13.04,20.18 12.94,20.5 12.71,20.71C12.32,21.1 11.69,21.1 11.3,20.71L7.29,16.7C7.06,16.47 6.96,16.16 7,15.87V10.75L2.21,4.62C1.87,4.19 1.95,3.56 2.38,3.22C2.57,3.08 2.78,3 3,3V3H17V3C17.22,3 17.43,3.08 17.62,3.22C18.05,3.56 18.13,4.19 17.79,4.62L13,10.75V19.88M5.04,5L9,10.06V15.58L11,17.58V10.05L14.96,5H5.04Z";
+  export const filterMinus =
+    "M15 17H23V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";
+
+  export const cut =
+    "M7.378 16.551c0.011 0.012 0.023 0.025 0.035 0.036s0.024 0.023 0.036 0.035c0.343 0.359 0.551 0.843 0.551 1.378 0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586c0.535 0 1.019 0.208 1.378 0.551zM13.764 15.188l5.53 5.52c0.391 0.39 1.024 0.39 1.414-0.001s0.39-1.024-0.001-1.414l-5.53-5.52c-0.391-0.39-1.024-0.39-1.414 0.001s-0.39 1.024 0.001 1.414zM7.449 7.378c-0.012 0.011-0.024 0.023-0.036 0.035s-0.024 0.024-0.035 0.036c-0.359 0.343-0.843 0.551-1.378 0.551-0.553 0-1.051-0.223-1.414-0.586s-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414c0 0.535-0.208 1.019-0.551 1.378zM8.032 9.446l2.554 2.554-2.554 2.554c-0.596-0.352-1.291-0.554-2.032-0.554-1.104 0-2.106 0.449-2.828 1.172s-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828c0-0.741-0.202-1.436-0.554-2.032l11.261-11.261c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-7.293 7.293-2.554-2.554c0.352-0.596 0.554-1.291 0.554-2.032 0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172c0.741 0 1.436-0.202 2.032-0.554z";
+  export const copy =
+    "M11 8c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v9c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h9c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-9c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM11 10h9c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v9c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-9c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-9c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM5 14h-1c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-9c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h9c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1c0 0.552 0.448 1 1 1s1-0.448 1-1v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-9c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v9c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h1c0.552 0 1-0.448 1-1s-0.448-1-1-1z";
+  export const clipboard =
+    "M7 5c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h6c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414h1c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-12c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM9 1c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414h-1c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h12c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-1c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM9 3h6v2h-6z";
+
+  export const download =
+    "M20 15v4c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1v4c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 12.586v-9.586c0-0.552-0.448-1-1-1s-1 0.448-1 1v9.586l-3.293-3.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.092 0.092 0.202 0.166 0.324 0.217s0.253 0.076 0.383 0.076c0.256 0 0.512-0.098 0.707-0.293l5-5c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z";
+  export const upload =
+    "M20 15v4c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1v4c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 5.414v9.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-9.586l3.293 3.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5-5c-0.092-0.092-0.202-0.166-0.324-0.217-0.245-0.101-0.521-0.101-0.766 0-0.118 0.049-0.228 0.121-0.324 0.217l-5 5c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z";
+  export const external =
+    "M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z";
+  export const exporter =
+    "M12,1L8,5H11V14H13V5H16M18,23H6C4.89,23 4,22.1 4,21V9A2,2 0 0,1 6,7H9V9H6V21H18V9H15V7H18A2,2 0 0,1 20,9V21A2,2 0 0,1 18,23Z";
+
+  export const calendar =
+    "M7 2v1h-2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-2v-1c0-0.552-0.448-1-1-1s-1 0.448-1 1v1h-6v-1c0-0.552-0.448-1-1-1s-1 0.448-1 1zM20 9h-16v-3c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h2v1c0 0.552 0.448 1 1 1s1-0.448 1-1v-1h6v1c0 0.552 0.448 1 1 1s1-0.448 1-1v-1h2c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707zM4 11h16v9c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707z";
+  export const clock =
+    "M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 6v6c0 0.389 0.222 0.727 0.553 0.894l4 2c0.494 0.247 1.095 0.047 1.342-0.447s0.047-1.095-0.447-1.342l-3.448-1.723v-5.382c0-0.552-0.448-1-1-1s-1 0.448-1 1z";
+
+  export const eye =
+    "M0.106 11.553c-0.136 0.274-0.146 0.603 0 0.894 0 0 0.396 0.789 1.12 1.843 0.451 0.656 1.038 1.432 1.757 2.218 0.894 0.979 2.004 1.987 3.319 2.8 1.595 0.986 3.506 1.692 5.698 1.692s4.103-0.706 5.698-1.692c1.315-0.813 2.425-1.821 3.319-2.8 0.718-0.786 1.306-1.562 1.757-2.218 0.724-1.054 1.12-1.843 1.12-1.843 0.136-0.274 0.146-0.603 0-0.894 0 0-0.396-0.789-1.12-1.843-0.451-0.656-1.038-1.432-1.757-2.218-0.894-0.979-2.004-1.987-3.319-2.8-1.595-0.986-3.506-1.692-5.698-1.692s-4.103 0.706-5.698 1.692c-1.315 0.813-2.425 1.821-3.319 2.8-0.719 0.786-1.306 1.561-1.757 2.218-0.724 1.054-1.12 1.843-1.12 1.843zM2.14 12c0.163-0.281 0.407-0.681 0.734-1.158 0.41-0.596 0.94-1.296 1.585-2.001 0.805-0.881 1.775-1.756 2.894-2.448 1.35-0.834 2.901-1.393 4.647-1.393s3.297 0.559 4.646 1.393c1.119 0.692 2.089 1.567 2.894 2.448 0.644 0.705 1.175 1.405 1.585 2.001 0.328 0.477 0.572 0.876 0.734 1.158-0.163 0.281-0.407 0.681-0.734 1.158-0.41 0.596-0.94 1.296-1.585 2.001-0.805 0.881-1.775 1.756-2.894 2.448-1.349 0.834-2.9 1.393-4.646 1.393s-3.297-0.559-4.646-1.393c-1.119-0.692-2.089-1.567-2.894-2.448-0.644-0.705-1.175-1.405-1.585-2.001-0.328-0.477-0.572-0.877-0.735-1.158zM16 12c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM14 12c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414z";
+  export const eyeOff =
+    "M10.128 5.214c0.651-0.152 1.296-0.221 1.86-0.214 1.758 0 3.309 0.559 4.658 1.393 1.119 0.692 2.089 1.567 2.894 2.448 0.644 0.705 1.175 1.405 1.585 2.001 0.327 0.475 0.57 0.874 0.733 1.155-0.546 0.953-1.16 1.821-1.778 2.542-0.359 0.419-0.311 1.051 0.108 1.41s1.051 0.311 1.41-0.108c0.818-0.954 1.611-2.112 2.283-3.37 0.148-0.279 0.163-0.618 0.013-0.919 0 0-0.396-0.789-1.12-1.843-0.451-0.656-1.038-1.432-1.757-2.218-0.894-0.979-2.004-1.987-3.319-2.8-1.595-0.985-3.506-1.691-5.686-1.691-0.734-0.009-1.54 0.079-2.34 0.266-0.538 0.126-0.872 0.664-0.746 1.202s0.664 0.872 1.202 0.746zM10.027 11.442l2.531 2.531c-0.182 0.061-0.372 0.094-0.563 0.101-0.513 0.018-1.030-0.159-1.434-0.536s-0.617-0.88-0.635-1.393c-0.008-0.238 0.025-0.476 0.101-0.704zM5.983 7.397l2.553 2.553c-0.434 0.691-0.636 1.484-0.608 2.266 0.036 1.022 0.463 2.033 1.271 2.785s1.846 1.107 2.868 1.071c0.692-0.024 1.379-0.228 1.984-0.608l2.322 2.322c-1.378 0.799-2.895 1.196-4.384 1.214-1.734 0-3.285-0.559-4.634-1.393-1.119-0.692-2.089-1.567-2.894-2.448-0.644-0.705-1.175-1.405-1.585-2.001-0.326-0.475-0.57-0.873-0.732-1.154 1.050-1.822 2.376-3.379 3.841-4.607zM0.293 1.707l4.271 4.271c-1.731 1.479-3.269 3.358-4.445 5.549-0.148 0.279-0.164 0.619-0.013 0.92 0 0 0.396 0.789 1.12 1.843 0.451 0.656 1.038 1.432 1.757 2.218 0.894 0.979 2.004 1.987 3.319 2.8 1.595 0.986 3.506 1.692 5.71 1.692 1.993-0.024 4.019-0.601 5.815-1.759l4.466 4.466c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.876-8.876c-0.002-0.002-0.005-0.005-0.007-0.007l-4.209-4.21c-0.008-0.007-0.016-0.016-0.024-0.024l-8.884-8.883c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+
+  export const lock =
+    "M5 12h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v7c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-7c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM18 10v-3c0-1.657-0.673-3.158-1.757-4.243s-2.586-1.757-4.243-1.757-3.158 0.673-4.243 1.757-1.757 2.586-1.757 4.243v3h-1c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v7c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-7c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM8 10v-3c0-1.105 0.447-2.103 1.172-2.828s1.723-1.172 2.828-1.172 2.103 0.447 2.828 1.172 1.172 1.723 1.172 2.828v3z";
+  export const unlock =
+    "M5 12h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v7c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-7c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 10v-3c-0.001-1.106 0.445-2.105 1.169-2.831 0.723-0.724 1.719-1.172 2.821-1.174 1.030 0.003 1.948 0.378 2.652 1 0.638 0.565 1.097 1.332 1.28 2.209 0.113 0.541 0.642 0.888 1.183 0.775s0.888-0.642 0.775-1.183c-0.272-1.307-0.958-2.454-1.912-3.299-1.060-0.938-2.452-1.504-3.973-1.502-1.657 0.002-3.157 0.676-4.241 1.762s-1.756 2.587-1.754 4.243v3h-1c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v7c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-7c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879z";
+
+  export const edit =
+    "M12 21h9c0.552 0 1-0.448 1-1s-0.448-1-1-1h-9c-0.552 0-1 0.448-1 1s0.448 1 1 1zM15.793 2.793l-12.5 12.5c-0.122 0.121-0.217 0.28-0.263 0.465l-1 4c-0.039 0.15-0.042 0.318 0 0.485 0.134 0.536 0.677 0.862 1.213 0.728l4-1c0.167-0.041 0.33-0.129 0.465-0.263l12.5-12.5c0.609-0.609 0.914-1.41 0.914-2.207s-0.305-1.598-0.914-2.207-1.411-0.915-2.208-0.915-1.598 0.305-2.207 0.914zM17.207 4.207c0.219-0.219 0.504-0.328 0.793-0.328s0.574 0.109 0.793 0.328 0.328 0.504 0.328 0.793-0.109 0.574-0.328 0.793l-12.304 12.304-2.115 0.529 0.529-2.115z";
+  export const console =
+    "M4.707 17.707l6-6c0.391-0.391 0.391-1.024 0-1.414l-6-6c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM12 20h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+  export const backspace =
+    "M21 5c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v12c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-12.546l-6.125-7 6.125-7zM21 3h-13c-0.3 0-0.568 0.132-0.753 0.341l-7 8c-0.333 0.38-0.326 0.942 0 1.317l7 8c0.198 0.226 0.474 0.341 0.753 0.342h13c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-12c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM11.293 9.707l2.293 2.293-2.293 2.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l2.293-2.293 2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.293-2.293 2.293-2.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+  export const insert =
+    "M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z";
+  export const remove =
+    "M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM8 13h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+  export const trash =
+    "M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z";
+
+  export const menu =
+    "M3 13h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1zM3 7h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1zM3 19h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+  export const config =
+    "M16 12c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM14 12c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM20.315 15.404c0.046-0.105 0.112-0.191 0.192-0.257 0.112-0.092 0.251-0.146 0.403-0.147h0.090c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121-0.337-1.58-0.879-2.121-1.293-0.879-2.121-0.879h-0.159c-0.11-0.001-0.215-0.028-0.308-0.076-0.127-0.066-0.23-0.172-0.292-0.312-0.003-0.029-0.004-0.059-0.004-0.089-0.024-0.055-0.040-0.111-0.049-0.168 0.020-0.334 0.077-0.454 0.168-0.547l0.062-0.062c0.585-0.586 0.878-1.356 0.877-2.122s-0.294-1.536-0.881-2.122c-0.586-0.585-1.356-0.878-2.122-0.877s-1.536 0.294-2.12 0.879l-0.046 0.046c-0.083 0.080-0.183 0.136-0.288 0.166-0.14 0.039-0.291 0.032-0.438-0.033-0.101-0.044-0.187-0.11-0.253-0.19-0.092-0.112-0.146-0.251-0.147-0.403v-0.090c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879-1.58 0.337-2.121 0.879-0.879 1.293-0.879 2.121v0.159c-0.001 0.11-0.028 0.215-0.076 0.308-0.066 0.127-0.172 0.23-0.312 0.292-0.029 0.003-0.059 0.004-0.089 0.004-0.055 0.024-0.111 0.040-0.168 0.049-0.335-0.021-0.455-0.078-0.548-0.169l-0.062-0.062c-0.586-0.585-1.355-0.878-2.122-0.878s-1.535 0.294-2.122 0.882c-0.585 0.586-0.878 1.355-0.878 2.122s0.294 1.536 0.879 2.12l0.048 0.047c0.080 0.083 0.136 0.183 0.166 0.288 0.039 0.14 0.032 0.291-0.031 0.434-0.006 0.016-0.013 0.034-0.021 0.052-0.041 0.109-0.108 0.203-0.191 0.275-0.11 0.095-0.25 0.153-0.383 0.156h-0.090c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.294-0.879 2.122 0.337 1.58 0.879 2.121 1.293 0.879 2.121 0.879h0.159c0.11 0.001 0.215 0.028 0.308 0.076 0.128 0.067 0.233 0.174 0.296 0.321 0.024 0.055 0.040 0.111 0.049 0.168-0.020 0.334-0.077 0.454-0.168 0.547l-0.062 0.062c-0.585 0.586-0.878 1.356-0.877 2.122s0.294 1.536 0.881 2.122c0.586 0.585 1.356 0.878 2.122 0.877s1.536-0.294 2.12-0.879l0.047-0.048c0.083-0.080 0.183-0.136 0.288-0.166 0.14-0.039 0.291-0.032 0.434 0.031 0.016 0.006 0.034 0.013 0.052 0.021 0.109 0.041 0.203 0.108 0.275 0.191 0.095 0.11 0.153 0.25 0.156 0.383v0.092c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879 1.58-0.337 2.121-0.879 0.879-1.293 0.879-2.121v-0.159c0.001-0.11 0.028-0.215 0.076-0.308 0.067-0.128 0.174-0.233 0.321-0.296 0.055-0.024 0.111-0.040 0.168-0.049 0.334 0.020 0.454 0.077 0.547 0.168l0.062 0.062c0.586 0.585 1.356 0.878 2.122 0.877s1.536-0.294 2.122-0.881c0.585-0.586 0.878-1.356 0.877-2.122s-0.294-1.536-0.879-2.12l-0.048-0.047c-0.080-0.083-0.136-0.183-0.166-0.288-0.039-0.14-0.032-0.291 0.031-0.434zM18.396 9.302c-0.012-0.201-0.038-0.297-0.076-0.382v0.080c0 0.043 0.003 0.084 0.008 0.125 0.021 0.060 0.043 0.119 0.068 0.177 0.004 0.090 0.005 0.091 0.005 0.092 0.249 0.581 0.684 1.030 1.208 1.303 0.371 0.193 0.785 0.298 1.211 0.303h0.18c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707-0.111 0.525-0.293 0.707-0.431 0.293-0.707 0.293h-0.090c-0.637 0.003-1.22 0.228-1.675 0.603-0.323 0.266-0.581 0.607-0.75 0.993-0.257 0.582-0.288 1.21-0.127 1.782 0.119 0.423 0.341 0.814 0.652 1.136l0.072 0.073c0.196 0.196 0.294 0.45 0.294 0.707s-0.097 0.512-0.292 0.707c-0.197 0.197-0.451 0.295-0.709 0.295s-0.512-0.097-0.707-0.292l-0.061-0.061c-0.463-0.453-1.040-0.702-1.632-0.752-0.437-0.037-0.882 0.034-1.293 0.212-0.578 0.248-1.027 0.683-1.3 1.206-0.193 0.371-0.298 0.785-0.303 1.211v0.181c0 0.276-0.111 0.525-0.293 0.707s-0.43 0.292-0.706 0.292-0.525-0.111-0.707-0.293-0.293-0.431-0.293-0.707v-0.090c-0.015-0.66-0.255-1.242-0.644-1.692-0.284-0.328-0.646-0.585-1.058-0.744-0.575-0.247-1.193-0.274-1.756-0.116-0.423 0.119-0.814 0.341-1.136 0.652l-0.073 0.072c-0.196 0.196-0.45 0.294-0.707 0.294s-0.512-0.097-0.707-0.292c-0.197-0.197-0.295-0.451-0.295-0.709s0.097-0.512 0.292-0.707l0.061-0.061c0.453-0.463 0.702-1.040 0.752-1.632 0.037-0.437-0.034-0.882-0.212-1.293-0.248-0.578-0.683-1.027-1.206-1.3-0.371-0.193-0.785-0.298-1.211-0.303l-0.18 0.001c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293h0.090c0.66-0.015 1.242-0.255 1.692-0.644 0.328-0.284 0.585-0.646 0.744-1.058 0.247-0.575 0.274-1.193 0.116-1.756-0.119-0.423-0.341-0.814-0.652-1.136l-0.073-0.073c-0.196-0.196-0.294-0.45-0.294-0.707s0.097-0.512 0.292-0.707c0.197-0.197 0.451-0.295 0.709-0.295s0.512 0.097 0.707 0.292l0.061 0.061c0.463 0.453 1.040 0.702 1.632 0.752 0.37 0.032 0.745-0.014 1.101-0.137 0.096-0.012 0.186-0.036 0.266-0.072-0.031 0.001-0.061 0.003-0.089 0.004-0.201 0.012-0.297 0.038-0.382 0.076h0.080c0.043 0 0.084-0.003 0.125-0.008 0.060-0.021 0.119-0.043 0.177-0.068 0.090-0.004 0.091-0.005 0.092-0.005 0.581-0.249 1.030-0.684 1.303-1.208 0.193-0.37 0.298-0.785 0.303-1.21v-0.181c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293 0.525 0.111 0.707 0.293 0.293 0.431 0.293 0.707v0.090c0.003 0.637 0.228 1.22 0.603 1.675 0.266 0.323 0.607 0.581 0.996 0.751 0.578 0.255 1.206 0.286 1.778 0.125 0.423-0.119 0.814-0.341 1.136-0.652l0.073-0.072c0.196-0.196 0.45-0.294 0.707-0.294s0.512 0.097 0.707 0.292c0.197 0.197 0.295 0.451 0.295 0.709s-0.097 0.512-0.292 0.707l-0.061 0.061c-0.453 0.463-0.702 1.040-0.752 1.632-0.032 0.37 0.014 0.745 0.137 1.101 0.012 0.095 0.037 0.185 0.072 0.266-0.001-0.032-0.002-0.062-0.004-0.089z";
+  export const settings =
+    "M5 10v-7c0-0.552-0.448-1-1-1s-1 0.448-1 1v7c0 0.552 0.448 1 1 1s1-0.448 1-1zM13 21v-9c0-0.552-0.448-1-1-1s-1 0.448-1 1v9c0 0.552 0.448 1 1 1s1-0.448 1-1zM21 12v-9c0-0.552-0.448-1-1-1s-1 0.448-1 1v9c0 0.552 0.448 1 1 1s1-0.448 1-1zM1 15h2v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1zM9 9h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1v4h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM17 17h2v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+
+  export const notAllowed =
+    "M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM19.032 17.618l-12.65-12.65c1.54-1.232 3.493-1.968 5.618-1.968 2.486 0 4.734 1.006 6.364 2.636s2.636 3.878 2.636 6.364c0 2.125-0.736 4.078-1.968 5.618zM4.968 6.382l12.65 12.65c-1.54 1.232-3.493 1.968-5.618 1.968-2.486 0-4.734-1.006-6.364-2.636s-2.636-3.878-2.636-6.364c0-2.125 0.736-4.078 1.968-5.618z";
+  export const tick =
+    "M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z";
+  export const target =
+    "M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM19 12c0-1.933-0.785-3.684-2.050-4.95s-3.017-2.050-4.95-2.050-3.684 0.785-4.95 2.050-2.050 3.017-2.050 4.95 0.785 3.684 2.050 4.95 3.017 2.050 4.95 2.050 3.684-0.785 4.95-2.050 2.050-3.017 2.050-4.95zM17 12c0 1.381-0.559 2.63-1.464 3.536s-2.155 1.464-3.536 1.464-2.63-0.559-3.536-1.464-1.464-2.155-1.464-3.536 0.559-2.63 1.464-3.536 2.155-1.464 3.536-1.464 2.63 0.559 3.536 1.464 1.464 2.155 1.464 3.536zM15 12c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879-1.58 0.337-2.121 0.879-0.879 1.293-0.879 2.121 0.337 1.58 0.879 2.121 1.293 0.879 2.121 0.879 1.58-0.337 2.121-0.879 0.879-1.293 0.879-2.121zM13 12c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293-0.525-0.111-0.707-0.293-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293 0.525 0.111 0.707 0.293 0.293 0.431 0.293 0.707z";
+
+  export const sun =
+    "M18 12c0-1.657-0.673-3.158-1.757-4.243s-2.586-1.757-4.243-1.757-3.158 0.673-4.243 1.757-1.757 2.586-1.757 4.243 0.673 3.158 1.757 4.243 2.586 1.757 4.243 1.757 3.158-0.673 4.243-1.757 1.757-2.586 1.757-4.243zM16 12c0 1.105-0.447 2.103-1.172 2.828s-1.723 1.172-2.828 1.172-2.103-0.447-2.828-1.172-1.172-1.723-1.172-2.828 0.447-2.103 1.172-2.828 1.723-1.172 2.828-1.172 2.103 0.447 2.828 1.172 1.172 1.723 1.172 2.828zM11 1v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 21v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM3.513 4.927l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM17.653 19.067l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM1 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM21 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4.927 20.487l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM19.067 6.347l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z";
+  export const moon =
+    "M21.996 12.882c0.022-0.233-0.038-0.476-0.188-0.681-0.325-0.446-0.951-0.544-1.397-0.219-0.95 0.693-2.060 1.086-3.188 1.162-1.368 0.092-2.765-0.283-3.95-1.158-1.333-0.985-2.139-2.415-2.367-3.935s0.124-3.124 1.109-4.456c0.142-0.191 0.216-0.435 0.191-0.691-0.053-0.55-0.542-0.952-1.092-0.898-2.258 0.22-4.314 1.18-5.895 2.651-1.736 1.615-2.902 3.847-3.137 6.386-0.254 2.749 0.631 5.343 2.266 7.311s4.022 3.313 6.772 3.567 5.343-0.631 7.311-2.266 3.313-4.022 3.567-6.772zM19.567 14.674c-0.49 1.363-1.335 2.543-2.416 3.441-1.576 1.309-3.648 2.016-5.848 1.813s-4.108-1.278-5.417-2.854-2.016-3.648-1.813-5.848c0.187-2.032 1.117-3.814 2.507-5.106 0.782-0.728 1.71-1.3 2.731-1.672-0.456 1.264-0.577 2.606-0.384 3.899 0.303 2.023 1.38 3.934 3.156 5.247 1.578 1.167 3.448 1.668 5.272 1.545 0.752-0.050 1.496-0.207 2.21-0.465z";
+
+  export const login =
+    "M15 4h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h4c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1zM12.586 11h-9.586c-0.552 0-1 0.448-1 1s0.448 1 1 1h9.586l-3.293 3.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5-5c0.096-0.096 0.168-0.206 0.217-0.324s0.076-0.247 0.076-0.383c0-0.13-0.025-0.261-0.076-0.383-0.049-0.118-0.121-0.228-0.217-0.324l-5-5c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+  export const logout =
+    "M9 20h-4c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.552 0 1-0.448 1-1s-0.448-1-1-1h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h4c0.552 0 1-0.448 1-1s-0.448-1-1-1zM18.586 11h-9.586c-0.552 0-1 0.448-1 1s0.448 1 1 1h9.586l-3.293 3.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5-5c0.092-0.092 0.166-0.202 0.217-0.324 0.15-0.362 0.078-0.795-0.217-1.090l-5-5c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+
+  export const phone =
+    "M23 16.92c0.016-0.714-0.236-1.404-0.673-1.943-0.46-0.566-1.129-0.967-1.925-1.080-0.8-0.098-1.695-0.314-2.586-0.646-0.433-0.159-0.893-0.218-1.344-0.174-0.663 0.064-1.307 0.349-1.819 0.855l-0.72 0.72c-1.77-1.117-3.36-2.667-4.583-4.589l0.726-0.726c0.322-0.33 0.563-0.726 0.707-1.156 0.212-0.632 0.214-1.336-0.039-2.011-0.289-0.753-0.518-1.644-0.644-2.595-0.104-0.714-0.456-1.345-0.963-1.804-0.539-0.486-1.256-0.779-2.027-0.771h-2.996c-0.088 0-0.182 0.004-0.273 0.012-0.824 0.075-1.542 0.478-2.033 1.066s-0.758 1.367-0.683 2.199c0.3 3.076 1.365 6.243 3.216 9.102 1.502 2.413 3.648 4.623 6.298 6.306 2.568 1.697 5.684 2.862 9.086 3.231 0.092 0.009 0.191 0.013 0.288 0.013 0.828-0.003 1.578-0.343 2.118-0.887s0.873-1.297 0.87-2.121zM21 16.92v3c0.001 0.28-0.109 0.53-0.29 0.712s-0.429 0.295-0.706 0.296c-3.149-0.336-5.961-1.391-8.263-2.912-2.428-1.543-4.359-3.537-5.702-5.694-1.697-2.62-2.655-5.481-2.924-8.238-0.024-0.268 0.064-0.526 0.229-0.724s0.403-0.33 0.678-0.355l3.088-0.005c0.271-0.003 0.507 0.094 0.687 0.256 0.17 0.154 0.288 0.366 0.323 0.608 0.142 1.072 0.408 2.117 0.757 3.025 0.081 0.216 0.080 0.447 0.010 0.658-0.049 0.145-0.131 0.281-0.242 0.395l-1.262 1.261c-0.324 0.324-0.379 0.814-0.162 1.201 1.584 2.785 3.839 4.957 6.381 6.378 0.397 0.222 0.882 0.144 1.195-0.166l1.27-1.27c0.166-0.164 0.377-0.257 0.598-0.279 0.152-0.015 0.31 0.005 0.459 0.060 1.022 0.381 2.070 0.636 3.034 0.754 0.241 0.034 0.462 0.166 0.615 0.355 0.147 0.181 0.231 0.412 0.226 0.682z";
+  export const message =
+    "M22 15v-10c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-14c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v16c0 0.256 0.098 0.512 0.293 0.707 0.391 0.391 1.024 0.391 1.414 0l3.707-3.707h11.586c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121zM20 15c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-12c-0.276 0-0.526 0.112-0.707 0.293l-2.293 2.293v-13.586c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z";
+  export const mail =
+    "M3 7.921l8.427 5.899c0.34 0.235 0.795 0.246 1.147 0l8.426-5.899v10.079c0 0.272-0.11 0.521-0.295 0.705s-0.433 0.295-0.705 0.295h-16c-0.272 0-0.521-0.11-0.705-0.295s-0.295-0.433-0.295-0.705zM1 5.983c0 0.010 0 0.020 0 0.030v11.987c0 0.828 0.34 1.579 0.88 2.12s1.292 0.88 2.12 0.88h16c0.828 0 1.579-0.34 2.12-0.88s0.88-1.292 0.88-2.12v-11.988c0-0.010 0-0.020 0-0.030-0.005-0.821-0.343-1.565-0.88-2.102-0.541-0.54-1.292-0.88-2.12-0.88h-16c-0.828 0-1.579 0.34-2.12 0.88-0.537 0.537-0.875 1.281-0.88 2.103zM20.894 5.554l-8.894 6.225-8.894-6.225c0.048-0.096 0.112-0.183 0.188-0.259 0.185-0.185 0.434-0.295 0.706-0.295h16c0.272 0 0.521 0.11 0.705 0.295 0.076 0.076 0.14 0.164 0.188 0.259z";
+  export const clip =
+    "M20.733 10.343l-9.19 9.19c-0.977 0.977-2.256 1.465-3.538 1.465s-2.561-0.488-3.538-1.465-1.465-2.256-1.465-3.538 0.488-2.561 1.465-3.538l9.19-9.19c0.586-0.586 1.353-0.879 2.123-0.879s1.536 0.293 2.123 0.879 0.879 1.353 0.879 2.123-0.293 1.536-0.879 2.123l-9.2 9.19c-0.196 0.196-0.451 0.294-0.708 0.294s-0.512-0.098-0.708-0.293-0.293-0.45-0.293-0.708 0.098-0.512 0.293-0.708l8.49-8.48c0.391-0.39 0.391-1.023 0.001-1.414s-1.023-0.391-1.414-0.001l-8.49 8.48c-0.586 0.586-0.879 1.356-0.879 2.122s0.293 1.536 0.879 2.122 1.356 0.879 2.122 0.879 1.536-0.293 2.122-0.879l9.2-9.19c0.977-0.977 1.465-2.258 1.465-3.537s-0.489-2.561-1.465-3.537-2.258-1.465-3.537-1.465-2.561 0.489-3.537 1.465l-9.19 9.19c-1.367 1.367-2.051 3.161-2.051 4.952s0.684 3.585 2.051 4.952 3.161 2.051 4.952 2.051 3.585-0.684 4.952-2.051l9.19-9.19c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z";
+
+  export const map =
+    "M7 3.723v13.697l-5 2.857v-13.697zM17 20.277v-13.697l5-2.857v13.696zM15.535 22.885c0.082 0.043 0.17 0.075 0.263 0.094 0.033 0.007 0.067 0.012 0.101 0.015s0.068 0.005 0.102 0.005c-0.001 0.001-0.001 0.001-0.001 0.001s0 0 0.001 0c0.173 0 0.344-0.046 0.496-0.132l0.015-0.009 6.985-3.991c0.32-0.183 0.501-0.518 0.503-0.868v-16c0-0.552-0.448-1-1-1-0.183 0-0.354 0.049-0.496 0.132l-6.535 3.734-7.503-3.752c-0.083-0.042-0.171-0.075-0.264-0.094-0.034-0.007-0.067-0.012-0.101-0.015s-0.068-0.005-0.102-0.005c0.001 0 0.001 0 0.001 0s0 0-0.001 0c-0.173 0-0.344 0.046-0.495 0.132l-0.015 0.008-6.985 3.992c-0.321 0.183-0.502 0.518-0.504 0.868v16c0 0.552 0.448 1 1 1 0.183 0 0.354-0.049 0.496-0.132l6.535-3.734zM15 6.618v13.764l-6-3v-13.764z";
+  export const mapPin =
+    "M22 10c0-2.761-1.12-5.263-2.929-7.071s-4.31-2.929-7.071-2.929-5.263 1.12-7.071 2.929-2.929 4.31-2.929 7.071c0 0.569 0.053 1.128 0.15 1.676 0.274 1.548 0.899 3.004 1.682 4.32 2.732 4.591 7.613 7.836 7.613 7.836 0.331 0.217 0.765 0.229 1.109 0 0 0 4.882-3.245 7.613-7.836 0.783-1.316 1.408-2.772 1.682-4.32 0.098-0.548 0.151-1.107 0.151-1.676zM20 10c0 0.444-0.041 0.887-0.119 1.328-0.221 1.25-0.737 2.478-1.432 3.646-1.912 3.214-5.036 5.747-6.369 6.74-1.398-0.916-4.588-3.477-6.53-6.74-0.695-1.168-1.211-2.396-1.432-3.646-0.077-0.441-0.118-0.884-0.118-1.328 0-2.209 0.894-4.208 2.343-5.657s3.448-2.343 5.657-2.343 4.208 0.894 5.657 2.343 2.343 3.448 2.343 5.657zM16 10c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM14 10c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414z";
+
+  export const thumbDown =
+    "M11 15c0-0.552-0.448-1-1-1h-5.679c-0.065-0.002-0.153-0.011-0.153-0.011-0.273-0.041-0.502-0.188-0.655-0.396s-0.225-0.47-0.184-0.742l1.38-8.998c0.037-0.239 0.156-0.448 0.325-0.6 0.179-0.161 0.415-0.256 0.686-0.253h10.28v9.788l-3.608 8.118c-0.307-0.098-0.582-0.268-0.806-0.492-0.363-0.363-0.586-0.861-0.586-1.414zM9 16v3c0 1.104 0.449 2.106 1.172 2.828s1.724 1.172 2.828 1.172c0.405 0 0.754-0.241 0.914-0.594l4-9c0.060-0.134 0.087-0.275 0.086-0.406v-11c0-0.552-0.448-1-1-1h-11.28c-0.767-0.009-1.482 0.281-2.021 0.763-0.505 0.452-0.857 1.076-0.967 1.783l-1.38 9.002c-0.125 0.82 0.096 1.614 0.55 2.231s1.147 1.063 1.965 1.187c0.165 0.025 0.333 0.037 0.492 0.034zM17 3h2.67c0.361-0.006 0.674 0.119 0.912 0.332 0.213 0.191 0.364 0.45 0.418 0.746v6.787c-0.037 0.34-0.208 0.63-0.455 0.833-0.235 0.194-0.537 0.306-0.861 0.301l-2.684 0.001c-0.552 0-1 0.448-1 1s0.448 1 1 1h2.656c0.81 0.012 1.569-0.27 2.16-0.756 0.622-0.511 1.059-1.251 1.176-2.11 0.005-0.040 0.008-0.087 0.008-0.134v-7c0-0.042-0.003-0.089-0.009-0.137-0.111-0.803-0.505-1.51-1.075-2.020-0.6-0.537-1.397-0.858-2.246-0.842h-2.67c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+  export const thumbUp =
+    "M13 9c0 0.552 0.448 1 1 1h5.679c0.065 0.002 0.153 0.011 0.153 0.011 0.273 0.041 0.502 0.188 0.655 0.396s0.225 0.47 0.184 0.742l-1.38 8.998c-0.037 0.239-0.156 0.448-0.325 0.6-0.18 0.161-0.415 0.256-0.686 0.253h-10.28v-9.788l3.608-8.118c0.307 0.098 0.582 0.268 0.806 0.492 0.363 0.363 0.586 0.861 0.586 1.414zM15 8v-3c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172c-0.405 0-0.754 0.241-0.914 0.594l-4 9c-0.060 0.134-0.087 0.275-0.086 0.406v11c0 0.552 0.448 1 1 1h11.28c0.767 0.009 1.482-0.281 2.021-0.763 0.505-0.452 0.857-1.076 0.967-1.783l1.38-9.002c0.125-0.82-0.096-1.614-0.55-2.231s-1.147-1.063-1.965-1.187c-0.165-0.025-0.333-0.037-0.492-0.034zM7 21h-3c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-7c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h3c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v7c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h3c0.552 0 1-0.448 1-1s-0.448-1-1-1z";
+
+  export const spinner =
+    "M24 12c-0.030-1.567-0.37-3.129-0.998-4.558-0.626-1.43-1.534-2.725-2.649-3.795s-2.436-1.918-3.867-2.476c-1.43-0.561-2.967-0.829-4.486-0.796-1.519 0.030-3.031 0.36-4.414 0.969-1.384 0.607-2.638 1.488-3.673 2.568s-1.855 2.36-2.395 3.745c-0.542 1.384-0.8 2.872-0.767 4.342 0.030 1.471 0.351 2.933 0.941 4.27 0.588 1.338 1.441 2.551 2.487 3.552s2.284 1.793 3.624 2.314c1.339 0.523 2.776 0.771 4.199 0.739 1.423-0.030 2.835-0.341 4.127-0.912 1.293-0.569 2.464-1.394 3.43-2.406s1.731-2.209 2.233-3.502c0.305-0.784 0.513-1.603 0.622-2.433 0.029 0.002 0.059 0.003 0.088 0.003 0.828 0 1.5-0.672 1.5-1.5 0-0.042-0.002-0.084-0.006-0.125h0.006zM21.617 15.983c-0.55 1.247-1.347 2.377-2.324 3.309s-2.133 1.668-3.381 2.151c-1.248 0.485-2.585 0.714-3.911 0.682-1.327-0.030-2.639-0.322-3.84-0.855-1.201-0.531-2.289-1.301-3.187-2.243s-1.606-2.057-2.070-3.259c-0.466-1.202-0.685-2.489-0.653-3.768 0.031-1.279 0.312-2.541 0.826-3.696 0.512-1.155 1.254-2.202 2.162-3.066s1.981-1.544 3.138-1.989c1.156-0.447 2.394-0.656 3.624-0.624 1.23 0.031 2.443 0.303 3.552 0.798 1.11 0.493 2.115 1.207 2.944 2.081s1.481 1.905 1.908 3.016c0.428 1.111 0.628 2.298 0.596 3.48h0.006c-0.003 0.041-0.006 0.083-0.006 0.125 0 0.774 0.586 1.41 1.338 1.491-0.146 0.816-0.387 1.613-0.721 2.367z";
+
+  /**
+   * media icons
+   */
+  export const file =
+    "M17.586 7h-2.586v-2.586zM20.707 7.293l-6-6c-0.092-0.092-0.202-0.166-0.324-0.217s-0.253-0.076-0.383-0.076h-8c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v16c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h12c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-12c0-0.276-0.112-0.526-0.293-0.707zM13 3v5c0 0.552 0.448 1 1 1h5v11c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-12c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-16c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM16 12h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1h8c0.552 0 1-0.448 1-1s-0.448-1-1-1zM16 16h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1h8c0.552 0 1-0.448 1-1s-0.448-1-1-1zM10 8h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1h2c0.552 0 1-0.448 1-1s-0.448-1-1-1z";
+  export const image =
+    "M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM11 8.5c0-0.69-0.281-1.316-0.732-1.768s-1.078-0.732-1.768-0.732-1.316 0.281-1.768 0.732-0.732 1.078-0.732 1.768 0.281 1.316 0.732 1.768 1.078 0.732 1.768 0.732 1.316-0.281 1.768-0.732 0.732-1.078 0.732-1.768zM9 8.5c0 0.138-0.055 0.262-0.146 0.354s-0.216 0.146-0.354 0.146-0.262-0.055-0.354-0.146-0.146-0.216-0.146-0.354 0.055-0.262 0.146-0.354 0.216-0.146 0.354-0.146 0.262 0.055 0.354 0.146 0.146 0.216 0.146 0.354zM7.414 20l8.586-8.586 4 4v3.586c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293zM20 12.586l-3.293-3.293c-0.391-0.391-1.024-0.391-1.414 0l-10.644 10.644c-0.135-0.050-0.255-0.129-0.356-0.23-0.182-0.182-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z";
+  export const audio =
+    "M8 18c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM22 16v-13c0-0.050-0.004-0.107-0.014-0.164-0.091-0.545-0.606-0.913-1.151-0.822l-12 2c-0.476 0.081-0.835 0.492-0.835 0.986v9.535c-0.588-0.34-1.272-0.535-2-0.535-1.104 0-2.106 0.449-2.828 1.172s-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828v-12.153l10-1.667v8.355c-0.588-0.34-1.272-0.535-2-0.535-1.104 0-2.106 0.449-2.828 1.172s-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM20 16c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414z";
+  export const video =
+    "M16 11h-8v-8h8zM8 13h8v8h-8zM6 6h-3v-1.82c0-0.326 0.131-0.62 0.346-0.834s0.508-0.346 0.834-0.346h1.82zM3 8h3v3h-3zM6 16h-3v-3h3zM3 18h3v3h-1.82c-0.326 0-0.62-0.131-0.834-0.346s-0.346-0.508-0.346-0.834zM21 16h-3v-3h3zM18 18h3v1.82c0 0.326-0.131 0.62-0.346 0.834s-0.508 0.346-0.834 0.346h-1.82zM21 6h-3v-3h1.82c0.326 0 0.62 0.131 0.834 0.346s0.346 0.508 0.346 0.834zM23 7v-2.82c0-0.878-0.357-1.674-0.931-2.249s-1.371-0.931-2.249-0.931h-15.64c-0.878 0-1.674 0.357-2.249 0.931s-0.931 1.371-0.931 2.249v15.64c0 0.878 0.357 1.674 0.931 2.249s1.371 0.931 2.249 0.931h15.64c0.878 0 1.674-0.357 2.249-0.931s0.931-1.371 0.931-2.249zM18 8h3v3h-3z";
+  export const mic =
+    "M12 2c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v8c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414v-8c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586zM12 0c-1.104 0-2.106 0.449-2.828 1.172s-1.172 1.724-1.172 2.828v8c0 1.104 0.449 2.106 1.172 2.828s1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828v-8c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172zM8 24h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-2.062c1.809-0.226 3.432-1.056 4.657-2.281 1.446-1.447 2.343-3.448 2.343-5.657v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2c0 1.657-0.67 3.156-1.757 4.243s-2.586 1.757-4.243 1.757-3.156-0.67-4.243-1.757-1.757-2.586-1.757-4.243v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2c0 2.209 0.897 4.21 2.343 5.657 1.225 1.225 2.847 2.055 4.657 2.281v2.062h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+  export const play =
+    "M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z";
+  export const pause =
+    "M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z";
+  export const volumeOn =
+    "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM18.363 5.637c1.757 1.758 2.635 4.059 2.635 6.364 0 2.304-0.878 4.605-2.635 6.362-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c2.147-2.147 3.22-4.963 3.221-7.776s-1.074-5.63-3.221-7.778c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM14.833 9.167c0.781 0.781 1.171 1.803 1.171 2.828s-0.39 2.047-1.171 2.828c-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c1.171-1.171 1.757-2.708 1.757-4.242s-0.586-3.071-1.757-4.242c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+  export const volumeOff =
+    "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM16.293 9.707l2.293 2.293-2.293 2.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l2.293-2.293 2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.293-2.293 2.293-2.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+
+  export const alignLeft =
+    "M3,21V20H20V21H3M3,17V16H14V17H3M3,13V12H20V13H3M3,9V8H14V9H3M3,5V4H20V5H3Z";
+  export const alignCenter =
+    "M3,4H20V5H3V4M7,8H16V9H7V8M3,12H20V13H3V12M7,16H16V17H7V16M3,20H20V21H3V20Z";
+  export const alignRight =
+    "M20,4V5H3V4H20M20,8V9H9V8H20M20,12V13H3V12H20M20,16V17H9V16H20M20,20V21H3V20H20Z";
+  export const alignJustify =
+    "M3,5V4H20V5H3M3,9V8H20V9H3M3,13V12H20V13H3M3,17V16H20V17H3M3,21V20H20V21H3Z";
+
+  export const formatBold =
+    "M16,14.5C16,16.43 14.43,18 12.5,18H7V5H11.5C13.43,5 15,6.57 15,8.5C15,9.6 14.5,10.57 13.71,11.21C15.05,11.71 16,13 16,14.5M11.5,6H8V11H11.5C12.88,11 14,9.88 14,8.5C14,7.12 12.88,6 11.5,6M12.5,12H8V17H12.5C13.88,17 15,15.88 15,14.5C15,13.12 13.88,12 12.5,12Z";
+  export const formatItalic = "M6,17V16H9L13,5H10V4H17V5H14L10,16H13V17H6Z";
+  export const formatUnderline =
+    "M17,11.5C17,14.54 14.54,17 11.5,17C8.46,17 6,14.54 6,11.5V4H7V11.5C7,14 9,16 11.5,16C14,16 16,14 16,11.5V4H17V11.5M5,21V20H18V21H5Z";
+  export const formatClear =
+    "M8,4H17V5H13L8.5,17H7.5L12,5H8V4M5,21V20H13V21H5M16.79,17.5L14,14.71L14.71,14L17.5,16.79L20.29,14L21,14.71L18.21,17.5L21,20.29L20.29,21L17.5,18.21L14.71,21L14,20.29L16.79,17.5Z";
+  export const formatIndentDecrease =
+    "M3,21V20H20V21H3M11,17V16H20V17H11M11,13V12H20V13H11M11,9V8H20V9H11M3,5V4H20V5H3M3,12.5L8.5,18V7L3,12.5M4.41,12.5L7.5,9.41V15.59L4.41,12.5Z";
+  export const formatIndentIncrease =
+    "M3,21V20H20V21H3M11,17V16H20V17H11M11,13V12H20V13H11M11,9V8H20V9H11M3,5V4H20V5H3M8.5,12.5L3,18V7L8.5,12.5M7.09,12.5L4,9.41V15.59L7.09,12.5Z";
+  export const formatListBullet =
+    "M20,18V19H7V18H20M3.5,17.5C4.05,17.5 4.5,17.95 4.5,18.5C4.5,19.05 4.05,19.5 3.5,19.5C2.95,19.5 2.5,19.05 2.5,18.5C2.5,17.95 2.95,17.5 3.5,17.5M20,12V13H7V12H20M3.5,11.5C4.05,11.5 4.5,11.95 4.5,12.5C4.5,13.05 4.05,13.5 3.5,13.5C2.95,13.5 2.5,13.05 2.5,12.5C2.5,11.95 2.95,11.5 3.5,11.5M20,6V7H7V6H20M3.5,5.5C4.05,5.5 4.5,5.95 4.5,6.5C4.5,7.05 4.05,7.5 3.5,7.5C2.95,7.5 2.5,7.05 2.5,6.5C2.5,5.95 2.95,5.5 3.5,5.5Z";
+  export const formatListNumber =
+    "M2,11V10H5V10.9L3.2,13H5V14H2V13.1L3.8,11H2M3,8V5H2V4H4V8H3M2,17V16H5V20H2V19H4V18.5H3V17.5H4V17H2M20,6V7H7V6H20M20,12V13H7V12H20M20,18V19H7V18H20Z";
+
+  /**
+   * chart icons
+   */
+  export const chartColumn =
+    "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z";
+  export const chartBar =
+    "M3 2v20h18v-2h-16v-2h9v-4h-9v-2h13v-4h-13v-2h5v-4h-7z";
+  export const chartLine =
+    "M16,11.78L20.24,4.45L21.97,5.45L16.74,14.5L10.23,10.75L5.46,19H22V21H2V3H4V17.54L9.5,8L16,11.78Z";
+  export const chartRadar =
+    "M12,5L19.6,10.5L16.7,19.4H7.3L4.4,10.5L12,5M12,2.5L2,9.8L5.8,21.5H18.1L22,9.8L12,2.5Z";
+  export const chartPie =
+    "M11,2V22C5.9,21.5 2,17.2 2,12C2,6.8 5.9,2.5 11,2M13,2V11H22C21.5,6.2 17.8,2.5 13,2M13,13V22C17.7,21.5 21.5,17.8 22,13H13Z";
+  export const chartLineStacked =
+    "M17.45,15.18L22,6.81V19L22,21H2V3H4V15.54L4,19H4.31L6,19H6.57L10.96,11.44L17.45,15.18M22,3L21.97,3.45L17,11L10,6L6,12V3H22Z";
+  export const chartBarStacked =
+    "M3 2v20h18v-2h-16v-2h2v-4h-2v-2h3v-4h-3v-2h2v-4h-4zM10 6v-4h-2v4h2zM18 12v-4h-3v4h3zM9 8v4h5v-4h-5zM14 18v-4h-2v4h2zM8 14v4h3v-4h-3z";
+  export const chartColumnStacked =
+    "M22,21H2V3H4V19H6V17H10V19H12V16H16V19H18V17H22V21M18,14H22V16H18V14M12,6H16V9H12V6M16,15H12V10H16V15M6,10H10V12H6V10M10,16H6V13H10V16Z";
+
+  export const chartActivityScatter =
+    "M2,2H4V20H22V22H2V2M9,10A3,3 0 0,1 12,13A3,3 0 0,1 9,16A3,3 0 0,1 6,13A3,3 0 0,1 9,10M13,2A3,3 0 0,1 16,5A3,3 0 0,1 13,8A3,3 0 0,1 10,5A3,3 0 0,1 13,2M18,12A3,3 0 0,1 21,15A3,3 0 0,1 18,18A3,3 0 0,1 15,15A3,3 0 0,1 18,12Z";
+  export const chartActivityCalendar =
+    "M2,4V6H4V4H2M20,4V6H22V4H20M2,7V9H4V7H2M5,7V9H7V7H5M14,7V9H16V7H14M17,7V9H19V7H17M20,7V9H22V7H20M2,10V12H4V10H2M5,10V12H7V10H5M8,10V12H10V10H8M11,10V12H13V10H11M14,10V12H16V10H14M17,10V12H19V10H17M20,10V12H22V10H20M2,13V15H4V13H2M5,13V15H7V13H5M8,13V15H10V13H8M11,13V15H13V13H11M14,13V15H16V13H14M17,13V15H19V13H17M20,13V15H22V13H20M5";
+
+  export const palette =
+    "M12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2C17.5,2 22,6 22,11A6,6 0 0,1 16,17H14.2C13.9,17 13.7,17.2 13.7,17.5C13.7,17.6 13.8,17.7 13.8,17.8C14.2,18.3 14.4,18.9 14.4,19.5C14.5,20.9 13.4,22 12,22M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C12.3,20 12.5,19.8 12.5,19.5C12.5,19.3 12.4,19.2 12.4,19.1C12,18.6 11.8,18.1 11.8,17.5C11.8,16.1 12.9,15 14.3,15H16A4,4 0 0,0 20,11C20,7.1 16.4,4 12,4M6.5,10C7.3,10 8,10.7 8,11.5C8,12.3 7.3,13 6.5,13C5.7,13 5,12.3 5,11.5C5,10.7 5.7,10 6.5,10M9.5,6C10.3,6 11,6.7 11,7.5C11,8.3 10.3,9 9.5,9C8.7,9 8,8.3 8,7.5C8,6.7 8.7,6 9.5,6M14.5,6C15.3,6 16,6.7 16,7.5C16,8.3 15.3,9 14.5,9C13.7,9 13,8.3 13,7.5C13,6.7 13.7,6 14.5,6M17.5,10C18.3,10 19,10.7 19,11.5C19,12.3 18.3,13 17.5,13C16.7,13 16,12.3 16,11.5C16,10.7 16.7,10 17.5,10Z";
+
+  export const widget =
+    "M16.7 4.5L19.5 7.3L16.7 10.1L13.9 7.3L16.7 4.5M9 5V9H5V5H9M19 15V19H15V15H19M16.7 1.7L11 7.3L16.7 13H13V21H21V13H16.7L22.3 7.3L16.7 1.7M11 3H3V11H11V3M9 15V19H5V15H9M11 13H3V21H11V13Z";
+
+  /**
+   * form icons
+   */
+  export const checkboxOff =
+    "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z";
+  export const checkboxOn =
+    "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
+  export const checkboxInt =
+    "M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M17,17H7V7H17V17Z";
+  export const radioOff =
+    "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
+  export const radioOn =
+    "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z";
+
+  export const colorSwatch =
+    "M16 14V12H17.61C17.85 12.71 18 13.39 18 14H16M15.58 8C15.12 7.29 14.65 6.61 14.2 6H14V8H15.58M16 12V10H14V12H16M16 8.68V10H16.74C16.5 9.56 16.26 9.11 16 8.68M12 16V14H14V12H12V10H14V8H12V6H14V5.73C12.9 4.26 12 3.25 12 3.25S6 10 6 14C6 17.31 8.69 20 12 20V18H14V16H12M14 19.65C14.75 19.39 15.42 19 16 18.46V18H14V19.65M14 16H16V14H14V16M16 18H16.46C17 17.42 17.39 16.75 17.65 16H16V18Z";
+  export const colorPicker =
+    "M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z";
+
+  /**
+   * alert icons
+   */
+  export const info =
+    "M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM13 16v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1v4c0 0.552 0.448 1 1 1s1-0.448 1-1zM12 9c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z";
+  export const alert =
+    "M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 8v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM12 17c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z";
+  export const error =
+    "M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM8.293 9.707l2.293 2.293-2.293 2.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l2.293-2.293 2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.293-2.293 2.293-2.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+  export const success =
+    "M21 11.080v0.92c-0.001 2.485-1.009 4.733-2.64 6.362s-3.88 2.634-6.365 2.632-4.734-1.009-6.362-2.64-2.634-3.879-2.633-6.365 1.009-4.733 2.64-6.362 3.88-2.634 6.365-2.633c1.33 0.001 2.586 0.289 3.649 0.775 0.502 0.23 1.096 0.008 1.325-0.494s0.008-1.096-0.494-1.325c-1.327-0.606-2.866-0.955-4.479-0.956-3.037-0.002-5.789 1.229-7.78 3.217s-3.224 4.74-3.226 7.777 1.229 5.789 3.217 7.78 4.739 3.225 7.776 3.226 5.789-1.229 7.78-3.217 3.225-4.739 3.227-7.777v-0.92c0-0.552-0.448-1-1-1s-1 0.448-1 1zM21.293 3.293l-9.293 9.302-2.293-2.292c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l3 3c0.391 0.391 1.024 0.39 1.415 0l10-10.010c0.39-0.391 0.39-1.024-0.001-1.414s-1.024-0.39-1.414 0.001z";
+  export const warning =
+    "M11.148 4.374c0.073-0.123 0.185-0.242 0.334-0.332 0.236-0.143 0.506-0.178 0.756-0.116s0.474 0.216 0.614 0.448l8.466 14.133c0.070 0.12 0.119 0.268 0.128 0.434-0.015 0.368-0.119 0.591-0.283 0.759-0.18 0.184-0.427 0.298-0.693 0.301l-16.937-0.001c-0.152-0.001-0.321-0.041-0.481-0.134-0.239-0.138-0.399-0.359-0.466-0.607s-0.038-0.519 0.092-0.745zM9.432 3.346l-8.47 14.14c-0.422 0.731-0.506 1.55-0.308 2.29s0.68 1.408 1.398 1.822c0.464 0.268 0.976 0.4 1.475 0.402h16.943c0.839-0.009 1.587-0.354 2.123-0.902s0.864-1.303 0.855-2.131c-0.006-0.536-0.153-1.044-0.406-1.474l-8.474-14.147c-0.432-0.713-1.11-1.181-1.854-1.363s-1.561-0.081-2.269 0.349c-0.429 0.26-0.775 0.615-1.012 1.014zM11 9v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM12 18c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z";
+  export const question =
+    "M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM10.033 9.332c0.183-0.521 0.559-0.918 1.022-1.14s1.007-0.267 1.528-0.083c0.458 0.161 0.819 0.47 1.050 0.859 0.183 0.307 0.284 0.665 0.286 1.037 0 0.155-0.039 0.309-0.117 0.464-0.080 0.16-0.203 0.325-0.368 0.49-0.709 0.709-1.831 1.092-1.831 1.092-0.524 0.175-0.807 0.741-0.632 1.265s0.741 0.807 1.265 0.632c0 0 1.544-0.506 2.613-1.575 0.279-0.279 0.545-0.614 0.743-1.010 0.2-0.4 0.328-0.858 0.328-1.369-0.004-0.731-0.204-1.437-0.567-2.049-0.463-0.778-1.19-1.402-2.105-1.724-1.042-0.366-2.135-0.275-3.057 0.167s-1.678 1.238-2.044 2.28c-0.184 0.521 0.090 1.092 0.611 1.275s1.092-0.091 1.275-0.611zM12 18c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z";
+}
diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
new file mode 100644
index 0000000..4ad3980
--- /dev/null
+++ b/packages/core/src/types/index.ts
@@ -0,0 +1,240 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+/* istanbul ignore file */
+
+import { type Placement } from "@floating-ui/react";
+import { type JSXElementConstructor, type Ref } from "react";
+
+export const EMPTY_ARRAY = [];
+Object.freeze(EMPTY_ARRAY);
+
+export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
+
+export type ColorType =
+  | "primary"
+  | "accent"
+  | "info"
+  | "danger"
+  | "success"
+  | "warning";
+
+export type PaletteType =
+  | "scarlet"
+  | "pumpkin"
+  | "marigold"
+  | "avacado"
+  | "jade"
+  | "denim"
+  | "iris"
+  | "lilac"
+  | "coral"
+  | "wood"
+  | "silver"
+  | "steel"
+  | "olive"
+  | "sand";
+
+export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
+
+export const ThemeColors = [
+  "primary",
+  "accent",
+  "info",
+  "danger",
+  "success",
+  "warning",
+  "invert",
+  "dimmed",
+  "muted",
+  "gray",
+  "dark",
+  "light",
+];
+
+export interface TooltipType {
+  /**
+   * tooltip content
+   */
+  content?: string | JSX.Element;
+  /**
+   * tooltip color
+   */
+  color?: ColorType;
+  /**
+   * tooltip placement
+   */
+  placement?: Placement;
+}
+
+export interface BadgeType {
+  /**
+   * badge value
+   */
+  value?: number | string;
+  /**
+   * max value for number display
+   */
+  max?: number;
+  /**
+   * ping animation
+   */
+  ping?: boolean;
+  /**
+   * badge CSS className
+   */
+  className?: string;
+}
+
+export interface CssProp {
+  /**
+   * css classname(s)
+   */
+  className?: string;
+}
+
+export interface TestProps {
+  /**
+   * data attribute for test id
+   */
+  "data-testid"?: string;
+  /**
+   * data attribute for test value
+   */
+  "data-test-value"?: AnyObject;
+}
+
+export type Elements<T> =
+  | React.ReactElement<T>
+  | React.ReactPortal
+  | string
+  | number
+  | boolean
+  | null
+  | undefined;
+
+export type AriaProps = React.AriaAttributes;
+
+/**
+ * For wrapping components
+ */
+
+export interface RefProp<T = HTMLElement> {
+  ref?: Ref<T>;
+}
+
+/* *********** */
+
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+export type CallbackReturn<T = unknown> = void | T | Promise<T | void>;
+
+export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+
+export type PropsOf<AsTag extends ReactTag> = AsTag extends React.ElementType
+  ? Omit<React.ComponentProps<AsTag>, "ref">
+  : never;
+
+export type PolymorphicProps<AsTag extends ReactTag> = Omit<
+  PropsOf<AsTag>,
+  "children" | "as" | "className"
+> & {
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  as?: AsTag;
+};
+
+export interface IconProps {
+  /**
+   * svg path / image url
+   */
+  icon?: string;
+  /**
+   * flip icon in rtl
+   */
+  rtlFlip?: boolean;
+  /**
+   * icon background color
+   */
+  iconBg?: ColorType | string;
+  /**
+   * icon color
+   */
+  iconColor?: ColorType | string;
+}
+
+export interface CollapseProps {
+  /**
+   * Allow collapsing
+   */
+  collapsable?: boolean;
+  /**
+   * Default collapsed
+   */
+  collapsed?: boolean;
+  /**
+   * Collapse event
+   */
+  onCollapse?: (state: boolean) => void;
+}
+export interface ExpandProps {
+  /**
+   * Allow expanding
+   */
+  expandable?: boolean;
+  /**
+   * Default expanded
+   */
+  expanded?: boolean;
+  /**
+   * Expand event
+   */
+  onExpand?: (state: boolean) => void;
+}
+
+export interface TooltipProp {
+  /**
+   * floating tooltip
+   */
+  tooltip?: string | TooltipType;
+}
+
+export interface ChildProp<T = JSX.Element> {
+  children: Elements<T>;
+}
+
+export interface ChildrenProp<T = JSX.Element> {
+  children: Elements<T> | Array<Elements<T>>;
+}
+
+export interface PositionObject {
+  top: number;
+  left: number;
+}
+
+export interface SizeObject {
+  width: number;
+  height: number;
+}
diff --git a/packages/core/src/typography/Abbr.tsx b/packages/core/src/typography/Abbr.tsx
new file mode 100644
index 0000000..cc3e860
--- /dev/null
+++ b/packages/core/src/typography/Abbr.tsx
@@ -0,0 +1,152 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isEmpty, isString, tokenize } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Fragment, useCallback, useMemo } from "react";
+import { useMemoDebugger } from "../hooks/useEffectDebugger";
+import { Tooltip, getTooltipProps } from "../overlays/tooltip/Tooltip";
+import { type ChildProp, type ColorType } from "../types";
+import { getColor, getColorClass } from "../utils";
+import classes from "./Typography.module.css";
+
+interface AbbrTextProps {
+  children: string;
+  color?: string;
+  tooltip?: string;
+  content?: string;
+}
+
+const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
+  const TooltipWrapper = useMemo(
+    () => (tooltip ? Tooltip : Fragment),
+    [tooltip],
+  );
+  const tooltipProps = useMemo(() => {
+    return { ...getTooltipProps(tooltip), copyContent: content };
+  }, [tooltip, content]);
+
+  return (
+    <TooltipWrapper {...tooltipProps}>
+      <abbr
+        className={classNames(
+          classes.abbr,
+          "whitespace-nowrap",
+          color && getColorClass(color),
+        )}
+        style={
+          color ? ({ "--abbr-color": getColor(color) } as AnyObject) : undefined
+        }
+      >
+        {children}
+      </abbr>
+    </TooltipWrapper>
+  );
+};
+
+export interface AbbrProps extends ChildProp<string> {
+  /**
+   * content to copy using the tooltip copy action
+   */
+  copyContent?: "text" | "tooltip";
+  /**
+   * texts to match and abbreviate within
+   *
+   * [textPart, tooltip, color (class name or color string)]
+   */
+  abbr: Array<[textPart: string, tooltip: string, color?: ColorType | string]>;
+  /**
+   * renderer callback
+   */
+  renderer?: (part: string[]) => JSX.Element;
+}
+
+/**
+ * Typography abbr component to wrap text parts in `abbr` with tooltip
+ */
+export const Abbr = ({
+  children,
+  abbr,
+  renderer,
+  copyContent = "text",
+}: AbbrProps) => {
+  /** ***************** abbr text renderer *******************/
+  const abbrRender = useCallback(
+    (text: string, tooltip: string, color = "") => {
+      return (
+        <AbbrText
+          color={color}
+          tooltip={tooltip}
+          content={copyContent === "tooltip" ? tooltip : text}
+        >
+          {(renderer?.([text, color]) ?? text) as string}
+        </AbbrText>
+      );
+    },
+    [renderer, copyContent],
+  );
+
+  /** ***************** tokenize text with abbr list *******************/
+  const inner = useMemoDebugger(
+    () => {
+      if (isString(children)) {
+        if (!isEmpty(abbr)) {
+          const tokens = tokenize(
+            children,
+            abbr.map(([keyword]) => keyword),
+          );
+          const titles: KeyValue = abbr.reduce(
+            (t, [a, tooltip = "", color = ""]) => ({
+              ...t,
+              [a.toLowerCase()]: {
+                tooltip,
+                color,
+              },
+            }),
+            {},
+          );
+          return (
+            <Fragment>
+              {tokens.map(([start, text], i) => {
+                const { tooltip = "", color = "" } =
+                  titles[text.toLowerCase()] ?? {};
+                return (
+                  <Fragment key={i}>
+                    {start}
+                    {text ? abbrRender(text, tooltip, color) : null}
+                  </Fragment>
+                );
+              })}
+            </Fragment>
+          );
+        }
+      }
+      return children;
+    },
+    [children, abbr, abbrRender],
+    "TextAbbr inner",
+  );
+
+  /** ***************** component *******************/
+  return <span>{inner}</span>;
+};
diff --git a/packages/core/src/typography/Copy.tsx b/packages/core/src/typography/Copy.tsx
new file mode 100644
index 0000000..0dfbad8
--- /dev/null
+++ b/packages/core/src/typography/Copy.tsx
@@ -0,0 +1,60 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "../components/button/Button";
+import { Tooltip } from "../overlays/tooltip/Tooltip";
+import { type SizeType } from "../types";
+import { CoreIcons } from "../types/icons";
+
+export interface CopyProps {
+  text: string;
+  /**
+   * button size
+   */
+  size?: SizeType;
+}
+
+export const Copy = ({ text, size }: CopyProps) => {
+  const { t } = useTranslation("core");
+
+  /** ***************** handle copy *******************/
+  const doCopy = useCallback(() => {
+    void navigator.clipboard.writeText(text);
+  }, [text]);
+
+  return (
+    <Tooltip content={t("action.copy")}>
+      <Button
+        icon={CoreIcons.copy}
+        aria-label="Copy text"
+        actionMessage={t("action.copied")}
+        variant="link"
+        size={size}
+        className="align-bottom"
+        onClick={doCopy}
+      />
+    </Tooltip>
+  );
+};
diff --git a/packages/core/src/typography/Link.tsx b/packages/core/src/typography/Link.tsx
new file mode 100644
index 0000000..505d0df
--- /dev/null
+++ b/packages/core/src/typography/Link.tsx
@@ -0,0 +1,110 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import { useMemoDebugger } from "../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type PolymorphicProps,
+  type RefProp,
+  type SizeType,
+} from "../types";
+import { getBgClass, getColor, getColorClass } from "../utils";
+import { TextSizeMap } from "./types";
+
+export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
+  /**
+   * link background (CSS color / tailwind color)
+   */
+  bg?: ColorType | string;
+  /**
+   * link color (CSS color / tailwind color)
+   */
+  color?: ColorType | string;
+  /**
+   * link size
+   */
+  size?: SizeType | number | string;
+  /**
+   * font family
+   */
+  family?: "sans" | "serif" | "mono";
+}
+
+/**
+ * Typography link component
+ */
+export const Link = <Tag extends React.ElementType = "a">({
+  ref,
+  as,
+  children,
+  className,
+  bg,
+  color,
+  family,
+  size,
+  ...aria
+}: LinkProps & PolymorphicProps<Tag>) => {
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (bg) {
+        s.backgroundColor = getColor(bg);
+      }
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (size && !(size in TextSizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in TextSizeMap) {
+        s.fontSize = TextSizeMap[size];
+      }
+      return s;
+    },
+    [bg, color, size, family],
+    "Link styles",
+  );
+
+  const E = as ?? "a";
+  return (
+    <E
+      className={classNames(
+        "link",
+        className,
+        family && `font-${family}`,
+        bg && getBgClass(bg),
+        color && getColorClass(color),
+      )}
+      style={styles}
+      ref={ref as AnyObject}
+      {...aria}
+    >
+      {children}
+    </E>
+  );
+};
diff --git a/packages/core/src/typography/Mark.tsx b/packages/core/src/typography/Mark.tsx
new file mode 100644
index 0000000..a4683a9
--- /dev/null
+++ b/packages/core/src/typography/Mark.tsx
@@ -0,0 +1,122 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isEmpty, isString, tokenize } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Fragment, useCallback } from "react";
+import { useMemoDebugger } from "../hooks/useEffectDebugger";
+import { type ChildProp, type ColorType } from "../types";
+import { getBgClass, getColor } from "../utils";
+import classes from "./Typography.module.css";
+
+interface MarkTextProps {
+  children: string;
+  color?: string;
+}
+
+const MarkText = ({ color, children }: MarkTextProps) => {
+  return (
+    <mark
+      className={classNames(
+        classes.mark,
+        "whitespace-nowrap",
+        color && getBgClass(color),
+      )}
+      style={
+        color ? ({ "--mark-color": getColor(color) } as AnyObject) : undefined
+      }
+    >
+      {children}
+    </mark>
+  );
+};
+
+export interface MarkProps extends ChildProp<string> {
+  /**
+   * texts to match and abbreviate within
+   *
+   * [textPart, color (class name or color string)]
+   */
+  mark: Array<[textPart: string, color?: ColorType | string]>;
+  /**
+   * renderer callback
+   */
+  renderer?: (part: string[]) => JSX.Element;
+}
+
+/**
+ * Typography mark component to wrap text parts in `mark`
+ */
+export const Mark = ({ children, mark, renderer }: MarkProps) => {
+  /** ***************** abbr text renderer *******************/
+  const abbrRender = useCallback(
+    (text: string, color = "") => {
+      return (
+        <MarkText color={color}>
+          {(renderer?.([text, color]) ?? text) as string}
+        </MarkText>
+      );
+    },
+    [renderer],
+  );
+
+  /** ***************** tokenize text with abbr list *******************/
+  const inner = useMemoDebugger(
+    () => {
+      if (isString(children)) {
+        if (!isEmpty(mark)) {
+          const tokens = tokenize(
+            children,
+            mark.map(([keyword]) => keyword),
+          );
+          const titles: KeyValue = mark.reduce(
+            (t, [a, color = ""]) => ({
+              ...t,
+              [a.toLowerCase()]: { color },
+            }),
+            {},
+          );
+          return (
+            <Fragment>
+              {tokens.map(([start, text], i) => {
+                const { color = "" } = titles[text.toLowerCase()] ?? {};
+                return (
+                  <Fragment key={i}>
+                    {start}
+                    {text ? abbrRender(text, color) : null}
+                  </Fragment>
+                );
+              })}
+            </Fragment>
+          );
+        }
+      }
+      return children;
+    },
+    [children, mark, abbrRender],
+    "TextMark inner",
+  );
+
+  /** ***************** component *******************/
+  return <span>{inner}</span>;
+};
diff --git a/packages/core/src/typography/Text.tsx b/packages/core/src/typography/Text.tsx
new file mode 100644
index 0000000..0758bfd
--- /dev/null
+++ b/packages/core/src/typography/Text.tsx
@@ -0,0 +1,194 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isNumber } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useCallback, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  useLayoutEffectDebugger,
+  useMemoDebugger,
+} from "../hooks/useEffectDebugger";
+import { usePropToggle } from "../hooks/usePropToggle";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorWithGrays,
+  type CssProp,
+  type SizeType,
+  type TestProps,
+} from "../types";
+import {
+  calculateTextHeight,
+  getBgClass,
+  getColor,
+  getColorClass,
+} from "../utils";
+import classes from "./Typography.module.css";
+import { TextSizeMap } from "./types";
+
+export interface TextProps extends ChildrenProp, CssProp, AriaProps, TestProps {
+  /**
+   * render text as inline span
+   */
+  inline?: boolean;
+  /**
+   * text background (CSS color / tailwind color)
+   */
+  bg?: ColorWithGrays | string;
+  /**
+   * text color (CSS color / tailwind color)
+   */
+  color?: ColorWithGrays | string;
+  /**
+   * text size
+   */
+  size?: SizeType | number | string;
+  /**
+   * font family
+   */
+  family?: "sans" | "serif" | "mono";
+  /**
+   * text align
+   */
+  align?: "start" | "end" | "center" | "justify";
+  /**
+   * text line clamp
+   */
+  clamp?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+}
+
+/**
+ * Typography text component
+ */
+export const Text = ({
+  children,
+  className,
+  inline,
+  bg,
+  color,
+  family,
+  size,
+  clamp,
+  align,
+  ...aria
+}: TextProps) => {
+  const { t } = useTranslation("core");
+  const refContainer = useRef<HTMLDivElement>(null);
+  const [clipped, setClipped] = useState(false);
+  const [showMore, toggleShowMore, refShowMore] = usePropToggle(false);
+
+  /** ***************** check text height if clip enabled *******************/
+  const checkHeight = useCallback(() => {
+    const el = refContainer.current as HTMLElement;
+    if (el && isNumber(clamp) && clamp > 0 && !refShowMore.current) {
+      setClipped(
+        calculateTextHeight(el.firstElementChild as HTMLElement, el) >
+          el.offsetHeight,
+      );
+    }
+  }, [clamp]);
+
+  /** ***************** observe element resize to recalculate height *******************/
+  useLayoutEffectDebugger(
+    () => {
+      if (refContainer.current) {
+        const ob = new ResizeObserver(checkHeight);
+        ob.observe(refContainer.current as HTMLElement);
+        checkHeight();
+        return () => {
+          ob.disconnect();
+        };
+      }
+    },
+    [children, checkHeight],
+    "Text check height",
+  );
+
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (bg) {
+        s.backgroundColor = getColor(bg);
+      }
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (align) {
+        s.textAlign = align;
+      }
+      if (size && !(size in TextSizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in TextSizeMap) {
+        s.fontSize = TextSizeMap[size];
+      }
+      return s;
+    },
+    [bg, color, size, align, family],
+    "Text styles",
+  );
+
+  return inline ? (
+    <span className={className} style={styles} {...aria}>
+      {children}
+    </span>
+  ) : (
+    <article className={className}>
+      <div
+        ref={refContainer}
+        style={
+          { "--text-clamp": showMore ? "unset" : clamp ?? "unset" } as AnyObject
+        }
+      >
+        <div
+          className={classNames(
+            classes.text,
+            "text-reset mixed-lang px-[2px] whitespace-pre-wrap",
+            family && `font-${family}`,
+            bg && getBgClass(bg),
+            color && getColorClass(color),
+            clamp && "line-clamp-1",
+          )}
+          style={styles}
+          {...aria}
+        >
+          {children}
+        </div>
+      </div>
+      {clipped && (
+        <div className={classes.moreLink}>
+          <span
+            role="link"
+            tabIndex={0}
+            data-inner-clickable
+            onClick={(e) => [e.stopPropagation(), toggleShowMore()]}
+          >
+            ...{t(`action.${showMore ? "less" : "more"}`)}
+          </span>
+        </div>
+      )}
+    </article>
+  );
+};
diff --git a/packages/core/src/typography/Title.tsx b/packages/core/src/typography/Title.tsx
new file mode 100644
index 0000000..333b664
--- /dev/null
+++ b/packages/core/src/typography/Title.tsx
@@ -0,0 +1,126 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import {
+  type DetailedHTMLProps,
+  type ElementType,
+  type HTMLAttributes,
+} from "react";
+import { useMemoDebugger } from "../hooks/useEffectDebugger";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type ColorWithGrays,
+  type CssProp,
+  type SizeType,
+} from "../types";
+import { getBgClass, getColor, getColorClass } from "../utils";
+import { TitleSizeMap } from "./types";
+import classes from "./Typography.module.css";
+
+export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
+  as?: ElementType<
+    DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>,
+    "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+  >;
+  /**
+   * title background
+   */
+  bg?: ColorWithGrays | string;
+  /**
+   * title color (CSS color / tailwind color)
+   */
+  color?: ColorWithGrays | string;
+  /**
+   * title size (CSS color / tailwind color)
+   */
+  size?: SizeType | number | string;
+  /**
+   * font family
+   */
+  family?: "sans" | "serif" | "mono";
+  /**
+   * text align
+   */
+  align?: "start" | "end" | "center" | "justify";
+}
+
+/**
+ * Typography title component
+ */
+export const Title = ({
+  children,
+  className,
+  as,
+  bg,
+  color,
+  size,
+  align,
+  family,
+  ...aria
+}: TitleProps) => {
+  /** ***************** style map *******************/
+  const styles = useMemoDebugger(
+    () => {
+      const s: KeyValue = {};
+      if (bg) {
+        s.backgroundColor = getColor(bg);
+      }
+      if (color) {
+        s.color = getColor(color);
+      }
+      if (align) {
+        s.textAlign = align;
+      }
+      if (size && !(size in TitleSizeMap)) {
+        s.fontSize = size;
+      }
+      if (size && size in TitleSizeMap) {
+        s.fontSize = TitleSizeMap[size];
+      }
+      return s;
+    },
+    [bg, color, size, align],
+    "Title styles",
+  );
+
+  const E = as ?? "p";
+  return (
+    <E
+      className={classNames(
+        classes.title,
+        className,
+        "px-[2px] py-1 truncate whitespace-pre-wrap",
+        family && `font-${family}`,
+        !as && "text-lg",
+        bg && getBgClass(bg),
+        color && getColorClass(color),
+      )}
+      style={styles}
+      {...aria}
+    >
+      {children}
+    </E>
+  );
+};
diff --git a/packages/core/src/typography/Typography.module.css b/packages/core/src/typography/Typography.module.css
new file mode 100644
index 0000000..54bb405
--- /dev/null
+++ b/packages/core/src/typography/Typography.module.css
@@ -0,0 +1,68 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .title {
+    line-height: 1.125;
+  }
+
+  .moreLink {
+    margin: -0.25rem 0 1rem;
+    text-align: end;
+
+    & > span {
+      cursor: pointer;
+      user-select: none;
+      font-size: 0.75rem;
+      color: theme(colors.accent.700);
+
+      &:hover {
+        color: theme(colors.accent.500);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+      }
+    }
+  }
+}
+
+@layer util {
+  .text {
+    -webkit-line-clamp: var(--text-clamp);
+  }
+
+  .abbr {
+    --abbr-color: var(--accent);
+
+    color: color-mix(in lab, var(--abbr-color) 50%, var(--fabric-text));
+  }
+
+  .mark {
+    --mark-color: var(--accent);
+
+    background-color: color-mix(
+      in lab,
+      var(--mark-color) 25%,
+      var(--fabric-bg)
+    );
+  }
+}
diff --git a/packages/core/src/typography/index.ts b/packages/core/src/typography/index.ts
new file mode 100644
index 0000000..4821086
--- /dev/null
+++ b/packages/core/src/typography/index.ts
@@ -0,0 +1,29 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export { Abbr } from "./Abbr";
+export { Copy } from "./Copy";
+export { Link } from "./Link";
+export { Mark } from "./Mark";
+export { Text } from "./Text";
+export { Title } from "./Title";
diff --git a/packages/core/src/typography/types.ts b/packages/core/src/typography/types.ts
new file mode 100644
index 0000000..222f614
--- /dev/null
+++ b/packages/core/src/typography/types.ts
@@ -0,0 +1,38 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export const TitleSizeMap: KeyValue<string> = {
+  xs: "0.875rem",
+  sm: "1.125rem",
+  md: "1.5rem",
+  lg: "1.75rem",
+  xl: "2rem",
+};
+
+export const TextSizeMap: KeyValue<string> = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "1.75rem",
+};
diff --git a/packages/core/src/utils/calculateDimensions.ts b/packages/core/src/utils/calculateDimensions.ts
new file mode 100644
index 0000000..af00e50
--- /dev/null
+++ b/packages/core/src/utils/calculateDimensions.ts
@@ -0,0 +1,72 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+/** ***************** get css style property value *******************/
+export const getCssStyle = (element: HTMLElement, property: string) => {
+  return getComputedStyle(element).getPropertyValue(property);
+};
+
+/** ***************** calculate full width for given element *******************/
+export const calculateTextWidth = (
+  element: HTMLElement,
+  styleRoot?: HTMLElement,
+) => {
+  const clone = element.cloneNode(true) as HTMLElement;
+  clone.style.font = getCssStyle(styleRoot ?? element, "font");
+  clone.style.padding = getCssStyle(styleRoot ?? element, "padding");
+  clone.style.letterSpacing = getCssStyle(
+    styleRoot ?? element,
+    "letter-spacing",
+  );
+  clone.style.position = "absolute";
+  clone.style.top = "-10000%";
+  document.body.appendChild(clone);
+  const width = clone.offsetWidth;
+  clone.remove();
+  return width;
+};
+
+/** ***************** calculate full height for given element *******************/
+export const calculateTextHeight = (
+  element: HTMLElement,
+  styleRoot?: HTMLElement,
+) => {
+  const clone = element.cloneNode(true) as HTMLElement;
+  clone.style.font = getCssStyle(styleRoot ?? element, "font");
+  clone.style.width = `${element.offsetWidth}px`;
+  clone.style.padding = getCssStyle(styleRoot ?? element, "padding");
+  clone.style.lineHeight = getCssStyle(styleRoot ?? element, "line-height");
+  clone.style.letterSpacing = getCssStyle(
+    styleRoot ?? element,
+    "letter-spacing",
+  );
+  clone.style.webkitLineClamp = "unset";
+  clone.style.position = "absolute";
+  clone.style.left = "-10000%";
+  document.body.appendChild(clone);
+  const height = clone.offsetHeight;
+  clone.remove();
+  return height;
+};
diff --git a/packages/core/src/utils/getColor.ts b/packages/core/src/utils/getColor.ts
new file mode 100644
index 0000000..90697a9
--- /dev/null
+++ b/packages/core/src/utils/getColor.ts
@@ -0,0 +1,49 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+import { isColor } from "@react-fabric/utilities";
+
+export const getColor = (color: string) => {
+  if (color && isColor(color)) {
+    return color;
+  }
+};
+
+export const getBgClass = (bg: string) => {
+  if (bg && !isColor(bg)) {
+    return `bg-${bg}`;
+  }
+};
+
+export const getColorClass = (color: string) => {
+  if (color && !isColor(color)) {
+    return `text-${color}`;
+  }
+};
+export const getBorderClass = (color: string) => {
+  if (color && !isColor(color)) {
+    return `border-${color}`;
+  }
+};
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
new file mode 100644
index 0000000..75ff4e6
--- /dev/null
+++ b/packages/core/src/utils/index.ts
@@ -0,0 +1,28 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+export * from "./calculateDimensions";
+export * from "./getColor";
+export * from "./nodeCheck";
diff --git a/packages/core/src/utils/nodeCheck.ts b/packages/core/src/utils/nodeCheck.ts
new file mode 100644
index 0000000..72f4b90
--- /dev/null
+++ b/packages/core/src/utils/nodeCheck.ts
@@ -0,0 +1,34 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+import { isObject } from "@react-fabric/utilities";
+import { type ComponentType } from "react";
+
+export const nodeCheck = (
+  node: AnyObject,
+  ...types: Array<ComponentType<AnyObject>>
+) => {
+  return isObject(node) && "type" in node && types.includes(node.type);
+};
diff --git a/packages/core/stories/0.core/Aside.stories.tsx b/packages/core/stories/0.core/Aside.stories.tsx
new file mode 100644
index 0000000..03213d5
--- /dev/null
+++ b/packages/core/stories/0.core/Aside.stories.tsx
@@ -0,0 +1,71 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker, fakerAR } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Aside, Content, Page, Viewport } from "../../src";
+
+const meta: Meta = {
+  component: Aside,
+  title: "@core/Application",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Aside.test.tsx"],
+  },
+};
+
+export default meta;
+type AsideStory = StoryObj<typeof Aside>;
+
+const fakeParas = [
+  ...new Array(5).fill("").map(() => faker.lorem.sentences(5)),
+  ...new Array(5).fill("").map(() => fakerAR.lorem.sentences(5)),
+];
+
+export const _Aside: AsideStory = {
+  render: (args) => {
+    return (
+      <div className="min-h-[600px]">
+        <Viewport>
+          <Page paper>
+            <Aside {...args}>
+              <Content>
+                {fakeParas.map((p, i) => (
+                  <p key={i}>{p}</p>
+                ))}
+              </Content>
+            </Aside>
+          </Page>
+        </Viewport>
+      </div>
+    );
+  },
+  args: {
+    title: "Sidebar title",
+    icon: "mdi mdi-react",
+    onFlyout: fn(),
+    onCollapse: fn(),
+  },
+};
diff --git a/packages/core/stories/0.core/Content.stories.tsx b/packages/core/stories/0.core/Content.stories.tsx
new file mode 100644
index 0000000..d6f9fef
--- /dev/null
+++ b/packages/core/stories/0.core/Content.stories.tsx
@@ -0,0 +1,78 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker, fakerAR } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Content, Page, Text, Viewport } from "../../src";
+
+const meta: Meta = {
+  component: Content,
+  title: "@core/Application",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Content.test.tsx"],
+  },
+};
+
+export default meta;
+type ContentStory = StoryObj<typeof Content>;
+
+const fakeParas = [
+  ...new Array(10)
+    .fill("")
+    .map(
+      () =>
+        faker.lorem.sentences(10) +
+        "\n" +
+        faker.lorem.sentences(10) +
+        "\n" +
+        faker.lorem.sentences(10),
+    ),
+  ...new Array(10).fill("").map(() => fakerAR.lorem.sentences(30)),
+];
+
+export const _Content: ContentStory = {
+  render: (args) => {
+    return (
+      <div className="min-h-[600px]">
+        <Viewport>
+          <Page paper>
+            <Content {...args}>
+              {fakeParas.map((p, i) => (
+                <Text clamp={3} key={i} align="justify">
+                  {p}
+                </Text>
+              ))}
+            </Content>
+          </Page>
+        </Viewport>
+      </div>
+    );
+  },
+  args: {
+    onResize: fn(),
+    onScroll: fn(),
+  },
+};
diff --git a/packages/core/stories/0.core/Core.mdx b/packages/core/stories/0.core/Core.mdx
new file mode 100644
index 0000000..abff33e
--- /dev/null
+++ b/packages/core/stories/0.core/Core.mdx
@@ -0,0 +1,129 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import {
+  AnimationIndicator,
+  Aside,
+  Collapsable,
+  Content,
+  ErrorBoundary,
+  Page,
+  Section,
+  Viewport,
+} from "../../src";
+import * as PageStories from "./Page.stories";
+import * as ContentStories from "./Content.stories";
+import * as SectionStories from "./Section.stories";
+import * as AsideStories from "./Aside.stories";
+import * as ViewportStories from "./Viewport.stories";
+import * as ResponsiveStories from "./Responsive.stories";
+import * as ErrorBoundaryStories from "./ErrorBoundary.stories";
+import * as ThemeStories from "./Theme.stories";
+
+<Meta of={ViewportStories} />
+
+<Title>Application Core</Title>
+
+<Anchor storyId="viewport">
+  <Subheading>Viewport</Subheading>
+</Anchor>
+<Description of={Viewport} />
+<Canvas withToolbar of={ViewportStories._Viewport} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ViewportStories._Viewport} />
+</Collapsable>
+
+<Anchor storyId="page">
+  <Subheading>Page</Subheading>
+</Anchor>
+<Description of={Page} />
+<Canvas withToolbar of={PageStories._Page} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={PageStories._Page} />
+</Collapsable>
+
+<Anchor storyId="content">
+  <Subheading>Content</Subheading>
+</Anchor>
+<Description of={Content} />
+<Canvas withToolbar of={ContentStories._Content} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ContentStories._Content} />
+</Collapsable>
+
+<Anchor storyId="section">
+  <Subheading>Section</Subheading>
+</Anchor>
+<Description of={Section} />
+<Canvas withToolbar of={SectionStories._Section} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={SectionStories._Section} />
+</Collapsable>
+
+<Anchor storyId="aside">
+  <Subheading>Aside</Subheading>
+</Anchor>
+<Description of={Aside} />
+<Canvas withToolbar of={AsideStories._Aside} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={AsideStories._Aside} />
+</Collapsable>
+
+<Anchor storyId="error">
+  <Subheading>Error Boundary</Subheading>
+</Anchor>
+<Description of={ErrorBoundary} />
+<Canvas withToolbar of={ErrorBoundaryStories._ErrorBoundary} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ErrorBoundaryStories._ErrorBoundary} />
+</Collapsable>
+
+<Anchor storyId="responsive">
+  <Subheading>Responsive</Subheading>
+</Anchor>
+<Canvas
+  withToolbar
+  of={ResponsiveStories._Responsive}
+  story={{
+    inline: false,
+    height: 600,
+  }}
+/>
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ResponsiveStories._Responsive} />
+</Collapsable>
+
+<Anchor storyId="theme">
+  <Subheading>Theme</Subheading>
+</Anchor>
+<Canvas
+  withToolbar
+  of={ThemeStories._ThemeProvider}
+  story={{
+    inline: false,
+    height: 600,
+  }}
+/>
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ThemeStories._ThemeProvider} />
+</Collapsable>
diff --git a/packages/core/stories/0.core/ErrorBoundary.stories.tsx b/packages/core/stories/0.core/ErrorBoundary.stories.tsx
new file mode 100644
index 0000000..fc2bd79
--- /dev/null
+++ b/packages/core/stories/0.core/ErrorBoundary.stories.tsx
@@ -0,0 +1,78 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Aside,
+  Content,
+  ErrorBoundary,
+  Page,
+  Section,
+  Viewport,
+} from "../../src";
+
+const meta: Meta = {
+  component: ErrorBoundary,
+  title: "@core/Application",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/ErrorBoundary.test.tsx"],
+  },
+};
+
+export default meta;
+type ErrorBoundaryStory = StoryObj<typeof Page>;
+
+const BadComponent = () => {
+  throw Error("Bad component call");
+};
+
+export const _ErrorBoundary: ErrorBoundaryStory = {
+  render: (args) => {
+    return (
+      <div className="min-h-[600px]">
+        <Viewport>
+          <Page {...args}>
+            <Aside>
+              <BadComponent />
+            </Aside>
+            <Section>
+              <BadComponent />
+            </Section>
+            <Aside align="end">
+              <Content>
+                <BadComponent />
+              </Content>
+            </Aside>
+          </Page>
+        </Viewport>
+      </div>
+    );
+  },
+  args: {
+    paper: true,
+    title: "Page title",
+    icon: "mdi mdi-react",
+  },
+};
diff --git a/packages/core/stories/0.core/Page.stories.tsx b/packages/core/stories/0.core/Page.stories.tsx
new file mode 100644
index 0000000..5239cd5
--- /dev/null
+++ b/packages/core/stories/0.core/Page.stories.tsx
@@ -0,0 +1,67 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Page, Viewport } from "../../src";
+
+const meta: Meta = {
+  component: Page,
+  title: "@core/Application",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Page.test.tsx"],
+  },
+};
+
+export default meta;
+type PageStory = StoryObj<typeof Page>;
+
+export const _Page: PageStory = {
+  render: (args) => {
+    return (
+      <div className="min-h-[600px]">
+        <Viewport>
+          <Page {...args}>
+            <h1 className="area-head border-b text-center p-4">Page Header</h1>
+            <h6 className="area-foot border-t text-center p-4">Page Footer</h6>
+            <h4 className="area-side-s border-e bg-dimmed p-4">
+              Page Aside start
+            </h4>
+            <h4 className="area-side-e border-s bg-dimmed p-4">
+              Page Aside end
+            </h4>
+            <h4 className="area-content bg-base text-center p-4">
+              Page Content
+            </h4>
+          </Page>
+        </Viewport>
+      </div>
+    );
+  },
+  args: {
+    paper: true,
+    title: "Page title",
+    icon: "mdi mdi-react",
+  },
+};
diff --git a/packages/core/stories/0.core/Responsive.stories.tsx b/packages/core/stories/0.core/Responsive.stories.tsx
new file mode 100644
index 0000000..0f50104
--- /dev/null
+++ b/packages/core/stories/0.core/Responsive.stories.tsx
@@ -0,0 +1,113 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Col, Container, Content, Page, Row, Viewport } from "../../src";
+
+const meta: Meta = {
+  component: Container,
+  subcomponents: { Row, Col } as AnyObject,
+  title: "@core/Application",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Responsive.test.tsx"],
+  },
+};
+
+export default meta;
+type ResponsiveStory = StoryObj<typeof Container>;
+
+export const _Responsive: ResponsiveStory = {
+  render: (args) => {
+    return (
+      <Viewport>
+        <Page paper>
+          <Content>
+            <Container {...args}>
+              <Row>
+                <Col flex="full" className="text-dimmed">
+                  Auto sizing
+                </Col>
+                <Col className="bg-dimmed outline p-2">Auto content size</Col>
+                <Col className="bg-dimmed outline p-2 w-96">Fixed size</Col>
+                <Col flex="fill" className="bg-dimmed outline p-2">
+                  Fill remaining
+                </Col>
+                <Col flex="full" className="bg-dimmed outline p-2">
+                  Full width
+                </Col>
+              </Row>
+              <Row>
+                <Col flex="full" className="text-dimmed">
+                  Col spans
+                </Col>
+                <Col className="bg-dimmed outline p-2 span-12">span-12</Col>
+                <Col className="bg-dimmed outline p-2 span-1">span-1</Col>
+                <Col className="bg-dimmed outline p-2 span-11">span-11</Col>
+                <Col className="bg-dimmed outline p-2 span-2">span-2</Col>
+                <Col className="bg-dimmed outline p-2 span-10">span-10</Col>
+                <Col className="bg-dimmed outline p-2 span-3">span-3</Col>
+                <Col className="bg-dimmed outline p-2 span-9">span-9</Col>
+                <Col className="bg-dimmed outline p-2 span-4">span-4</Col>
+                <Col className="bg-dimmed outline p-2 span-8">span-8</Col>
+                <Col className="bg-dimmed outline p-2 span-5">span-5</Col>
+                <Col className="bg-dimmed outline p-2 span-7">span-7</Col>
+                <Col className="bg-dimmed outline p-2 span-6">span-6</Col>
+                <Col className="bg-dimmed outline p-2 span-6">span-6</Col>
+              </Row>
+              <Row>
+                <Col flex="fill" className="text-dimmed">
+                  Responsive col spans
+                </Col>
+                <Col flex="auto" className="text-muted">
+                  <span className="show-xs-only">xs 1 column</span>
+                  <span className="show-sm-only">sm 2 columns</span>
+                  <span className="show-md-only">md 3 columns</span>
+                  <span className="show-lg-only">lg 4 columns</span>
+                  <span className="show-xl-only">xl 6 columns</span>
+                  <span className="show-2xl-only">2xl 12 columns</span>
+                </Col>
+              </Row>
+              <Row>
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+                <Col className="h-8 bg-dimmed outline p-2 span-12 sm:span-6 md:span-4 lg:span-3 xl:span-2 2xl:span-1" />
+              </Row>
+            </Container>
+          </Content>
+        </Page>
+      </Viewport>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/0.core/Section.stories.tsx b/packages/core/stories/0.core/Section.stories.tsx
new file mode 100644
index 0000000..9287466
--- /dev/null
+++ b/packages/core/stories/0.core/Section.stories.tsx
@@ -0,0 +1,92 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker, fakerAR } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import {
+  Section,
+  Page,
+  Text,
+  Viewport,
+  Aside,
+  Content,
+  Header,
+} from "../../src";
+
+const meta: Meta = {
+  component: Section,
+  title: "@core/Application",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Section.test.tsx"],
+  },
+};
+
+export default meta;
+type SectionStory = StoryObj<typeof Section>;
+
+const fakeParas = [
+  ...new Array(10)
+    .fill("")
+    .map(
+      () =>
+        faker.lorem.sentences(10) +
+        "\n" +
+        faker.lorem.sentences(10) +
+        "\n" +
+        faker.lorem.sentences(10),
+    ),
+  ...new Array(10).fill("").map(() => fakerAR.lorem.sentences(30)),
+];
+
+export const _Section: SectionStory = {
+  render: (args) => {
+    return (
+      <div className="min-h-[600px]">
+        <Viewport>
+          <Page paper>
+            <Aside>
+              <Content>Page level aside</Content>
+            </Aside>
+            <Section {...args}>
+              <Header className="p-4 bg-dimmed">Inner section header</Header>
+              <Aside>
+                <Content>Inner section level aside</Content>
+              </Aside>
+              <Content>
+                {fakeParas.map((p, i) => (
+                  <Text clamp={3} key={i} align="justify">
+                    {p}
+                  </Text>
+                ))}
+              </Content>
+            </Section>
+          </Page>
+        </Viewport>
+      </div>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/0.core/Theme.stories.tsx b/packages/core/stories/0.core/Theme.stories.tsx
new file mode 100644
index 0000000..bb527c1
--- /dev/null
+++ b/packages/core/stories/0.core/Theme.stories.tsx
@@ -0,0 +1,466 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { mdiAccountCircle } from "@mdi/js";
+import {
+  mdilAccount,
+  mdilAlert,
+  mdilAlertOctagon,
+  mdilContentSave,
+  mdilEye,
+  mdilInformation,
+} from "@mdi/light-js";
+import type { Meta, StoryObj } from "@storybook/react";
+import { memo, useDeferredValue, useMemo } from "react";
+import {
+  AnimationBars,
+  AnimationSpinner,
+  Avatar,
+  Button,
+  Callout,
+  Card,
+  Chip,
+  Col,
+  Container,
+  Content,
+  Divider,
+  EmptyContent,
+  Icon,
+  Page,
+  ProgressBar,
+  ProgressCircle,
+  Row,
+  Skeleton,
+  ThemeProvider,
+  Title,
+  Viewport,
+} from "../../src";
+import { Message, Toast } from "../../src/overlays";
+
+const meta: Meta = {
+  component: ThemeProvider,
+  title: "@core/Application",
+  argTypes: {
+    primary: {
+      control: "select",
+      options: [
+        "scarlet",
+        "pumpkin",
+        "jade",
+        "denim",
+        "iris",
+        "lilac",
+        "coral",
+        "wood",
+      ],
+    },
+    accent: {
+      control: "select",
+      options: [
+        "scarlet",
+        "pumpkin",
+        "jade",
+        "denim",
+        "iris",
+        "lilac",
+        "coral",
+        "wood",
+      ],
+    },
+    primaryColor: {
+      control: "color",
+    },
+    accentColor: {
+      control: "color",
+    },
+    tintColor: {
+      control: "select",
+      options: ["silver", "steel", "olive", "sand"],
+    },
+  },
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/ThemeProvider.test.tsx"],
+  },
+};
+
+export default meta;
+type ThemeStory = StoryObj<typeof ThemeProvider>;
+
+const Sample = memo(() => (
+  <section className="p-4">
+    <div className="p-6 flex gap-2">
+      <Icon
+        icon="mdi mdi-react"
+        bg="primary-100"
+        color="primary-700"
+        size="3rem"
+      />
+      <Icon
+        icon="mdi mdi-react"
+        bg="accent-100"
+        color="accent-700"
+        size="3rem"
+      />
+      <div className="flex-1">
+        <Title as="h2">React UI Framework</Title>
+      </div>
+    </div>
+    <Divider className="mt-8">
+      <Title>Colors</Title>
+    </Divider>
+    <div className="flex gap-2" style={{ height: "2rem" }}>
+      <div className="flex-1 rounded outline bg-primary-400" />
+      <div className="flex-1 rounded outline bg-accent-400" />
+      <div className="flex-1 rounded outline bg-info-400" />
+      <div className="flex-1 rounded outline bg-danger-400" />
+      <div className="flex-1 rounded outline bg-success-400" />
+      <div className="flex-1 rounded outline bg-warning-400" />
+      <div className="flex-1 rounded outline bg-base" />
+      <div className="flex-1 rounded outline bg-dimmed" />
+      <div className="flex-1 rounded outline bg-muted" />
+    </div>
+    <div className="flex gap-4" style={{ height: "2rem" }}>
+      <div className="flex-1 capitalize text-center font-medium text-primary-600">
+        primary
+      </div>
+      <div className="flex-1 capitalize text-center font-medium text-accent-600">
+        accent
+      </div>
+      <div className="flex-1 capitalize text-center font-medium text-info-600">
+        info
+      </div>
+      <div className="flex-1 capitalize text-center font-medium text-danger-600">
+        danger
+      </div>
+      <div className="flex-1 capitalize text-center font-medium text-success-600">
+        success
+      </div>
+      <div className="flex-1 capitalize text-center font-medium text-warning-600">
+        warning
+      </div>
+      <div className="flex-1 capitalize text-center font-medium text-base">
+        base
+      </div>
+      <div className="flex-1 capitalize text-center font-medium text-dimmed">
+        dimmed
+      </div>
+      <div className="flex-1 capitalize text-center font-medium text-muted">
+        muted
+      </div>
+    </div>
+    <Divider className="mt-8">
+      <Title>Alternating Background</Title>
+    </Divider>
+    <ul className="bg-alternate">
+      <li>{faker.lorem.lines(1)}</li>
+      <li>{faker.lorem.lines(1)}</li>
+      <li>{faker.lorem.lines(1)}</li>
+      <li>{faker.lorem.lines(1)}</li>
+      <li>{faker.lorem.lines(1)}</li>
+      <li>{faker.lorem.lines(1)}</li>
+    </ul>
+    <ol className="bg-alternate">
+      <li>{faker.lorem.lines(1)}</li>
+      <li>{faker.lorem.lines(1)}</li>
+      <li>{faker.lorem.lines(1)}</li>
+      <li>{faker.lorem.lines(1)}</li>
+      <li>{faker.lorem.lines(1)}</li>
+      <li>{faker.lorem.lines(1)}</li>
+    </ol>
+    <dl className="bg-alternate my-4">
+      <dt>Cat</dt>
+      <dd>{faker.animal.cat()}</dd>
+      <dt>Dog</dt>
+      <dd>{faker.animal.dog()}</dd>
+      <dt>Bird</dt>
+      <dd>{faker.animal.bird()}</dd>
+    </dl>
+    <dl className="bg-alternate align-end my-4">
+      <dt>Chemical</dt>
+      <dd>{faker.science.chemicalElement().name}</dd>
+      <dt>Airline</dt>
+      <dd>{faker.airline.airline().name}</dd>
+      <dt>Company</dt>
+      <dd>{faker.company.name()}</dd>
+    </dl>
+    <Divider className="mt-8">
+      <Title>Buttons</Title>
+    </Divider>
+    <div className="flex flex-wrap gap-2 mb-2">
+      <Button color="primary">Primary</Button>
+      <Button color="accent">Accent</Button>
+      <Button color="info">Info</Button>
+      <Button color="danger">Danger</Button>
+      <Button color="success">Success</Button>
+      <Button color="warning">Warning</Button>
+    </div>
+    <div className="flex flex-wrap gap-2">
+      <Button variant="solid" color="primary">
+        Primary
+      </Button>
+      <Button variant="solid" color="accent">
+        Accent
+      </Button>
+      <Button variant="solid" color="info">
+        Info
+      </Button>
+      <Button variant="solid" color="danger">
+        Danger
+      </Button>
+      <Button variant="solid" color="success">
+        Success
+      </Button>
+      <Button variant="solid" color="warning">
+        Warning
+      </Button>
+    </div>
+    <Divider className="mt-8">
+      <Title>Chips</Title>
+    </Divider>
+    <div className="flex gap-2 mb-2">
+      <Chip color="primary">Primary</Chip>
+      <Chip color="accent">Accent</Chip>
+      <Chip color="info">Info</Chip>
+      <Chip color="danger">Danger</Chip>
+      <Chip color="success">Success</Chip>
+      <Chip color="warning">Warning</Chip>
+    </div>
+    <div className="flex gap-2 mb-2">
+      <Chip variant="solid" color="primary">
+        Primary
+      </Chip>
+      <Chip variant="solid" color="accent">
+        Accent
+      </Chip>
+      <Chip variant="solid" color="info">
+        Info
+      </Chip>
+      <Chip variant="solid" color="danger">
+        Danger
+      </Chip>
+      <Chip variant="solid" color="success">
+        Success
+      </Chip>
+      <Chip variant="solid" color="warning">
+        Warning
+      </Chip>
+    </div>
+    <Divider className="mt-8">
+      <Title>Callout</Title>
+    </Divider>
+    <Row>
+      <Col className="span-6 overflow-hidden" stretchContent>
+        <Callout color="primary" title="Primary callout">
+          <div className="truncate">{faker.lorem.lines(2)}</div>
+        </Callout>
+      </Col>
+      <Col className="span-6 overflow-hidden" stretchContent>
+        <Callout color="accent" title="Accent callout">
+          <div className="truncate">{faker.lorem.lines(2)}</div>
+        </Callout>
+      </Col>
+    </Row>
+    <Divider className="mt-8">
+      <Title>Empty Content</Title>
+    </Divider>
+    <Row>
+      <Col className="span-6 overflow-hidden" stretchContent>
+        <EmptyContent title="Empty content" message={faker.lorem.lines(2)}>
+          <Button size="sm" variant="link">
+            Action
+          </Button>
+        </EmptyContent>
+      </Col>
+      <Col className="span-6 overflow-hidden" stretchContent>
+        <EmptyContent
+          title="Empty content"
+          size="sm"
+          message={faker.lorem.lines(2)}
+        >
+          <Button size="sm" variant="link">
+            Action
+          </Button>
+        </EmptyContent>
+      </Col>
+    </Row>
+    <Divider className="mt-8">
+      <Title>Notifications</Title>
+    </Divider>
+    <Row>
+      <Col className="span-6">
+        <Message color="primary" title="Title" message="Floating message...." />
+      </Col>
+      <Col className="span-6">
+        <Message color="accent" title="Title" message="Floating message...." />
+      </Col>
+      <Col className="span-6">
+        <Toast
+          color="primary"
+          title="Toast title"
+          message="Toast message...."
+        />
+      </Col>
+      <Col className="span-6">
+        <Toast
+          type="confirm"
+          color="accent"
+          title="Toast title"
+          message="Toast message...."
+        />
+      </Col>
+    </Row>
+    <Divider className="mt-8">
+      <Title>Progress</Title>
+    </Divider>
+    <Row orient="col">
+      <Col>
+        <ProgressBar color="primary" value={63} animate />
+      </Col>
+      <Col>
+        <ProgressBar color="accent" value={42} animate />
+      </Col>
+      <Col className="span-6 overflow-hidden" stretchContent>
+        <div className="flex gap-4 justify-center items-center p-4">
+          <ProgressCircle size="md" color="primary" value={42} />
+          <ProgressCircle size="md" color="accent" value={63} />
+        </div>
+      </Col>
+    </Row>
+    <Divider className="mt-8">
+      <Title>Loaders</Title>
+    </Divider>
+    <Row>
+      <Col className="span-6" stretchContent>
+        <Card>
+          <Content>{faker.lorem.paragraph()}</Content>
+          <AnimationBars />
+        </Card>
+      </Col>
+      <Col className="span-6" stretchContent>
+        <Card>
+          <Content>{faker.lorem.paragraph()}</Content>
+          <AnimationSpinner />
+        </Card>
+      </Col>
+      <Col className="span-12" stretchContent>
+        <Card>
+          <Content>{faker.lorem.lines(2)}</Content>
+          <Skeleton />
+          <Skeleton />
+        </Card>
+      </Col>
+    </Row>
+    <Divider className="mt-8">
+      <Title>Icons</Title>
+    </Divider>
+    <div className="flex gap-2 mb-2 text-4xl">
+      <Icon color="primary" icon={mdilAccount} />
+      <Icon color="accent" icon={mdilEye} />
+      <Icon color="info" icon={mdilInformation} />
+      <Icon color="danger" icon={mdilAlertOctagon} />
+      <Icon color="success" icon={mdilContentSave} />
+      <Icon color="warning" icon={mdilAlert} />
+    </div>
+    <Divider className="mt-8">
+      <Title>Avatars</Title>
+    </Divider>
+    <div className="flex gap-2 mb-2 text-5xl">
+      <Avatar
+        name="Some Name"
+        color="primary"
+        fallbackIcon={mdiAccountCircle}
+      />
+      <Avatar name="Some Name" color="accent" fallbackIcon={mdiAccountCircle} />
+      <Avatar name="Some Name" color="info" fallbackIcon={mdiAccountCircle} />
+      <Avatar name="Some Name" color="danger" fallbackIcon={mdiAccountCircle} />
+      <Avatar
+        name="Some Name"
+        color="success"
+        fallbackIcon={mdiAccountCircle}
+      />
+      <Avatar
+        name="Some Name"
+        color="warning"
+        fallbackIcon={mdiAccountCircle}
+      />
+    </div>
+  </section>
+));
+
+export const _ThemeProvider: ThemeStory = {
+  render: (args) => {
+    const _primaryColor = useMemo(
+      // @ts-expect-error ignore
+      () => args.primaryColor ?? args.primary,
+      // @ts-expect-error ignore
+      [args.primary, args.primaryColor],
+    );
+    const _accentColor = useMemo(
+      // @ts-expect-error ignore
+      () => args.accentColor ?? args.accent,
+      // @ts-expect-error ignore
+      [args.accent, args.accentColor],
+    );
+
+    const primaryColor = useDeferredValue(_primaryColor);
+    const accentColor = useDeferredValue(_accentColor);
+    return (
+      <ThemeProvider
+        {...args}
+        primaryColor={primaryColor}
+        accentColor={accentColor}
+      >
+        <Viewport>
+          <Page paper>
+            <Content>
+              <Container>
+                <Row>
+                  <Col className="span-12 lg:span-6 overflow-hidden">
+                    <Title color="dimmed" className="border-b font-light mb-4">
+                      Light theme
+                    </Title>
+                    <ThemeProvider colorScheme="light">
+                      <Sample />
+                    </ThemeProvider>
+                  </Col>
+                  <Col className="span-12 lg:span-6 overflow-hidden">
+                    <Title color="dimmed" className="border-b font-light mb-4">
+                      Dark theme
+                    </Title>
+                    <ThemeProvider colorScheme="dark">
+                      <Sample />
+                    </ThemeProvider>
+                  </Col>
+                </Row>
+              </Container>
+            </Content>
+          </Page>
+        </Viewport>
+      </ThemeProvider>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/0.core/Viewport.stories.tsx b/packages/core/stories/0.core/Viewport.stories.tsx
new file mode 100644
index 0000000..f464085
--- /dev/null
+++ b/packages/core/stories/0.core/Viewport.stories.tsx
@@ -0,0 +1,65 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Viewport } from "../../src";
+
+const meta: Meta = {
+  component: Viewport,
+  title: "@core/Application",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Viewport.test.tsx"],
+  },
+};
+
+export default meta;
+type ViewportStory = StoryObj<typeof Viewport>;
+
+export const _Viewport: ViewportStory = {
+  render: () => {
+    return (
+      <div className="min-h-[600px]">
+        <Viewport>
+          <h1 className="area-head border-b text-center p-4">
+            Viewport Header
+          </h1>
+          <h6 className="area-foot border-t text-center p-4">
+            Viewport Footer
+          </h6>
+          <h4 className="area-side-s border-e bg-dimmed p-4">
+            Viewport Aside start
+          </h4>
+          <h4 className="area-side-e border-s bg-dimmed p-4">
+            Viewport Aside end
+          </h4>
+          <h4 className="area-content bg-base text-center p-4">
+            Viewport Content
+          </h4>
+        </Viewport>
+      </div>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/1.typography/Abbr.stories.tsx b/packages/core/stories/1.typography/Abbr.stories.tsx
new file mode 100644
index 0000000..8f271b3
--- /dev/null
+++ b/packages/core/stories/1.typography/Abbr.stories.tsx
@@ -0,0 +1,62 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker, fakerAR } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Abbr, Mark, Text, Title } from "../../src";
+
+const meta: Meta = {
+  component: Abbr,
+  title: "@core/Typography",
+  parameters: {
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Abbr.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type AbbrStory = StoryObj<typeof Abbr>;
+
+const paras = faker.lorem.sentences(10) + "\n\n" + fakerAR.lorem.sentences(10);
+
+const abbrs: AnyObject = faker.helpers
+  .arrayElements(paras.replaceAll("\n", "").split(" ").filter(Boolean), 9)
+  .map((t) => [t, faker.animal.cat(), faker.color.rgb()]);
+
+export const _Abbr: AbbrStory = {
+  render: (args) => {
+    return (
+      <Text>
+        <Abbr {...args}>{paras}</Abbr>
+      </Text>
+    );
+  },
+  args: { abbr: abbrs },
+};
diff --git a/packages/core/stories/1.typography/Copy.stories.tsx b/packages/core/stories/1.typography/Copy.stories.tsx
new file mode 100644
index 0000000..2c9fb61
--- /dev/null
+++ b/packages/core/stories/1.typography/Copy.stories.tsx
@@ -0,0 +1,61 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker, fakerAR } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Copy, Text } from "../../src";
+
+const meta: Meta = {
+  component: Copy,
+  title: "@core/Typography",
+  parameters: {
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Copy.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type CopyStory = StoryObj<typeof Copy>;
+
+const paras = faker.lorem.sentences(10) + "\n\n" + fakerAR.lorem.sentences(10);
+
+export const _Copy: CopyStory = {
+  render: (args) => {
+    return (
+      <Text>
+        <Copy {...args} text={paras} />
+        {paras}
+      </Text>
+    );
+  },
+  args: {
+    size: "sm",
+  },
+};
diff --git a/packages/core/stories/1.typography/Link.stories.tsx b/packages/core/stories/1.typography/Link.stories.tsx
new file mode 100644
index 0000000..c45834c
--- /dev/null
+++ b/packages/core/stories/1.typography/Link.stories.tsx
@@ -0,0 +1,42 @@
+/*
+ * React UI Framework
+ * @version   : 1.0.0
+ * @Linkright : 2024
+ * @author    : Adarsh Pastakia
+ */
+
+import { faker, fakerAR } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Link, Text } from "../../src";
+
+const meta: Meta = {
+  component: Link,
+  title: "@core/Typography",
+  parameters: {
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Link.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type LinkStory = StoryObj<typeof Link>;
+
+const paras = faker.lorem.sentences(10) + "\n\n" + fakerAR.lorem.sentences(10);
+
+export const _Link: LinkStory = {
+  render: (args) => {
+    return (
+      <Text>
+        <Link {...args}>Simple anchor link</Link>
+      </Text>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/1.typography/Mark.stories.tsx b/packages/core/stories/1.typography/Mark.stories.tsx
new file mode 100644
index 0000000..d92e5e5
--- /dev/null
+++ b/packages/core/stories/1.typography/Mark.stories.tsx
@@ -0,0 +1,62 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker, fakerAR } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Abbr, Mark, Text, Title } from "../../src";
+
+const meta: Meta = {
+  component: Mark,
+  title: "@core/Typography",
+  parameters: {
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Typpography.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type MarkStory = StoryObj<typeof Mark>;
+
+const paras = faker.lorem.sentences(10) + "\n\n" + fakerAR.lorem.sentences(10);
+
+const marks: AnyObject = faker.helpers
+  .arrayElements(paras.replaceAll("\n", "").split(" ").filter(Boolean), 9)
+  .map((t) => [t, faker.color.rgb()]);
+
+export const _Mark: MarkStory = {
+  render: (args) => {
+    return (
+      <Text>
+        <Mark {...args}>{paras}</Mark>
+      </Text>
+    );
+  },
+  args: { mark: marks },
+};
diff --git a/packages/core/stories/1.typography/Text.stories.tsx b/packages/core/stories/1.typography/Text.stories.tsx
new file mode 100644
index 0000000..f5dc77b
--- /dev/null
+++ b/packages/core/stories/1.typography/Text.stories.tsx
@@ -0,0 +1,64 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker, fakerAR } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Abbr, Copy, Link, Mark, Text, Title } from "../../src";
+
+const meta: Meta = {
+  component: Text,
+  subcomponents: { Title, Abbr, Mark, Link, Copy } as AnyObject,
+  title: "@core/Typography",
+  parameters: {
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Typpography.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type TextStory = StoryObj<typeof Text>;
+
+const para = faker.lorem.sentences(5) + "\n\n" + fakerAR.lorem.sentences(5);
+
+const paras = faker.lorem.sentences(10) + "\n\n" + fakerAR.lorem.sentences(10);
+
+export const _Text: TextStory = {
+  render: (args) => {
+    return <Text {...args}>{para}</Text>;
+  },
+  args: { className: "mixed-lang" },
+};
+
+export const Clamped: TextStory = {
+  render: (args) => {
+    return <Text {...args}>{paras}</Text>;
+  },
+  args: { clamp: 5, className: "mixed-lang" },
+};
diff --git a/packages/core/stories/1.typography/Title.stories.tsx b/packages/core/stories/1.typography/Title.stories.tsx
new file mode 100644
index 0000000..3b1ea55
--- /dev/null
+++ b/packages/core/stories/1.typography/Title.stories.tsx
@@ -0,0 +1,74 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Fragment } from "react/jsx-runtime";
+import { Title } from "../../src";
+
+const meta: Meta = {
+  component: Title,
+  title: "@core/Typography",
+  parameters: {
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Typpography.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type TitleStory = StoryObj<typeof Title>;
+
+export const Titles: TitleStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Title {...args} as="h1" size={undefined}>
+          Heading 1
+        </Title>
+        <Title {...args} as="h2" size={undefined}>
+          Heading 2
+        </Title>
+        <Title {...args} as="h3" size={undefined}>
+          Heading 3
+        </Title>
+        <Title {...args} as="h4" size={undefined}>
+          Heading 4
+        </Title>
+        <Title {...args} as="h5" size={undefined}>
+          Heading 5
+        </Title>
+        <Title {...args} as="h6" size={undefined}>
+          Heading 6
+        </Title>
+        <Title {...args}>Normal Title</Title>
+      </Fragment>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/1.typography/Typography.mdx b/packages/core/stories/1.typography/Typography.mdx
new file mode 100644
index 0000000..828c6b7
--- /dev/null
+++ b/packages/core/stories/1.typography/Typography.mdx
@@ -0,0 +1,124 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title as ST,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Icon, Collapsable, Title, Text, Abbr, Mark } from "../../src";
+import * as TextStories from "./Text.stories";
+import * as TitleStories from "./Title.stories";
+import * as AbbrStories from "./Abbr.stories";
+import * as MarkStories from "./Mark.stories";
+import * as CopyStories from "./Copy.stories";
+import * as LinkStories from "./Link.stories";
+
+<Meta of={TextStories} />
+
+<ST>Typography</ST>
+
+<Anchor storyId="typo">
+  <div className="hidden-anchor">
+    <Subheading>Typography</Subheading>
+  </div>
+</Anchor>
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={TextStories._Text} />
+</Collapsable>
+
+<Anchor storyId="clmaped">
+  <Subheading>Clamped</Subheading>
+</Anchor>
+<Description of={TextStories.Clamped} />
+<Canvas withToolbar of={TextStories.Clamped} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={TextStories.Clamped} />
+</Collapsable>
+
+<Anchor storyId="titles">
+  <Subheading>Titles</Subheading>
+</Anchor>
+<Description of={TitleStories.Titles} />
+<Canvas withToolbar of={TitleStories.Titles} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={TitleStories.Titles} />
+</Collapsable>
+
+<Anchor storyId="abbrs">
+  <Subheading>Abbr</Subheading>
+</Anchor>
+<Description of={AbbrStories._Abbr} />
+<Canvas withToolbar of={AbbrStories._Abbr} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={AbbrStories._Abbr} />
+</Collapsable>
+
+<Anchor storyId="marks">
+  <Subheading>Mark</Subheading>
+</Anchor>
+<Description of={MarkStories._Mark} />
+<Canvas withToolbar of={MarkStories._Mark} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={MarkStories._Mark} />
+</Collapsable>
+
+<Anchor storyId="links">
+  <Subheading>Links</Subheading>
+</Anchor>
+<Description of={LinkStories._Link} />
+<Canvas withToolbar of={LinkStories._Link} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={LinkStories._Link} />
+</Collapsable>
+
+<Anchor storyId="copy">
+  <Subheading>Copy</Subheading>
+</Anchor>
+<Description of={CopyStories._Copy} />
+<Canvas withToolbar of={CopyStories._Copy} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CopyStories._Copy} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Text, Title } from "@react-fabric/core";
+import { NavLink } from "react-router-dom";
+
+export const Example = () => {
+  return <div>
+    <Title as="h1">Title text</Title>
+    <Text>{text paras}</Text>
+    <Link as={NavLink}>Nav links</Link>
+  </div>;
+};
+```
diff --git a/packages/core/stories/components/actionLabel/ActionLabel.mdx b/packages/core/stories/components/actionLabel/ActionLabel.mdx
new file mode 100644
index 0000000..ee92f2a
--- /dev/null
+++ b/packages/core/stories/components/actionLabel/ActionLabel.mdx
@@ -0,0 +1,61 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Heading,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { ActionLabel, Collapsable } from "../../../src";
+import * as ActionLabelStories from "./ActionLabel.stories";
+
+<Meta of={ActionLabelStories} />
+
+<Title>Action Label</Title>
+
+<Anchor storyId="ActionLabel">
+  <div className="hidden-anchor">
+    <Subheading>Action Label</Subheading>
+  </div>
+</Anchor>
+
+<Description of={ActionLabel} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ActionLabelStories._ActionLabel} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { ActionLabel, Button } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <ActionLabel actions={[<Button icon="mdi mdi-share" aria-label="Share" />]}>
+      Some label
+    </ActionLabel>
+  );
+};
+```
diff --git a/packages/core/stories/components/actionLabel/ActionLabel.stories.tsx b/packages/core/stories/components/actionLabel/ActionLabel.stories.tsx
new file mode 100644
index 0000000..ecb25b7
--- /dev/null
+++ b/packages/core/stories/components/actionLabel/ActionLabel.stories.tsx
@@ -0,0 +1,150 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Fragment } from "react/jsx-runtime";
+import { ActionLabel, Button, CoreIcons, Icon, Tooltip } from "../../../src";
+import { FloatingTree } from "@floating-ui/react";
+
+const meta: Meta = {
+  component: ActionLabel,
+  title: "@core/components/Action Label",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/ActionLabel.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ActionLabelStory = StoryObj<typeof ActionLabel>;
+
+export const _ActionLabel: ActionLabelStory = {
+  render: (args) => {
+    return (
+      <div className="w-96 overflow-hidden outline p-4">
+        <ActionLabel
+          {...args}
+          actions={[
+            <Button
+              key="negative"
+              icon="mdi mdi-filter-minus-outline"
+              color="danger"
+              aria-label="Filter Negative"
+            />,
+            <Button
+              key="positive"
+              icon="mdi mdi-filter-plus-outline"
+              aria-label="Filter"
+            />,
+          ]}
+        >
+          Display label
+        </ActionLabel>
+
+        <div className="flex gap-2 items-center overflow-hidden">
+          <ActionLabel
+            {...args}
+            className="flex-initial"
+            actions={[
+              <Button
+                key="negative"
+                icon="mdi mdi-filter-minus-outline"
+                color="danger"
+                aria-label="Filter Negative"
+              />,
+              <Button
+                key="positive"
+                icon="mdi mdi-filter-plus-outline"
+                aria-label="Filter"
+              />,
+            ]}
+          >
+            Item on the left
+          </ActionLabel>
+          <Icon className="flex-content" icon={CoreIcons.arrowRight} />
+          <ActionLabel
+            {...args}
+            className="flex-initial"
+            actions={[
+              <Button
+                key="negative"
+                icon="mdi mdi-filter-minus-outline"
+                color="danger"
+                aria-label="Filter Negative"
+              />,
+              <Button
+                key="positive"
+                icon="mdi mdi-filter-plus-outline"
+                aria-label="Filter"
+              />,
+            ]}
+          >
+            Item on the right
+          </ActionLabel>
+        </div>
+
+        <div className="flex gap-2 items-center overflow-hidden">
+          <Tooltip content="Longer labeled item on the left" copyContent>
+            <ActionLabel
+              {...args}
+              className="flex-initial"
+              actions={[
+                <Tooltip key="view" content="View something" placement="bottom">
+                  <Button icon="mdi mdi-eye" aria-label="View" />
+                </Tooltip>,
+                <Button key="like" icon="mdi mdi-thumb-up" aria-label="open" />,
+                <Button key="share" icon="mdi mdi-share" aria-label="share" />,
+              ]}
+            >
+              <span>Longer labeled item on the left</span>
+            </ActionLabel>
+          </Tooltip>
+          <Icon className="flex-content" icon={CoreIcons.arrowRight} />
+          <Tooltip content="Longer labeled item on the right" copyContent>
+            <ActionLabel
+              {...args}
+              className="flex-initial"
+              actions={[
+                <Button key="view" icon="mdi mdi-eye" aria-label="View" />,
+                <Button key="like" icon="mdi mdi-thumb-up" aria-label="open" />,
+                <Button key="share" icon="mdi mdi-share" aria-label="share" />,
+              ]}
+            >
+              Longer labeled item on the right
+            </ActionLabel>
+          </Tooltip>
+        </div>
+      </div>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/components/animations/Animations.mdx b/packages/core/stories/components/animations/Animations.mdx
new file mode 100644
index 0000000..128d57a
--- /dev/null
+++ b/packages/core/stories/components/animations/Animations.mdx
@@ -0,0 +1,88 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { AnimationIndicator, Collapsable } from "../../../src";
+import * as AnimationsStories from "./Animations.stories";
+import * as BarsStories from "./Bars.stories";
+import * as SpinnerStories from "./Spinner.stories";
+import * as SkeletonStories from "./Skeleton.stories";
+
+<Meta of={AnimationsStories} />
+
+<Title>Animations</Title>
+
+<Anchor storyId="animations">
+  <div className="hidden-anchor">
+    <Subheading>Indicators</Subheading>
+  </div>
+</Anchor>
+
+<Description of={AnimationIndicator} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={AnimationsStories._Animations} />
+</Collapsable>
+
+<Anchor storyId="bars">
+  <Subheading>Bars</Subheading>
+</Anchor>
+<Description of={BarsStories._Bars} />
+<Canvas withToolbar of={BarsStories._Bars} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={BarsStories._Bars} />
+</Collapsable>
+
+<Anchor storyId="spinner">
+  <Subheading>Spinner</Subheading>
+</Anchor>
+<Description of={SpinnerStories._Spinner} />
+<Canvas withToolbar of={SpinnerStories._Spinner} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={SpinnerStories._Spinner} />
+</Collapsable>
+
+<Anchor storyId="skeleton">
+  <Subheading>Skeleton</Subheading>
+</Anchor>
+<Description of={SkeletonStories._Skeleton} />
+<Canvas withToolbar of={SkeletonStories._Skeleton} />
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { AnimationCheck, AnimationBars } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <AnimationCheck/>
+    <AnimationBars/>
+  );
+};
+```
diff --git a/packages/core/stories/components/animations/Animations.stories.tsx b/packages/core/stories/components/animations/Animations.stories.tsx
new file mode 100644
index 0000000..9cf5b61
--- /dev/null
+++ b/packages/core/stories/components/animations/Animations.stories.tsx
@@ -0,0 +1,79 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { Fragment } from "react/jsx-runtime";
+import {
+  AnimationBars,
+  AnimationIndicator,
+  AnimationSpinner,
+  Skeleton,
+} from "../../../src";
+
+const meta: Meta = {
+  component: AnimationIndicator,
+  subcomponents: { AnimationBars, AnimationSpinner } as AnyObject,
+  title: "@core/components/Animations",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Animations.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4 h-12">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type AnimationsStory = StoryObj<typeof AnimationIndicator>;
+
+export const _Animations: AnimationsStory = {
+  render: (args) => {
+    const [state, setState] = useState(false);
+    useEffect(() => {
+      const tmr = setInterval(() => setState(!state), state ? 2000 : 200);
+      return () => {
+        clearInterval(tmr);
+      };
+    }, [state]);
+    return (
+      <Fragment>
+        {state && (
+          <Fragment>
+            <AnimationIndicator type="check" {...args} />
+            <AnimationIndicator type="cross" {...args} />
+            <AnimationIndicator type="info" {...args} />
+            <AnimationIndicator type="exclaim" {...args} />
+            <AnimationIndicator type="question" {...args} />
+          </Fragment>
+        )}
+      </Fragment>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/components/animations/Bars.stories.tsx b/packages/core/stories/components/animations/Bars.stories.tsx
new file mode 100644
index 0000000..84cf9ca
--- /dev/null
+++ b/packages/core/stories/components/animations/Bars.stories.tsx
@@ -0,0 +1,54 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { AnimationBars } from "../../../src";
+
+const meta: Meta = {
+  component: AnimationBars,
+  title: "@core/components/Animations",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Animations.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-48 w-96 relative p-4 overflow-hidden outline rounded">
+        <p>{faker.lorem.paragraphs(10)}</p>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type BarStory = StoryObj<typeof AnimationBars>;
+
+export const _Bars: BarStory = {
+  render: (args) => {
+    return <AnimationBars {...args} />;
+  },
+  args: {},
+};
diff --git a/packages/core/stories/components/animations/Skeleton.stories.tsx b/packages/core/stories/components/animations/Skeleton.stories.tsx
new file mode 100644
index 0000000..aabb208
--- /dev/null
+++ b/packages/core/stories/components/animations/Skeleton.stories.tsx
@@ -0,0 +1,58 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "../../../src";
+import { Fragment } from "react/jsx-runtime";
+
+const meta: Meta = {
+  component: Skeleton,
+  title: "@core/components/Animations",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Animations.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-48 w-96 relative p-4 overflow-hidden outline rounded">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type BarStory = StoryObj<typeof Skeleton>;
+
+export const _Skeleton: BarStory = {
+  render: () => {
+    return (
+      <Fragment>
+        <Skeleton />
+        <Skeleton />
+      </Fragment>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/components/animations/Spinner.stories.tsx b/packages/core/stories/components/animations/Spinner.stories.tsx
new file mode 100644
index 0000000..d789303
--- /dev/null
+++ b/packages/core/stories/components/animations/Spinner.stories.tsx
@@ -0,0 +1,54 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { AnimationSpinner } from "../../../src";
+
+const meta: Meta = {
+  component: AnimationSpinner,
+  title: "@core/components/Animations",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Animations.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-48 w-96 relative p-4 overflow-hidden outline rounded">
+        <p>{faker.lorem.paragraphs(10)}</p>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type BarStory = StoryObj<typeof AnimationSpinner>;
+
+export const _Spinner: BarStory = {
+  render: (args) => {
+    return <AnimationSpinner {...args} />;
+  },
+  args: {},
+};
diff --git a/packages/core/stories/components/avatar/Avatar.mdx b/packages/core/stories/components/avatar/Avatar.mdx
new file mode 100644
index 0000000..3837bb2
--- /dev/null
+++ b/packages/core/stories/components/avatar/Avatar.mdx
@@ -0,0 +1,75 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Avatar, AvatarGroup, Collapsable } from "../../../src";
+import * as AvatarStories from "./Avatar.stories";
+import * as AvatarGroupStories from "./AvatarGroup.stories";
+
+<Meta of={AvatarStories} />
+
+<Title>Avatar</Title>
+
+<Anchor storyId="avatar">
+  <div className="hidden-anchor">
+    <Subheading>Avatar</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Avatar} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={AvatarStories._Avatar} />
+</Collapsable>
+
+<Anchor storyId="group">
+  <Subheading>Group</Subheading>
+</Anchor>
+<Description of={AvatarGroupStories._AvatarGroup} />
+<Canvas withToolbar of={AvatarGroupStories._AvatarGroup} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={AvatarGroupStories._AvatarGroup} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Avatar, AvatarGroup } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <AvatarGroup>
+      <Avatar
+        name="Avatar Name"
+        avatar="Avatar image"
+        fallbackIcon="Fallback svg"
+      />
+    </AvatarGroup>
+  );
+};
+```
diff --git a/packages/core/stories/components/avatar/Avatar.stories.tsx b/packages/core/stories/components/avatar/Avatar.stories.tsx
new file mode 100644
index 0000000..8a4d140
--- /dev/null
+++ b/packages/core/stories/components/avatar/Avatar.stories.tsx
@@ -0,0 +1,74 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Fragment } from "react/jsx-runtime";
+import { Avatar, AvatarGroup, Badge } from "../../../src";
+
+const meta: Meta = {
+  component: Avatar,
+  title: "@core/components/Avatar",
+  subcomponents: { AvatarGroup } as AnyObject,
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Avatar.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const iconImg = faker.image.avatarGitHub();
+
+export default meta;
+type AvatarStory = StoryObj<typeof Avatar>;
+
+export const _Avatar: AvatarStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Avatar {...args} variant="text" />
+        <Avatar {...args} fallbackIcon="mdi mdi-react" />
+        <Avatar {...args} avatar={iconImg} />
+        <Avatar {...args} variant="bauhaus" />
+        <Avatar {...args} variant="beam" />
+        <Avatar {...args} variant="pixel" />
+        <Badge value={99} placement="top-end">
+          <Avatar {...args} fallbackIcon="mdi mdi-react" />
+        </Badge>
+      </Fragment>
+    );
+  },
+  args: {
+    name: "Hyacinth Bucket",
+    size: "2.5rem",
+    onClick: fn(),
+  },
+};
diff --git a/packages/core/stories/components/avatar/AvatarGroup.stories.tsx b/packages/core/stories/components/avatar/AvatarGroup.stories.tsx
new file mode 100644
index 0000000..0396982
--- /dev/null
+++ b/packages/core/stories/components/avatar/AvatarGroup.stories.tsx
@@ -0,0 +1,88 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar, AvatarGroup } from "../../../src";
+
+const meta: Meta = {
+  component: AvatarGroup,
+  title: "@core/components/Avatar",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Avatar.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-md items-center p-md">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const iconImg = faker.image.avatarGitHub();
+
+export default meta;
+type AvatarGroupStory = StoryObj<typeof AvatarGroup>;
+
+export const _AvatarGroup: AvatarGroupStory = {
+  render: (args) => {
+    return (
+      <AvatarGroup {...args}>
+        <Avatar
+          name="Hyacinth Bucket"
+          tooltip="Hyacinth Bucket"
+          variant="text"
+        />
+        <Avatar
+          name="Hyacinth Bucket"
+          tooltip="Hyacinth Bucket"
+          fallbackIcon="mdi mdi-react"
+        />
+        <Avatar
+          name="Hyacinth Bucket"
+          tooltip="Hyacinth Bucket"
+          avatar={iconImg}
+        />
+        <Avatar
+          name="Hyacinth Bucket"
+          tooltip="Hyacinth Bucket"
+          variant="bauhaus"
+        />
+        <Avatar
+          name="Hyacinth Bucket"
+          tooltip="Hyacinth Bucket"
+          variant="beam"
+        />
+        <Avatar
+          name="Hyacinth Bucket"
+          tooltip="Hyacinth Bucket"
+          variant="pixel"
+        />
+      </AvatarGroup>
+    );
+  },
+  args: { rounded: true, totalCount: 99, size: "2.5rem" },
+};
diff --git a/packages/core/stories/components/badge/Badge.mdx b/packages/core/stories/components/badge/Badge.mdx
new file mode 100644
index 0000000..1a277d1
--- /dev/null
+++ b/packages/core/stories/components/badge/Badge.mdx
@@ -0,0 +1,80 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Badge, Collapsable } from "../../../src";
+import * as BadgeStories from "./Badge.stories";
+
+<Meta of={BadgeStories} />
+
+<Title>Badge</Title>
+
+<Anchor storyId="emptycontent">
+  <div className="hidden-anchor">
+    <Subheading>Badge</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Badge} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={BadgeStories._Badge} />
+</Collapsable>
+
+<Anchor storyId="number">
+  <Subheading>Numbers</Subheading>
+</Anchor>
+<Description of={BadgeStories.Numbers} />
+<Canvas withToolbar of={BadgeStories.Numbers} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={BadgeStories.Numbers} />
+</Collapsable>
+
+<Anchor storyId="ping">
+  <Subheading>Pinging</Subheading>
+</Anchor>
+<Description of={BadgeStories.Ping} />
+<Canvas withToolbar of={BadgeStories.Ping} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={BadgeStories.Ping} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Button, Badge } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Badge value="Badge content">
+      <Button>Action</Button>
+    </Badge>
+  );
+};
+```
diff --git a/packages/core/stories/components/badge/Badge.stories.tsx b/packages/core/stories/components/badge/Badge.stories.tsx
new file mode 100644
index 0000000..cff2428
--- /dev/null
+++ b/packages/core/stories/components/badge/Badge.stories.tsx
@@ -0,0 +1,114 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Fragment } from "react/jsx-runtime";
+import { Avatar, Button, Card, Icon, Badge } from "../../../src";
+
+const meta: Meta = {
+  component: Badge,
+  title: "@core/components/Badge",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Badge.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type BadgeStory = StoryObj<typeof Badge>;
+
+export const _Badge: BadgeStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Badge {...args}>
+          <Button as="a">Button with Badge</Button>
+        </Badge>
+        <Badge {...args}>
+          <Card>Card with Badge</Card>
+        </Badge>
+        <Badge {...args}>
+          <Icon size="3rem" icon="mdi mdi-react" />
+        </Badge>
+        <Badge {...args}>
+          <Avatar size="3rem" name="Avatar" />
+        </Badge>
+      </Fragment>
+    );
+  },
+  args: {
+    value: "New",
+    placement: "top",
+  },
+};
+
+export const Numbers: BadgeStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Badge {...args}>
+          <Button as="a">Button with Badge</Button>
+        </Badge>
+        <Badge {...args}>
+          <Card>Card with Badge</Card>
+        </Badge>
+      </Fragment>
+    );
+  },
+  args: {
+    value: 99,
+    max: 45,
+    className: "bg-accent-500 text-invert",
+  },
+};
+
+export const Ping: BadgeStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Badge {...args} className="bg-danger-500">
+          <Button as="a">Button with Badge</Button>
+        </Badge>
+        <Badge
+          {...args}
+          icon="mdi mdi-star"
+          className="bg-transparent before:bg-warning-500"
+        >
+          <Card>Card with Badge</Card>
+        </Badge>
+      </Fragment>
+    );
+  },
+  args: {
+    ping: true,
+  },
+};
diff --git a/packages/core/stories/components/breadcrumbs/Breadcrumbs.mdx b/packages/core/stories/components/breadcrumbs/Breadcrumbs.mdx
new file mode 100644
index 0000000..836a8d5
--- /dev/null
+++ b/packages/core/stories/components/breadcrumbs/Breadcrumbs.mdx
@@ -0,0 +1,75 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Heading,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Breadcrumbs, Collapsable } from "../../../src";
+import * as BreadcrumbsStories from "./Breadcrumbs.stories";
+
+<Meta of={BreadcrumbsStories} />
+
+<Title>Breadcrumbs</Title>
+
+<Anchor storyId="Breadcrumbs">
+  <div className="hidden-anchor">
+    <Subheading>Breadcrumbs</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Breadcrumbs} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={BreadcrumbsStories._Breadcrumbs} />
+</Collapsable>
+
+<Anchor storyId="card">
+  <Subheading>Styles</Subheading>
+</Anchor>
+<Description of={BreadcrumbsStories.Styles} />
+<Canvas withToolbar of={BreadcrumbsStories.Styles} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={BreadcrumbsStories.Styles} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Breadcrumbs, Link, Icon } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Breadcrumbs>
+      <Link>
+        <Icon icon="mdi mdi-home" />
+      </Link>
+      <Link>Previous Page</Link>
+      <Link>Current Page</Link>
+    </Breadcrumbs>
+  );
+};
+```
diff --git a/packages/core/stories/components/breadcrumbs/Breadcrumbs.stories.tsx b/packages/core/stories/components/breadcrumbs/Breadcrumbs.stories.tsx
new file mode 100644
index 0000000..7e618e8
--- /dev/null
+++ b/packages/core/stories/components/breadcrumbs/Breadcrumbs.stories.tsx
@@ -0,0 +1,117 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Fragment } from "react";
+import { Breadcrumbs, Icon, Link, Title } from "../../../src";
+
+const meta: Meta = {
+  component: Breadcrumbs,
+  title: "@core/components/Breadcrumbs",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Breadcrumbs.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type BreadcrumbsStory = StoryObj<typeof Breadcrumbs>;
+
+export const _Breadcrumbs: BreadcrumbsStory = {
+  render: (args) => {
+    return (
+      <Breadcrumbs {...args}>
+        <Link>
+          <Icon icon="mdi mdi-home" />
+        </Link>
+        <Link>Page 1</Link>
+        <Link>Page 2</Link>
+        <Link>Page 3</Link>
+        <Link>Page 4</Link>
+        <Link>Page 5</Link>
+        <Link>Page 6</Link>
+        <Link>Page 7</Link>
+        <Link>Page 8</Link>
+        <Link>Page 9</Link>
+        <Link>Page 10</Link>
+        <Link>Page 11</Link>
+        <Link>Page 12</Link>
+      </Breadcrumbs>
+    );
+  },
+  args: {},
+};
+
+export const Styles: BreadcrumbsStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Title>Classic</Title>
+        <Breadcrumbs {...args} variant="classic">
+          <Link>
+            <Icon icon="mdi mdi-home" />
+          </Link>
+          <Link>Page 1</Link>
+          <Link>Page 2</Link>
+          <Link>Page 3</Link>
+          <Link>Page 4</Link>
+          <Link>Page 5</Link>
+          <Link>Page 6</Link>
+          <Link>Page 7</Link>
+          <Link>Page 8</Link>
+          <Link>Page 9</Link>
+          <Link>Page 10</Link>
+          <Link>Page 11</Link>
+          <Link>Page 12</Link>
+        </Breadcrumbs>
+        <Title className="mt-6">Modern</Title>
+        <Breadcrumbs {...args} variant="modern">
+          <Link>
+            <Icon icon="mdi mdi-home" />
+          </Link>
+          <Link>Page 1</Link>
+          <Link>Page 2</Link>
+          <Link>Page 3</Link>
+          <Link>Page 4</Link>
+          <Link>Page 5</Link>
+          <Link>Page 6</Link>
+          <Link>Page 7</Link>
+          <Link>Page 8</Link>
+          <Link>Page 9</Link>
+          <Link>Page 10</Link>
+          <Link>Page 11</Link>
+          <Link>Page 12</Link>
+        </Breadcrumbs>
+      </Fragment>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/components/button/Button.mdx b/packages/core/stories/components/button/Button.mdx
new file mode 100644
index 0000000..0224bce
--- /dev/null
+++ b/packages/core/stories/components/button/Button.mdx
@@ -0,0 +1,129 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Heading,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Button, Collapsable } from "../../../src";
+import * as ButtonStories from "./Button.stories";
+import * as ConfirmButtonStories from "./ConfirmButton.stories";
+
+<Meta of={ButtonStories} />
+
+<Title>Button</Title>
+
+<Anchor storyId="button">
+  <div className="hidden-anchor">
+    <Subheading>Button</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Button} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ButtonStories._Button} />
+</Collapsable>
+
+<Anchor storyId="styles">
+  <Subheading>Styles</Subheading>
+</Anchor>
+<Description of={ButtonStories.Styles} />
+<Canvas withToolbar of={ButtonStories.Styles} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ButtonStories.Styles} />
+</Collapsable>
+
+<Anchor storyId="colors">
+  <Subheading>Colors</Subheading>
+</Anchor>
+<Description of={ButtonStories.Colors} />
+<Canvas withToolbar of={ButtonStories.Colors} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ButtonStories.Colors} />
+</Collapsable>
+
+<Anchor storyId="sizes">
+  <Subheading>Sizes</Subheading>
+</Anchor>
+<Description of={ButtonStories.Sizes} />
+<Canvas withToolbar of={ButtonStories.Sizes} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ButtonStories.Sizes} />
+</Collapsable>
+
+<Anchor storyId="states">
+  <Subheading>States</Subheading>
+</Anchor>
+<Description of={ButtonStories.States} />
+<Canvas withToolbar of={ButtonStories.States} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ButtonStories.States} />
+</Collapsable>
+
+<Anchor storyId="badges">
+  <Subheading>Badges</Subheading>
+</Anchor>
+<Description of={ButtonStories.Badges} />
+<Canvas withToolbar of={ButtonStories.Badges} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ButtonStories.Badges} />
+</Collapsable>
+
+<Anchor storyId="actionState">
+  <Subheading>Action State</Subheading>
+</Anchor>
+<Description of={ButtonStories.ActionState} />
+<Canvas withToolbar of={ButtonStories.ActionState} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ButtonStories.ActionState} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Button } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Button
+      icon="icon svg path"
+      altIcon="caret icon"
+      color="color"
+      variant="style"
+      loading={boolean}
+      disabled={boolean}
+    >
+      Button Label
+    </Button>
+  );
+};
+```
diff --git a/packages/core/stories/components/button/Button.stories.tsx b/packages/core/stories/components/button/Button.stories.tsx
new file mode 100644
index 0000000..0160896
--- /dev/null
+++ b/packages/core/stories/components/button/Button.stories.tsx
@@ -0,0 +1,210 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Fragment } from "react/jsx-runtime";
+import { Badge, Button } from "../../../src";
+import { Tooltip } from "../../../src/overlays";
+
+const meta: Meta = {
+  component: Button,
+  title: "@core/components/Button",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(children|as)/ },
+    jest: ["core/tests/buttons/Button.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ButtonStory = StoryObj<typeof Button>;
+
+export const _Button: ButtonStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Button
+          {...args}
+          spinOnHover
+          icon="mdi mdi-react"
+          aria-label="Click Me!"
+        />
+        <Button {...args} as="a">
+          Click Me!
+        </Button>
+        <Button {...args} icon="mdi mdi-react">
+          Click Me!
+        </Button>
+        <Button {...args} icon="mdi mdi-react" altIcon="mdi mdi-chevron-down">
+          Click Me!
+        </Button>
+      </Fragment>
+    );
+  },
+  args: {},
+};
+
+export const Colors: ButtonStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Button {...args} />
+        <Button {...args} color="accent" />
+        <Button {...args} color="info" />
+        <Button {...args} color="danger" />
+        <Button {...args} color="success" />
+        <Button {...args} color="warning" />
+      </Fragment>
+    );
+  },
+  args: {
+    children: "Click Me!",
+    icon: "mdi mdi-react",
+  },
+};
+
+export const Sizes: ButtonStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Button {...args} size="xs" />
+        <Button {...args} size="sm" />
+        <Button {...args} />
+        <Button {...args} size="md" />
+        <Button {...args} size="lg" />
+        <Button {...args} size="xl" />
+      </Fragment>
+    );
+  },
+  args: {
+    children: "Click Me!",
+    icon: "mdi mdi-react",
+  },
+};
+
+export const Styles: ButtonStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Button {...args} variant={undefined} />
+        <Button {...args} variant="outline" />
+        <Button {...args} variant="solid" />
+        <Button {...args} variant="link" />
+      </Fragment>
+    );
+  },
+  args: {
+    children: "Click Me!",
+    icon: "mdi mdi-react",
+  },
+};
+
+export const States: ButtonStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Button {...args} disabled />
+        <Button {...args} loading />
+        <Button {...args} active />
+      </Fragment>
+    );
+  },
+  args: {
+    children: "Click Me!",
+    icon: "mdi mdi-react",
+  },
+};
+
+export const Badges: ButtonStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Button
+          {...args}
+          badge={{
+            value: 999,
+            max: 99,
+          }}
+          altIcon="mdi mdi-chevron-down"
+        />
+        <Badge value="TS" placement="top-start">
+          <Tooltip content="Tooltip">
+            <Button {...args} />
+          </Tooltip>
+        </Badge>
+        <Tooltip content="Tooltip">
+          <Badge ping className="bg-success-500">
+            <Button {...args} />
+          </Badge>
+        </Tooltip>
+      </Fragment>
+    );
+  },
+  args: {
+    children: "Click Me!",
+    icon: "mdi mdi-react",
+  },
+};
+
+/**
+ * Show action completed animation
+ */
+export const ActionState: ButtonStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Tooltip content="Tooltip">
+          <Button {...args} />
+        </Tooltip>
+        <Button {...args} color="success" />
+        <Button {...args} color="danger" />
+      </Fragment>
+    );
+  },
+  args: {
+    children: "Click Me!",
+    icon: "mdi mdi-react",
+    actionMessage: "Action completed",
+    onClick: (e: AnyObject) => {
+      fn()(e);
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(1);
+        }, 2000);
+      });
+    },
+  },
+};
+
+export const Tester: ButtonStory = {
+  render: (args) => <Button {...args} />,
+  args: {},
+};
diff --git a/packages/core/stories/components/button/ButtonGroup.mdx b/packages/core/stories/components/button/ButtonGroup.mdx
new file mode 100644
index 0000000..c448819
--- /dev/null
+++ b/packages/core/stories/components/button/ButtonGroup.mdx
@@ -0,0 +1,102 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Heading,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { ButtonGroup, Collapsable } from "../../../src";
+import * as ButtonGroupStories from "./ButtonGroup.stories";
+import * as NavigatorStories from "./Navigator.stories";
+
+<Meta of={ButtonGroupStories} />
+
+<Title>Button Group</Title>
+
+<Anchor storyId="ButtonGroup">
+  <div className="hidden-anchor">
+    <Subheading>Button Group</Subheading>
+  </div>
+</Anchor>
+
+<Description of={ButtonGroup} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ButtonGroupStories._ButtonGroup} />
+</Collapsable>
+
+<Anchor storyId="splitButton">
+  <Subheading>Split Button</Subheading>
+</Anchor>
+<Description of={ButtonGroupStories.SplitButton} />
+<Canvas withToolbar of={ButtonGroupStories.SplitButton} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ButtonGroupStories.SplitButton} />
+</Collapsable>
+
+<Anchor storyId="stretchButtons">
+  <Subheading>Stretched Buttons</Subheading>
+</Anchor>
+<Description of={ButtonGroupStories.StretchButtons} />
+<Canvas withToolbar of={ButtonGroupStories.StretchButtons} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ButtonGroupStories.StretchButtons} />
+</Collapsable>
+
+<Anchor storyId="navigator">
+  <Subheading>Navigator</Subheading>
+</Anchor>
+<Description of={NavigatorStories._Navigator} />
+<Canvas withToolbar of={NavigatorStories._Navigator} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={NavigatorStories._Navigator} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { ButtonGroup } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <ButtonGroup
+      icon="icon svg path"
+      altIcon="caret icon"
+      color="color"
+      variant="style"
+      loading={boolean}
+      disabled={boolean}
+      message="Confirmation message"
+      okLabel="Yes"
+      cancelLabel="No"
+    >
+      Button Label
+    </Button>
+  );
+};
+```
diff --git a/packages/core/stories/components/button/ButtonGroup.stories.tsx b/packages/core/stories/components/button/ButtonGroup.stories.tsx
new file mode 100644
index 0000000..ec7ea19
--- /dev/null
+++ b/packages/core/stories/components/button/ButtonGroup.stories.tsx
@@ -0,0 +1,105 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Fragment } from "react/jsx-runtime";
+import { Badge, Button, ButtonGroup, Dropdown, Navigator } from "../../../src";
+import { Tooltip } from "../../../src/overlays";
+
+const meta: Meta = {
+  component: ButtonGroup,
+  subcomponents: { Navigator } as AnyObject,
+  title: "@core/components/ButtonGroup",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/ButtonGroup.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ButtonGroupStory = StoryObj<typeof ButtonGroup>;
+
+export const _ButtonGroup: ButtonGroupStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <ButtonGroup {...args}>
+          <Button>First</Button>
+          <Button>Second</Button>
+          <Button>Third</Button>
+        </ButtonGroup>
+      </Fragment>
+    );
+  },
+  args: {},
+};
+
+export const SplitButton: ButtonGroupStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <ButtonGroup {...args}>
+          <Badge ping>
+            <Button>Action</Button>
+          </Badge>
+          <Dropdown fitToParent showArrow placement="bottom-end">
+            <Tooltip content="Tooltip">
+              <Button icon="mdi mdi-chevron-down" aria-label="Extra" />
+            </Tooltip>
+            <div className="p-2">Dropdown</div>
+          </Dropdown>
+        </ButtonGroup>
+      </Fragment>
+    );
+  },
+  args: {},
+};
+
+export const StretchButtons: ButtonGroupStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <ButtonGroup {...args} className="w-[420px]">
+          <Button className="flex-1">First</Button>
+          <Button className="flex-1">Second</Button>
+          <Button className="flex-1">Third</Button>
+          <Button icon="mdi mdi-react" aria-label="Sample" />
+        </ButtonGroup>
+      </Fragment>
+    );
+  },
+  args: {},
+};
+
+export const Tester: ButtonGroupStory = {
+  render: (args) => <ButtonGroup {...args} />,
+  args: {},
+};
diff --git a/packages/core/stories/components/button/ConfirmButton.mdx b/packages/core/stories/components/button/ConfirmButton.mdx
new file mode 100644
index 0000000..93b8989
--- /dev/null
+++ b/packages/core/stories/components/button/ConfirmButton.mdx
@@ -0,0 +1,81 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Heading,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { ConfirmButton, Collapsable } from "../../../src";
+import * as ConfirmButtonStories from "./ConfirmButton.stories";
+
+<Meta of={ConfirmButtonStories} />
+
+<Title>Confirm Button</Title>
+
+<Anchor storyId="confirmButton">
+  <div className="hidden-anchor">
+    <Subheading>Confirm Button</Subheading>
+  </div>
+</Anchor>
+
+<Description of={ConfirmButton} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ConfirmButtonStories._ConfirmButton} />
+</Collapsable>
+
+<Anchor storyId="withAction">
+  <Subheading>With Action</Subheading>
+</Anchor>
+<Description of={ConfirmButtonStories.ConfirmWithAction} />
+<Canvas withToolbar of={ConfirmButtonStories.ConfirmWithAction} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ConfirmButtonStories.ConfirmWithAction} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { ConfirmButton } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <ConfirmButton
+      icon="icon svg path"
+      altIcon="caret icon"
+      color="color"
+      variant="style"
+      loading={boolean}
+      disabled={boolean}
+      message="Confirmation message"
+      okLabel="Yes"
+      cancelLabel="No"
+    >
+      Button Label
+    </Button>
+  );
+};
+```
diff --git a/packages/core/stories/components/button/ConfirmButton.stories.tsx b/packages/core/stories/components/button/ConfirmButton.stories.tsx
new file mode 100644
index 0000000..6a097e0
--- /dev/null
+++ b/packages/core/stories/components/button/ConfirmButton.stories.tsx
@@ -0,0 +1,76 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Fragment } from "react/jsx-runtime";
+import { ConfirmButton } from "../../../src";
+
+const meta: Meta = {
+  component: ConfirmButton,
+  title: "@core/components/ConfirmButton",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/ConfirmButton.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ConfirmButtonStory = StoryObj<typeof ConfirmButton>;
+
+export const _ConfirmButton: ConfirmButtonStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <ConfirmButton {...args}>Confirm Action</ConfirmButton>
+      </Fragment>
+    );
+  },
+  args: {
+    message: "Confirm done",
+    onClick: fn(),
+  },
+};
+
+export const ConfirmWithAction: ConfirmButtonStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <ConfirmButton {...args}>Confirm with Completed Action</ConfirmButton>
+      </Fragment>
+    );
+  },
+  args: {
+    actionMessage: "Action completed",
+    message: "Confirm done",
+    onClick: fn(),
+  },
+};
diff --git a/packages/core/stories/components/button/Navigator.stories.tsx b/packages/core/stories/components/button/Navigator.stories.tsx
new file mode 100644
index 0000000..902064a
--- /dev/null
+++ b/packages/core/stories/components/button/Navigator.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Navigator, useNavigator } from "../../../src";
+
+const meta: Meta = {
+  component: Navigator,
+  title: "@core/components/ButtonGroup",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Navigator.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type NavigatorStory = StoryObj<typeof Navigator>;
+
+export const _Navigator: NavigatorStory = {
+  render: (args) => {
+    const { headLabel, onNavigate } = useNavigator(99);
+    return (
+      <div className="flex gap-4 items-center">
+        {headLabel}
+        <Navigator onNavigate={onNavigate} />
+      </div>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/components/button/ToggleButtonGroup.mdx b/packages/core/stories/components/button/ToggleButtonGroup.mdx
new file mode 100644
index 0000000..7138963
--- /dev/null
+++ b/packages/core/stories/components/button/ToggleButtonGroup.mdx
@@ -0,0 +1,91 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Heading,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { ToggleButtonGroup, Collapsable } from "../../../src";
+import * as ToggleButtonGroupStories from "./ToggleButtonGroup.stories";
+
+<Meta of={ToggleButtonGroupStories} />
+
+<Title>Toggle Button Group</Title>
+
+<Anchor storyId="ToggleButtonGroup">
+  <div className="hidden-anchor">
+    <Subheading>Toggle Group</Subheading>
+  </div>
+</Anchor>
+
+<Description of={ToggleButtonGroup} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ToggleButtonGroupStories._ToggleButtonGroup} />
+</Collapsable>
+
+<Anchor storyId="singleSelect">
+  <Subheading>Single Selection</Subheading>
+</Anchor>
+<Description of={ToggleButtonGroupStories.SingleSelection} />
+<Canvas withToolbar of={ToggleButtonGroupStories.SingleSelection} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ToggleButtonGroupStories.SingleSelection} />
+</Collapsable>
+
+<Anchor storyId="editorToolbar">
+  <Subheading>Editor Toolbar</Subheading>
+</Anchor>
+<Description of={ToggleButtonGroupStories.EditorToolbar} />
+<Canvas withToolbar of={ToggleButtonGroupStories.EditorToolbar} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ToggleButtonGroupStories.EditorToolbar} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" of={ToggleButtonGroup} />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { ToggleButtonGroup } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <ToggleButtonGroup
+      icon="icon svg path"
+      altIcon="caret icon"
+      color="color"
+      variant="style"
+      loading={boolean}
+      disabled={boolean}
+      message="Confirmation message"
+      okLabel="Yes"
+      cancelLabel="No"
+    >
+      Button Label
+    </Button>
+  );
+};
+```
diff --git a/packages/core/stories/components/button/ToggleButtonGroup.stories.tsx b/packages/core/stories/components/button/ToggleButtonGroup.stories.tsx
new file mode 100644
index 0000000..4da6264
--- /dev/null
+++ b/packages/core/stories/components/button/ToggleButtonGroup.stories.tsx
@@ -0,0 +1,131 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Fragment } from "react/jsx-runtime";
+import { Button, Divider, ToggleButtonGroup } from "../../../src";
+
+const meta: Meta = {
+  component: ToggleButtonGroup,
+  title: "@core/components/ToggleButtonGroup",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/ToggleButtonGroup.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ToggleButtonGroupStory = StoryObj<typeof ToggleButtonGroup>;
+
+export const _ToggleButtonGroup: ToggleButtonGroupStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <ToggleButtonGroup {...args}>
+          <Button value="1">First</Button>
+          <Button value="2">Second</Button>
+          <Button value="3">Third</Button>
+        </ToggleButtonGroup>
+      </Fragment>
+    );
+  },
+  args: {
+    value: ["1", "2"],
+    onChange: fn<any>(),
+  },
+};
+
+export const SingleSelection: ToggleButtonGroupStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <ToggleButtonGroup {...args}>
+          <Button value="1">First</Button>
+          <Button value="2">Second</Button>
+          <Button value="3">Third</Button>
+        </ToggleButtonGroup>
+      </Fragment>
+    );
+  },
+  args: {
+    value: "1",
+    onChange: fn<any>(),
+  },
+};
+
+export const EditorToolbar: ToggleButtonGroupStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <div className="border border-muted p-1 flex gap-2 rounded">
+          <ToggleButtonGroup value="left" variant="link">
+            <Button
+              icon="mdi mdi-format-align-left"
+              value="left"
+              aria-label="left"
+            />
+            <Button
+              icon="mdi mdi-format-align-center"
+              value="center"
+              aria-label="center"
+            />
+            <Button
+              icon="mdi mdi-format-align-right"
+              value="right"
+              aria-label="right"
+            />
+            <Button
+              icon="mdi mdi-format-align-justify"
+              value="justify"
+              aria-label="justify"
+            />
+          </ToggleButtonGroup>
+          <Divider vertical />
+          <ToggleButtonGroup value={[]} variant="link">
+            <Button icon="mdi mdi-format-bold" value="bold" aria-label="bold" />
+            <Button
+              icon="mdi mdi-format-italic"
+              value="italic"
+              aria-label="italic"
+            />
+            <Button
+              icon="mdi mdi-format-underline"
+              value="undeline"
+              aria-label="undeline"
+            />
+          </ToggleButtonGroup>
+        </div>
+      </Fragment>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/components/callout/Callout.mdx b/packages/core/stories/components/callout/Callout.mdx
new file mode 100644
index 0000000..31ddd4e
--- /dev/null
+++ b/packages/core/stories/components/callout/Callout.mdx
@@ -0,0 +1,80 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Callout, Collapsable } from "../../../src";
+import * as CalloutStories from "./Callout.stories";
+
+<Meta of={CalloutStories} />
+
+<Title>Callout</Title>
+
+<Anchor storyId="callout">
+  <div className="hidden-anchor">
+    <Subheading>Callout</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Callout} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CalloutStories._Callout} />
+</Collapsable>
+
+<Anchor storyId="withlegend">
+  <Subheading>With Legend</Subheading>
+</Anchor>
+<Description of={CalloutStories.WithLegend} />
+<Canvas withToolbar of={CalloutStories.WithLegend} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CalloutStories.WithLegend} />
+</Collapsable>
+
+<Anchor storyId="colors">
+  <Subheading>Colors</Subheading>
+</Anchor>
+<Description of={CalloutStories.Colors} />
+<Canvas withToolbar of={CalloutStories.Colors} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CalloutStories.Colors} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Callout } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Callout title="Empty title" legend="Legend">
+      {...message text}
+    </Callout>
+  );
+};
+```
diff --git a/packages/core/stories/components/callout/Callout.stories.tsx b/packages/core/stories/components/callout/Callout.stories.tsx
new file mode 100644
index 0000000..c15d6d8
--- /dev/null
+++ b/packages/core/stories/components/callout/Callout.stories.tsx
@@ -0,0 +1,150 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker, fakerAR } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Fragment } from "react/jsx-runtime";
+import { Callout, Col, Row, Text } from "../../../src";
+
+const meta: Meta = {
+  component: Callout,
+  title: "@core/components/Callout",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Callout.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type CalloutStory = StoryObj<typeof Callout>;
+
+export const _Callout: CalloutStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Callout {...args}>
+          <Text clamp={4}>{faker.lorem.sentences(2)}</Text>
+        </Callout>
+        <Callout {...args} title={fakerAR.commerce.productName()}>
+          <Text clamp={4}>{fakerAR.lorem.sentences(2)}</Text>
+        </Callout>
+      </Fragment>
+    );
+  },
+  args: {
+    title: faker.commerce.productName(),
+    icon: "mdi mdi-react",
+  },
+};
+
+export const WithLegend: CalloutStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Callout {...args}>
+          <Text clamp={4}>{faker.lorem.sentences(2)}</Text>
+        </Callout>
+      </Fragment>
+    );
+  },
+  args: {
+    title: faker.commerce.productName(),
+    legend: faker.animal.cat(),
+    icon: "mdi mdi-react",
+    border: "dashed",
+    color: "info",
+  },
+};
+
+export const Colors: CalloutStory = {
+  render: (args) => {
+    return (
+      <Row>
+        <Col className="span-12" stretchContent>
+          <Callout
+            {...args}
+            color="primary"
+            title="Primary"
+            icon="mdi mdi-react"
+          >
+            <Text clamp={4}>{faker.lorem.sentences(2)}</Text>
+          </Callout>
+        </Col>
+        <Col className="span-12" stretchContent>
+          <Callout {...args} color="accent" title="Accent" icon="mdi mdi-react">
+            <Text clamp={4}>{faker.lorem.sentences(2)}</Text>
+          </Callout>
+        </Col>
+        <Col className="span-12" stretchContent>
+          <Callout
+            {...args}
+            color="info"
+            title="Info"
+            icon="mdi mdi-information-outline"
+          >
+            <Text clamp={4}>{faker.lorem.sentences(2)}</Text>
+          </Callout>
+        </Col>
+        <Col className="span-12" stretchContent>
+          <Callout
+            {...args}
+            color="danger"
+            title="Danger"
+            icon="mdi mdi-close-circle-outline"
+          >
+            <Text clamp={4}>{faker.lorem.sentences(2)}</Text>
+          </Callout>
+        </Col>
+        <Col className="span-12" stretchContent>
+          <Callout
+            {...args}
+            color="success"
+            title="Sucess"
+            icon="mdi mdi-check-circle-outline"
+          >
+            <Text clamp={4}>{faker.lorem.sentences(2)}</Text>
+          </Callout>
+        </Col>
+        <Col className="span-12" stretchContent>
+          <Callout
+            {...args}
+            color="warning"
+            title="Warning"
+            icon="mdi mdi-alert-outline"
+          >
+            <Text clamp={4}>{faker.lorem.sentences(2)}</Text>
+          </Callout>
+        </Col>
+      </Row>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/components/card/Card.mdx b/packages/core/stories/components/card/Card.mdx
new file mode 100644
index 0000000..717eb87
--- /dev/null
+++ b/packages/core/stories/components/card/Card.mdx
@@ -0,0 +1,97 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Heading,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Card, Collapsable } from "../../../src";
+import * as CardStories from "./Card.stories";
+
+<Meta of={CardStories} />
+
+<Title>Card</Title>
+
+<Anchor storyId="card">
+  <div className="hidden-anchor">
+    <Subheading>Card</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Card} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CardStories._Card} />
+</Collapsable>
+
+<Anchor storyId="clickable">
+  <Subheading>Clickable</Subheading>
+</Anchor>
+<Description of={CardStories.Clickable} />
+<Canvas withToolbar of={CardStories.Clickable} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CardStories.Clickable} />
+</Collapsable>
+
+<Anchor storyId="headFoot">
+  <Subheading>Header Footer</Subheading>
+</Anchor>
+<Description of={CardStories.HeadFoot} />
+<Canvas withToolbar of={CardStories.HeadFoot} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CardStories.HeadFoot} />
+</Collapsable>
+
+<Anchor storyId="cardCover">
+  <Subheading>Card Cover</Subheading>
+</Anchor>
+<Description of={CardStories._CardCover} />
+<Canvas withToolbar of={CardStories._CardCover} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CardStories._CardCover} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Card } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Card
+      className=""
+      bodyClassName=""
+      onClick={handler}
+    >
+        <Title as="h3">Card Title</Title>
+        <Title className="text-dimmed">Card description goes here</Title>
+        <Text clamp={4}>{faker.lorem.sentences(10)}</Text>
+    </Button>
+  );
+};
+```
diff --git a/packages/core/stories/components/card/Card.stories.tsx b/packages/core/stories/components/card/Card.stories.tsx
new file mode 100644
index 0000000..f68e04a
--- /dev/null
+++ b/packages/core/stories/components/card/Card.stories.tsx
@@ -0,0 +1,309 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Fragment } from "react/jsx-runtime";
+import {
+  Badge,
+  Button,
+  ButtonGroup,
+  Card,
+  CardCover,
+  Chip,
+  Col,
+  Dropdown,
+  Footer,
+  Header,
+  Icon,
+  Image,
+  Row,
+  Text,
+  Title,
+  Video,
+} from "../../../src";
+import video from "/assets/samples/small_video.mp4";
+
+const meta: Meta = {
+  component: Card,
+  subcomponents: { CardCover } as AnyObject,
+  title: "@core/components/Card",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Card.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-start p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type CardStory = StoryObj<typeof Card>;
+type CardCoverStory = StoryObj<typeof CardCover>;
+
+export const _Card: CardStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Badge value="Info Cards" placement="top">
+          <Card {...args}>
+            <Title as="h3">Card Title</Title>
+            <Title className="text-dimmed">Card description goes here</Title>
+            <Text clamp={4}>{faker.lorem.sentences(10)}</Text>
+          </Card>
+        </Badge>
+      </Fragment>
+    );
+  },
+  args: {
+    className: "w-96",
+    bodyClassName: "p-4",
+  },
+};
+
+export const Clickable: CardStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Card {...args}>
+          <Title as="h3">Card Title</Title>
+          <Title className="text-dimmed">Card description goes here</Title>
+          <Text clamp={4}>{faker.lorem.sentences(10)}</Text>
+        </Card>
+      </Fragment>
+    );
+  },
+  args: {
+    className: "w-96",
+    bodyClassName: "p-4",
+    onClick: fn(),
+  },
+};
+
+export const HeadFoot: CardStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Card {...args}>
+          <Header className="px-2 bg-dimmed" flex>
+            <Title className="flex-1">Card heading</Title>
+            <Dropdown closeOnClick showArrow placement="bottom-end">
+              <Button
+                rounded
+                size="sm"
+                variant="link"
+                aria-label="Menu"
+                icon="mdi mdi-dots-vertical"
+              />
+              <menu>
+                <li className="px-2 py-1">Item 1</li>
+                <li className="px-2 py-1">Item 2</li>
+                <li className="px-2 py-1">Item 3</li>
+              </menu>
+            </Dropdown>
+          </Header>
+          <Title as="h3">Card Title</Title>
+          <Title className="text-dimmed">Card description goes here</Title>
+          <Row gutter="md" className="py-2" align="center">
+            <Col>
+              <Icon icon="mdi mdi-shield" className="text-danger-600" />
+            </Col>
+            <Col>
+              <Icon icon="mdi mdi-information" className="text-muted" />
+            </Col>
+            <Col>
+              <Chip>Label</Chip>
+            </Col>
+            <Col>
+              <Chip color="info" onClick={() => undefined}>
+                Label
+              </Chip>
+            </Col>
+          </Row>
+          <Text clamp={4}>{faker.lorem.sentences(10)}</Text>
+          <Footer className="border-t border-muted">
+            <ButtonGroup fullWidth variant="link" size="lg">
+              <Button
+                className="flex-1"
+                icon="mdi mdi-share"
+                aria-label="share"
+              />
+              <Button
+                className="flex-1"
+                icon="mdi mdi-download"
+                aria-label="download"
+              />
+              <Button
+                className="flex-1"
+                icon="mdi mdi-content-save"
+                aria-label="save"
+              />
+            </ButtonGroup>
+          </Footer>
+        </Card>
+      </Fragment>
+    );
+  },
+  args: {
+    className: "w-96",
+    bodyClassName: "p-4",
+    onClick: fn(),
+  },
+};
+
+export const _CardCover: CardCoverStory = {
+  render: ({ autoPlay, playOnHover, ...args }: AnyObject) => {
+    return (
+      <Fragment>
+        <Card className="w-96" bodyClassName="p-0">
+          <CardCover className="p-4" height={240}>
+            <Image src={faker.image.url()} />
+            <Title as="h3">Card Title</Title>
+            <Title>Card description</Title>
+            <div className="absolute top-2 rounded-full leading-[0] end-2 bg-base/70">
+              <Button
+                rounded
+                size="sm"
+                variant="link"
+                aria-label="Menu"
+                icon="mdi mdi-dots-vertical"
+              />
+            </div>
+          </CardCover>
+          <div
+            className="px-4 text-end z-2 relative"
+            style={{
+              marginTop: "-1rem",
+            }}
+          >
+            <div className="inline-block" data-inner-clickable>
+              <Button
+                rounded
+                icon="mdi mdi-thumb-up"
+                color="accent"
+                variant="solid"
+                aria-label="Like"
+              />
+              <Button
+                rounded
+                icon="mdi mdi-thumb-down"
+                color="danger"
+                variant="solid"
+                aria-label="Like"
+              />
+            </div>
+          </div>
+          <Text className="p-4" clamp={4}>
+            {faker.lorem.sentences(10)}
+          </Text>
+          <Footer className="border-t border-muted">
+            <ButtonGroup fullWidth variant="link" size="lg">
+              <Button
+                className="flex-1"
+                icon="mdi mdi-share"
+                aria-label="share"
+              />
+              <Button
+                className="flex-1"
+                icon="mdi mdi-download"
+                aria-label="download"
+              />
+              <Button
+                className="flex-1"
+                icon="mdi mdi-content-save"
+                aria-label="save"
+              />
+            </ButtonGroup>
+          </Footer>
+        </Card>
+        <Card className="w-96" bodyClassName="p-0">
+          <CardCover className="p-4" height={240} colorScheme="dark">
+            <Video
+              reel
+              src={video}
+              autoPlay={autoPlay}
+              playOnHover={playOnHover}
+              // "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+            />
+            <Title as="h3">Card Title</Title>
+            <Title>Card description</Title>
+          </CardCover>
+          <div
+            className="px-4 text-end z-2 relative"
+            style={{
+              marginTop: "-1rem",
+            }}
+          >
+            <div className="inline-block" data-inner-clickable>
+              <Button
+                rounded
+                icon="mdi mdi-thumb-up"
+                color="accent"
+                variant="solid"
+                aria-label="Like"
+              />
+              <Button
+                rounded
+                icon="mdi mdi-thumb-down"
+                color="danger"
+                variant="solid"
+                aria-label="Like"
+              />
+            </div>
+          </div>
+          <Text className="p-4" clamp={4}>
+            {faker.lorem.sentences(10)}
+          </Text>
+          <Footer className="border-t border-muted">
+            <ButtonGroup fullWidth variant="link" size="lg">
+              <Button
+                className="flex-1"
+                icon="mdi mdi-share"
+                aria-label="share"
+              />
+              <Button
+                className="flex-1"
+                icon="mdi mdi-download"
+                aria-label="download"
+              />
+              <Button
+                className="flex-1"
+                icon="mdi mdi-content-save"
+                aria-label="save"
+              />
+            </ButtonGroup>
+          </Footer>
+        </Card>
+      </Fragment>
+    );
+  },
+  args: {
+    ...({ playOnHover: false, autoPlay: true } as AnyObject),
+  },
+};
diff --git a/packages/core/stories/components/chip/Chip.mdx b/packages/core/stories/components/chip/Chip.mdx
new file mode 100644
index 0000000..1a755f5
--- /dev/null
+++ b/packages/core/stories/components/chip/Chip.mdx
@@ -0,0 +1,108 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Heading,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Chip, Collapsable } from "../../../src";
+import * as ChipStories from "./Chip.stories";
+
+<Meta of={ChipStories} />
+
+<Title>Chip</Title>
+
+<Anchor storyId="chip">
+  <div className="hidden-anchor">
+    <Subheading>Chip</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Chip} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ChipStories._Chip} />
+</Collapsable>
+
+<Anchor storyId="styles">
+  <Subheading>Styles</Subheading>
+</Anchor>
+<Description of={ChipStories.Styles} />
+<Canvas withToolbar of={ChipStories.Styles} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ChipStories.Styles} />
+</Collapsable>
+
+<Anchor storyId="colors">
+  <Subheading>Colors</Subheading>
+</Anchor>
+<Description of={ChipStories.Colors} />
+<Canvas withToolbar of={ChipStories.Colors} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ChipStories.Colors} />
+</Collapsable>
+
+<Anchor storyId="sizes">
+  <Subheading>Sizes</Subheading>
+</Anchor>
+<Description of={ChipStories.Sizes} />
+<Canvas withToolbar of={ChipStories.Sizes} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ChipStories.Sizes} />
+</Collapsable>
+
+<Anchor storyId="states">
+  <Subheading>States</Subheading>
+</Anchor>
+<Description of={ChipStories.States} />
+<Canvas withToolbar of={ChipStories.States} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ChipStories.States} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Chip } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Chip
+      icon="icon svg path"
+      altIcon="caret icon"
+      color="color"
+      variant="style"
+      loading={boolean}
+      disabled={boolean}
+    >
+      Chip Label
+    </Chip>
+  );
+};
+```
diff --git a/packages/core/stories/components/chip/Chip.stories.tsx b/packages/core/stories/components/chip/Chip.stories.tsx
new file mode 100644
index 0000000..bb40a9f
--- /dev/null
+++ b/packages/core/stories/components/chip/Chip.stories.tsx
@@ -0,0 +1,148 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { Fragment } from "react/jsx-runtime";
+import { Badge, Chip } from "../../../src";
+import { fn } from "@storybook/test";
+
+const meta: Meta = {
+  component: Chip,
+  title: "@core/components/Chip",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Chip.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ChipStory = StoryObj<typeof Chip>;
+
+export const _Chip: ChipStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Chip {...args} icon="mdi mdi-react" />
+        <Chip {...args}>Tag Label</Chip>
+        <Chip {...args} icon="mdi mdi-react">
+          Tag Label
+        </Chip>
+        <Badge value={99} placement="top-end">
+          <Chip {...args}>Tag Label</Chip>
+        </Badge>
+      </Fragment>
+    );
+  },
+  args: {},
+};
+
+export const Colors: ChipStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Chip {...args} color="primary" />
+        <Chip {...args} color="accent" />
+        <Chip {...args} color="info" />
+        <Chip {...args} color="danger" />
+        <Chip {...args} color="success" />
+        <Chip {...args} color="warning" />
+        <Chip {...args} color="#9c88ff" />
+      </Fragment>
+    );
+  },
+  args: {
+    children: "Tag Label",
+    icon: "mdi mdi-react",
+  },
+};
+
+export const Sizes: ChipStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Chip {...args} size="xs" />
+        <Chip {...args} size="sm" />
+        <Chip {...args} />
+        <Chip {...args} size="md" />
+        <Chip {...args} size="lg" />
+        <Chip {...args} size="xl" />
+      </Fragment>
+    );
+  },
+  args: {
+    children: "Tag Label",
+    icon: "mdi mdi-react",
+  },
+};
+
+export const Styles: ChipStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Chip {...args} variant={undefined} />
+        <Chip {...args} variant="outline" />
+        <Chip {...args} variant="solid" />
+      </Fragment>
+    );
+  },
+  args: {
+    children: "Tag Label",
+    icon: "mdi mdi-react",
+  },
+};
+
+export const States: ChipStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Chip {...args} disabled onRemove={undefined}>
+          Disabled
+        </Chip>
+        <Chip {...args} onClick={undefined} onRemove={undefined}>
+          Normal
+        </Chip>
+        <Chip {...args} onRemove={undefined}>
+          Clickable
+        </Chip>
+        <Chip {...args} onClick={undefined}>
+          Removable
+        </Chip>
+      </Fragment>
+    );
+  },
+  args: {
+    children: "Click Me!",
+    icon: "mdi mdi-react",
+    onClick: fn(),
+    onRemove: fn(),
+  },
+};
diff --git a/packages/core/stories/components/collapable/Collapsable.mdx b/packages/core/stories/components/collapable/Collapsable.mdx
new file mode 100644
index 0000000..e3cf66c
--- /dev/null
+++ b/packages/core/stories/components/collapable/Collapsable.mdx
@@ -0,0 +1,71 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Collapsable } from "../../../src";
+import * as CollapsableStories from "./Collapsable.stories";
+
+<Meta of={CollapsableStories} />
+
+<Title>Collapsable</Title>
+
+<Anchor storyId="Collapsable">
+  <div className="hidden-anchor">
+    <Subheading>Collapsable</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Collapsable} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CollapsableStories._Collapsable} />
+</Collapsable>
+
+<Anchor storyId="withlegend">
+  <Subheading>Multiple</Subheading>
+</Anchor>
+<Description of={CollapsableStories.Multiple} />
+<Canvas withToolbar of={CollapsableStories.Multiple} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CollapsableStories.Multiple} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Collapsable } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Collapsable>
+        <Title>Collapsable title</Title>
+        <Content>{...message text}</Content>
+    </Collapsable>
+  );
+};
+```
diff --git a/packages/core/stories/components/collapable/Collapsable.stories.tsx b/packages/core/stories/components/collapable/Collapsable.stories.tsx
new file mode 100644
index 0000000..625fd6f
--- /dev/null
+++ b/packages/core/stories/components/collapable/Collapsable.stories.tsx
@@ -0,0 +1,95 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Fragment } from "react/jsx-runtime";
+import { Badge, Collapsable, Content, Text, Title } from "../../../src";
+
+const meta: Meta = {
+  component: Collapsable,
+  title: "@core/components/Collapsable",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Collapsable.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl w-screen p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type CollapsableStory = StoryObj<typeof Collapsable>;
+
+export const _Collapsable: CollapsableStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Collapsable {...args}>
+          <Title>{faker.commerce.productName()}</Title>
+          <Content>
+            <p>{faker.commerce.productDescription()}</p>
+            <p>{faker.lorem.sentences(2)}</p>
+          </Content>
+        </Collapsable>
+      </Fragment>
+    );
+  },
+  args: {},
+};
+
+export const Multiple: CollapsableStory = {
+  render: (args) => {
+    return (
+      <div className="divide-y outline rounded-capped">
+        <Collapsable {...args}>
+          <p>{faker.commerce.productName()}</p>
+          <Content className="p-2">
+            <p>{faker.commerce.productDescription()}</p>
+            <p>{faker.lorem.sentences(2)}</p>
+          </Content>
+        </Collapsable>
+        <Collapsable {...args}>
+          <p>{faker.commerce.productName()}</p>
+          <Content className="p-2">
+            <p>{faker.commerce.productDescription()}</p>
+            <p>{faker.lorem.sentences(2)}</p>
+          </Content>
+        </Collapsable>
+        <Collapsable {...args}>
+          <p>{faker.commerce.productName()}</p>
+          <Content className="p-2">
+            <p>{faker.commerce.productDescription()}</p>
+            <p>{faker.lorem.sentences(2)}</p>
+          </Content>
+        </Collapsable>
+      </div>
+    );
+  },
+  args: { iconAlign: "end" },
+};
diff --git a/packages/core/stories/components/dropdown/Dropdown.mdx b/packages/core/stories/components/dropdown/Dropdown.mdx
new file mode 100644
index 0000000..a6dd93e
--- /dev/null
+++ b/packages/core/stories/components/dropdown/Dropdown.mdx
@@ -0,0 +1,86 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Heading,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Collapsable, Dropdown } from "../../../src";
+import * as DropdownStories from "./Dropdown.stories";
+
+<Meta of={DropdownStories} />
+
+<Title>Dropdown</Title>
+
+<Anchor storyId="Dropdown">
+  <div className="hidden-anchor">
+    <Subheading>Dropdown</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Dropdown} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={DropdownStories._Dropdown} />
+</Collapsable>
+
+<Anchor storyId="card">
+  <Subheading>Card Content</Subheading>
+</Anchor>
+<Description of={DropdownStories.CardContent} />
+<Canvas withToolbar of={DropdownStories.CardContent} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={DropdownStories.CardContent} />
+</Collapsable>
+
+<Anchor storyId="panel">
+  <Subheading>Panel Content</Subheading>
+</Anchor>
+<Description of={DropdownStories.PanelContent} />
+<Canvas withToolbar of={DropdownStories.PanelContent} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={DropdownStories.PanelContent} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Dropdown, Button, Menu, MenuItem } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Dropdown>
+      <Button altIcon={CoreIcons.chevronDown}>Dropdown Menu</Button>
+      <Menu>
+        <MenuItem label="Item One" />
+        <MenuItem label="Item Two" />
+        <MenuItem label="Item Three" />
+      </Menu>
+    </Dropdown>
+  );
+};
+```
diff --git a/packages/core/stories/components/dropdown/Dropdown.stories.tsx b/packages/core/stories/components/dropdown/Dropdown.stories.tsx
new file mode 100644
index 0000000..da4d50d
--- /dev/null
+++ b/packages/core/stories/components/dropdown/Dropdown.stories.tsx
@@ -0,0 +1,137 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import {
+  Button,
+  Card,
+  Content,
+  CoreIcons,
+  Dropdown,
+  DropdownDismiss,
+  Footer,
+  Menu,
+  MenuItem,
+  Panel,
+  PanelGroup,
+  Text,
+} from "../../../src";
+
+const meta: Meta = {
+  component: Dropdown,
+  title: "@core/components/Dropdown",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Dropdown.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type DropdownStory = StoryObj<typeof Dropdown>;
+
+export const _Dropdown: DropdownStory = {
+  render: (args) => {
+    return (
+      <Dropdown {...args}>
+        <Button altIcon={CoreIcons.chevronDown}>Dropdown Menu</Button>
+        <Menu onClick={action("menu")}>
+          <MenuItem id="1" label="Item One" />
+          <MenuItem id="2" label="Item Two" />
+          <MenuItem id="3" label="Item Three" />
+        </Menu>
+      </Dropdown>
+    );
+  },
+  args: {
+    onClose: fn(),
+    onOpen: fn(),
+  },
+};
+
+export const CardContent: DropdownStory = {
+  render: (args) => {
+    return (
+      <Dropdown {...args}>
+        <Button altIcon={CoreIcons.chevronDown}>Dropdown Card</Button>
+        <Card>
+          <Text>Some content</Text>
+          <Footer className="p-2" flex justify="end">
+            <DropdownDismiss>
+              <Button onClick={action("button")}>Close</Button>
+            </DropdownDismiss>
+          </Footer>
+        </Card>
+      </Dropdown>
+    );
+  },
+  args: {
+    onClose: fn(),
+    onOpen: fn(),
+  },
+};
+
+export const PanelContent: DropdownStory = {
+  render: (args) => {
+    return (
+      <Dropdown {...args}>
+        <Button altIcon={CoreIcons.chevronDown}>Dropdown Panel</Button>
+        <PanelGroup>
+          <Panel title="Some panel">
+            <Content>
+              <Text>Some content</Text>
+            </Content>
+            <Footer className="p-2" flex justify="end">
+              <DropdownDismiss>
+                <Button>Close</Button>
+              </DropdownDismiss>
+            </Footer>
+          </Panel>
+          <Panel title="Some panel">
+            <Content>
+              <Text>Some content</Text>
+            </Content>
+            <Footer className="p-2" flex justify="end">
+              <DropdownDismiss>
+                <Button>Close</Button>
+              </DropdownDismiss>
+            </Footer>
+          </Panel>
+        </PanelGroup>
+      </Dropdown>
+    );
+  },
+  args: {
+    onClose: fn(),
+    onOpen: fn(),
+  },
+};
diff --git a/packages/core/stories/components/empty/Empty.mdx b/packages/core/stories/components/empty/Empty.mdx
new file mode 100644
index 0000000..865b02a
--- /dev/null
+++ b/packages/core/stories/components/empty/Empty.mdx
@@ -0,0 +1,80 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { EmptyContent, Collapsable } from "../../../src";
+import * as EmptyStories from "./Empty.stories";
+
+<Meta of={EmptyStories} />
+
+<Title>Empty Content</Title>
+
+<Anchor storyId="emptycontent">
+  <div className="hidden-anchor">
+    <Subheading>Empty Content</Subheading>
+  </div>
+</Anchor>
+
+<Description of={EmptyContent} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={EmptyStories._EmptyContent} />
+</Collapsable>
+
+<Anchor storyId="card">
+  <Subheading>Card</Subheading>
+</Anchor>
+<Description of={EmptyStories.CardEmpty} />
+<Canvas withToolbar of={EmptyStories.CardEmpty} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={EmptyStories.CardEmpty} />
+</Collapsable>
+
+<Anchor storyId="panel">
+  <Subheading>Panel</Subheading>
+</Anchor>
+<Description of={EmptyStories.PanelEmpty} />
+<Canvas withToolbar of={EmptyStories.PanelEmpty} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={EmptyStories.PanelEmpty} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Button, EmptyContent } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <EmptyContent title="Empty title" message="Empty message">
+      <Button>Action</Button>
+    </EmptyContent>
+  );
+};
+```
diff --git a/packages/core/stories/components/empty/Empty.stories.tsx b/packages/core/stories/components/empty/Empty.stories.tsx
new file mode 100644
index 0000000..2424626
--- /dev/null
+++ b/packages/core/stories/components/empty/Empty.stories.tsx
@@ -0,0 +1,99 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Fragment } from "react/jsx-runtime";
+import { Button, Card, EmptyContent, Panel } from "../../../src";
+
+const meta: Meta = {
+  component: EmptyContent,
+  title: "@core/components/Empty Content",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/EmptyContent.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type EmptyStory = StoryObj<typeof EmptyContent>;
+
+export const _EmptyContent: EmptyStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <EmptyContent {...args}>
+          <Button variant="link">Previous</Button>
+          <Button variant="link">Next</Button>
+        </EmptyContent>
+      </Fragment>
+    );
+  },
+  args: {
+    title: faker.commerce.productName(),
+    message: faker.commerce.productDescription(),
+  },
+};
+
+export const CardEmpty: EmptyStory = {
+  render: (args) => {
+    return (
+      <Card>
+        <EmptyContent {...args}>
+          <Button variant="link">Previous</Button>
+          <Button variant="link">Next</Button>
+        </EmptyContent>
+      </Card>
+    );
+  },
+  args: {
+    icon: "mdi mdi-react",
+    title: faker.commerce.productName(),
+    message: faker.commerce.productDescription(),
+  },
+};
+
+export const PanelEmpty: EmptyStory = {
+  render: (args) => {
+    return (
+      <Panel title="Panel Title">
+        <EmptyContent {...args}>
+          <Button variant="link">Previous</Button>
+          <Button variant="link">Next</Button>
+        </EmptyContent>
+      </Panel>
+    );
+  },
+  args: {
+    title: faker.commerce.productName(),
+    message: faker.commerce.productDescription(),
+  },
+};
diff --git a/packages/core/stories/components/icon/Icon.mdx b/packages/core/stories/components/icon/Icon.mdx
new file mode 100644
index 0000000..62968c2
--- /dev/null
+++ b/packages/core/stories/components/icon/Icon.mdx
@@ -0,0 +1,76 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Icon, Collapsable } from "../../../src";
+import * as IconStories from "./Icon.stories";
+
+<Meta of={IconStories} />
+
+<Title>Icon</Title>
+
+<Anchor storyId="icon">
+  <div className="hidden-anchor">
+    <Subheading>Icon</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Icon} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={IconStories._Icon} />
+</Collapsable>
+
+<Anchor storyId="colors">
+  <Subheading>Colors</Subheading>
+</Anchor>
+<Description of={IconStories.Colors} />
+<Canvas withToolbar of={IconStories.Colors} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={IconStories.Colors} />
+</Collapsable>
+
+<Anchor storyId="sizes">
+  <Subheading>Sizes</Subheading>
+</Anchor>
+<Description of={IconStories.Sizes} />
+<Canvas withToolbar of={IconStories.Sizes} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={IconStories.Sizes} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Icon } from "@react-fabric/core";
+
+export const Example = () => {
+  return <Icon icon="svg path / image url" />;
+};
+```
diff --git a/packages/core/stories/components/icon/Icon.stories.tsx b/packages/core/stories/components/icon/Icon.stories.tsx
new file mode 100644
index 0000000..2c182f6
--- /dev/null
+++ b/packages/core/stories/components/icon/Icon.stories.tsx
@@ -0,0 +1,111 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Fragment } from "react/jsx-runtime";
+import { Badge, Icon } from "../../../src";
+
+const meta: Meta = {
+  component: Icon,
+  title: "@core/components/Icon",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Icon.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type IconStory = StoryObj<typeof Icon>;
+
+export const _Icon: IconStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Icon {...args} />
+        <Icon {...args} icon="W" />
+        <Icon {...args} icon="WW" />
+        <Icon {...args} icon="WWW" />
+        <Icon {...args} icon="WWWW" />
+        <Badge value={99} placement="top-end">
+          <Icon {...args} />
+        </Badge>
+      </Fragment>
+    );
+  },
+  args: {
+    size: "2.5rem",
+    icon: "mdi mdi-react",
+    onClick: fn(),
+  },
+};
+
+export const Colors: IconStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Icon {...args} color="primary" />
+        <Icon {...args} color="accent" />
+        <Icon {...args} color="info" />
+        <Icon {...args} color="danger" />
+        <Icon {...args} color="success" />
+        <Icon {...args} color="warning" />
+        <Icon {...args} color="invert" bg="invert" />
+        <Icon {...args} color="#9333ea" />
+      </Fragment>
+    );
+  },
+  args: {
+    size: "2.5rem",
+    icon: "mdi mdi-react",
+    onClick: fn(),
+  },
+};
+
+export const Sizes: IconStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Icon {...args} size="xs" />
+        <Icon {...args} size="sm" />
+        <Icon {...args} />
+        <Icon {...args} size="md" />
+        <Icon {...args} size="lg" />
+        <Icon {...args} size="xl" />
+        <Icon {...args} size="2.5rem" />
+      </Fragment>
+    );
+  },
+  args: {
+    icon: "mdi mdi-react",
+    onClick: fn(),
+  },
+};
diff --git a/packages/core/stories/components/menu/Menu.mdx b/packages/core/stories/components/menu/Menu.mdx
new file mode 100644
index 0000000..9082994
--- /dev/null
+++ b/packages/core/stories/components/menu/Menu.mdx
@@ -0,0 +1,80 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Menu, Collapsable } from "../../../src";
+import * as MenuStories from "./Menu.stories";
+
+<Meta of={MenuStories} />
+
+<Title>Menu</Title>
+
+<Anchor storyId="icon">
+  <div className="hidden-anchor">
+    <Subheading>Menu</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Menu} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={MenuStories._Menu} />
+</Collapsable>
+
+<Anchor storyId="colors">
+  <Subheading>Compact</Subheading>
+</Anchor>
+<Description of={MenuStories.Minimal} />
+<Canvas withToolbar of={MenuStories.Minimal} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={MenuStories.Minimal} />
+</Collapsable>
+
+<Anchor storyId="sizes">
+  <Subheading>Context Menu</Subheading>
+</Anchor>
+<Description of={MenuStories._ContextMenu} />
+<Canvas withToolbar of={MenuStories._ContextMenu} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={MenuStories._ContextMenu} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Menu, MenuItem } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Menu>
+      <MenuItem label="Menu item" icon="icon path" />
+    </Menu>
+  );
+};
+```
diff --git a/packages/core/stories/components/menu/Menu.stories.tsx b/packages/core/stories/components/menu/Menu.stories.tsx
new file mode 100644
index 0000000..26fb7e9
--- /dev/null
+++ b/packages/core/stories/components/menu/Menu.stories.tsx
@@ -0,0 +1,154 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { useMemo } from "react";
+import { Fragment } from "react/jsx-runtime";
+import { ContextMenu, Divider, Menu, MenuItem, Title } from "../../../src";
+
+const meta: Meta = {
+  component: Menu,
+  subcomponents: { MenuItem, ContextMenu } as AnyObject,
+  title: "@core/components/Menu",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Menu.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type MenuStory = StoryObj<typeof Menu>;
+
+export const _Menu: MenuStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Menu {...args} className="outline rounded-capped min-h-80">
+          <MenuItem
+            id="appItem"
+            icon="mdi mdi-react"
+            label="Application Menu"
+            appendLabel="NEW"
+          />
+          <MenuItem id="newItem" label="New Menu Item" badge={45} />
+          <Divider />
+          <MenuItem id="collapsable1" label="Collapsable Item" disabled />
+          <MenuItem id="collapsable2" label="Collapsable Item" />
+          <Divider />
+          <MenuItem id="sectionItem" label="Section Item" />
+          <Menu label="Floating Item">
+            <MenuItem id="inner1" label="Inner Item" />
+            <MenuItem id="inner2" label="Inner Item" />
+            <Menu label="Floating Item">
+              <MenuItem id="inner1" label="Inner Item" />
+              <MenuItem id="inner2" label="Inner Item" />
+            </Menu>
+          </Menu>
+          <Menu label="Floating Item">
+            <MenuItem id="inner1" label="Inner Item" />
+            <MenuItem id="inner2" label="Inner Item" />
+          </Menu>
+          <div className="flex-1" />
+          <MenuItem id="delete" color="danger" label="Danger Item" />
+        </Menu>
+      </Fragment>
+    );
+  },
+  args: { onClick: fn() },
+};
+
+export const Minimal: MenuStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Menu
+          {...args}
+          label={undefined}
+          menuClassName={undefined}
+          minimal
+          className="outline rounded-capped"
+        >
+          <MenuItem
+            id="appItem"
+            icon="mdi mdi-react"
+            label="Application Menu"
+            appendLabel="NEW"
+          />
+          <MenuItem id="newItem" label="New Menu Item" badge={45} />
+          <MenuItem id="collapsable1" label="Collapsable Item" />
+          <MenuItem id="collapsable2" label="Collapsable Item" />
+          <MenuItem id="sectionItem" label="Section Item" />
+          <Menu label="Floating Item">
+            <MenuItem id="inner1" label="Inner Item" />
+            <MenuItem id="inner2" label="Inner Item" />
+          </Menu>
+        </Menu>
+      </Fragment>
+    );
+  },
+  args: { onClick: fn() },
+};
+
+export const _ContextMenu: MenuStory = {
+  render: (args) => {
+    const menu = useMemo(
+      () => (
+        <Menu onClick={action("context-menu")}>
+          <MenuItem
+            id="appItem"
+            icon="mdi mdi-react"
+            label="Application Menu"
+            appendLabel="NEW"
+          />
+          <MenuItem id="newItem" label="New Menu Item" badge={45} />
+          <MenuItem id="collapsable1" label="Collapsable Item" />
+          <MenuItem id="collapsable2" label="Collapsable Item" />
+          <MenuItem id="sectionItem" label="Section Item" />
+          <Menu label="Floating Item">
+            <MenuItem id="inner1" label="Inner Item" />
+            <MenuItem id="inner2" label="Inner Item" />
+          </Menu>
+        </Menu>
+      ),
+      [args],
+    );
+    return (
+      <div className="w-screen max-w-lg aspect-video outline rounded-capped flex items-center justify-center">
+        <ContextMenu menu={menu}>
+          <Title>Context menu for container</Title>
+        </ContextMenu>
+      </div>
+    );
+  },
+  args: { onClick: fn() },
+};
diff --git a/packages/core/stories/components/meter/Meter.mdx b/packages/core/stories/components/meter/Meter.mdx
new file mode 100644
index 0000000..3faa19d
--- /dev/null
+++ b/packages/core/stories/components/meter/Meter.mdx
@@ -0,0 +1,76 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Meter, Collapsable } from "../../../src";
+import * as MeterStories from "./Meter.stories";
+
+<Meta of={MeterStories} />
+
+<Title>Meter</Title>
+
+<Anchor storyId="icon">
+  <div className="hidden-anchor">
+    <Subheading>Meter</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Meter} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={MeterStories._Meter} />
+</Collapsable>
+
+<Anchor storyId="colors">
+  <Subheading>Colors</Subheading>
+</Anchor>
+<Description of={MeterStories.Colors} />
+<Canvas withToolbar of={MeterStories.Colors} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={MeterStories.Colors} />
+</Collapsable>
+
+<Anchor storyId="sizes">
+  <Subheading>Sizes</Subheading>
+</Anchor>
+<Description of={MeterStories.Sizes} />
+<Canvas withToolbar of={MeterStories.Sizes} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={MeterStories.Sizes} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Meter } from "@react-fabric/core";
+
+export const Example = () => {
+  return <Meter value={99} />;
+};
+```
diff --git a/packages/core/stories/components/meter/Meter.stories.tsx b/packages/core/stories/components/meter/Meter.stories.tsx
new file mode 100644
index 0000000..58bb470
--- /dev/null
+++ b/packages/core/stories/components/meter/Meter.stories.tsx
@@ -0,0 +1,89 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Fragment } from "react/jsx-runtime";
+import { Meter } from "../../../src";
+
+const meta: Meta = {
+  component: Meter,
+  title: "@core/components/Meter",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Meter.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-screen max-w-sm p-4 flex flex-col gap-2">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type MeterStory = StoryObj<typeof Meter>;
+
+export const _Meter: MeterStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Meter {...args} />
+      </Fragment>
+    );
+  },
+  args: {
+    value: 94.2,
+  },
+};
+
+export const Colors: MeterStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Meter {...args} className="text-primary-600" />
+        <Meter {...args} className="text-accent-600" />
+        <Meter {...args} className="text-danger-600" />
+      </Fragment>
+    );
+  },
+  args: {
+    value: 94.2,
+  },
+};
+
+export const Sizes: MeterStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Meter {...args} className="text-xs" />
+        <Meter {...args} className="text-md" />
+        <Meter {...args} className="text-2xl" />
+      </Fragment>
+    );
+  },
+  args: {
+    value: 94.2,
+  },
+};
diff --git a/packages/core/stories/components/notifications/Alert.stories.tsx b/packages/core/stories/components/notifications/Alert.stories.tsx
new file mode 100644
index 0000000..14f155b
--- /dev/null
+++ b/packages/core/stories/components/notifications/Alert.stories.tsx
@@ -0,0 +1,89 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Fragment } from "react/jsx-runtime";
+import { Button, useNotificationService } from "../../../src";
+import { Alert } from "../../../src/overlays";
+
+const meta: Meta = {
+  component: Alert,
+  title: "@core/components/Notifications",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Alert.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type AlertStory = StoryObj<typeof Alert>;
+
+export const _Alert: AlertStory = {
+  render: (args) => {
+    const { showAlert } = useNotificationService();
+    return (
+      <Fragment>
+        <Button
+          onClick={() => showAlert({ ...args }).then(action("AlertReturn"))}
+        >
+          Simple Alert
+        </Button>
+        <Button
+          onClick={() =>
+            showAlert({ ...args, color: "danger" }).then(action("AlertReturn"))
+          }
+        >
+          Error Alert
+        </Button>
+        <Button
+          onClick={() =>
+            showAlert({ ...args, color: "success" }).then(action("AlertReturn"))
+          }
+        >
+          Success Alert
+        </Button>
+        <Button
+          onClick={() =>
+            showAlert({ ...args, color: "warning" }).then(action("AlertReturn"))
+          }
+        >
+          Warning Alert
+        </Button>
+      </Fragment>
+    );
+  },
+  args: {
+    title: faker.commerce.productAdjective(),
+    message: faker.commerce.productName(),
+  },
+};
diff --git a/packages/core/stories/components/notifications/Message.stories.tsx b/packages/core/stories/components/notifications/Message.stories.tsx
new file mode 100644
index 0000000..84d191c
--- /dev/null
+++ b/packages/core/stories/components/notifications/Message.stories.tsx
@@ -0,0 +1,95 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Fragment } from "react/jsx-runtime";
+import { Button, useNotificationService } from "../../../src";
+import { Message } from "../../../src/overlays";
+
+const meta: Meta = {
+  component: Message,
+  title: "@core/components/Notifications",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Message.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type MessageStory = StoryObj<typeof Message>;
+
+export const _Message: MessageStory = {
+  render: (args) => {
+    const { showMessage } = useNotificationService();
+    return (
+      <Fragment>
+        <Button
+          onClick={() => showMessage({ ...args }).then(action("messageReturn"))}
+        >
+          Simple Message
+        </Button>
+        <Button
+          onClick={() =>
+            showMessage({ ...args, color: "danger" }).then(
+              action("messageReturn"),
+            )
+          }
+        >
+          Error Message
+        </Button>
+        <Button
+          onClick={() =>
+            showMessage({ ...args, color: "success" }).then(
+              action("messageReturn"),
+            )
+          }
+        >
+          Success Message
+        </Button>
+        <Button
+          onClick={() =>
+            showMessage({ ...args, color: "warning" }).then(
+              action("messageReturn"),
+            )
+          }
+        >
+          Warning Message
+        </Button>
+      </Fragment>
+    );
+  },
+  args: {
+    title: faker.commerce.productAdjective(),
+    message: faker.commerce.productName(),
+  },
+};
diff --git a/packages/core/stories/components/notifications/Notifications.mdx b/packages/core/stories/components/notifications/Notifications.mdx
new file mode 100644
index 0000000..e42a2ee
--- /dev/null
+++ b/packages/core/stories/components/notifications/Notifications.mdx
@@ -0,0 +1,93 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Collapsable, useNotificationService } from "../../../src";
+import * as AlertStories from "./Alert.stories";
+import * as MessageStories from "./Message.stories";
+import * as ToastStories from "./Toast.stories";
+
+<Meta of={ToastStories} />
+
+<Title>Notifications</Title>
+
+<Anchor storyId="notifications">
+  <Subheading>Toasts</Subheading>
+</Anchor>
+
+<Description of={useNotificationService} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ToastStories._Toast} />
+</Collapsable>
+
+<Anchor storyId="messages">
+  <Subheading>Messages</Subheading>
+</Anchor>
+<Description of={MessageStories._Message} />
+<Canvas withToolbar of={MessageStories._Message} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={MessageStories._Message} />
+</Collapsable>
+
+<Anchor storyId="alerts">
+  <Subheading>Alerts</Subheading>
+</Anchor>
+<Description of={AlertStories._Alert} />
+<Canvas withToolbar of={AlertStories._Alert} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={AlertStories._Alert} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Button, useNotificationService } from "@react-fabric/core";
+
+export const Example = () => {
+  const { showToast } = useNotificationService();
+
+  return (
+    <Fragment>
+      <Button
+        onClick={() =>
+          showToast({
+            message: "Message text...",
+            actions: <Button value="extra">Action</Button>,
+          }).then((ret) => {
+            // return of true/fale or action value
+          })
+        }
+      >
+        Toast
+      </Button>
+    </Fragment>
+  );
+};
+```
diff --git a/packages/core/stories/components/notifications/Toast.stories.tsx b/packages/core/stories/components/notifications/Toast.stories.tsx
new file mode 100644
index 0000000..91f5fe3
--- /dev/null
+++ b/packages/core/stories/components/notifications/Toast.stories.tsx
@@ -0,0 +1,107 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Fragment } from "react/jsx-runtime";
+import { Button, useNotificationService } from "../../../src";
+import { Alert, Message, Toast } from "../../../src/overlays";
+
+const meta: Meta = {
+  component: Toast,
+  subcomponents: { Message, Alert } as AnyObject,
+  title: "@core/components/Notifications",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Toast.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4 flex gap-2 flex-wrap">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ToastStory = StoryObj<typeof Toast>;
+
+export const _Toast: ToastStory = {
+  render: (args) => {
+    const { showToast } = useNotificationService();
+    if (!showToast)
+      throw Error("Application not wrapped in `ApplicationProvider`");
+    return (
+      <Fragment>
+        <Button
+          onClick={() => showToast({ ...args }).then(action("toastReturn"))}
+        >
+          Toast
+        </Button>
+        <Button
+          onClick={() =>
+            showToast({ ...args, color: "danger" }).then(action("toastReturn"))
+          }
+        >
+          Error Toast
+        </Button>
+        <Button
+          onClick={() =>
+            showToast({ ...args, color: "success" }).then(action("toastReturn"))
+          }
+        >
+          Success Toast
+        </Button>
+        <Button
+          onClick={() =>
+            showToast({ ...args, color: "warning" }).then(action("toastReturn"))
+          }
+        >
+          Warning Toast
+        </Button>
+        <Button
+          onClick={() =>
+            showToast({
+              ...args,
+              color: "accent",
+              actions: (
+                <Button variant="outline" color="accent" value="showLog">
+                  View Logs
+                </Button>
+              ),
+            }).then(action("toastReturn"))
+          }
+        >
+          With Action
+        </Button>
+      </Fragment>
+    );
+  },
+  args: {
+    title: faker.commerce.productName(),
+    message: faker.commerce.productDescription(),
+  },
+};
diff --git a/packages/core/stories/components/overlays/Flyout.stories.tsx b/packages/core/stories/components/overlays/Flyout.stories.tsx
new file mode 100644
index 0000000..20eb1ad
--- /dev/null
+++ b/packages/core/stories/components/overlays/Flyout.stories.tsx
@@ -0,0 +1,80 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useCallback } from "react";
+import { Fragment } from "react/jsx-runtime";
+import { Button, Content, Flyout, Text, useOverlayService } from "../../../src";
+
+const meta: Meta = {
+  component: Flyout,
+  title: "@core/components/Overlays",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Flyout.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type FlyoutStory = StoryObj<typeof Flyout>;
+
+export const _Flyout: FlyoutStory = {
+  render: (args) => {
+    const FlyoutComponent = useCallback(
+      (props: AnyObject) => (
+        <Flyout {...props}>
+          <Content>
+            <Text>{faker.lorem.paragraphs(9)}</Text>
+          </Content>
+        </Flyout>
+      ),
+      [],
+    );
+    const [FlyoutNode, showFlyout] = useOverlayService(FlyoutComponent);
+    return (
+      <Fragment>
+        <Button
+          onClick={() => showFlyout({ ...args }).then(action("FlyoutReturn"))}
+        >
+          Open Flyout
+        </Button>
+        {FlyoutNode}
+      </Fragment>
+    );
+  },
+  args: {
+    title: faker.commerce.productAdjective(),
+    icon: "mdi mdi-react",
+    size: "md",
+  },
+};
diff --git a/packages/core/stories/components/overlays/Modal.stories.tsx b/packages/core/stories/components/overlays/Modal.stories.tsx
new file mode 100644
index 0000000..f01e6f0
--- /dev/null
+++ b/packages/core/stories/components/overlays/Modal.stories.tsx
@@ -0,0 +1,84 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Fragment } from "react/jsx-runtime";
+import {
+  Button,
+  Content,
+  Flyout,
+  Modal,
+  Text,
+  useOverlayService,
+} from "../../../src";
+
+const meta: Meta = {
+  component: Modal,
+  subcomponents: { Flyout } as AnyObject,
+  title: "@core/components/Overlays",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Modal.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ModalStory = StoryObj<typeof Modal>;
+
+export const _Modal: ModalStory = {
+  render: (args) => {
+    const ModalComponent = (props: AnyObject) => (
+      <Modal {...props}>
+        <Content>
+          <Text>{faker.lorem.paragraphs(9)}</Text>
+        </Content>
+      </Modal>
+    );
+    const [ModalNode, showModal] = useOverlayService(ModalComponent);
+    return (
+      <Fragment>
+        <Button
+          onClick={() => showModal({ ...args }).then(action("ModalReturn"))}
+        >
+          Open Modal
+        </Button>
+        {ModalNode}
+      </Fragment>
+    );
+  },
+  args: {
+    title: faker.commerce.productAdjective(),
+    icon: "mdi mdi-react",
+    size: "md",
+  },
+};
diff --git a/packages/core/stories/components/overlays/Overlays.mdx b/packages/core/stories/components/overlays/Overlays.mdx
new file mode 100644
index 0000000..0df4836
--- /dev/null
+++ b/packages/core/stories/components/overlays/Overlays.mdx
@@ -0,0 +1,81 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Collapsable, useOverlayService } from "../../../src";
+import * as FlyoutStories from "./Flyout.stories";
+import * as ModalStories from "./Modal.stories";
+
+<Meta of={ModalStories} />
+
+<Title>Overlays</Title>
+
+<Anchor storyId="modal">
+  <Subheading>Modal</Subheading>
+</Anchor>
+
+<Description of={useOverlayService} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ModalStories._Modal} />
+</Collapsable>
+
+<Anchor storyId="flyout">
+  <Subheading>Flyouts</Subheading>
+</Anchor>
+<Description of={FlyoutStories._Flyout} />
+<Canvas withToolbar of={FlyoutStories._Flyout} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={FlyoutStories._Flyout} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Button, useOverlayService } from "@react-fabric/core";
+
+export const Example = () => {
+  const [ModelNode, openModal] = useOverlayService(ModalComponent);
+
+  return (
+    <Fragment>
+      <Button
+        onClick={() =>
+          openModal({
+            ...anyargs,
+          }).then((ret) => {
+            // return value modal.onClose
+          })
+        }
+      >
+        Modal
+      </Button>
+    </Fragment>
+  );
+};
+```
diff --git a/packages/core/stories/components/panel/Panel.mdx b/packages/core/stories/components/panel/Panel.mdx
new file mode 100644
index 0000000..10e6e3d
--- /dev/null
+++ b/packages/core/stories/components/panel/Panel.mdx
@@ -0,0 +1,92 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Panel, Collapsable } from "../../../src";
+import * as PanelStories from "./Panel.stories";
+import * as PanelGroupStories from "./PanelGroup.stories";
+
+<Meta of={PanelStories} />
+
+<Title>Panel</Title>
+
+<Anchor storyId="panel">
+  <div className="hidden-anchor">
+    <Subheading>Panel</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Panel} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={PanelStories._Panel} />
+</Collapsable>
+
+<Anchor storyId="controls">
+  <Subheading>With Controls</Subheading>
+</Anchor>
+<Description of={PanelStories.PanelControls} />
+<Canvas withToolbar of={PanelStories.PanelControls} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={PanelStories.PanelControls} />
+</Collapsable>
+
+<Anchor storyId="panelgroup">
+  <Subheading>Panel Group</Subheading>
+</Anchor>
+<Description of={PanelGroupStories._PanelGroup} />
+<Canvas withToolbar of={PanelGroupStories._PanelGroup} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={PanelGroupStories._PanelGroup} />
+</Collapsable>
+
+<Anchor storyId="asidecontent">
+  <Subheading>Aside Content</Subheading>
+</Anchor>
+<Description of={PanelGroupStories.AsideContent} />
+<Canvas withToolbar of={PanelGroupStories.AsideContent} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={PanelGroupStories.AsideContent} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Panel } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Panel title="Empty title">
+      <Content>...</Content>
+      <Footer>...</Footer>
+    </EmptyContent>
+  );
+};
+```
diff --git a/packages/core/stories/components/panel/Panel.stories.tsx b/packages/core/stories/components/panel/Panel.stories.tsx
new file mode 100644
index 0000000..4dda890
--- /dev/null
+++ b/packages/core/stories/components/panel/Panel.stories.tsx
@@ -0,0 +1,94 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Fragment } from "react/jsx-runtime";
+import {
+  Button,
+  Card,
+  Content,
+  Footer,
+  Navigator,
+  Panel,
+  PanelGroup,
+} from "../../../src";
+
+const meta: Meta = {
+  component: Panel,
+  subcomponents: { PanelGroup } as AnyObject,
+  title: "@core/components/Panel",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Panel.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-96 p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type PanelStory = StoryObj<typeof Panel>;
+
+export const _Panel: PanelStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Panel {...args} actions={<Navigator onNavigate={fn()} />}>
+          <Content>{faker.lorem.paragraphs(2)}</Content>
+          <Footer flex justify="end" className="px-2 py-1">
+            <Button variant="link">Cancel</Button>
+            <Button variant="solid">OK</Button>
+          </Footer>
+        </Panel>
+      </Fragment>
+    );
+  },
+  args: {
+    title: faker.animal.cat(),
+  },
+};
+
+export const PanelControls: PanelStory = {
+  render: (args) => {
+    return (
+      <Panel {...args}>
+        <Content>{faker.lorem.paragraphs(2)}</Content>
+      </Panel>
+    );
+  },
+  args: {
+    title: faker.animal.cat(),
+    collapsable: true,
+    expandable: true,
+    onClose: fn(),
+    onExpand: fn(),
+    onCollapse: fn(),
+  },
+};
diff --git a/packages/core/stories/components/panel/PanelGroup.stories.tsx b/packages/core/stories/components/panel/PanelGroup.stories.tsx
new file mode 100644
index 0000000..0d38ec3
--- /dev/null
+++ b/packages/core/stories/components/panel/PanelGroup.stories.tsx
@@ -0,0 +1,145 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Fragment } from "react/jsx-runtime";
+import {
+  Aside,
+  Button,
+  Content,
+  Footer,
+  Panel,
+  PanelGroup,
+  Section,
+} from "../../../src";
+
+const meta: Meta = {
+  component: PanelGroup,
+  title: "@core/components/Panel",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Panel.test.tsx"],
+  },
+};
+
+export default meta;
+type PanelGroupStory = StoryObj<typeof PanelGroup>;
+
+export const _PanelGroup: PanelGroupStory = {
+  render: (args) => {
+    return (
+      <div className="max-w-96">
+        <PanelGroup {...args}>
+          <Panel title={faker.animal.cat()}>
+            <Content>{faker.lorem.paragraphs(2)}</Content>
+            <Footer flex justify="end" className="px-2 py-1">
+              <Button variant="link">Cancel</Button>
+              <Button variant="solid">OK</Button>
+            </Footer>
+          </Panel>
+          <Panel title={faker.animal.cat()}>
+            <Content>{faker.lorem.paragraphs(2)}</Content>
+            <Footer flex justify="end" className="px-2 py-1">
+              <Button variant="link">Cancel</Button>
+              <Button variant="solid">OK</Button>
+            </Footer>
+          </Panel>
+          <Panel title={faker.animal.cat()}>
+            <Content>{faker.lorem.paragraphs(2)}</Content>
+            <Footer flex justify="end" className="px-2 py-1">
+              <Button variant="link">Cancel</Button>
+              <Button variant="solid">OK</Button>
+            </Footer>
+          </Panel>
+        </PanelGroup>
+      </div>
+    );
+  },
+  args: {
+    onActiveChange: fn(),
+  },
+};
+
+export const AsideContent: PanelGroupStory = {
+  render: (args) => {
+    return (
+      <div
+        className="max-w-2xl w-screen h-screen max-h-96 grid outline"
+        style={{ gridTemplate: '"content" 1fr / 1fr' }}
+      >
+        <Section>
+          <Aside width="24rem" title="Aside Panel Group" collapsable flyout>
+            <PanelGroup {...args}>
+              <Panel
+                title={faker.animal.cat()}
+                headerClassName="border-b border-b-info-500"
+              >
+                <Content>{faker.lorem.paragraphs(2)}</Content>
+                <Footer flex justify="end" className="px-2 py-1">
+                  <Button variant="link">Cancel</Button>
+                  <Button variant="solid">OK</Button>
+                </Footer>
+              </Panel>
+              <Panel
+                title={faker.animal.cat()}
+                headerClassName="border-b border-b-success-500"
+              >
+                <Content>{faker.lorem.paragraphs(2)}</Content>
+                <Footer flex justify="end" className="px-2 py-1">
+                  <Button variant="link">Cancel</Button>
+                  <Button variant="solid">OK</Button>
+                </Footer>
+              </Panel>
+              <Panel
+                title={faker.animal.cat()}
+                headerClassName="border-b border-b-danger-500"
+              >
+                <Content>{faker.lorem.paragraphs(2)}</Content>
+                <Footer flex justify="end" className="px-2 py-1">
+                  <Button variant="link">Cancel</Button>
+                  <Button variant="solid">OK</Button>
+                </Footer>
+              </Panel>
+              <Panel
+                title={faker.animal.cat()}
+                headerClassName="border-b border-b-warning-500"
+              >
+                <Content>{faker.lorem.paragraphs(2)}</Content>
+                <Footer flex justify="end" className="px-2 py-1">
+                  <Button variant="link">Cancel</Button>
+                  <Button variant="solid">OK</Button>
+                </Footer>
+              </Panel>
+            </PanelGroup>
+          </Aside>
+        </Section>
+      </div>
+    );
+  },
+  args: {
+    onActiveChange: fn(),
+  },
+};
diff --git a/packages/core/stories/components/progress/Circle.stories.tsx b/packages/core/stories/components/progress/Circle.stories.tsx
new file mode 100644
index 0000000..14e829f
--- /dev/null
+++ b/packages/core/stories/components/progress/Circle.stories.tsx
@@ -0,0 +1,66 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { Fragment } from "react/jsx-runtime";
+import { ProgressCircle } from "../../../src";
+
+const meta: Meta = {
+  component: ProgressCircle,
+  title: "@core/components/Progress",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/ProgressCircle.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ProgressCircleStory = StoryObj<typeof ProgressCircle>;
+
+export const _ProgressCircle: ProgressCircleStory = {
+  render: (args) => {
+    const [value, setValue] = useState(10);
+    useEffect(() => {
+      setTimeout(() => {
+        setValue(value > 90 ? 10 : value + 2);
+      }, 100);
+    }, [value]);
+    return (
+      <Fragment>
+        <ProgressCircle {...args} value={value} />
+      </Fragment>
+    );
+  },
+  args: {
+    size: "lg",
+  },
+};
diff --git a/packages/core/stories/components/progress/Progress.mdx b/packages/core/stories/components/progress/Progress.mdx
new file mode 100644
index 0000000..8247c08
--- /dev/null
+++ b/packages/core/stories/components/progress/Progress.mdx
@@ -0,0 +1,81 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { ProgressBar, ProgressCircle, Collapsable } from "../../../src";
+import * as ProgressStories from "./Progress.stories";
+import * as CircleStories from "./Circle.stories";
+
+<Meta of={ProgressStories} />
+
+<Title>Progress</Title>
+
+<Anchor storyId="Progress">
+  <div className="hidden-anchor">
+    <Subheading>Progress Bar</Subheading>
+  </div>
+</Anchor>
+
+<Description of={ProgressBar} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ProgressStories._ProgressBar} />
+</Collapsable>
+
+<Anchor storyId="circle">
+  <Subheading>Circular</Subheading>
+</Anchor>
+<Description of={CircleStories._ProgressCircle} />
+<Canvas withToolbar of={CircleStories._ProgressCircle} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CircleStories._ProgressCircle} />
+</Collapsable>
+
+<Anchor storyId="colors">
+  <Subheading>Colors</Subheading>
+</Anchor>
+<Description of={ProgressStories.Colors} />
+<Canvas withToolbar of={ProgressStories.Colors} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ProgressStories.Colors} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Progress } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Progress title="Empty title" legend="Legend">
+      {...message text}
+    </Progress>
+  );
+};
+```
diff --git a/packages/core/stories/components/progress/Progress.stories.tsx b/packages/core/stories/components/progress/Progress.stories.tsx
new file mode 100644
index 0000000..e32549b
--- /dev/null
+++ b/packages/core/stories/components/progress/Progress.stories.tsx
@@ -0,0 +1,94 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { Fragment } from "react/jsx-runtime";
+import { ProgressBar, ProgressCircle } from "../../../src";
+
+const meta: Meta = {
+  component: ProgressBar,
+  subcomponents: { ProgressCircle } as AnyObject,
+  title: "@core/components/Progress",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/ProgressBar.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl w-screen p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ProgressBarStory = StoryObj<typeof ProgressBar>;
+
+export const _ProgressBar: ProgressBarStory = {
+  render: (args) => {
+    const [value, setValue] = useState(10);
+    useEffect(() => {
+      setTimeout(() => {
+        setValue(value > 90 ? 10 : value + 2);
+      }, 100);
+    }, [value]);
+    return (
+      <Fragment>
+        <ProgressBar {...args} value={value} />
+      </Fragment>
+    );
+  },
+  args: {},
+};
+
+export const Colors: ProgressBarStory = {
+  render: (args) => {
+    const [value, setValue] = useState(10);
+    useEffect(() => {
+      setTimeout(() => {
+        setValue(value > 90 ? 10 : value + 2);
+      }, 100);
+    }, [value]);
+    return (
+      <Fragment>
+        <div className="flex flex-col gap-2">
+          <ProgressBar {...args} color="primary" value={value} />
+          <ProgressBar {...args} size="md" color="accent" value={value} />
+          <ProgressBar {...args} size="lg" color="danger" value={value} />
+          <ProgressBar {...args} size="xl" color="warning" value={value} />
+
+          <div className="flex gap-2 items-center justify-center py-4">
+            <ProgressCircle {...args} color="primary" value={value} />
+            <ProgressCircle {...args} size="md" color="accent" value={value} />
+            <ProgressCircle {...args} size="lg" color="danger" value={value} />
+            <ProgressCircle {...args} size="xl" color="warning" value={value} />
+          </div>
+        </div>
+      </Fragment>
+    );
+  },
+  args: {},
+};
diff --git a/packages/core/stories/components/tabPanel/TabPanel.mdx b/packages/core/stories/components/tabPanel/TabPanel.mdx
new file mode 100644
index 0000000..1975b0e
--- /dev/null
+++ b/packages/core/stories/components/tabPanel/TabPanel.mdx
@@ -0,0 +1,69 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Heading,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Collapsable, TabPanel } from "../../../src";
+import * as TabPanelStories from "./TabPanel.stories";
+
+<Meta of={TabPanelStories} />
+
+<Title>Tabbed Panel</Title>
+
+<Anchor storyId="TabPanel">
+  <div className="hidden-anchor">
+    <Subheading>Tab Panel</Subheading>
+  </div>
+</Anchor>
+
+<Description of={TabPanel} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={TabPanelStories._TabPanel} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { TabPanel, Button, Menu, MenuItem } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <TabPanel>
+      <Tab id="1" label="Tab Oner">
+        <Content>...</Content>
+      </Tab>
+      <Tab id="2" label="Tab Two">
+        <Content>...</Content>
+      </Tab>
+      <Tab id="3" label="Tab Three">
+        <Content>...</Content>
+      </Tab>
+    </TabPanel>
+  );
+};
+```
diff --git a/packages/core/stories/components/tabPanel/TabPanel.stories.tsx b/packages/core/stories/components/tabPanel/TabPanel.stories.tsx
new file mode 100644
index 0000000..3cdaa18
--- /dev/null
+++ b/packages/core/stories/components/tabPanel/TabPanel.stories.tsx
@@ -0,0 +1,73 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Content, Tab, TabPanel, Viewport } from "../../../src";
+
+const meta: Meta = {
+  component: TabPanel,
+  subcomponents: { Tab } as AnyObject,
+  title: "@core/components/TabPanel",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/TabPanel.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-[600px]">
+        <Viewport>
+          <Story />
+        </Viewport>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type TabPanelStory = StoryObj<typeof TabPanel>;
+
+export const _TabPanel: TabPanelStory = {
+  render: (args) => {
+    return (
+      <TabPanel {...args}>
+        <div />
+        <Tab id="1" label={faker.commerce.product()}>
+          <Content>{faker.lorem.paragraphs(9)}</Content>
+        </Tab>
+        <Tab id="2" label={faker.commerce.product()}>
+          <Content>{faker.lorem.paragraphs(9)}</Content>
+        </Tab>
+        <Tab id="3" label={faker.commerce.product()}>
+          <Content>{faker.lorem.paragraphs(9)}</Content>
+        </Tab>
+      </TabPanel>
+    );
+  },
+  args: {
+    onBeforeChange: fn(),
+    onChange: fn(),
+  },
+};
diff --git a/packages/core/stories/components/tooltip/Tooltip.mdx b/packages/core/stories/components/tooltip/Tooltip.mdx
new file mode 100644
index 0000000..4e45e02
--- /dev/null
+++ b/packages/core/stories/components/tooltip/Tooltip.mdx
@@ -0,0 +1,80 @@
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Tooltip, Collapsable } from "../../../src";
+import * as TooltipStories from "./Tooltip.stories";
+
+<Meta of={TooltipStories} />
+
+<Title>Tooltip</Title>
+
+<Anchor storyId="emptycontent">
+  <div className="hidden-anchor">
+    <Subheading>Tooltip</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Tooltip} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={TooltipStories._Tooltip} />
+</Collapsable>
+
+<Anchor storyId="colors">
+  <Subheading>Colors</Subheading>
+</Anchor>
+<Description of={TooltipStories.Colors} />
+<Canvas withToolbar of={TooltipStories.Colors} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={TooltipStories.Colors} />
+</Collapsable>
+
+<Anchor storyId="content">
+  <Subheading>Styled Content</Subheading>
+</Anchor>
+<Description of={TooltipStories.StyledContent} />
+<Canvas withToolbar of={TooltipStories.StyledContent} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={TooltipStories.StyledContent} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Button, Tooltip } from "@react-fabric/core";
+
+export const Example = () => {
+  return (
+    <Tooltip content="Tooltip content">
+      <Button>Action</Button>
+    </Tooltip>
+  );
+};
+```
diff --git a/packages/core/stories/components/tooltip/Tooltip.stories.tsx b/packages/core/stories/components/tooltip/Tooltip.stories.tsx
new file mode 100644
index 0000000..ffa6ceb
--- /dev/null
+++ b/packages/core/stories/components/tooltip/Tooltip.stories.tsx
@@ -0,0 +1,130 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Fragment } from "react/jsx-runtime";
+import { Avatar, Button, Card, Icon, Tooltip } from "../../../src";
+
+const meta: Meta = {
+  component: Tooltip,
+  title: "@core/components/Tooltip",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["core/tests/Tooltip.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-2 items-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type TooltipStory = StoryObj<typeof Tooltip>;
+
+export const _Tooltip: TooltipStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Tooltip {...args}>
+          <Button as="a">Button with tooltip</Button>
+        </Tooltip>
+        <Tooltip {...args}>
+          <Card>Card with tooltip</Card>
+        </Tooltip>
+        <Tooltip {...args}>
+          <Icon size="3rem" icon="mdi mdi-react" />
+        </Tooltip>
+        <Tooltip {...args}>
+          <Avatar size="3rem" name="Avatar" />
+        </Tooltip>
+      </Fragment>
+    );
+  },
+  args: {
+    content: "Tooltip content",
+  },
+};
+
+export const Colors: TooltipStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Tooltip {...args}>
+          <Icon size="3rem" icon="mdi mdi-react" />
+        </Tooltip>
+        <Tooltip {...args} color="primary">
+          <Icon size="3rem" icon="mdi mdi-react" color="primary" />
+        </Tooltip>
+        <Tooltip {...args} color="accent">
+          <Icon size="3rem" icon="mdi mdi-react" color="accent" />
+        </Tooltip>
+        <Tooltip {...args} color="info">
+          <Icon size="3rem" icon="mdi mdi-react" color="info" />
+        </Tooltip>
+        <Tooltip {...args} color="danger">
+          <Icon size="3rem" icon="mdi mdi-react" color="danger" />
+        </Tooltip>
+        <Tooltip {...args} color="success">
+          <Icon size="3rem" icon="mdi mdi-react" color="success" />
+        </Tooltip>
+        <Tooltip {...args} color="warning">
+          <Icon size="3rem" icon="mdi mdi-react" color="warning" />
+        </Tooltip>
+      </Fragment>
+    );
+  },
+  args: {
+    content: "Tooltip content",
+  },
+};
+
+export const StyledContent: TooltipStory = {
+  render: (args) => {
+    return (
+      <Fragment>
+        <Tooltip
+          {...args}
+          content={
+            <div className="flex gap-2 items-center">
+              <Avatar size="2rem" rounded name="Smeghead" />
+              <div className="flex-1">
+                <div className="text-md">Smegheads</div>
+                <div className="text-sm">Boys from the dawrf!</div>
+              </div>
+            </div>
+          }
+        >
+          <Icon size="3rem" icon="mdi mdi-react" />
+        </Tooltip>
+      </Fragment>
+    );
+  },
+  args: {
+    copyContent: "Smeg",
+  },
+};
diff --git a/packages/core/tests/buttons/Button.test.tsx b/packages/core/tests/buttons/Button.test.tsx
new file mode 100644
index 0000000..9d05467
--- /dev/null
+++ b/packages/core/tests/buttons/Button.test.tsx
@@ -0,0 +1,206 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { composeStories } from "@storybook/react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { CoreIcons } from "../../src";
+import { HotKeyWrapper } from "../../src/hotkeys/HotKeyWrapper";
+import * as stories from "../../stories/components/button/Button.stories";
+
+const { Tester } = composeStories(stories);
+
+describe("Button", () => {
+  it("should render label only", () => {
+    const fragment = render(<Tester>Click Me</Tester>);
+    expect(
+      fragment.container.querySelector("[data-ref='button'] > button"),
+    ).not.toBeNull();
+    expect(
+      fragment.container.querySelector("[data-ref='button'] > button > dfn"),
+    ).toBeNull();
+    expect(
+      fragment.container.querySelector("[data-ref='button'] > button > label")
+        ?.innerHTML,
+    ).toBe("Click Me");
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render icon only", () => {
+    const fragment = render(<Tester icon="mdi mdi-bell" />);
+    expect(
+      fragment.container.querySelector("[data-ref='button'] > button"),
+    ).not.toBeNull();
+    expect(
+      fragment.container.querySelector("[data-ref='button'] > button > dfn"),
+    ).not.toBeNull();
+    expect(
+      fragment.container.querySelector("[data-ref='button'] > button > label"),
+    ).toBeNull();
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render alt icon", () => {
+    const fragment = render(
+      <Tester
+        icon="mdi mdi-bell"
+        spinOnHover
+        altIcon={CoreIcons.chevronDown}
+      />,
+    );
+    expect(
+      fragment.container.querySelector("[data-ref='button'] > button"),
+    ).not.toBeNull();
+    expect(
+      fragment.container.querySelectorAll("[data-ref='button'] > button > dfn"),
+    ).toHaveLength(2);
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render rounded full-width", () => {
+    const fragment = render(
+      <Tester fullWidth rounded>
+        Click Me!
+      </Tester>,
+    );
+    expect(
+      fragment.container.querySelector("[data-ref='button'] > button"),
+    ).not.toBeNull();
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should handle click", () => {
+    const fn = jest.fn();
+    const fragment = render(<Tester onClick={fn} />);
+    fireEvent.click(
+      fragment.container.querySelector(
+        "[data-ref='button'] > button",
+      ) as HTMLElement,
+    );
+    expect(fn).toHaveBeenCalled();
+    fragment.unmount();
+  });
+
+  it("should not handle click when disabled", () => {
+    const fn = jest.fn();
+    const fragment = render(<Tester disabled onClick={fn} />);
+    fireEvent.click(
+      fragment.container.querySelector(
+        "[data-ref='button'] > button",
+      ) as HTMLElement,
+    );
+    expect(fn).not.toHaveBeenCalled();
+    fragment.unmount();
+  });
+
+  it("should handle hotkey", () => {
+    const fn = jest.fn();
+    const fragment = render(
+      <HotKeyWrapper>
+        <Tester onClick={fn} hotKey="shift+a" />
+      </HotKeyWrapper>,
+    );
+    expect(
+      fragment.container.querySelector<HTMLElement>(
+        "[data-ref='button'] > button > kbd > span",
+      )?.innerHTML,
+    ).toBe("SHIFT A");
+    fireEvent.keyDown(
+      fragment.container.querySelector(
+        "[data-ref='button'] > button",
+      ) as HTMLElement,
+      {
+        key: "A",
+        code: "KeyA",
+        shiftKey: true,
+        keyCode: 65,
+        charCode: 0,
+      },
+    );
+    expect(fn).toHaveBeenCalled();
+    fragment.unmount();
+  });
+
+  it("should render with badge", () => {
+    const fragment = render(<Tester badge={99}>Click Me</Tester>);
+    expect(
+      fragment.container.querySelector<HTMLElement>(
+        "[data-ref='button'] > button [data-ref='badge'] > span",
+      )?.innerHTML,
+    ).toBe("99");
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render action message", async () => {
+    const fn = jest.fn(() => true);
+    const fragment = render(
+      <Tester onClick={fn} actionMessage="Action completed">
+        Click Me
+      </Tester>,
+    );
+    fireEvent.click(
+      fragment.container.querySelector(
+        "[data-ref='button'] > button",
+      ) as HTMLElement,
+    );
+    await waitFor(() => {
+      expect(
+        fragment.container.querySelector("[data-ref='animated-indicator']"),
+      ).not.toBeNull();
+      expect(
+        fragment.baseElement.querySelector("[data-ref='tooltip']"),
+      ).not.toBeNull();
+    });
+    jest.runAllTimers();
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render action message via prop", async () => {
+    const fragment = render(
+      <Tester
+        actionMessage="Action completed"
+        showActionDoneEvent="manual"
+        showActionDone
+        rounded
+      >
+        Click Me
+      </Tester>,
+    );
+    await waitFor(() => {
+      expect(
+        fragment.container.querySelector("[data-ref='animated-indicator']"),
+      ).not.toBeNull();
+      expect(
+        fragment.baseElement.querySelector("[data-ref='tooltip']"),
+      ).not.toBeNull();
+    });
+    jest.runAllTimers();
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+});
diff --git a/packages/core/tests/buttons/ButtonGroup.test.tsx b/packages/core/tests/buttons/ButtonGroup.test.tsx
new file mode 100644
index 0000000..02f5186
--- /dev/null
+++ b/packages/core/tests/buttons/ButtonGroup.test.tsx
@@ -0,0 +1,81 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { composeStories } from "@storybook/react";
+import "@testing-library/jest-dom";
+import { getByTestId, render } from "@testing-library/react";
+import { Button } from "../../src";
+import * as stories from "../../stories/components/button/ButtonGroup.stories";
+
+const { Tester } = composeStories(stories);
+
+describe("ButtonGroup", () => {
+  it("should render buttons", () => {
+    const fragment = render(
+      <Tester>
+        <Button>First</Button>
+        <Button>Second</Button>
+      </Tester>,
+    );
+    expect(
+      fragment.container.querySelector("[data-ref='buttonGroup']"),
+    ).not.toBeNull();
+    expect(
+      fragment.container.querySelectorAll(
+        "[data-ref='buttonGroup'] > [data-ref='button']",
+      ),
+    ).toHaveLength(2);
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render full-width", () => {
+    const fragment = render(
+      <Tester fullWidth data-testid="btngrp">
+        <Button>First</Button>
+        <Button>Second</Button>
+      </Tester>,
+    );
+    expect(
+      fragment.container.querySelector("[data-ref='buttonGroup']"),
+    ).not.toBeNull();
+    expect(getByTestId(fragment.container, "btngrp")).toHaveClass("flex");
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render vertical", () => {
+    const fragment = render(
+      <Tester vertical data-testid="btngrp">
+        <Button>First</Button>
+        <Button>Second</Button>
+      </Tester>,
+    );
+    expect(
+      fragment.container.querySelector("[data-ref='buttonGroup']"),
+    ).not.toBeNull();
+    expect(getByTestId(fragment.container, "btngrp")).toHaveClass("flex-col");
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+});
diff --git a/packages/core/tests/buttons/__snapshots__/Button.test.tsx.snap b/packages/core/tests/buttons/__snapshots__/Button.test.tsx.snap
new file mode 100644
index 0000000..70ad75b
--- /dev/null
+++ b/packages/core/tests/buttons/__snapshots__/Button.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button should render action message 1`] = `"<div></div><div></div><div></div><div></div><div></div><div></div><div tabindex="0"></div><div></div><div><div class="flex gap-2 items-center p-4"><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 inline-block" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner rounded" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><label class="buttonLabel truncate" data-colored-icon="false">Click Me</label></button></div></div></div>"`;
+
+exports[`Button should render action message via prop 1`] = `"<div></div><div></div><div></div><div></div><div></div><div></div><div tabindex="0"></div><div></div><div></div><div><div class="flex gap-2 items-center p-4"><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 inline-block" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner rounded-full" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><label class="buttonLabel truncate" data-colored-icon="false">Click Me</label></button></div></div></div>"`;
+
+exports[`Button should render alt icon 1`] = `"<div></div><div></div><div><div class="flex gap-2 items-center p-4"><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 inline-block" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner rounded spinOnHover" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><dfn data-align="start" role="presentation" class="icon buttonIcon select-none overflow-hidden inline-block box-content leading-none not-italic text-center rounded" data-clickable="false"><i class="mdi mdi-bell"></i></dfn><dfn role="presentation" class="icon altIcon select-none overflow-hidden inline-block box-content leading-none not-italic text-center rounded" data-flip="true" data-clickable="false"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.293 9.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"></path></svg></dfn></button></div></div></div>"`;
+
+exports[`Button should render icon only 1`] = `"<div></div><div><div class="flex gap-2 items-center p-4"><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 inline-block" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner rounded" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><dfn data-align="start" role="presentation" class="icon buttonIcon select-none overflow-hidden inline-block box-content leading-none not-italic text-center rounded" data-clickable="false"><i class="mdi mdi-bell"></i></dfn></button></div></div></div>"`;
+
+exports[`Button should render label only 1`] = `"<div><div class="flex gap-2 items-center p-4"><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 inline-block" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner rounded" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><label class="buttonLabel truncate" data-colored-icon="false">Click Me</label></button></div></div></div>"`;
+
+exports[`Button should render rounded full-width 1`] = `"<div></div><div></div><div></div><div><div class="flex gap-2 items-center p-4"><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 block w-full" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner max-w-full w-full rounded-full" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><label class="buttonLabel truncate" data-colored-icon="false">Click Me!</label></button></div></div></div>"`;
+
+exports[`Button should render with badge 1`] = `"<div></div><div></div><div></div><div></div><div></div><div></div><div tabindex="0"></div><div><div class="flex gap-2 items-center p-4"><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 inline-block" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner rounded" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><label class="buttonLabel truncate" data-colored-icon="false">Click Me</label><div class="contents"><div data-ref="badge" data-placement="" class="badge inline-block p-px min-w-2 min-h-2 text-center rounded-full leading-none z-5 pointer-events-none relative"><span class="p-1">99</span></div></div></button></div></div></div>"`;
diff --git a/packages/core/tests/buttons/__snapshots__/ButtonGroup.test.tsx.snap b/packages/core/tests/buttons/__snapshots__/ButtonGroup.test.tsx.snap
new file mode 100644
index 0000000..dab8b7b
--- /dev/null
+++ b/packages/core/tests/buttons/__snapshots__/ButtonGroup.test.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonGroup should render buttons 1`] = `"<div><div class="flex gap-2 items-center p-4"><div data-ref="buttonGroup" class="buttonGroup inline-flex flex-nowrap align-middle rounded"><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 inline-block" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner rounded" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><label class="buttonLabel truncate" data-colored-icon="false">First</label></button></div><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 inline-block" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner rounded" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><label class="buttonLabel truncate" data-colored-icon="false">Second</label></button></div></div></div></div>"`;
+
+exports[`ButtonGroup should render full-width 1`] = `"<div></div><div><div class="flex gap-2 items-center p-4"><div data-ref="buttonGroup" class="buttonGroup flex flex-nowrap align-middle rounded" data-testid="btngrp"><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 block w-full" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner max-w-full w-full rounded" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><label class="buttonLabel truncate" data-colored-icon="false">First</label></button></div><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 block w-full" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner max-w-full w-full rounded" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><label class="buttonLabel truncate" data-colored-icon="false">Second</label></button></div></div></div></div>"`;
+
+exports[`ButtonGroup should render vertical 1`] = `"<div></div><div></div><div><div class="flex gap-2 items-center p-4"><div data-ref="buttonGroup" class="buttonGroup inline-flex flex-nowrap align-middle rounded vertical flex-col items-stretch" data-testid="btngrp"><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 inline-block" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner rounded" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><label class="buttonLabel truncate" data-colored-icon="false">First</label></button></div><div class="buttonWrapper relative align-text-top select-none focus-within:z-1 inline-block" data-ref="button"><button role="button" class="button pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner rounded" type="button" tabindex="0" data-inner-clickable="true" data-color="primary"><label class="buttonLabel truncate" data-colored-icon="false">Second</label></button></div></div></div></div>"`;
diff --git a/packages/core/tsconfig.build.json b/packages/core/tsconfig.build.json
new file mode 100755
index 0000000..6d84bf3
--- /dev/null
+++ b/packages/core/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/types",
+    "rootDir": "src"
+  },
+  "exclude": ["./dist/**/*"],
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
new file mode 100755
index 0000000..78a3ff2
--- /dev/null
+++ b/packages/core/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": ["./dist"],
+  "include": ["./src", "./stories", "./tests"]
+}
diff --git a/packages/data/LICENSE b/packages/data/LICENSE
new file mode 100644
index 0000000..f54bcf5
--- /dev/null
+++ b/packages/data/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Sigma Frameworks, Adarsh Pastakia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/data/README.md b/packages/data/README.md
new file mode 100644
index 0000000..4471727
--- /dev/null
+++ b/packages/data/README.md
@@ -0,0 +1,10 @@
+# React UI Framework - Data Module
+
+#### Install
+
+```bash
+# Using
+yarn add @react-fabric/data
+```
+
+#### Usage
diff --git a/packages/data/package.json b/packages/data/package.json
new file mode 100644
index 0000000..81b7b09
--- /dev/null
+++ b/packages/data/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@react-fabric/data",
+  "version": "1.0.0",
+  "description": "RUF: Data package",
+  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
+  "license": "MIT",
+  "repository": "https://github.com/adarshpastakia/react-ui-framework/tree/main/packages/data",
+  "source": "src/index.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "directories": {
+    "src": "src",
+    "styles": "css",
+    "test": "tests"
+  },
+  "files": [
+    "css",
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "makelink": "yarn link",
+    "removelink": "yarn unlink",
+    "prebuild": "rm -rf ./dist",
+    "build:dts": "tsc -p ./tsconfig.build.json",
+    "build:rollup": "rollup -c ../../rollup.config.mjs",
+    "build": "npm-run-all -p build:rollup build:dts",
+    "watch:dts": "tsc -w -p ./tsconfig.build.json",
+    "watch:rollup": "rollup -w -c ../../rollup.config.mjs",
+    "watch": "npm-run-all -p watch:rollup watch:dts"
+  },
+  "dependencies": {
+    "@react-fabric/core": "^1.0.0",
+    "@react-fabric/form": "^1.0.0",
+    "@react-fabric/utilities": "^1.0.0",
+    "@tanstack/react-virtual": "^3.8.6",
+    "classnames": "^2.5.1",
+    "color": "^4.2.3",
+    "memoize-one": "^6.0.0",
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "peerDependencies": {
+    "i18next": "^23.11.5",
+    "react": ">=18.0.0 <20.0.0",
+    "react-dom": ">=18.0.0 <20.0.0",
+    "react-i18next": "^14.1.2"
+  },
+  "devDependencies": {},
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=9.6.4"
+  }
+}
diff --git a/packages/data/src/histogram/Histogram.module.css b/packages/data/src/histogram/Histogram.module.css
new file mode 100644
index 0000000..405ccb4
--- /dev/null
+++ b/packages/data/src/histogram/Histogram.module.css
@@ -0,0 +1,53 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .histogram {
+    .histoLabel {
+      --tw-gradient-from: var(--color) var(--tw-gradient-from-position);
+      --tw-gradient-to: color-mix(in lab, var(--color) 20%, var(--fabric-bg))
+        var(--tw-gradient-to-position);
+      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+
+      background-color: color(from var(--color) srgb r g b / 5%);
+
+      &:hover {
+        background-color: color(from var(--color) srgb r g b / 15%);
+      }
+
+      &[data-disabled="true"] {
+        --color: theme(colors.tint.300);
+
+        color: theme(colors.tint.600);
+      }
+    }
+
+    .histoBar {
+      border-inline-end-color: var(--color);
+    }
+
+    .histoBadge {
+      background-color: color(from var(--color) srgb r g b / 15%);
+    }
+  }
+}
diff --git a/packages/data/src/histogram/Histogram.tsx b/packages/data/src/histogram/Histogram.tsx
new file mode 100644
index 0000000..84685f0
--- /dev/null
+++ b/packages/data/src/histogram/Histogram.tsx
@@ -0,0 +1,152 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { EmptyContent, Icon } from "@react-fabric/core";
+import {
+  type ColorType,
+  type PaletteType,
+} from "@react-fabric/core/dist/types/types";
+import { compareValues, Format } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import classes from "./Histogram.module.css";
+
+const emptyIcon =
+  "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
+
+interface HistogramItem {
+  id: string;
+  label: string;
+  count: number;
+  total?: number;
+  disabled?: boolean;
+}
+
+export interface HistogramProps {
+  /**
+   * histogram items list
+   */
+  items: HistogramItem[];
+  /**
+   * total count
+   */
+  total?: number;
+  /**
+   * histogram bar color
+   */
+  color?: ColorType | PaletteType;
+  /**
+   * sorted list
+   */
+  sortBy?: "label" | "count";
+  /**
+   * title when histo list is empty
+   */
+  emptyTitle?: string | JSX.Element;
+  /**
+   * message when histo list is empty
+   */
+  emptyMessage?: string | JSX.Element;
+  /**
+   * handle histo click
+   * @param id
+   * @returns
+   */
+  onClick?: (id: string) => void;
+}
+
+export const Histogram = ({
+  items = [],
+  total,
+  color = "primary",
+  sortBy = "count",
+  emptyTitle,
+  emptyMessage,
+  onClick,
+}: HistogramProps) => {
+  const { t } = useTranslation("data");
+  const maxTotal = useMemo(() => {
+    if (total) return total;
+    return Math.max(...items.map((item) => item.count));
+  }, [total, items]);
+
+  const sorted = useMemo(() => {
+    return items.sort(
+      compareValues(sortBy === "label" ? "asc" : "desc", sortBy),
+    );
+  }, [items, sortBy]);
+
+  return (
+    <div
+      className={classes.histogram}
+      style={
+        {
+          "--color": `var(--${color})`,
+        } as AnyObject
+      }
+    >
+      {sorted.length === 0 && (
+        <EmptyContent
+          icon={<Icon icon={emptyIcon} size="2.5rem" />}
+          title={emptyTitle}
+          message={emptyMessage ?? t("histogram.empty")}
+        />
+      )}
+      {sorted?.map((item) => (
+        <div
+          role="none"
+          key={item.id}
+          data-disabled={item.disabled}
+          className={classNames(
+            "relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden px-2 py-1 my-px",
+            classes.histoLabel,
+            item.disabled && "pointer-events-none",
+          )}
+          onClick={(e) => [onClick?.(item.id), e.stopPropagation()]}
+        >
+          <div
+            className={classNames(
+              "absolute z-0 inset-0 opacity-50 ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-0% to-100% border-e-2",
+              classes.histoBar,
+            )}
+            style={{
+              width: `${Math.min(item.count / maxTotal, 1) * 100}%`,
+            }}
+          />
+          <span className="flex-1 truncate z-1 text-sm font-medium">
+            {item.label}
+          </span>
+          <span
+            className={classNames(
+              "z-1 rounded-full text-xs font-medium px-2 py-1 leading-none",
+              classes.histoBadge,
+            )}
+          >
+            {Format.number(item.count)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/packages/data/src/hooks/useFilteredList.tsx b/packages/data/src/hooks/useFilteredList.tsx
new file mode 100644
index 0000000..3f2446d
--- /dev/null
+++ b/packages/data/src/hooks/useFilteredList.tsx
@@ -0,0 +1,78 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isString, matchString } from "@react-fabric/utilities";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useState,
+  useTransition,
+} from "react";
+
+const filterList = (
+  items: AnyObject[],
+  query: AnyObject = "",
+  matcher?: AnyObject,
+) => {
+  const newList: AnyObject[] = [];
+  items.forEach((item) => {
+    if (matcher) {
+      return matcher?.(item, query) && newList.push(item);
+    }
+    if (query && isString(query)) {
+      if (matchString(item.label ?? item.toString(), query)) {
+        return newList.push(item);
+      }
+    } else {
+      return newList.push(item);
+    }
+  });
+  return newList;
+};
+
+export const useFilteredList = <
+  T extends AnyObject = KeyValue,
+  Q extends AnyObject = string,
+>(
+  items: T[],
+  matcher?: (item: T, query: Q) => boolean,
+) => {
+  const [query, setQuery] = useState<Q>();
+  const _items = useDeferredValue(items ?? []);
+  const [filteredList, setFilteredList] = useState<T[]>([]);
+  const [isSearching, startTransition] = useTransition();
+
+  const filterItems = useCallback(
+    (items: T[], query?: Q) =>
+      startTransition(() => setFilteredList(filterList(items, query, matcher))),
+    [],
+  );
+
+  useEffect(() => {
+    if (query) filterItems(_items, query);
+    else setFilteredList(items);
+  }, [query, _items]);
+
+  return { onSearch: setQuery, query, filteredList, isSearching };
+};
diff --git a/packages/data/src/i18n/ar.json b/packages/data/src/i18n/ar.json
new file mode 100755
index 0000000..aa68331
--- /dev/null
+++ b/packages/data/src/i18n/ar.json
@@ -0,0 +1,36 @@
+{
+  "label": {
+    "noRecords": "لا تسجيلات"
+  },
+  "tree": {
+    "noItems": "لا توجد عناصر",
+    "error": "خطأ في تحميل العناصر",
+    "loading": "تحميل العناصر…"
+  },
+  "datagrid": {
+    "empty": "لا توجد سجلات متاحة"
+  },
+  "json": {
+    "empty": "لا توجد خصائص بيانات",
+    "true": "نعم",
+    "false": "رقم"
+  },
+  "checkList": {
+    "empty": "لا توجد عناصر قائمة"
+  },
+  "histogram": {
+    "empty": "لا توجد رسوم بيانية"
+  },
+  "action": {
+    "find": "تجد…",
+    "copy": "قيمة النسخ",
+    "filter": "منقي…",
+    "showShortcuts": "اختصارات لوحة المفاتيح…",
+    "collapseAll": "انهيار جميع",
+    "expandAll": "توسيع الكل",
+    "checkAll": "تحقق من الكل",
+    "uncheckAll": "الغاءالكل",
+    "addFilter": "أضف عامل تصفية",
+    "addFilterNot": "إضافة لا تصفية"
+  }
+}
diff --git a/packages/data/src/i18n/en.json b/packages/data/src/i18n/en.json
new file mode 100755
index 0000000..d6dbcca
--- /dev/null
+++ b/packages/data/src/i18n/en.json
@@ -0,0 +1,36 @@
+{
+  "label": {
+    "noRecords": "No Records"
+  },
+  "tree": {
+    "noItems": "No items",
+    "error": "Error loading items",
+    "loading": "Loading items..."
+  },
+  "datagrid": {
+    "empty": "No records available"
+  },
+  "json": {
+    "empty": "No data properties",
+    "true": "Yes",
+    "false": "No"
+  },
+  "checkList": {
+    "empty": "No list items"
+  },
+  "histogram": {
+    "empty": "No histograms"
+  },
+  "action": {
+    "find": "Find...",
+    "copy": "Copy Value",
+    "filter": "Filter...",
+    "showShortcuts": "Keyboard shortcuts...",
+    "collapseAll": "Collapse All",
+    "expandAll": "Expand All",
+    "checkAll": "Check All",
+    "uncheckAll": "Uncheck All",
+    "addFilter": "Add Filter",
+    "addFilterNot": "Add not Filter"
+  }
+}
diff --git a/packages/data/src/i18n/index.ts b/packages/data/src/i18n/index.ts
new file mode 100755
index 0000000..efc1260
--- /dev/null
+++ b/packages/data/src/i18n/index.ts
@@ -0,0 +1,28 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { addTranslationBundle } from "@react-fabric/core";
+import ar from "./ar.json";
+import en from "./en.json";
+
+addTranslationBundle("data", { en, ar });
diff --git a/packages/data/src/index.ts b/packages/data/src/index.ts
new file mode 100644
index 0000000..50b7207
--- /dev/null
+++ b/packages/data/src/index.ts
@@ -0,0 +1,31 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import "./i18n";
+
+export { Histogram } from "./histogram/Histogram";
+export { JsonViewer } from "./json/JsonViewer";
+export { VirtualGallery, type VirtualGalleryRef } from "./virtual/Gallery";
+export { VirtualList, type VirtualListRef } from "./virtual/List";
+
+export * from "./hooks/useFilteredList";
diff --git a/packages/data/src/json/JsonViewer.tsx b/packages/data/src/json/JsonViewer.tsx
new file mode 100644
index 0000000..470e293
--- /dev/null
+++ b/packages/data/src/json/JsonViewer.tsx
@@ -0,0 +1,346 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  Copy,
+  CoreIcons,
+  EmptyContent,
+  Icon,
+  Meter,
+  Text,
+} from "@react-fabric/core";
+import { type CssProp } from "@react-fabric/core/dist/types/types";
+import {
+  Format,
+  isArray,
+  isBoolean,
+  isEmpty,
+  isNil,
+  isObject,
+  isTrue,
+} from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Fragment, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export interface JsonViewProps<T> extends CssProp {
+  /**
+   * json value
+   */
+  json: T;
+  /**
+   * display inline
+   */
+  inline?: boolean;
+  /**
+   * label fixed width when using inline
+   */
+  labelWidth?: number | string;
+  /**
+   * display object properties as tree
+   * @default true
+   */
+  showPropertyTree?: boolean;
+  /**
+   * properties to format as dates
+   * (default format applied to property name containing `date` | `time`)
+   */
+  propertyScheme?: {
+    boolean?: string[];
+    date?: string[];
+    time?: string[];
+    number?: string[];
+    bytes?: string[];
+    percent?: string[];
+    phone?: string[];
+  };
+  /**
+   * enable value copy
+   */
+  copy?: true | string[];
+  /**
+   * enable filter callbacks
+   */
+  filters?: true | string[];
+  /**
+   * message for empty json
+   */
+  emptyMessage?: string;
+  /**
+   * on filter callback
+   */
+  onFilter?: (path: string, value: AnyObject, negate: boolean) => void;
+  /**
+   * render function for custom label display
+   */
+  labeler?: (path: string) => string | undefined;
+  /**
+   * render function for custom value display
+   */
+  formatter?: (
+    path?: string,
+    value?: AnyObject,
+  ) => string | JSX.Element | undefined;
+}
+
+const reduceObject = (json: AnyObject, keys: string[] = [], prefix = "") => {
+  const ret: AnyObject[] = [];
+  Object.entries(json).forEach(([key, value]) => {
+    if (isArray(value) && isObject(value[0])) {
+      ret.push(...reduceObject(value, [...keys, key], key));
+    } else {
+      const obj: KeyValue = {
+        field: prefix ? `${prefix}.${key}` : key,
+        value,
+        path: [...keys, key].join("."),
+      };
+
+      if (isObject(value) && !isEmpty(value) && !("_score_" in value)) {
+        obj.children = reduceObject(value, [...keys, key]);
+      }
+
+      ret.push(obj);
+    }
+  });
+
+  return ret.flat(99);
+};
+
+const JsonEntry = ({
+  value,
+  path,
+  field,
+  children,
+  copy,
+  filters,
+  labeler,
+  formatter,
+  propertyScheme,
+  showPropertyTree,
+  onFilter,
+  inline,
+  labelWidth = "30%",
+  level = 0,
+}: KeyValue) => {
+  const { t } = useTranslation("data");
+
+  const [expanded, setExpanded] = useState(true);
+
+  const canExpand = useMemo(() => !!children, [children]);
+
+  const actualValue = useMemo(() => value?._label_ ?? value ?? "", [value]);
+
+  const display = useMemo(() => {
+    if (children) return null;
+    if (isNil(value)) return <span className="text-muted">null</span>;
+    if (isEmpty(value)) return <span className="text-muted">empty</span>;
+
+    let ret = actualValue;
+    if (formatter) {
+      const formatted = formatter?.(path, actualValue);
+      if (!isNil(formatted)) ret = formatted;
+    }
+
+    if (isArray(actualValue)) {
+      ret = `[${actualValue.join(", ")}]`;
+    }
+    if (propertyScheme?.date?.includes(path)) {
+      // return <DateDisplay date={value} />;
+    }
+    if (propertyScheme?.time?.includes(path))
+      ret = Format.date(actualValue, "pp");
+    if (propertyScheme?.number?.phone(path)) ret = Format.phone(actualValue);
+    if (propertyScheme?.bytes?.includes(path)) ret = Format.bytes(actualValue);
+    if (propertyScheme?.percent?.includes(path))
+      ret = Format.percent(actualValue);
+    if (propertyScheme?.number?.includes(path))
+      ret = Format.number(actualValue);
+    if (propertyScheme?.boolean?.includes(path) || isBoolean(actualValue))
+      ret = actualValue ? t("json.true") : t("json.false");
+    if (ret?.length > 128) {
+      ret = <Text clamp={3}>{ret}</Text>;
+    }
+
+    return (
+      <Fragment>
+        {ret}
+        {isObject(value) && value._score_ > 0 && (
+          <Meter className="text-xs" value={value._score_} />
+        )}
+      </Fragment>
+    );
+  }, [value, path, formatter, propertyScheme, actualValue]);
+
+  const pathWithoutOrdinal = useMemo(
+    () => path.replace(/\.\d*\./, "."),
+    [path],
+  );
+
+  const canCopy = useMemo(
+    () =>
+      !isEmpty(value) &&
+      (isTrue(copy) ||
+        copy?.includes?.(path) ||
+        copy?.includes?.(pathWithoutOrdinal)),
+    [copy, value, path, pathWithoutOrdinal],
+  );
+  const canFilter = useMemo(
+    () =>
+      isTrue(filters) ||
+      filters?.includes?.(path) ||
+      filters?.includes?.(pathWithoutOrdinal),
+    [filters, path, pathWithoutOrdinal],
+  );
+
+  return (
+    <Fragment>
+      {showPropertyTree && (
+        <div
+          className={classNames(
+            "py-2",
+            inline && "flex flex-nowrap items-center",
+          )}
+          style={{
+            paddingInlineStart: level * 8,
+          }}
+        >
+          <div
+            role="none"
+            className={classNames(
+              "flex overflow-hidden items-center",
+              inline && "flex-content",
+            )}
+            style={{
+              flexBasis: labelWidth,
+            }}
+            onClick={() => canExpand && setExpanded(!expanded)}
+          >
+            {canExpand && (
+              <Icon
+                rtlFlip
+                icon={expanded ? CoreIcons.chevronDown : CoreIcons.chevronRight}
+              />
+            )}
+            <label className="text-dimmed text-sm px-2 flex-auto truncate">
+              {labeler?.(path) ?? field}
+            </label>
+          </div>
+          {display && (
+            <div className={classNames("px-2", inline && "flex-1")}>
+              {canCopy && <Copy size="xs" text={actualValue} />}
+              {display}
+            </div>
+          )}
+        </div>
+      )}
+      {!showPropertyTree && !children && (
+        <div
+          className={classNames(
+            "py-2",
+            inline && "flex flex-nowrap items-center",
+          )}
+        >
+          <div
+            role="none"
+            className={classNames(
+              "flex overflow-hidden items-center",
+              inline && "flex-content",
+            )}
+            style={{
+              flexBasis: labelWidth,
+            }}
+          >
+            <label className="text-dimmed text-sm px-2 flex-auto truncate">
+              {labeler?.(path) ?? path}
+            </label>
+          </div>
+          <div className={classNames("px-2", inline && "flex-1")}>
+            {canCopy && <Copy size="xs" text={value} />}
+            {display}
+          </div>
+        </div>
+      )}
+      {expanded &&
+        children?.map((item: KeyValue) => (
+          <JsonEntry
+            key={item.path}
+            {...item}
+            level={level + 1}
+            copy={copy}
+            inline={inline}
+            showPropertyTree={showPropertyTree}
+            propertyScheme={propertyScheme}
+            filters={filters}
+            labelWidth={labelWidth}
+            formatter={formatter}
+            labeler={labeler}
+            onFilter={onFilter}
+          />
+        ))}
+    </Fragment>
+  );
+};
+
+export const JsonViewer = <T extends KeyValue = KeyValue>({
+  className,
+  json,
+  copy,
+  propertyScheme,
+  filters,
+  inline,
+  labelWidth,
+  formatter,
+  labeler,
+  onFilter,
+  emptyMessage,
+  showPropertyTree = true,
+  ...rest
+}: JsonViewProps<T>) => {
+  const { t } = useTranslation("data");
+
+  const list = useMemo(() => reduceObject(json), [json]);
+
+  return (
+    <div {...rest} className={classNames(className, "p-4 bg-alternate")}>
+      {!isEmpty(json) ? (
+        list.map((item) => (
+          <JsonEntry
+            key={item.path}
+            {...item}
+            copy={copy}
+            inline={inline}
+            showPropertyTree={showPropertyTree}
+            propertyScheme={propertyScheme}
+            filters={filters}
+            labelWidth={labelWidth}
+            formatter={formatter}
+            labeler={labeler}
+            onFilter={onFilter}
+          />
+        ))
+      ) : (
+        <EmptyContent size="sm" message={emptyMessage ?? t("json.empty")} />
+      )}
+    </div>
+  );
+};
diff --git a/packages/data/src/virtual/Gallery.tsx b/packages/data/src/virtual/Gallery.tsx
new file mode 100644
index 0000000..c3a6d2d
--- /dev/null
+++ b/packages/data/src/virtual/Gallery.tsx
@@ -0,0 +1,314 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Skeleton, useDebounce, useEffectDebugger } from "@react-fabric/core";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import classNames from "classnames";
+import memoize from "memoize-one";
+import {
+  memo,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type Ref,
+  type UIEvent,
+} from "react";
+import { Scroller } from "./Scroller";
+
+export interface VirtualGalleryRef {
+  scrollToItem: (index: number) => void;
+  hilight: (index: number) => void;
+  unhilight: () => void;
+}
+
+export interface VirtualGalleryProps<T> {
+  children: (props: {
+    data: T;
+    index: number;
+    isLast: boolean;
+  }) => ReactElement;
+  galleryRef?: Ref<VirtualGalleryRef | undefined>;
+  /**
+   * fixed columns
+   */
+  columns?: number;
+  /**
+   * default item height
+   */
+  defaultHeight?: number;
+  /**
+   * default item width
+   */
+  defaultWidth?: number;
+  /**
+   * padding
+   */
+  padding?: "sm" | "md" | "lg" | "none";
+  /**
+   * data list
+   */
+  items: T[];
+  /**
+   * loading state
+   */
+  isLoading?: boolean;
+  /**
+   * hide scroll buttons
+   */
+  hideScroller?: boolean;
+  /**
+   * load more callback
+   */
+  onLoadMore?: () => void;
+  /**
+   * scroll handler
+   */
+  onScroll?: (top: number) => void;
+}
+
+const createItemList = memoize((items) => items);
+
+const _VirtualGallery = <T extends KeyValue>({
+  items,
+  children,
+  columns,
+  padding = "md",
+  defaultHeight: height = 48,
+  defaultWidth: width = 48,
+  hideScroller,
+  isLoading,
+  onLoadMore,
+  onScroll,
+  galleryRef,
+}: VirtualGalleryProps<T>) => {
+  const count = useDeferredValue(items.length);
+  const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
+  const itemList: Array<{
+    index: number;
+    data: T;
+    isLast: boolean;
+    isSticky: boolean;
+  }> = createItemList(
+    items.map((item: AnyObject, idx) => {
+      return {
+        index: idx,
+        data: item,
+        isLast: idx + 1 === items.length,
+      };
+    }),
+  );
+
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const [columnCount, setColumnCount] = useState(1);
+  const columnMap = useMemo(
+    () => new Array(columnCount).fill(0).map((_, idx) => idx),
+    [columnCount],
+  );
+  useEffectDebugger(
+    () => {
+      if (scrollerRef.current) {
+        const el = scrollerRef.current;
+        const handler = () => {
+          setColumnCount(
+            columns ??
+              Math.max(1, Math.floor(((el?.offsetWidth ?? 800) - 32) / width)),
+          );
+        };
+        const ob = new ResizeObserver(handler);
+        handler();
+        ob.observe(el);
+
+        return () => {
+          ob.unobserve(el);
+          ob.disconnect();
+        };
+      }
+    },
+    [scrollerRef.current, columns, count, width],
+    "virtualGallery recalculate view count",
+  );
+  const virtualizer = useVirtualizer({
+    count: Math.ceil(count / columnCount),
+    getScrollElement: () => scrollerRef.current,
+    estimateSize: () => height,
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  const currentIndex = useRef(0);
+  useEffect(() => {
+    currentIndex.current = virtualItems[1]?.index ?? 0;
+  }, [virtualItems]);
+
+  const calculateActiveScroll = useCallback(() => {
+    const {
+      scrollTop = 0,
+      scrollHeight = 0,
+      offsetHeight = 0,
+    } = (scrollerRef.current ?? {}) as HTMLElement;
+    if (scrollHeight === offsetHeight) return 0;
+
+    if (scrollTop === 0) return 1;
+    if (scrollTop >= scrollHeight - offsetHeight - extraSize * 2) return 2;
+
+    return 3;
+  }, []);
+
+  const [scrollActive, setScrollActive] = useState(0);
+  const fireScrollEvent = useDebounce(
+    (idx: number) => onScroll?.(currentIndex.current * idx),
+    [onScroll],
+  );
+  const handleScroll = useCallback(
+    (evt: UIEvent) => {
+      setScrollActive(calculateActiveScroll());
+      fireScrollEvent(columnCount);
+
+      const {
+        scrollTop = 0,
+        scrollHeight = 0,
+        offsetHeight = 0,
+      } = (scrollerRef.current ?? {}) as HTMLElement;
+      +scrollTop + offsetHeight >= scrollHeight && onLoadMore?.();
+    },
+    [columnCount, onLoadMore],
+  );
+
+  useEffect(() => {
+    setScrollActive(calculateActiveScroll());
+  }, [count, calculateActiveScroll]);
+
+  useImperativeHandle(
+    galleryRef,
+    () => ({
+      scrollToItem(index) {
+        virtualizer.scrollToIndex(Math.floor(index / columnCount), {
+          align: "start",
+        });
+      },
+      hilight(index) {
+        scrollerRef.current
+          ?.querySelector(".hilight")
+          ?.classList.remove("hilight", "ring-1");
+        virtualizer.scrollToIndex(Math.floor(index / columnCount), {
+          align: "start",
+        });
+        setTimeout(() => {
+          scrollerRef.current
+            ?.querySelector(`[data-index="${index}"]`)
+            ?.classList.add("hilight", "ring-1");
+        }, 100);
+      },
+      unhilight() {
+        scrollerRef.current
+          ?.querySelector(".hilight")
+          ?.classList.remove("hilight", "ring-1");
+      },
+    }),
+    [virtualizer, columnCount],
+  );
+
+  return (
+    <div
+      ref={scrollerRef}
+      onScroll={handleScroll}
+      className={classNames(
+        "area-content bg-base overflow-auto contain-strict",
+      )}
+    >
+      <div
+        className={classNames(
+          "inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full",
+        )}
+      >
+        <div
+          className={classNames(
+            "box-content",
+            padding === "sm" && "p-1",
+            padding === "md" && "p-2",
+            padding === "lg" && "p-4",
+          )}
+        >
+          <div
+            style={{
+              height: virtualizer.getTotalSize(),
+            }}
+          >
+            <div style={{ height: virtualItems[0]?.start }} />
+            {virtualItems.map(({ key, index, measureElement }) => (
+              <div
+                className="flex"
+                key={key}
+                data-index={index}
+                ref={measureElement}
+              >
+                {columnMap.map((col) => (
+                  <div
+                    key={`${key}:${col}`}
+                    data-index={index * columnCount + col}
+                    className={classNames("grid rounded-capped")}
+                  >
+                    {itemList[index * columnCount + col] &&
+                      children(
+                        itemList[index * columnCount + col] as AnyObject,
+                      )}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+          {onLoadMore && (
+            <div className="h-16">{isLoading && <Skeleton />}</div>
+          )}
+        </div>
+        {!hideScroller && (
+          <div className={classNames("self-end sticky bottom-2")}>
+            <Scroller
+              vertical
+              scrollActive={scrollActive}
+              onStart={() => virtualizer.scrollToIndex(0)}
+              onPrevious={() =>
+                scrollerRef.current &&
+                virtualizer.scrollBy(-scrollerRef.current.offsetHeight)
+              }
+              onNext={() =>
+                scrollerRef.current &&
+                virtualizer.scrollBy(scrollerRef.current.offsetHeight)
+              }
+              onEnd={() => virtualizer.scrollToIndex(count - 1)}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+_VirtualGallery.displayName = "VirtualGallery";
+
+const GenericMemo: <T>(c: T) => T = memo;
+export const VirtualGallery = GenericMemo(_VirtualGallery);
diff --git a/packages/data/src/virtual/List.tsx b/packages/data/src/virtual/List.tsx
new file mode 100644
index 0000000..fdf9316
--- /dev/null
+++ b/packages/data/src/virtual/List.tsx
@@ -0,0 +1,328 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Skeleton, useDebounce } from "@react-fabric/core";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import classNames from "classnames";
+import memoize from "memoize-one";
+import {
+  memo,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type Ref,
+  type UIEvent,
+} from "react";
+import { Scroller } from "./Scroller";
+
+export interface VirtualListRef {
+  scrollToItem: (index: number) => void;
+  hilight: (index: number) => void;
+  unhilight: () => void;
+}
+
+export interface VirtualListProps<T> {
+  children: (props: {
+    data: T;
+    index: number;
+    isLast: boolean;
+  }) => ReactElement;
+  listRef?: Ref<VirtualListRef | undefined>;
+  /**
+   * default item height
+   */
+  defaultHeight?: number;
+  /**
+   * default item width
+   */
+  defaultWidth?: number;
+  /**
+   * full width list
+   */
+  fullWidth?: boolean;
+  /**
+   * padding
+   */
+  padding?: "sm" | "md" | "lg" | "none";
+  /**
+   * list orientation
+   */
+  orientation?: "vertical" | "horizontal";
+  /**
+   * data list
+   */
+  items: T[];
+  /**
+   * loading state
+   */
+  isLoading?: boolean;
+  /**
+   * hide scroll buttons
+   */
+  hideScroller?: boolean;
+  /**
+   * load more callback
+   */
+  onLoadMore?: () => void;
+  /**
+   * scroll handler
+   */
+  onScroll?: (top: number) => void;
+}
+
+const createItemList = memoize((items) => items);
+
+const _VirtualList = <T extends KeyValue>({
+  items,
+  children,
+  fullWidth,
+  padding = "md",
+  orientation = "vertical",
+  defaultHeight: height = 48,
+  defaultWidth: width = 48,
+  hideScroller,
+  isLoading,
+  onLoadMore,
+  onScroll,
+  listRef,
+}: VirtualListProps<T>) => {
+  const count = useDeferredValue(items.length);
+  const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
+  const itemList: Array<{
+    index: number;
+    data: T;
+    isLast: boolean;
+    isSticky: boolean;
+  }> = createItemList(
+    items.map((item: AnyObject, idx) => {
+      return {
+        index: idx,
+        data: item,
+        isLast: idx + 1 === items.length,
+      };
+    }),
+  );
+
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count,
+    horizontal: orientation === "horizontal",
+    getScrollElement: () => scrollerRef.current,
+    estimateSize: () => (orientation === "horizontal" ? width : height),
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  const currentIndex = useRef(0);
+  useEffect(() => {
+    currentIndex.current = virtualItems[1]?.index ?? 0;
+  }, [virtualItems]);
+
+  const calculateActiveScroll = useCallback(() => {
+    const {
+      scrollTop = 0,
+      scrollLeft = 0,
+      scrollWidth = 0,
+      scrollHeight = 0,
+      offsetWidth = 0,
+      offsetHeight = 0,
+    } = (scrollerRef.current ?? {}) as HTMLElement;
+    if (orientation === "vertical") {
+      if (scrollHeight === offsetHeight) return 0;
+
+      if (scrollTop === 0) return 1;
+      if (scrollTop >= scrollHeight - offsetHeight - extraSize * 2) return 2;
+    }
+    if (orientation === "horizontal") {
+      if (scrollWidth === offsetWidth) return 0;
+
+      if (Math.abs(scrollLeft) === 0) return 1;
+      if (Math.abs(scrollLeft) >= scrollWidth - offsetWidth - extraSize * 2)
+        return 2;
+    }
+    return 3;
+  }, [orientation]);
+
+  const [scrollActive, setScrollActive] = useState(0);
+  const fireScrollEvent = useDebounce(
+    () => onScroll?.(currentIndex.current),
+    [onScroll],
+  );
+  const handleScroll = useCallback(
+    (evt: UIEvent) => {
+      setScrollActive(calculateActiveScroll());
+      fireScrollEvent();
+
+      const {
+        scrollTop = 0,
+        scrollLeft = 0,
+        scrollWidth = 0,
+        scrollHeight = 0,
+        offsetWidth = 0,
+        offsetHeight = 0,
+      } = (scrollerRef.current ?? {}) as HTMLElement;
+      if (orientation === "vertical") {
+        +scrollTop + offsetHeight >= scrollHeight && onLoadMore?.();
+      }
+      if (orientation === "horizontal") {
+        +scrollLeft + offsetWidth >= scrollWidth && onLoadMore?.();
+      }
+    },
+    [orientation, onLoadMore],
+  );
+
+  useEffect(() => {
+    setScrollActive(calculateActiveScroll());
+  }, [items, calculateActiveScroll]);
+
+  useImperativeHandle(
+    listRef,
+    () => ({
+      scrollToItem(index) {
+        virtualizer.scrollToIndex(index, { align: "start" });
+      },
+      hilight(index) {
+        scrollerRef.current
+          ?.querySelector(".hilight")
+          ?.classList.remove("hilight", "ring-1");
+        virtualizer.scrollToIndex(Math.floor(index), {
+          align: "start",
+        });
+        setTimeout(() => {
+          scrollerRef.current
+            ?.querySelector(`[data-index="${index}"]`)
+            ?.classList.add("hilight", "ring-1");
+        }, 100);
+      },
+      unhilight() {
+        scrollerRef.current
+          ?.querySelector(".hilight")
+          ?.classList.remove("hilight", "ring-1");
+      },
+    }),
+    [virtualizer],
+  );
+
+  return (
+    <div
+      ref={scrollerRef}
+      onScroll={handleScroll}
+      className={classNames(
+        "area-content bg-base overflow-auto contain-strict",
+      )}
+    >
+      <div
+        className={classNames(
+          "inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full",
+          orientation === "horizontal" && "flex-col",
+        )}
+      >
+        <div
+          className={classNames(
+            "box-content inline-flex flex-nowrap",
+            orientation === "vertical" && "flex-col",
+            orientation === "horizontal" && "flex-row",
+            fullWidth && "flex-1",
+            padding === "sm" && "p-1",
+            padding === "md" && "p-2",
+            padding === "lg" && "p-4",
+          )}
+        >
+          <div
+            style={
+              orientation === "vertical"
+                ? { height: virtualizer.getTotalSize() }
+                : { width: virtualizer.getTotalSize() }
+            }
+          >
+            <div
+              style={
+                orientation === "vertical"
+                  ? { height: virtualItems[0]?.start }
+                  : { width: virtualItems[0]?.start, display: "inline-block" }
+              }
+            />
+            {virtualItems.map(({ key, index }) => (
+              <div
+                key={key}
+                data-index={index}
+                ref={virtualizer.measureElement}
+                className={classNames(
+                  "rounded-capped",
+                  orientation === "horizontal" ? "inline-grid" : "grid",
+                )}
+              >
+                {children(itemList[index] as AnyObject)}
+              </div>
+            ))}
+          </div>
+          {onLoadMore && (
+            <div className={orientation === "horizontal" ? "min-w-16" : "h-16"}>
+              {isLoading && <Skeleton />}
+            </div>
+          )}
+        </div>
+        {!hideScroller && (
+          <div
+            className={classNames(
+              orientation === "vertical" && "self-end sticky bottom-2",
+              orientation === "horizontal" && "self-end sticky end-2",
+            )}
+          >
+            <Scroller
+              vertical={orientation === "vertical"}
+              scrollActive={scrollActive}
+              onStart={() => virtualizer.scrollToIndex(0)}
+              onPrevious={() =>
+                scrollerRef.current &&
+                virtualizer.scrollBy(
+                  -(orientation === "vertical"
+                    ? scrollerRef.current.offsetHeight
+                    : scrollerRef.current.offsetWidth),
+                )
+              }
+              onNext={() =>
+                scrollerRef.current &&
+                virtualizer.scrollBy(
+                  orientation === "vertical"
+                    ? scrollerRef.current.offsetHeight
+                    : scrollerRef.current.offsetWidth,
+                )
+              }
+              onEnd={() => virtualizer.scrollToIndex(count - 1)}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+_VirtualList.displayName = "VirtualList";
+
+const GenericMemo: <T>(c: T) => T = memo;
+export const VirtualList = GenericMemo(_VirtualList);
diff --git a/packages/data/src/virtual/Scroller.tsx b/packages/data/src/virtual/Scroller.tsx
new file mode 100644
index 0000000..97dac05
--- /dev/null
+++ b/packages/data/src/virtual/Scroller.tsx
@@ -0,0 +1,81 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Button, ButtonGroup, CoreIcons } from "@react-fabric/core";
+
+export const Scroller = ({
+  vertical = true,
+  scrollActive,
+  onStart,
+  onEnd,
+  onPrevious,
+  onNext,
+}: {
+  scrollActive: number;
+  vertical: boolean;
+  onStart: () => void;
+  onEnd: () => void;
+  onPrevious: () => void;
+  onNext: () => void;
+}) => {
+  return (
+    <ButtonGroup vertical={vertical} variant="link" className="outline">
+      <Button
+        rtlFlip
+        size="sm"
+        variant="link"
+        aria-label="scroll to top"
+        icon={vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft}
+        disabled={(scrollActive & 2) === 0}
+        onClick={onStart}
+      />
+      <Button
+        rtlFlip
+        size="sm"
+        variant="link"
+        aria-label="scroll up"
+        icon={vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft}
+        disabled={(scrollActive & 2) === 0}
+        onClick={onPrevious}
+      />
+      <Button
+        rtlFlip
+        size="sm"
+        variant="link"
+        aria-label="scroll down"
+        icon={vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight}
+        disabled={scrollActive % 2 === 0}
+        onClick={onNext}
+      />
+      <Button
+        rtlFlip
+        size="sm"
+        variant="link"
+        aria-label="scroll to bottom"
+        icon={vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight}
+        disabled={scrollActive % 2 === 0}
+        onClick={onEnd}
+      />
+    </ButtonGroup>
+  );
+};
diff --git a/packages/data/stories/VirtualGallery.stories.tsx b/packages/data/stories/VirtualGallery.stories.tsx
new file mode 100644
index 0000000..d45e20a
--- /dev/null
+++ b/packages/data/stories/VirtualGallery.stories.tsx
@@ -0,0 +1,140 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import {
+  Button,
+  ButtonGroup,
+  Card,
+  Col,
+  Header,
+  Row,
+  Section,
+  Text,
+  Title,
+  Viewport,
+} from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { useCallback, useRef, useState } from "react";
+import { VirtualGallery, VirtualGalleryRef } from "../src";
+
+const meta: Meta<typeof VirtualGallery> = {
+  component: VirtualGallery,
+  title: "@data/Virtual/Gallery",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: "data" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VirtualGallery>;
+
+const count = 50;
+const lorem = faker.lorem.paragraph();
+export const Gallery: Story = {
+  render: (args) => {
+    const listRef = useRef<VirtualGalleryRef>();
+    const [isLoading, setLoading] = useState(false);
+    const [recordCount, setCount] = useState(50);
+
+    const loadMore = useCallback(() => {
+      setLoading(true);
+      setTimeout(() => {
+        setCount(count + recordCount);
+        setLoading(false);
+      }, 200);
+    }, [recordCount, count]);
+    return (
+      <div className="min-h-[600px]">
+        <Viewport>
+          <Section>
+            <Header flex bg="base" className="gap-2 p-2">
+              <Button onClick={() => listRef.current?.scrollToItem(8)}>
+                ScrollTo #9
+              </Button>
+              <Button onClick={() => listRef.current?.scrollToItem(12)}>
+                ScrollTo #13
+              </Button>
+              <Button onClick={() => listRef.current?.hilight(1)}>
+                Hilight #2
+              </Button>
+              <Button onClick={() => listRef.current?.hilight(2)}>
+                Hilight #3
+              </Button>
+            </Header>
+            <VirtualGallery
+              {...args}
+              galleryRef={listRef}
+              defaultWidth={480}
+              defaultHeight={176}
+              items={new Array(recordCount).fill(true)}
+              onLoadMore={loadMore}
+              isLoading={isLoading}
+            >
+              {({ data, index }) =>
+                data && (
+                  <div className="w-[480px] flex flex-nowrap gap-1 py-2 px-4">
+                    <Card bodyClassName="p-2 flex-1">
+                      <Header>
+                        <Title>List item {index + 1}</Title>
+                      </Header>
+                      <Row>
+                        <Col flex="auto">
+                          <img
+                            loading="lazy"
+                            className="border-4 bg-bw-500/50 border-bw-500 object-contain h-24 w-32"
+                            src={`https://picsum.photos/id/${index}/192/108`}
+                          />
+                        </Col>
+                        <Col flex="fill">
+                          <Text clamp={3}>{lorem}</Text>
+                        </Col>
+                      </Row>
+                    </Card>
+                    <ButtonGroup vertical variant="link" className="self-start">
+                      <Button
+                        aria-label="plus"
+                        variant="link"
+                        icon="mdi mdi-plus"
+                      />
+                      <Button
+                        aria-label="minus"
+                        variant="link"
+                        icon="mdi mdi-minus"
+                      />
+                    </ButtonGroup>
+                  </div>
+                )
+              }
+            </VirtualGallery>
+          </Section>
+        </Viewport>
+      </div>
+    );
+  },
+  args: {
+    onScroll: fn(),
+  },
+};
diff --git a/packages/data/stories/VirtualList.stories.tsx b/packages/data/stories/VirtualList.stories.tsx
new file mode 100644
index 0000000..cd2787f
--- /dev/null
+++ b/packages/data/stories/VirtualList.stories.tsx
@@ -0,0 +1,163 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  Avatar,
+  Button,
+  ButtonGroup,
+  Card,
+  Col,
+  Header,
+  Row,
+  Section,
+  Text,
+  Viewport,
+} from "@react-fabric/core";
+import { Countries } from "@react-fabric/utilities";
+import type { Meta, StoryObj } from "@storybook/react";
+import classNames from "classnames";
+import { useRef } from "react";
+import { VirtualGalleryRef, VirtualList } from "../src";
+
+const meta: Meta<typeof VirtualList> = {
+  component: VirtualList,
+  title: "@data/Virtual/List",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: "items" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VirtualList>;
+
+export const List: Story = {
+  render: (args) => {
+    const listRef = useRef<VirtualGalleryRef>();
+
+    return (
+      <div className="min-h-[600px]">
+        <Viewport>
+          <Section>
+            <Header flex bg="base" className="gap-2 p-2">
+              <Button onClick={() => listRef.current?.scrollToItem(8)}>
+                ScrollTo #9
+              </Button>
+              <Button onClick={() => listRef.current?.scrollToItem(12)}>
+                ScrollTo #13
+              </Button>
+              <Button onClick={() => listRef.current?.hilight(1)}>
+                Hilight #2
+              </Button>
+              <Button onClick={() => listRef.current?.hilight(2)}>
+                Hilight #3
+              </Button>
+            </Header>
+            <VirtualList
+              {...args}
+              listRef={listRef}
+              defaultHeight={152}
+              defaultWidth={608}
+            >
+              {({ data, isLast }) => (
+                <div className="flex flex-nowrap gap-4 p-2">
+                  <div
+                    className={classNames(
+                      "flex-content relative",
+                      !isLast &&
+                        "before:absolute before:w-px before:bg-tint-100 before:left-1/2 before:top-4 before:-bottom-4",
+                    )}
+                  >
+                    <Avatar
+                      rounded
+                      name={data.iso3}
+                      fallbackIcon={`flag ${data.iso3}`}
+                      size="3rem"
+                    />
+                  </div>
+                  <Card bodyClassName="p-2 grid w-[480px] flex-1">
+                    <Row className="text-lg font-semibold" align="center">
+                      <Col flex="fill">
+                        <Text className="flex-1 px-2">{data.name}</Text>
+                      </Col>
+                      <Col>
+                        <Text>&nbsp;{data.emoji}</Text>
+                      </Col>
+                    </Row>
+                    <Row justify="between" align="center">
+                      <Col>
+                        <Text>{data.fullname}</Text>
+                      </Col>
+                      <Col>
+                        <Text className="text-sm text-muted">
+                          {data.continent}
+                        </Text>
+                      </Col>
+                    </Row>
+                    <Row justify="between" align="center">
+                      <Col>
+                        <Text className="text-sm text-muted">
+                          {data.capital}
+                        </Text>
+                      </Col>
+                      <Col>
+                        <Text className="text-sm text-muted">
+                          {data.iso2}/{data.iso3}
+                        </Text>
+                      </Col>
+                    </Row>
+                    <Row justify="between" align="center">
+                      <Col>
+                        <Text className="text-sm text-muted">{data.phone}</Text>
+                      </Col>
+                      <Col>
+                        <Text className="text-sm text-muted">
+                          {data.currency}
+                        </Text>
+                      </Col>
+                    </Row>
+                  </Card>
+                  <ButtonGroup vertical variant="link" className="self-start">
+                    <Button
+                      aria-label="plus"
+                      variant="link"
+                      icon="mdi mdi-plus"
+                    />
+                    <Button
+                      aria-label="minus"
+                      variant="link"
+                      icon="mdi mdi-minus"
+                    />
+                  </ButtonGroup>
+                </div>
+              )}
+            </VirtualList>
+          </Section>
+        </Viewport>
+      </div>
+    );
+  },
+  args: {
+    items: Countries.list,
+  },
+};
diff --git a/packages/data/stories/histogram/Histogram.stories.tsx b/packages/data/stories/histogram/Histogram.stories.tsx
new file mode 100644
index 0000000..ae94ea7
--- /dev/null
+++ b/packages/data/stories/histogram/Histogram.stories.tsx
@@ -0,0 +1,57 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { faker } from "@faker-js/faker";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Histogram } from "../../src";
+
+const meta: Meta<typeof Histogram> = {
+  component: Histogram,
+  title: "@data/Histogram",
+  parameters: {
+    controls: { exclude: /^(children|as)/ },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-96 p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const items = new Array(18).fill(0).map(() => ({
+  id: faker.number.hex(2048),
+  label: faker.animal.cat(),
+  count: faker.number.int({ min: 0, max: 999 }),
+}));
+
+export default meta;
+type Story = StoryObj<typeof Histogram>;
+
+export const _Histogram: Story = {
+  render: (args) => {
+    return <Histogram {...args} items={items} />;
+  },
+  args: {},
+};
diff --git a/packages/data/stories/json/JsonViewer.stories.tsx b/packages/data/stories/json/JsonViewer.stories.tsx
new file mode 100644
index 0000000..6bc300f
--- /dev/null
+++ b/packages/data/stories/json/JsonViewer.stories.tsx
@@ -0,0 +1,91 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Content, Section, Viewport } from "@react-fabric/core";
+import { Countries, Format } from "@react-fabric/utilities";
+import type { Meta, StoryObj } from "@storybook/react";
+import { JsonViewer } from "../../src";
+import { faker } from "@faker-js/faker";
+
+const meta: Meta<typeof JsonViewer> = {
+  component: JsonViewer,
+  title: "@data/JsonViewer",
+  parameters: {
+    controls: { exclude: "json" },
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const json = {
+  a: 1,
+  b: {},
+  c: [],
+  d: "test",
+  e: { a: 2, b: 3, c: 4 },
+  f: [1, 2, 3],
+  f2: [
+    { a: 2, b: 3 },
+    { a: 2, b: 3 },
+    { a: 2, b: 3 },
+  ],
+  g: undefined,
+  h: 33.45,
+  i: "+99.18",
+  j: 198267345,
+  boolean: {
+    _label_: true,
+    _score_: 75.69,
+  },
+  date: "2020-03-04T12:48:00.000",
+  time: "12:48:00.000",
+  temp: {
+    _label_: "Any label",
+    _score_: 45.69,
+  },
+  lipsum: faker.lorem.paragraphs(4),
+};
+
+export default meta;
+type Story = StoryObj<typeof JsonViewer>;
+
+export const _JsonViewer: Story = {
+  render: (args) => {
+    return <JsonViewer {...args} json={json} filters />;
+  },
+  args: {
+    copy: true,
+    labeler(path) {
+      if (path === "a") return "Property A";
+      return path;
+    },
+    formatter(path, value) {
+      if (path === "j") return Format.number(value);
+    },
+  },
+};
diff --git a/packages/data/stories/useFilteredList/FilteredList.mdx b/packages/data/stories/useFilteredList/FilteredList.mdx
new file mode 100644
index 0000000..d54294d
--- /dev/null
+++ b/packages/data/stories/useFilteredList/FilteredList.mdx
@@ -0,0 +1,80 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { useFilteredList } from "../../src";
+import * as FilteredListStories from "./FilteredList.stories";
+
+<Meta of={FilteredListStories} />
+
+<Title>useFilteredList</Title>
+
+<Anchor storyId="animations">
+  <div className="hidden-anchor">
+    <Subheading>useFilteredList</Subheading>
+  </div>
+</Anchor>
+
+<Description of={useFilteredList} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={FilteredListStories.FilteredList} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Usage</Subheading>
+</Anchor>
+
+```ts
+useFilteredList<P, Q>(
+    recordList: P[],
+    matcher: (item:P, query:Q) => boolean
+) => {
+    filteredList:P[],
+    query:Q,
+    searching: boolean,
+    onSearch: (query:Q)=>void,
+}
+```
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { useFilteredList } from "@react-fabric/data";
+import { Search } from "@react-fabric/form";
+
+export const Example = () => {
+  const { filteredList, isSearching, onSearch, search } = useFilteredList(
+    recordList,
+    (item, query) => matchString(item.name, query),
+  );
+
+  return (
+    <div>
+      <Search value={query} onSearch={onSearch} searching={isSearching} />
+      {filteredList.map((item) => (
+        <span key={item.id}>{item.name}</span>
+      ))}
+    </div>
+  );
+};
+```
diff --git a/packages/data/stories/useFilteredList/FilteredList.stories.tsx b/packages/data/stories/useFilteredList/FilteredList.stories.tsx
new file mode 100644
index 0000000..b14bd5f
--- /dev/null
+++ b/packages/data/stories/useFilteredList/FilteredList.stories.tsx
@@ -0,0 +1,99 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  Card,
+  Content,
+  Header,
+  Icon,
+  Section,
+  Title,
+  Viewport,
+} from "@react-fabric/core";
+import { Search } from "@react-fabric/form";
+import { Countries, matchString } from "@react-fabric/utilities";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useFilteredList, VirtualList } from "../../src";
+
+const meta: Meta<typeof useFilteredList> = {
+  title: "@data/useFilteredList",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: "data" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof useFilteredList>;
+
+export const FilteredList: Story = {
+  render: (args) => {
+    const { filteredList, isSearching, onSearch, query } = useFilteredList(
+      Countries.list,
+      (country, query) => matchString(country.name, query),
+    );
+
+    return (
+      <div className="min-h-[600px]">
+        <Viewport>
+          <Section>
+            <Header flex bg="base" className="gap-2 p-2">
+              <div className="container">
+                <Search
+                  autoFocus
+                  value={query}
+                  onSearch={onSearch}
+                  searching={isSearching}
+                />
+                <div className="py-2">
+                  Showing {filteredList.length}/{Countries.list.length} records
+                </div>
+              </div>
+            </Header>
+            <VirtualList items={filteredList} hideScroller fullWidth>
+              {({ data }) => (
+                <div className="p-2 container max-w-96">
+                  <Card>
+                    <Title className="flex items-center gap-2">
+                      <Icon
+                        className="flex-content"
+                        size="2rem"
+                        icon={`flag ${data.iso2}`}
+                      />
+                      <span className="flex-1 truncate">{data.name}</span>
+                      <span className="text-sm text-muted flex-content">
+                        {data.iso2}/{data.iso3}
+                      </span>
+                    </Title>
+                    <div>{data.capital}</div>
+                  </Card>
+                </div>
+              )}
+            </VirtualList>
+          </Section>
+        </Viewport>
+      </div>
+    );
+  },
+  args: {},
+};
diff --git a/packages/data/tsconfig.build.json b/packages/data/tsconfig.build.json
new file mode 100755
index 0000000..6d84bf3
--- /dev/null
+++ b/packages/data/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/types",
+    "rootDir": "src"
+  },
+  "exclude": ["./dist/**/*"],
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}
diff --git a/packages/data/tsconfig.json b/packages/data/tsconfig.json
new file mode 100755
index 0000000..78a3ff2
--- /dev/null
+++ b/packages/data/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": ["./dist"],
+  "include": ["./src", "./stories", "./tests"]
+}
diff --git a/packages/form/LICENSE b/packages/form/LICENSE
new file mode 100644
index 0000000..f54bcf5
--- /dev/null
+++ b/packages/form/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Sigma Frameworks, Adarsh Pastakia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/form/README.md b/packages/form/README.md
new file mode 100644
index 0000000..5d26ea4
--- /dev/null
+++ b/packages/form/README.md
@@ -0,0 +1,10 @@
+# React UI Framework - Form Module
+
+#### Install
+
+```bash
+# Using
+yarn add @react-fabric/form
+```
+
+#### Usage
diff --git a/packages/form/package.json b/packages/form/package.json
new file mode 100644
index 0000000..40d962c
--- /dev/null
+++ b/packages/form/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@react-fabric/form",
+  "version": "1.0.0",
+  "description": "RUF: Form package",
+  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
+  "license": "MIT",
+  "repository": "https://github.com/adarshpastakia/react-ui-framework/tree/main/packages/form",
+  "source": "src/index.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "directories": {
+    "src": "src",
+    "styles": "css",
+    "test": "tests"
+  },
+  "files": [
+    "css",
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "makelink": "yarn link",
+    "removelink": "yarn unlink",
+    "prebuild": "rm -rf ./dist",
+    "build:dts": "tsc -p ./tsconfig.build.json",
+    "build:rollup": "rollup -c ../../rollup.config.mjs",
+    "build": "npm-run-all -p build:rollup build:dts",
+    "watch:dts": "tsc -w -p ./tsconfig.build.json",
+    "watch:rollup": "rollup -w -c ../../rollup.config.mjs",
+    "watch": "npm-run-all -p watch:rollup watch:dts"
+  },
+  "dependencies": {
+    "@react-fabric/core": "^1.0.0",
+    "@react-fabric/utilities": "^1.0.0",
+    "@floating-ui/react": "^0.26.19",
+    "@hookform/resolvers": "^3.9.0",
+    "classnames": "^2.5.1",
+    "color": "^4.2.3",
+    "react-color": "^2.19.3",
+    "react-hook-form": "^7.52.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "yup": "^1.4.0"
+  },
+  "peerDependencies": {
+    "i18next": "^23.11.5",
+    "react": ">=18.0.0 <20.0.0",
+    "react-dom": ">=18.0.0 <20.0.0",
+    "react-i18next": "^14.1.2"
+  },
+  "devDependencies": {
+    "@types/react-color": "^3.0.12"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=9.6.4"
+  }
+}
diff --git a/packages/form/src/form/Controller.tsx b/packages/form/src/form/Controller.tsx
new file mode 100644
index 0000000..e4ef3a9
--- /dev/null
+++ b/packages/form/src/form/Controller.tsx
@@ -0,0 +1,107 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  type ReactElement,
+} from "react";
+import { Controller as HFController } from "react-hook-form";
+
+export interface ControllerProps {
+  /**
+   * field name
+   */
+  name?: string;
+  children:
+    | ReactElement
+    | ((props: {
+        name: string;
+        error?: string;
+        checked: boolean;
+        value: AnyObject;
+        invalid?: boolean;
+        readOnly?: boolean;
+        disabled?: boolean;
+        onBlur: () => void;
+        onChange: (value: AnyObject) => void;
+        inputRef?: React.Ref<HTMLInputElement>;
+      }) => ReactElement);
+}
+
+export const Controller = ({ name, children, ...rest }: ControllerProps) => {
+  if (!name) throw Error("Form Controller missing `name` prop");
+  return (
+    <HFController
+      name={name}
+      render={({
+        field: { ref, onChange, ...field },
+        fieldState: { error },
+        formState: { isSubmitting },
+      }) =>
+        isValidElement<AnyObject>(children)
+          ? cloneElement(Children.only(children), {
+              ...field,
+              ...rest,
+              ref: (el: AnyObject) => {
+                el && ref(el);
+                try {
+                  if (
+                    children.props.inputRef &&
+                    "current" in children.props.inputRef
+                  )
+                    children.props.inputRef.current = el;
+                  if (children.props.inputRef?.prototype)
+                    children.props.inputRef(el);
+                } catch (_) {
+                  //
+                }
+              },
+              checked: !!field.value,
+              readOnly: isSubmitting || children.props.readOnly,
+              invalid: !!error?.message || children.props.invalid,
+              error: error?.message ?? children.props.error,
+              onChange: (v: AnyObject) => {
+                onChange(v);
+                children.props.onChange?.(v);
+              },
+            })
+          : children({
+              ...field,
+              ...rest,
+              inputRef: (el: AnyObject) => {
+                el && ref(el);
+              },
+              readOnly: isSubmitting,
+              invalid: !!error?.message,
+              checked: !!field.value,
+              error: error?.message,
+              onChange: (v: AnyObject) => {
+                onChange(v);
+              },
+            })
+      }
+    />
+  );
+};
diff --git a/packages/form/src/form/Form.tsx b/packages/form/src/form/Form.tsx
new file mode 100644
index 0000000..ab2bed9
--- /dev/null
+++ b/packages/form/src/form/Form.tsx
@@ -0,0 +1,161 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useDebounce } from "@react-fabric/core";
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useTransition,
+  type PropsWithChildren,
+  type Ref,
+} from "react";
+import {
+  FormProvider,
+  useForm,
+  type DefaultValues,
+  type FormState,
+} from "react-hook-form";
+import { type yup } from "../utils";
+
+export interface FormRef<K extends KeyValue> {
+  state: FormState<K>;
+  reset: () => void;
+  clear: () => void;
+  submit: () => void;
+  validate: () => Promise<boolean>;
+  getValues: () => K;
+  setValue: (key: keyof K, value: AnyObject) => void;
+  setValues: (values: K) => void;
+}
+
+export interface FormProps<K extends KeyValue = KeyValue> {
+  formRef?: Ref<FormRef<K>>;
+  /**
+   * form data schema
+   */
+  schema?: yup.ObjectSchema<K>;
+  /**
+   * default data values
+   */
+  defaultValues?: K;
+  /**
+   * change callback
+   */
+  onChange?: (values: K) => void;
+  /**
+   * submit callback after successful validation
+   */
+  onSubmit?: (values: K) => void;
+}
+
+export const Form = <K extends KeyValue>({
+  formRef,
+  schema,
+  children,
+  defaultValues,
+  onSubmit = () => undefined,
+  onChange,
+  ...rest
+}: PropsWithChildren<FormProps<K>>) => {
+  const ref = useRef<HTMLFormElement>(null);
+  const form = useForm<K>({
+    shouldFocusError: true,
+    resolver: schema && (yupResolver(schema) as AnyObject),
+    defaultValues: defaultValues as DefaultValues<K>,
+  });
+
+  // @ts-expect-error ignore
+  window.formRef = form;
+
+  const [, startTransition] = useTransition();
+  const changeHandler = useDebounce(onChange, [onChange]);
+  useEffect(() => {
+    const subscription = form.watch((value) => {
+      startTransition(() => changeHandler?.(value as K));
+    });
+    return () => subscription.unsubscribe();
+  }, [form.watch, changeHandler]);
+
+  const handleReset = useCallback(
+    (reset: AnyObject = {}) => {
+      form.reset(reset);
+      form.clearErrors();
+      ref.current
+        ?.querySelector<HTMLElement>("[auto-focus], input, textarea")
+        ?.focus();
+    },
+    [defaultValues],
+  );
+
+  useImperativeHandle(
+    formRef,
+    () => ({
+      state: form.formState,
+      reset: () => handleReset(defaultValues),
+      clear: () => handleReset(),
+      submit: () => form.handleSubmit(onSubmit),
+      validate: async () => await form.trigger(),
+      getValues: () => form.getValues(),
+      setValues: (v) => form.reset(v),
+      setValue: (k, v) =>
+        form.setValue(k as AnyObject, v, {
+          shouldDirty: false,
+          shouldTouch: false,
+        }),
+    }),
+    [onSubmit, form, form.formState, defaultValues],
+  );
+
+  const onInvalid = useCallback((_: AnyObject, e: AnyObject) => {
+    const el = e.target;
+    setTimeout(
+      () =>
+        el
+          .querySelector(
+            "input[aria-invalid='true'],textarea[aria-invalid='true']",
+          )
+          ?.focus(),
+      10,
+    );
+  }, []);
+
+  return (
+    <FormProvider {...form}>
+      <form
+        ref={ref}
+        onReset={() => handleReset(defaultValues)}
+        onSubmit={form.handleSubmit(onSubmit, onInvalid) as AnyObject}
+        data-loading={form.formState.isSubmitting}
+        className="contents"
+        autoComplete="off"
+        {...rest}
+      >
+        {children}
+        <input type="submit" className="absolute invisible" />
+      </form>
+    </FormProvider>
+  );
+};
diff --git a/packages/form/src/i18n/ar.json b/packages/form/src/i18n/ar.json
new file mode 100755
index 0000000..a1c4891
--- /dev/null
+++ b/packages/form/src/i18n/ar.json
@@ -0,0 +1,23 @@
+{
+  "addArray": "اضافة عنصر",
+  "password": {
+    "show": "عرض كلمة المرور",
+    "hide": "اخفاء كلمة المرور"
+  },
+  "select": {
+    "emptyList": "لا توجد خيارات متاحة",
+    "notFound": "لم يتم العثور على خيارات ل ",
+    "createOption": "إنشاء خيار جديد ل "
+  },
+  "yup": {
+    "arrayMax": "{{label}} حدد ما يصل {{max}} غرض",
+    "arrayMin": "{{label}} اختر على الأقل {{min}} غرض",
+    "invalid": "{{label}} نوع بيانات غير صالح",
+    "invalidType": "{{label}} غير صالح",
+    "numberMax": "{{label}} الحد الأقصى {{max}}",
+    "numberMin": "{{label}} الحد الأدنى {{min}}",
+    "required": "{{label}} مطلوب",
+    "stringMax": "{{label}} أقصى {{max}} الحروف مسموحة",
+    "stringMin": "{{label}} يتطلب الحد الأدنى {{min}} الشخصيات"
+  }
+}
diff --git a/packages/form/src/i18n/en.json b/packages/form/src/i18n/en.json
new file mode 100755
index 0000000..937d877
--- /dev/null
+++ b/packages/form/src/i18n/en.json
@@ -0,0 +1,23 @@
+{
+  "addArray": "Add Item",
+  "password": {
+    "show": "Show password",
+    "hide": "Hide password"
+  },
+  "select": {
+    "emptyList": "No options available",
+    "notFound": "No options found for <0>{{query}}</0>",
+    "createOption": "Create new option for <0>{{query}}</0>"
+  },
+  "yup": {
+    "arrayMax": "{{label}} must contain upto {{max}} item",
+    "arrayMin": "{{label}} must contain atleast {{min}} item",
+    "invalid": "{{label}} invalid",
+    "invalidType": "{{label}} invalid datatype",
+    "numberMax": "{{label}} maxnimum {{max}}",
+    "numberMin": "{{label}} minimum {{min}}",
+    "required": "{{label}} required",
+    "stringMax": "{{label}} maximum {{max}} characters allowed",
+    "stringMin": "{{label}} requires minimum {{min}} characters"
+  }
+}
diff --git a/packages/form/src/i18n/index.ts b/packages/form/src/i18n/index.ts
new file mode 100755
index 0000000..8ccf6c2
--- /dev/null
+++ b/packages/form/src/i18n/index.ts
@@ -0,0 +1,28 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { addTranslationBundle } from "@react-fabric/core";
+import ar from "./ar.json";
+import en from "./en.json";
+
+addTranslationBundle("form", { en, ar });
diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
new file mode 100644
index 0000000..ff1a321
--- /dev/null
+++ b/packages/form/src/index.ts
@@ -0,0 +1,49 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import "./i18n";
+
+export { Controller } from "./form/Controller";
+export { Form, type FormRef } from "./form/Form";
+
+export { ArrayInput } from "./input/ArrayInput";
+export { Checkbox } from "./input/Checkbox";
+export { ColorInput } from "./input/ColorInput";
+export { ColorPicker } from "./input/ColorPicker";
+export { Field } from "./input/Field";
+export { FileInput } from "./input/File";
+export { Input } from "./input/Input";
+export { Number } from "./input/Number";
+export { Password } from "./input/Password";
+export { Radio } from "./input/Radio";
+export { RadioGroup } from "./input/RadioGroup";
+export { Range } from "./input/Range";
+export { Search } from "./input/Search";
+export { Slider } from "./input/Slider";
+export { Switch } from "./input/Switch";
+export { Textarea } from "./input/Textarea";
+export { DualList } from "./select/DualList";
+export { List } from "./select/List";
+export { Select } from "./select/Select";
+
+export { yup } from "./utils";
diff --git a/packages/form/src/input/ArrayInput.module.css b/packages/form/src/input/ArrayInput.module.css
new file mode 100644
index 0000000..9905c53
--- /dev/null
+++ b/packages/form/src/input/ArrayInput.module.css
@@ -0,0 +1,40 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer var {
+  .arrayInput {
+    & .fieldWrapper {
+      flex: 1 1 0%;
+    }
+
+    & .addButton :global(.buttonInner) {
+      color: theme(colors.tint.600);
+      outline: 1px dashed theme(colors.tint.600);
+
+      &[data-invalid="true"] {
+        color: theme(colors.danger.600);
+        outline: 1px dashed theme(colors.danger.600);
+      }
+    }
+  }
+}
diff --git a/packages/form/src/input/ArrayInput.tsx b/packages/form/src/input/ArrayInput.tsx
new file mode 100644
index 0000000..42b765c
--- /dev/null
+++ b/packages/form/src/input/ArrayInput.tsx
@@ -0,0 +1,230 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Button, CoreIcons, Tooltip } from "@react-fabric/core";
+import { isString } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Children,
+  cloneElement,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { FieldWrapper } from "../internal/FieldWrapper";
+import classes from "./ArrayInput.module.css";
+
+export interface ArrayInputProps {
+  /**
+   * input label
+   */
+  label?: string;
+  /**
+   * append to label end
+   */
+  appendLabel?: JSX.Element | string | number | boolean;
+  /**
+   * info label at bottom
+   */
+  info?: string;
+  /**
+   * required
+   */
+  required?: boolean;
+  /**
+   * disabled input
+   */
+  disabled?: boolean;
+  /**
+   * read-only input
+   */
+  readOnly?: boolean;
+
+  /**
+   * field name
+   */
+  name: string;
+  /**
+   * minimum required length
+   */
+  minItems?: number;
+  /**
+   * field name to focus on add
+   */
+  focusName?: string;
+  children:
+    | React.ReactNode
+    | ((props: { index: number; name: string }) => ReactNode);
+  /**
+   * add item button label
+   */
+  addLabel?: string;
+  /**
+   * fixed length list
+   */
+  fixedList?: boolean;
+  arrayRef?: RefObject<{
+    addItem: (item: AnyObject) => void;
+    removeItem: (idx: number) => void;
+  }>;
+  /**
+   * Add item
+   */
+  onAdd?: () => AnyObject;
+}
+
+export const ArrayInput = ({
+  name,
+  children,
+  addLabel,
+  fixedList,
+  focusName = "",
+  onAdd,
+  arrayRef,
+  disabled = false,
+  readOnly = false,
+  minItems = 0,
+  ...rest
+}: ArrayInputProps) => {
+  const { t } = useTranslation("form");
+  const form = useFormContext();
+
+  if (!form?.control)
+    throw new Error("ArrayInput must be contained within a Form element");
+
+  const { fields, append, remove } = useFieldArray({
+    name,
+    control: form.control,
+  });
+
+  const error = useMemo<AnyObject>(
+    () =>
+      form.formState.errors[name]?.message ??
+      form.formState.errors[name]?.root?.message,
+    [form.formState.errors],
+  );
+
+  const handleAdd = useCallback(
+    (item: AnyObject) => {
+      append(item);
+      setTimeout(() => {
+        form.setFocus(
+          `${name}.${fields.length}${focusName ? "." + focusName : ""}`,
+        );
+      }, 100);
+    },
+    [name, fields, focusName],
+  );
+
+  useImperativeHandle(arrayRef, () => ({
+    addItem: handleAdd,
+    removeItem: remove,
+  }));
+
+  return (
+    <div className={classes.arrayInput}>
+      <FieldWrapper {...rest}>
+        {fields.map((item, index) => (
+          <div
+            key={item.id}
+            className="flex items-center flex-nowrap gap-2 mb-1"
+          >
+            {typeof children === "function"
+              ? children({ index, name: `${name}.${index}` })
+              : Children.map(children, (child: AnyObject) =>
+                  cloneElement(
+                    child,
+                    Object.assign(
+                      {
+                        disabled,
+                        readOnly,
+                        name: `${name}.${index}${
+                          child.props.name
+                            ? "." + (child.props.name as string)
+                            : ""
+                        }`,
+                      },
+                      index > 0 && {
+                        label: undefined,
+                        required: undefined,
+                        appendLabel: undefined,
+                      },
+                    ),
+                  ),
+                )}
+            {!fixedList && (
+              <Button
+                aria-label="Remove item"
+                icon={CoreIcons.remove}
+                color="danger"
+                variant="link"
+                className="self-end"
+                disabled={disabled || readOnly || fields.length <= minItems}
+                onClick={() => remove(index)}
+              />
+            )}
+          </div>
+        ))}
+      </FieldWrapper>
+      {!fixedList && onAdd && (
+        <div className="flex justify-end">
+          <Tooltip
+            color="danger"
+            content={
+              isString(error)
+                ? `${error}`
+                : (t(
+                    error?.key,
+                    error?.values
+                      ? {
+                          ...error?.values,
+                          label: t(
+                            error.values?.label ?? "form:badkey",
+                            error.values?.path,
+                          ),
+                        }
+                      : {},
+                  ) as string)
+            }
+          >
+            <Button
+              aria-label="Add item"
+              icon={CoreIcons.insert}
+              onClick={() => handleAdd(onAdd())}
+              variant="link"
+              data-invalid={!!error}
+              disabled={!!disabled || readOnly}
+              className={classNames(classes.addButton, "me-10")}
+            >
+              {addLabel ?? t("addArray")}
+            </Button>
+          </Tooltip>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/form/src/input/Checkbox.tsx b/packages/form/src/input/Checkbox.tsx
new file mode 100644
index 0000000..38a5773
--- /dev/null
+++ b/packages/form/src/input/Checkbox.tsx
@@ -0,0 +1,165 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, Icon } from "@react-fabric/core";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+  type ChangeEvent,
+} from "react";
+import { ErrorIcon } from "../internal/ErrorIcon";
+
+export interface CheckboxProps extends RefProp<HTMLInputElement> {
+  /**
+   * checkbox label
+   */
+  label?: JSX.Element | string;
+  /**
+   * checked
+   */
+  checked?: boolean;
+  /**
+   * value
+   */
+  value?: string | number;
+  /**
+   * on checked change
+   */
+  onChange?: (checked: boolean | string | number) => void;
+
+  /**
+   * disabled input
+   */
+  disabled?: boolean;
+  /**
+   * invalid value input
+   */
+  invalid?: boolean;
+  /**
+   * error message
+   */
+  error?: string;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+
+  /**
+   * cutom checkbox icon
+   */
+  icon?: string;
+  /**
+   * cutom checkbox checked icon
+   */
+  iconChecked?: string;
+
+  name?: string;
+}
+
+export const Checkbox = ({
+  ref,
+  label,
+  value,
+  name,
+  checked,
+  invalid,
+  disabled,
+  error,
+  width,
+  icon,
+  iconChecked,
+  onChange,
+  ...rest
+}: CheckboxProps) => {
+  const [actualValue, setActualValue] = useState(false);
+  const deferred = useDeferredValue(!!checked);
+
+  const iconOn = useMemo(
+    () => iconChecked ?? icon ?? CoreIcons.checkboxOn,
+    [icon, iconChecked],
+  );
+  const iconOff = useMemo(() => icon ?? CoreIcons.checkboxOff, [icon]);
+
+  useEffect(() => {
+    setActualValue(deferred);
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      setActualValue(e?.target.checked ?? false);
+      onChange?.(e?.target.checked ?? false);
+    },
+    [onChange, value],
+  );
+
+  return (
+    <label
+      className={classNames(
+        invalid ? "ring-danger-500" : "ring-primary-500",
+        disabled
+          ? "opacity-50 cursor-not-allowed"
+          : " opacity-85 hover:opacity-100 cursor-pointer",
+        "inline-flex gap-1 py-1 items-center relative rounded ring-offset-2 has-[:focus-visible]:ring-1",
+      )}
+      style={{ width }}
+    >
+      <input
+        className={classNames(
+          "appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0",
+        )}
+        aria-invalid={invalid}
+        aria-disabled={disabled}
+        disabled={disabled}
+        aria-errormessage={error}
+        type="checkbox"
+        ref={ref}
+        size={1}
+        tabIndex={0}
+        name={name}
+        autoComplete="off"
+        checked={actualValue}
+        onChange={handleChange}
+        {...rest}
+      />
+      <Icon
+        className={classNames(
+          "p-0.5",
+          actualValue && icon && !iconChecked && "bg-primary-500 text-white",
+        )}
+        size="1.25em"
+        color={invalid ? "danger" : "primary"}
+        icon={actualValue ? iconOn : iconOff}
+      />
+      <ErrorIcon invalid={invalid} error={error} />
+      {label && (
+        <span className="flex-initial leading-none truncate">{label}</span>
+      )}
+    </label>
+  );
+};
diff --git a/packages/form/src/input/ColorInput.tsx b/packages/form/src/input/ColorInput.tsx
new file mode 100644
index 0000000..b685195
--- /dev/null
+++ b/packages/form/src/input/ColorInput.tsx
@@ -0,0 +1,148 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, Dropdown, Icon } from "@react-fabric/core";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { isString } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useState,
+} from "react";
+import { type InputProps } from "../types";
+import { ColorPicker, type ColorProps } from "./ColorPicker";
+
+export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+  /**
+   * show eydrop picker
+   */
+  showPicker?: boolean;
+}
+
+export const ColorInput = ({
+  ref,
+  required,
+  disabled,
+  allowClear,
+  invalid,
+  error,
+  value,
+  showPicker,
+  defaultColor = "",
+  decorateEnd,
+  decorateStart,
+  onChange,
+  ...rest
+}: ColorInputProps) => {
+  const [actualValue, setActualValue] = useState("");
+  const deferred = useDeferredValue(value ?? defaultColor);
+
+  useEffect(() => {
+    setActualValue(deferred ?? "");
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: string) => {
+      setActualValue(e ?? defaultColor);
+      onChange != null && startTransition(() => onChange(e));
+    },
+    [onChange],
+  );
+
+  return (
+    <div className="flex-content min-h-[1.5em] min-w-[3.5em] self-stretch flex items-center outline outline-tint-200 rounded">
+      {decorateStart && (
+        <div
+          className={classNames(
+            "text-muted leading-none flex-content",
+            isString(decorateStart) && "px-2",
+          )}
+        >
+          {decorateStart}
+        </div>
+      )}
+      <Dropdown showArrow>
+        <div data-ref="button" className="flex-1 flex items-center">
+          <div
+            role="none"
+            className="h-[1.5em] min-w-[1.5em] flex-1 flex items-center justify-center self-stretch cursor-pointer m-[0.25em] rounded outline outline-tint-100"
+            style={{
+              backgroundColor: actualValue,
+              pointerEvents: disabled ? "none" : undefined,
+            }}
+            onClick={(e) =>
+              (e.currentTarget.nextElementSibling as HTMLElement)?.focus()
+            }
+          >
+            {!actualValue && (
+              <Icon
+                size="md"
+                className="text-muted"
+                icon={CoreIcons.colorSwatch}
+              />
+            )}
+          </div>
+        </div>
+        <ColorPicker
+          {...rest}
+          onChange={handleChange}
+          defaultColor={defaultColor}
+          value={actualValue}
+        />
+      </Dropdown>
+      {showPicker && (
+        <Icon
+          icon={CoreIcons.colorPicker}
+          onClick={() =>
+            (window as AnyObject).EyeDropper &&
+            new (window as AnyObject).EyeDropper()
+              .open()
+              .then((resp: AnyObject) => handleChange(resp.sRGBHex))
+          }
+        />
+      )}
+      {decorateEnd && (
+        <div
+          className={classNames(
+            "text-muted leading-none flex-content",
+            isString(decorateEnd) && "px-2",
+          )}
+        >
+          {decorateEnd}
+        </div>
+      )}
+      {allowClear && actualValue !== defaultColor && (
+        <Icon
+          icon={CoreIcons.close}
+          onClick={() => handleChange()}
+          className={classNames(
+            "text-tint-500 hover:text-tint-700 p-[0.25em] flex-content",
+          )}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/packages/form/src/input/ColorPicker.module.css b/packages/form/src/input/ColorPicker.module.css
new file mode 100644
index 0000000..286a014
--- /dev/null
+++ b/packages/form/src/input/ColorPicker.module.css
@@ -0,0 +1,51 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .colorPicker {
+    --color-shadow: theme(borderColor.base);
+
+    & input {
+      @apply bg-base text-base !border !border-solid !rounded-sm !border-base focus:!border-primary !shadow-none;
+
+      padding: 0 4px !important;
+      line-height: 2;
+    }
+
+    & label {
+      @apply !text-base;
+    }
+
+    & :global(.flexbox-fix) {
+      @apply !border-t-muted justify-center;
+
+      & > div > div {
+        @apply text-center;
+      }
+
+      & span > div {
+        box-shadow: 0 0 1px 1px theme(borderColor.base) inset !important;
+      }
+    }
+  }
+}
diff --git a/packages/form/src/input/ColorPicker.tsx b/packages/form/src/input/ColorPicker.tsx
new file mode 100644
index 0000000..0172648
--- /dev/null
+++ b/packages/form/src/input/ColorPicker.tsx
@@ -0,0 +1,210 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import Color from "color";
+import {
+  memo,
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useState,
+  type FC,
+} from "react";
+import { SketchPicker } from "react-color";
+import classes from "./ColorPicker.module.css";
+
+export interface ColorProps {
+  /**
+   * color swatches
+   */
+  swatches?: string[];
+  /**
+   * default color
+   */
+  defaultColor?: string;
+  /**
+   * hide alpha value
+   */
+  hideAlpha?: boolean;
+  /**
+   * color value
+   */
+  value?: string;
+  /**
+   * change handler
+   */
+  onChange?: (color?: string) => void;
+}
+
+const DEFAULT_SWATCHES = [
+  Color("#d7323a").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#ff781c").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#f7b731").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#88ab1b").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#22aa85").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#399bec").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#4862c8").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#aa66cf").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#f43f7b").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#a37f4f").mix(Color("#171a1c"), 0.5).hex(),
+
+  "#d7323a",
+  "#ff781c",
+  "#f7b731",
+  "#88ab1b",
+  "#22aa85",
+  "#399bec",
+  "#4862c8",
+  "#aa66cf",
+  "#f43f7b",
+  "#a37f4f",
+
+  Color("#d7323a").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#ff781c").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#f7b731").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#88ab1b").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#22aa85").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#399bec").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#4862c8").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#aa66cf").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#f43f7b").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#a37f4f").mix(Color("#f1f3f4"), 0.5).hex(),
+
+  "#171a1c",
+  "#2d3439",
+  "#444e55",
+  "#5b6971",
+  "#71838e",
+  "#86959e",
+  "#9ca8b0",
+  "#b8c1c6",
+  "#d5dadd",
+  "#f1f3f4",
+];
+
+// eslint-disable-next-line react/display-name
+export const ColorPicker: FC<ColorProps> = memo(
+  ({
+    value,
+    onChange,
+    hideAlpha,
+    defaultColor = "#fff",
+    swatches = DEFAULT_SWATCHES,
+  }: ColorProps) => {
+    const [actualValue, setActualValue] = useState("");
+    const deferred = useDeferredValue(value ?? defaultColor);
+
+    useEffect(() => {
+      setActualValue(deferred ?? "");
+    }, [deferred]);
+
+    const handleChange = useCallback(
+      (e: string) => {
+        setActualValue(e ?? defaultColor);
+        onChange != null && startTransition(() => onChange(e));
+      },
+      [onChange],
+    );
+
+    return (
+      <SketchPicker
+        width="16rem"
+        className={classes.colorPicker}
+        styles={
+          {
+            default: {
+              hue: {
+                borderRadius: "99px",
+                boxShadow: "0 0 1px 1px var(--color-shadow)",
+              },
+              alpha: {
+                height: "1rem",
+                borderRadius: "99px",
+                backgroundColor: "var(--fabric-bg)",
+                boxShadow: "0 0 1px 1px var(--color-shadow)",
+              },
+              color: {
+                boxShadow: "0 0 1px 1px var(--color-shadow)",
+              },
+              saturation: {
+                boxShadow: "0 0 1px 1px var(--color-shadow)",
+              },
+              activeColor: {
+                boxShadow: "0 0 1px 1px var(--color-shadow)",
+              },
+              picker: {
+                backgroundColor: "var(--fabric-bg)",
+                boxShadow:
+                  "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
+              },
+              Alpha: {
+                alpha: {
+                  paddingRight: "calc(1rem - 2px)",
+                },
+                slider: {
+                  width: "calc(1rem - 2px)",
+                  borderRadius: "99px",
+                  height: "calc(1rem - 2px)",
+                  transform: "none",
+                },
+              },
+              Hue: {
+                hue: {
+                  paddingRight: "calc(1rem - 2px)",
+                },
+                slider: {
+                  width: "calc(1rem - 2px)",
+                  borderRadius: "99px",
+                  height: "calc(1rem - 2px)",
+                  transform: "none",
+                },
+              },
+              Saturation: {
+                circle: {
+                  width: "0.5rem",
+                  borderRadius: "99px",
+                  height: "0.5rem",
+                  transform: "translate(-0.25rem, -0.25rem)",
+                },
+              },
+              checkboard: {
+                white: "transparent",
+                black: "red",
+              },
+            },
+          } as AnyObject
+        }
+        color={actualValue}
+        presetColors={swatches}
+        disableAlpha={hideAlpha}
+        onChange={({ rgb: { a = 1, ...rgb } }) =>
+          setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
+        }
+        onChangeComplete={({ rgb: { a = 1, ...rgb } }) =>
+          handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
+        }
+      />
+    );
+  },
+);
diff --git a/packages/form/src/input/Field.tsx b/packages/form/src/input/Field.tsx
new file mode 100644
index 0000000..d1507d8
--- /dev/null
+++ b/packages/form/src/input/Field.tsx
@@ -0,0 +1,93 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  type ChildrenProp,
+  type CssProp,
+} from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
+import { Children, cloneElement } from "react";
+import classes from "../internal/Field.module.css";
+import { FieldWrapper } from "../internal/FieldWrapper";
+
+export interface FieldProps extends ChildrenProp, CssProp {
+  /**
+   * input label
+   */
+  label?: string;
+  /**
+   * append to label end
+   */
+  appendLabel?: JSX.Element | string | number | boolean;
+  /**
+   * info label at bottom
+   */
+  info?: string;
+
+  /**
+   * required
+   */
+  required?: boolean;
+  /**
+   * hide outline
+   */
+  noOutline?: boolean;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+  /**
+   * inline label and input
+   */
+  inline?: boolean;
+  /**
+   * label width for inline
+   */
+  labelWidth?: string;
+  /**
+   * dont apply bg
+   */
+  noBg?: boolean;
+}
+
+export const Field = ({ children, noOutline, noBg, ...rest }: FieldProps) => {
+  return (
+    <FieldWrapper {...rest}>
+      <div
+        className={classNames(
+          classes.fieldGroup,
+          !noOutline && "outline",
+          !noBg && "base-bg",
+          "flex flex-nowrap flex-1 rounded",
+        )}
+      >
+        {Children.map(children, (child) =>
+          cloneElement(child as AnyObject, {
+            "data-inner": true,
+          }),
+        )}
+      </div>
+    </FieldWrapper>
+  );
+};
diff --git a/packages/form/src/input/File.module.css b/packages/form/src/input/File.module.css
new file mode 100644
index 0000000..fab69f3
--- /dev/null
+++ b/packages/form/src/input/File.module.css
@@ -0,0 +1,42 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .fileInput {
+    &::-webkit-file-upload-button {
+      @apply bg-primary-500 opacity-80 hover:opacity-90 text-white rounded border-none py-0 cursor-pointer;
+    }
+
+    &[aria-invalid="true"]::-webkit-file-upload-button {
+      @apply bg-danger-500;
+    }
+
+    &:disabled::-webkit-file-upload-button {
+      @apply bg-muted pointer-events-none;
+    }
+
+    &[readOnly] {
+      @apply pointer-events-none;
+    }
+  }
+}
diff --git a/packages/form/src/input/File.tsx b/packages/form/src/input/File.tsx
new file mode 100644
index 0000000..3ac8f00
--- /dev/null
+++ b/packages/form/src/input/File.tsx
@@ -0,0 +1,169 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, Icon } from "@react-fabric/core";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { Format, isEmpty } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+} from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type InputProps } from "../types";
+import { handleEnter } from "../utils";
+import classes from "./File.module.css";
+
+export interface FileInputProps
+  extends InputProps<AnyObject>,
+    RefProp<HTMLInputElement> {
+  /**
+   * allow selecting mutiple files
+   */
+  multiple?: boolean;
+}
+
+export const FileInput = ({
+  ref,
+  value,
+  invalid,
+  readOnly,
+  disabled,
+  required,
+  placeholder,
+  autoFocus,
+  error,
+  name,
+  multiple,
+  onChange,
+  onEnterPressed,
+  ...rest
+}: FileInputProps) => {
+  const listRef = useRef<AnyObject[]>([]);
+  const [actualValue, setActualValue] = useState<AnyObject>();
+  const deferred = useDeferredValue(value);
+
+  const handleEnterPressed = useMemo(
+    () => handleEnter(onEnterPressed),
+    [onEnterPressed],
+  );
+
+  useEffect(() => {
+    setActualValue(deferred);
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      if (multiple) {
+        if (e?.target.files) {
+          listRef.current.push(...Array.from(e.target.files as AnyObject));
+          e.target.value = "";
+          onChange?.(listRef.current);
+          setActualValue(listRef.current.slice());
+        } else {
+          listRef.current = [];
+          setActualValue(listRef.current);
+          onChange?.(listRef.current);
+        }
+      } else {
+        setActualValue(e?.target.files?.item(0));
+        onChange?.(e?.target.files?.item(0) ?? undefined);
+      }
+    },
+    [onChange, multiple],
+  );
+
+  const removeFile = useCallback(
+    (idx: number) => {
+      listRef.current.splice(idx, 1);
+      setActualValue(listRef.current);
+      onChange?.(listRef.current);
+    },
+    [onChange],
+  );
+
+  return (
+    <InputWrapper
+      showClear={!isEmpty(actualValue)}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      error={error}
+      listing={
+        multiple &&
+        actualValue?.map?.((file: AnyObject, idx: number) => (
+          <div
+            key={idx}
+            className="flex gap-1 items-center text-sm text-dimmed py-1 px-2"
+          >
+            <div className="flex-1 truncate">{file.name}</div>
+            <div>{file.type}</div>
+            <div className="flex-content text-end w-24">
+              {Format.bytes(file.size)}
+            </div>
+            <Icon
+              className="cursor-pointer opacity-30 hover:opacity-80"
+              icon={CoreIcons.close}
+              onClick={() => {
+                removeFile(idx);
+              }}
+            />
+          </div>
+        ))
+      }
+      {...rest}
+    >
+      <input
+        className={classNames(
+          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+          classes.fileInput,
+          multiple && actualValue?.length && "text-[var(--fabric-bg)]",
+        )}
+        aria-invalid={invalid}
+        aria-disabled={disabled}
+        aria-readonly={readOnly}
+        aria-errormessage={error}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        size={1}
+        type="file"
+        multiple={multiple}
+        data-testid={name}
+        name={name}
+        ref={ref}
+        autoComplete="off"
+        {...{ autoFocus }}
+        onChange={handleChange}
+        onKeyDown={handleEnterPressed}
+      />
+    </InputWrapper>
+  );
+};
diff --git a/packages/form/src/input/Input.tsx b/packages/form/src/input/Input.tsx
new file mode 100644
index 0000000..656fc34
--- /dev/null
+++ b/packages/form/src/input/Input.tsx
@@ -0,0 +1,117 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useDebounce } from "@react-fabric/core";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+  type ChangeEvent,
+} from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type InputProps } from "../types";
+import { handleEnter } from "../utils";
+
+export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
+  /**
+   * input type
+   */
+  type?: "email" | "file" | "search" | "tel" | "text" | "url";
+}
+
+export const Input = ({
+  ref,
+  name,
+  value,
+  invalid,
+  readOnly,
+  disabled,
+  required,
+  placeholder,
+  autoFocus,
+  error,
+  type = "text",
+  onChange,
+  onEnterPressed,
+  ...rest
+}: TextInputProps) => {
+  const [actualValue, setActualValue] = useState("");
+  const deferred = useDeferredValue(value);
+
+  const fireChange = useDebounce((value) => onChange?.(value), [onChange]);
+
+  const handleEnterPressed = useMemo(
+    () => handleEnter(onEnterPressed),
+    [onEnterPressed],
+  );
+
+  useEffect(() => {
+    setActualValue(deferred ?? "");
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      const value = e?.target.value;
+      setActualValue(value ?? "");
+      fireChange(value ?? undefined);
+    },
+    [fireChange],
+  );
+
+  return (
+    <InputWrapper
+      showClear={!!actualValue}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      error={error}
+      {...rest}
+    >
+      <input
+        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        aria-invalid={invalid}
+        aria-disabled={disabled}
+        aria-readonly={readOnly}
+        aria-errormessage={error}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        data-testid={name}
+        name={name}
+        size={1}
+        type={type}
+        ref={ref}
+        autoComplete="off"
+        {...{ autoFocus }}
+        value={actualValue}
+        onChange={handleChange}
+        onKeyDown={handleEnterPressed}
+      />
+    </InputWrapper>
+  );
+};
diff --git a/packages/form/src/input/Number.tsx b/packages/form/src/input/Number.tsx
new file mode 100644
index 0000000..02622bb
--- /dev/null
+++ b/packages/form/src/input/Number.tsx
@@ -0,0 +1,129 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useDebounce } from "@react-fabric/core";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+  type ChangeEvent,
+} from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type InputProps } from "../types";
+import { handleEnter } from "../utils";
+
+export interface NumberProps
+  extends InputProps<number>,
+    RefProp<HTMLInputElement> {
+  /**
+   * minimum value
+   */
+  min?: number;
+  /**
+   * maximum value
+   */
+  max?: number;
+  /**
+   * increment step
+   */
+  step?: number;
+}
+
+export const Number = ({
+  ref,
+  value,
+  invalid,
+  readOnly,
+  disabled,
+  required,
+  placeholder,
+  autoFocus,
+  name,
+  min,
+  max,
+  step,
+  onChange,
+  onEnterPressed,
+  ...rest
+}: NumberProps) => {
+  const [actualValue, setActualValue] = useState<"" | number>("");
+  const deferred = useDeferredValue(value);
+
+  const handleEnterPressed = useMemo(
+    () => handleEnter(onEnterPressed),
+    [onEnterPressed],
+  );
+
+  const fireChange = useDebounce((number) => onChange?.(number), [onChange]);
+
+  useEffect(() => {
+    setActualValue(deferred ?? "");
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      const number = e?.target.valueAsNumber;
+      setActualValue(number ?? "");
+      fireChange?.(number ?? undefined);
+    },
+    [fireChange],
+  );
+
+  return (
+    <InputWrapper
+      showClear={!!actualValue}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      {...rest}
+    >
+      <input
+        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        aria-invalid={invalid}
+        aria-disabled={disabled}
+        aria-readonly={readOnly}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        data-testid={name}
+        name={name}
+        type="number"
+        size={1}
+        min={min}
+        max={max}
+        step={step}
+        ref={ref}
+        autoComplete="off"
+        {...{ autoFocus }}
+        value={actualValue}
+        onChange={handleChange}
+        onKeyDown={handleEnterPressed}
+      />
+    </InputWrapper>
+  );
+};
diff --git a/packages/form/src/input/Password.tsx b/packages/form/src/input/Password.tsx
new file mode 100644
index 0000000..d327e98
--- /dev/null
+++ b/packages/form/src/input/Password.tsx
@@ -0,0 +1,152 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Button, CoreIcons, Tooltip, useDebounce } from "@react-fabric/core";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+  type ChangeEvent,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type InputProps } from "../types";
+import { handleEnter } from "../utils";
+
+export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
+  /**
+   * show password toggle
+   */
+  showToggle?: boolean;
+  /**
+   * password strength meter (0-1)
+   */
+  strength?: number;
+}
+
+export const Password = ({
+  ref,
+  value,
+  name,
+  strength,
+  invalid,
+  readOnly,
+  disabled,
+  required,
+  placeholder,
+  autoFocus,
+  showToggle,
+  onChange,
+  onEnterPressed,
+  ...rest
+}: PasswordProps) => {
+  const { t } = useTranslation("form");
+  const [show, setShow] = useState(false);
+
+  const [actualValue, setActualValue] = useState("");
+  const deferred = useDeferredValue(value);
+
+  const fireChange = useDebounce((value) => onChange?.(value), [onChange]);
+
+  const handleEnterPressed = useMemo(
+    () => handleEnter(onEnterPressed),
+    [onEnterPressed],
+  );
+
+  useEffect(() => {
+    setActualValue(deferred ?? "");
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      const value = e?.target.value;
+      setActualValue(value ?? "");
+      fireChange(value ?? undefined);
+    },
+    [fireChange],
+  );
+
+  return (
+    <InputWrapper
+      showClear={!!actualValue}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      {...rest}
+      decorateEnd={
+        showToggle && (
+          <Tooltip
+            color="warning"
+            content={t(show ? "password.hide" : "password.show")}
+          >
+            <Button
+              tabIndex={-1}
+              color="warning"
+              variant="link"
+              aria-label={t(show ? "password.hide" : "password.show")}
+              icon={show ? CoreIcons.eyeOff : CoreIcons.eye}
+              onClick={() => setShow(!show)}
+            />
+          </Tooltip>
+        )
+      }
+    >
+      <input
+        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        aria-invalid={invalid}
+        aria-disabled={disabled}
+        aria-readonly={readOnly}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        data-testid={name}
+        name={name}
+        size={1}
+        type={show ? "text" : "password"}
+        ref={ref}
+        autoComplete="off"
+        {...{ autoFocus }}
+        value={actualValue}
+        onChange={handleChange}
+        onKeyDown={handleEnterPressed}
+      />
+      {!!strength && (
+        <div
+          className={classNames(
+            "absolute bottom-px h-[4px] inset-x-0 after:block after:h-full after:bg-dimmed",
+            "ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-danger-500 via-marigold-500 to-jade-500",
+          )}
+          style={{
+            paddingInlineStart: `${strength > 1 ? 100 : strength * 100}%`,
+          }}
+        />
+      )}
+    </InputWrapper>
+  );
+};
diff --git a/packages/form/src/input/Radio.tsx b/packages/form/src/input/Radio.tsx
new file mode 100644
index 0000000..b0ae845
--- /dev/null
+++ b/packages/form/src/input/Radio.tsx
@@ -0,0 +1,146 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, Icon } from "@react-fabric/core";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
+import { useCallback, useMemo, type ChangeEvent } from "react";
+
+export interface RadioProps extends RefProp<HTMLInputElement> {
+  name?: string;
+  /**
+   * radio label
+   */
+  label?: JSX.Element | string;
+  /**
+   * value
+   */
+  value: string | number;
+  /**
+   * on checked change
+   */
+  onChange?: ((value: string) => void) | ((value: number) => void);
+
+  /**
+   * disabled input
+   */
+  disabled?: boolean;
+  /**
+   * invalid value input
+   */
+  invalid?: boolean;
+  /**
+   * error message
+   */
+  error?: string;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+
+  /**
+   * cutom checkbox icon
+   */
+  icon?: string;
+  /**
+   * cutom checkbox checked icon
+   */
+  iconChecked?: string;
+}
+
+export const Radio = ({
+  ref,
+  name,
+  label,
+  value,
+  invalid,
+  disabled,
+  error,
+  width,
+  icon,
+  iconChecked,
+  onChange,
+  ...rest
+}: RadioProps) => {
+  const iconOn = useMemo(
+    () => iconChecked ?? icon ?? CoreIcons.radioOn,
+    [icon, iconChecked],
+  );
+  const iconOff = useMemo(() => icon ?? CoreIcons.radioOff, [icon]);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      // @ts-expect-error ignore
+      e?.target.checked && value && onChange?.(value);
+    },
+    [onChange, value],
+  );
+
+  return (
+    <label
+      className={classNames(
+        invalid ? "ring-danger-500" : "ring-primary-500",
+        disabled
+          ? "opacity-50 cursor-not-allowed"
+          : "hover:opacity-100 cursor-pointer",
+        "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-[:focus-visible]:ring-1",
+      )}
+      style={{ width }}
+    >
+      <input
+        className={classNames(
+          "appearance-none absolute peer opacity-0 inset-0 bg-transparent border-none outline-none ring-0",
+        )}
+        aria-disabled={disabled}
+        disabled={disabled}
+        type="radio"
+        ref={ref}
+        size={1}
+        name={name}
+        value={value}
+        autoComplete="off"
+        onChange={handleChange}
+        {...rest}
+      />
+      <Icon
+        className={classNames(
+          "p-0.5 hidden peer-checked:inline-block",
+          icon && !iconChecked && "bg-primary-500 text-white",
+        )}
+        color={invalid ? "danger" : "primary"}
+        size="1.25em"
+        icon={iconOn}
+      />
+      <Icon
+        className={classNames("p-0.5 peer-checked:hidden")}
+        color={invalid ? "danger" : "primary"}
+        size="1.25em"
+        icon={iconOff}
+      />
+      {label && (
+        <span className="flex-initial leading-none truncate">{label}</span>
+      )}
+    </label>
+  );
+};
diff --git a/packages/form/src/input/RadioGroup.tsx b/packages/form/src/input/RadioGroup.tsx
new file mode 100644
index 0000000..08fd744
--- /dev/null
+++ b/packages/form/src/input/RadioGroup.tsx
@@ -0,0 +1,75 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  type CssProp,
+  type ChildrenProp,
+} from "@react-fabric/core/dist/types/types";
+import { Children, cloneElement } from "react";
+import { FieldWrapper } from "../internal/FieldWrapper";
+import { type Radio } from "./Radio";
+
+export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
+  /**
+   * input label
+   */
+  label?: string;
+  /**
+   * append to label end
+   */
+  appendLabel?: JSX.Element | string | number | boolean;
+  /**
+   * field info
+   */
+  info?: string;
+  /**
+   * field name
+   */
+  name?: string;
+  /**
+   * vertical orientation
+   */
+  vertical?: boolean;
+  /**
+   * change handler
+   */
+  onChange?: (value: AnyObject) => void;
+}
+
+export const RadioGroup = ({
+  children,
+  name,
+  className,
+  onChange,
+  ...rest
+}: RadioGroupProps) => {
+  return (
+    <FieldWrapper {...rest}>
+      <div className={className}>
+        {Children.map(children, (child) =>
+          cloneElement(child as AnyObject, { name, onChange }),
+        )}
+      </div>
+    </FieldWrapper>
+  );
+};
diff --git a/packages/form/src/input/Range.tsx b/packages/form/src/input/Range.tsx
new file mode 100644
index 0000000..46533fd
--- /dev/null
+++ b/packages/form/src/input/Range.tsx
@@ -0,0 +1,280 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useDebounce } from "@react-fabric/core";
+import { Format } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Fragment,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+  type FC,
+} from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { useRanger } from "../ranger";
+import { type InputProps } from "../types";
+
+export interface RangeProps
+  extends Omit<
+    InputProps<[number, number]>,
+    "placeholder" | "allowClear" | "children"
+  > {
+  /**
+   * min value
+   */
+  min?: number;
+  /**
+   * max value
+   */
+  max?: number;
+  /**
+   * increment step
+   */
+  step?: number;
+  /**
+   * Range color
+   */
+  color?: string;
+  /**
+   * Range height (only vertical)
+   */
+  height?: number;
+  /**
+   * vertical orientation
+   */
+  vertical?: boolean;
+  /**
+   * display value tooltip
+   */
+  showValue?: boolean;
+  /**
+   * display min/max labels
+   */
+  showLabels?: boolean;
+  /**
+   * custom min label
+   */
+  minLabel?: string;
+  /**
+   * custom max label
+   */
+  maxLabel?: string;
+  /**
+   * step ranges
+   */
+  ranges?: number[];
+  /**
+   * format value
+   */
+  format?: string;
+  /**
+   * slide event handler
+   */
+  onSlide?: (val: number) => void;
+}
+
+/**
+ * Number Range input
+ */
+export const Range: FC<RangeProps> = ({
+  error,
+  name,
+  value,
+  step = 1,
+  min = 0,
+  max = 100,
+  height = 192,
+  color,
+  vertical,
+  showLabels,
+  showValue,
+  minLabel,
+  maxLabel,
+  ranges,
+  format,
+  autoFocus,
+  disabled,
+  readOnly,
+  onBlur,
+  onChange,
+  onEnterPressed,
+  onFocus,
+  onSlide,
+  invalid,
+  ...rest
+}: RangeProps) => {
+  const [actualValue, setActualValue] = useState<[number, number]>([0, 0]);
+  const [displayValue, setDisplayValue] = useState(false);
+  const deferred = useDeferredValue(value);
+
+  const minValue = useMemo(() => ranges?.[0] ?? min, [min, ranges]);
+  const maxValue = useMemo(() => ranges?.slice(-1)[0] ?? max, [max, ranges]);
+
+  const debounceChange = useDebounce((q) => onChange?.(q), [onChange]);
+
+  useEffect(() => {
+    setActualValue(deferred ?? [min, max]);
+  }, [deferred, min, max]);
+  useEffect(() => {
+    setDisplayValue(!!showValue);
+  }, [showValue]);
+
+  const handleChange = useCallback(
+    (val: [number, number]) => {
+      setActualValue(val ?? [min, max]);
+      debounceChange(val ?? undefined);
+    },
+    [onChange, min, max],
+  );
+
+  const minDisplay = useMemo(
+    () => (
+      <span className="text-sm text-dimmed px-2.5 py-px whitespace-nowrap overflow-hidden text-center">
+        {minLabel ?? Format.number(min, format)}
+      </span>
+    ),
+    [minLabel, min, format],
+  );
+  const maxDisplay = useMemo(
+    () => (
+      <span className="text-sm text-dimmed px-2.5 py-px whitespace-nowrap overflow-hidden text-center">
+        {maxLabel ?? Format.number(max, format)}
+      </span>
+    ),
+    [maxLabel, max, format],
+  );
+
+  const rangerInstance = useRanger({
+    values: actualValue,
+    min: minValue,
+    max: maxValue,
+    stepSize: step,
+    steps: ranges,
+    vertical,
+    tickSize: Math.max((max - min) / 10, step),
+    onDrag: (val) => onSlide?.(val[0]),
+    onDragStart: () => setDisplayValue(true),
+    onDragEnd: () => setDisplayValue(!!showValue),
+    onChange: (values: readonly number[]) =>
+      handleChange([values[0], values[1]]),
+  });
+
+  return (
+    <InputWrapper
+      {...rest}
+      noOutline
+      error={error}
+      invalid={invalid}
+      isDisabled={disabled}
+      isReadOnly={readOnly}
+      canClear={!!actualValue}
+    >
+      <div
+        className={classNames(
+          "flex-auto order-3 flex items-center select-none",
+          vertical && "flex-col w-8",
+          invalid ? "text-danger-500" : "text-primary-600",
+        )}
+        data-vertical={!!vertical}
+        style={invalid ? undefined : { color }}
+      >
+        {showLabels && (vertical ? maxDisplay : minDisplay)}
+        <div
+          ref={rangerInstance.trackElRef}
+          className={classNames(
+            "flex-auto relative flex items-center",
+            vertical ? "my-2 w-8" : "mx-2 h-8",
+          )}
+          style={{ height: vertical ? height : undefined }}
+        >
+          {rangerInstance.ticks.map(({ value, key, styles }) => (
+            <div
+              key={key}
+              className={classNames(
+                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1",
+                vertical && "left-1/2 -ml-0.5",
+              )}
+              style={styles}
+            />
+          ))}
+          {rangerInstance.segments.map(({ key, styles, active }) => (
+            <div
+              key={key}
+              className={classNames(
+                "absolute",
+                active
+                  ? "bg-current z-1 opacity-90"
+                  : "bg-invert opacity-5 z-0",
+                vertical
+                  ? "-bottom-1 left-1/2 -translate-x-1/2"
+                  : "top-1/2 -translate-y-1/2",
+                !vertical && (active ? "h-1" : "h-0.5"),
+                vertical && (active ? "w-1" : "w-0.5"),
+              )}
+              style={styles}
+            />
+          ))}
+          {rangerInstance.handles.map(
+            ({ key, value, props, styles, valueStyles }) => (
+              <Fragment key={key}>
+                <button
+                  type="button"
+                  className={classNames(
+                    "bg-current cursor-pointer appearance-none h-3 w-3 rounded-full z-3 absolute",
+                    "focus:ring-2 focus:ring-offset-2",
+                    vertical && "left-1/2 -ml-1.5",
+                  )}
+                  {...props}
+                  style={styles}
+                />
+                {displayValue && (
+                  <div
+                    className={classNames(
+                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap",
+                      "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45",
+                      vertical
+                        ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2"
+                        : "top-1/2 -translate-y-1/2",
+                      !vertical &&
+                        (key === 0
+                          ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0"
+                          : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0"),
+                    )}
+                    data-align={key === 0 ? "start" : "end"}
+                    style={valueStyles}
+                  >
+                    {Format.number(value, format)}
+                  </div>
+                )}
+              </Fragment>
+            ),
+          )}
+        </div>
+        {showLabels && (vertical ? minDisplay : maxDisplay)}
+      </div>
+    </InputWrapper>
+  );
+};
diff --git a/packages/form/src/input/Search.tsx b/packages/form/src/input/Search.tsx
new file mode 100644
index 0000000..3def496
--- /dev/null
+++ b/packages/form/src/input/Search.tsx
@@ -0,0 +1,159 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Button, CoreIcons, Icon, useDebounce } from "@react-fabric/core";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import {
+  Fragment,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+} from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type InputProps } from "../types";
+import { handleEnter } from "../utils";
+
+export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
+  /**
+   * is searching
+   */
+  searching?: boolean;
+  /**
+   * search on value change
+   */
+  searchOnChange?: boolean;
+  /**
+   * search handler
+   */
+  onSearch?: (query?: string) => void;
+}
+
+export const Search = ({
+  ref,
+  value,
+  name,
+  invalid,
+  readOnly,
+  disabled,
+  required,
+  searching,
+  placeholder,
+  autoFocus,
+  allowClear = true,
+  searchOnChange = true,
+  decorateEnd,
+  decorateStart,
+  onSearch,
+  onChange,
+  onEnterPressed,
+  ...rest
+}: SearchProps) => {
+  const [actualValue, setActualValue] = useState("");
+  const deferred = useDeferredValue(value);
+
+  const refValue = useRef("");
+  const handleSearch = useDebounce(
+    () => onSearch?.(refValue.current),
+    [onSearch],
+  );
+  const fireChange = useDebounce((value) => onChange?.(value), [onChange]);
+
+  const handleEnterPressed = useMemo(
+    () => handleEnter(handleSearch),
+    [handleSearch],
+  );
+
+  useEffect(() => {
+    setActualValue(deferred ?? "");
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      const value = e?.target.value;
+      refValue.current = value ?? "";
+      setActualValue(value ?? "");
+      fireChange?.(value ?? undefined);
+
+      // value was cleared so force fire onSearch
+      if (searchOnChange) {
+        handleSearch();
+      }
+    },
+    [fireChange, searchOnChange, handleSearch],
+  );
+
+  return (
+    <InputWrapper
+      showClear={!!actualValue}
+      onClear={handleChange}
+      allowClear={allowClear}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      decorateStart={decorateStart}
+      decorateEnd={
+        <Fragment>
+          {decorateEnd}
+          {searching && (
+            <Icon className="p-2" icon={CoreIcons.spinner} animate="spin" />
+          )}
+          {!searching && (
+            <Button
+              tabIndex={-1}
+              variant="link"
+              aria-label="search"
+              icon={CoreIcons.search}
+              onClick={handleSearch}
+            />
+          )}
+        </Fragment>
+      }
+      {...rest}
+    >
+      <input
+        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        aria-invalid={invalid}
+        aria-disabled={disabled}
+        aria-readonly={readOnly}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        size={1}
+        data-testid={name}
+        name={name}
+        type="search"
+        ref={ref}
+        autoComplete="off"
+        {...{ autoFocus }}
+        value={actualValue}
+        onChange={handleChange}
+        onKeyDown={handleEnterPressed}
+      />
+    </InputWrapper>
+  );
+};
diff --git a/packages/form/src/input/Slider.tsx b/packages/form/src/input/Slider.tsx
new file mode 100644
index 0000000..581b80a
--- /dev/null
+++ b/packages/form/src/input/Slider.tsx
@@ -0,0 +1,286 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useDebounce } from "@react-fabric/core";
+import { Format } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Fragment,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+  type FC,
+} from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { useRanger } from "../ranger";
+import { type InputProps } from "../types";
+
+export interface SliderProps
+  extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children"> {
+  /**
+   * min value
+   */
+  min?: number;
+  /**
+   * max value
+   */
+  max?: number;
+  /**
+   * increment step
+   */
+  step?: number;
+  /**
+   * slider color
+   */
+  color?: string;
+  /**
+   * slider height (only vertical)
+   */
+  height?: number;
+  /**
+   * vertical orientation
+   */
+  vertical?: boolean;
+  /**
+   * display value tooltip
+   */
+  showValue?: boolean;
+  /**
+   * display min/max labels
+   */
+  showLabels?: boolean;
+  /**
+   * custom min label
+   */
+  minLabel?: string;
+  /**
+   * custom max label
+   */
+  maxLabel?: string;
+  /**
+   * step ranges
+   */
+  ranges?: number[];
+  /**
+   * infinity max value
+   */
+  useInfinity?: true;
+  /**
+   * format value
+   */
+  format?: string;
+  /**
+   * slide event handler
+   */
+  onSlide?: (val: number) => void;
+}
+
+/**
+ * Number slider input
+ */
+export const Slider: FC<SliderProps> = ({
+  error,
+  name,
+  value,
+  step = 1,
+  min = 0,
+  max = 100,
+  height = 192,
+  color,
+  vertical,
+  showLabels,
+  showValue,
+  minLabel,
+  maxLabel,
+  ranges,
+  useInfinity,
+  format,
+  invalid,
+  autoFocus,
+  disabled,
+  readOnly,
+  onBlur,
+  onChange,
+  onEnterPressed,
+  onFocus,
+  onSlide,
+  ...rest
+}: SliderProps) => {
+  const [actualValue, setActualValue] = useState<number>(0);
+  const [displayValue, setDisplayValue] = useState(false);
+  const deferred = useDeferredValue(value);
+
+  const minValue = useMemo(() => ranges?.[0] ?? min, [min, ranges]);
+  const maxValue = useMemo(() => ranges?.slice(-1)[0] ?? max, [max, ranges]);
+
+  const debounceChange = useDebounce((q) => onChange?.(q), [onChange]);
+
+  useEffect(() => {
+    setActualValue(
+      useInfinity && deferred === Infinity ? max : deferred ?? min,
+    );
+  }, [deferred, min, max, useInfinity]);
+  useEffect(() => {
+    setDisplayValue(!!showValue);
+  }, [showValue]);
+
+  const handleChange = useCallback(
+    (value: number) => {
+      const val = useInfinity && value === max ? Infinity : value;
+      setActualValue(val ?? 0);
+      debounceChange(val ?? undefined);
+    },
+    [onChange, max, useInfinity],
+  );
+
+  const minDisplay = useMemo(
+    () => (
+      <span className="text-sm text-dimmed px-2.5 py-px whitespace-nowrap overflow-hidden text-center">
+        {minLabel ?? Format.number(min, format)}
+      </span>
+    ),
+    [minLabel, min, format],
+  );
+  const maxDisplay = useMemo(
+    () => (
+      <span className="text-sm text-dimmed px-2.5 py-px whitespace-nowrap overflow-hidden text-center">
+        {maxLabel ?? (useInfinity ? "∞" : Format.number(max, format))}
+      </span>
+    ),
+    [maxLabel, max, format, useInfinity],
+  );
+
+  const rangerInstance = useRanger({
+    values: [actualValue],
+    min: minValue,
+    max: maxValue,
+    stepSize: step,
+    steps: ranges,
+    vertical,
+    tickSize: Math.max((max - min) / 10, step),
+    onDrag: (val) => onSlide?.(val[0]),
+    onDragStart: () => setDisplayValue(true),
+    onDragEnd: () => setDisplayValue(!!showValue),
+    onChange: (values: readonly number[]) => handleChange(values[0]),
+  });
+
+  return (
+    <InputWrapper
+      {...rest}
+      noOutline
+      error={error}
+      invalid={invalid}
+      isDisabled={disabled}
+      isReadOnly={readOnly}
+      canClear={!!actualValue}
+    >
+      <div
+        className={classNames(
+          "flex-auto order-3 flex items-center select-none relative z-0",
+          vertical && "flex-col w-8",
+          invalid ? "text-danger-500" : "text-primary-600",
+        )}
+        data-vertical={!!vertical}
+        style={invalid ? undefined : { color }}
+      >
+        {showLabels && (vertical ? maxDisplay : minDisplay)}
+        <div
+          ref={rangerInstance.trackElRef}
+          className={classNames(
+            "flex-auto relative flex items-center",
+            vertical ? "my-2 w-8" : "mx-2 h-8",
+          )}
+          style={{ height: vertical ? height : undefined }}
+        >
+          {rangerInstance.ticks.map(({ value, key, styles }) => (
+            <div
+              key={key}
+              className={classNames(
+                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1",
+                vertical && "left-1/2 -ml-0.5",
+              )}
+              style={styles}
+            />
+          ))}
+          {rangerInstance.segments.map(({ key, styles, active }) => (
+            <div
+              key={key}
+              className={classNames(
+                "absolute",
+                active
+                  ? "bg-current z-1 opacity-90"
+                  : "bg-invert opacity-5 z-0",
+                vertical
+                  ? "-bottom-1 left-1/2 -translate-x-1/2"
+                  : "top-1/2 -translate-y-1/2",
+                !vertical && (active ? "h-1" : "h-0.5"),
+                vertical && (active ? "w-1" : "w-0.5"),
+              )}
+              style={styles}
+            />
+          ))}
+          {rangerInstance.handles.map(
+            ({ key, value, props, styles, percentage, valueStyles }) => (
+              <Fragment key={key}>
+                <button
+                  type="button"
+                  className={classNames(
+                    "bg-current cursor-pointer appearance-none h-3 w-3 rounded-full z-3 absolute",
+                    "focus:ring-2 focus:ring-offset-2",
+                    vertical && "left-1/2 -ml-1.5",
+                  )}
+                  {...props}
+                  style={styles}
+                />
+                {displayValue && (
+                  <div
+                    className={classNames(
+                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap",
+                      "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45",
+                      vertical
+                        ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2"
+                        : "top-1/2 -translate-y-1/2",
+                      !vertical &&
+                        (percentage > 50
+                          ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0"
+                          : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0"),
+                    )}
+                    data-align={percentage > 50 ? "start" : "end"}
+                    style={valueStyles}
+                  >
+                    {value === Infinity || (useInfinity && value === max)
+                      ? maxLabel ?? "∞"
+                      : Format.number(value, format)}
+                  </div>
+                )}
+              </Fragment>
+            ),
+          )}
+        </div>
+        {showLabels && (vertical ? minDisplay : maxDisplay)}
+      </div>
+    </InputWrapper>
+  );
+};
diff --git a/packages/form/src/input/Switch.tsx b/packages/form/src/input/Switch.tsx
new file mode 100644
index 0000000..5813394
--- /dev/null
+++ b/packages/form/src/input/Switch.tsx
@@ -0,0 +1,168 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  type ColorType,
+  type RefProp,
+} from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useState,
+  type ChangeEvent,
+} from "react";
+import { ErrorIcon } from "../internal/ErrorIcon";
+import { getBgClass, getColor } from "../utils";
+
+export interface SwitchProps extends RefProp<HTMLInputElement> {
+  /**
+   * Switch label
+   */
+  label?: JSX.Element | string;
+  /**
+   * checked
+   */
+  checked?: boolean;
+  /**
+   * on checked change
+   */
+  onChange?: (checked: boolean) => void;
+
+  /**
+   * disabled input
+   */
+  disabled?: boolean;
+  /**
+   * invalid value input
+   */
+  invalid?: boolean;
+  /**
+   * error message
+   */
+  error?: string;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+
+  /**
+   * cutom Switch icon
+   */
+  color?: ColorType;
+  /**
+   * cutom Switch icon
+   */
+  defaultColor?: ColorType;
+
+  name?: string;
+}
+
+export const Switch = ({
+  ref,
+  label,
+  checked,
+  invalid,
+  disabled,
+  error,
+  width,
+  color,
+  name,
+  defaultColor,
+  onChange,
+  ...rest
+}: SwitchProps) => {
+  const [actualValue, setActualValue] = useState(false);
+  const deferred = useDeferredValue(!!checked);
+
+  useEffect(() => {
+    setActualValue(deferred);
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      setActualValue(e?.target.checked ?? false);
+      onChange?.(e?.target.checked ?? false);
+    },
+    [onChange],
+  );
+
+  return (
+    <label
+      className={classNames(
+        invalid ? "ring-danger-500" : "ring-primary-500",
+        disabled
+          ? "opacity-50 cursor-not-allowed"
+          : "hover:opacity-100 cursor-pointer",
+        "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-[:focus-visible]:ring-1",
+      )}
+      style={{ width }}
+    >
+      <div
+        className={classNames(
+          actualValue && getBgClass(color ? `${color}-500` : "primary-500"),
+          !actualValue &&
+            (defaultColor ? getBgClass(`${defaultColor}-500`) : "bg-tint-200"),
+          "relative flex h-6 w-10 cursor-pointer rounded-full p-1 transition-colors duration-200 ease-in-out",
+        )}
+        style={{
+          backgroundColor: actualValue
+            ? getColor(color)
+            : getColor(defaultColor),
+        }}
+      >
+        <input
+          className={classNames(
+            "appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0",
+          )}
+          aria-invalid={invalid}
+          aria-disabled={disabled}
+          disabled={disabled}
+          aria-errormessage={error}
+          type="checkbox"
+          ref={ref}
+          size={1}
+          tabIndex={0}
+          autoComplete="off"
+          checked={actualValue}
+          onChange={handleChange}
+          {...rest}
+        />
+        <span
+          aria-hidden="true"
+          className={classNames(
+            !disabled && "shadow-sm",
+            actualValue ? "translate-x-4" : "translate-x-0",
+            "pointer-events-none inline-block size-4 rounded-full bg-white ring-0 transition duration-200 ease-in-out",
+          )}
+        />
+      </div>
+      <ErrorIcon invalid={invalid} error={error} />
+      {label && (
+        <span className="flex-initial leading-none truncate">{label}</span>
+      )}
+    </label>
+  );
+};
diff --git a/packages/form/src/input/Textarea.tsx b/packages/form/src/input/Textarea.tsx
new file mode 100644
index 0000000..735cea9
--- /dev/null
+++ b/packages/form/src/input/Textarea.tsx
@@ -0,0 +1,131 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useDebounce, useEffectDebugger } from "@react-fabric/core";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useState,
+  type ChangeEvent,
+} from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type InputProps } from "../types";
+
+export interface TextareaProps
+  extends Omit<InputProps, "onEnterPressed">,
+    RefProp<HTMLTextAreaElement> {
+  /**
+   * textarae rows
+   */
+  rows?: number;
+  /**
+   * maximum rows
+   */
+  maxRows?: number;
+  /**
+   * increment rows on value change
+   */
+  variableRows?: boolean;
+}
+
+export const Textarea = ({
+  ref,
+  value,
+  name,
+  invalid,
+  readOnly,
+  disabled,
+  required,
+  placeholder,
+  autoFocus,
+  rows = 5,
+  maxRows = 12,
+  variableRows,
+  onChange,
+  ...rest
+}: TextareaProps) => {
+  const [actualValue, setActualValue] = useState("");
+  const [fixedRows, setFixedRows] = useState(rows);
+  const deferred = useDeferredValue(value);
+
+  const fireChange = useDebounce((value) => onChange?.(value), [onChange]);
+
+  useEffect(() => {
+    setActualValue(deferred ?? "");
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLTextAreaElement>) => {
+      const value = e?.target.value;
+      setActualValue(value ?? "");
+      fireChange(value ?? undefined);
+    },
+    [fireChange],
+  );
+
+  useEffectDebugger(
+    () => {
+      if (variableRows) {
+        const lines = actualValue?.split("\n").length ?? 1;
+        setFixedRows(Math.max(rows, Math.min(maxRows, lines)));
+      } else {
+        setFixedRows(rows);
+      }
+    },
+    [actualValue, variableRows, rows, maxRows],
+    "TextareaInput variable rows",
+  );
+
+  return (
+    <InputWrapper
+      showClear={!!actualValue}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      textarea
+      {...rest}
+    >
+      <textarea
+        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        aria-invalid={invalid}
+        aria-disabled={disabled}
+        aria-readonly={readOnly}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        rows={fixedRows}
+        data-testid={name}
+        name={name}
+        ref={ref}
+        autoComplete="off"
+        {...{ autoFocus }}
+        value={actualValue}
+        onChange={handleChange}
+      />
+    </InputWrapper>
+  );
+};
diff --git a/packages/form/src/internal/ErrorIcon.tsx b/packages/form/src/internal/ErrorIcon.tsx
new file mode 100644
index 0000000..9070a0d
--- /dev/null
+++ b/packages/form/src/internal/ErrorIcon.tsx
@@ -0,0 +1,61 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, Icon, Tooltip } from "@react-fabric/core";
+import { isString } from "@react-fabric/utilities";
+import { useTranslation } from "react-i18next";
+
+export const ErrorIcon = ({ error = "", invalid }: KeyValue) => {
+  const { t } = useTranslation();
+
+  return (
+    invalid && (
+      <Tooltip
+        content={
+          isString(error)
+            ? `${error}`
+            : (t(
+                error?.key,
+                error.values
+                  ? {
+                      ...error?.values,
+                      label: t(
+                        error.values?.label ?? "form:badkey",
+                        error.values?.path,
+                      ),
+                    }
+                  : {},
+              ) as string)
+        }
+        placement="bottom"
+        color="danger"
+      >
+        <Icon
+          className="flex-content first:ms-2"
+          color="danger"
+          icon={CoreIcons.alert}
+        />
+      </Tooltip>
+    )
+  );
+};
diff --git a/packages/form/src/internal/Field.module.css b/packages/form/src/internal/Field.module.css
new file mode 100644
index 0000000..a744cf8
--- /dev/null
+++ b/packages/form/src/internal/Field.module.css
@@ -0,0 +1,114 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .fieldWrapper {
+    /* later */
+  }
+}
+
+@layer var {
+  .inputWrapper {
+    &::after {
+      inset-inline: 50%;
+      transition: all 300ms;
+      transition-delay: 100ms;
+    }
+
+    & .decorate:has([data-ref="button"]) {
+      display: flex;
+      align-self: stretch;
+    }
+
+    &:has([disabled]) {
+      cursor: not-allowed;
+      background-color: theme(colors.tint.50);
+
+      & input,
+      & textarea {
+        cursor: not-allowed;
+      }
+    }
+
+    &:focus-within,
+    &:has([data-open="true"]) {
+      z-index: 1;
+      background-color: var(--fabric-input-focus);
+      outline-color: var(--primary);
+
+      &:not(:has([aria-readonly="true"]:not([hidden])))::after {
+        inset-inline: 0;
+      }
+    }
+
+    & > input[type="number"] + .inputClear {
+      margin-inline: -3rem 2rem;
+    }
+
+    & input::-ms-clear,
+    & select::-ms-clear,
+    & textarea::-ms-clear {
+      display: none;
+    }
+
+    & input[type="search"]::-webkit-search-cancel-button {
+      display: none;
+    }
+
+    & input[type="password"]:not(:placeholder-shown) {
+      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+      font-family: caption;
+      letter-spacing: 2px;
+    }
+
+    &.invalidWrapper {
+      outline-color: theme(colors.danger.500);
+
+      &::after {
+        background-color: theme(colors.danger.500);
+      }
+    }
+  }
+
+  .fieldGroup {
+    > * {
+      line-height: 1;
+    }
+
+    > :not(:first-child) {
+      &,
+      & [role="button"] {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+    }
+
+    > :not(:last-child) {
+      &,
+      & [role="button"] {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+    }
+  }
+}
diff --git a/packages/form/src/internal/FieldWrapper.tsx b/packages/form/src/internal/FieldWrapper.tsx
new file mode 100644
index 0000000..28d84e1
--- /dev/null
+++ b/packages/form/src/internal/FieldWrapper.tsx
@@ -0,0 +1,78 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import classNames from "classnames";
+import classes from "./Field.module.css";
+
+export const FieldWrapper = ({
+  label,
+  appendLabel,
+  width,
+  labelWidth = 192,
+  inline,
+  info,
+  disabled,
+  required,
+  children,
+  className,
+}: KeyValue) => {
+  return (
+    <div
+      className={classNames(
+        classes.fieldWrapper,
+        "flex flex-1",
+        className,
+        inline ? "flex-nowrap gap-1" : "flex-col",
+      )}
+      data-ref="fieldWrapper"
+      style={{ width, flexBasis: width }}
+    >
+      <div
+        className="flex flex-nowrap flex-content gap-1 py-0.5 px-2"
+        style={{ width: inline ? labelWidth : undefined }}
+      >
+        <label
+          role="none"
+          className={classNames(
+            "flex-initial truncate",
+            disabled && "text-muted",
+          )}
+          onClick={(e) =>
+            e.currentTarget
+              .closest<HTMLElement>('[data-ref="fieldWrapper"]')
+              ?.querySelector<HTMLElement>("input,textarea")
+              ?.focus()
+          }
+        >
+          {label}
+        </label>
+        {required && (
+          <span className="text-danger-500 flex-content text-[10px]">✽</span>
+        )}
+        {appendLabel && <span className="flex-content">{appendLabel}</span>}
+      </div>
+      {children}
+      {info && <div className="text-sm text-muted flex-content">{info}</div>}
+    </div>
+  );
+};
diff --git a/packages/form/src/internal/InputWrapper.tsx b/packages/form/src/internal/InputWrapper.tsx
new file mode 100644
index 0000000..907f39c
--- /dev/null
+++ b/packages/form/src/internal/InputWrapper.tsx
@@ -0,0 +1,130 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, Icon } from "@react-fabric/core";
+import { isString } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useCallback, useMemo, type MouseEvent } from "react";
+import { Fragment } from "react/jsx-runtime";
+import { ErrorIcon } from "./ErrorIcon";
+import classes from "./Field.module.css";
+import { FieldWrapper } from "./FieldWrapper";
+
+export const InputWrapper = ({
+  invalid,
+  error,
+  allowClear,
+  showClear,
+  decorateStart,
+  decorateEnd,
+  children,
+  onClear,
+  noOutline,
+  textarea = false,
+  "data-inner": isInner,
+  "data-open": isOpen,
+  wrapperRef,
+  width,
+  ...rest
+}: KeyValue) => {
+  const Wrapper = useMemo(() => (isInner ? Fragment : FieldWrapper), [isInner]);
+  const wrapperProps = useMemo(
+    () => (isInner ? {} : { ...rest, width }),
+    [isInner, rest, width],
+  );
+
+  const handleClear = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      e.currentTarget.parentElement
+        ?.querySelector<HTMLElement>("input,textarea,button")
+        ?.focus();
+      onClear?.();
+    },
+    [onClear],
+  );
+
+  const doFocus = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      e.currentTarget.parentElement
+        ?.querySelector<HTMLElement>("input,textarea,button")
+        ?.focus();
+    },
+    [onClear],
+  );
+
+  return (
+    <Wrapper {...wrapperProps}>
+      <div
+        ref={wrapperRef}
+        className={classNames(
+          classes.inputWrapper,
+          invalid && classes.invalidWrapper,
+          !noOutline && "bg-[var(--fabric-input)] outline overflow-hidden",
+          "flex flex-1 flex-nowrap items-center relative",
+          textarea ? "rounded-capped" : "rounded",
+          !noOutline &&
+            "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto",
+        )}
+        style={{ width, flexBasis: width }}
+      >
+        {decorateStart && (
+          <div
+            onClickCapture={doFocus}
+            className={classNames(
+              classes.decorate,
+              "text-muted leading-none flex-content",
+              isString(decorateStart) && "px-1",
+            )}
+          >
+            {decorateStart}
+          </div>
+        )}
+        <ErrorIcon invalid={invalid} error={error} />
+        {children}
+        {allowClear && showClear && (
+          <Icon
+            icon={CoreIcons.close}
+            onClick={handleClear}
+            className={classNames(
+              "text-tint-500 hover:text-tint-700 p-1 z-1 flex-content",
+              classes.inputClear,
+              textarea && "self-start mt-1 me-1",
+            )}
+          />
+        )}
+        {decorateEnd && (
+          <div
+            onClickCapture={doFocus}
+            className={classNames(
+              classes.decorate,
+              "text-muted leading-none flex-content",
+              isString(decorateEnd) && "px-1",
+            )}
+          >
+            {decorateEnd}
+          </div>
+        )}
+      </div>
+    </Wrapper>
+  );
+};
diff --git a/packages/form/src/ranger/index.tsx b/packages/form/src/ranger/index.tsx
new file mode 100644
index 0000000..3cdda3c
--- /dev/null
+++ b/packages/form/src/ranger/index.tsx
@@ -0,0 +1,514 @@
+/**
+ * react-ranger
+ * https://github.com/TanStack/ranger
+ */
+import { useIsRtl } from "@react-fabric/core";
+import {
+  type KeyboardEvent as KE,
+  type MouseEvent as ME,
+  type TouchEvent as TE,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  getBoundingClientRect,
+  linearInterpolator,
+  sortNumList,
+} from "./utils";
+
+type RangerChangeEvent = (newValue: readonly number[]) => void;
+
+type RangerConfig = {
+  values: readonly number[];
+
+  min: number;
+  max: number;
+
+  tickSize: number;
+  ticks?: number[];
+
+  vertical?: boolean;
+
+  onChange: RangerChangeEvent;
+  onDrag?: RangerChangeEvent;
+  onDragStart?: () => void;
+  onDragEnd?: () => void;
+
+  debug?: boolean;
+} & ({ stepSize: number } | { steps: number[] });
+
+const useGetLatest = (val: AnyObject) => {
+  const ref = useRef(val);
+  ref.current = val;
+  return useCallback(() => {
+    return ref.current;
+  }, []);
+};
+
+export const useRanger = (opts: RangerConfig) => {
+  const tickSize = opts.tickSize ?? 10;
+  const values = opts.values;
+  const min = opts.min;
+  const max = opts.max;
+  const isVertical = opts.vertical;
+  const controlledTicks = opts.ticks;
+  const steps = "steps" in opts ? opts.steps : undefined;
+  const onChange = opts.onChange;
+  const onDrag = opts.onDrag;
+  const onDragStart = opts.onDragStart;
+  const onDragEnd = opts.onDragEnd;
+  const stepSize = "stepSize" in opts ? opts.stepSize : 1;
+
+  const [activeHandleIndex, setActiveHandleIndex] = useState<number>();
+  const [segmentStart, setSegmentStart] = useState<[number, number]>();
+  const [tempValues, setTempValues] = useState<number[]>();
+  const isRtl = useIsRtl();
+
+  const positionProp = useMemo(
+    () => (isVertical ? "bottom" : isRtl ? "right" : "left"),
+    [isVertical, isRtl],
+  );
+  const marginProp = useMemo(
+    () => (isVertical ? "marginBottom" : isRtl ? "marginRight" : "marginLeft"),
+    [isVertical, isRtl],
+  );
+
+  const getLatest = useGetLatest({
+    activeHandleIndex,
+    segmentStart,
+    onChange,
+    onDrag,
+    onDragStart,
+    onDragEnd,
+    values,
+    tempValues,
+  });
+  const trackElRef = useRef<HTMLDivElement>(null);
+  const segmentElRef = useRef<HTMLDivElement>(null);
+  const getValueForClientX = useCallback(
+    (clientX: number) => {
+      const trackDims = getBoundingClientRect(trackElRef.current);
+      return linearInterpolator.getValueForClientX(
+        clientX,
+        trackDims,
+        min,
+        max,
+        isRtl,
+      );
+    },
+    [max, min, isRtl],
+  );
+  const getValueForClientY = useCallback(
+    (clientY: number) => {
+      const trackDims = getBoundingClientRect(trackElRef.current);
+      return linearInterpolator.getValueForClientY(
+        clientY,
+        trackDims,
+        min,
+        max,
+      );
+    },
+    [max, min],
+  );
+  const getNextStep = useCallback(
+    (val: number, direction: number) => {
+      if (steps) {
+        const currIndex = steps.indexOf(val);
+        const nextIndex = currIndex + direction;
+
+        if (nextIndex >= 0 && nextIndex < steps.length) {
+          return steps[nextIndex];
+        } else {
+          return val;
+        }
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          if (typeof stepSize === "undefined") {
+            throw new Error(
+              "Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`",
+            );
+          }
+        }
+
+        const nextVal = val + stepSize * direction;
+
+        if (nextVal >= min && nextVal <= max) {
+          return nextVal;
+        } else {
+          return val;
+        }
+      }
+    },
+    [max, min, stepSize, steps],
+  );
+  const roundToStep = useCallback(
+    (val: number) => {
+      let left = min;
+      let right = max;
+
+      if (steps) {
+        steps.forEach((step) => {
+          if (step <= val && step > left) {
+            left = step;
+          }
+
+          if (step >= val && step < right) {
+            right = step;
+          }
+        });
+      } else {
+        if (process.env.NODE_ENV !== "production") {
+          if (typeof stepSize === "undefined") {
+            throw new Error(
+              "Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`",
+            );
+          }
+        }
+
+        while (left < val && left + stepSize < val) {
+          left += stepSize;
+        }
+
+        right = Math.min(left + stepSize, max);
+      }
+
+      if (val - left < right - val) {
+        return +left.toFixed(3);
+      }
+
+      return +right.toFixed(3);
+    },
+    [max, min, stepSize, steps],
+  );
+  const handleDrag = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      const { activeHandleIndex, onDrag } = getLatest();
+
+      const clientX =
+        // @ts-expect-error ignore
+        e.type === "touchmove" ? e.changedTouches[0].clientX : e.clientX;
+      const clientY =
+        // @ts-expect-error ignore
+        e.type === "touchmove" ? e.changedTouches[0].clientY : e.clientY;
+      const newValue = isVertical
+        ? getValueForClientY(clientY)
+        : getValueForClientX(clientX);
+      const newRoundedValue = roundToStep(newValue);
+      const newValues = [
+        ...values.slice(0, activeHandleIndex),
+        ...[newRoundedValue],
+        ...values.slice(+activeHandleIndex + 1),
+      ];
+      onDrag?.(newValues);
+      setTempValues(newValues);
+    },
+    [
+      getLatest,
+      getValueForClientX,
+      getValueForClientY,
+      roundToStep,
+      values,
+      isVertical,
+    ],
+  );
+  const handleSegmentDrag = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      const {
+        segmentStart: [segX, segY],
+        tempValues,
+        onDrag,
+      } = getLatest();
+      const { left, bottom } = getBoundingClientRect(segmentElRef.current);
+
+      const clientX =
+        // @ts-expect-error ignore
+        e.type === "touchmove" ? e.changedTouches[0].clientX : e.clientX;
+      const clientY =
+        // @ts-expect-error ignore
+        e.type === "touchmove" ? e.changedTouches[0].clientY : e.clientY;
+
+      const start = isVertical
+        ? getValueForClientX(bottom + (clientY - segY))
+        : getValueForClientX(left + (clientX - segX));
+      let diff = roundToStep(start) - tempValues[0];
+      if (+tempValues[1] + diff > max) diff = 0;
+      const newValues = [+tempValues[0] + diff, +tempValues[1] + diff];
+      if (tempValues[0] !== newValues[0] || tempValues[1] !== newValues[1]) {
+        onDrag?.(newValues);
+        setTempValues(newValues);
+        setSegmentStart([clientX, clientY]);
+      }
+    },
+    [
+      getLatest,
+      getValueForClientX,
+      getValueForClientY,
+      roundToStep,
+      values,
+      isVertical,
+      max,
+    ],
+  );
+  const handleKeyDown = useCallback(
+    (e: KE, i: number) => {
+      const { values, onChange } = getLatest();
+
+      if (["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"].includes(e.key)) {
+        setActiveHandleIndex(i);
+        const direction = ["ArrowLeft", "ArrowDown"].includes(e.key) ? -1 : 1;
+        const newValue = +getNextStep(values[i], direction).toFixed(3);
+        const newValues = [
+          ...values.slice(0, i),
+          ...[newValue],
+          ...values.slice(i + 1),
+        ];
+        const sortedValues = sortNumList(newValues);
+        onChange?.(sortedValues);
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    },
+    [getLatest, getNextStep],
+  );
+  const handlePress = useCallback(
+    (e: ME | TE, i: number) => {
+      const { onDragStart, values } = getLatest();
+      if (i === -1) {
+        const clientX =
+          e.type === "touchmove"
+            ? // @ts-expect-error ignore
+              e.nativeEvent.changedTouches[0].clientX
+            : // @ts-expect-error ignore
+              e.nativeEvent.clientX;
+        const clientY =
+          e.type === "touchmove"
+            ? // @ts-expect-error ignore
+              e.nativeEvent.changedTouches[0].clientY
+            : // @ts-expect-error ignore
+              e.nativeEvent.clientY;
+
+        setTempValues(values);
+        setSegmentStart([clientX, clientY]);
+      } else {
+        setActiveHandleIndex(i);
+      }
+      const handleRelease = (e: MouseEvent | TouchEvent) => {
+        const { tempValues, onChange, onDragEnd } = getLatest();
+
+        document.removeEventListener(
+          "mousemove",
+          i === -1 ? handleSegmentDrag : handleDrag,
+        );
+        document.removeEventListener(
+          "touchmove",
+          i === -1 ? handleSegmentDrag : handleDrag,
+        );
+        document.removeEventListener("mouseup", handleRelease, {
+          capture: true,
+        });
+        document.removeEventListener("touchend", handleRelease, {
+          capture: true,
+        });
+        const sortedValues = sortNumList(tempValues || values);
+        onDragEnd?.();
+        onChange?.(sortedValues);
+        setActiveHandleIndex(undefined);
+        setSegmentStart(undefined);
+        setTempValues(undefined);
+      };
+
+      onDragStart?.();
+      document.addEventListener(
+        "mousemove",
+        i === -1 ? handleSegmentDrag : handleDrag,
+      );
+      document.addEventListener(
+        "touchmove",
+        i === -1 ? handleSegmentDrag : handleDrag,
+      );
+      document.addEventListener("mouseup", handleRelease, { capture: true });
+      document.addEventListener("touchend", handleRelease, { capture: true });
+    },
+    [getLatest, handleDrag],
+  );
+  const getPercentageForValue = useCallback(
+    (val: number) => {
+      return linearInterpolator.getPercentageForValue(val, min, max);
+    },
+    [max, min],
+  );
+  const trackClicked = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      const { onChange, values } = getLatest();
+      const clientX =
+        e.type === "touchmove"
+          ? // @ts-expect-error ignore
+            e.changedTouches[0].clientX
+          : // @ts-expect-error ignore
+            e.clientX;
+      const clientY =
+        e.type === "touchmove"
+          ? // @ts-expect-error ignore
+            e.changedTouches[0].clientY
+          : // @ts-expect-error ignore
+            e.clientY;
+
+      const newValue = isVertical
+        ? getValueForClientY(clientY)
+        : getValueForClientX(clientX);
+      const newRoundedValue = roundToStep(newValue);
+      let newValues = [newRoundedValue];
+      if (values.length === 2) {
+        if (values[0] > newRoundedValue)
+          newValues = [newRoundedValue, values[1]];
+        else if (values[1] < newRoundedValue)
+          newValues = [values[0], newRoundedValue];
+        else {
+          const diff = (values[1] - values[0]) / 2;
+          if (values[0] + diff >= newRoundedValue)
+            newValues = [newRoundedValue, values[1]];
+          if (values[1] - diff <= newRoundedValue)
+            newValues = [values[0], newRoundedValue];
+        }
+      }
+      onChange(newValues);
+    },
+    [getLatest, getValueForClientX, getValueForClientY, isVertical],
+  );
+  useEffect(() => {
+    trackElRef.current?.addEventListener("mousedown", trackClicked);
+  }, [trackClicked]);
+  // Build the ticks
+  const ticks = useMemo(() => {
+    let ticks = controlledTicks ?? steps;
+
+    if (!ticks) {
+      ticks = [min];
+      const count = tickSize - (tickSize % stepSize);
+      while (ticks[ticks.length - 1] < max - count) {
+        ticks.push(ticks[ticks.length - 1] + count);
+      }
+
+      ticks.push(max);
+    }
+
+    return ticks.map((value, i) => {
+      return {
+        key: i,
+        value,
+        percentage: getPercentageForValue(value),
+        styles: {
+          [positionProp]: `${getPercentageForValue(value)}%`,
+          [marginProp]: "-0.125rem",
+        },
+      };
+    });
+  }, [
+    controlledTicks,
+    getPercentageForValue,
+    max,
+    min,
+    steps,
+    tickSize,
+    positionProp,
+    marginProp,
+  ]);
+  const segments = useMemo(() => {
+    const sortedValues = sortNumList(tempValues ?? values);
+    return [...sortedValues, max].map((value, i) => {
+      const active = i === sortedValues.length - 1;
+      return {
+        key: i,
+        value,
+        active,
+        props: active
+          ? {
+              ref: segmentElRef,
+              onMouseDownCapture: (e: ME) => {
+                e.stopPropagation();
+                e.persist();
+                handlePress(e, -1);
+              },
+              onTouchStartCapture: (e: TE) => {
+                e.stopPropagation();
+                e.persist();
+                handlePress(e, -1);
+              },
+            }
+          : {},
+        styles: (() => {
+          const left = getPercentageForValue(
+            sortedValues[i - 1] ? sortedValues[i - 1] : min,
+          );
+          const width: number = getPercentageForValue(value) - left;
+          return {
+            [positionProp]: `${left}%`,
+            [isVertical ? "height" : "width"]: `${width}%`,
+          };
+        })(),
+      };
+    });
+  }, [
+    getPercentageForValue,
+    max,
+    min,
+    tempValues,
+    values,
+    positionProp,
+    marginProp,
+  ]);
+  const handles = useMemo(() => {
+    return (tempValues ?? values).map((value, i) => {
+      return {
+        key: i,
+        value,
+        percentage: getPercentageForValue(value),
+        active: i === activeHandleIndex,
+        props: {
+          role: "slider",
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          onKeyDown: (e: KE) => {
+            e.stopPropagation();
+            e.persist();
+            handleKeyDown(e, i);
+          },
+          onMouseDownCapture: (e: ME) => {
+            e.stopPropagation();
+            e.persist();
+            handlePress(e, i);
+          },
+          onTouchStartCapture: (e: TE) => {
+            e.stopPropagation();
+            e.persist();
+            handlePress(e, i);
+          },
+        },
+        styles: {
+          [positionProp]: `${getPercentageForValue(value)}%`,
+          [marginProp]: "-0.375rem",
+        },
+        valueStyles: {
+          [positionProp]: `${getPercentageForValue(value)}%`,
+        },
+      };
+    });
+  }, [
+    activeHandleIndex,
+    getPercentageForValue,
+    handleKeyDown,
+    handlePress,
+    min,
+    max,
+    tempValues,
+    values,
+    positionProp,
+    marginProp,
+  ]);
+
+  return { trackElRef, activeHandleIndex, ticks, segments, handles };
+};
diff --git a/packages/form/src/ranger/utils.ts b/packages/form/src/ranger/utils.ts
new file mode 100644
index 0000000..f54e8c3
--- /dev/null
+++ b/packages/form/src/ranger/utils.ts
@@ -0,0 +1,48 @@
+/**
+ * react-ranger
+ * https://github.com/TanStack/ranger
+ */
+
+export const getBoundingClientRect = (element: any) => {
+  const rect = element.getBoundingClientRect();
+  return {
+    top: Math.ceil(rect.top),
+    left: Math.ceil(rect.left),
+    right: Math.ceil(rect.right),
+    width: Math.ceil(rect.width),
+    bottom: Math.ceil(rect.bottom),
+    height: Math.ceil(rect.height),
+  };
+};
+
+export const sortNumList = (arr: ReadonlyArray<number | string>) =>
+  [...arr].map(Number).sort((a, b) => a - b);
+
+export const linearInterpolator = {
+  getPercentageForValue: (val: number, min: number, max: number) => {
+    return Math.max(0, Math.min(100, ((val - min) / (max - min)) * 100));
+  },
+  getValueForClientX: (
+    clientX: number,
+    trackDims: { width: number; left: number; right: number },
+    min: number,
+    max: number,
+    isRtl: boolean
+  ) => {
+    const { left, right, width } = trackDims;
+    const percentageValue = (isRtl ? right - clientX : clientX - left) / width;
+    const value = (max - min) * percentageValue;
+    return value + min;
+  },
+  getValueForClientY: (
+    clientY: number,
+    trackDims: { height: number; bottom: number },
+    min: number,
+    max: number
+  ) => {
+    const { height, bottom } = trackDims;
+    const percentageValue = (bottom - clientY) / height;
+    const value = (max - min) * percentageValue;
+    return value + min;
+  },
+};
diff --git a/packages/form/src/select/DualList.tsx b/packages/form/src/select/DualList.tsx
new file mode 100644
index 0000000..0d9f789
--- /dev/null
+++ b/packages/form/src/select/DualList.tsx
@@ -0,0 +1,231 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Button, ButtonGroup, CoreIcons } from "@react-fabric/core";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { Field, type FieldProps } from "../input/Field";
+import { List } from "./List";
+
+export interface DualListProps<T>
+  extends Omit<FieldProps, "children">,
+    RefProp<HTMLInputElement> {
+  /**
+   * list height
+   */
+  height?: string | number;
+  /**
+   * list options
+   */
+  options: T[];
+  /**
+   * selected value
+   */
+  value?: string[];
+  /**
+   * group by property name
+   */
+  groupProperty?: keyof T;
+  /**
+   * label property name
+   */
+  labelProperty?: keyof T;
+  /**
+   * value property name
+   */
+  valueProperty?: keyof T;
+  /**
+   * item renderer
+   */
+  renderer?: (option: T) => React.ReactNode;
+  /**
+   * change handler
+   */
+  onChange?: (value?: string[]) => void;
+}
+
+export const DualList = <T extends AnyObject = string>({
+  ref,
+  value,
+  options,
+  groupProperty,
+  height = "18rem",
+  labelProperty = "label" as AnyObject,
+  valueProperty = "id" as AnyObject,
+  renderer,
+  onChange,
+  // @ts-expect-error ignore
+  name,
+  // @ts-expect-error ignore
+  invalid,
+  // @ts-expect-error ignore
+  readOnly,
+  // @ts-expect-error ignore
+  disabled,
+  // @ts-expect-error ignore
+  placeholder,
+  // @ts-expect-error ignore
+  autoFocus,
+  // @ts-expect-error ignore
+  error,
+  ...rest
+}: DualListProps<T>) => {
+  const [actualValue, setActualValue] = useState<T[]>([]);
+  const [leftSelected, setLeftSelected] = useState<T[]>([]);
+  const [rightSelected, setRightSelected] = useState<T[]>([]);
+  const deferred = useDeferredValue(value);
+
+  useEffect(() => {
+    setActualValue(
+      options.filter((opt: AnyObject) =>
+        deferred?.includes(opt[valueProperty] ?? opt),
+      ),
+    );
+  }, [deferred, options]);
+
+  const [leftOptions, rightOptions] = useMemo(() => {
+    return [
+      options.filter((opt: AnyObject) => !actualValue?.includes(opt)),
+      actualValue,
+    ];
+  }, [options, actualValue]);
+
+  const moveAllLeft = useCallback(() => {
+    setLeftSelected([]);
+    setRightSelected([]);
+    setActualValue([]);
+    onChange?.([]);
+  }, [onChange]);
+
+  const moveAllRight = useCallback(() => {
+    setLeftSelected([]);
+    setRightSelected([]);
+    setActualValue(options);
+    onChange?.(options.map((opt: AnyObject) => `${opt[valueProperty] ?? opt}`));
+  }, [onChange, options, valueProperty]);
+
+  const moveLeftSelected = useCallback(() => {
+    const selected = [...actualValue, ...leftSelected];
+    setActualValue(selected);
+    onChange?.(
+      selected.map((opt: AnyObject) => `${opt[valueProperty] ?? opt}`),
+    );
+    setLeftSelected([]);
+  }, [onChange, leftSelected, actualValue]);
+
+  const moveRightSelected = useCallback(() => {
+    const selected = actualValue.filter((opt) => !rightSelected.includes(opt));
+    setActualValue(selected);
+    onChange?.(
+      selected.map((opt: AnyObject) => `${opt[valueProperty] ?? opt}`),
+    );
+    setRightSelected([]);
+  }, [onChange, rightSelected, actualValue]);
+
+  return (
+    <Field {...rest} noOutline noBg>
+      <div className="flex-1 flex flex-col overflow-hidden p-px">
+        <List
+          ref={ref}
+          multiple
+          allowClear
+          name={name}
+          invalid={invalid}
+          readOnly={readOnly}
+          disabled={disabled}
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+          error={error}
+          height={height}
+          options={leftOptions}
+          groupProperty={groupProperty}
+          labelProperty={labelProperty}
+          valueProperty={valueProperty}
+          renderer={renderer}
+          onSelect={setLeftSelected}
+          data-inner={true}
+        />
+      </div>
+      <div className="self-center mx-2">
+        <ButtonGroup vertical className="outline overflow-hidden bg-base">
+          <Button
+            rtlFlip
+            size="sm"
+            variant="link"
+            aria-label="scroll to top"
+            onClick={moveAllLeft}
+            icon={CoreIcons.chevronsLeft}
+            disabled={!rightOptions.length}
+          />
+          <Button
+            rtlFlip
+            size="sm"
+            variant="link"
+            aria-label="scroll up"
+            onClick={moveRightSelected}
+            icon={CoreIcons.chevronLeft}
+            disabled={!rightSelected.length}
+          />
+          <Button
+            rtlFlip
+            size="sm"
+            variant="link"
+            aria-label="scroll down"
+            onClick={moveLeftSelected}
+            icon={CoreIcons.chevronRight}
+            disabled={!leftSelected.length}
+          />
+          <Button
+            rtlFlip
+            size="sm"
+            variant="link"
+            aria-label="scroll to bottom"
+            onClick={moveAllRight}
+            icon={CoreIcons.chevronsRight}
+            disabled={!leftOptions.length}
+          />
+        </ButtonGroup>
+      </div>
+      <div className="flex-1 flex flex-col overflow-hidden p-px">
+        <List
+          multiple
+          allowClear
+          height={height}
+          options={rightOptions}
+          groupProperty={groupProperty}
+          labelProperty={labelProperty}
+          valueProperty={valueProperty}
+          renderer={renderer}
+          onSelect={setRightSelected}
+          data-inner={true}
+        />
+      </div>
+    </Field>
+  );
+};
diff --git a/packages/form/src/select/List.tsx b/packages/form/src/select/List.tsx
new file mode 100644
index 0000000..16052f1
--- /dev/null
+++ b/packages/form/src/select/List.tsx
@@ -0,0 +1,284 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  autoUpdate,
+  FloatingFocusManager,
+  useFloating,
+  useInteractions,
+  useListNavigation,
+  useTypeahead,
+} from "@floating-ui/react";
+import { Chip } from "@react-fabric/core";
+import { isArray, isEmpty } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Fragment, useCallback, useId, useMemo } from "react";
+import { FieldWrapper } from "../internal/FieldWrapper";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type SelectProps } from "../types";
+import { Options } from "./Options";
+import { useSelect } from "./useSelect";
+
+export const List = <T extends AnyObject = string>({
+  ref,
+  name,
+  value,
+  readOnly,
+  disabled,
+  required,
+  placeholder,
+  autoFocus,
+  options,
+  height,
+  groupProperty,
+  labelProperty,
+  valueProperty,
+  multiple,
+  allowCreate,
+  createOption,
+  matcher,
+  renderer,
+  onQuery,
+  onChange,
+  onSelect,
+  onEnterPressed,
+  invalid,
+  error,
+  allowClear,
+  decorateStart,
+  decorateEnd,
+  // @ts-expect-error ignore
+  "data-inner": isInner,
+  ...rest
+}: SelectProps<T> & { height?: string | number }) => {
+  const Wrapper = useMemo(() => (isInner ? Fragment : FieldWrapper), [isInner]);
+  const wrapperProps = useMemo(
+    () => (isInner ? {} : { ...rest }),
+    [isInner, rest],
+  );
+
+  const {
+    state,
+    listRef,
+    listContentRef,
+    macthOption,
+    handleChange,
+    handleRemove,
+    handleQuery,
+    setItemRef,
+    setActiveIndex,
+  } = useSelect({
+    value,
+    options,
+    multiple,
+    groupProperty,
+    labelProperty,
+    valueProperty,
+    allowCreate,
+    createOption,
+    matcher,
+    onChange,
+    onSelect,
+    onQuery,
+  });
+
+  const dropdownKey = useId();
+
+  const { context, refs } = useFloating({
+    open: true,
+    placement: "bottom",
+    whileElementsMounted: autoUpdate,
+    middleware: [],
+  });
+
+  // floating interactions
+  const navigation = useListNavigation(context, {
+    listRef,
+    activeIndex: state.activeIndex,
+    selectedIndex: state.selectedIndex,
+    loop: true,
+    virtual: true,
+    focusItemOnOpen: false,
+    onNavigate: setActiveIndex,
+  });
+
+  const typeahead = useTypeahead(context, {
+    listRef: listContentRef,
+    activeIndex: state.activeIndex,
+    selectedIndex: state.selectedIndex,
+    findMatch(list, typedString) {
+      return list.find((item) => macthOption(item, typedString));
+    },
+    onMatch(index) {
+      state.open && setActiveIndex(index);
+    },
+  });
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [navigation, typeahead],
+  );
+
+  const referenceProps = useMemo(() => {
+    const props: AnyObject = getReferenceProps();
+
+    return {
+      ...props,
+      onBlur(evt: React.FocusEvent) {
+        if (
+          evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)
+        ) {
+          refs.domReference.current?.querySelector("input")?.focus();
+          return;
+        }
+        handleQuery("");
+      },
+      onKeyDown(evt: React.KeyboardEvent) {
+        if (evt.key === "Enter") {
+          if (state.activeIndex !== null) {
+            handleChange(listContentRef.current[state.activeIndex]);
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
+          } else if (!state.query) {
+            onEnterPressed?.(evt);
+          }
+        } else if (evt.key === "Backspace") {
+          !state.query && handleRemove();
+        } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
+          if (state.activeIndex === null) {
+            setActiveIndex(state.selectedIndex);
+          }
+          setTimeout(() => {
+            props.onKeyDown?.(evt);
+          }, 50);
+        }
+      },
+    };
+  }, [
+    getReferenceProps,
+    onEnterPressed,
+    handleQuery,
+    refs,
+    state.query,
+    state.activeIndex,
+  ]);
+
+  const floatingProps = useMemo(() => {
+    return getFloatingProps({
+      "data-select-dropdown": dropdownKey,
+    } as AnyObject);
+  }, [getFloatingProps]);
+
+  const makeItemProps = useCallback(
+    (item: AnyObject) => {
+      return {
+        ...getItemProps({
+          "data-selected":
+            state.value?.includes?.(item) ?? state.value === item
+              ? true
+              : undefined,
+          onClick() {
+            handleChange(item);
+          },
+        } as AnyObject),
+        "aria-hidden": undefined,
+      };
+    },
+    [getItemProps, handleChange, state.value],
+  );
+
+  const displayValue = useMemo(() => {
+    if (isArray(state.value)) {
+      return state.value.map((item: AnyObject, index) => (
+        <Chip key={index} onRemove={() => handleRemove(index)}>
+          {renderer?.(item) ?? item[labelProperty] ?? item}
+        </Chip>
+      ));
+    } else if (!isEmpty(state.value) && !state.query) {
+      return (
+        <span>
+          {renderer?.(state.value) ?? state.value[labelProperty] ?? state.value}
+        </span>
+      );
+    }
+  }, [state.value, state.query, placeholder, renderer]);
+
+  return (
+    <Wrapper {...wrapperProps}>
+      <InputWrapper
+        showClear={!isEmpty(state.value)}
+        onClear={handleChange}
+        invalid={invalid}
+        readOnly={readOnly}
+        disabled={disabled}
+        required={required}
+        error={error}
+        textarea
+        className="z-1 rounded-b-none"
+        data-inner={true}
+        wrapperRef={refs.setReference}
+      >
+        <div
+          data-select-display="true"
+          className="group flex-1 py-1 px-2 truncate text-start flex gap-1 flex-wrap"
+        >
+          {displayValue}
+          <input
+            disabled={disabled}
+            value={state.query}
+            aria-invalid={invalid}
+            data-testid={name}
+            name={name}
+            className={classNames(
+              "appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24",
+              disabled && "cursor-not-allowed pointer-events-none",
+            )}
+            placeholder={isEmpty(state.value) ? placeholder : ""}
+            {...referenceProps}
+            onChange={(evt) => handleQuery(evt.target.value)}
+          />
+        </div>
+      </InputWrapper>
+      <FloatingFocusManager
+        context={context}
+        initialFocus={-1}
+        visuallyHiddenDismiss
+      >
+        <Options
+          ref={refs.setFloating}
+          className="max-h-96 z-0 rounded-capped rounded-t-none outline"
+          style={{
+            height,
+          }}
+          {...floatingProps}
+          items={state.items}
+          active={state.activeIndex}
+          itemRef={setItemRef}
+          itemProps={makeItemProps}
+        >
+          {(item) => renderer?.(item) ?? item[labelProperty] ?? item}
+        </Options>
+      </FloatingFocusManager>
+    </Wrapper>
+  );
+};
diff --git a/packages/form/src/select/Options.tsx b/packages/form/src/select/Options.tsx
new file mode 100644
index 0000000..ff080b0
--- /dev/null
+++ b/packages/form/src/select/Options.tsx
@@ -0,0 +1,114 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { EmptyContent } from "@react-fabric/core";
+import classNames from "classnames";
+import { type ReactNode } from "react";
+import { Trans } from "react-i18next";
+
+export const Options = ({
+  ref,
+  style,
+  items,
+  active,
+  className,
+  itemRef,
+  itemProps,
+  children,
+  ...rest
+}: {
+  ref: AnyObject;
+  itemRef: AnyObject;
+  style?: AnyObject;
+  items: AnyObject[];
+  active: number | null;
+  className?: string;
+  itemProps: (item: AnyObject) => AnyObject;
+  children: (item: AnyObject) => ReactNode;
+} & KeyValue) => {
+  return (
+    <div
+      ref={ref}
+      className={classNames(
+        "bg-base overflow-x-hidden overflow-y-auto",
+        className,
+      )}
+      style={style}
+      {...rest}
+    >
+      {items.length === 0 && (
+        <EmptyContent message={<Trans i18nKey="form:select.emptyList" />} />
+      )}
+      {items.map((item, index) => {
+        if (item.___group___)
+          return (
+            <p
+              key={index}
+              className="px-2 py-1 text-dimmed text-sm sticky -top-px z-2 bg-base border-t"
+            >
+              {item.label}
+            </p>
+          );
+
+        if (item.___create___)
+          return (
+            <div
+              role="none"
+              key={index}
+              tabIndex={active === index ? 0 : -1}
+              ref={(el: AnyObject) => itemRef(index, el)}
+              data-active={active === index ? true : undefined}
+              className={classNames(
+                "block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none",
+                "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline",
+              )}
+              {...itemProps(item)}
+            >
+              <Trans
+                i18nKey="form:select.createOption"
+                values={{ query: item.value }}
+                components={[<strong key="t0">query</strong>]}
+              />
+            </div>
+          );
+
+        return (
+          <div
+            role="none"
+            key={index}
+            tabIndex={active === index ? 0 : -1}
+            ref={(el: AnyObject) => itemRef(index, el)}
+            data-active={active === index ? true : undefined}
+            className={classNames(
+              "block text-start truncate px-2 py-1 leading-normal cursor-pointer",
+              "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline",
+            )}
+            {...itemProps(item)}
+          >
+            {children(item)}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/packages/form/src/select/Select.tsx b/packages/form/src/select/Select.tsx
new file mode 100644
index 0000000..703c137
--- /dev/null
+++ b/packages/form/src/select/Select.tsx
@@ -0,0 +1,333 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingPortal,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListNavigation,
+  useTypeahead,
+} from "@floating-ui/react";
+import { Chip, CoreIcons, Icon } from "@react-fabric/core";
+import { isArray, isEmpty } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useCallback, useId, useLayoutEffect, useMemo } from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type SelectProps } from "../types";
+import { Options } from "./Options";
+import { useSelect } from "./useSelect";
+
+export const Select = <T extends AnyObject = string>({
+  ref,
+  name,
+  value,
+  invalid,
+  readOnly,
+  disabled,
+  required,
+  placeholder,
+  autoFocus,
+  error,
+  options,
+  groupProperty,
+  labelProperty,
+  valueProperty,
+  multiple,
+  searchable,
+  allowCreate,
+  createOption,
+  matcher,
+  renderer,
+  onQuery,
+  onChange,
+  onSelect,
+  onEnterPressed,
+  ...rest
+}: SelectProps<T>) => {
+  const {
+    state,
+    listRef,
+    listContentRef,
+    setOpen,
+    macthOption,
+    handleChange,
+    handleRemove,
+    handleQuery,
+    setItemRef,
+    setActiveIndex,
+  } = useSelect({
+    value,
+    options,
+    multiple,
+    groupProperty,
+    labelProperty,
+    valueProperty,
+    allowCreate,
+    createOption,
+    matcher,
+    onChange,
+    onSelect,
+    onQuery,
+  });
+
+  const dropdownKey = useId();
+
+  const { context, floatingStyles, refs } = useFloating({
+    open: state.open,
+    onOpenChange: (open, evt, reason) => {
+      !open && (listRef.current = []);
+      setOpen(open);
+    },
+    strategy: "fixed",
+    placement: "bottom",
+    whileElementsMounted: autoUpdate,
+    middleware: [shift({ padding: 8 }), flip(), offset(2)],
+  });
+
+  // floating interactions
+  const click = useClick(context, {});
+  const dismiss = useDismiss(context, {
+    // referencePress: true,
+  });
+
+  const navigation = useListNavigation(context, {
+    listRef,
+    activeIndex: state.activeIndex,
+    selectedIndex: state.selectedIndex,
+    loop: true,
+    virtual: true,
+    focusItemOnOpen: false,
+    onNavigate: setActiveIndex,
+  });
+
+  const typeahead = useTypeahead(context, {
+    listRef: listContentRef,
+    activeIndex: state.activeIndex,
+    selectedIndex: state.selectedIndex,
+    findMatch(list, typedString) {
+      return list.find((item) => macthOption(item, typedString));
+    },
+    onMatch(index) {
+      state.open && setActiveIndex(index);
+
+      !searchable &&
+        !multiple &&
+        !state.open &&
+        handleChange(listContentRef.current[index]);
+    },
+  });
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [dismiss, searchable ? undefined : click, navigation, typeahead],
+  );
+
+  const referenceProps = useMemo(() => {
+    const props: AnyObject = getReferenceProps();
+
+    return {
+      ...props,
+      onBlur(evt: React.FocusEvent) {
+        if (
+          evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)
+        ) {
+          refs.domReference.current?.querySelector("input")?.focus();
+          return;
+        }
+        handleQuery("");
+        setOpen(false);
+      },
+      onKeyDown(evt: React.KeyboardEvent) {
+        if (evt.key === "Enter") {
+          if (state.activeIndex !== null) {
+            handleChange(listContentRef.current[state.activeIndex]);
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
+          } else if (state.query) {
+            handleQuery("");
+          } else {
+            onEnterPressed?.(evt);
+          }
+        } else if (evt.key === "Backspace") {
+          !state.query && handleRemove();
+        } else if (!searchable || ["ArrowUp", "ArrowDown"].includes(evt.key)) {
+          if (
+            ["ArrowUp", "ArrowDown"].includes(evt.key) &&
+            state.activeIndex === null
+          ) {
+            setActiveIndex(state.selectedIndex);
+          }
+          setTimeout(() => {
+            props.onKeyDown?.(evt);
+          }, 50);
+        }
+      },
+    };
+  }, [
+    getReferenceProps,
+    onEnterPressed,
+    handleQuery,
+    refs,
+    state.query,
+    state.activeIndex,
+  ]);
+
+  const floatingProps = useMemo(() => {
+    return getFloatingProps({
+      "data-select-dropdown": dropdownKey,
+    } as AnyObject);
+  }, [getFloatingProps]);
+
+  const makeItemProps = useCallback(
+    (item: AnyObject) => {
+      const selected = state.value?.includes?.(item) ?? state.value === item;
+      return getItemProps({
+        "data-selected": selected ? true : undefined,
+        onClick() {
+          handleChange(item);
+        },
+      } as AnyObject);
+    },
+    [getItemProps, handleChange, state.value],
+  );
+
+  const displayValue = useMemo(() => {
+    if (isArray(state.value)) {
+      return state.value.map((item: AnyObject, index) => (
+        <Chip key={index} onRemove={() => handleRemove(index)}>
+          {renderer?.(item) ?? item[labelProperty] ?? item}
+        </Chip>
+      ));
+    } else if (!isEmpty(state.value) && !state.query) {
+      return (
+        <span>
+          {renderer?.(state.value) ?? state.value[labelProperty] ?? state.value}
+        </span>
+      );
+    }
+  }, [state.value, state.query, placeholder, renderer]);
+
+  const openDropdown = useCallback(() => {
+    setOpen(true);
+    refs.domReference.current?.querySelector("input")?.focus();
+  }, []);
+
+  useLayoutEffect(() => {
+    state.open &&
+      setTimeout(() => {
+        state.selectedIndex &&
+          listRef.current[state.selectedIndex]?.scrollIntoView({
+            block: "center",
+          });
+      }, 100);
+  }, [state.open]);
+
+  return (
+    <InputWrapper
+      showClear={!isEmpty(state.value)}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      error={error}
+      wrapperRef={refs.setReference}
+      className={state.open ? "!z-[99]" : ""}
+      {...rest}
+    >
+      <div
+        data-select-display="true"
+        className="group flex-1 py-1 px-2 truncate text-start flex gap-1 flex-wrap"
+      >
+        {displayValue}
+        <input
+          readOnly={!searchable || readOnly}
+          disabled={disabled}
+          value={state.query}
+          aria-invalid={invalid}
+          data-testid={name}
+          name={name}
+          className={classNames(
+            "appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24",
+            disabled && "cursor-not-allowed pointer-events-none",
+          )}
+          placeholder={isEmpty(state.value) ? placeholder : ""}
+          {...referenceProps}
+          onChange={(evt) => handleQuery(evt.target.value)}
+        />
+      </div>
+      {!state.loading && (
+        <Icon
+          className={classNames(
+            "flex-content p-2 z-0 order-9 text-muted cursor-pointer self-stretch flex items-center h-auto",
+            state.open && "-scale-y-100 pointer-events-none",
+            disabled && "pointer-events-none",
+          )}
+          onClick={() => !disabled && openDropdown()}
+          icon={CoreIcons.chevronDown}
+        />
+      )}
+      {state.loading && (
+        <Icon
+          animate="spin"
+          className={classNames(
+            "flex-content p-2 z-0 order-9 text-muted pointer-events-none",
+          )}
+          icon={CoreIcons.spinner}
+        />
+      )}
+      {state.open && !state.loading && (
+        <FloatingPortal>
+          <FloatingFocusManager
+            context={context}
+            initialFocus={-1}
+            visuallyHiddenDismiss
+          >
+            <Options
+              ref={refs.setFloating}
+              className="outline shadow-lg max-h-[40vh] z-[var(--z-popover)]"
+              style={{
+                width: refs.reference.current?.getBoundingClientRect().width,
+                ...floatingStyles,
+              }}
+              {...floatingProps}
+              items={state.items}
+              active={state.activeIndex}
+              itemRef={setItemRef}
+              itemProps={makeItemProps}
+            >
+              {(item) => renderer?.(item) ?? item[labelProperty] ?? item}
+            </Options>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      )}
+    </InputWrapper>
+  );
+};
diff --git a/packages/form/src/select/helpers.ts b/packages/form/src/select/helpers.ts
new file mode 100644
index 0000000..4a36740
--- /dev/null
+++ b/packages/form/src/select/helpers.ts
@@ -0,0 +1,36 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isArray } from "@react-fabric/utilities";
+
+export const makeOption = (query: string) => query;
+
+export const getSelectedValue = (
+  value: AnyObject,
+  emptyValue: AnyObject,
+  valueProperty: AnyObject = "",
+) => {
+  return isArray(value)
+    ? value.map((val: AnyObject) => val[valueProperty] ?? val)
+    : value?.[valueProperty] ?? value ?? emptyValue;
+};
diff --git a/packages/form/src/select/useSelect.tsx b/packages/form/src/select/useSelect.tsx
new file mode 100644
index 0000000..e13a51b
--- /dev/null
+++ b/packages/form/src/select/useSelect.tsx
@@ -0,0 +1,356 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useDebounce } from "@react-fabric/core";
+import { groupBy, matchString } from "@react-fabric/utilities";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from "react";
+import { getSelectedValue, makeOption } from "./helpers";
+
+type StateActions =
+  | {
+      type: "open";
+    }
+  | { type: "close" }
+  | {
+      type: "options";
+      options: AnyObject[];
+      query?: string;
+      open?: boolean;
+      setActive?: true;
+    }
+  | { type: "startQuery"; query: string }
+  | { type: "setValue"; value: AnyObject }
+  | { type: "changeValue"; value: AnyObject }
+  | { type: "removeItem"; index?: number }
+  | { type: "active"; index: number | null };
+
+interface State {
+  multiple: boolean;
+  emptyValue: AnyObject;
+  open: boolean;
+  loading: boolean;
+  activeIndex: number | null;
+  selectedIndex: number | null;
+  value: AnyObject;
+  // filter
+  query?: string;
+  // dropdown items
+  items: AnyObject[];
+}
+
+export const EMPTY_ARRAY: AnyObject[] = [];
+Object.freeze(EMPTY_ARRAY);
+
+export const useSelect = ({
+  options = EMPTY_ARRAY,
+  value,
+  multiple = false,
+  allowCreate = false,
+  groupProperty = "",
+  valueProperty = "id",
+  labelProperty = "label",
+  createOption = makeOption,
+  matcher,
+  onQuery,
+  onChange,
+  onSelect,
+}: {
+  value?: AnyObject;
+  options?: AnyObject[];
+  multiple?: boolean;
+  allowCreate?: boolean;
+  groupProperty?: AnyObject;
+  valueProperty?: AnyObject;
+  labelProperty?: AnyObject;
+  matcher?: (item: AnyObject, query: string) => boolean;
+  createOption?: (query: string) => AnyObject;
+  onQuery?: (query: string) => AnyObject;
+  onSelect?: (item: AnyObject) => void;
+  onChange?: (value: AnyObject) => void;
+}) => {
+  // value state
+  const emptyValue = useMemo(() => (multiple ? [] : ""), [multiple]);
+  const deferred = useDeferredValue(value);
+
+  // list items
+  const listRef = useRef<HTMLElement[]>([]);
+  const focusableRef = useRef<HTMLElement>(null);
+  const listContentRef = useRef<AnyObject[]>([]);
+  const optionsRef = useRef<AnyObject[]>([]);
+
+  const macthOption = useCallback(
+    (item: AnyObject, query: string) => {
+      return (
+        matcher?.(item, query) ??
+        matchString(item[labelProperty] ?? item, query)
+      );
+    },
+    [matcher],
+  );
+
+  const fireChange = useCallback(
+    (value: AnyObject) => {
+      setTimeout(() => {
+        onSelect?.(value ?? emptyValue);
+        onChange?.(getSelectedValue(value, emptyValue, valueProperty));
+      }, 50);
+    },
+    [emptyValue],
+  );
+
+  const [state, dispatch] = useReducer(
+    (state: State, action: StateActions) => {
+      if (action.type === "open") {
+        const index = state.items.indexOf(
+          state.multiple ? state.value[0] : state.value,
+        );
+        return {
+          ...state,
+          open: true,
+          activeIndex: index > -1 ? index : null,
+        };
+      }
+      if (action.type === "close") {
+        return { ...state, activeIndex: null, open: false };
+      }
+      if (action.type === "active") {
+        return { ...state, activeIndex: action.index };
+      }
+      if (action.type === "setValue") {
+        return {
+          ...state,
+          value: action.value,
+          selectedIndex: state.items.indexOf(
+            state.multiple ? action.value[0] : action.value,
+          ),
+        };
+      }
+      if (action.type === "changeValue") {
+        const newState = {
+          ...state,
+          value: state.emptyValue,
+          activeIndex: null,
+          selectedIndex: state.items.indexOf(action.value),
+        };
+        if (action.value) {
+          if (multiple) {
+            newState.value = state.value.includes?.(action.value)
+              ? state.value.filter((item: AnyObject) => item !== action.value)
+              : [...state.value, action.value];
+          } else {
+            newState.value = action.value;
+          }
+        }
+        if (!state.multiple) newState.open = false;
+        fireChange(newState.value);
+        return newState;
+      }
+      if (action.type === "removeItem") {
+        let newValue = state.value;
+
+        if (state.multiple) {
+          newValue.splice(action.index ?? -1, 1);
+        } else {
+          newValue = "";
+        }
+        fireChange(newValue);
+        return {
+          ...state,
+          value: newValue,
+        };
+      }
+      if (action.type === "startQuery") {
+        return {
+          ...state,
+          loading: true,
+          query: action.query,
+        };
+      }
+      if (action.type === "options") {
+        const newState = {
+          ...state,
+          loading: false,
+          query: action.query ?? "",
+        };
+        const grouped = groupBy(action.options, groupProperty, "");
+        if (action.open) newState.open = true;
+        newState.items = [];
+        // add new item if allowCreate
+        if (allowCreate && action.query)
+          newState.items.push({
+            ___create___: true,
+            value: createOption(action.query),
+          });
+        Object.entries(grouped).forEach(([key, list]) => {
+          if (key) {
+            newState.items.push({ ___group___: true, label: key });
+          }
+          newState.items.push(...list);
+        });
+        if (action.setActive) {
+          const index = newState.items.findIndex(
+            (opt: AnyObject) => !opt.___group___,
+          );
+          newState.activeIndex = index >= 0 ? index : null;
+        } else {
+          newState.activeIndex = null;
+        }
+        listContentRef.current = newState.items;
+        return newState;
+      }
+      return state;
+    },
+    {
+      multiple,
+      emptyValue,
+      open: false,
+      loading: false,
+      activeIndex: null,
+      selectedIndex: null,
+      value: emptyValue,
+      // filter
+      query: "",
+      // dropdown items
+      items: [],
+    },
+  );
+
+  useEffect(() => {
+    optionsRef.current = options;
+    dispatch({ type: "options", options });
+  }, [options]);
+
+  useEffect(() => {
+    if (!multiple) {
+      const newOption = allowCreate && deferred ? createOption(deferred) : "";
+      dispatch({
+        type: "setValue",
+        value:
+          options.find(
+            (opt: AnyObject) => (opt[valueProperty] ?? opt) === deferred,
+          ) ??
+          newOption ??
+          "",
+      });
+    }
+    if (multiple) {
+      dispatch({
+        type: "setValue",
+        value: (deferred ?? []).map((item: AnyObject) => {
+          const newOption = allowCreate && item ? createOption(item) : "";
+          return (
+            options.find(
+              (opt: AnyObject) => (opt[valueProperty] ?? opt) === item,
+            ) ??
+            newOption ??
+            ""
+          );
+        }),
+      });
+    }
+  }, [deferred, options, multiple, allowCreate, createOption]);
+
+  const fireQuery = useDebounce(
+    (query: string) => {
+      void Promise.resolve(onQuery?.(query)).then((options) => {
+        optionsRef.current = options;
+        dispatch({
+          type: "options",
+          query,
+          options,
+          open: true,
+          setActive: true,
+        });
+      });
+    },
+    [onQuery],
+  );
+
+  // handlers
+  const handleQuery = useCallback(
+    (query: string) => {
+      if (!query) {
+        dispatch({ type: "options", options: optionsRef.current });
+      } else {
+        if (onQuery) {
+          dispatch({ type: "startQuery", query });
+          return fireQuery(query);
+        }
+        dispatch({
+          type: "options",
+          query,
+          open: true,
+          setActive: true,
+          options: options.filter((opt: AnyObject) => {
+            return macthOption?.(opt, query);
+          }),
+        });
+      }
+    },
+    [options, macthOption, onQuery],
+  );
+
+  const handleChange = useCallback((value?: AnyObject) => {
+    dispatch({
+      type: "changeValue",
+      value: value?.___create___ ? value.value : value,
+    });
+    dispatch({ type: "options", options: optionsRef.current });
+  }, []);
+
+  const handleRemove = useCallback((index?: number) => {
+    dispatch({ type: "removeItem", index });
+  }, []);
+
+  const setOpen = useCallback((open: boolean) => {
+    dispatch({ type: open ? "open" : "close" });
+    handleQuery("");
+  }, []);
+
+  const setActiveIndex = useCallback((index: number | null) => {
+    dispatch({ type: "active", index });
+  }, []);
+
+  return {
+    state,
+    listRef,
+    focusableRef,
+    listContentRef,
+    handleChange,
+    handleRemove,
+    handleQuery,
+    macthOption,
+    setActiveIndex,
+    setOpen,
+    setItemRef: (index: number, node: HTMLElement) => {
+      listRef.current[index] = node;
+    },
+  };
+};
diff --git a/packages/form/src/types/index.ts b/packages/form/src/types/index.ts
new file mode 100644
index 0000000..e75f512
--- /dev/null
+++ b/packages/form/src/types/index.ts
@@ -0,0 +1,203 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+
+export interface InputProps<V = string> {
+  /**
+   * value
+   */
+  value?: V;
+  /**
+   * change handler
+   */
+  onChange?: (value?: V) => void;
+  /**
+   * on focus event handler
+   */
+  onFocus?: React.FocusEventHandler;
+  /**
+   * on blur event handler
+   */
+  onBlur?: React.FocusEventHandler;
+  /**
+   * on enter press callback
+   */
+  onEnterPressed?: React.KeyboardEventHandler;
+
+  /**
+   * input name
+   */
+  name?: string;
+  /**
+   * input label
+   */
+  label?: string;
+  /**
+   * input placeholder
+   */
+  placeholder?: string;
+  /**
+   * append to label end
+   */
+  appendLabel?: JSX.Element | string | number | boolean;
+  /**
+   *
+   */
+  decorateStart?: JSX.Element | string | number | boolean;
+  /**
+   *
+   */
+  decorateEnd?: JSX.Element | string | number | boolean;
+  /**
+   * info label at bottom
+   */
+  info?: string;
+
+  /**
+   * required
+   */
+  required?: boolean;
+  /**
+   * disabled input
+   */
+  disabled?: boolean;
+  /**
+   * read-only input
+   */
+  readOnly?: boolean;
+  /**
+   * auto focus when rendered
+   */
+  autoFocus?: boolean;
+  /**
+   * show clear button
+   */
+  allowClear?: boolean;
+  /**
+   * invalid value input
+   */
+  invalid?: boolean;
+  /**
+   * error message
+   */
+  error?: string;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+  /**
+   * inline label and input
+   */
+  inline?: boolean;
+  /**
+   * label width for inline
+   */
+  labelWidth?: string;
+}
+
+export interface BaseSelectProps<T>
+  extends RefProp<HTMLInputElement>,
+    Omit<InputProps, "value" | "onChange"> {
+  /**
+   * list options
+   */
+  options?: T[];
+  /**
+   * group by property name
+   */
+  groupProperty?: keyof T;
+  /**
+   * label property name
+   */
+  labelProperty?: keyof T;
+  /**
+   * value property name
+   */
+  valueProperty?: keyof T;
+  /**
+   * searchable list
+   */
+  searchable?: boolean;
+  /**
+   * allow create item
+   */
+  allowCreate?: boolean;
+  /**
+   * create new item object
+   */
+  createOption?: (query: string) => T;
+  /**
+   * query handler
+   */
+  onQuery?: (query: string) => T[] | Promise<T[]>;
+  /**
+   * item renderer
+   */
+  renderer?: (option: T) => React.ReactNode;
+  /**
+   * item matcher
+   */
+  matcher?: (option: T, query: string) => boolean;
+}
+
+export type SelectProps<T> = BaseSelectProps<T> &
+  (
+    | {
+        /**
+         * is multiple selection
+         */
+        multiple?: never | false;
+        /**
+         * selected value
+         */
+        value?: string;
+        /**
+         * select handler
+         */
+        onSelect?: (option: T) => void;
+        /**
+         * change handler
+         */
+        onChange?: (value?: string) => void;
+      }
+    | {
+        /**
+         * is multiple selection
+         */
+        multiple: true;
+        /**
+         * selected value
+         */
+        value?: string[];
+        /**
+         * select handler
+         */
+        onSelect?: (option: T[]) => void;
+        /**
+         * change handler
+         */
+        onChange?: (value?: string[]) => void;
+      }
+  );
diff --git a/packages/form/src/utils/eventHandlers.ts b/packages/form/src/utils/eventHandlers.ts
new file mode 100644
index 0000000..01a8279
--- /dev/null
+++ b/packages/form/src/utils/eventHandlers.ts
@@ -0,0 +1,72 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+import { debounce } from "@react-fabric/utilities";
+import { type KeyboardEvent, type MouseEvent } from "react";
+
+/** ***************** common handler for enter press *******************/
+export const handleEnter = (
+  callback?: (e: KeyboardEvent) => void,
+  {
+    stopPropagation = false,
+    preventDefault = false,
+  }: { stopPropagation?: boolean; preventDefault?: boolean } = {},
+) => {
+  const cbHandle = debounce(callback ?? (() => undefined), 100);
+  return (e: KeyboardEvent) => {
+    if (
+      !e.shiftKey &&
+      !e.altKey &&
+      !e.metaKey &&
+      e.key === "Enter" &&
+      callback
+    ) {
+      if (stopPropagation) e?.stopPropagation();
+      cbHandle(e);
+      if (preventDefault) {
+        e.preventDefault();
+        return false;
+      }
+    }
+  };
+};
+
+/** ***************** common handler for mouse primary click *******************/
+export const handleClick = (
+  callback?: (e: MouseEvent) => void,
+  {
+    stopPropagation = false,
+    preventDefault = false,
+  }: { stopPropagation?: boolean; preventDefault?: boolean } = {},
+) => {
+  return (e: MouseEvent) => {
+    if (stopPropagation) e?.stopPropagation();
+    (e?.button ?? 0) === 0 && callback?.(e);
+    if (preventDefault) {
+      e.preventDefault();
+      return false;
+    }
+  };
+};
diff --git a/packages/form/src/utils/getColor.ts b/packages/form/src/utils/getColor.ts
new file mode 100644
index 0000000..147833c
--- /dev/null
+++ b/packages/form/src/utils/getColor.ts
@@ -0,0 +1,47 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isColor } from "@react-fabric/utilities";
+
+export const getColor = (color?: string) => {
+  if (color && isColor(color)) {
+    return color;
+  }
+};
+
+export const getBgClass = (bg: string) => {
+  if (bg && !isColor(bg)) {
+    return `bg-${bg}`;
+  }
+};
+
+export const getColorClass = (color: string) => {
+  if (color && !isColor(color)) {
+    return `text-${color}`;
+  }
+};
+export const getBorderClass = (color: string) => {
+  if (color && !isColor(color)) {
+    return `border-${color}`;
+  }
+};
diff --git a/packages/form/src/utils/index.ts b/packages/form/src/utils/index.ts
new file mode 100644
index 0000000..41f672d
--- /dev/null
+++ b/packages/form/src/utils/index.ts
@@ -0,0 +1,26 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export * from "./eventHandlers";
+export * from "./getColor";
+export * from "./yup";
diff --git a/packages/form/src/utils/yup.ts b/packages/form/src/utils/yup.ts
new file mode 100644
index 0000000..4e3a79a
--- /dev/null
+++ b/packages/form/src/utils/yup.ts
@@ -0,0 +1,73 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import * as _yup from "yup";
+
+_yup.setLocale({
+  mixed: {
+    default: ({ path, label }) => ({
+      key: "form:yup.invalid",
+      values: { path, label },
+    }),
+    required: ({ path, label }) => ({
+      key: "form:yup.required",
+      values: { path, label },
+    }),
+    notType: ({ type, path, label }) => ({
+      key: "form:yup.invalidType",
+      values: { type, path, label },
+    }),
+  },
+  array: {
+    min: ({ min, path, label }) => ({
+      key: "form:yup.arrayMin",
+      values: { min, path, label },
+    }),
+    max: ({ max, path, label }) => ({
+      key: "form:yup.arrayMax",
+      values: { max, path, label },
+    }),
+  },
+  string: {
+    min: ({ min, path, label }) => ({
+      key: "form:yup.stringMin",
+      values: { min, path, label },
+    }),
+    max: ({ max, path, label }) => ({
+      key: "form:yup.stringMax",
+      values: { max, path, label },
+    }),
+  },
+  number: {
+    min: ({ min, path, label }) => ({
+      key: "form:yup.numberMin",
+      values: { min, path, label },
+    }),
+    max: ({ max, path, label }) => ({
+      key: "form:yup.numberMax",
+      values: { max, path, label },
+    }),
+  },
+  boolean: {},
+});
+export * as yup from "yup";
diff --git a/packages/form/stories/form/ArrayInput.stories.tsx b/packages/form/stories/form/ArrayInput.stories.tsx
new file mode 100644
index 0000000..a5392cc
--- /dev/null
+++ b/packages/form/stories/form/ArrayInput.stories.tsx
@@ -0,0 +1,128 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Button } from "@react-fabric/core";
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { ArrayInput, Controller, Field, Form, Input, yup } from "../../src";
+
+const meta: Meta = {
+  component: ArrayInput,
+  title: "@form/Form",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/ArrayInput.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ArrayInputStory = StoryObj<typeof ArrayInput>;
+
+export const _ArrayInput: ArrayInputStory = {
+  render: (args) => {
+    const { t } = useTranslation("form");
+    const schema = useRef(
+      yup.object({
+        names: yup
+          .array(
+            yup.object({
+              name: yup.string().required().label("Name item"),
+            }),
+          )
+          .min(1)
+          .label("Name list"),
+        fullnames: yup
+          .array(
+            yup.object({
+              firstName: yup.string().required().label("First name"),
+              lastName: yup.string().required().label("Last name"),
+            }),
+          )
+          .min(1)
+          .label("Fullname list"),
+      }),
+    );
+
+    return (
+      <Form
+        onSubmit={action("onSubmit")}
+        schema={schema.current}
+        defaultValues={{
+          names: [],
+        }}
+      >
+        <div className="mx-auto w-96">
+          <ArrayInput
+            required
+            name="names"
+            label="Names list"
+            addLabel="Add Name"
+            onAdd={() => ({ name: "" })}
+          >
+            <Controller name="name">
+              <Input autoFocus placeholder="Name.." />
+            </Controller>
+          </ArrayInput>
+
+          <ArrayInput
+            required
+            name="fullnames"
+            label="Fullnames list"
+            addLabel="Add Fullname"
+            onAdd={() => ({ firstName: "", lastName: "" })}
+          >
+            {({ index, name }) => (
+              <Field key={index}>
+                <Controller name={`${name}.firstName`}>
+                  <Input autoFocus placeholder="First name.." />
+                </Controller>
+                <Controller name={`${name}.lastName`}>
+                  <Input width="96px" placeholder="Last name.." />
+                </Controller>
+              </Field>
+            )}
+          </ArrayInput>
+
+          <div className="flex justify-end gap-2 mt-8">
+            <Button type="reset" variant="outline">
+              Reset
+            </Button>
+            <Button type="submit" variant="solid">
+              Submit
+            </Button>
+          </div>
+        </div>
+      </Form>
+    );
+  },
+  args: {},
+};
diff --git a/packages/form/stories/form/Form.mdx b/packages/form/stories/form/Form.mdx
new file mode 100644
index 0000000..e8e53a4
--- /dev/null
+++ b/packages/form/stories/form/Form.mdx
@@ -0,0 +1,75 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Form } from "../../src";
+import * as FormStories from "./Form.stories";
+import * as ArrayInputStories from "./ArrayInput.stories";
+
+<Meta of={FormStories} />
+
+<Title>Form</Title>
+
+<Anchor storyId="form">
+  <div className="hidden-anchor">
+    <Subheading>Form</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Form} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={FormStories._Form} />
+</Collapsable>
+
+<Anchor storyId="array">
+  <Subheading>Array Input</Subheading>
+</Anchor>
+<Description of={ArrayInputStories._ArrayInput} />
+<Canvas withToolbar of={ArrayInputStories._ArrayInput} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ArrayInputStories._ArrayInput} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Form } from "@react-fabric/form";
+
+export const Example = () => {
+  return (
+    <Form
+      schema={yup schema}
+      defaultValue={{}}
+      onSubmit={}
+      onChange={}
+    />
+  );
+};
+```
diff --git a/packages/form/stories/form/Form.stories.tsx b/packages/form/stories/form/Form.stories.tsx
new file mode 100644
index 0000000..3fe4406
--- /dev/null
+++ b/packages/form/stories/form/Form.stories.tsx
@@ -0,0 +1,169 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { addTranslationBundle, Button, Divider } from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useCallback, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ArrayInput,
+  Controller,
+  Form,
+  Input,
+  Number,
+  Password,
+  yup,
+} from "../../src";
+
+const meta: Meta = {
+  component: Form,
+  subcomponents: { Controller, ArrayInput } as AnyObject,
+  title: "@form/Form",
+  parameters: {
+    layout: "fullscreen",
+    controls: { exclude: "schema" },
+    jest: ["form/tests/Form.test.tsx"],
+  },
+};
+
+export default meta;
+type FormStory = StoryObj<typeof Form>;
+
+addTranslationBundle("form", {
+  en: {
+    firstName: "First Name",
+    lastName: "Last Name",
+    age: "Age",
+    username: "Username",
+    passwd: "Password",
+    notStrong:
+      "Password not strong enough, must have\n2 uppercase, 2 lowercase, 2 numerals and 2 special character",
+  },
+});
+
+export const _Form: FormStory = {
+  render: (args) => {
+    const { t } = useTranslation("form");
+    const schema = useRef(
+      yup.object({
+        firstName: yup.string().required().label("form:firstName"),
+        lastName: yup.string().required().label("form:lastName"),
+        age: yup.number().min(18).max(65).required().label("form:age"),
+        username: yup.string().required().min(6).label("form:username"),
+        password: yup
+          .string()
+          .required()
+          .min(6)
+          .label("form:passwd")
+          .test("isStrong", (value, context) => {
+            if (
+              Array.from(value.matchAll(/[A-Z]/g)).length < 2 ||
+              Array.from(value.matchAll(/[a-z]/g)).length < 2 ||
+              Array.from(value.matchAll(/\d/g)).length < 2 ||
+              Array.from(value.matchAll(/\W/g)).length < 2
+            ) {
+              return context.createError({
+                message: t("notStrong"),
+              });
+            }
+            return true;
+          }),
+      }),
+    );
+
+    const [strength, setStrength] = useState(0);
+    const calculateStrength = useCallback((value: string = "") => {
+      if (!value) setStrength(0);
+      const upper = Array.from(value.matchAll(/[A-Z]/g)).length;
+      const lower = Array.from(value.matchAll(/[a-z]/g)).length;
+      const digit = Array.from(value.matchAll(/\d/g)).length;
+      const special = Array.from(value.matchAll(/\W/g)).length;
+      const delta = Math.max(value.length / 4, 1);
+
+      setStrength(
+        (Math.min(upper / delta, 1) +
+          Math.min(lower / delta, 1) +
+          Math.min(digit / delta, 1) +
+          Math.min(special / delta, 1)) /
+          4,
+      );
+    }, []);
+
+    return (
+      <div className="min-h-[600px]">
+        <Form
+          {...args}
+          schema={schema.current}
+          defaultValues={{
+            firstName: "",
+            lastName: "",
+            age: undefined,
+          }}
+        >
+          <div className="mx-auto w-96">
+            <Controller name="firstName">
+              <Input autoFocus required label={t("firstName")} />
+            </Controller>
+            <Controller name="lastName">
+              <Input required label={t("lastName")} />
+            </Controller>
+            <Controller name="age">
+              <Number
+                required
+                label={t("age")}
+                info="Must be between 18 and 65 years"
+              />
+            </Controller>
+            <Divider />
+            <Controller name="username">
+              <Input required label={t("username")} />
+            </Controller>
+            <Controller name="password">
+              <Password
+                showToggle
+                required
+                label={t("passwd")}
+                onChange={calculateStrength}
+                strength={strength}
+              />
+            </Controller>
+
+            <div className="flex justify-end gap-2 mt-8">
+              <Button
+                type="reset"
+                variant="outline"
+                onClick={() => setStrength(0)}
+              >
+                Reset
+              </Button>
+              <Button type="submit" variant="solid">
+                Submit
+              </Button>
+            </div>
+          </div>
+        </Form>
+      </div>
+    );
+  },
+  args: {},
+};
diff --git a/packages/form/stories/inputs/Checkbox.stories.tsx b/packages/form/stories/inputs/Checkbox.stories.tsx
new file mode 100644
index 0000000..6274ebd
--- /dev/null
+++ b/packages/form/stories/inputs/Checkbox.stories.tsx
@@ -0,0 +1,65 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Checkbox } from "../../src";
+
+const meta: Meta = {
+  component: Checkbox,
+  title: "@form/Inputs",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/Checkbox.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type CheckboxStory = StoryObj<typeof Checkbox>;
+
+export const _Checkbox: CheckboxStory = {
+  render: (args) => {
+    return (
+      <div className="flex gap-2">
+        <Checkbox {...args} />
+        <Checkbox {...args} icon="mdi mdi-bell" />
+        <Checkbox
+          {...args}
+          icon="mdi mdi-eye-outline"
+          iconChecked="mdi mdi-eye"
+        />
+      </div>
+    );
+  },
+  args: {
+    label: "Checkbox input",
+    onChange: fn(),
+  },
+};
diff --git a/packages/form/stories/inputs/ColorInput.stories.tsx b/packages/form/stories/inputs/ColorInput.stories.tsx
new file mode 100644
index 0000000..cf48851
--- /dev/null
+++ b/packages/form/stories/inputs/ColorInput.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { ColorInput } from "../../src";
+
+const meta: Meta = {
+  component: ColorInput,
+  title: "@form/Inputs",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/ColorInput.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[6rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ColorInputStory = StoryObj<typeof ColorInput>;
+
+export const _ColorInput: ColorInputStory = {
+  render: (args) => {
+    return <ColorInput {...args} />;
+  },
+  args: {
+    label: "Color input",
+    placeholder: "Color input...",
+    allowClear: true,
+    showPicker: true,
+    onChange: fn(),
+    onEnterPressed: fn(),
+  },
+};
diff --git a/packages/form/stories/inputs/File.stories.tsx b/packages/form/stories/inputs/File.stories.tsx
new file mode 100644
index 0000000..9d201a2
--- /dev/null
+++ b/packages/form/stories/inputs/File.stories.tsx
@@ -0,0 +1,58 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { FileInput } from "../../src";
+
+const meta: Meta = {
+  component: FileInput,
+  title: "@form/Inputs",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/File.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type FileStory = StoryObj<typeof FileInput>;
+
+export const _FileInput: FileStory = {
+  render: (args) => {
+    return <FileInput {...args} />;
+  },
+  args: {
+    label: "File input",
+    placeholder: "File input...",
+    allowClear: true,
+    onChange: fn(),
+    onEnterPressed: fn(),
+  },
+};
diff --git a/packages/form/stories/inputs/Input.mdx b/packages/form/stories/inputs/Input.mdx
new file mode 100644
index 0000000..15d925d
--- /dev/null
+++ b/packages/form/stories/inputs/Input.mdx
@@ -0,0 +1,192 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Input } from "../../src";
+import * as InputStories from "./Input.stories";
+import * as NumberStories from "./Number.stories";
+import * as ColorInputStories from "./ColorInput.stories";
+import * as TextareaStories from "./Textarea.stories";
+import * as OtherStories from "./Others.stories";
+import * as FileStories from "./File.stories";
+import * as CheckboxStories from "./Checkbox.stories";
+import * as RadioStories from "./Radio.stories";
+import * as SwitchStories from "./Switch.stories";
+import * as PasswordStories from "./Password.stories";
+import * as SearchStories from "./Search.stories";
+
+<Meta of={InputStories} />
+
+<Title>Inputs</Title>
+
+<Anchor storyId="input">
+  <div className="hidden-anchor">
+    <Subheading>Input</Subheading>
+  </div>
+</Anchor>
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={InputStories._Input} />
+</Collapsable>
+
+<Anchor storyId="password">
+  <Subheading>Password</Subheading>
+</Anchor>
+<Description of={PasswordStories._Password} />
+<Canvas withToolbar of={PasswordStories._Password} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={PasswordStories._Password} />
+</Collapsable>
+
+<Anchor storyId="number">
+  <Subheading>Number</Subheading>
+</Anchor>
+<Description of={NumberStories._Number} />
+<Canvas withToolbar of={NumberStories._Number} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={NumberStories._Number} />
+</Collapsable>
+
+<Anchor storyId="search">
+  <Subheading>Search</Subheading>
+</Anchor>
+<Description of={SearchStories._Search} />
+<Canvas withToolbar of={SearchStories._Search} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={SearchStories._Search} />
+</Collapsable>
+
+<Anchor storyId="textarea">
+  <Subheading>Textarea</Subheading>
+</Anchor>
+<Description of={TextareaStories._Textarea} />
+<Canvas withToolbar of={TextareaStories._Textarea} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={TextareaStories._Textarea} />
+</Collapsable>
+
+<Anchor storyId="file">
+  <Subheading>File</Subheading>
+</Anchor>
+<Description of={FileStories._FileInput} />
+<Canvas withToolbar of={FileStories._FileInput} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={FileStories._FileInput} />
+</Collapsable>
+
+<Anchor storyId="color">
+  <Subheading>Color Input</Subheading>
+</Anchor>
+<Description of={ColorInputStories._ColorInput} />
+<Canvas withToolbar of={ColorInputStories._ColorInput} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ColorInputStories._ColorInput} />
+</Collapsable>
+
+<Anchor storyId="checkbox">
+  <Subheading>Checkbox</Subheading>
+</Anchor>
+<Description of={CheckboxStories._Checkbox} />
+<Canvas withToolbar of={CheckboxStories._Checkbox} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={CheckboxStories._Checkbox} />
+</Collapsable>
+
+<Anchor storyId="radio">
+  <Subheading>Radio</Subheading>
+</Anchor>
+<Description of={RadioStories._Radio} />
+<Canvas withToolbar of={RadioStories._Radio} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={RadioStories._Radio} />
+</Collapsable>
+
+<Anchor storyId="switch">
+  <Subheading>Switch</Subheading>
+</Anchor>
+<Description of={SwitchStories._Switch} />
+<Canvas withToolbar of={SwitchStories._Switch} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={SwitchStories._Switch} />
+</Collapsable>
+
+<Anchor storyId="withDecorators">
+  <Subheading>With Decorators</Subheading>
+</Anchor>
+<Description of={OtherStories.WithDecorators} />
+<Canvas withToolbar of={OtherStories.WithDecorators} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={OtherStories.WithDecorators} />
+</Collapsable>
+
+<Anchor storyId="invalid">
+  <Subheading>Invalid</Subheading>
+</Anchor>
+<Description of={OtherStories.InvalidInput} />
+<Canvas withToolbar of={OtherStories.InvalidInput} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={OtherStories.InvalidInput} />
+</Collapsable>
+
+<Anchor storyId="disabled">
+  <Subheading>Disabled</Subheading>
+</Anchor>
+<Description of={OtherStories.DisabledInput} />
+<Canvas withToolbar of={OtherStories.DisabledInput} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={OtherStories.DisabledInput} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Input } from "@react-fabric/form";
+
+export const Example = () => {
+  return (
+    <Input
+      placeholder="Placeholder..."
+      label="Input label"
+      value={value}
+      onChange={handleChange}
+    />
+  );
+};
+```
diff --git a/packages/form/stories/inputs/Input.stories.tsx b/packages/form/stories/inputs/Input.stories.tsx
new file mode 100644
index 0000000..4769e2c
--- /dev/null
+++ b/packages/form/stories/inputs/Input.stories.tsx
@@ -0,0 +1,82 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import {
+  Checkbox,
+  ColorInput,
+  FileInput,
+  Input,
+  Number,
+  Password,
+  Radio,
+  RadioGroup,
+  Search,
+  Switch,
+  Textarea,
+} from "../../src";
+
+const meta: Meta = {
+  component: Input,
+  subcomponents: {
+    Password,
+    Number,
+    Search,
+    FileInput,
+    ColorInput,
+    Textarea,
+    Checkbox,
+    Switch,
+    Radio,
+    RadioGroup,
+  } as AnyObject,
+  title: "@form/Inputs",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/Input.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type InputStory = StoryObj<typeof Input>;
+
+export const _Input: InputStory = {
+  render: (args) => {
+    return <Input {...args} />;
+  },
+  args: {
+    label: "Text input",
+    placeholder: "Text input...",
+    allowClear: true,
+    onChange: fn(),
+    onEnterPressed: fn(),
+  },
+};
diff --git a/packages/form/stories/inputs/Number.stories.tsx b/packages/form/stories/inputs/Number.stories.tsx
new file mode 100644
index 0000000..6d7f91b
--- /dev/null
+++ b/packages/form/stories/inputs/Number.stories.tsx
@@ -0,0 +1,60 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Number } from "../../src";
+
+const meta: Meta = {
+  component: Number,
+  title: "@form/Inputs",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/Number.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type NumberStory = StoryObj<typeof Number>;
+
+export const _Number: NumberStory = {
+  render: (args) => {
+    return <Number {...args} />;
+  },
+  args: {
+    label: "Number input",
+    placeholder: "Number input...",
+    allowClear: true,
+    min: -99,
+    max: 99,
+    onChange: fn(),
+    onEnterPressed: fn(),
+  },
+};
diff --git a/packages/form/stories/inputs/Others.stories.tsx b/packages/form/stories/inputs/Others.stories.tsx
new file mode 100644
index 0000000..2ba24dc
--- /dev/null
+++ b/packages/form/stories/inputs/Others.stories.tsx
@@ -0,0 +1,93 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Button, Icon } from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Input } from "../../src";
+
+const meta: Meta = {
+  component: Input,
+  title: "@form/Inputs",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/Input.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type InputStory = StoryObj<typeof Input>;
+
+export const WithDecorators: InputStory = {
+  render: (args) => {
+    return (
+      <Input
+        {...args}
+        decorateStart={
+          <Icon icon="mdi mdi-alien" className="p-1 bg-tint-50 text-lg" />
+        }
+        decorateEnd={<Button>Go!</Button>}
+      />
+    );
+  },
+  args: {
+    label: "Text input",
+    placeholder: "Text input...",
+    onChange: fn(),
+    onEnterPressed: fn(),
+  },
+};
+
+export const InvalidInput: InputStory = {
+  render: (args) => {
+    return <Input {...args} />;
+  },
+  args: {
+    label: "Text input",
+    placeholder: "Text input...",
+    invalid: true,
+    error: "Error message",
+    onChange: fn(),
+    onEnterPressed: fn(),
+  },
+};
+
+export const DisabledInput: InputStory = {
+  render: (args) => {
+    return <Input {...args} />;
+  },
+  args: {
+    label: "Text input",
+    placeholder: "Text input...",
+    disabled: true,
+    onChange: fn(),
+    onEnterPressed: fn(),
+  },
+};
diff --git a/packages/form/stories/inputs/Password.stories.tsx b/packages/form/stories/inputs/Password.stories.tsx
new file mode 100644
index 0000000..74048e2
--- /dev/null
+++ b/packages/form/stories/inputs/Password.stories.tsx
@@ -0,0 +1,60 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Password } from "../../src";
+
+const meta: Meta = {
+  component: Password,
+  title: "@form/Inputs",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/Password.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type PasswordStory = StoryObj<typeof Password>;
+
+export const _Password: PasswordStory = {
+  render: (args) => {
+    return <Password {...args} />;
+  },
+  args: {
+    label: "Password input",
+    placeholder: "Password input...",
+    allowClear: true,
+    showToggle: true,
+    strength: 0.45,
+    onChange: fn(),
+    onEnterPressed: fn(),
+  },
+};
diff --git a/packages/form/stories/inputs/Radio.stories.tsx b/packages/form/stories/inputs/Radio.stories.tsx
new file mode 100644
index 0000000..ffb4bea
--- /dev/null
+++ b/packages/form/stories/inputs/Radio.stories.tsx
@@ -0,0 +1,76 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Col, Row } from "@react-fabric/core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Radio, RadioGroup } from "../../src";
+
+const meta: Meta = {
+  component: Radio,
+  title: "@form/Inputs",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/Radio.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type RadioStory = StoryObj<typeof Radio>;
+
+export const _Radio: RadioStory = {
+  render: (args) => {
+    return (
+      <RadioGroup>
+        <Row>
+          <Col>
+            <Radio {...args} value="1" />
+          </Col>
+          <Col>
+            <Radio {...args} value="2" icon="mdi mdi-bell" />
+          </Col>
+          <Col>
+            <Radio
+              {...args}
+              value="3"
+              icon="mdi mdi-eye-outline"
+              iconChecked="mdi mdi-eye"
+            />
+          </Col>
+        </Row>
+      </RadioGroup>
+    );
+  },
+  args: {
+    label: "Radio input",
+    name: "radio",
+    onChange: fn() as AnyObject,
+  },
+};
diff --git a/packages/form/stories/inputs/Search.stories.tsx b/packages/form/stories/inputs/Search.stories.tsx
new file mode 100644
index 0000000..d376044
--- /dev/null
+++ b/packages/form/stories/inputs/Search.stories.tsx
@@ -0,0 +1,62 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Search } from "../../src";
+import { HotKeyLabel } from "@react-fabric/core";
+
+const meta: Meta = {
+  component: Search,
+  title: "@form/Inputs",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/Search.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type SearchStory = StoryObj<typeof Search>;
+
+export const _Search: SearchStory = {
+  render: (args) => {
+    return (
+      <Search {...args} decorateEnd={<HotKeyLabel keyCombo="shift+/" />} />
+    );
+  },
+  args: {
+    label: "Search input",
+    placeholder: "Search input...",
+    allowClear: true,
+    onChange: fn(),
+    onSearch: fn(),
+    onEnterPressed: fn(),
+  },
+};
diff --git a/packages/form/stories/inputs/Switch.stories.tsx b/packages/form/stories/inputs/Switch.stories.tsx
new file mode 100644
index 0000000..409d425
--- /dev/null
+++ b/packages/form/stories/inputs/Switch.stories.tsx
@@ -0,0 +1,61 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Switch } from "../../src";
+
+const meta: Meta = {
+  component: Switch,
+  title: "@form/Inputs",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/Switch.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type SwitchStory = StoryObj<typeof Switch>;
+
+export const _Switch: SwitchStory = {
+  render: (args) => {
+    return (
+      <div className="flex gap-2">
+        <Switch {...args} />
+        <Switch {...args} color="warning" />
+        <Switch {...args} color="success" defaultColor="danger" />
+      </div>
+    );
+  },
+  args: {
+    label: "Switch input",
+    onChange: fn(),
+  },
+};
diff --git a/packages/form/stories/inputs/Textarea.stories.tsx b/packages/form/stories/inputs/Textarea.stories.tsx
new file mode 100644
index 0000000..0c37d45
--- /dev/null
+++ b/packages/form/stories/inputs/Textarea.stories.tsx
@@ -0,0 +1,58 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Textarea } from "../../src";
+
+const meta: Meta = {
+  component: Textarea,
+  title: "@form/Inputs",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/Textarea.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type TextareaStory = StoryObj<typeof Textarea>;
+
+export const _Textarea: TextareaStory = {
+  render: (args) => {
+    return <Textarea {...args} />;
+  },
+  args: {
+    label: "Textarea input",
+    placeholder: "Textarea input...",
+    rows: 5,
+    allowClear: true,
+    onChange: fn(),
+  },
+};
diff --git a/packages/form/stories/selects/DualList.stories.tsx b/packages/form/stories/selects/DualList.stories.tsx
new file mode 100644
index 0000000..b125e13
--- /dev/null
+++ b/packages/form/stories/selects/DualList.stories.tsx
@@ -0,0 +1,73 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Icon } from "@react-fabric/core";
+import { Countries, Country } from "@react-fabric/utilities";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { DualList } from "../../src";
+
+const meta: Meta = {
+  component: DualList,
+  title: "@form/List",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/DualList.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[36rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type DualListStory = StoryObj<typeof DualList<Country>>;
+
+export const _DualList: DualListStory = {
+  render: (args) => {
+    return (
+      <DualList
+        {...args}
+        options={Countries.list}
+        labelProperty="name"
+        valueProperty="iso3"
+        renderer={(opt) => (
+          <div className="flex gap-2 items-center">
+            <Icon icon={`flag ${opt.iso2}`} />
+            <span className="flex-1 truncate">{opt.name}</span>
+            <span className="rounded-full text-xs bg-tint-500/10 px-1 py-px">
+              {opt.phone}
+            </span>
+          </div>
+        )}
+      />
+    );
+  },
+  args: {
+    label: "DualList",
+    groupProperty: "alpha",
+  },
+};
diff --git a/packages/form/stories/selects/List.mdx b/packages/form/stories/selects/List.mdx
new file mode 100644
index 0000000..409ce24
--- /dev/null
+++ b/packages/form/stories/selects/List.mdx
@@ -0,0 +1,95 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { List } from "../../src";
+import * as ListStories from "./List.stories";
+import * as DualListStories from "./DualList.stories";
+
+<Meta of={ListStories} />
+
+<Title>List</Title>
+
+<Anchor storyId="list">
+  <div className="hidden-anchor">
+    <Subheading>List</Subheading>
+  </div>
+</Anchor>
+
+<Description of={List} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ListStories._List} />
+</Collapsable>
+
+<Anchor storyId="mutiple">
+  <Subheading>Multiple List</Subheading>
+</Anchor>
+<Description of={ListStories.Multiple} />
+<Canvas withToolbar of={ListStories.Multiple} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ListStories.Multiple} />
+</Collapsable>
+
+<Anchor storyId="remote">
+  <Subheading>Remote Query</Subheading>
+</Anchor>
+<Description of={ListStories.Remote} />
+<Canvas withToolbar of={ListStories.Remote} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={ListStories.Remote} />
+</Collapsable>
+
+<Anchor storyId="dual">
+  <Subheading>Dual Lists</Subheading>
+</Anchor>
+<Description of={DualListStories._DualList} />
+<Canvas withToolbar of={DualListStories._DualList} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={DualListStories._DualList} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { List } from "@react-fabric/form";
+
+export const Example = () => {
+  return (
+    <List
+      label="List label"
+      options={[]}
+      value={value}
+      onChange={handleChange}
+    />
+  );
+};
+```
diff --git a/packages/form/stories/selects/List.stories.tsx b/packages/form/stories/selects/List.stories.tsx
new file mode 100644
index 0000000..78e9a22
--- /dev/null
+++ b/packages/form/stories/selects/List.stories.tsx
@@ -0,0 +1,165 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Icon } from "@react-fabric/core";
+import { Countries, Country, matchString } from "@react-fabric/utilities";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { AnyObject } from "yup";
+import { DualList, List } from "../../src";
+
+const meta: Meta = {
+  component: List,
+  subcomponents: { DualList } as AnyObject,
+  title: "@form/List",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/List.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type ListStory = StoryObj<typeof List<Country>>;
+
+export const _List: ListStory = {
+  render: (args) => {
+    return (
+      <List
+        {...args}
+        options={Countries.list}
+        labelProperty="name"
+        valueProperty="iso3"
+        renderer={(opt) => (
+          <div className="flex gap-2 items-center">
+            <Icon icon={`flag ${opt.iso2}`} />
+            <span className="flex-1">{opt.name}</span>
+            <span className="rounded-full text-xs bg-tint-500/10 px-1 py-px">
+              {opt.phone}
+            </span>
+          </div>
+        )}
+      />
+    );
+  },
+  args: {
+    label: "List",
+    placeholder: "List...",
+    groupProperty: "alpha",
+    allowClear: true,
+    onEnterPressed: fn(),
+    // @ts-expect-error ignore
+    onChange: fn(),
+  },
+};
+
+export const Multiple: ListStory = {
+  render: (args: AnyObject) => {
+    return (
+      <List
+        {...args}
+        multiple
+        options={Countries.list}
+        labelProperty="name"
+        valueProperty="iso3"
+        renderer={(opt) => (
+          <div className="flex gap-2 items-center">
+            <Icon icon={`flag ${opt.iso2}`} />
+            <span className="flex-1">{opt.name}</span>
+            <span className="rounded-full text-xs bg-tint-500/10 px-1 py-px">
+              {opt.phone}
+            </span>
+          </div>
+        )}
+      />
+    );
+  },
+  args: {
+    label: "List",
+    placeholder: "List...",
+    groupProperty: "alpha",
+    allowClear: true,
+    onEnterPressed: fn(),
+    // @ts-expect-error ignore
+    onChange: fn(),
+  },
+};
+
+export const Remote: ListStory = {
+  render: (args: AnyObject) => {
+    return (
+      <List
+        {...args}
+        labelProperty="name"
+        valueProperty="iso3"
+        renderer={(opt: Country) => (
+          <div className="flex gap-2 items-center">
+            <Icon icon={`flag ${opt.iso2}`} />
+            <span className="flex-1">
+              <div>{opt.name}</div>
+              <div className=" group-data-[List-display]:hidden text-xs text-muted">
+                {opt.fullname}
+              </div>
+            </span>
+            <span className="rounded-full text-xs bg-tint-500/10 px-1 py-px">
+              {opt.phone}
+            </span>
+          </div>
+        )}
+        matcher={(opt: Country, query) =>
+          matchString(opt.name, query) || matchString(opt.phone, query)
+        }
+        onQuery={(query) => {
+          console.log(query);
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve(
+                Countries.list.filter(
+                  (ctr) =>
+                    matchString(ctr.name, query) ||
+                    matchString(ctr.fullname, query),
+                ),
+              );
+            }, 1000);
+          });
+        }}
+      />
+    );
+  },
+  args: {
+    label: "Combo",
+    placeholder: "Search for country...",
+    groupProperty: "alpha",
+    allowClear: true,
+    searchable: true,
+    onEnterPressed: fn(),
+    // @ts-expect-error ignore
+    onChange: fn(),
+  },
+};
diff --git a/packages/form/stories/selects/Select.mdx b/packages/form/stories/selects/Select.mdx
new file mode 100644
index 0000000..e6dc4e5
--- /dev/null
+++ b/packages/form/stories/selects/Select.mdx
@@ -0,0 +1,94 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Select } from "../../src";
+import * as SelectStories from "./Select.stories";
+
+<Meta of={SelectStories} />
+
+<Title>Select</Title>
+
+<Anchor storyId="select">
+  <div className="hidden-anchor">
+    <Subheading>Select</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Select} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={SelectStories._Select} />
+</Collapsable>
+
+<Anchor storyId="mutiple">
+  <Subheading>Multiple Select</Subheading>
+</Anchor>
+<Description of={SelectStories.Multiple} />
+<Canvas withToolbar of={SelectStories.Multiple} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={SelectStories.Multiple} />
+</Collapsable>
+
+<Anchor storyId="searchable">
+  <Subheading>Searchable Select</Subheading>
+</Anchor>
+<Description of={SelectStories.Searchable} />
+<Canvas withToolbar of={SelectStories.Searchable} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={SelectStories.Searchable} />
+</Collapsable>
+
+<Anchor storyId="remote">
+  <Subheading>Remote Query</Subheading>
+</Anchor>
+<Description of={SelectStories.Remote} />
+<Canvas withToolbar of={SelectStories.Remote} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={SelectStories.Remote} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Select } from "@react-fabric/form";
+
+export const Example = () => {
+  return (
+    <Select
+      label="Select label"
+      options={[]}
+      value={value}
+      onChange={handleChange}
+    />
+  );
+};
+```
diff --git a/packages/form/stories/selects/Select.stories.tsx b/packages/form/stories/selects/Select.stories.tsx
new file mode 100644
index 0000000..4860db7
--- /dev/null
+++ b/packages/form/stories/selects/Select.stories.tsx
@@ -0,0 +1,199 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Icon } from "@react-fabric/core";
+import { Countries, Country, matchString } from "@react-fabric/utilities";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { AnyObject } from "yup";
+import { Select } from "../../src";
+
+const meta: Meta = {
+  component: Select,
+  title: "@form/Select",
+  parameters: {
+    layout: "centered",
+    jest: ["form/tests/Select.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type SelectStory = StoryObj<typeof Select<Country>>;
+
+export const _Select: SelectStory = {
+  render: (args) => {
+    return (
+      <Select
+        {...args}
+        options={Countries.list}
+        labelProperty="name"
+        valueProperty="iso3"
+        renderer={(opt) => (
+          <div className="flex gap-2 items-center">
+            <Icon icon={`flag ${opt.iso2}`} />
+            <span className="flex-1">{opt.name}</span>
+            <span className="rounded-full text-xs bg-tint-500/10 px-1 py-px">
+              {opt.phone}
+            </span>
+          </div>
+        )}
+      />
+    );
+  },
+  args: {
+    label: "Select",
+    placeholder: "Select...",
+    groupProperty: "alpha",
+    allowClear: true,
+    onEnterPressed: fn(),
+    // @ts-expect-error ignore
+    onChange: fn(),
+  },
+};
+
+export const Multiple: SelectStory = {
+  render: (args: AnyObject) => {
+    return (
+      <Select
+        {...args}
+        multiple
+        options={Countries.list}
+        labelProperty="name"
+        valueProperty="iso3"
+        renderer={(opt) => (
+          <div className="flex gap-2 items-center">
+            <Icon icon={`flag ${opt.iso2}`} />
+            <span className="flex-1">{opt.name}</span>
+            <span className="rounded-full text-xs bg-tint-500/10 px-1 py-px">
+              {opt.phone}
+            </span>
+          </div>
+        )}
+      />
+    );
+  },
+  args: {
+    label: "Select",
+    placeholder: "Select...",
+    groupProperty: "alpha",
+    allowClear: true,
+    onEnterPressed: fn(),
+    // @ts-expect-error ignore
+    onChange: fn(),
+  },
+};
+
+export const Searchable: SelectStory = {
+  render: (args: AnyObject) => {
+    return (
+      <Select
+        {...args}
+        options={Countries.list}
+        labelProperty="name"
+        valueProperty="iso3"
+        renderer={(opt: Country) => (
+          <div className="flex gap-2 items-center">
+            <Icon icon={`flag ${opt.iso2}`} />
+            <span className="flex-1">{opt.name}</span>
+            <span className="rounded-full text-xs bg-tint-500/10 px-1 py-px">
+              {opt.phone}
+            </span>
+          </div>
+        )}
+        matcher={(opt: Country, query) =>
+          matchString(opt.name, query) || matchString(opt.phone, query)
+        }
+      />
+    );
+  },
+  args: {
+    label: "Combo",
+    placeholder: "Combo...",
+    groupProperty: "alpha",
+    allowClear: true,
+    searchable: true,
+    onEnterPressed: fn(),
+    // @ts-expect-error ignore
+    onChange: fn(),
+  },
+};
+
+export const Remote: SelectStory = {
+  render: (args: AnyObject) => {
+    return (
+      <Select
+        {...args}
+        labelProperty="name"
+        valueProperty="iso3"
+        renderer={(opt: Country) => (
+          <div className="flex gap-2 items-center">
+            <Icon icon={`flag ${opt.iso2}`} />
+            <span className="flex-1">
+              <div>{opt.name}</div>
+              <div className=" group-data-[select-display]:hidden text-xs text-muted">
+                {opt.fullname}
+              </div>
+            </span>
+            <span className="rounded-full text-xs bg-tint-500/10 px-1 py-px">
+              {opt.phone}
+            </span>
+          </div>
+        )}
+        matcher={(opt: Country, query) =>
+          matchString(opt.name, query) || matchString(opt.phone, query)
+        }
+        onQuery={(query) => {
+          console.log(query);
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve(
+                Countries.list.filter(
+                  (ctr) =>
+                    matchString(ctr.name, query) ||
+                    matchString(ctr.fullname, query),
+                ),
+              );
+            }, 1000);
+          });
+        }}
+      />
+    );
+  },
+  args: {
+    label: "Combo",
+    placeholder: "Search for country...",
+    groupProperty: "alpha",
+    allowClear: true,
+    searchable: true,
+    onEnterPressed: fn(),
+    // @ts-expect-error ignore
+    onChange: fn(),
+  },
+};
diff --git a/packages/form/stories/sliders/Range.stories.tsx b/packages/form/stories/sliders/Range.stories.tsx
new file mode 100644
index 0000000..eea4240
--- /dev/null
+++ b/packages/form/stories/sliders/Range.stories.tsx
@@ -0,0 +1,62 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Range } from "../../src";
+
+const meta: Meta = {
+  component: Range,
+  title: "@form/Slider",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["form/tests/Range.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type RangeStory = StoryObj<typeof Range>;
+
+export const _Range: RangeStory = {
+  render: (args) => {
+    return <Range {...args} />;
+  },
+  args: {
+    label: "Range input",
+    min: -99,
+    max: 99,
+    value: [-9, 9],
+    showValue: true,
+    showLabels: true,
+    onChange: fn(),
+    onEnterPressed: fn(),
+  },
+};
diff --git a/packages/form/stories/sliders/Slider.mdx b/packages/form/stories/sliders/Slider.mdx
new file mode 100644
index 0000000..d82d78c
--- /dev/null
+++ b/packages/form/stories/sliders/Slider.mdx
@@ -0,0 +1,76 @@
+import { Collapsable } from "@react-fabric/core";
+import {
+  Canvas,
+  Description,
+  Primary,
+  Story,
+  Title,
+} from "@storybook/addon-docs";
+import {
+  Anchor,
+  ArgTypes,
+  Controls,
+  Meta,
+  Subheading,
+} from "@storybook/blocks";
+import { Fragment } from "react";
+import { Slider } from "../../src";
+import * as RangeStories from "./Range.stories";
+import * as SliderStories from "./Slider.stories";
+
+<Meta of={SliderStories} />
+
+<Title>Sliders</Title>
+
+<Anchor storyId="slider">
+  <div className="hidden-anchor">
+    <Subheading>Slider</Subheading>
+  </div>
+</Anchor>
+
+<Description of={Slider} />
+
+<Primary />
+
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={SliderStories._Slider} />
+</Collapsable>
+
+<Anchor storyId="Range">
+  <Subheading>Range</Subheading>
+</Anchor>
+<Description of={RangeStories._Range} />
+<Canvas withToolbar of={RangeStories._Range} />
+<Collapsable className="control-panel">
+  <div>Controls</div>
+  <Controls of={RangeStories._Range} />
+</Collapsable>
+
+<hr />
+
+<Anchor storyId="props">
+  <Subheading>Props</Subheading>
+</Anchor>
+
+<ArgTypes sort="requiredFirst" />
+
+<Anchor storyId="sample">
+  <Subheading>Example</Subheading>
+</Anchor>
+
+```tsx
+import { Slider } from "@react-fabric/form";
+
+export const Example = () => {
+  return (
+    <Slider
+      label="Input label"
+      min={0}
+      max={99}
+      value={value}
+      onChange={handleChange}
+    />
+  );
+};
+```
diff --git a/packages/form/stories/sliders/Slider.stories.tsx b/packages/form/stories/sliders/Slider.stories.tsx
new file mode 100644
index 0000000..ef067bc
--- /dev/null
+++ b/packages/form/stories/sliders/Slider.stories.tsx
@@ -0,0 +1,64 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { AnyObject } from "yup";
+import { Range, Slider } from "../../src";
+
+const meta: Meta = {
+  component: Slider,
+  subcomponents: { Range } as AnyObject,
+  title: "@form/Slider",
+  parameters: {
+    layout: "centered",
+    controls: { exclude: /^(on.*|children|as)/ },
+    jest: ["form/tests/Slider.test.tsx"],
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-[32rem] w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type SliderStory = StoryObj<typeof Slider>;
+
+export const _Slider: SliderStory = {
+  render: (args) => {
+    return <Slider {...args} />;
+  },
+  args: {
+    label: "Slider input",
+    min: -99,
+    max: 99,
+    value: 0,
+    showValue: true,
+    showLabels: true,
+    onChange: fn(),
+    onEnterPressed: fn(),
+  },
+};
diff --git a/packages/form/tsconfig.build.json b/packages/form/tsconfig.build.json
new file mode 100755
index 0000000..6d84bf3
--- /dev/null
+++ b/packages/form/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/types",
+    "rootDir": "src"
+  },
+  "exclude": ["./dist/**/*"],
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}
diff --git a/packages/form/tsconfig.json b/packages/form/tsconfig.json
new file mode 100755
index 0000000..78a3ff2
--- /dev/null
+++ b/packages/form/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": ["./dist"],
+  "include": ["./src", "./stories", "./tests"]
+}
diff --git a/packages/utilities/LICENSE b/packages/utilities/LICENSE
new file mode 100644
index 0000000..f54bcf5
--- /dev/null
+++ b/packages/utilities/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Sigma Frameworks, Adarsh Pastakia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/utilities/README.md b/packages/utilities/README.md
new file mode 100644
index 0000000..a365b53
--- /dev/null
+++ b/packages/utilities/README.md
@@ -0,0 +1,10 @@
+# React UI Framework - Utility Module
+
+#### Install
+
+```bash
+# Using
+yarn add @react-fabric/utilities
+```
+
+#### Usage
diff --git a/packages/utilities/package.json b/packages/utilities/package.json
new file mode 100644
index 0000000..8b041f0
--- /dev/null
+++ b/packages/utilities/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "@react-fabric/utilities",
+  "version": "1.0.0",
+  "description": "RUF: Utility package",
+  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "directories": {
+    "src": "src",
+    "styles": "css",
+    "test": "tests"
+  },
+  "files": [
+    "css",
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "makelink": "yarn link",
+    "removelink": "yarn unlink",
+    "prebuild": "rm -rf ./dist",
+    "build:dts": "tsc -p ./tsconfig.build.json",
+    "build:rollup": "rollup -c ../../rollup.config.mjs",
+    "build": "npm-run-all -p build:rollup build:dts",
+    "watch:dts": "tsc -w -p ./tsconfig.build.json",
+    "watch:rollup": "rollup -w -c ../../rollup.config.mjs",
+    "watch": "npm-run-all -p watch:rollup watch:dts"
+  },
+  "dependencies": {
+    "date-fns": "^3.6.0",
+    "libphonenumber-js": "^1.11.3",
+    "numeral": "^2.0.6",
+    "yup": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/numeral": "^2.0.2"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=9.6.4"
+  }
+}
diff --git a/packages/utilities/src/_ascii.ts b/packages/utilities/src/_ascii.ts
new file mode 100644
index 0000000..115f742
--- /dev/null
+++ b/packages/utilities/src/_ascii.ts
@@ -0,0 +1,93 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+import { isEmpty } from "./_isType";
+
+/** ***************** latin-ascii conversions *******************/
+const conversions = {
+  AE: "Æ|Ǽ",
+  Ae: "Ä",
+  ae: "ä|æ|ǽ",
+  OE: "Œ",
+  Oe: "Ö",
+  oe: "ö|œ",
+  Ue: "Ü",
+  ue: "ü",
+  IJ: "IJ",
+  ij: "ij",
+  ss: "ß",
+  A: "À|Á|Â|Ã|Ä|Å|Ǻ|Ā|Ă|Ą|Ǎ",
+  a: "à|á|â|ã|å|ǻ|ā|ă|ą|ǎ|ª",
+  C: "Ç|Ć|Ĉ|Ċ|Č",
+  c: "ç|ć|ĉ|ċ|č",
+  D: "Ð|Ď|Đ",
+  d: "ð|ď|đ",
+  E: "È|É|Ê|Ë|Ē|Ĕ|Ė|Ę|Ě",
+  e: "è|é|ê|ë|ē|ĕ|ė|ę|ě",
+  G: "Ĝ|Ğ|Ġ|Ģ",
+  g: "ĝ|ğ|ġ|ģ",
+  H: "Ĥ|Ħ",
+  h: "ĥ|ħ",
+  I: "Ì|Í|Î|Ï|Ĩ|Ī|Ĭ|Ǐ|Į|İ",
+  i: "ì|í|î|ï|ĩ|ī|ĭ|ǐ|į|ı",
+  J: "Ĵ",
+  j: "ĵ",
+  K: "Ķ",
+  k: "ķ",
+  L: "Ĺ|Ļ|Ľ|Ŀ|Ł",
+  l: "ĺ|ļ|ľ|ŀ|ł",
+  N: "Ñ|Ń|Ņ|Ň",
+  n: "ñ|ń|ņ|ň|ʼn",
+  O: "Ò|Ó|Ô|Õ|Ō|Ŏ|Ǒ|Ő|Ơ|Ø|Ǿ",
+  o: "ò|ó|ô|õ|ō|ŏ|ǒ|ő|ơ|ø|ǿ|º",
+  R: "Ŕ|Ŗ|Ř",
+  r: "ŕ|ŗ|ř",
+  S: "Ś|Ŝ|Ş|Š",
+  s: "ś|ŝ|ş|š|ſ",
+  T: "Ţ|Ť|Ŧ",
+  t: "ţ|ť|ŧ",
+  U: "Ù|Ú|Û|Ũ|Ū|Ŭ|Ů|Ű|Ų|Ư|Ǔ|Ǖ|Ǘ|Ǚ|Ǜ",
+  u: "ù|ú|û|ũ|ū|ŭ|ů|ű|ų|ư|ǔ|ǖ|ǘ|ǚ|ǜ",
+  Y: "Ý|Ÿ|Ŷ",
+  y: "ý|ÿ|ŷ",
+  W: "Ŵ",
+  w: "ŵ",
+  Z: "Ź|Ż|Ž",
+  z: "ź|ż|ž",
+  f: "ƒ",
+};
+
+/**
+ * latin to ascii converter for convenient searching
+ * @internal
+ */
+export const ascii = (str: string) => {
+  if (isEmpty(str)) return "";
+  Object.entries(conversions).forEach(([a, l]) => {
+    const re = new RegExp(l, "g");
+    str = `${str}`.replace(re, a);
+  });
+  return str;
+};
diff --git a/packages/utilities/src/_boundingBox.ts b/packages/utilities/src/_boundingBox.ts
new file mode 100644
index 0000000..0e3f18d
--- /dev/null
+++ b/packages/utilities/src/_boundingBox.ts
@@ -0,0 +1,72 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isEmpty } from "./_isType";
+
+const _getBox = (
+  box: string | [number, number, number, number],
+): [number, number, number, number] => {
+  let boundingBox: any = box;
+  if (isEmpty(box)) return [0, 0, 0, 0];
+  if (typeof box === "string") {
+    boundingBox = box.split(",");
+  }
+  if (Array.isArray(boundingBox)) {
+    boundingBox = boundingBox.map((b) => parseInt(b, 10));
+  }
+  return boundingBox;
+};
+
+/**
+ * box "x,y,w,h" | [x,y,w,h]
+ * returns canvas box [x,y,w,h]
+ */
+export const getBox = (
+  box: string | [number, number, number, number] = "0,0,0,0",
+) => {
+  const boundingBox = _getBox(box);
+
+  let [x, y, w, h] = boundingBox;
+  w = x < 0 ? w + x : w;
+  h = y < 0 ? h + y : h;
+  x = x > 0 ? x : 0;
+  y = y > 0 ? y : 0;
+  return [x, y, w, h] as [number, number, number, number];
+};
+
+/**
+ * box "x1,y1,x2,y2" | [x1,y1,x2,y2]
+ * returns canvas box [x,y,w,h]
+ */
+export const getBoundingBox = (
+  box: string | [number, number, number, number] = "0,0,0,0",
+) => {
+  const boundingBox = _getBox(box);
+
+  let [x1, y1, x2, y2] = boundingBox;
+  const w = x2 - x1;
+  const h = y2 - y1;
+  x1 = x1 > 0 ? x1 : 0;
+  y1 = y1 > 0 ? y1 : 0;
+  return [x1, y1, w, h] as [number, number, number, number];
+};
diff --git a/packages/utilities/src/_countries.ts b/packages/utilities/src/_countries.ts
new file mode 100644
index 0000000..04b33c6
--- /dev/null
+++ b/packages/utilities/src/_countries.ts
@@ -0,0 +1,3046 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+/**
+ * @internal
+ */
+export interface Country {
+  continent: string;
+  iso2: string;
+  iso3: string;
+  alt?: string;
+  name: string;
+  alpha: string;
+  fullname: string;
+  capital: string;
+  tld: string;
+  currency: string;
+  phone: string;
+  emoji: string;
+}
+
+/**
+ * country list with helper functions
+ */
+export default {
+  /**
+   * Get iso2 code
+   * @param code
+   */
+  toIso2(code: string) {
+    const ctry = this.find(code);
+    return ctry != null ? ctry.iso2 : undefined;
+  },
+  /**
+   * Get iso3 code
+   * @param code
+   */
+  toIso3(code: string) {
+    const ctry = this.find(code);
+    return ctry != null ? ctry.iso3 : undefined;
+  },
+  /**
+   * Country flag emoji
+   * @param code
+   */
+  emoji(code: string) {
+    const ctry = this.find(code);
+    return ctry != null ? ctry.emoji : "🏳️";
+  },
+  /**
+   * Get country name
+   * @param code
+   */
+  name: function (code: string) {
+    const ctry = this.find(code);
+    return ctry != null ? ctry.name : code;
+  },
+  /**
+   * Find country by code
+   * @param code
+   * @return continent: string;
+   * @return iso2: string;
+   * @return iso3: string;
+   * @return name: string;
+   * @return fullname: string;
+   * @return capital: string;
+   * @return tld: string;
+   * @return currency: string;
+   * @return phone: string;
+   * @return emoji: string;
+   */
+  find(code: string): Country | undefined {
+    return this.list.find(
+      (ct) =>
+        (ct.alt ?? "__").toLowerCase() === code.toLowerCase() ||
+        ct.iso3.toLowerCase() === code.toLowerCase() ||
+        ct.iso2.toLowerCase() === code.toLowerCase(),
+    );
+  },
+  list: [
+    {
+      continent: "Asia",
+      iso2: "AF",
+      iso3: "AFG",
+      alpha: "A",
+      name: "Afghanistan",
+      fullname: "The Islamic Republic of Afghanistan",
+      capital: "Kabul",
+      tld: ".af",
+      currency: "AFN",
+      phone: "+93",
+      emoji: "🇦🇫",
+    },
+    {
+      continent: "Europe",
+      iso2: "AL",
+      iso3: "ALB",
+      alpha: "A",
+      name: "Albania",
+      fullname: "The Republic of Albania",
+      capital: "Tirana",
+      tld: ".al",
+      currency: "ALL",
+      phone: "+355",
+      emoji: "🇦🇱",
+    },
+    {
+      continent: "Africa",
+      iso2: "DZ",
+      iso3: "DZA",
+      alpha: "A",
+      name: "Algeria",
+      fullname: "The People's Democratic Republic of Algeria",
+      capital: "Algiers",
+      tld: ".dz",
+      currency: "DZD",
+      phone: "+213",
+      emoji: "🇩🇿",
+    },
+    {
+      continent: "Oceania",
+      iso2: "AS",
+      iso3: "ASM",
+      alpha: "A",
+      name: "American Samoa",
+      fullname: "American Samoa",
+      capital: "Pago Pago",
+      tld: ".as",
+      currency: "USD",
+      phone: "+1684",
+      emoji: "🇦🇸",
+    },
+    {
+      continent: "Europe",
+      iso2: "AD",
+      iso3: "AND",
+      alpha: "A",
+      name: "Andorra",
+      fullname: "The Principality of Andorra",
+      capital: "Andorra la Vella",
+      tld: ".ad",
+      currency: "EUR",
+      phone: "+376",
+      emoji: "🇦🇩",
+    },
+    {
+      continent: "Africa",
+      iso2: "AO",
+      iso3: "AGO",
+      alpha: "A",
+      name: "Angola",
+      fullname: "The Republic of Angola",
+      capital: "Luanda",
+      tld: ".ao",
+      currency: "AOA",
+      phone: "+244",
+      emoji: "🇦🇴",
+    },
+    {
+      continent: "North America",
+      iso2: "AI",
+      iso3: "AIA",
+      alpha: "A",
+      name: "Anguilla",
+      fullname: "Anguilla",
+      capital: "The Valley",
+      tld: ".ai",
+      currency: "XCD",
+      phone: "+1264",
+      emoji: "🇦🇮",
+    },
+    {
+      continent: "North America",
+      iso2: "AG",
+      iso3: "ATG",
+      alpha: "A",
+      name: "Antigua And Barbuda",
+      fullname: "Antigua and Barbuda",
+      capital: "Saint John’s",
+      tld: ".ag",
+      currency: "XCD",
+      phone: "+1268",
+      emoji: "🇦🇬",
+    },
+    {
+      continent: "South America",
+      iso2: "AR",
+      iso3: "ARG",
+      alpha: "A",
+      name: "Argentina",
+      fullname: "The Argentine Republic",
+      capital: "Buenos Aires",
+      tld: ".ar",
+      currency: "ARS",
+      phone: "+54",
+      emoji: "🇦🇷",
+    },
+    {
+      continent: "Asia",
+      iso2: "AM",
+      iso3: "ARM",
+      alpha: "A",
+      name: "Armenia",
+      fullname: "The Republic of Armenia",
+      capital: "Yerevan",
+      tld: ".am",
+      currency: "AMD",
+      phone: "+374",
+      emoji: "🇦🇲",
+    },
+    {
+      continent: "North America",
+      iso2: "AW",
+      iso3: "ABW",
+      alpha: "A",
+      name: "Aruba",
+      fullname: "Aruba",
+      capital: "Oranjestad",
+      tld: ".aw",
+      currency: "ANG",
+      phone: "+297",
+      emoji: "🇦🇼",
+    },
+    {
+      continent: "Oceania",
+      iso2: "AU",
+      iso3: "AUS",
+      alpha: "A",
+      name: "Australia",
+      fullname: "Australia",
+      capital: "Canberra",
+      tld: ".au",
+      currency: "AUD",
+      phone: "+61",
+      emoji: "🇦🇺",
+    },
+    {
+      continent: "Europe",
+      iso2: "AT",
+      iso3: "AUT",
+      alpha: "A",
+      name: "Austria",
+      fullname: "The Republic of Austria",
+      capital: "Vienna",
+      tld: ".at",
+      currency: "EUR",
+      phone: "+43",
+      emoji: "🇦🇹",
+    },
+    {
+      continent: "Asia",
+      iso2: "AZ",
+      iso3: "AZE",
+      alpha: "A",
+      name: "Azerbaijan",
+      fullname: "The Republic of Azerbaijan",
+      capital: "Baku",
+      tld: ".az",
+      currency: "AZN",
+      phone: "+994",
+      emoji: "🇦🇿",
+    },
+    {
+      continent: "North America",
+      iso2: "BS",
+      iso3: "BHS",
+      alpha: "B",
+      name: "Bahamas",
+      fullname: "The Commonwealth of the Bahamas",
+      capital: "Nassau",
+      tld: ".bs",
+      currency: "BSD",
+      phone: "+1242",
+      emoji: "🇧🇸",
+    },
+    {
+      continent: "Asia",
+      iso2: "BH",
+      iso3: "BHR",
+      alpha: "B",
+      name: "Bahrain",
+      fullname: "The Kingdom of Bahrain",
+      capital: "Manama",
+      tld: ".bh",
+      currency: "BHD",
+      phone: "+973",
+      emoji: "🇧🇭",
+    },
+    {
+      continent: "Asia",
+      iso2: "BD",
+      iso3: "BGD",
+      alpha: "B",
+      name: "Bangladesh",
+      fullname: "The People's Republic of Bangladesh",
+      capital: "Dhaka",
+      tld: ".bd",
+      currency: "BDT",
+      phone: "+880",
+      emoji: "🇧🇩",
+    },
+    {
+      continent: "North America",
+      iso2: "BB",
+      iso3: "BRB",
+      alpha: "B",
+      name: "Barbados",
+      fullname: "Barbados",
+      capital: "Bridgetown",
+      tld: ".bb",
+      currency: "BBD",
+      phone: "+1246",
+      emoji: "🇧🇧",
+    },
+    {
+      continent: "Europe",
+      iso2: "BY",
+      iso3: "BLR",
+      alpha: "B",
+      name: "Belarus",
+      fullname: "The Republic of Belarus",
+      capital: "Minsk",
+      tld: ".by",
+      currency: "BYR",
+      phone: "+375",
+      emoji: "🇧🇾",
+    },
+    {
+      continent: "Europe",
+      iso2: "BE",
+      iso3: "BEL",
+      alpha: "B",
+      name: "Belgium",
+      fullname: "The Kingdom of Belgium",
+      capital: "Brussels",
+      tld: ".be",
+      currency: "EUR",
+      phone: "+32",
+      emoji: "🇧🇪",
+    },
+    {
+      continent: "North America",
+      iso2: "BZ",
+      iso3: "BLZ",
+      alpha: "B",
+      name: "Belize",
+      fullname: "Belize",
+      capital: "Belmopan",
+      tld: ".bz",
+      currency: "BZD",
+      phone: "+51",
+      emoji: "🇧🇿",
+    },
+    {
+      continent: "Africa",
+      iso2: "BJ",
+      iso3: "BEN",
+      alpha: "B",
+      name: "Benin",
+      fullname: "The Republic of Benin",
+      capital: "Porto-novo",
+      tld: ".bj",
+      currency: "XOF",
+      phone: "+229",
+      emoji: "🇧🇯",
+    },
+    {
+      continent: "North America",
+      iso2: "BM",
+      iso3: "BMU",
+      alpha: "B",
+      name: "Bermuda",
+      fullname: "Bermuda",
+      capital: "Hamilton",
+      tld: ".bm",
+      currency: "BMD",
+      phone: "+1441",
+      emoji: "🇧🇲",
+    },
+    {
+      continent: "Asia",
+      iso2: "BT",
+      iso3: "BTN",
+      alpha: "B",
+      name: "Bhutan",
+      fullname: "The Kingdom of Bhutan",
+      capital: "Thimphu",
+      tld: ".bt",
+      currency: "BTN",
+      phone: "+975",
+      emoji: "🇧🇹",
+    },
+    {
+      continent: "South America",
+      iso2: "BO",
+      iso3: "BOL",
+      alpha: "B",
+      name: "Bolivia",
+      fullname: "The Plurinational State of Bolivia",
+      capital: "La Paz",
+      tld: ".bo",
+      currency: "BOB",
+      phone: "+591",
+      emoji: "🇧🇴",
+    },
+    {
+      continent: "Europe",
+      iso2: "BA",
+      iso3: "BIH",
+      alpha: "B",
+      name: "Bosnia And Herzegovina",
+      fullname: "Bosnia and Herzegovina",
+      capital: "Sarajevo",
+      tld: ".ba",
+      currency: "BAM",
+      phone: "+387",
+      emoji: "🇧🇦",
+    },
+    {
+      continent: "Africa",
+      iso2: "BW",
+      iso3: "BWA",
+      alpha: "B",
+      name: "Botswana",
+      fullname: "The Republic of Botswana",
+      capital: "Gaborone",
+      tld: ".bw",
+      currency: "BWP",
+      phone: "+267",
+      emoji: "🇧🇼",
+    },
+    {
+      continent: "South America",
+      iso2: "BR",
+      iso3: "BRA",
+      alpha: "B",
+      name: "Brazil",
+      fullname: "The Federative Republic of Brazil",
+      capital: "Brasilia",
+      tld: ".br",
+      currency: "BRL",
+      phone: "+55",
+      emoji: "🇧🇷",
+    },
+    {
+      continent: "Asia",
+      iso2: "BN",
+      iso3: "BRN",
+      alpha: "B",
+      name: "Brunei Darussalam",
+      fullname: "Brunei Darussalam",
+      capital: "Bandar Seri Begawan",
+      tld: ".bn",
+      currency: "BND",
+      phone: "+673",
+      emoji: "🇧🇳",
+    },
+    {
+      continent: "Europe",
+      iso2: "BG",
+      iso3: "BGR",
+      alpha: "B",
+      name: "Bulgaria",
+      fullname: "The Republic of Bulgaria",
+      capital: "Sofia",
+      tld: ".bg",
+      currency: "BGN",
+      phone: "+359",
+      emoji: "🇧🇬",
+    },
+    {
+      continent: "Africa",
+      iso2: "BF",
+      iso3: "BFA",
+      alpha: "B",
+      name: "Burkina Faso",
+      fullname: "Burkina Faso",
+      capital: "Ouagadougou",
+      tld: ".bf",
+      currency: "XOF",
+      phone: "+226",
+      emoji: "🇧🇫",
+    },
+    {
+      continent: "Africa",
+      iso2: "BI",
+      iso3: "BDI",
+      alpha: "B",
+      name: "Burundi",
+      fullname: "The Republic of Burundi",
+      capital: "Bujumbura",
+      tld: ".bi",
+      currency: "BIF",
+      phone: "+257",
+      emoji: "🇧🇮",
+    },
+    {
+      continent: "Asia",
+      iso2: "KH",
+      iso3: "KHM",
+      alpha: "C",
+      name: "Cambodia",
+      fullname: "The Kingdom of Cambodia",
+      capital: "Phnom Penh",
+      tld: ".kh",
+      currency: "KHR",
+      phone: "+855",
+      emoji: "🇰🇭",
+    },
+    {
+      continent: "Africa",
+      iso2: "CM",
+      iso3: "CMR",
+      alpha: "C",
+      name: "Cameroon",
+      fullname: "The Republic of Cameroon",
+      capital: "Yaounde",
+      tld: ".cm",
+      currency: "XAF",
+      phone: "+237",
+      emoji: "🇨🇲",
+    },
+    {
+      continent: "North America",
+      iso2: "CA",
+      iso3: "CAN",
+      alpha: "C",
+      name: "Canada",
+      fullname: "Canada",
+      capital: "Ottawa",
+      tld: ".ca",
+      currency: "CAD",
+      phone: "+1",
+      emoji: "🇨🇦",
+    },
+    {
+      continent: "Africa",
+      iso2: "CV",
+      iso3: "CPV",
+      alpha: "C",
+      name: "Cape Verde",
+      fullname: "Republic of Cabo Verde",
+      capital: "Praia",
+      tld: ".cv",
+      currency: "CVE",
+      phone: "+238",
+      emoji: "🇨🇻",
+    },
+    {
+      continent: "North America",
+      iso2: "KY",
+      iso3: "CYM",
+      alpha: "C",
+      name: "Cayman Islands",
+      fullname: "Cayman Islands",
+      capital: "George Town",
+      tld: ".ky",
+      currency: "KYD",
+      phone: "+1345",
+      emoji: "🇰🇾",
+    },
+    {
+      continent: "Africa",
+      iso2: "CF",
+      iso3: "CAF",
+      alpha: "C",
+      name: "Central African Republic",
+      fullname: "The Central African Republic",
+      capital: "Bangui",
+      tld: ".cf",
+      currency: "XAF",
+      phone: "+236",
+      emoji: "🇨🇫",
+    },
+    {
+      continent: "Africa",
+      iso2: "TD",
+      iso3: "TCD",
+      alpha: "C",
+      name: "Chad",
+      fullname: "The Republic of Chad",
+      capital: "n'Djamena",
+      tld: ".td",
+      currency: "XAF",
+      phone: "+235",
+      emoji: "🇹🇩",
+    },
+    {
+      continent: "South America",
+      iso2: "CL",
+      iso3: "CHL",
+      alpha: "C",
+      name: "Chile",
+      fullname: "The Republic of Chile",
+      capital: "Santiago",
+      tld: ".cl",
+      currency: "CLP",
+      phone: "+56",
+      emoji: "🇨🇱",
+    },
+    {
+      continent: "Asia",
+      iso2: "CN",
+      iso3: "CHN",
+      alpha: "C",
+      name: "China",
+      fullname: "The People's Republic of China",
+      capital: "Beijing",
+      tld: ".cn",
+      currency: "CNY",
+      phone: "+86",
+      emoji: "🇨🇳",
+    },
+    {
+      continent: "South America",
+      iso2: "CO",
+      iso3: "COL",
+      alpha: "C",
+      name: "Colombia",
+      fullname: "The Republic of Colombia",
+      capital: "Bogotá",
+      tld: ".co",
+      currency: "COP",
+      phone: "+57",
+      emoji: "🇨🇴",
+    },
+    {
+      continent: "Africa",
+      iso2: "KM",
+      iso3: "COM",
+      alpha: "C",
+      name: "Comoros",
+      fullname: "The Union of the Comoros",
+      capital: "Moroni",
+      tld: ".km",
+      currency: "KMF",
+      phone: "+269",
+      emoji: "🇰🇲",
+    },
+    {
+      continent: "Africa",
+      iso2: "CG",
+      iso3: "COG",
+      alpha: "C",
+      name: "Congo",
+      fullname: "The Republic of the Congo",
+      capital: "Brazzaville",
+      tld: ".cg",
+      currency: "XAF",
+      phone: "+242",
+      emoji: "🇨🇬",
+    },
+    {
+      continent: "Oceania",
+      iso2: "CK",
+      iso3: "COK",
+      alpha: "C",
+      name: "Cook Islands",
+      fullname: "The Cook Islands",
+      capital: "Avarua",
+      tld: ".ck",
+      currency: "NZD",
+      phone: "+682",
+      emoji: "🇨🇰",
+    },
+    {
+      continent: "North America",
+      iso2: "CR",
+      iso3: "CRI",
+      alpha: "C",
+      name: "Costa Rica",
+      fullname: "The Republic of Costa Rica",
+      capital: "San Jose",
+      tld: ".cr",
+      currency: "CRC",
+      phone: "+56",
+      emoji: "🇨🇷",
+    },
+    {
+      continent: "Africa",
+      iso2: "CI",
+      iso3: "CIV",
+      alpha: "C",
+      name: "Côte D'ivoire",
+      fullname: "The Republic of Côte d'Ivoire",
+      capital: "Yamoussoukro",
+      tld: ".ci",
+      currency: "XOF",
+      phone: "+225",
+      emoji: "🇨🇮",
+    },
+    {
+      continent: "Europe",
+      iso2: "HR",
+      iso3: "HRV",
+      alpha: "C",
+      name: "Croatia",
+      fullname: "The Republic of Croatia",
+      capital: "Zagreb",
+      tld: ".hr",
+      currency: "HRK",
+      phone: "+385",
+      emoji: "🇭🇷",
+    },
+    {
+      continent: "North America",
+      iso2: "CU",
+      iso3: "CUB",
+      alpha: "C",
+      name: "Cuba",
+      fullname: "The Republic of Cuba",
+      capital: "Havana",
+      tld: ".cu",
+      currency: "CUP",
+      phone: "+53",
+      emoji: "🇨🇺",
+    },
+    {
+      continent: "Asia",
+      iso2: "CY",
+      iso3: "CYP",
+      alpha: "C",
+      name: "Cyprus",
+      fullname: "The Republic of Cyprus",
+      capital: "Nicosia",
+      tld: ".cy",
+      currency: "CYP",
+      phone: "+357",
+      emoji: "🇨🇾",
+    },
+    {
+      continent: "Europe",
+      iso2: "CZ",
+      iso3: "CZE",
+      alpha: "C",
+      name: "Czech Republic",
+      fullname: "The Czech Republic",
+      capital: "Prague",
+      tld: ".cz",
+      currency: "CZK",
+      phone: "+420",
+      emoji: "🇨🇿",
+    },
+    {
+      continent: "Europe",
+      iso2: "DK",
+      iso3: "DNK",
+      alpha: "D",
+      name: "Denmark",
+      fullname: "The Kingdom of Denmark",
+      capital: "Copenhagen",
+      tld: ".dk",
+      currency: "DKK",
+      phone: "+45",
+      emoji: "🇩🇰",
+    },
+    {
+      continent: "Africa",
+      iso2: "DJ",
+      iso3: "DJI",
+      alpha: "D",
+      name: "Djibouti",
+      fullname: "The Republic of Djibouti",
+      capital: "Djibouti",
+      tld: "dj",
+      currency: "DJF",
+      phone: "+253",
+      emoji: "🇩🇯",
+    },
+    {
+      continent: "North America",
+      iso2: "DM",
+      iso3: "DMA",
+      alpha: "D",
+      name: "Dominica",
+      fullname: "The Commonwealth of Dominica",
+      capital: "Roseau",
+      tld: ".dm",
+      currency: "XCD",
+      phone: "+1767",
+      emoji: "🇩🇲",
+    },
+    {
+      continent: "South America",
+      iso2: "DO",
+      iso3: "DOM",
+      alpha: "D",
+      name: "Dominican Republic",
+      fullname: "The Dominican Republic",
+      capital: "Santo Domingo",
+      tld: ".do",
+      currency: "DOP",
+      phone: "+1809",
+      emoji: "🇩🇴",
+    },
+    {
+      continent: "Africa",
+      iso2: "CD",
+      iso3: "COD",
+      alpha: "D",
+      name: "DR Congo",
+      fullname: "The Democratic Republic of the Congo",
+      capital: "Kinshasa",
+      tld: ".cd",
+      currency: "CDF",
+      phone: "+243",
+      emoji: "🇨🇩",
+    },
+    {
+      continent: "Oceania",
+      iso2: "TL",
+      iso3: "TLS",
+      alpha: "E",
+      name: "East Timor",
+      fullname: "The Democratic Republic of Timor-Leste",
+      capital: "Dilli",
+      tld: ".tl",
+      currency: "IDR",
+      phone: "+670",
+      emoji: "🇹🇱",
+    },
+    {
+      continent: "South America",
+      iso2: "EC",
+      iso3: "ECU",
+      alpha: "E",
+      name: "Ecuador",
+      fullname: "The Republic of Ecuador",
+      capital: "Quito",
+      tld: ".ec",
+      currency: "USD",
+      phone: "+593",
+      emoji: "🇪🇨",
+    },
+    {
+      continent: "Africa",
+      iso2: "EG",
+      iso3: "EGY",
+      alpha: "E",
+      name: "Egypt",
+      fullname: "The Arab Republic of Egypt",
+      capital: "Cairo",
+      tld: ".eg",
+      currency: "EGP",
+      phone: "+20",
+      emoji: "🇪🇬",
+    },
+    {
+      continent: "North America",
+      iso2: "SV",
+      iso3: "SLV",
+      alpha: "E",
+      name: "El Salvador",
+      fullname: "The Republic of el Salvador",
+      capital: "San Salvador",
+      tld: ".sv",
+      currency: "SVC",
+      phone: "+53",
+      emoji: "🇸🇻",
+    },
+    {
+      continent: "Africa",
+      iso2: "GQ",
+      iso3: "GNQ",
+      alpha: "E",
+      name: "Equatorial Guinea",
+      fullname: "The Republic of Equatorial Guinea",
+      capital: "Malabo",
+      tld: ".gq",
+      currency: "XAF",
+      phone: "+240",
+      emoji: "🇬🇶",
+    },
+    {
+      continent: "Africa",
+      iso2: "ER",
+      iso3: "ERI",
+      alpha: "E",
+      name: "Eritrea",
+      fullname: "The State of Eritrea",
+      capital: "Asmara",
+      tld: ".er",
+      currency: "ERN",
+      phone: "+291",
+      emoji: "🇪🇷",
+    },
+    {
+      continent: "Europe",
+      iso2: "EE",
+      iso3: "EST",
+      alpha: "E",
+      name: "Estonia",
+      fullname: "The Republic of Estonia",
+      capital: "Tallinn",
+      tld: ".ee",
+      currency: "EEK",
+      phone: "+372",
+      emoji: "🇪🇪",
+    },
+    {
+      continent: "Africa",
+      iso2: "ET",
+      iso3: "ETH",
+      alpha: "E",
+      name: "Ethiopia",
+      fullname: "The Federal Democratic Republic of Ethiopia",
+      capital: "Addis Ababa",
+      tld: ".et",
+      currency: "ETB",
+      phone: "+251",
+      emoji: "🇪🇹",
+    },
+    {
+      continent: "Europe",
+      iso2: "FO",
+      iso3: "FRO",
+      alpha: "F",
+      name: "Faroe Islands",
+      fullname: "Faroe Islands",
+      capital: "Palikir",
+      tld: ".fo",
+      currency: "DKK",
+      phone: "+298",
+      emoji: "🇫🇴",
+    },
+    {
+      continent: "Oceania",
+      iso2: "FJ",
+      iso3: "FJI",
+      alpha: "F",
+      name: "Fiji",
+      fullname: "The Republic of Fiji",
+      capital: "Suva",
+      tld: ".fj",
+      currency: "FJD",
+      phone: "+679",
+      emoji: "🇫🇯",
+    },
+    {
+      continent: "Europe",
+      iso2: "FI",
+      iso3: "FIN",
+      alpha: "F",
+      name: "Finland",
+      fullname: "The Republic of Finland",
+      capital: "Helsinki",
+      tld: ".fi",
+      currency: "EUR",
+      phone: "+358",
+      emoji: "🇫🇮",
+    },
+    {
+      continent: "Europe",
+      iso2: "FR",
+      iso3: "FRA",
+      alpha: "F",
+      name: "France",
+      fullname: "The French Republic",
+      capital: "Paris",
+      tld: ".fr",
+      currency: "EUR",
+      phone: "+33",
+      emoji: "🇫🇷",
+    },
+    {
+      continent: "South America",
+      iso2: "GF",
+      iso3: "GUF",
+      alpha: "F",
+      name: "French Guyana",
+      fullname: "French Guyana",
+      capital: "Cayenne",
+      tld: ".gf",
+      currency: "EUR",
+      phone: "+594",
+      emoji: "🇬🇫",
+    },
+    {
+      continent: "Oceania",
+      iso2: "PF",
+      iso3: "PYF",
+      alpha: "F",
+      name: "French Polynesia",
+      fullname: "French Polynesia",
+      capital: "Papeete",
+      tld: ".pf",
+      currency: "XPF",
+      phone: "+689",
+      emoji: "🇵🇫",
+    },
+    {
+      continent: "Africa",
+      iso2: "GA",
+      iso3: "GAB",
+      alpha: "G",
+      name: "Gabon",
+      fullname: "The Gabonese Republic",
+      capital: "Libreville",
+      tld: ".ga",
+      currency: "XAF",
+      phone: "+241",
+      emoji: "🇬🇦",
+    },
+    {
+      continent: "Africa",
+      iso2: "GM",
+      iso3: "GMB",
+      alpha: "G",
+      name: "Gambia",
+      fullname: "The Republic of the Gambia",
+      capital: "Banjul",
+      tld: ".gm",
+      currency: "GMD",
+      phone: "+220",
+      emoji: "🇬🇲",
+    },
+    {
+      continent: "Europe",
+      iso2: "GE",
+      iso3: "GEO",
+      alpha: "G",
+      name: "Georgia",
+      fullname: "Georgia",
+      capital: "Tbilisi",
+      tld: ".ge",
+      currency: "GEL",
+      phone: "+995",
+      emoji: "🇬🇪",
+    },
+    {
+      continent: "Europe",
+      iso2: "DE",
+      iso3: "DEU",
+      alpha: "G",
+      name: "Germany",
+      fullname: "The Federal Republic of Germany",
+      capital: "Berlin",
+      tld: ".de",
+      currency: "EUR",
+      phone: "+49",
+      emoji: "🇩🇪",
+    },
+    {
+      continent: "Africa",
+      iso2: "GH",
+      iso3: "GHA",
+      alpha: "G",
+      name: "Ghana",
+      fullname: "The Republic of Ghana",
+      capital: "Accra",
+      tld: ".gh",
+      currency: "GHC",
+      phone: "+233",
+      emoji: "🇬🇭",
+    },
+    {
+      continent: "Africa",
+      iso2: "GI",
+      iso3: "GIB",
+      alpha: "G",
+      name: "Gibraltar",
+      fullname: "Gibraltar",
+      capital: "Gibraltar",
+      tld: ".gi",
+      currency: "GIP",
+      phone: "+350",
+      emoji: "🇬🇮",
+    },
+    {
+      continent: "Europe",
+      iso2: "GR",
+      iso3: "GRC",
+      alpha: "G",
+      name: "Greece",
+      fullname: "The Hellenic Republic",
+      capital: "Athens",
+      tld: ".gr",
+      currency: "EUR",
+      phone: "+30",
+      emoji: "🇬🇷",
+    },
+    {
+      continent: "North America",
+      iso2: "GL",
+      iso3: "GRL",
+      alpha: "G",
+      name: "Greenland",
+      fullname: "Greenland",
+      capital: "Nuuk",
+      tld: ".gl",
+      currency: "DKK",
+      phone: "+299",
+      emoji: "🇬🇱",
+    },
+    {
+      continent: "North America",
+      iso2: "GD",
+      iso3: "GRD",
+      alpha: "G",
+      name: "Grenada",
+      fullname: "Grenada",
+      capital: "Saint George’s",
+      tld: ".gd",
+      currency: "XCD",
+      phone: "+1473",
+      emoji: "🇬🇩",
+    },
+    {
+      continent: "North America",
+      iso2: "GP",
+      iso3: "GLP",
+      alpha: "G",
+      name: "Guadeloupe",
+      fullname: "Guadeloupe",
+      capital: "Basse-Terre",
+      tld: ".gp",
+      currency: "EUR",
+      phone: "+590",
+      emoji: "🇬🇵",
+    },
+    {
+      continent: "Asia",
+      iso2: "GU",
+      iso3: "GUM",
+      alpha: "G",
+      name: "Guam",
+      fullname: "Guam",
+      capital: "Hagåtña",
+      tld: ".gu",
+      currency: "USD",
+      phone: "+1671",
+      emoji: "🇬🇺",
+    },
+    {
+      continent: "North America",
+      iso2: "GT",
+      iso3: "GTM",
+      alpha: "G",
+      name: "Guatemala",
+      fullname: "The Republic of Guatemala",
+      capital: "Guatemala City",
+      tld: ".gt",
+      currency: "GTQ",
+      phone: "+52",
+      emoji: "🇬🇹",
+    },
+    {
+      continent: "Europe",
+      iso2: "GG",
+      iso3: "GGY",
+      alpha: "G",
+      name: "Guernsey",
+      fullname: "Guernsey",
+      capital: "St. Peter Port",
+      tld: ".gg",
+      currency: "GGP",
+      phone: "+44",
+      emoji: "🇬🇬",
+    },
+    {
+      continent: "Africa",
+      iso2: "GN",
+      iso3: "GIN",
+      alpha: "G",
+      name: "Guinea",
+      fullname: "The Republic of Guinea",
+      capital: "Conakry",
+      tld: ".gn",
+      currency: "GNF",
+      phone: "+224",
+      emoji: "🇬🇳",
+    },
+    {
+      continent: "Africa",
+      iso2: "GW",
+      iso3: "GNB",
+      alpha: "G",
+      name: "Guinea-bissau",
+      fullname: "The Republic of Guinea-bissau",
+      capital: "Bissau",
+      tld: ".gw",
+      currency: "XOF",
+      phone: "+245",
+      emoji: "🇬🇼",
+    },
+    {
+      continent: "South America",
+      iso2: "GY",
+      iso3: "GUY",
+      alpha: "G",
+      name: "Guyana",
+      fullname: "The Republic of Guyana",
+      capital: "Georgetown",
+      tld: ".gy",
+      currency: "GYD",
+      phone: "+592",
+      emoji: "🇬🇾",
+    },
+    {
+      continent: "North America",
+      iso2: "HT",
+      iso3: "HTI",
+      alpha: "H",
+      name: "Haiti",
+      fullname: "The Republic of Haiti",
+      capital: "Port-au-prince",
+      tld: ".ht",
+      currency: "USD",
+      phone: "+59",
+      emoji: "🇭🇹",
+    },
+    {
+      continent: "North America",
+      iso2: "HN",
+      iso3: "HND",
+      alpha: "H",
+      name: "Honduras",
+      fullname: "The Republic of Honduras",
+      capital: "Tegucigalpa",
+      tld: ".hn",
+      currency: "HNL",
+      phone: "+54",
+      emoji: "🇭🇳",
+    },
+    {
+      continent: "Asia",
+      iso2: "HK",
+      iso3: "HKG",
+      alpha: "H",
+      name: "Hong Kong",
+      fullname:
+        "Hong Kong Special Administrative Region of the People's Republic of China",
+      capital: "Hong Kong",
+      tld: ".hk",
+      currency: "HNL",
+      phone: "+852",
+      emoji: "🇭🇰",
+    },
+    {
+      continent: "Europe",
+      iso2: "HU",
+      iso3: "HUN",
+      alpha: "H",
+      name: "Hungary",
+      fullname: "Hungary",
+      capital: "Budapest",
+      tld: ".hu",
+      currency: "HUF",
+      phone: "+36",
+      emoji: "🇭🇺",
+    },
+    {
+      continent: "Europe",
+      iso2: "IS",
+      iso3: "ISL",
+      alpha: "I",
+      name: "Iceland",
+      fullname: "The Republic of Iceland",
+      capital: "Reykjavik",
+      tld: ".is",
+      currency: "ISK",
+      phone: "+354",
+      emoji: "🇮🇸",
+    },
+    {
+      continent: "Asia",
+      iso2: "IN",
+      iso3: "IND",
+      alpha: "I",
+      name: "India",
+      fullname: "The Republic of India",
+      capital: "New Delhi",
+      tld: ".in",
+      currency: "INR",
+      phone: "+91",
+      emoji: "🇮🇳",
+    },
+    {
+      continent: "Asia",
+      iso2: "ID",
+      iso3: "IDN",
+      alpha: "I",
+      name: "Indonesia",
+      fullname: "The Republic of Indonesia",
+      capital: "Jakarta",
+      tld: ".id",
+      currency: "IDR",
+      phone: "+62",
+      emoji: "🇮🇩",
+    },
+    {
+      continent: "Asia",
+      iso2: "IR",
+      iso3: "IRN",
+      alpha: "I",
+      name: "Iran",
+      fullname: "The Islamic Republic of Iran",
+      capital: "Tehran",
+      tld: ".ir",
+      currency: "IRR",
+      phone: "+98",
+      emoji: "🇮🇷",
+    },
+    {
+      continent: "Asia",
+      iso2: "IQ",
+      iso3: "IRQ",
+      alpha: "I",
+      name: "Iraq",
+      fullname: "The Republic of Iraq",
+      capital: "Baghdad",
+      tld: ".iq",
+      currency: "IQD",
+      phone: "+964",
+      emoji: "🇮🇶",
+    },
+    {
+      continent: "Europe",
+      iso2: "IE",
+      iso3: "IRL",
+      alpha: "I",
+      name: "Ireland",
+      fullname: "Ireland",
+      capital: "Dublin",
+      tld: ".ie",
+      currency: "EUR",
+      phone: "+353",
+      emoji: "🇮🇪",
+    },
+    {
+      continent: "Europe",
+      iso2: "IM",
+      iso3: "IMN",
+      alpha: "I",
+      name: "Isle Of Man",
+      fullname: "Isle Of Man",
+      capital: "Douglas",
+      tld: ".im",
+      currency: "IMP",
+      phone: "+44",
+      emoji: "🇮🇲",
+    },
+    {
+      continent: "Asia",
+      iso2: "IL",
+      iso3: "ISR",
+      alpha: "I",
+      name: "Israel",
+      fullname: "The State of Israel",
+      capital: "Tel Aviv",
+      tld: ".il",
+      currency: "ILS",
+      phone: "+972",
+      emoji: "🇮🇱",
+    },
+    {
+      continent: "Europe",
+      iso2: "IT",
+      iso3: "ITA",
+      alpha: "I",
+      name: "Italy",
+      fullname: "The Republic of Italy",
+      capital: "Rome",
+      tld: ".it",
+      currency: "EUR",
+      phone: "+39",
+      emoji: "🇮🇹",
+    },
+    {
+      continent: "North America",
+      iso2: "JM",
+      iso3: "JAM",
+      alpha: "J",
+      name: "Jamaica",
+      fullname: "Jamaica",
+      capital: "Kingston",
+      tld: ".jm",
+      currency: "JMD",
+      phone: "+1876",
+      emoji: "🇯🇲",
+    },
+    {
+      continent: "Asia",
+      iso2: "JP",
+      iso3: "JPN",
+      alpha: "J",
+      name: "Japan",
+      fullname: "Japan",
+      capital: "Tokyo",
+      tld: ".jp",
+      currency: "JPY",
+      phone: "+81",
+      emoji: "🇯🇵",
+    },
+    {
+      continent: "Europe",
+      iso2: "JE",
+      iso3: "JEY",
+      alpha: "J",
+      name: "Jersey",
+      fullname: "Jersey",
+      capital: "Saint Helier",
+      tld: ".je",
+      currency: "JEP",
+      phone: "+44",
+      emoji: "🇯🇪",
+    },
+    {
+      continent: "Asia",
+      iso2: "JO",
+      iso3: "JOR",
+      alpha: "J",
+      name: "Jordan",
+      fullname: "The Hashemite Kingdom of Jordan",
+      capital: "Amman",
+      tld: ".jo",
+      currency: "JOD",
+      phone: "+962",
+      emoji: "🇯🇴",
+    },
+    {
+      continent: "Asia",
+      iso2: "KZ",
+      iso3: "KAZ",
+      alpha: "K",
+      name: "Kazakhstan",
+      fullname: "The Republic of Kazakhstan",
+      capital: "Astana",
+      tld: ".kz",
+      currency: "KZT",
+      phone: "+7",
+      emoji: "🇰🇿",
+    },
+    {
+      continent: "Africa",
+      iso2: "KE",
+      iso3: "KEN",
+      alpha: "K",
+      name: "Kenya",
+      fullname: "The Republic of Kenya",
+      capital: "Nairobi",
+      tld: ".ke",
+      currency: "KES",
+      phone: "+254",
+      emoji: "🇰🇪",
+    },
+    {
+      continent: "Oceania",
+      iso2: "KI",
+      iso3: "KIR",
+      alpha: "K",
+      name: "Kiribati",
+      fullname: "The Republic of Kiribati",
+      capital: "Tarawa Atoll",
+      tld: ".ki",
+      currency: "AUD",
+      phone: "+686",
+      emoji: "🇰🇮",
+    },
+    {
+      continent: "Asia",
+      iso2: "KW",
+      iso3: "KWT",
+      alpha: "K",
+      name: "Kuwait",
+      fullname: "The State of Kuwait",
+      capital: "Kuwait City",
+      tld: ".kw",
+      currency: "KWD",
+      phone: "+965",
+      emoji: "🇰🇼",
+    },
+    {
+      continent: "Asia",
+      iso2: "KG",
+      iso3: "KGZ",
+      alpha: "K",
+      name: "Kyrgyzstan",
+      fullname: "The Kyrgyz Republic",
+      capital: "Bishkek",
+      tld: ".kg",
+      currency: "KGS",
+      phone: "+996",
+      emoji: "🇰🇬",
+    },
+    {
+      continent: "Asia",
+      iso2: "LA",
+      iso3: "LAO",
+      alpha: "L",
+      name: "Laos",
+      fullname: "The Lao People's Democratic Republic",
+      capital: "Vientiane",
+      tld: ".la",
+      currency: "LAK",
+      phone: "+856",
+      emoji: "🇱🇦",
+    },
+    {
+      continent: "Europe",
+      iso2: "LV",
+      iso3: "LVA",
+      alpha: "L",
+      name: "Latvia",
+      fullname: "The Republic of Latvia",
+      capital: "Riga",
+      tld: ".lv",
+      currency: "LVL",
+      phone: "+371",
+      emoji: "🇱🇻",
+    },
+    {
+      continent: "Asia",
+      iso2: "LB",
+      iso3: "LBN",
+      alpha: "L",
+      name: "Lebanon",
+      fullname: "The Lebanese Republic",
+      capital: "Beirut",
+      tld: ".lb",
+      currency: "LBP",
+      phone: "+961",
+      emoji: "🇱🇧",
+    },
+    {
+      continent: "Africa",
+      iso2: "LS",
+      iso3: "LSO",
+      alpha: "L",
+      name: "Lesotho",
+      fullname: "The Kingdom of Lesotho",
+      capital: "Maseru",
+      tld: ".ls",
+      currency: "LSL",
+      phone: "+266",
+      emoji: "🇱🇸",
+    },
+    {
+      continent: "Africa",
+      iso2: "LR",
+      iso3: "LBR",
+      alpha: "L",
+      name: "Liberia",
+      fullname: "The Republic of Liberia",
+      capital: "Monrovia",
+      tld: ".lr",
+      currency: "LRD",
+      phone: "+231",
+      emoji: "🇱🇷",
+    },
+    {
+      continent: "Africa",
+      iso2: "LY",
+      iso3: "LBY",
+      alpha: "L",
+      name: "Libya",
+      fullname: "Libya",
+      capital: "Tripoli",
+      tld: ".ly",
+      currency: "LYD",
+      phone: "+218",
+      emoji: "🇱🇾",
+    },
+    {
+      continent: "Europe",
+      iso2: "LI",
+      iso3: "LIE",
+      alpha: "L",
+      name: "Liechtenstein",
+      fullname: "The Principality of Liechtenstein",
+      capital: "Vaduz",
+      tld: ".li",
+      currency: "CHF",
+      phone: "+423",
+      emoji: "🇱🇮",
+    },
+    {
+      continent: "Europe",
+      iso2: "LT",
+      iso3: "LTU",
+      alpha: "L",
+      name: "Lithuania",
+      fullname: "The Republic of Lithuania",
+      capital: "Vilnius",
+      tld: ".lt",
+      currency: "LTL",
+      phone: "+370",
+      emoji: "🇱🇹",
+    },
+    {
+      continent: "Europe",
+      iso2: "LU",
+      iso3: "LUX",
+      alpha: "L",
+      name: "Luxembourg",
+      fullname: "The Grand Duchy of Luxembourg",
+      capital: "Luxembourg",
+      tld: ".lu",
+      currency: "EUR",
+      phone: "+352",
+      emoji: "🇱🇺",
+    },
+    {
+      continent: "Asia",
+      iso2: "MO",
+      iso3: "MAC",
+      alpha: "M",
+      name: "Macao",
+      fullname:
+        "Macao Special Administrative Region of the People's Republic of China",
+      capital: "Macao",
+      tld: ".mo",
+      currency: "MOP",
+      phone: "+853",
+      emoji: "🇲🇴",
+    },
+    {
+      continent: "Europe",
+      iso2: "MK",
+      iso3: "MKD",
+      alpha: "M",
+      name: "Macedonia",
+      fullname: "The Former Yugoslav Republic of Macedonia",
+      capital: "Skopje",
+      tld: ".mk",
+      currency: "MKD",
+      phone: "+389",
+      emoji: "🇲🇰",
+    },
+    {
+      continent: "Africa",
+      iso2: "MG",
+      iso3: "MDG",
+      alpha: "M",
+      name: "Madagascar",
+      fullname: "The Republic of Madagascar",
+      capital: "Antananarivo",
+      tld: ".mg",
+      currency: "MGA",
+      phone: "+261",
+      emoji: "🇲🇬",
+    },
+    {
+      continent: "Africa",
+      iso2: "MW",
+      iso3: "MWI",
+      alpha: "M",
+      name: "Malawi",
+      fullname: "The Republic of Malawi",
+      capital: "Lilongwe",
+      tld: ".mw",
+      currency: "MWK",
+      phone: "+265",
+      emoji: "🇲🇼",
+    },
+    {
+      continent: "Asia",
+      iso2: "MY",
+      iso3: "MYS",
+      alpha: "M",
+      name: "Malaysia",
+      fullname: "Malaysia",
+      capital: "Kuala Lumpur",
+      tld: ".my",
+      currency: "MYR",
+      phone: "+60",
+      emoji: "🇲🇾",
+    },
+    {
+      continent: "Asia",
+      iso2: "MV",
+      iso3: "MDV",
+      alpha: "M",
+      name: "Maldives",
+      fullname: "The Republic of Maldives",
+      capital: "Male",
+      tld: ".mv",
+      currency: "MVR",
+      phone: "+960",
+      emoji: "🇲🇻",
+    },
+    {
+      continent: "Africa",
+      iso2: "ML",
+      iso3: "MLI",
+      alpha: "M",
+      name: "Mali",
+      fullname: "The Republic of Mali",
+      capital: "Bamako",
+      tld: ".ml",
+      currency: "XOF",
+      phone: "+223",
+      emoji: "🇲🇱",
+    },
+    {
+      continent: "Europe",
+      iso2: "MT",
+      iso3: "MLT",
+      alpha: "M",
+      name: "Malta",
+      fullname: "The Republic of Malta",
+      capital: "Valletta",
+      tld: ".mt",
+      currency: "EUR",
+      phone: "+356",
+      emoji: "🇲🇹",
+    },
+    {
+      continent: "Oceania",
+      iso2: "MH",
+      iso3: "MHL",
+      alpha: "M",
+      name: "Marshall Islands",
+      fullname: "The Republic of the Marshall Islands",
+      capital: "Majuro",
+      tld: ".mh",
+      currency: "USD",
+      phone: "+692",
+      emoji: "🇲🇭",
+    },
+    {
+      continent: "North America",
+      iso2: "MQ",
+      iso3: "MTQ",
+      alpha: "M",
+      name: "Martinique",
+      fullname: "Martinique",
+      capital: "Fort-de-France",
+      tld: ".mq",
+      currency: "EUR",
+      phone: "+596",
+      emoji: "🇲🇶",
+    },
+    {
+      continent: "Africa",
+      iso2: "MR",
+      iso3: "MRT",
+      alpha: "M",
+      name: "Mauritania",
+      fullname: "The Islamic Republic of Mauritania",
+      capital: "Nouakchott",
+      tld: ".mr",
+      currency: "MRO",
+      phone: "+222",
+      emoji: "🇲🇷",
+    },
+    {
+      continent: "Africa",
+      iso2: "MU",
+      iso3: "MUS",
+      alpha: "M",
+      name: "Mauritius",
+      fullname: "The Republic of Mauritius",
+      capital: "Port Louis",
+      tld: ".mu",
+      currency: "MUR",
+      phone: "+230",
+      emoji: "🇲🇺",
+    },
+    {
+      continent: "Africa",
+      iso2: "YT",
+      iso3: "MYT",
+      alpha: "M",
+      name: "Mayotte",
+      fullname: "The Department of Mayotte",
+      capital: "Mamoudzou",
+      tld: ".yt",
+      currency: "EUR",
+      phone: "+269",
+      emoji: "🇾🇹",
+    },
+    {
+      continent: "North America",
+      iso2: "MX",
+      iso3: "MEX",
+      alpha: "M",
+      name: "Mexico",
+      fullname: "The United Mexican States",
+      capital: "Mexico City",
+      tld: ".mx",
+      currency: "MXN",
+      phone: "+52",
+      emoji: "🇲🇽",
+    },
+    {
+      continent: "Oceania",
+      iso2: "FM",
+      iso3: "FSM",
+      alpha: "M",
+      name: "Micronesia",
+      fullname: "The Federated States of Micronesia",
+      capital: "Palikir",
+      tld: ".fm",
+      currency: "USD",
+      phone: "+691",
+      emoji: "🇫🇲",
+    },
+    {
+      continent: "Europe",
+      iso2: "MD",
+      iso3: "MDA",
+      alpha: "M",
+      name: "Moldova",
+      fullname: "The Republic of Moldova",
+      capital: "Chisinau",
+      tld: ".md",
+      currency: "MDL",
+      phone: "+373",
+      emoji: "🇲🇩",
+    },
+    {
+      continent: "Europe",
+      iso2: "MC",
+      iso3: "MCO",
+      alpha: "M",
+      name: "Monaco",
+      fullname: "The Principality of Monaco",
+      capital: "Monaco",
+      tld: ".mc",
+      currency: "EUR",
+      phone: "+377",
+      emoji: "🇲🇨",
+    },
+    {
+      continent: "Asia",
+      iso2: "MN",
+      iso3: "MNG",
+      alpha: "M",
+      name: "Mongolia",
+      fullname: "Mongolia",
+      capital: "Ulaanbaatar",
+      tld: ".mn",
+      currency: "MNT",
+      phone: "+976",
+      emoji: "🇲🇳",
+    },
+    {
+      continent: "Europe",
+      iso2: "ME",
+      iso3: "MNE",
+      alpha: "M",
+      name: "Montenegro",
+      fullname: "Montenegro",
+      capital: "Podgorica",
+      tld: ".me",
+      currency: "EUR",
+      phone: "+382",
+      emoji: "🇲🇪",
+    },
+    {
+      continent: "North America",
+      iso2: "MS",
+      iso3: "MSR",
+      alpha: "M",
+      name: "Montserrat",
+      fullname: "Montserrat",
+      capital: "Plymouth",
+      tld: ".ms",
+      currency: "XCD",
+      phone: "+1664",
+      emoji: "🇲🇸",
+    },
+    {
+      continent: "Africa",
+      iso2: "MA",
+      iso3: "MAR",
+      alpha: "M",
+      name: "Morocco",
+      fullname: "The Kingdom of Morocco",
+      capital: "Rabat",
+      tld: ".ma",
+      currency: "MAD",
+      phone: "+211",
+      emoji: "🇲🇦",
+    },
+    {
+      continent: "Africa",
+      iso2: "MZ",
+      iso3: "MOZ",
+      alpha: "M",
+      name: "Mozambique",
+      fullname: "The Republic of Mozambique",
+      capital: "Maputo",
+      tld: ".mz",
+      currency: "MZM",
+      phone: "+258",
+      emoji: "🇲🇿",
+    },
+    {
+      continent: "Asia",
+      iso2: "MM",
+      iso3: "MMR",
+      alpha: "M",
+      name: "Myanmar",
+      fullname: "The Republic of the Union of Myanmar",
+      capital: "Nypyidaw",
+      tld: ".mm",
+      currency: "MMK",
+      phone: "+95",
+      emoji: "🇲🇲",
+    },
+    {
+      continent: "Africa",
+      iso2: "NA",
+      iso3: "NAM",
+      alpha: "N",
+      name: "Namibia",
+      fullname: "The Republic of Namibia",
+      capital: "Windhoek",
+      tld: ".na",
+      currency: "ZAR",
+      phone: "+264",
+      emoji: "🇳🇦",
+    },
+    {
+      continent: "Oceania",
+      iso2: "NR",
+      iso3: "NRU",
+      alpha: "N",
+      name: "Nauru",
+      fullname: "The Republic of Nauru",
+      capital: "Yaren District",
+      tld: ".nr",
+      currency: "AUD",
+      phone: "+674",
+      emoji: "🇳🇷",
+    },
+    {
+      continent: "Asia",
+      iso2: "NP",
+      iso3: "NPL",
+      alpha: "N",
+      name: "Nepal",
+      fullname: "The Federal Democratic Republic of Nepal",
+      capital: "Kathmandu",
+      tld: ".np",
+      currency: "NPR",
+      phone: "+977",
+      emoji: "🇳🇵",
+    },
+    {
+      continent: "Europe",
+      iso2: "NL",
+      iso3: "NLD",
+      alpha: "N",
+      name: "Netherlands",
+      fullname: "The Kingdom of the Netherlands",
+      capital: "Amsterdam",
+      tld: ".nl",
+      currency: "EUR",
+      phone: "+31",
+      emoji: "🇳🇱",
+    },
+    {
+      continent: "Oceania",
+      iso2: "NZ",
+      iso3: "NZL",
+      alpha: "N",
+      name: "New Zealand",
+      fullname: "New Zealand",
+      capital: "Wellington",
+      tld: ".nz",
+      currency: "NZD",
+      phone: "+64",
+      emoji: "🇳🇿",
+    },
+    {
+      continent: "North America",
+      iso2: "NI",
+      iso3: "NIC",
+      alpha: "N",
+      name: "Nicaragua",
+      fullname: "The Republic of Nicaragua",
+      capital: "Managua",
+      tld: ".ni",
+      currency: "NIO",
+      phone: "+55",
+      emoji: "🇳🇮",
+    },
+    {
+      continent: "Africa",
+      iso2: "NE",
+      iso3: "NER",
+      alpha: "N",
+      name: "Niger",
+      fullname: "The Republic of the Niger",
+      capital: "Niamey",
+      tld: ".ne",
+      currency: "XOF",
+      phone: "+227",
+      emoji: "🇳🇪",
+    },
+    {
+      continent: "Africa",
+      iso2: "NG",
+      iso3: "NGA",
+      alpha: "N",
+      name: "Nigeria",
+      fullname: "The Federal Republic of Nigeria",
+      capital: "Abuja",
+      tld: ".ng",
+      currency: "NGN",
+      phone: "+234",
+      emoji: "🇳🇬",
+    },
+    {
+      continent: "Asia",
+      iso2: "KP",
+      iso3: "PRK",
+      alpha: "N",
+      name: "North Korea",
+      fullname: "The Democratic People's Republic of Korea",
+      capital: "Pyongyang",
+      tld: ".kp",
+      currency: "KPW",
+      phone: "+850",
+      emoji: "🇰🇵",
+    },
+    {
+      continent: "Europe",
+      iso2: "NO",
+      iso3: "NOR",
+      alpha: "N",
+      name: "Norway",
+      fullname: "The Kingdom of Norway",
+      capital: "Oslo",
+      tld: ".no",
+      currency: "NOK",
+      phone: "+47",
+      emoji: "🇳🇴",
+    },
+    {
+      continent: "Asia",
+      iso2: "OM",
+      iso3: "OMN",
+      alpha: "O",
+      name: "Oman",
+      fullname: "The Sultanate of Oman",
+      capital: "Muscat",
+      tld: ".om",
+      currency: "OMR",
+      phone: "+968",
+      emoji: "🇴🇲",
+    },
+    {
+      continent: "Asia",
+      iso2: "PK",
+      iso3: "PAK",
+      alpha: "P",
+      name: "Pakistan",
+      fullname: "The Islamic Republic of Pakistan",
+      capital: "Islamabad",
+      tld: ".pk",
+      currency: "PKR",
+      phone: "+92",
+      emoji: "🇵🇰",
+    },
+    {
+      continent: "Oceania",
+      iso2: "PW",
+      iso3: "PLW",
+      alpha: "P",
+      name: "Palau",
+      fullname: "The Republic of Palau",
+      capital: "Ngerulmud",
+      tld: ".pw",
+      currency: "USD",
+      phone: "+680",
+      emoji: "🇵🇼",
+    },
+    {
+      continent: "Asia",
+      iso2: "PS",
+      iso3: "PSE",
+      alpha: "P",
+      name: "Palestine",
+      fullname: "The State of Palestine",
+      capital: "Ramallah",
+      tld: ".ps",
+      currency: "",
+      phone: "+970",
+      emoji: "🇵🇸",
+    },
+    {
+      continent: "South America",
+      iso2: "PA",
+      iso3: "PAN",
+      alpha: "P",
+      name: "Panama",
+      fullname: "The Republic of Panama",
+      capital: "Panama City",
+      tld: ".pa",
+      currency: "USD",
+      phone: "+57",
+      emoji: "🇵🇦",
+    },
+    {
+      continent: "Oceania",
+      iso2: "PG",
+      iso3: "PNG",
+      alpha: "P",
+      name: "Papua New Guinea",
+      fullname: "Independent State of Papua New Guinea",
+      capital: "Port Moresby",
+      tld: ".pg",
+      currency: "PGK",
+      phone: "+675",
+      emoji: "🇵🇬",
+    },
+    {
+      continent: "South America",
+      iso2: "PY",
+      iso3: "PRY",
+      alpha: "P",
+      name: "Paraguay",
+      fullname: "The Republic of Paraguay",
+      capital: "Asunción",
+      tld: ".py",
+      currency: "PYG",
+      phone: "+595",
+      emoji: "🇵🇾",
+    },
+    {
+      continent: "South America",
+      iso2: "PE",
+      iso3: "PER",
+      alpha: "P",
+      name: "Peru",
+      fullname: "The Republic of Peru",
+      capital: "Lima",
+      tld: ".pe",
+      currency: "PEN",
+      phone: "+51",
+      emoji: "🇵🇪",
+    },
+    {
+      continent: "Asia",
+      iso2: "PH",
+      iso3: "PHL",
+      alpha: "P",
+      name: "Philippines",
+      fullname: "The Republic of the Philippines",
+      capital: "Manila",
+      tld: ".ph",
+      currency: "PHP",
+      phone: "+63",
+      emoji: "🇵🇭",
+    },
+    {
+      continent: "Oceania",
+      iso2: "PN",
+      iso3: "PCN",
+      alpha: "P",
+      name: "Pitcairn",
+      fullname: "Pitcairn",
+      capital: "Adamstown",
+      tld: ".pn",
+      currency: "NZD",
+      phone: "+649",
+      emoji: "🇵🇳",
+    },
+    {
+      continent: "Europe",
+      iso2: "PL",
+      iso3: "POL",
+      alpha: "P",
+      name: "Poland",
+      fullname: "The Republic of Poland",
+      capital: "Warsaw",
+      tld: ".pl",
+      currency: "PLN",
+      phone: "+48",
+      emoji: "🇵🇱",
+    },
+    {
+      continent: "Europe",
+      iso2: "PT",
+      iso3: "PRT",
+      alpha: "P",
+      name: "Portugal",
+      fullname: "The Portuguese Republic",
+      capital: "Lisbon",
+      tld: ".pt",
+      currency: "EUR",
+      phone: "+351",
+      emoji: "🇵🇹",
+    },
+    {
+      continent: "North America",
+      iso2: "PR",
+      iso3: "PRI",
+      alpha: "P",
+      name: "Puerto Rico",
+      fullname: "The Commonwealth of Puerto Rico",
+      capital: "San Juan",
+      tld: ".pr",
+      currency: "USD",
+      phone: "+1939",
+      emoji: "🇵🇷",
+    },
+    {
+      continent: "Asia",
+      iso2: "QA",
+      iso3: "QAT",
+      alpha: "Q",
+      name: "Qatar",
+      fullname: "The State of Qatar",
+      capital: "Doha",
+      tld: ".qa",
+      currency: "QAR",
+      phone: "+974",
+      emoji: "🇶🇦",
+    },
+    {
+      continent: "Africa",
+      iso2: "RE",
+      iso3: "REU",
+      alpha: "R",
+      name: "Réunion",
+      fullname: "Réunion",
+      capital: "Saint-Denis",
+      tld: ".re",
+      currency: "EUR",
+      phone: "+262",
+      emoji: "🇷🇪",
+    },
+    {
+      continent: "Europe",
+      iso2: "RO",
+      iso3: "ROU",
+      alpha: "R",
+      name: "Romania",
+      fullname: "Romania",
+      capital: "Bucharest",
+      tld: ".ro",
+      currency: "RON",
+      phone: "+40",
+      emoji: "🇷🇴",
+    },
+    {
+      continent: "Asia",
+      iso2: "RU",
+      iso3: "RUS",
+      alpha: "R",
+      name: "Russia",
+      fullname: "The Russian Federation",
+      capital: "Moscow",
+      tld: ".ru",
+      currency: "RUB",
+      phone: "+7",
+      emoji: "🇷🇺",
+    },
+    {
+      continent: "Africa",
+      iso2: "RW",
+      iso3: "RWA",
+      alpha: "R",
+      name: "Rwanda",
+      fullname: "The Republic of Rwanda",
+      capital: "Kigali",
+      tld: ".rw",
+      currency: "RWF",
+      phone: "+250",
+      emoji: "🇷🇼",
+    },
+    {
+      continent: "Africa",
+      iso2: "SH",
+      iso3: "SHN",
+      alpha: "S",
+      name: "Saint Helena",
+      fullname: "Saint Helena",
+      capital: "Jamestown",
+      tld: ".sh",
+      currency: "SHP",
+      phone: "+290",
+      emoji: "🇸🇭",
+    },
+    {
+      continent: "North America",
+      iso2: "KN",
+      iso3: "KNA",
+      alpha: "S",
+      name: "Saint Kitts And Nevis",
+      fullname: "Saint Kitts and Nevis",
+      capital: "Basseterre",
+      tld: ".kn",
+      currency: "XCD",
+      phone: "+1869",
+      emoji: "🇰🇳",
+    },
+    {
+      continent: "South America",
+      iso2: "LC",
+      iso3: "LCA",
+      alpha: "S",
+      name: "Saint Lucia",
+      fullname: "Saint Lucia",
+      capital: "Castries",
+      tld: ".lc",
+      currency: "XCD",
+      phone: "+1758",
+      emoji: "🇱🇨",
+    },
+    {
+      continent: "North America",
+      iso2: "PM",
+      iso3: "SPM",
+      alpha: "S",
+      name: "Saint Pierre And Miquelon",
+      fullname: "Saint Pierre And Miquelon",
+      capital: "Saint-Pierre",
+      tld: ".pm",
+      currency: "EUR",
+      phone: "+508",
+      emoji: "🇵🇲",
+    },
+    {
+      continent: "South America",
+      iso2: "VC",
+      iso3: "VCT",
+      alpha: "S",
+      name: "Saint Vincent And The Grenadines",
+      fullname: "Saint Vincent and the Grenadines",
+      capital: "Kingstown",
+      tld: ".vc",
+      currency: "XCD",
+      phone: "+1784",
+      emoji: "🇻🇨",
+    },
+    {
+      continent: "Oceania",
+      iso2: "WS",
+      iso3: "WSM",
+      alpha: "S",
+      name: "Samoa",
+      fullname: "The Independent State of Samoa",
+      capital: "Apia",
+      tld: ".ws",
+      currency: "WST",
+      phone: "+685",
+      emoji: "🇼🇸",
+    },
+    {
+      continent: "Europe",
+      iso2: "SM",
+      iso3: "SMR",
+      alpha: "S",
+      name: "San Marino",
+      fullname: "The Republic of San Marino",
+      capital: "San Marino",
+      tld: ".sm",
+      currency: "EUR",
+      phone: "+378",
+      emoji: "🇸🇲",
+    },
+    {
+      continent: "Africa",
+      iso2: "ST",
+      iso3: "STP",
+      alpha: "S",
+      name: "São Tomé and Príncipe",
+      fullname: "The Democratic Republic of São Tomé and Príncipe",
+      capital: "São Tomé",
+      tld: ".st",
+      currency: "STD",
+      phone: "+239",
+      emoji: "🇸🇹",
+    },
+    {
+      continent: "Asia",
+      iso2: "SA",
+      iso3: "SAU",
+      alpha: "S",
+      name: "Saudi Arabia",
+      fullname: "The Kingdom of Saudi Arabia",
+      capital: "Riyadh",
+      tld: ".sa",
+      currency: "SAR",
+      phone: "+966",
+      emoji: "🇸🇦",
+    },
+    {
+      continent: "Africa",
+      iso2: "SN",
+      iso3: "SEN",
+      alpha: "S",
+      name: "Senegal",
+      fullname: "The Republic of Senegal",
+      capital: "Dakar",
+      tld: ".sn",
+      currency: "XOF",
+      phone: "+221",
+      emoji: "🇸🇳",
+    },
+    {
+      continent: "Europe",
+      iso2: "RS",
+      iso3: "SRB",
+      alpha: "S",
+      name: "Serbia",
+      fullname: "The Republic of Serbia",
+      capital: "Belgrade",
+      tld: ".cs",
+      currency: "EUR",
+      phone: "+381",
+      emoji: "🇷🇸",
+    },
+    {
+      continent: "Africa",
+      iso2: "SC",
+      iso3: "SYC",
+      alpha: "S",
+      name: "Seychelles",
+      fullname: "The Republic of Seychelles",
+      capital: "Victoria",
+      tld: ".sc",
+      currency: "SCR",
+      phone: "+248",
+      emoji: "🇸🇨",
+    },
+    {
+      continent: "Africa",
+      iso2: "SL",
+      iso3: "SLE",
+      alpha: "S",
+      name: "Sierra Leone",
+      fullname: "The Republic of Sierra Leone",
+      capital: "Freetown",
+      tld: ".sl",
+      currency: "SLL",
+      phone: "+232",
+      emoji: "🇸🇱",
+    },
+    {
+      continent: "Asia",
+      iso2: "SG",
+      iso3: "SGP",
+      alpha: "S",
+      name: "Singapore",
+      fullname: "The Republic of Singapore",
+      capital: "Singapore",
+      tld: ".sg",
+      currency: "SGD",
+      phone: "+65",
+      emoji: "🇸🇬",
+    },
+    {
+      continent: "Europe",
+      iso2: "SK",
+      iso3: "SVK",
+      alpha: "S",
+      name: "Slovakia",
+      fullname: "The Slovak Republic",
+      capital: "Bratislava",
+      tld: ".sk",
+      currency: "SKK",
+      phone: "+421",
+      emoji: "🇸🇰",
+    },
+    {
+      continent: "Europe",
+      iso2: "SI",
+      iso3: "SVN",
+      alpha: "S",
+      name: "Slovenia",
+      fullname: "The Republic of Slovenia",
+      capital: "Ljubljana",
+      tld: ".si",
+      currency: "SIT",
+      phone: "+386",
+      emoji: "🇸🇮",
+    },
+    {
+      continent: "Oceania",
+      iso2: "SB",
+      iso3: "SLB",
+      alpha: "S",
+      name: "Solomon Islands",
+      fullname: "Solomon Islands",
+      capital: "Honiara",
+      tld: ".sb",
+      currency: "SBD",
+      phone: "+677",
+      emoji: "🇸🇧",
+    },
+    {
+      continent: "Africa",
+      iso2: "SO",
+      iso3: "SOM",
+      alpha: "S",
+      name: "Somalia",
+      fullname: "The Federal Republic of Somalia",
+      capital: "Mogadishu",
+      tld: ".so",
+      currency: "SOS",
+      phone: "+252",
+      emoji: "🇸🇴",
+    },
+    {
+      continent: "Africa",
+      iso2: "ZA",
+      iso3: "ZAF",
+      alpha: "S",
+      name: "South Africa",
+      fullname: "The Republic of South Africa",
+      capital: "Pretoria",
+      tld: ".za",
+      currency: "ZAR",
+      phone: "+27",
+      emoji: "🇿🇦",
+    },
+    {
+      continent: "Asia",
+      iso2: "KR",
+      iso3: "KOR",
+      alpha: "S",
+      name: "South Korea",
+      fullname: "The Republic of Korea",
+      capital: "Seoul",
+      tld: ".kr",
+      currency: "KRW",
+      phone: "+82",
+      emoji: "🇰🇷",
+    },
+    {
+      continent: "Africa",
+      iso2: "SS",
+      iso3: "SSD",
+      alpha: "S",
+      name: "South Sudan",
+      fullname: "The Republic of South Sudan",
+      capital: "Juba",
+      tld: ".ss",
+      currency: "SSP",
+      phone: "+221",
+      emoji: "🇸🇸",
+    },
+    {
+      continent: "Europe",
+      iso2: "ES",
+      iso3: "ESP",
+      alpha: "S",
+      name: "Spain",
+      fullname: "The Kingdom of Spain",
+      capital: "Madrid",
+      tld: ".es",
+      currency: "EUR",
+      phone: "+34",
+      emoji: "🇪🇸",
+    },
+    {
+      continent: "Asia",
+      iso2: "LK",
+      iso3: "LKA",
+      alpha: "S",
+      name: "Sri Lanka",
+      fullname: "The Democratic Socialist Republic of Sri Lanka",
+      capital: "Colombo",
+      tld: ".lk",
+      currency: "LKR",
+      phone: "+94",
+      emoji: "🇱🇰",
+    },
+    {
+      continent: "Africa",
+      iso2: "SD",
+      iso3: "SDN",
+      alpha: "S",
+      name: "Sudan",
+      fullname: "The Republic of the Sudan",
+      capital: "Khartoum",
+      tld: ".sd",
+      currency: "SDD",
+      phone: "+249",
+      emoji: "🇸🇩",
+    },
+    {
+      continent: "South America",
+      iso2: "SR",
+      iso3: "SUR",
+      alpha: "S",
+      name: "Suriname",
+      fullname: "The Republic of Suriname",
+      capital: "Paramaribo",
+      tld: ".sr",
+      currency: "SRD",
+      phone: "+597",
+      emoji: "🇸🇷",
+    },
+    {
+      continent: "Africa",
+      iso2: "SZ",
+      iso3: "SWZ",
+      alpha: "S",
+      name: "Swaziland",
+      fullname: "The Kingdom of Swaziland",
+      capital: "Mbabane",
+      tld: ".sz",
+      currency: "SZL",
+      phone: "+268",
+      emoji: "🇸🇿",
+    },
+    {
+      continent: "Europe",
+      iso2: "SE",
+      iso3: "SWE",
+      alpha: "S",
+      name: "Sweden",
+      fullname: "The Kingdom of Sweden",
+      capital: "Stockholm",
+      tld: ".se",
+      currency: "SEK",
+      phone: "+46",
+      emoji: "🇸🇪",
+    },
+    {
+      continent: "Europe",
+      iso2: "CH",
+      iso3: "CHE",
+      alpha: "S",
+      name: "Switzerland",
+      fullname: "The Swiss Confederation",
+      capital: "Bern",
+      tld: ".ch",
+      currency: "CHF",
+      phone: "+41",
+      emoji: "🇨🇭",
+    },
+    {
+      continent: "Asia",
+      iso2: "SY",
+      iso3: "SYR",
+      alpha: "S",
+      name: "Syria",
+      fullname: "The Syrian Arab Republic",
+      capital: "Damascus",
+      tld: ".sy",
+      currency: "SYP",
+      phone: "+963",
+      emoji: "🇸🇾",
+    },
+    {
+      continent: "Asia",
+      iso2: "TW",
+      iso3: "TWN",
+      alpha: "T",
+      name: "Taiwan",
+      fullname: "Taiwan",
+      capital: "Taipei",
+      tld: ".tw",
+      currency: "TWD",
+      phone: "+886",
+      emoji: "🇹🇼",
+    },
+    {
+      continent: "Asia",
+      iso2: "TJ",
+      iso3: "TJK",
+      alpha: "T",
+      name: "Tajikistan",
+      fullname: "The Republic of Tajikistan",
+      capital: "Dushanbe",
+      tld: ".tj",
+      currency: "RUB",
+      phone: "+992",
+      emoji: "🇹🇯",
+    },
+    {
+      continent: "Africa",
+      iso2: "TZ",
+      iso3: "TZA",
+      alpha: "T",
+      name: "Tanzania",
+      fullname: "The United Republic of Tanzania",
+      capital: "Dar es Salaam",
+      tld: ".tz",
+      currency: "TZS",
+      phone: "+255",
+      emoji: "🇹🇿",
+    },
+    {
+      continent: "Asia",
+      iso2: "TH",
+      iso3: "THA",
+      alpha: "T",
+      name: "Thailand",
+      fullname: "The Kingdom of Thailand",
+      capital: "Bangkok",
+      tld: ".th",
+      currency: "THB",
+      phone: "+66",
+      emoji: "🇹🇭",
+    },
+    {
+      continent: "Africa",
+      iso2: "TG",
+      iso3: "TGO",
+      alpha: "T",
+      name: "Togo",
+      fullname: "The Togolese Republic",
+      capital: "Lomé",
+      tld: ".tg",
+      currency: "XOF",
+      phone: "+228",
+      emoji: "🇹🇬",
+    },
+    {
+      continent: "Oceania",
+      iso2: "TO",
+      iso3: "TON",
+      alpha: "T",
+      name: "Tonga",
+      fullname: "The Kingdom of Tonga",
+      capital: "Nukuʻalofa",
+      tld: ".to",
+      currency: "TOP",
+      phone: "+676",
+      emoji: "🇹🇴",
+    },
+    {
+      continent: "South America",
+      iso2: "TT",
+      iso3: "TTO",
+      alpha: "T",
+      name: "Trinidad And Tobago",
+      fullname: "The Republic of Trinidad and Tobago",
+      capital: "Port of Spain",
+      tld: ".tt",
+      currency: "TTD",
+      phone: "+1868",
+      emoji: "🇹🇹",
+    },
+    {
+      continent: "Africa",
+      iso2: "TN",
+      iso3: "TUN",
+      alpha: "T",
+      name: "Tunisia",
+      fullname: "The Republic of Tunisia",
+      capital: "Tunis",
+      tld: ".tn",
+      currency: "TND",
+      phone: "+216",
+      emoji: "🇹🇳",
+    },
+    {
+      continent: "Asia",
+      iso2: "TR",
+      iso3: "TUR",
+      alpha: "T",
+      name: "Turkey",
+      fullname: "The Republic of Turkey",
+      capital: "Ankara",
+      tld: ".tr",
+      currency: "TRY",
+      phone: "+90",
+      emoji: "🇹🇷",
+    },
+    {
+      continent: "Asia",
+      iso2: "TM",
+      iso3: "TKM",
+      alpha: "T",
+      name: "Turkmenistan",
+      fullname: "Turkmenistan",
+      capital: "Ashgabat",
+      tld: ".tm",
+      currency: "TMM",
+      phone: "+993",
+      emoji: "🇹🇲",
+    },
+    {
+      continent: "North America",
+      iso2: "TC",
+      iso3: "TCA",
+      alpha: "T",
+      name: "Turks and Caicos",
+      fullname: "The Turks and Caicos Islands",
+      capital: "Grand Turk (Cockburn Town)",
+      tld: ".tc",
+      currency: "USD",
+      phone: "+1649",
+      emoji: "🇹🇨",
+    },
+    {
+      continent: "Oceania",
+      iso2: "TV",
+      iso3: "TUV",
+      alpha: "T",
+      name: "Tuvalu",
+      fullname: "Tuvalu",
+      capital: "Funafuti",
+      tld: ".tv",
+      currency: "TVD",
+      phone: "+688",
+      emoji: "🇹🇻",
+    },
+    {
+      continent: "Africa",
+      iso2: "UG",
+      iso3: "UGA",
+      alpha: "U",
+      name: "Uganda",
+      fullname: "The Republic of Uganda",
+      capital: "Kampala",
+      tld: ".ug",
+      currency: "UGX",
+      phone: "+256",
+      emoji: "🇺🇬",
+    },
+    {
+      continent: "Europe",
+      iso2: "UA",
+      iso3: "UKR",
+      alpha: "U",
+      name: "Ukraine",
+      fullname: "Ukraine",
+      capital: "Kiev",
+      tld: ".ua",
+      currency: "UAH",
+      phone: "+380",
+      emoji: "🇺🇦",
+    },
+    {
+      continent: "Asia",
+      iso2: "AE",
+      iso3: "ARE",
+      alt: "UAE",
+      alpha: "U",
+      name: "United Arab Emirates",
+      fullname: "The United Arab Emirates",
+      capital: "Abu Dhabi",
+      tld: ".ae",
+      currency: "AED",
+      phone: "+971",
+      emoji: "🇦🇪",
+    },
+    {
+      continent: "Europe",
+      iso2: "GB",
+      iso3: "GBR",
+      alt: "UK",
+      alpha: "U",
+      name: "United Kingdom",
+      fullname: "The United Kingdom of Great Britain and Northern Ireland",
+      capital: "London",
+      tld: ".gb",
+      currency: "GBP",
+      phone: "+44",
+      emoji: "🇬🇧",
+    },
+    {
+      continent: "North America",
+      iso2: "US",
+      iso3: "USA",
+      alpha: "U",
+      name: "United States",
+      fullname: "The United States of America",
+      capital: "Washington, D.C.",
+      tld: ".us",
+      currency: "USD",
+      phone: "+1",
+      emoji: "🇺🇸",
+    },
+    {
+      continent: "South America",
+      iso2: "UY",
+      iso3: "URY",
+      alpha: "U",
+      name: "Uruguay",
+      fullname: "The Eastern Republic of Uruguay",
+      capital: "Montevideo",
+      tld: ".uy",
+      currency: "UYU",
+      phone: "+598",
+      emoji: "🇺🇾",
+    },
+    {
+      continent: "Asia",
+      iso2: "UZ",
+      iso3: "UZB",
+      alpha: "U",
+      name: "Uzbekistan",
+      fullname: "The Republic of Uzbekistan",
+      capital: "Tashkent",
+      tld: ".uz",
+      currency: "UZS",
+      phone: "+998",
+      emoji: "🇺🇿",
+    },
+    {
+      continent: "Oceania",
+      iso2: "VU",
+      iso3: "VUT",
+      alpha: "V",
+      name: "Vanuatu",
+      fullname: "The Republic of Vanuatu",
+      capital: "Port Vila",
+      tld: ".vu",
+      currency: "VUV",
+      phone: "+678",
+      emoji: "🇻🇺",
+    },
+    {
+      continent: "South America",
+      iso2: "VE",
+      iso3: "VEN",
+      alpha: "V",
+      name: "Venezuela",
+      fullname: "The Bolivarian Republic of Venezuela",
+      capital: "Caracas",
+      tld: ".ve",
+      currency: "VEB",
+      phone: "+58",
+      emoji: "🇻🇪",
+    },
+    {
+      continent: "Asia",
+      iso2: "VN",
+      iso3: "VNM",
+      alpha: "V",
+      name: "Vietnam",
+      fullname: "The Socialist Republic of Viet Nam",
+      capital: "Hanoi",
+      tld: ".vn",
+      currency: "VND",
+      phone: "+84",
+      emoji: "🇻🇳",
+    },
+    {
+      continent: "North America",
+      iso2: "VG",
+      iso3: "VGB",
+      alpha: "V",
+      name: "Virgin Islands, British",
+      fullname: "British Virgin Islands",
+      capital: "Road Town",
+      tld: ".vg",
+      currency: "USD",
+      phone: "+1284",
+      emoji: "🇻🇬",
+    },
+    {
+      continent: "South America",
+      iso2: "VI",
+      iso3: "VIR",
+      alpha: "V",
+      name: "Virgin Islands, US",
+      fullname: "U.S. Virgin Islands",
+      capital: "Charlotte Amalie",
+      tld: ".vi",
+      currency: "USD",
+      phone: "+1340",
+      emoji: "🇻🇮",
+    },
+    {
+      continent: "Oceania",
+      iso2: "WF",
+      iso3: "WLF",
+      alpha: "W",
+      name: "Wallis and Futuna",
+      fullname: "Wallis and Futuna",
+      capital: "Matā'Utu",
+      tld: ".wf",
+      currency: "CFP",
+      phone: "+681",
+      emoji: "🇼🇫",
+    },
+    {
+      continent: "Africa",
+      iso2: "EH",
+      iso3: "ESH",
+      alpha: "W",
+      name: "Western Sahara",
+      fullname: "Western Sahara",
+      capital: "El-Aaiún",
+      tld: ".eh",
+      currency: "MAD",
+      phone: "+212",
+      emoji: "🇪🇭",
+    },
+    {
+      continent: "Asia",
+      iso2: "YE",
+      iso3: "YEM",
+      alpha: "Y",
+      name: "Yemen",
+      fullname: "The Republic of Yemen",
+      capital: "Sana’a",
+      tld: ".ye",
+      currency: "YER",
+      phone: "+967",
+      emoji: "🇾🇪",
+    },
+    {
+      continent: "Africa",
+      iso2: "ZM",
+      iso3: "ZMB",
+      alpha: "Z",
+      name: "Zambia",
+      fullname: "The Republic of Zambia",
+      capital: "Lusaka",
+      tld: ".zm",
+      currency: "ZMK",
+      phone: "+260",
+      emoji: "🇿🇲",
+    },
+    {
+      continent: "Africa",
+      iso2: "ZW",
+      iso3: "ZWE",
+      alpha: "Z",
+      name: "Zimbabwe",
+      fullname: "The Republic of Zimbabwe",
+      capital: "Harare",
+      tld: ".zw",
+      currency: "ZWD",
+      phone: "+263",
+      emoji: "🇿🇼",
+    },
+  ],
+};
diff --git a/packages/utilities/src/_debounce.ts b/packages/utilities/src/_debounce.ts
new file mode 100644
index 0000000..4fbc72b
--- /dev/null
+++ b/packages/utilities/src/_debounce.ts
@@ -0,0 +1,42 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+/**
+ * debounce callback
+ * @internal
+ */
+export const debounce = (fn: (...rest: any) => any, timeout = 500) => {
+  /** ***************** create debounce timer id using callback hash *******************/
+  let _timer: any;
+
+  /** ***************** return debounced function *******************/
+  const cb = (...args: any) => {
+    clearTimeout(_timer);
+    if (typeof window !== "undefined")
+      _timer = window.setTimeout(() => fn?.(...args), timeout);
+  };
+  cb.cancel = () => clearTimeout(_timer);
+  return cb;
+};
diff --git a/packages/utilities/src/_dedupe.ts b/packages/utilities/src/_dedupe.ts
new file mode 100644
index 0000000..97981a8
--- /dev/null
+++ b/packages/utilities/src/_dedupe.ts
@@ -0,0 +1,54 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isEmpty } from "./_isType";
+
+export const dedupe = (list: any[], key?: string) => {
+  const filtered = list.filter((i) => !isEmpty(i));
+  if (!key) {
+    return Array.from(new Set(filtered).values());
+  }
+
+  return Array.from(new Map(filtered.map((obj) => [obj[key], obj])).values());
+};
+
+export const flatten = (list: any[]) => {
+  return list.flat(5).filter((i) => !isEmpty(i));
+};
+
+export const flattenAndDedupe = (list: any[] = [], key?: string) => {
+  return dedupe(flatten(list), key);
+};
+
+export const groupBy = <T extends KeyValue>(
+  list: T[],
+  prop: keyof T,
+  missingKey?: string,
+): KeyValue<T[]> => {
+  return list.reduce((r: AnyObject, i) => {
+    const key = i[prop] ?? missingKey;
+    if (!r[key]) r[key] = [];
+    r[key].push(i);
+    return r;
+  }, {});
+};
diff --git a/packages/utilities/src/_fetch.ts b/packages/utilities/src/_fetch.ts
new file mode 100644
index 0000000..8bcef46
--- /dev/null
+++ b/packages/utilities/src/_fetch.ts
@@ -0,0 +1,109 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+import { isString } from "./_isType";
+
+declare type METHODS = "get" | "post" | "put" | "delete";
+declare interface FetchOptions {
+  body?: KeyValue | FormData;
+  headers?: KeyValue;
+  signal?: string | AbortSignal;
+}
+
+const _signals = new Map<string, AbortController>();
+
+/**
+ * Fetch helper
+ * @param method
+ * @param url
+ * @param options.headers
+ * @param options.body
+ * @param options.signal
+ * @internal
+ */
+export const _fetch = async (
+  method: METHODS,
+  url: string,
+  { headers = {}, body, signal }: FetchOptions,
+) => {
+  const options: KeyValue = {
+    method,
+  };
+
+  headers.accept = "application/json";
+  if (method === "post" || method === "put") {
+    options.body = body;
+    /** ***************** set body to json when not FormData *******************/
+    if (!(body instanceof FormData)) {
+      headers["content-type"] = "application/json";
+      options.body = JSON.stringify(body);
+    }
+  }
+
+  /** ***************** reset abort signal *******************/
+  if (signal && isString(signal)) {
+    if (_signals.has(signal)) {
+      const _s = _signals.get(signal);
+      _s?.abort();
+      _signals.delete(signal);
+    }
+    const ac = new AbortController();
+    options.signal = ac.signal;
+    _signals.set(signal, ac);
+  } else if (signal instanceof AbortSignal) {
+    options.signal = signal;
+  }
+
+  return await fetch(url, { ...options, headers })
+    .then(async (resp) => {
+      if (resp.status >= 200 && resp.status < 300) {
+        return await resp.json();
+      }
+      // eslint-disable-next-line @typescript-eslint/no-throw-literal
+      throw { status: resp.status, code: -1, message: resp.statusText };
+    })
+    .then((resp) => {
+      /** ***************** check for possible error code propeties in response *******************/
+      const code = resp.error_code ?? resp.errorCode ?? resp.error;
+      const message = resp.error_message ?? resp.errorMessage ?? resp.message;
+      if (resp.status === "error" || code) {
+        // eslint-disable-next-line @typescript-eslint/no-throw-literal
+        throw { status: 500, code, message };
+      }
+      return resp;
+    });
+};
+
+/** ***************** attach isAborted helper to fetch method *******************/
+_fetch.isAborted = ({ name }: Error) => name === "AbortError";
+
+/** ***************** attach abort helper to fetch method *******************/
+_fetch.abort = (signal: string) => {
+  if (_signals.has(signal)) {
+    const _s = _signals.get(signal);
+    _s?.abort();
+    _signals.delete(signal);
+  }
+};
diff --git a/packages/utilities/src/_fileType.ts b/packages/utilities/src/_fileType.ts
new file mode 100644
index 0000000..89fbd4b
--- /dev/null
+++ b/packages/utilities/src/_fileType.ts
@@ -0,0 +1,993 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+export default {
+  mime(mime: string = "") {
+    const ret = (this.mimeList as KeyValue)[mime.split(";")[0]];
+    if (!ret && !!mime) {
+      const [t, e] = mime.split("/");
+      return `${t} (${e})`;
+    }
+    return ret || "Unknown type";
+  },
+  mimeList: {
+    "application/x-tika-msoffice": "Microsft Office File",
+    "application/x-tika-ooxml": "Open Office File",
+    "3d/vnd.adobe.dn+dcx": "Adobe Dimension",
+    "application-x/geogebra-file": "Ggb",
+    "application/acad": "DWG",
+    "application/acrobat": "PDF Family",
+    "application/applefile": "AppleSingle",
+    "application/atom+xml": "Atom",
+    "application/autocad_dwg": "DWG",
+    "application/binhex": "BinHex",
+    "application/bizagi-modeler": "BizAgi Process Modeler",
+    "application/cbor": "Concise Binary Object Representation",
+    "application/csv": "CSV",
+    "application/dart": "Dart",
+    "application/dbase": "MapInfo Data File (DAT)",
+    "application/dbf": "MapInfo Data File (DAT)",
+    "application/dec-dx.": "DEC Data Exchange File",
+    "application/dicom": "DICOM",
+    "application/dita+xml": "Darwin Information Typing Architecture",
+    "application/dita+xml;format=concept": "DITA Concept Topic",
+    "application/dita+xml;format=map": "DITA Map",
+    "application/dita+xml;format=task": "DITA Task Topic",
+    "application/dita+xml;format=topic": "DITA Topic",
+    "application/dita+xml;format=val": "DITA Conditional Processing Profile",
+    "application/dwf": "DWF",
+    "application/dwg": "DWG",
+    "application/dxf": "DXF",
+    "application/ecmascript": "ActionScript",
+    "application/epub+zip": "EBook",
+    "application/f4m": "F4M",
+    "application/fits": "Flexible Image Transport System",
+    "application/font-tdpfr": "PFR",
+    "application/font-woff": "WOFF",
+    "application/freemind": "Mm",
+    "application/futuresplash": "SWF",
+    "application/gdiff": "GDIFF",
+    "application/geopackage+sqlite3": "GeoPackage",
+    "application/gml+xml": "Geo XML",
+    "application/gzip": "Gzip Archive",
+    "application/gzip-compressed": "Gzip Archive",
+    "application/gzipped": "Gzip Archive",
+    "application/iges": "IGES",
+    "application/illustrator": "Adobe Illustrator",
+    "application/inf": "INF (Windows)",
+    "application/internet-shortcut": "Internet Shortcut",
+    "application/java-applet": "Java Applet",
+    "application/java-archive": "Java Archive",
+    "application/java-serialized-object": "Java Serialized Object",
+    "application/java-vm": "Java Class File",
+    "application/javascript": "JavaScript",
+    "application/jpg": "JFIF",
+    "application/json": "JSON",
+    "application/json-patch+json": "JSON Patch",
+    "application/kate": "Kate",
+    "application/ld+json": "JSON-LD",
+    "application/mac-binhex": "BinHex",
+    "application/mac-binhex40": "BinHex",
+    "application/macbinary": "MacBinary",
+    "application/marc": "MARC",
+    "application/mbox": "Mbox",
+    "application/msexcel": "Microsoft Excel Spreadsheet",
+    "application/msonenote": "Microsoft OneNote",
+    "application/mspowerpoint": "Microsoft Powerpoint Presentation",
+    "application/msword": "Word Document",
+    "application/msword2": "Microsoft Word 2 Document",
+    "application/msword5": "Microsoft Word 5 Document",
+    "application/mxf": "MXF",
+    "application/netcdf": "NetCDF",
+    "application/octet-stream": "Binary File",
+    "application/ogg": "Ogg",
+    "application/oxps": "OpenXPS",
+    "application/package": "Package (Web)",
+    "application/pdf": "PDF",
+    "application/photoshop": "Photoshop Image",
+    "application/pkcs10": "PKCS10",
+    "application/playerpro": "Module Music Formats (Mods)",
+    "application/postscript": "PostScript",
+    "application/qif": "Quicken Interchange Format",
+    "application/rdf+xml": "RDF",
+    "application/rss+xml": "RSS",
+    "application/rtf": "RTF",
+    "application/sereal": "Sereal",
+    "application/sgml": "SGML",
+    "application/sla": "STereo Lithography",
+    "application/sld": "AutoCAD Slide",
+    "application/sldworks": "SolidWorks CAD program",
+    "application/smil": "SMIL Multimedia",
+    "application/smil+xml": "SMIL Multimedia",
+    "application/soundapp": "Module Music Formats (Mods)",
+    "application/ssml+xml": "Speech Synthesis Markup Language",
+    "application/tif": "TIFF",
+    "application/tiff": "TIFF",
+    "application/typescript": "TypeScript",
+    "application/vnd.adobe.adept+xml": "Adobe Content Server Message File",
+    "application/vnd.adobe.flash-movie": "SWF",
+    "application/vnd.adobe.folio+zip": "Folio",
+    "application/vnd.adobe.indesign-idml-package": "IDML",
+    "application/vnd.adobe.pdfxml": "PDF XML",
+    "application/vnd.adobe.x-mars": "PDF XML",
+    "application/vnd.adobe.xdp+xml": "XDP",
+    "application/vnd.adobe.xfdf": "XFDF",
+    "application/vnd.api+json": "JSON API",
+    "application/vnd.apple.pkpass": "PKPass",
+    "application/vnd.android.package-archive": "Android package",
+    "application/vnd.chess-pgn": "PGN",
+    "application/vnd.coffeescript": "CoffeeScript",
+    "application/vnd.comicbook+zip": "Comic Book Archive",
+    "application/vnd.comicbook-rar": "Comic Book Archive",
+    "application/vnd.cups-raster": "CUPS Raster",
+    "application/vnd.debian.binary-package": "Deb",
+    "application/vnd.etsi.asic-e+zip":
+      "Extended Associated Signature Container",
+    "application/vnd.etsi.asic-s+zip": "Simple Associated Signature Container",
+    "application/vnd.fdf": "FDF",
+    "application/vnd.font-fontforge-sfd": "Spline Font Database",
+    "application/vnd.framemaker": "FrameMaker",
+    "application/vnd.geo+json": "GeoJSON",
+    "application/vnd.geogebra.file": "Ggb",
+    "application/vnd.gerber": "Gerber format",
+    "application/vnd.google-earth.kml+xml": "KML",
+    "application/vnd.google-earth.kmz": "KML",
+    "application/vnd.hp-pcl": "PCL",
+    "application/vnd.hp-pclxl": "PCL",
+    "application/vnd.kde.kchart": "KChart File",
+    "application/vnd.kde.kpresenter": "KPresenter File",
+    "application/vnd.kde.kspread": "KSpread File",
+    "application/vnd.kde.kword": "KWord File",
+    "application/vnd.koan": "SSEYO Koan File",
+    "application/vnd.las": "LAS (LASer) File Format",
+    "application/vnd.lotus-1-2-3": "Lotus 1-2-3",
+    "application/vnd.lotus-notes": "Notes Storage Facility",
+    "application/vnd.lotus-wordpro": "Lotus Word Pro",
+    "application/vnd.makemusic.notation": "Finale",
+    "application/vnd.mif": "Maker Interchange Format",
+    "application/vnd.mindjet.mindmanager": "MindManager",
+    "application/vnd.ms-asf": "ASF",
+    "application/vnd.ms-cab-compressed": "Cabinet",
+    "application/vnd.ms-excel": "Excel Spreadsheet",
+    "application/vnd.ms-excel.addin.macroenabled.12": "Microsoft Excel",
+    "application/vnd.ms-excel.sheet.2": "Microsoft Excel 2 Worksheet",
+    "application/vnd.ms-excel.sheet.3": "Microsoft Excel 3 Worksheet",
+    "application/vnd.ms-excel.sheet.4": "Microsoft Excel 4 Worksheet",
+    "application/vnd.ms-excel.sheet.binary.macroenabled.12": "Microsoft Excel",
+    "application/vnd.ms-excel.sheet.macroenabled.12": "Microsoft Excel",
+    "application/vnd.ms-excel.template.macroenabled.12": "Microsoft Excel",
+    "application/vnd.ms-excel.workspace.3": "Microsoft Excel 3 Workspace",
+    "application/vnd.ms-excel.workspace.4": "Microsoft Excel 4 Workspace",
+    "application/vnd.ms-fontobject": "Embedded OpenType",
+    "application/vnd.ms-htmlhelp": "CHM",
+    "application/vnd.ms-officetheme": "Microsoft Office Theme",
+    "application/vnd.ms-outlook": "Personal Folder File",
+    "application/vnd.ms-outlook-pst": "Outlook Personal Folders File Format",
+    "application/vnd.ms-package.3dmanufacturing-3dmodel+xml": "3MF",
+    "application/vnd.ms-powerpoint": "Powerpoint Presentation",
+    "application/vnd.ms-powerpoint.addin.macroenabled.12":
+      "Microsoft PowerPoint",
+    "application/vnd.ms-powerpoint.presentation.macroenabled.12":
+      "Microsoft PowerPoint",
+    "application/vnd.ms-powerpoint.slide.macroenabled.12":
+      "Microsoft PowerPoint",
+    "application/vnd.ms-powerpoint.slideshow.macroenabled.12":
+      "Microsoft PowerPoint",
+    "application/vnd.ms-powerpoint.template.macroenabled.12":
+      "Microsoft PowerPoint",
+    "application/vnd.ms-printing.printticket+xml": "3MF",
+    "application/vnd.ms-tnef": "Transport Neutral Encapsulation Format",
+    "application/vnd.ms-visio": "Microsoft Visio Diagram",
+    "application/vnd.ms-visio.drawing":
+      "Office Open XML Visio Drawing (macro-free)",
+    "application/vnd.ms-visio.drawing.macroenabled.12":
+      "Office Open XML Visio Drawing (macro-enabled)",
+    "application/vnd.ms-visio.stencil":
+      "Office Open XML Visio Stencil (macro-free)",
+    "application/vnd.ms-visio.stencil.macroenabled.12":
+      "Office Open XML Visio Stencil (macro-enabled)",
+    "application/vnd.ms-visio.template":
+      "Office Open XML Visio Template (macro-free)",
+    "application/vnd.ms-visio.template.macroenabled.12":
+      "Office Open XML Visio Template (macro-enabled)",
+    "application/vnd.ms-word": "Word Document",
+    "application/vnd.ms-word.document.macroenabled.12": "Microsoft Word",
+    "application/vnd.ms-word.template.macroenabled.12": "Microsoft Word",
+    "application/vnd.ms-xpsdocument": "OpenXPS",
+    "application/vnd.nitf": "National Imagery Transmission Format",
+    "application/vnd.oasis.opendocument.base": "OD",
+    "application/vnd.oasis.opendocument.chart": "OD Chart",
+    "application/vnd.oasis.opendocument.chart-template": "OD Chart Template",
+    "application/vnd.oasis.opendocument.database": "OD Database",
+    "application/vnd.oasis.opendocument.formula": "OD",
+    "application/vnd.oasis.opendocument.formula-template": "OD Formula",
+    "application/vnd.oasis.opendocument.graphics": "OD Graphics",
+    "application/vnd.oasis.opendocument.graphics-template": "OD Graphics",
+    "application/vnd.oasis.opendocument.image": "OD Image",
+    "application/vnd.oasis.opendocument.image-template": "OD Image template",
+    "application/vnd.oasis.opendocument.presentation": "OD Presentation",
+    "application/vnd.oasis.opendocument.presentation-template":
+      "OD Presentation Template",
+    "application/vnd.oasis.opendocument.spreadsheet": "OD Spreadsheet",
+    "application/vnd.oasis.opendocument.spreadsheet-template": "OD Spreadsheet",
+    "application/vnd.oasis.opendocument.text": "OD Text",
+    "application/vnd.oasis.opendocument.text-master": "OD Text",
+    "application/vnd.oasis.opendocument.text-template": "OD Text Template",
+    "application/vnd.oasis.opendocument.text-web": "OD Text",
+    "application/vnd.openxmlformats-officedocument.presentationml.document":
+      "OOXML Format Family -- ISO/IEC 29500 and ECMA 376",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation":
+      "Powerpoint Presentation",
+    "application/vnd.openxmlformats-officedocument.presentationml.slideshow":
+      "Microsoft PowerPoint",
+    "application/vnd.openxmlformats-officedocument.presentationml.template":
+      "Microsoft PowerPoint",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.document":
+      "OOXML Format Family -- ISO/IEC 29500 and ECMA 376",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+      "Excel Spreadsheet",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.template":
+      "Microsoft Excel",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+      "Word Document",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.template":
+      "Microsoft Word",
+    "application/vnd.pagemaker": "Pagemaker Document (Generic)",
+    "application/vnd.palm": "Palm OS Database",
+    "application/vnd.pdf": "PDF Family",
+    "application/vnd.quark.quarkxpress": "QuarkXPress",
+    "application/vnd.rar": "RAR",
+    "application/vnd.rn-realmedia": "RealMedia",
+    "application/vnd.scribus": "Scribus",
+    "application/vnd.sqlite3": "SQLite",
+    "application/vnd.stardivision.calc": "SDC",
+    "application/vnd.stardivision.chart": "StarOffice binary formats",
+    "application/vnd.stardivision.draw": "StarOffice binary formats",
+    "application/vnd.stardivision.impress": "StarOffice binary formats",
+    "application/vnd.stardivision.impress-packed": "StarOffice binary formats",
+    "application/vnd.stardivision.mail": "StarOffice binary formats",
+    "application/vnd.stardivision.math": "StarOffice binary formats",
+    "application/vnd.stardivision.writer": "SDW",
+    "application/vnd.stardivision.writer-global": "StarOffice binary formats",
+    "application/vnd.sun.xml.calc": "OpenOffice.org XML",
+    "application/vnd.sun.xml.calc.template": "OpenOffice.org XML",
+    "application/vnd.sun.xml.draw": "OpenOffice.org XML",
+    "application/vnd.sun.xml.draw.template": "OpenOffice.org XML",
+    "application/vnd.sun.xml.impress": "SXI",
+    "application/vnd.sun.xml.impress.template": "SXI",
+    "application/vnd.sun.xml.math": "OpenOffice.org XML",
+    "application/vnd.sun.xml.writer": "SXW",
+    "application/vnd.sun.xml.writer.global": "OpenOffice.org XML",
+    "application/vnd.sun.xml.writer.template": "STW",
+    "application/vnd.tcpdump.pcap": "TCPDump pcap packet capture",
+    "application/vnd.truedoc": "PFR",
+    "application/vnd.valve.source.material": "Valve Material Type",
+    "application/vnd.visio": "Visio",
+    "application/vnd.visio2013": "Visio VSDX Drawing File Format",
+    "application/vnd.wap.wmlc": "Compiled WML Document",
+    "application/vnd.wap.wmlscriptc": "Compiled WML Script",
+    "application/vnd.wolfram.cdf": "Computable Document Format",
+    "application/vnd.wolfram.cdf.text": "Computable Document Format",
+    "application/vnd.wordperfect": "WordPerfect",
+    "application/vnd.xara": "Xar (vector graphics)",
+    "application/vnd.xmi+xml": "XML Metadata Interchange",
+    "application/warc": "WARC",
+    "application/warc-fields": "WARC",
+    "application/x--iworks-protected": "Password Protected iWorks File",
+    "application/x--msoffice-embedded;format=comp_obj":
+      "CompObj OLE2 Embedded Document",
+    "application/x--msoffice-embedded;format=ole10_native":
+      "OLE10 Native Embedded Document",
+    "application/x--old-excel": "Pre-OLE2 (Old) Microsoft Excel Worksheets",
+    "application/x--ooxml-protected": "Password Protected OOXML File",
+    "application/x--visio-ooxml": "Visio OOXML File",
+    "application/x-3ds": "3DS",
+    "application/x-3dxmlplugin": "3DXML",
+    "application/x-7z-compressed": "7z Archive",
+    "application/x-acad": "DWG",
+    "application/x-adobe-indesign": "Adobe InDesign document",
+    "application/x-adobe-indesign-interchange":
+      "Adobe InDesign Interchange format",
+    "application/x-apple-diskimage": "Apple Disk Image",
+    "application/x-aspx": "ASP.NET",
+    "application/x-astrotite-afa": "Astrotite",
+    "application/x-autocad": "DWG",
+    "application/x-axcrypt": "AxCrypt",
+    "application/x-b6z-compressed": "B6Z",
+    "application/x-berkeley-db": "Berkeley DB",
+    "application/x-berkeley-db;format=btree": "Berkeley DB BTree Database",
+    "application/x-berkeley-db;format=hash": "Berkeley DB Hash Database",
+    "application/x-berkeley-db;format=log": "Berkeley DB Log Database",
+    "application/x-berkeley-db;format=queue": "Berkeley DB Queue Database",
+    "application/x-bittorrent": "Torrent file",
+    "application/x-bplist": "Backup list",
+    "application/x-bzip2": "Bzip2",
+    "application/x-cbr": "Comic Book Archive",
+    "application/x-cdf": "CD Audio",
+    "application/x-cdlink": "Virtual CD-ROM CD Image File",
+    "application/x-cfs-compressed": "Compact File Set",
+    "application/x-chess-pgn": "PGN",
+    "application/x-chrome-package": "Chrome Extension Package",
+    "application/x-compress": "Compress (Unix)",
+    "application/x-compressed": "Tape Archive",
+    "application/x-cpio": "Cpio",
+    "application/x-csv": "CSV",
+    "application/x-dbase": "dBASE Table (DBF)",
+    "application/x-dbf": "dBASE Table (DBF)",
+    "application/x-dbm": "Berkeley DB",
+    "application/x-debian-package": "Debian package",
+    "application/x-deflate": "ZLIB Archive",
+    "application/x-dex": "Dalvik Executable Format",
+    "application/x-dgc-compressed": "DGCA",
+    "application/x-director": "Shockwave (Director)",
+    "application/x-dosexec": "DOS/Windows executable (EXE)",
+    "application/x-dvi": "DVI (Device Independent File Format)",
+    "application/x-dwg": "DWG",
+    "application/x-elc": "Emacs Lisp bytecode",
+    "application/x-emf": "Extended Metafile",
+    "application/x-endnote-connect": "EndNote Connection File",
+    "application/x-endnote-connection": "EndNote Connection File",
+    "application/x-endnote-refer": "EndNote Import File",
+    "application/x-endnote-style": "EndNote Style File",
+    "application/x-erb": "HTML+ERB",
+    "application/x-fictionbook+xml": "FictionBook document",
+    "application/x-filemaker": "FileMaker Pro 7",
+    "application/x-font-adobe-metric": "Adobe Font Metric",
+    "application/x-font-otf": "OpenType Font",
+    "application/x-font-printer-metric": "Printer Font Metric",
+    "application/x-font-ttf": "TrueType Font",
+    "application/x-foxmail": "Foxmail Email File",
+    "application/x-frame": "FrameMaker Interchange Format",
+    "application/x-freemind": "Mm",
+    "application/x-futuresplash": "Macromedia FutureSplash File",
+    "application/x-gca-compressed": "GCA",
+    "application/x-glulx": "Glulx",
+    "application/x-gnumeric": "Gnumeric",
+    "application/x-grib":
+      "General Regularly-distributed Information in Binary form",
+    "application/x-gtar": "GNU Archive",
+    "application/x-gunzip": "Gzip Compressed Archive",
+    "application/x-gzip": "Gzip",
+    "application/x-gzip-compressed": "Gzip Compressed Archive",
+    "application/x-hdf": "HDF",
+    "application/x-httpd-jsp": "Java Server Page",
+    "application/x-httpd-php": "HTML+PHP",
+    "application/x-hwp": "Hangul Word Processor File",
+    "application/x-hwp-v5": "Hangul Word Processor File v5",
+    "application/x-ibooks+zip": "Apple iBooks",
+    "application/x-isatab": "ISA-Tab Study file",
+    "application/x-isatab-assay": "ISA-Tab Assay file",
+    "application/x-isatab-investigation": "ISA-Tab Investigation file",
+    "application/x-iso9660-image": "ISO image",
+    "application/x-itunes-ipa": "Apple iOS IPA AppStore file",
+    "application/x-java": "Java Class File",
+    "application/x-java-jnilib": "Java Native Library for OSX",
+    "application/x-java-jnlp-file": "Java Network Launching Protocol",
+    "application/x-java-vm": "Java Class File",
+    "application/x-javascript": "JavaScript Source Code",
+    "application/x-jpg": "JFIF",
+    "application/x-jsp": "Groovy Server Pages",
+    "application/x-kchart": "KChart File",
+    "application/x-killustrator": "KIllustrator File",
+    "application/x-koan": "SSEYO Koan File",
+    "application/x-kpresenter": "KPresenter File",
+    "application/x-krita": "Krita",
+    "application/x-kspread": "KSpread File",
+    "application/x-kword": "KWord File",
+    "application/x-latex": "LaTeX Source Document",
+    "application/x-lotus-notes": "Notes Storage Facility",
+    "application/x-lzh-compressed": "LHA",
+    "application/x-lzip": "Lzip",
+    "application/x-lzma": "LZMA Alone",
+    "application/x-macbinary": "MacBinary",
+    "application/x-maff": "MAFF",
+    "application/x-matlab-data": "MAT",
+    "application/x-matroska": "Matroska Media",
+    "application/x-midi": "MIDI",
+    "application/x-mif": "FrameMaker Interchange Format",
+    "application/x-mplayer2": "ASF (Advanced Systems Format)",
+    "application/x-msaccess": "Microsoft Access",
+    "application/x-msdownload": "Microsoft Download",
+    "application/x-ms-installer": "Microsoft Windows Installer",
+    "application/x-ms-wim": "Windows Imaging Format",
+    "application/x-msi": "Microsoft Windows Installer",
+    "application/x-msmetafile": "Windows Metafile",
+    "application/x-mso": "ActiveMime",
+    "application/x-mysql-misam-compressed-index":
+      "MySQL MISAM Compressed Index",
+    "application/x-mysql-misam-data": "MySQL MISAM Data",
+    "application/x-mysql-misam-index": "MySQL MISAM Index",
+    "application/x-mysql-table-definition": "MySQL Table Definition (Format)",
+    "application/x-navi-animation": "Windows Animated Cursor",
+    "application/x-pdf": "Portable Document Format",
+    "application/x-pn-mpg": "MPEG-2 Video Encoding (H.262)",
+    "application/x-powershell": "PowerShell",
+    "application/x-rar": "RAR archive",
+    "application/x-rar-compressed": "RAR",
+    "application/x-riff": "MIDI Instrument Definition File",
+    "application/x-roxio-toast": "TOAST",
+    "application/x-rpm": "RedHat Package Manager",
+    "application/x-sas": "SAS Program",
+    "application/x-sas-access": "SAS Access Descriptor",
+    "application/x-sas-audit": "SAS Audit",
+    "application/x-sas-backup": "SAS Backup",
+    "application/x-sas-catalog": "SAS Catalog",
+    "application/x-sas-data": "SAS Data Set",
+    "application/x-sas-data-index": "SAS Data Set Index",
+    "application/x-sas-dmdb": "SAS DMDB Data Mining Database File",
+    "application/x-sas-fdb": "SAS FDB Consolidation Database File",
+    "application/x-sas-itemstor": "SAS Item Store (ItemStor) File",
+    "application/x-sas-mddb": "SAS MDDB Multi-Dimensional Database File",
+    "application/x-sas-program-data": "SAS Stored Program (DATA Step)",
+    "application/x-sas-putility": "SAS Permanent Utility",
+    "application/x-sas-transport": "SAS Transport File",
+    "application/x-sas-utility": "SAS Utility",
+    "application/x-sas-view": "SAS Data Set View",
+    "application/x-sas-xport": "SAS Transport (XPORT) Family",
+    "application/x-setupscript": "Windows setup INFormation",
+    "application/x-sh": "UNIX/LINUX Shell Script",
+    "application/x-shockwave-flash": "SWF",
+    "application/x-shockwave-flash2-preview": "Macromedia Flash",
+    "application/x-silverlight-app": "Silverlight",
+    "application/x-sit": "StuffIt",
+    "application/x-sitx": "StuffIt X",
+    "application/x-sld": "AutoCAD Slide",
+    "application/x-snappy-framed": "Snappy",
+    "application/x-speex": "Speex Audio",
+    "application/x-spss-por": "SPSS Portable File",
+    "application/x-spss-sav": "SAV",
+    "application/x-sqlite3": "SQLite",
+    "application/x-starcalc": "SDC",
+    "application/x-stardraw": "SDA (StarOffice)",
+    "application/x-starwriter": "SDW",
+    "application/x-stuffit": "StuffIt",
+    "application/x-stuffitx": "StuffIt X",
+    "application/x-t3vm-image": "TADS 3",
+    "application/x-tads": "TADS",
+    "application/x-tar": "Tape Archive",
+    "application/x-tcl": "Tcl script",
+    "application/x-tex": "TeX",
+    "application/x-tif": "TIFF",
+    "application/x-tiff": "TIFF",
+    "application/x-troff":
+      "Roff/nroff/troff/groff Unformatted Manual Page (UNIX)",
+    "application/x-troff-man":
+      "Roff/nroff/troff/groff Unformatted Manual Page (UNIX)",
+    "application/x-troff-me":
+      "Roff/nroff/troff/groff Unformatted Manual Page (UNIX)",
+    "application/x-troff-ms":
+      "Roff/nroff/troff/groff Unformatted Manual Page (UNIX)",
+    "application/x-troff-msvideo": "AVI (Audio Video Interleaved) File Format",
+    "application/x-url": "Internet Shortcut",
+    "application/x-vhd": "Virtual PC Virtual Hard Disk",
+    "application/x-vmdk": "Virtual Disk Format",
+    "application/x-vnd.corel.designer.document+zip": "Corel Designer",
+    "application/x-vnd.corel.zcf.designer.document+zip": "Corel Designer",
+    "application/x-vnd.oasis.opendocument.chart": "OD Chart",
+    "application/x-vnd.oasis.opendocument.chart-template": "OD Chart Template",
+    "application/x-vnd.oasis.opendocument.formula": "OD Formula document",
+    "application/x-vnd.oasis.opendocument.formula-template":
+      "OD Formula Template",
+    "application/x-vnd.oasis.opendocument.graphics": "OD Graphics (Drawing)",
+    "application/x-vnd.oasis.opendocument.graphics-template":
+      "OD Graphics Template",
+    "application/x-vnd.oasis.opendocument.image": "OD Image",
+    "application/x-vnd.oasis.opendocument.image-template": "OD Image Template",
+    "application/x-vnd.oasis.opendocument.presentation": "OD Presentation",
+    "application/x-vnd.oasis.opendocument.presentation-template":
+      "OD Presentation Template",
+    "application/x-vnd.oasis.opendocument.spreadsheet": "OD Spreadsheet",
+    "application/x-vnd.oasis.opendocument.spreadsheet-template":
+      "OD Spreadsheet Template",
+    "application/x-vnd.oasis.opendocument.text": "OD Text",
+    "application/x-vnd.oasis.opendocument.text-master": "OD Global Text",
+    "application/x-vnd.oasis.opendocument.text-template": "OD Text Template",
+    "application/x-vnd.oasis.opendocument.text-web": "OD Text Template",
+    "application/x-vnd.sun.xml.writer": "OpenOffice v1.0: Writer Document",
+    "application/x-votable+xml": "VOTable",
+    "application/x-web-app-manifest+json": "Open Web App Manifest",
+    "application/x-windows-installer": "Microsoft Windows Installer",
+    "application/x-wine-extension-inf": "Windows setup INFormation",
+    "application/x-www-form-urlencoded": "Form URL encoding",
+    "application/x-x509-ca-cert": "DER encoded certificate",
+    "application/x-x509-user-cert": "DER encoded certificate",
+    "application/x-xmind": "XMind Pro",
+    "application/x-xml": "Extensible Markup Language",
+    "application/x-xpinstall": "Cross-Platform Installer Module",
+    "application/x-xz": "XZ",
+    "application/x-zip-compressed": "Zip Archive",
+    "application/x-zoo": "Zoo",
+    "application/xhtml+xml": "HTML",
+    "application/xml": "XML",
+    "application/xml-dtd": "DTD",
+    "application/xquery": "XQuery source code",
+    "application/xslfo+xml": "XSL Format",
+    "application/xslt+xml": "XSL Transformations",
+    "application/xspf+xml": "XML Shareable Playlist Format",
+    "application/zip": "Zip Archive",
+    "application/zlib": "ZLIB Compressed Data Format",
+    "application/zstd": "Zstandard",
+    "audio/3gpp": "3GP Audio",
+    "audio/3gpp2": "3G2 Audio",
+    "audio/8svx": "8-Bit Sampled Voice Audio",
+    "audio/aiff": "AIFF Audio",
+    "audio/amr": "Adaptive Multi-Rate Audio",
+    "audio/application/x-pn-realmedia": "RealMedia Audio",
+    "audio/asf": "ASF Audio",
+    "audio/aud": "WeChat Audio",
+    "audio/audible": "Audible.Com Audio",
+    "audio/avi": "AVI Audio",
+    "audio/basic": "AU Audio",
+    "audio/flac": "FLAC Audio",
+    "audio/it": "Module Music Formats (Mods) Audio",
+    "audio/m": "MIDI Audio",
+    "audio/med": "Module Music Formats (Mods) Audio",
+    "audio/mid": "MIDI Audio",
+    "audio/midi": "MIDI Audio",
+    "audio/mod": "Module Music Formats (Mods) Audio",
+    "audio/module-xm": "Module Music Formats (Mods) Audio",
+    "audio/mp3": "MP3 Audio",
+    "audio/mp4": "MP4 Audio",
+    "audio/mp4a-latm": "MP4 Audio",
+    "audio/mpa": "MPEG Audio Layer I Audio",
+    "audio/mpeg": "MP3 Audio",
+    "audio/mpeg3": "MP3 Audio",
+    "audio/mpg": "MP3 Audio",
+    "audio/ogg": "Ogg Multimedia File Audio",
+    "audio/ogg; codecs=speex": "Speex Audio Codec Audio",
+    "audio/opus": "Opus Audio",
+    "audio/prs.sid": "SID Audio",
+    "audio/rmf": "AIFF Audio",
+    "audio/s3m": "Module Music Formats (Mods) Audio",
+    "audio/speex": "Speex Audio",
+    "audio/vnd.qcelp": "AIFF Audio",
+    "audio/vnd.rn-realaudio": "RealAudio",
+    "audio/vnd.wave": "WAV Audio",
+    "audio/vorbis": "Vorbis Audio",
+    "audio/wav": "WAV Audio",
+    "audio/wave": "WAV Audio",
+    "audio/webm": "WebM Audio",
+    "audio/x-8svx": "8-Bit Sampled Voice Audio",
+    "audio/x-aiff": "AIFF Audio",
+    "audio/x-amr-wb": "Adaptive Multi-Rate WideBand Audio",
+    "audio/x-flac": "FLAC Audio",
+    "audio/x-gsm": "AIFF Audio",
+    "audio/x-matroska": "Matroska Audio",
+    "audio/x-midi": "MIDI Audio",
+    "audio/x-mod": "EPSGMOD Audio",
+    "audio/x-mp3": "MP3 Audio",
+    "audio/x-mpeg": "MPEG-1 Audio Layer 3 Audio",
+    "audio/x-mpeg3": "MP3 Audio",
+    "audio/x-mpegaudio": "MP3 Audio",
+    "audio/x-mpegurl": "MP3 Playlist File Audio",
+    "audio/x-mpg": "MP3 Audio",
+    "audio/x-ms-wax": "Windows Media Metafile Audio",
+    "audio/x-ogg": "Ogg Audio",
+    "audio/x-ogg-flac": "Free Lossless Audio",
+    "audio/x-ogg-pcm": "Unompressed Audio",
+    "audio/x-oggflac": "Free Lossless Audio",
+    "audio/x-oggpcm": "Unompressed Audio",
+    "audio/x-pn-aiff": "AIFF Audio",
+    "audio/x-pn-audibleaudio": "Audible.Com Audio",
+    "audio/x-pn-realaudio": "RealAudio",
+    "audio/x-pn-realaudio-plugin": "RAM (RealAudio) Audio",
+    "audio/x-pn-wav": "WAV Audio",
+    "audio/x-realaudio": "Real Audio",
+    "audio/x-rmf": "AIFF Audio",
+    "audio/x-s3m": "Module Music Formats (Mods) Audio",
+    "audio/x-speex": "Speex Audio Codec Audio",
+    "audio/x-voc": "Creative Voice File Audio",
+    "audio/x-wav": "WAV Audio",
+    "audio/x-xm": "Module Music Formats (Mods) Audio",
+    "audio/xm": "Extended Module Audio File Audio",
+    "chemical/x-cif": "CIF",
+    "chemical/x-cml": "CML",
+    "chemical/x-mdl-molfile": "MOL",
+    "chemical/x-pdb": "Brookhaven Protein Databank File",
+    "drawing/dwg": "DWG",
+    "gzip/document": "Gzip Compressed Archive",
+    "image/ascii-art": "ASCII Art",
+    "image/avi": "AVI (Audio Video Interleaved) File Format",
+    "image/avif": "AVIF",
+    "image/avif-sequence": "AVIF",
+    "image/bmp": "BMP",
+    "image/cgm": "CGM",
+    "image/cis-cod": "Lightning Strike",
+    "image/dicom-rle": "DICOM",
+    "image/emf": "Enhanced Metafile",
+    "image/fits": "Flexible Image Transport System",
+    "image/flif": "Free Lossless Image Format (FLIF)",
+    "image/g3fax": "CCITT Group 3",
+    "image/gif": "GIF",
+    "image/heic": "HEIC",
+    "image/heic-sequence": "High Efficiency Image File Format",
+    "image/heif": "HEIF",
+    "image/image/x-ptx": "Pentax PEF",
+    "image/ivg": "IconVG",
+    "image/jls": "JPEG-LS",
+    "image/jp2": "JP2",
+    "image/jpeg": "JPEG",
+    "image/jpeg2000": "JPEG 2000 Part 1 (Core) jp2 File Format",
+    "image/jpeg2000-image": "JPEG 2000 Part 1 (Core) jp2 File Format",
+    "image/jpg": "JFIF",
+    "image/jpm": "JPM",
+    "image/jpx": "JPX",
+    "image/jxl": "JPEG XL",
+    "image/jxr": "JPEG Extended Range",
+    "image/ktx": "KTX",
+    "image/mov": "QuickTime File Format",
+    "image/naplps": "NAPLPS",
+    "image/nia": "Naïve Image Formats",
+    "image/nie": "Naïve Image Formats",
+    "image/nii": "Naïve Image Formats",
+    "image/openraster": "OpenRaster",
+    "image/pict": "PICT",
+    "image/png": "PNG",
+    "image/png+json": "Piskel canvas",
+    "image/pwg-raster": "PWG Raster",
+    "image/svg+xml": "Scalable Vector Graphics",
+    "image/svg-xml": "Scalable Vector Graphics",
+    "image/tif": "TIFF",
+    "image/tiff": "TIFF",
+    "image/tiff-fx": "TIFF-FX",
+    "image/vnd-wap-wbmp": "Wireless Bitmap",
+    "image/vnd.adobe.photoshop": "PSD",
+    "image/vnd.djvu": "DjVu",
+    "image/vnd.dwg": "DWG",
+    "image/vnd.dxb": "AutoCAD DXF simplified Binary",
+    "image/vnd.dxf": "DXF",
+    "image/vnd.dxf;format=ascii": "AutoCAD DXF in ASCII Text form",
+    "image/vnd.dxf;format=binary": "AutoCAD DXF in Binary form",
+    "image/vnd.fpx": "FlashPix",
+    "image/vnd.fujixerox.edmics-mmr": "Xerox EDMICS-MMR",
+    "image/vnd.fujixerox.edmics-rlc": "Xerox EDMICS-RLC",
+    "image/vnd.microsoft.icon": "ICO",
+    "image/vnd.mix": "MIX (Picture It!)",
+    "image/vnd.mozilla.apng": "APNG",
+    "image/vnd.ms-modi": "MDI",
+    "image/vnd.ms-photo": "JPEG XR",
+    "image/vnd.radiance": "Radiance HDR",
+    "image/vnd.rn-realflash": "Macromedia Flash SWF File Format",
+    "image/vnd.svf": "Simple Vector Format",
+    "image/vnd.tencent.tap": "TAP (Tencent)",
+    "image/vnd.valve.source.texture": "Valve Texture Format",
+    "image/vnd.wap.wbmp": "WBMP",
+    "image/vnd.xiff": "XIFF",
+    "image/vnd.zbrush.pcx": "PCX",
+    "image/vpb": "Quantel VPB image",
+    "image/webp": "Web Photo",
+    "image/wmf": "Windows Metafile",
+    "image/x-3ds": "3DS",
+    "image/x-bmp": "Bitmap Image File (BMP)",
+    "image/x-bpg": "Better Portable Graphics",
+    "image/x-canon-cr3": "Canon RAW 3",
+    "image/x-canon-crw": "Camera Image File Format",
+    "image/x-dcx": "Multipage Zsoft Paintbrush Bitmap Graphics",
+    "image/x-djvu": "DjVu File Format",
+    "image/x-dpx": "Digital Moving-Picture Exchange (DPX)",
+    "image/x-dwg": "DWG",
+    "image/x-freehand": "FreeHand image",
+    "image/x-hasselblad-3fr": "Hasselblad 3FR",
+    "image/x-icon": "ICO",
+    "image/x-jng": "JPEG Network Graphics",
+    "image/x-jp2-codestream": "JPEG 2000 Codestream",
+    "image/x-jp2-container": "JPEG 2000 Container Format",
+    "image/x-jpeg2000-image": "JPEG 2000 Part 1 (Core) jp2 File Format",
+    "image/x-mrsid": "MrSID",
+    "image/x-mrsid-image": "MrSID Image Format",
+    "image/x-ms-bmp": "Windows bitmap",
+    "image/x-niff": "Navy Interchange File Format",
+    "image/x-pcx": "PCX",
+    "image/x-pentax-pef": "Pentax PEF",
+    "image/x-pict": "PICT",
+    "image/x-portable-anymap": "Netpbm formats",
+    "image/x-portable-arbitrarymap": "Portable Arbitrary Map",
+    "image/x-portable-bitmap": "Netpbm formats",
+    "image/x-portable-graymap": "Netpbm formats",
+    "image/x-portable-pixmap": "Netpbm formats",
+    "image/x-psd": "Photoshop Image",
+    "image/x-quicktime": "QuickTime File Format",
+    "image/x-raw-adobe": "Adobe Digital Negative",
+    "image/x-raw-canon": "Canon raw image",
+    "image/x-raw-casio": "Casio raw image",
+    "image/x-raw-epson": "Epson raw image",
+    "image/x-raw-fuji": "Fuji raw image",
+    "image/x-raw-hasselblad": "Hasselblad raw image",
+    "image/x-raw-imacon": "Imacon raw image",
+    "image/x-raw-kodak": "Kodak raw image",
+    "image/x-raw-leaf": "Leaf raw image",
+    "image/x-raw-logitech": "Logitech raw image",
+    "image/x-raw-mamiya": "Mamiya raw image",
+    "image/x-raw-minolta": "Minolta raw image",
+    "image/x-raw-nikon": "Nikon raw image",
+    "image/x-raw-olympus": "Olympus raw image",
+    "image/x-raw-panasonic": "Panasonic raw image",
+    "image/x-raw-pentax": "Pentax raw image",
+    "image/x-raw-phaseone": "Phase One raw image",
+    "image/x-raw-rawzor": "Rawzor raw image",
+    "image/x-raw-red": "Red raw image",
+    "image/x-raw-sigma": "Sigma raw image",
+    "image/x-raw-sony": "Sony raw image",
+    "image/x-rgb": "Silicon Graphics RGB Bitmap",
+    "image/x-sgi-bw": "Silicon Graphics Image",
+    "image/x-sld": "AutoCAD Slide",
+    "image/x-sun-raster": "Sun Raster Image",
+    "image/x-tif": "TIFF",
+    "image/x-tiff": "TIFF",
+    "image/x-win-bitmap": "Microsoft Windows Cursor",
+    "image/x-wmf": "Windows Metafile",
+    "image/x-xbitmap": "XBM",
+    "image/x-xcf": "GIMP Image File",
+    "image/x-xwindowdump": "X Windows Dump",
+    "image/xcf": "GIMP Image File",
+    "interface/x-winamp-skin": "Winamp Skin",
+    "message/rfc822": "Internet e-mail message format",
+    "model/gltf+json": "glTF (GL Transmission Format) 2.0",
+    "model/gltf-binary": "glTF (GL Transmission Format) 2.0",
+    "model/iges": "IGES",
+    "model/mtl": "Wavefront Material Template Library (MTL) File Format",
+    "model/obj": "Wavefront OBJ File Format",
+    "model/prc": "Product Representation Compact (PRC) File Format",
+    "model/stl": "STL (STereoLithography) File Format",
+    "model/u3d": "Universal 3D (U3D) format family. ECMA-363",
+    "model/vnd-dwf": "DWF",
+    "model/vnd.adobe.dn+dcxucf": "Adobe Dimension",
+    "model/vnd.collada+xml": "COLLADA",
+    "model/vnd.dwfx+xps": "AutoCAD Design Web Format",
+    "model/vnd.usdz+zip": "USDZ",
+    "model/vnd.valve.source.compiled-map": "BSP",
+    "model/vrml": "VRML",
+    "model/x3d+binary": "X3D",
+    "model/x3d+fastinfoset": "Extensible 3D",
+    "model/x3d+vrml": "X3D",
+    "model/x3d+xml": "X3D",
+    "model/x3d-vrml": "Extensible 3D",
+    "multipart/appledouble": "AppleDouble",
+    "multipart/x-tar": "Tape Archive",
+    "sound/aiff": "AIFF",
+    "text/apl": "APL",
+    "text/asp": "Active Server Page",
+    "text/aspdotnet": "ASP .NET",
+    "text/calendar": "ICalendar",
+    "text/comma-separated-values": "CSV",
+    "text/css": "Cascading Style Sheets",
+    "text/csv": "CSV",
+    "text/csv-schema": "CSV Schema",
+    "text/dns": "Zone file",
+    "text/ecmascript": "ECMA Script",
+    "text/gemini": "Gemini",
+    "text/html": "HTML",
+    "text/javascript": "JavaScript",
+    "text/json": "JSON (JavaScript Object Notation)",
+    "text/jsx": "TSX",
+    "text/markdown": "Markdown",
+    "text/mirc": "IRC log",
+    "text/n3": "Notation3",
+    "text/pdf": "PDF Family",
+    "text/plain": "Plain text",
+    "text/properties": "Java Properties",
+    "text/rtf": "RTF",
+    "text/sgml": "SGML",
+    "text/tab-separated-values": "Tab delimited",
+    "text/troff": "Roff/nroff/troff/groff Unformatted Manual Page (UNIX)",
+    "text/turtle": "Turtle",
+    "text/url": "Internet Shortcut",
+    "text/vbscript": "VBScript",
+    "text/vcard": "VCard",
+    "text/vnd.ascii-art": "ASCII Art",
+    "text/vnd.iptc.anpa":
+      "American Newspaper Publishers Association Wire Feeds",
+    "text/vnd.iptc.nitf": "News Industry Text Format",
+    "text/vnd.wap.wmlscript": "WML Script",
+    "text/vtt": "WebVTT",
+    "text/x-actionscript": "ActionScript source code",
+    "text/x-ada": "Ada source code",
+    "text/x-applescript": "AppleScript source code",
+    "text/x-ascii-art": "ASCII Art",
+    "text/x-asciidoc": "Asciidoc source code",
+    "text/x-asm": "Assembler source code",
+    "text/x-aspectj": "AspectJ source code",
+    "text/x-assembly": "Assembler source code",
+    "text/x-awk": "AWK script",
+    "text/x-basic": "Basic source code",
+    "text/x-brainfuck": "Brainfuck",
+    "text/x-c": "C source code",
+    "text/x-c++": "C++ source code",
+    "text/x-c++hdr": "C++ source code header",
+    "text/x-c++src": "C++ source code",
+    "text/x-cgi": "CGI script",
+    "text/x-chdr": "C source code header",
+    "text/x-clojure": "Clojure source code",
+    "text/x-cmake": "Makefile",
+    "text/x-cobol": "COBOL source code",
+    "text/x-coffeescript": "CoffeeScript source code",
+    "text/x-coldfusion": "ColdFusion source code",
+    "text/x-comma-separated-values": "CSV",
+    "text/x-common-lisp": "Common Lisp source code",
+    "text/x-cross-domain-policy": "Adobe Cross Domain Policy File",
+    "text/x-crystal": "Crystal",
+    "text/x-csharp": "C# source code",
+    "text/x-csrc": "C source code",
+    "text/x-csv": "CSV",
+    "text/x-cython": "Cython",
+    "text/x-d": "D source code",
+    "text/x-diff": "Diff file",
+    "text/x-django": "Jinja",
+    "text/x-dockerfile": "Dockerfile",
+    "text/x-dtd": "XML Document Type Definition",
+    "text/x-dylan": "Dylan",
+    "text/x-ebnf": "Lark",
+    "text/x-ecl": "ECL",
+    "text/x-eiffel": "Eiffel source code",
+    "text/x-elm": "Elm",
+    "text/x-emacs-lisp": "Emacs Lisp source code",
+    "text/x-erlang": "Erlang source code",
+    "text/x-expect": "Expect Script",
+    "text/x-factor": "Factor",
+    "text/x-forth": "Forth source code",
+    "text/x-fortran": "Fortran source code",
+    "text/x-fsharp": "F#",
+    "text/x-gfm": "Markdown",
+    "text/x-go": "Go source code",
+    "text/x-groovy": "Groovy source code",
+    "text/x-haml": "HAML source code",
+    "text/x-haskell": "Haskell source code",
+    "text/x-haxe": "Haxe source code",
+    "text/x-idl": "Inteface Definition Language",
+    "text/x-ini": "Configuration file",
+    "text/x-java": "Java source code",
+    "text/x-java-properties": "Java Properties",
+    "text/x-java-source": "Java source code",
+    "text/x-jsp": "Java Server Page",
+    "text/x-julia": "Julia",
+    "text/x-kotlin": "Kotlin",
+    "text/x-less": "LESS source code",
+    "text/x-lex": "Lex/Flex source code",
+    "text/x-literate-haskell": "Literate Haskell",
+    "text/x-livescript": "LiveScript",
+    "text/x-log": "Log file",
+    "text/x-lua": "Lua source code",
+    "text/x-markdown": "Markdown",
+    "text/x-mathematica": "Mathematica",
+    "text/x-matlab": "Matlab source code",
+    "text/x-ml": "ML source code",
+    "text/x-modula": "Modula source code",
+    "text/x-mumps": "M",
+    "text/x-nfo": "NFO",
+    "text/x-nginx-conf": "Nginx",
+    "text/x-nh": "Newick tree Format",
+    "text/x-nsis": "NSIS",
+    "text/x-objcsrc": "Objective-C",
+    "text/x-objectivec": "Objective-C++",
+    "text/x-ocaml": "Ocaml source code",
+    "text/x-octave": "MATLAB",
+    "text/x-oz": "Oz",
+    "text/x-pascal": "Pascal source code",
+    "text/x-pdf": "PDF Family",
+    "text/x-perl": "Perl script",
+    "text/x-php": "PHP script",
+    "text/x-plsql": "PLSQL",
+    "text/x-prolog": "Prolog source code",
+    "text/x-properties": "Java Properties",
+    "text/x-protobuf": "Protocol Buffer",
+    "text/x-pug": "Pug",
+    "text/x-puppet": "Puppet",
+    "text/x-python": "Python script",
+    "text/x-rexx": "Rexx source code",
+    "text/x-rpm-spec": "RPM Spec",
+    "text/x-rsrc": "R",
+    "text/x-rst": "reStructuredText source code",
+    "text/x-ruby": "Ruby source code",
+    "text/x-rustsrc": "ReScript",
+    "text/x-sas": "SAS",
+    "text/x-sass": "Sass",
+    "text/x-scala": "Scala source code",
+    "text/x-scheme": "Scheme source code",
+    "text/x-scss": "SCSS",
+    "text/x-sed": "Sed code",
+    "text/x-server-parsed-html": "Server Side Includes",
+    "text/x-server-parsed-html3": "Server Side Includes",
+    "text/x-sh": "Shell",
+    "text/x-slim": "Slim",
+    "text/x-smarty": "Smarty",
+    "text/x-soy": "Closure Templates",
+    "text/x-spreadsheet": "LTspice Symbol",
+    "text/x-sql": "SQL code",
+    "text/x-stex": "BibTeX",
+    "text/x-stsrc": "Smalltalk source code",
+    "text/x-swift": "Swift",
+    "text/x-systemverilog": "SystemVerilog",
+    "text/x-tcl": "Tcl script",
+    "text/x-tex": "TeX Source",
+    "text/x-toml": "TOML",
+    "text/x-ttcn-asn": "ASN.1",
+    "text/x-twig": "Twig",
+    "text/x-url": "Internet Shortcut",
+    "text/x-vb": "Visual Basic .NET",
+    "text/x-vbasic": "Visual basic source code",
+    "text/x-vbdotnet": "VB.NET source code",
+    "text/x-vbscript": "VBScript source code",
+    "text/x-verilog": "Verilog source code",
+    "text/x-vhdl": "VHDL source code",
+    "text/x-web-markdown": "Markdown source code",
+    "text/x-webidl": "WebIDL",
+    "text/x-yacc": "Yacc/Bison source code",
+    "text/x-yaml": "YAML source code",
+    "text/xml": "XML",
+    "text/xsl": "XSL Format",
+    "video/3gpp": "3GP Video",
+    "video/3gpp2": "3G2 Video",
+    "video/avi": "AVI Video",
+    "video/daala": "Ogg Daala Video",
+    "video/jpm": "JPEG 2000 Part 6 (JPM) Video",
+    "video/mj2": "MJ2 Video",
+    "video/mp1s": "MPEG-2 Video",
+    "video/mp2p": "MPEG-2 Video",
+    "video/mp4": "MP4 Video",
+    "video/mpeg": "MPEG-1 Video",
+    "video/mpeg2": "MPEG-2 Video",
+    "video/mpg": "MPEG-2 Video",
+    "video/msvideo": "AVI Video",
+    "video/ogg": "Ogg Video",
+    "video/quicktime": "QuickTime Video",
+    "video/theora": "Ogg Theora Video",
+    "video/vnd-vivo": "VivoActive Video",
+    "video/vnd.avi": "AVI Video",
+    "video/vnd.radgamettools.bink": "Bink Video",
+    "video/vnd.radgamettools.smacker": "Smacker Video",
+    "video/vnd.rn-realvideo": "Real Video",
+    "video/webm": "Web Movie",
+    "video/x-daala": "Ogg Daala Video",
+    "video/x-dirac": "Dirac Video",
+    "video/x-dv": "DV-DIF Video",
+    "video/x-flv": "FLV Video",
+    "video/x-matroska": "Matroska Video",
+    "video/x-matroska-3d": "Matroska Video",
+    "video/x-mng": "MNG Video",
+    "video/x-mpeg": "MPEG-2 Video",
+    "video/x-mpeg2a": "MPEG-2 Video",
+    "video/x-mpg": "MPEG-2 Video",
+    "video/x-ms-asf": "ASF Video",
+    "video/x-ms-asf-plugin": "ASF Video",
+    "video/x-ms-asx": "Windows Media Metafile Video",
+    "video/x-ms-wm": "ASF Video",
+    "video/x-ms-wma": "WMA Video",
+    "video/x-ms-wmv": "WMV Video",
+    "video/x-msvideo": "AVI Video",
+    "video/x-ogg-rgb": "Raw RGB Video",
+    "video/x-ogg-uvs": "Raw UVS Video",
+    "video/x-ogg-yuv": "Raw YUV Video",
+    "video/x-oggrgb": "Raw RGB Video",
+    "video/x-ogguvs": "Raw UVS Video",
+    "video/x-oggyuv": "Raw YUV Video",
+    "video/x-ogm": "OGM Video",
+    "video/x-quicktime": "QuickTime Video",
+    "video/x-sgi-movie": "SGI movie Video",
+    "video/x-theora": "Ogg Theora Video",
+    "wwwserver/redirection": "Internet Shortcut",
+    "x-conference/x-cooltalk": "Cooltalk Audio",
+    "x-world/x-3dmf": "3DMF",
+  },
+};
diff --git a/packages/utilities/src/_format.ts b/packages/utilities/src/_format.ts
new file mode 100644
index 0000000..687d050
--- /dev/null
+++ b/packages/utilities/src/_format.ts
@@ -0,0 +1,141 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { differenceInDays, format, parseISO } from "date-fns";
+import {
+  parsePhoneNumberFromString,
+  type CountryCode,
+} from "libphonenumber-js";
+import numeral from "numeral";
+import Countries from "./_countries";
+import { isEmpty, isNil } from "./_isType";
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace Format {
+  /** ***************** get phone number object using `libphonenumber-js` *******************/
+  const getPhone = (value: string, country: string) => {
+    const phone =
+      value.match(/^[0+]/) != null ? value.replace(/^00/, "+") : `+${value}`;
+    const number = parsePhoneNumberFromString(phone, country as CountryCode);
+    /* istanbul ignore next */
+    return (
+      number ?? {
+        country: "",
+        formatInternational: () => value,
+      }
+    );
+  };
+
+  /** ***************** common number format method using `numeral` *******************/
+  const numberFormat = (number?: string | number, format = "0,0[.]00a") => {
+    if (isNil(number)) {
+      return "";
+    }
+    const prefix = `${number}`.startsWith("+") ? "+" : "";
+    return prefix + numeral(number).format(format);
+  };
+
+  const makeDuration = (value: number, fmt = "HH:mm:ss.SSS") => {
+    if (!isNaN(value)) {
+      const days = differenceInDays(value, 0);
+      const prefix = days > 0 ? `${days}d:` : "";
+      let time = format(
+        parseISO(new Date(value).toISOString().replace("Z", "")),
+        fmt,
+      );
+      if (!prefix) time = time.replace(/^00:/, "");
+      return `${prefix}${time}`;
+    }
+  };
+
+  /** ***************** format phone number using `libphonenumber-js` *******************/
+  export const phone = (value?: string, country = "AE", useCss = false) => {
+    if (isEmpty(value) || value.length < 6 || !/^[\d+\s\-()]+$/.test(value))
+      return value;
+    const phone = getPhone(value, country);
+    /* istanbul ignore next */
+    return `${
+      useCss
+        ? `<span class="flag ${phone.country}"></span>`
+        : Countries.emoji(phone.country ?? "")
+    } ${phone.formatInternational()}`;
+  };
+  /** ***************** format whole number using `numeral` *******************/
+  export const number = (number?: string | number, format?: string) => {
+    return numberFormat(number, format);
+  };
+  /** ***************** format bytes using `numeral` *******************/
+  export const bytes = (number?: string | number) => {
+    return numberFormat(number, "0,0[.]00b");
+  };
+  /** ***************** format percentage using `numeral` *******************/
+  export const percent = (number?: string | number) => {
+    return numberFormat(number, "0,0[.]00%");
+  };
+  /** ***************** format date using `date-fns` *******************/
+  export const date = (date?: Date | string | number, fmt = "d-M-y") => {
+    return date ? format(new Date(date), fmt) : "";
+  };
+  /** ***************** format time duration from total seconds/milliseconds *******************/
+  /**
+   * Format time duration with milliseconds
+   * @param number
+   * @param isFraction
+   * @returns
+   */
+  export const duration = (number?: string | number, isFraction?: boolean) => {
+    if (isNil(number)) {
+      return "00:00.000";
+    }
+    if (number === Infinity) {
+      return "∞";
+    }
+    const value = parseFloat(`${number}`) * (isFraction ? 1000 : 1);
+    if (!isNaN(value)) {
+      return makeDuration(value);
+    }
+    return "00:00.000";
+  };
+  /**
+   * Format time duration without milliseconds
+   * @param number
+   * @param isFraction
+   * @returns
+   */
+  export const durationSeconds = (
+    number?: string | number,
+    isFraction?: boolean,
+  ) => {
+    if (isNil(number)) {
+      return "00:00";
+    }
+    if (number === Infinity) {
+      return "∞";
+    }
+    const value = parseFloat(`${number}`) * (isFraction ? 1000 : 1);
+    if (!isNaN(value)) {
+      return makeDuration(value, "HH:mm:ss");
+    }
+    return "00:00";
+  };
+}
diff --git a/packages/utilities/src/_getByPath.ts b/packages/utilities/src/_getByPath.ts
new file mode 100644
index 0000000..33e3684
--- /dev/null
+++ b/packages/utilities/src/_getByPath.ts
@@ -0,0 +1,108 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isArray, isEmpty, isNil, isObject } from "./_isType";
+
+const _get = (hit: any, field: string): any => {
+  /** ***************** return if object is empty *******************/
+  /* istanbul ignore next */
+  if (isNil(hit)) {
+    return undefined;
+  }
+  /** ***************** return object if property is empty *******************/
+  /* istanbul ignore next */
+  if (isNil(field)) {
+    return hit;
+  }
+
+  if (isObject(hit)) {
+    /** ***************** return value if object.property is not empty *******************/
+    if (!isNil(hit[field])) {
+      return hit[field];
+    }
+
+    /** ***************** if property name contains `.` separator split to multiple property names *******************/
+    if (field.includes(".")) {
+      let currentValue: any = hit;
+
+      const path = field.split(".");
+      for (let i = path.length - 1; i >= 0; i--) {
+        /** ***************** when property name is `a.b.c` iterate until property found in object. eg. `a`, `a.b` *******************/
+        const outerPath = path.slice(0, i as any).join(".");
+
+        /** ***************** join rest of property list *******************/
+        const innerPath = path.slice(i as any).join(".");
+
+        /** ***************** if current outer path found in object *******************/
+        if (outerPath in currentValue) {
+          currentValue = currentValue[outerPath];
+
+          /** ***************** check for type array *******************/
+          if (isArray(currentValue)) {
+            /** ***************** return value if remaining path found *******************/
+            if (currentValue[innerPath as any]) {
+              return currentValue[innerPath as any];
+            }
+            /** ***************** return array map of inner propeties *******************/
+            return currentValue
+              .map((val) => _get(val, innerPath))
+              .filter((val) => !isEmpty(val));
+          } else {
+            /** ***************** return value of remaining path *******************/
+            return _get(currentValue, innerPath);
+          }
+        }
+      }
+    }
+  }
+
+  return undefined;
+};
+
+/**
+ * get property value by path
+ * @internal
+ */
+export const getByPath = <T = any>(
+  obj: KeyValue,
+  path: string,
+  defaultValue: any = undefined,
+): T => {
+  /** ***************** if empty object/path return defaultValue *******************/
+  if (isEmpty(obj) || isEmpty(path)) {
+    return defaultValue;
+  }
+  const value = _get(obj, path);
+  if (!isNil(value)) {
+    return value;
+  }
+  return defaultValue;
+};
+
+/**
+ * get first available value in list
+ * @internal
+ */
+export const getValue = (...args: any[]) => {
+  return args.find((a) => !isEmpty(a));
+};
diff --git a/packages/utilities/src/_hash.ts b/packages/utilities/src/_hash.ts
new file mode 100644
index 0000000..8e5aceb
--- /dev/null
+++ b/packages/utilities/src/_hash.ts
@@ -0,0 +1,54 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isEmpty } from "./_isType";
+
+/**
+ * calculate hash from string
+ * @param str
+ * @internal
+ */
+export const hash = (str: string) => {
+  let hash = 0;
+  let i;
+  let chr;
+  if (isEmpty(str)) return hash;
+  for (i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+};
+
+/**
+ * generate uuid using `crypto.getRandomValues`
+ * @internal
+ */
+export const uuid = () => {
+  return [1e7, 1e3, 4e3, 8e3, 1e11]
+    .join("-")
+    .replace(/[018]/g, (c: string) =>
+      (+c ^ ((Math.random() * 16) & (15 >> (+c / 4)))).toString(16),
+    );
+};
diff --git a/packages/utilities/src/_interpolate.ts b/packages/utilities/src/_interpolate.ts
new file mode 100644
index 0000000..aae85dd
--- /dev/null
+++ b/packages/utilities/src/_interpolate.ts
@@ -0,0 +1,42 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { getByPath } from "./_getByPath";
+
+/**
+ * interpolate string template using model
+ * @internal
+ */
+export const interpolate = (str: string, model: KeyValue) => {
+  return str.replace(/\${([^{}]*)}/g, (a: string, b: string): string => {
+    const r = getByPath(model, b);
+    return typeof r === "string" || typeof r === "number" ? `${r}` : "";
+  });
+};
+
+export const renderTemplate = (str: string, model: KeyValue) => {
+  return str.replace(/{{([^{}]*)}}/g, (a: string, b: string): string => {
+    const r = getByPath(model, b);
+    return typeof r === "string" || typeof r === "number" ? `${r}` : "";
+  });
+};
diff --git a/packages/utilities/src/_isEqual.ts b/packages/utilities/src/_isEqual.ts
new file mode 100644
index 0000000..e0b2ff2
--- /dev/null
+++ b/packages/utilities/src/_isEqual.ts
@@ -0,0 +1,102 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { ascii } from "./_ascii";
+import { isBoolean, isNumber, isObject, isString } from "./_isType";
+
+/**
+ * check equality of objects
+ * @internal
+ */
+export const isEqual = (obj: unknown, test: unknown): boolean => {
+  if (isString(obj) || isNumber(obj) || isBoolean(obj)) {
+    return obj === test;
+  } else if (Array.isArray(obj) && Array.isArray(test)) {
+    // if length dont match return false
+    if (obj.length !== test.length) {
+      return false;
+    }
+    // check if some value is false
+    return !obj.some((o, i) => !isEqual(o, test[i]));
+  } else if (isObject(obj) && isObject(test)) {
+    const okeys = Object.keys(obj);
+    const tkeys = Object.keys(test);
+    // if keys length dont match return false
+    if (okeys.length !== tkeys.length) {
+      return false;
+    }
+    // if keys dont match return false
+    if (okeys.some((k) => !tkeys.includes(k))) {
+      return false;
+    }
+    // check if some value is false
+    return !Object.keys(obj).some((k) => !isEqual(obj[k], test[k]));
+  }
+  return false;
+};
+
+/**
+ * match strings
+ * @internal
+ */
+export const matchString = (
+  base: string,
+  match: string,
+  equality: "start" | boolean = false,
+) => {
+  const _base = ascii(base).toLowerCase();
+  const _match = ascii(match).toLowerCase();
+
+  return equality === true
+    ? _base === _match
+    : equality === "start"
+      ? _base.startsWith(_match)
+      : _base.includes(_match);
+};
+
+/**
+ * compare values
+ * @internal
+ */
+export const compareValues =
+  (order: "asc" | "desc" = "asc", key?: string) =>
+  (a: unknown, b: unknown) => {
+    const aValue: string = key && isObject(a) ? a[key] : a;
+    const bValue: string = key && isObject(b) ? b[key] : b;
+
+    const bigger = order === "asc" ? 1 : -1;
+    const smaller = order === "desc" ? 1 : -1;
+    // return 0 when equal, allowing for multiple sorting properties
+    if (aValue === bValue) return 0;
+    // if numbers check greater
+    if (isNumber(aValue) && isNumber(bValue)) {
+      return aValue > bValue ? bigger : smaller;
+    }
+    // if boolean sort true first
+    if (isBoolean(aValue) && isBoolean(bValue)) {
+      return aValue ? smaller : bigger;
+    }
+    const _a = ascii(aValue).toLowerCase();
+    const _b = ascii(bValue).toLowerCase();
+    return _a.localeCompare(_b) === 1 ? bigger : smaller;
+  };
diff --git a/packages/utilities/src/_isType.ts b/packages/utilities/src/_isType.ts
new file mode 100755
index 0000000..7492c3a
--- /dev/null
+++ b/packages/utilities/src/_isType.ts
@@ -0,0 +1,104 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export const isUndefined = (value: unknown): value is undefined => {
+  return value === undefined;
+};
+
+export const isNull = (value: unknown): value is null => {
+  return value === null;
+};
+
+export const isNil = (val: unknown): val is undefined => {
+  return val === undefined || val === null;
+};
+export const isEmpty = (val: unknown): val is undefined => {
+  if (isNil(val) || val === "") {
+    return true;
+  }
+  if (Array.isArray(val) && val.filter(Boolean).length === 0) {
+    return true;
+  }
+  if (val instanceof Map || val instanceof Set) return val.size === 0;
+  if (["boolean", "number", "bigint", "function"].includes(typeof val)) {
+    return false;
+  }
+  return !!val && typeof val === "object" && Object.entries(val).length === 0;
+};
+
+export const isObject = (val: unknown): val is KeyValue => {
+  return (
+    !isNil(val) &&
+    !(val instanceof Date) &&
+    typeof val === "object" &&
+    !Array.isArray(val)
+  );
+};
+export const isArray = <T = unknown>(val: unknown): val is T[] => {
+  return Array.isArray(val);
+};
+
+export const isString = (value: unknown): value is string => {
+  return typeof value === "string";
+};
+
+export const isNumber = (value: unknown): value is number => {
+  return typeof value === "number";
+};
+
+export const isBoolean = (value: unknown): value is boolean => {
+  return typeof value === "boolean";
+};
+export const isTrue = (value: unknown = ""): value is true => {
+  return (
+    value === true ||
+    value === 1 ||
+    value?.toString().toLowerCase() === "yes" ||
+    value?.toString().toLowerCase() === "true"
+  );
+};
+export const isFalse = (value: unknown = ""): value is false => {
+  return (
+    value === false ||
+    value === 0 ||
+    value?.toString().toLowerCase() === "no" ||
+    value?.toString().toLowerCase() === "false"
+  );
+};
+
+export const isColor = (color: string) =>
+  color.startsWith?.("#") ||
+  color.startsWith?.("rgb") ||
+  color.startsWith?.("hsl") ||
+  color.startsWith?.("lab") ||
+  color === "transparent";
+
+export const isSvgPath = (value: unknown): value is string => {
+  return (
+    typeof value === "string" && value.match(/^[Mm][\d.].*[\dzZ]$/) !== null
+  );
+};
+
+export const isRtl = () => {
+  return getComputedStyle(document.documentElement).direction === "rtl";
+};
diff --git a/packages/utilities/src/_mergeRefs.ts b/packages/utilities/src/_mergeRefs.ts
new file mode 100644
index 0000000..e64f480
--- /dev/null
+++ b/packages/utilities/src/_mergeRefs.ts
@@ -0,0 +1,33 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+export const mergeRefs =
+  (...refs: AnyObject[]) =>
+  (el: AnyObject) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") ref(el);
+      if (ref && "current" in ref) ref.current = el;
+    });
+  };
diff --git a/packages/utilities/src/_tokenize.ts b/packages/utilities/src/_tokenize.ts
new file mode 100644
index 0000000..5653de9
--- /dev/null
+++ b/packages/utilities/src/_tokenize.ts
@@ -0,0 +1,69 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { isArray, isEmpty } from "./_isType";
+
+/**
+ * split text into array of tokens by word boundaries
+ * @param str
+ * @param keywords
+ * @internal
+ */
+export const tokenize = (str: string, keywords?: string | string[]) => {
+  if (isEmpty(keywords)) {
+    return [[str, ""]];
+  }
+  const keys = isArray(keywords) ? keywords : [keywords];
+  const keyMap = keys.map((key) => {
+    // escape regex control characters
+    let escapedKey = key.replace(/([+*.?^$()[\]\\!&|\-=])/gm, "\\$1");
+    // place token within word boundaries if start/end with alpha-numeric
+    if (key.match(/^[a-z0-9]/i) != null) escapedKey = `\\b${escapedKey}`;
+    if (key.match(/[a-z0-9]$/i) != null) escapedKey = `${escapedKey}\\b`;
+    return escapedKey;
+  });
+  const regx = new RegExp(`(${keyMap.join("|")})`, "img");
+  let match;
+  let lastIndex = 0;
+  const tokens = [];
+  while ((match = regx.exec(str)) !== null) {
+    tokens.push([
+      str.substring(lastIndex, match.index),
+      str.substring(match.index, regx.lastIndex),
+    ]);
+    lastIndex = regx.lastIndex;
+  }
+  tokens.push([str.substring(lastIndex), ""]);
+  return tokens;
+};
+
+export const iconToken = (str: string) => {
+  const split = str.trim().split(" ");
+  const first = split[0];
+  const last = split.length > 1 && split.pop();
+  return (
+    first && last
+      ? `${first.charAt(0)}${last.charAt(0)}`
+      : `${first.substring(0, 2)}`
+  ).toUpperCase();
+};
diff --git a/packages/utilities/src/getImageColorset.ts b/packages/utilities/src/getImageColorset.ts
new file mode 100644
index 0000000..29fb024
--- /dev/null
+++ b/packages/utilities/src/getImageColorset.ts
@@ -0,0 +1,81 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+export const getImageColorset = (el: HTMLImageElement) => {
+  // create canvas
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.min(500, el.naturalWidth);
+  canvas.height = Math.min(500, el.naturalHeight);
+
+  const ctx = canvas.getContext("2d");
+  if (ctx != null) {
+    ctx.drawImage(
+      el,
+      0,
+      0,
+      el.naturalWidth,
+      el.naturalHeight,
+      0,
+      0,
+      canvas.width,
+      canvas.height,
+    );
+
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const data = imageData.data;
+    let r, g, b;
+    let dark = 0;
+    let light = 0;
+    let totalPixels = 0;
+    let transparent = data?.[3] === 0;
+
+    for (let x = 0, len = data.length; x < len; x += 4) {
+      if (data[x + 3] === 0) {
+        transparent = true;
+        continue;
+      }
+      if (transparent && data[x - 1] === 1) {
+        continue;
+      }
+      r = data[x];
+      g = data[x + 1];
+      b = data[x + 2];
+      totalPixels++;
+      0.2126 * r + 0.7152 * g + 0.0722 * b < 128 ? dark++ : light++;
+    }
+
+    const diff = light / totalPixels - dark / totalPixels;
+    let ret = diff > 0 ? "light" : "dark";
+    if (transparent) {
+      ret += "_transparent";
+    }
+    return ret;
+  }
+  return "light";
+};
+
+if (typeof window !== "undefined")
+  // @ts-expect-error ignore
+  window.getImageColorset = getImageColorset;
diff --git a/packages/utilities/src/index.ts b/packages/utilities/src/index.ts
new file mode 100755
index 0000000..c7491bb
--- /dev/null
+++ b/packages/utilities/src/index.ts
@@ -0,0 +1,43 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+export * from "./_ascii";
+export * from "./_boundingBox";
+export { default as Countries } from "./_countries";
+export type { Country } from "./_countries";
+export * from "./_debounce";
+export * from "./_dedupe";
+export { _fetch as fetch } from "./_fetch";
+export { default as FileUtil } from "./_fileType";
+export * from "./_format";
+export * from "./_getByPath";
+export * from "./_hash";
+export * from "./_interpolate";
+export * from "./_isEqual";
+export * from "./_isType";
+export * from "./_mergeRefs";
+export * from "./_tokenize";
+export { getImageColorset } from "./getImageColorset";
+export { useLogger } from "./useLogger";
diff --git a/packages/utilities/src/useLogger.ts b/packages/utilities/src/useLogger.ts
new file mode 100755
index 0000000..c835d19
--- /dev/null
+++ b/packages/utilities/src/useLogger.ts
@@ -0,0 +1,304 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+interface LogDetail {
+  module?: string;
+  process?: string;
+  duration?: number;
+  totalTime?: number;
+}
+
+enum LOG_LEVEL {
+  OFF,
+  WARNING,
+  INFO,
+  DEBUG,
+}
+
+/* istanbul ignore file */
+
+const NODE = {
+  LOG: "\u001B[38;5;144m",
+  INFO: "\u001B[38;5;81m",
+  DEBUG: "\u001B[38;5;110m",
+  ERROR: "\u001B[38;5;161m",
+  WARNING: "\u001B[38;5;209m",
+  TIME: "\u001B[38;5;72m",
+  PROCESS: "\u001B[38;5;108m",
+  DURATION: "\u001B[38;5;140m",
+  RESET: "\u001B[0m",
+
+  logLevel() {
+    return (
+      // @ts-expect-error ignore
+      global.LOG_LEVEL ??
+      (process.env.NODE_ENV !== "production"
+        ? LOG_LEVEL.DEBUG
+        : LOG_LEVEL.WARNING)
+    );
+  },
+
+  makeLog(
+    level: string,
+    { process, module, duration, totalTime }: LogDetail = {},
+  ) {
+    const ret = [];
+    if (process) ret.push(`${this.PROCESS}Process: ${process}${this.RESET}`);
+    if (module) ret.push(`${this.PROCESS}Module: ${module}${this.RESET}`);
+    if (duration)
+      ret.push(`${this.DURATION}Duration: ${duration}${this.RESET}`);
+    if (module)
+      ret.push(`${this.DURATION}TotalTime: ${totalTime}${this.RESET}`);
+
+    return [
+      `[${this.TIME}${new Date().toISOString()}${this.RESET}] ${level}`,
+      ret.join(" "),
+    ]
+      .filter(Boolean)
+      .join("\n");
+  },
+
+  log(msg: string, opts: LogDetail, ...rest: unknown[]) {
+    if (+this.logLevel() < LOG_LEVEL.DEBUG) return;
+    console.log(
+      this.makeLog(`${this.LOG}LOG${this.RESET}`, opts),
+      `\n${msg}\n`,
+      ...rest,
+    );
+  },
+  debug(msg: string, opts: LogDetail, ...rest: unknown[]) {
+    if (+this.logLevel() < LOG_LEVEL.DEBUG) return;
+    console.debug(
+      this.makeLog(`${this.DEBUG}DEBUG${this.RESET}`, opts),
+      `\n${msg}\n`,
+      ...rest,
+    );
+  },
+  info(msg: string, opts: LogDetail, ...rest: unknown[]) {
+    if (+this.logLevel() < LOG_LEVEL.INFO) return;
+    console.info(
+      this.makeLog(`${this.INFO}INFO${this.RESET}`, opts),
+      `\n${msg}\n`,
+      ...rest,
+    );
+  },
+  error(msg: string, opts: LogDetail, ...rest: unknown[]) {
+    console.error(
+      this.makeLog(`${this.ERROR}ERROR${this.RESET}`, opts),
+      `\n${msg}\n`,
+      ...rest,
+    );
+  },
+  warning(msg: string, opts: LogDetail, ...rest: unknown[]) {
+    if (+this.logLevel() < LOG_LEVEL.WARNING) return;
+    console.warn(
+      this.makeLog(`${this.WARNING}WARNING${this.RESET}`, opts),
+      `\n${msg}\n`,
+      ...rest,
+    );
+  },
+};
+
+const BROWSER = {
+  LOG: "#afaf87",
+  INFO: "#5fd7ff",
+  DEBUG: "#87afd7",
+  ERROR: "#d7005f",
+  WARNING: "#ff875f",
+  TIME: "#5faf87",
+  PROCESS: "#87af87",
+  DURATION: "#af87d7",
+
+  logLevel() {
+    return (
+      // @ts-expect-error ignore
+      (typeof window !== "undefined" ? window.LOG_LEVEL : undefined) ??
+      (process.env.NODE_ENV !== "production"
+        ? LOG_LEVEL.DEBUG
+        : LOG_LEVEL.WARNING)
+    );
+  },
+
+  makeLog(
+    level: string,
+    color: string,
+    { process, module, duration, totalTime }: LogDetail = {},
+  ) {
+    const ret = [];
+    const colors = [
+      `color:${this.TIME};font-weight:bold;`,
+      `color:${color};font-weight:bold;`,
+    ];
+    if (module) ret.push(`%cModule: ${module}`);
+    if (process) ret.push(`%cProcess: ${process}`);
+    if (duration) ret.push(`%cDuration: ${duration}`);
+    if (module) ret.push(`%cTotalTime: ${totalTime}`);
+    if (module) colors.push(`color:${this.PROCESS}`);
+    if (process) colors.push(`color:${this.PROCESS}`);
+    if (duration) colors.push(`color:${this.DURATION}`);
+    if (module) colors.push(`color:${this.DURATION}`);
+
+    return [
+      [`%c[${new Date().toISOString()}] ${level}`, ret.join(" ")]
+        .filter(Boolean)
+        .join("\n"),
+      colors,
+    ];
+  },
+
+  log(msg: string, opts: LogDetail, ...rest: unknown[]) {
+    if (+this.logLevel() < LOG_LEVEL.DEBUG) return;
+    const [logs, colors] = this.makeLog(`%cLOG`, this.LOG, opts);
+    console.log(logs, ...colors, `\n${msg}\n`, ...rest);
+  },
+  debug(msg: string, opts: LogDetail, ...rest: unknown[]) {
+    if (+this.logLevel() < LOG_LEVEL.DEBUG) return;
+    const [logs, colors] = this.makeLog(`%cDEBUG`, this.DEBUG, opts);
+    console.debug(logs, ...colors, `\n${msg}\n`, ...rest);
+  },
+  info(msg: string, opts: LogDetail, ...rest: unknown[]) {
+    if (+this.logLevel() < LOG_LEVEL.INFO) return;
+    const [logs, colors] = this.makeLog(`%cINFO`, this.INFO, opts);
+    console.info(logs, ...colors, `\n${msg}\n`, ...rest);
+  },
+  error(msg: string, opts: LogDetail, ...rest: unknown[]) {
+    const [logs, colors] = this.makeLog(`%cERROR`, this.ERROR, opts);
+    console.error(logs, ...colors, `\n${msg}\n`, ...rest);
+  },
+  warning(msg: string, opts: LogDetail, ...rest: unknown[]) {
+    if (+this.logLevel() < LOG_LEVEL.WARNING) return;
+    const [logs, colors] = this.makeLog(`%cWARNING`, this.WARNING, opts);
+    console.warn(logs, ...colors, `\n${msg}\ntest`, ...rest);
+  },
+};
+
+const logger = () => {
+  if (typeof window === "undefined") return NODE;
+  if (typeof window !== "undefined") return BROWSER;
+};
+
+/**
+ * @internal
+ */
+export const useLogger = (mod?: string) => ({
+  timer(process: string) {
+    const startTime = new Date().getTime();
+    let nextTime = new Date().getTime();
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+    const getTime = () => {
+      const ret = (new Date().getTime() - nextTime) / 1000;
+      nextTime = new Date().getTime();
+      return ret;
+    };
+    const getFullTime = () => {
+      return (new Date().getTime() - startTime) / 1000;
+    };
+    return {
+      log: (msg: string, ...rest: unknown[]) =>
+        self.log(
+          msg,
+          {
+            process,
+            duration: getTime(),
+            totalTime: getFullTime(),
+          },
+          ...rest,
+        ),
+      debug: (msg: string, ...rest: unknown[]) =>
+        self.debug(
+          msg,
+          {
+            process,
+            duration: getTime(),
+            totalTime: getFullTime(),
+          },
+          ...rest,
+        ),
+      info: (msg: string, ...rest: unknown[]) =>
+        self.info(
+          msg,
+          {
+            process,
+            duration: getTime(),
+            totalTime: getFullTime(),
+          },
+          ...rest,
+        ),
+      error: (msg: string, ...rest: unknown[]) =>
+        self.error(
+          msg,
+          {
+            process,
+            duration: getTime(),
+            totalTime: getFullTime(),
+          },
+          ...rest,
+        ),
+      warning: (msg: string, ...rest: unknown[]) =>
+        self.warning(
+          msg,
+          {
+            process,
+            duration: getTime(),
+            totalTime: getFullTime(),
+          },
+          ...rest,
+        ),
+      end: (msg = "completed", ...rest: unknown[]) =>
+        self.info(
+          msg,
+          {
+            process,
+            duration: getTime(),
+            totalTime: getFullTime(),
+          },
+          ...rest,
+        ),
+    };
+  },
+
+  log(msg: string, { module = mod, ...opts }: LogDetail, ...rest: unknown[]) {
+    logger()?.log(msg, opts, ...rest);
+  },
+
+  debug(msg: string, { module = mod, ...opts }: LogDetail, ...rest: unknown[]) {
+    logger()?.debug(msg, opts, ...rest);
+  },
+
+  info(msg: string, { module = mod, ...opts }: LogDetail, ...rest: unknown[]) {
+    logger()?.info(msg, opts, ...rest);
+  },
+
+  error(msg: string, { module = mod, ...opts }: LogDetail, ...rest: unknown[]) {
+    logger()?.error(msg, opts, ...rest);
+  },
+
+  warning(
+    msg: string,
+    { module = mod, ...opts }: LogDetail,
+    ...rest: unknown[]
+  ) {
+    logger()?.warning(msg, opts, ...rest);
+  },
+});
diff --git a/packages/utilities/tests/__snapshots__/format.test.ts.snap b/packages/utilities/tests/__snapshots__/format.test.ts.snap
new file mode 100644
index 0000000..4b4d156
--- /dev/null
+++ b/packages/utilities/tests/__snapshots__/format.test.ts.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`format test should format phone 1`] = `"99123"`;
+
+exports[`format test should format phone 2`] = `"badphone"`;
+
+exports[`format test should format phone 3`] = `"🇦🇪 +971 50 249 1824"`;
+
+exports[`format test should format phone 4`] = `"🇦🇪 +971 50 249 1824"`;
+
+exports[`format test should format phone 5`] = `"<span class="flag AE"></span> +971 50 249 1824"`;
diff --git a/packages/utilities/tests/ascii.test.ts b/packages/utilities/tests/ascii.test.ts
new file mode 100644
index 0000000..5a3b09e
--- /dev/null
+++ b/packages/utilities/tests/ascii.test.ts
@@ -0,0 +1,34 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { ascii } from "../src";
+
+describe("ascii converter test", () => {
+  it("should convert latin to ascii", (done) => {
+    expect(ascii("")).toBe("");
+    expect(ascii("mañana")).toBe("manana");
+    expect(ascii("sáo tomê")).toBe("sao tome");
+    expect(ascii("são paulo")).toBe("sao paulo");
+    done();
+  });
+});
diff --git a/packages/utilities/tests/boundingBox.test.ts b/packages/utilities/tests/boundingBox.test.ts
new file mode 100644
index 0000000..92e2aea
--- /dev/null
+++ b/packages/utilities/tests/boundingBox.test.ts
@@ -0,0 +1,42 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { getBoundingBox, getBox } from "../src";
+
+describe("bounding box test", () => {
+  it("should get bounding box", (done) => {
+    expect(getBoundingBox()).toEqual([0, 0, 0, 0]);
+    expect(getBoundingBox("")).toEqual([0, 0, 0, 0]);
+    expect(getBoundingBox("10,10, 96,128")).toEqual([10, 10, 86, 118]);
+    expect(getBoundingBox("-10,-10, 96,128")).toEqual([0, 0, 106, 138]);
+    done();
+  });
+
+  it("should get box", (done) => {
+    expect(getBox()).toEqual([0, 0, 0, 0]);
+    expect(getBox("")).toEqual([0, 0, 0, 0]);
+    expect(getBox("10,10, 96,128")).toEqual([10, 10, 96, 128]);
+    expect(getBox("-10,-10, 96,128")).toEqual([0, 0, 86, 118]);
+    done();
+  });
+});
diff --git a/packages/utilities/tests/countries.test.ts b/packages/utilities/tests/countries.test.ts
new file mode 100644
index 0000000..1834339
--- /dev/null
+++ b/packages/utilities/tests/countries.test.ts
@@ -0,0 +1,65 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Countries } from "../src";
+
+describe("countries test", () => {
+  it("should return country model", (done) => {
+    expect(Countries.find("xx")).toBeUndefined();
+    const model = Countries.find("ae");
+    if (model) {
+      expect(model.iso3).toBe("ARE");
+      expect(model.alt).toBe("UAE");
+    }
+    done();
+  });
+
+  it("should convert iso2 to iso3", (done) => {
+    expect(Countries.toIso3("xx")).toBeUndefined();
+    expect(Countries.toIso3("ae")).toBe("ARE");
+    done();
+  });
+
+  it("should convert iso3 to iso2", (done) => {
+    expect(Countries.toIso2("xxx")).toBeUndefined();
+    expect(Countries.toIso2("are")).toBe("AE");
+    done();
+  });
+
+  it("should convert alternate code to iso2", (done) => {
+    expect(Countries.toIso2("uae")).toBe("AE");
+    done();
+  });
+
+  it("should receive flag emoji", (done) => {
+    expect(Countries.emoji("xxx")).toBe("🏳️");
+    expect(Countries.emoji("are")).toBe("🇦🇪");
+    done();
+  });
+
+  it("should receive country name", (done) => {
+    expect(Countries.name("xxx")).toBe("xxx");
+    expect(Countries.name("are")).toBe("United Arab Emirates");
+    done();
+  });
+});
diff --git a/packages/utilities/tests/dedupe.test.ts b/packages/utilities/tests/dedupe.test.ts
new file mode 100644
index 0000000..3027495
--- /dev/null
+++ b/packages/utilities/tests/dedupe.test.ts
@@ -0,0 +1,93 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { dedupe, flattenAndDedupe, groupBy } from "../src";
+
+describe("dedupe test", () => {
+  it("should dedupe", (done) => {
+    expect(dedupe(["test", "next", "text", "test"])).toEqual([
+      "test",
+      "next",
+      "text",
+    ]);
+    done();
+  });
+
+  it("should flatten and dedupe", (done) => {
+    expect(flattenAndDedupe()).toEqual([]);
+    expect(
+      flattenAndDedupe(
+        [
+          [
+            {
+              field: "test",
+            },
+          ],
+          [
+            {
+              field: "text",
+            },
+            { field: "test" },
+          ],
+        ],
+        "field",
+      ),
+    ).toEqual([
+      {
+        field: "test",
+      },
+      {
+        field: "text",
+      },
+    ]);
+    done();
+  });
+
+  it("should group", (done) => {
+    expect(
+      groupBy(
+        [
+          { key: "item1", value: "Item Value 1" },
+          { key: "item1", value: "Item Value 2" },
+          { key: "item2", value: "Item Value 3" },
+          { key: "item2", value: "Item Value 4" },
+          { value: "Item Value 5" },
+          { value: "Item Value 6" },
+        ],
+        "key",
+        "missing",
+      ),
+    ).toEqual({
+      item1: [
+        { key: "item1", value: "Item Value 1" },
+        { key: "item1", value: "Item Value 2" },
+      ],
+      item2: [
+        { key: "item2", value: "Item Value 3" },
+        { key: "item2", value: "Item Value 4" },
+      ],
+      missing: [{ value: "Item Value 5" }, { value: "Item Value 6" }],
+    });
+    done();
+  });
+});
diff --git a/packages/utilities/tests/format.test.ts b/packages/utilities/tests/format.test.ts
new file mode 100644
index 0000000..83f7c75
--- /dev/null
+++ b/packages/utilities/tests/format.test.ts
@@ -0,0 +1,93 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { FileUtil, Format } from "../src";
+
+describe("format test", () => {
+  it("should format number", (done) => {
+    expect(Format.number()).toBe("");
+    expect(Format.number(9.9)).toBe("9.90");
+    expect(Format.number(9990)).toBe("9.99k");
+    expect(Format.number("-9.81")).toBe("-9.81");
+    expect(Format.number("+9.24")).toBe("+9.24");
+    done();
+  });
+
+  it("should format bytes", (done) => {
+    expect(Format.bytes()).toBe("");
+    expect(Format.bytes(1000)).toBe("1KB");
+    expect(Format.bytes(1000 * 1000)).toBe("1MB");
+    expect(Format.bytes(1000 * 1000 * 1000)).toBe("1GB");
+    done();
+  });
+
+  it("should format percentage", (done) => {
+    expect(Format.percent()).toBe("");
+    expect(Format.percent(0.24)).toBe("24%");
+    expect(Format.percent(0.2418)).toBe("24.18%");
+    done();
+  });
+
+  it("should format date", (done) => {
+    expect(Format.date()).toBe("");
+    expect(Format.date("2020-01-01")).toBe("1-1-2020");
+    expect(Format.date("2020-01-01", "dd-MMM-y")).toBe("01-Jan-2020");
+    done();
+  });
+
+  it("should format duration", (done) => {
+    expect(Format.duration()).toBe("00:00.000");
+    expect(Format.duration("test")).toBe("00:00.000");
+    expect(Format.duration(Infinity)).toBe("∞");
+    expect(Format.duration(86400000 + 14400000 + 1740000 + 18000 + 189)).toBe(
+      "1d:04:29:18.189",
+    );
+    expect(Format.duration(60 * 24 + 3 + 0.128, true)).toBe("24:03.128");
+    done();
+  });
+
+  it("should format duration seconds", (done) => {
+    expect(Format.durationSeconds()).toBe("00:00");
+    expect(Format.durationSeconds("test")).toBe("00:00");
+    expect(Format.durationSeconds(Infinity)).toBe("∞");
+    expect(Format.durationSeconds(1000 * 60 * 24 + 3000 + 128)).toBe("24:03");
+    expect(Format.durationSeconds(60 * 24 + 3 + 0.128, true)).toBe("24:03");
+    done();
+  });
+
+  it("should format phone", (done) => {
+    expect(Format.phone()).toBe(undefined);
+    expect(Format.phone("99123")).toMatchSnapshot();
+    expect(Format.phone("badphone")).toMatchSnapshot();
+    expect(Format.phone("971502491824")).toMatchSnapshot();
+    expect(Format.phone("00971502491824")).toMatchSnapshot();
+    expect(Format.phone("00971502491824", "AE", true)).toMatchSnapshot();
+    done();
+  });
+
+  it("get mime type", (done) => {
+    expect(FileUtil.mime("application/pdf")).toBe("PDF");
+    expect(FileUtil.mime("image/xyz")).toBe("image (xyz)");
+    done();
+  });
+});
diff --git a/packages/utilities/tests/getByPath.test.ts b/packages/utilities/tests/getByPath.test.ts
new file mode 100644
index 0000000..9951471
--- /dev/null
+++ b/packages/utilities/tests/getByPath.test.ts
@@ -0,0 +1,86 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { getByPath, getValue } from "../src";
+
+describe("get values by JSON path", () => {
+  const tester = {
+    outer: {
+      inner: {
+        main: {
+          name: "Test",
+          age: 18,
+        },
+        "my.field": "yes",
+        blank: undefined,
+      },
+      "some.field": "yes",
+      "test.array": [
+        { field: "string" },
+        { field: "number" },
+        { field: "boolean" },
+      ],
+    },
+  };
+  it("should get default values", (done) => {
+    expect(getByPath({}, "prop", "default")).toBe("default");
+    expect(getByPath({ props: "test" }, "prop", "default")).toBe("default");
+    // will return empty array, reason: outer prop value is array type
+    expect(
+      getByPath(
+        { props: [{ prop1: "temp" }, {}, "temp"] },
+        "props.prop.type",
+        "default",
+      ),
+    ).toStrictEqual([]);
+    done();
+  });
+
+  it("should get inner path", (done) => {
+    expect(getByPath(tester, "inner.blank")).toBe(undefined);
+    expect(getByPath(tester, "outer.inner.main.name")).toBe("Test");
+    expect(getByPath(tester, "outer.inner.main.age")).toBe(18);
+    expect(getByPath(tester, "outer.inner.main.gender")).toBe(undefined);
+    done();
+  });
+
+  it("should get inner path with . in name", (done) => {
+    expect(getByPath(tester, "outer.some.field")).toBe("yes");
+    expect(getByPath(tester, "outer.inner.my.field")).toBe("yes");
+    expect(getByPath(tester, "outer.test.array.0")).toStrictEqual({
+      field: "string",
+    });
+    expect(getByPath(tester, "outer.test.array.field")).toStrictEqual([
+      "string",
+      "number",
+      "boolean",
+    ]);
+    done();
+  });
+
+  it("should get first no null value", (done) => {
+    expect(getValue(undefined, "yes", null)).toBe("yes");
+    expect(getValue(null, 0, undefined, "yes", null)).toBe(0);
+    done();
+  });
+});
diff --git a/packages/utilities/tests/hash.test.ts b/packages/utilities/tests/hash.test.ts
new file mode 100644
index 0000000..57bf8c9
--- /dev/null
+++ b/packages/utilities/tests/hash.test.ts
@@ -0,0 +1,39 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { hash, uuid } from "../src";
+
+describe("hash/uuid test", () => {
+  it("should create hash", (done) => {
+    expect(hash("")).toBe(0);
+    expect(hash("ABC")).toBe(64578);
+    done();
+  });
+
+  it("should generate uuid", (done) => {
+    expect(uuid()).toMatch(
+      /^[a-f0-9]{8,8}-[a-f0-9]{4,4}-[a-f0-9]{4,4}-[a-f0-9]{4,4}-[a-f0-9]{12,12}$/,
+    );
+    done();
+  });
+});
diff --git a/packages/utilities/tests/interpolate.test.ts b/packages/utilities/tests/interpolate.test.ts
new file mode 100644
index 0000000..17e4b42
--- /dev/null
+++ b/packages/utilities/tests/interpolate.test.ts
@@ -0,0 +1,56 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { interpolate, renderTemplate } from "../src";
+
+describe("interpolation test", () => {
+  it("should interpolate", (done) => {
+    expect(interpolate("Blank: ${firstName} ${lastName}", {})).toBe("Blank:  ");
+    expect(
+      interpolate("Fullname: ${firstName} ${lastName}, ${missing}${age}", {
+        firstName: "Cary",
+        lastName: "Grant",
+        age: 81,
+      }),
+    ).toBe("Fullname: Cary Grant, 81");
+    done();
+  });
+
+  it("should render template", (done) => {
+    const model = {
+      person: {
+        firstName: "John",
+        lastName: "Doe",
+      },
+      age: 42,
+      dob: "2000-01-01",
+    };
+    expect(
+      renderTemplate(
+        "Person: {{person.firstName}} {{person.lastName}}, {{missing}}{{age}}",
+        model,
+      ),
+    ).toBe("Person: John Doe, 42");
+    done();
+  });
+});
diff --git a/packages/utilities/tests/isEqual.test.ts b/packages/utilities/tests/isEqual.test.ts
new file mode 100644
index 0000000..d336b0d
--- /dev/null
+++ b/packages/utilities/tests/isEqual.test.ts
@@ -0,0 +1,110 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { compareValues, isEqual, matchString } from "../src";
+
+describe("isEqual test", () => {
+  it("should check string", (done) => {
+    expect(isEqual("test", "test")).toBeTruthy();
+    expect(isEqual("TEST", "test")).toBeFalsy();
+    done();
+  });
+
+  it("should check number", (done) => {
+    expect(isEqual(9, 9)).toBeTruthy();
+    expect(isEqual(9, "9")).toBeFalsy();
+    done();
+  });
+
+  it("should check boolean", (done) => {
+    expect(isEqual(true, true)).toBeTruthy();
+    expect(isEqual(false, "false")).toBeFalsy();
+    done();
+  });
+
+  it("should check array", (done) => {
+    expect(isEqual([], [])).toBeTruthy();
+    expect(isEqual([1, 2, 3], [1, 2, 3])).toBeTruthy();
+    expect(isEqual([1, 2], [1])).toBeFalsy();
+    expect(isEqual([1, 2], [1, 3])).toBeFalsy();
+    expect(isEqual([1, 2], undefined)).toBeFalsy();
+    done();
+  });
+
+  it("should check object", (done) => {
+    expect(isEqual({}, {})).toBeTruthy();
+    expect(isEqual({ a: 1 }, { a: 1 })).toBeTruthy();
+    expect(isEqual({ a: 1 }, {})).toBeFalsy();
+    expect(isEqual({ a: 1 }, { b: false })).toBeFalsy();
+    done();
+  });
+
+  it("should check object array", (done) => {
+    const obj = [
+      {
+        name: "First name",
+        password: "Passwd!2#",
+      },
+      {
+        isAuthenticated: true,
+      },
+    ];
+    expect(isEqual(obj, [...obj])).toBeTruthy();
+    expect(isEqual(obj, [...obj, { isAuthenticated: false }])).toBeFalsy();
+    expect(
+      isEqual({ ...obj, temp: [1, 2] }, { ...obj, temp: [1, 2] }),
+    ).toBeTruthy();
+    expect(
+      isEqual({ ...obj, temp: [1, 2] }, { ...obj, temp: [1] }),
+    ).toBeFalsy();
+    done();
+  });
+
+  it("should match string", (done) => {
+    expect(matchString("mañana", "anana")).toBeTruthy();
+    expect(matchString("São Tomé", "tome")).toBeTruthy();
+    expect(matchString("mañana", "manana", true)).toBeTruthy();
+    expect(matchString("São Tomé", "sao tome", true)).toBeTruthy();
+    expect(matchString("mañana", "man", "start")).toBeTruthy();
+    expect(matchString("São Tomé", "sao", "start")).toBeTruthy();
+    done();
+  });
+
+  it("should compare", (done) => {
+    expect(compareValues()("testing", "testing")).toBe(0);
+    expect(compareValues()("testing", "completed")).toBe(1);
+    expect(compareValues()("abacus", "completed")).toBe(-1);
+    expect(compareValues("desc")("testing", "completed")).toBe(-1);
+
+    expect(compareValues()(9, 4)).toBe(1);
+    expect(compareValues()(false, true)).toBe(1);
+    expect(compareValues()(9, 24)).toBe(-1);
+    expect(compareValues()(true, false)).toBe(-1);
+
+    expect(
+      compareValues("asc", "field")({ field: "a value" }, { field: "b value" }),
+    ).toBe(-1);
+
+    done();
+  });
+});
diff --git a/packages/utilities/tests/isType.test.ts b/packages/utilities/tests/isType.test.ts
new file mode 100644
index 0000000..bf75a45
--- /dev/null
+++ b/packages/utilities/tests/isType.test.ts
@@ -0,0 +1,113 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  isBoolean,
+  isColor,
+  isEmpty,
+  isFalse,
+  isNil,
+  isNull,
+  isNumber,
+  isObject,
+  isRtl,
+  isString,
+  isSvgPath,
+  isTrue,
+  isUndefined,
+} from "../src";
+
+describe("check type test", () => {
+  it("should check nils", (done) => {
+    expect(isUndefined(undefined)).toBeTruthy();
+    expect(isUndefined(null)).toBeFalsy();
+    expect(isNull(null)).toBeTruthy();
+    expect(isNull(undefined)).toBeFalsy();
+    expect(isNil(null)).toBeTruthy();
+    expect(isNil(undefined)).toBeTruthy();
+    done();
+  });
+  it("should check empty", (done) => {
+    expect(isEmpty("test")).toBeFalsy();
+    expect(isEmpty(9)).toBeFalsy();
+    expect(isEmpty(true)).toBeFalsy();
+    expect(isEmpty([1, 2])).toBeFalsy();
+    expect(isEmpty({ a: 1, b: 2 })).toBeFalsy();
+    expect(isEmpty(new Map([["a", "test"]]))).toBeFalsy();
+
+    expect(isEmpty("")).toBeTruthy();
+    expect(isEmpty([])).toBeTruthy();
+    expect(isEmpty({})).toBeTruthy();
+    expect(isEmpty(new Map())).toBeTruthy();
+    done();
+  });
+  it("should check string", (done) => {
+    expect(isString("test")).toBeTruthy();
+    expect(isString(9)).toBeFalsy();
+    done();
+  });
+  it("should check number", (done) => {
+    expect(isNumber(9)).toBeTruthy();
+    expect(isNumber("9")).toBeFalsy();
+    done();
+  });
+  it("should check boolean", (done) => {
+    expect(isBoolean(true)).toBeTruthy();
+    expect(isBoolean("true")).toBeFalsy();
+    done();
+  });
+  it("should check truthy", (done) => {
+    expect(isTrue()).toBeFalsy();
+    expect(isTrue(true)).toBeTruthy();
+    expect(isTrue("true")).toBeTruthy();
+    expect(isTrue("yes")).toBeTruthy();
+    done();
+  });
+  it("should check falsy", (done) => {
+    expect(isFalse()).toBeFalsy();
+    expect(isFalse(false)).toBeTruthy();
+    expect(isFalse("false")).toBeTruthy();
+    expect(isFalse("no")).toBeTruthy();
+    done();
+  });
+  it("should check object", (done) => {
+    expect(isObject({ a: 1 })).toBeTruthy();
+    expect(isObject("{a:1}")).toBeFalsy();
+    done();
+  });
+  it("should check svg path", (done) => {
+    expect(isSvgPath("M9 9z")).toBeTruthy();
+    expect(isSvgPath("M9,56.8-89.12 9z")).toBeTruthy();
+    expect(isSvgPath("1,1 45z")).toBeFalsy();
+    done();
+  });
+  it("should check color", (done) => {
+    expect(isColor("blue")).toBeFalsy();
+    expect(isColor("#fc9832")).toBeTruthy();
+    done();
+  });
+  it("should check rtl", (done) => {
+    expect(isRtl()).toBeFalsy();
+    done();
+  });
+});
diff --git a/packages/utilities/tests/tokenize.test.ts b/packages/utilities/tests/tokenize.test.ts
new file mode 100644
index 0000000..28c7a0d
--- /dev/null
+++ b/packages/utilities/tests/tokenize.test.ts
@@ -0,0 +1,50 @@
+/*
+ * React UI Framework
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { iconToken, tokenize } from "../src";
+
+describe("tokenize test", () => {
+  it("should tokenize text", (done) => {
+    expect(tokenize("lorem ipsum lorem dolor", "")).toEqual([
+      ["lorem ipsum lorem dolor", ""],
+    ]);
+    expect(tokenize("lorem ipsum lorem dolor", "lorem")).toEqual([
+      ["", "lorem"],
+      [" ipsum ", "lorem"],
+      [" dolor", ""],
+    ]);
+    expect(tokenize("lorem ipsum lorem dolor", ["lorem", "ipsum"])).toEqual([
+      ["", "lorem"],
+      [" ", "ipsum"],
+      [" ", "lorem"],
+      [" dolor", ""],
+    ]);
+    done();
+  });
+
+  it("should tokenize text for icon", (done) => {
+    expect(iconToken("Username")).toBe("US");
+    expect(iconToken("Doctor Who")).toBe("DW");
+    done();
+  });
+});
diff --git a/packages/utilities/tsconfig.build.json b/packages/utilities/tsconfig.build.json
new file mode 100755
index 0000000..6d84bf3
--- /dev/null
+++ b/packages/utilities/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/types",
+    "rootDir": "src"
+  },
+  "exclude": ["./dist/**/*"],
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}
diff --git a/packages/utilities/tsconfig.json b/packages/utilities/tsconfig.json
new file mode 100755
index 0000000..cadbd09
--- /dev/null
+++ b/packages/utilities/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": ["./dist"],
+  "include": ["./src", "./tests"]
+}
diff --git a/stories/0.Introduction.mdx b/stories/0.Introduction.mdx
index e95267b..6a17dc3 100644
--- a/stories/0.Introduction.mdx
+++ b/stories/0.Introduction.mdx
@@ -6,9 +6,9 @@ import { Translation } from "react-i18next";
 
 <div className="flex gap-lg">
   <div>
-    <img src="poster.png" height={72} />
+    <img src="poster.png" className="h-16" />
     <Subtitle>
-    <div style={{marginInlineStart:"5rem"}}>
+    <div style={{marginInlineStart:"5.25rem"}}>
       <Translation>
         {(t, { i18n }) => t("appDescription", "Default text")}
       </Translation>
@@ -20,4 +20,67 @@ import { Translation } from "react-i18next";
 
 <hr />
 
+[![Stars](https://img.shields.io/github/stars/adarshpastakia/react-fabric.svg?logoColor=blue&style=social&logo=github "GitHub Stars")](https://github.com/adarshpastakia/react-fabric/stargazers)
+[![Forks](https://img.shields.io/github/forks/adarshpastakia/react-fabric.svg?logoColor=blue&style=social&logo=github "GitHub Forks")](https://github.com/adarshpastakia/react-fabric/network/members)
+[![Issues](https://img.shields.io/github/issues/adarshpastakia/react-fabric.svg?logoColor=blue&style=social&logo=github "GitHub Issues")](https://github.com/adarshpastakia/react-fabric/issues)
+[![Discussions](https://img.shields.io/github/discussions/adarshpastakia/react-fabric?style=social&logo=github&logoColor=blue "GitHub Discussions")](https://github.com/adarshpastakia/react-fabric/discussions)
+
+![license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square&labelColor=333&logo=none)
+![node](https://img.shields.io/github/package-json/minNode/adarshpastakia/react-fabric?logo=node.js&logoColor=white&label=node&color=5FA04E)
+![Build](https://img.shields.io/github/actions/workflow/status/adarshpastakia/react-fabric/build.yml?style=flat-square&logo=github&labelColor=333&label=build)
+![npm](https://img.shields.io/npm/v/%40react-fabric%2Fcore?style=flat-square&logo=npm&labelColor=333&label=release&color=CB3837)
+
+![Deps](https://img.shields.io/librariesio/github/adarshpastakia/react-fabric?style=flat-square&logo=libraries.io&logoColor=fff&labelColor=333&label=dependencies)
+![Maintain](https://img.shields.io/codeclimate/maintainability/adarshpastakia/react-fabric?style=flat-square&logo=code%20climate&labelColor=333&label=maintainability)
+![Coverage](https://img.shields.io/codeclimate/coverage/adarshpastakia/react-fabric?style=flat-square&logo=code%20climate&labelColor=333&label=coverage)
+![Issues](https://img.shields.io/codeclimate/issues/adarshpastakia/react-fabric?style=flat-square&logo=code%20climate&labelColor=333&label=issues)
+
+[![lerna](https://img.shields.io/badge/lerna-677ef8.svg?style=flat-square&labelColor=333&logo=lerna)](https://lerna.js.org/)
+[![yarn](https://img.shields.io/badge/yarn-2C8EBB.svg?style=flat-square&labelColor=333&logo=yarn)](https://yarnpkg.com/)
+[![react](https://img.shields.io/badge/react-61DAFB.svg?style=flat-square&labelColor=333&logo=react)](http://reactjs.org/)
+[![ts](https://img.shields.io/badge/typescript-3178C6.svg?style=flat-square&labelColor=333&logo=typescript)](https://typescriptlang.org/)
+[![emotion](https://img.shields.io/badge/tailwindcss-06B6D4.svg?style=flat-square&labelColor=333&logo=tailwindcss)](https://tailwindcss.com/)
+[![prettier](https://img.shields.io/badge/prettier-EA4C89.svg?style=flat-square&labelColor=333&logo=prettier)](https://prettier.io/)
+[![codeclimate](https://img.shields.io/badge/code%20climate-272425.svg?style=flat-square&labelColor=333&logo=code%20climate)](http://codeclimate.com/)
+
+<div className="inline-flex gap-2 flex-nowrap items-center rounded outline leading-none overflow-hidden">
+  <img src="browser/chrome.png" className="h-6 p-1 bg-dark" />
+  <span className="text-lg leading-none pe-2 font-medium font-mono">≥ 117</span>
+</div>
+<div className="inline-flex gap-2 flex-nowrap items-center rounded outline">
+  <img src="browser/firefox.png" className="h-6 p-1 bg-dark" />
+  <span className="text-lg leading-none pe-2 font-medium font-mono">≥ 117</span>
+</div>
+<div className="inline-flex gap-2 flex-nowrap items-center rounded outline">
+  <img src="browser/edge.png" className="h-6 p-1 bg-dark" />
+  <span className="text-lg leading-none pe-2 font-medium font-mono">≥ 117</span>
+</div>
+<div className="inline-flex gap-2 flex-nowrap items-center rounded outline">
+  <img src="browser/safari.png" className="h-6 p-1 bg-dark" />
+  <span className="text-lg leading-none pe-2 font-medium font-mono">
+    <span>≥ 16.2</span>
+  </span>
+</div>
+
+<hr />
+
 Built using Tailwind and pure CSS, using CSS variables and the `color-mix` function which makes theming in css relatively easy.
+
+A complete UI framework that provides a comprehensive suite of tools for building interactive and visually appealing applications. Here's an overview of the key features and components it includes:
+
+1. **Common UI Components**: These foundational elements are essential for constructing user interfaces. They typically include buttons, links, modals, tooltips, and other basic elements that facilitate user interactions and navigation.
+
+2. **Form Inputs**: This category encompasses various input elements used to collect data from users. Common form inputs include text fields, checkboxes, radio buttons, select dropdowns, date pickers, and toggles. These components are often designed with built-in validation and styling options to ensure consistency and usability.
+
+3. **Data Display Components**:
+
+   - **DataGrid**: A powerful component for displaying tabular data. It supports features like sorting, filtering, pagination, and inline editing, making it suitable for handling large datasets and presenting information in a structured format.
+   - **Virtual Scroll Lists**: Designed for efficiently rendering long lists of items, virtual scroll lists dynamically load and unload items as the user scrolls, improving performance and responsiveness for large datasets.
+   - **Trees**: A hierarchical component used to display and manage nested data structures. It allows users to expand and collapse branches, facilitating the organization and navigation of complex data.
+   - **Histograms**: A type of charting component used to represent the distribution of data across different intervals or bins. It provides visual insight into the frequency or occurrence of data points within specified ranges.
+
+4. **Charting Components**: These components offer various ways to visualize data, including line charts, bar charts, pie charts, and scatter plots. They are designed to present complex data in a more digestible format, aiding in analysis and decision-making.
+
+5. **Styling and Customization**: The framework generally includes options for customizing the appearance of components, allowing developers to align the design with their application's branding and user experience requirements. This may include themes, color schemes, and responsive design features.
+
+Overall, this UI framework provides a robust set of components that cater to a wide range of use cases, from basic user interface elements to advanced data visualization tools. It enables developers to build feature-rich and user-friendly applications with a consistent and cohesive design.
diff --git a/yarn.lock b/yarn.lock
index 0a42c0e..86cfa04 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3838,6 +3838,20 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
+"@testing-library/dom@^10.0.0":
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8"
+  integrity sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^5.0.1"
+    aria-query "5.3.0"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.5.0"
+    pretty-format "^27.0.2"
+
 "@testing-library/dom@^9.0.0":
   version "9.3.4"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce"
@@ -3888,13 +3902,13 @@
     "@babel/runtime" "^7.12.5"
     react-error-boundary "^3.1.0"
 
-"@testing-library/react@~14.2.1":
-  version "14.2.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-14.2.2.tgz#74f855215c57d423282486a395a4348a837d3c5a"
-  integrity sha512-SOUuM2ysCvjUWBXTNfQ/ztmnKDmqaiPV3SvoIuyxMUca45rbSWWAT/qB8CUs/JQ/ux/8JFs9DNdFQ3f6jH3crA==
+"@testing-library/react@~15.0.0":
+  version "15.0.7"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-15.0.7.tgz#ff733ce0893c875cb5a47672e8e772897128f4ae"
+  integrity sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^9.0.0"
+    "@testing-library/dom" "^10.0.0"
     "@types/react-dom" "^18.0.0"
 
 "@testing-library/user-event@14.5.2", "@testing-library/user-event@^14.4.0":
@@ -8288,6 +8302,11 @@ hard-rejection@^2.1.0:
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
   integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
 
+harmony-reflect@^1.4.6:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
+  integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -8605,6 +8624,13 @@ identifierfy@^2.0.0:
   dependencies:
     esutils "^2.0.2"
 
+identity-obj-proxy@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
+  integrity sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==
+  dependencies:
+    harmony-reflect "^1.4.6"
+
 ieee754@^1.1.13:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -9253,6 +9279,13 @@ jest-config@^29.7.0:
     slash "^3.0.0"
     strip-json-comments "^3.1.1"
 
+jest-css-modules@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/jest-css-modules/-/jest-css-modules-2.1.0.tgz#9c25ebe9d0214d8f55861a442268fdd4b01b4781"
+  integrity sha512-my3Scnt6l2tOll/eGwNZeh1KLAFkNzdl4MyZRdpl46GO6/93JcKKdTjNqK6Nokg8A8rT84MFLOpY1pzqKBEqMw==
+  dependencies:
+    identity-obj-proxy "3.0.0"
+
 "jest-diff@>=29.4.3 < 30", jest-diff@^29.4.1, jest-diff@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.7.0.tgz#017934a66ebb7ecf6f205e84699be10afd70458a"