@clickhouse/click-ui 0.0.0

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,71 @@
+import { Tabs } from "@/components";
+import type { StoryObj } from "@storybook/react";
+
+export default {
+  component: Tabs,
+  title: "Tabs",
+  tags: ["tabs", "autodocs"],
+};
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: "tab2",
+    onValueChange: s => console.log(s),
+    ariaLabel: "a simple tab component",
+    children: (
+      <>
+        <Tabs.TriggersList>
+          <Tabs.Trigger value="tab1" key="tab1">
+            tab1
+          </Tabs.Trigger>
+          <Tabs.Trigger value="tab2" key="tab2">
+            tab2
+          </Tabs.Trigger>
+          <Tabs.Trigger value="tab3" key="tab3">
+            tab3
+          </Tabs.Trigger>
+        </Tabs.TriggersList>
+        <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
+        <Tabs.Content value="tab2">Tab 2 content</Tabs.Content>
+        <Tabs.Content value="tab3">Tab 3 content</Tabs.Content>
+      </>
+    ),
+  },
+};
+
+export const Hover = {
+  args: {
+    children: [
+      <>
+        <Tabs.TriggersList>
+          <Tabs.Trigger value="tab1" key="tab1">
+            tab1
+          </Tabs.Trigger>
+        </Tabs.TriggersList>
+        <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
+      </>,
+    ],
+  },
+  parameters: {
+    pseudo: {
+      hover: true,
+    },
+  },
+};
+
+export const Selected = {
+  args: {
+    children: [
+      <>
+        <Tabs.TriggersList>
+          <Tabs.Trigger value="tab1" data-state="active" key="tab1">
+            tab1
+          </Tabs.Trigger>
+        </Tabs.TriggersList>
+        <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
+      </>,
+    ],
+  },
+};

package/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,86 @@
+import { ThemeProvider } from "../../theme";
+import { render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Tabs } from "./Tabs";
+import { TabsProps } from "@/components/Tabs/Tabs";
+
+describe("Tabs", () => {
+  const renderTabs = (props: TabsProps) =>
+    render(
+      <ThemeProvider theme="dark">
+        <Tabs {...props} />
+      </ThemeProvider>
+    );
+
+  it("should render the Tabs", () => {
+    const { getByText } = renderTabs({
+      children: <p>Common text</p>,
+      defaultValue: "1",
+    });
+    expect(getByText("Common text").textContent).toBe("Common text");
+  });
+
+  it("should switch between tabs", () => {
+    const { getByText } = renderTabs({
+      defaultValue: "tab1",
+      ariaLabel: "Tabs",
+      children: (
+        <>
+          <Tabs.TriggersList>
+            <Tabs.Trigger value="tab1" key="tab1">
+              tab1
+            </Tabs.Trigger>
+            <Tabs.Trigger value="tab2" key="tab2">
+              tab2
+            </Tabs.Trigger>
+            <Tabs.Trigger value="tab3" key="tab3">
+              tab3
+            </Tabs.Trigger>
+          </Tabs.TriggersList>
+          <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
+          <Tabs.Content value="tab2">Tab 2 content</Tabs.Content>
+          <Tabs.Content value="tab3">Tab 3 content</Tabs.Content>
+        </>
+      ),
+    });
+    [1, 2, 3].forEach(async n => {
+      const tab = getByText(`tab${n}`);
+      userEvent.click(tab);
+      await waitFor(() => {
+        const content = getByText(`Tab ${n} content`);
+        expect(content.textContent).toEqual(`Tab ${n} content`);
+      });
+    });
+  });
+
+  it("should execute callback on value change", async () => {
+    let counter = 0;
+    const { getByText } = renderTabs({
+      onValueChange: () => counter++,
+      children: (
+        <>
+          <Tabs.TriggersList>
+            <Tabs.Trigger value="tab1" key="tab1">
+              tab1
+            </Tabs.Trigger>
+            <Tabs.Trigger value="tab2" key="tab2">
+              tab2
+            </Tabs.Trigger>
+            <Tabs.Trigger value="tab3" key="tab3">
+              tab3
+            </Tabs.Trigger>
+          </Tabs.TriggersList>
+          <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
+          <Tabs.Content value="tab2">Tab 2 content</Tabs.Content>
+          <Tabs.Content value="tab3">Tab 3 content</Tabs.Content>
+        </>
+      ),
+      defaultValue: "tab1",
+    });
+    const tab = getByText("tab2");
+    userEvent.click(tab);
+    await waitFor(() => {
+      expect(counter).toEqual(1);
+    });
+  });
+});

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,82 @@
+import * as RadixTabs from "@radix-ui/react-tabs";
+import styled from "styled-components";
+
+export type TabProps = {
+  label: React.ReactNode;
+  value: string;
+  children?: React.ReactNode;
+};
+
+export type TabsProps = {
+  defaultValue?: string;
+  ariaLabel?: string;
+  onValueChange?: (s: string) => unknown;
+  children: React.ReactElement<TabProps>[] | React.ReactElement<TabProps>;
+};
+
+const Trigger = styled(RadixTabs.Trigger)`
+  border: none;
+  padding: ${props =>
+    `${props.theme.click.tabs.space.y} ${props.theme.click.tabs.space.x}`};
+
+  border-top-left-radius: ${props => props.theme.click.tabs.radii.all};
+  border-top-right-radius: ${props => props.theme.click.tabs.radii.all};
+
+  border-bottom: ${props => props.theme.click.tabs.basic.stroke.default};
+  background-color: ${props =>
+    props.theme.click.tabs.basic.color.background.default};
+  color: ${props => props.theme.click.tabs.basic.color.text.default};
+  font: ${props => props.theme.click.tabs.typography.label.default};
+  cursor: pointer;
+
+  &[data-state="active"] {
+    border-bottom: ${props => props.theme.click.tabs.basic.stroke.active};
+    background-color: ${props =>
+      props.theme.click.tabs.basic.color.background.active};
+    color: ${props => props.theme.click.tabs.basic.color.text.active};
+    font: ${props => props.theme.click.tabs.typography.label.active};
+  }
+
+  &:hover {
+    border-bottom: ${props => props.theme.click.tabs.basic.stroke.hover};
+    background-color: ${props =>
+      props.theme.click.tabs.basic.color.background.hover};
+    color: ${props => props.theme.click.tabs.basic.color.text.hover};
+    font: ${props => props.theme.click.tabs.typography.label.hover};
+  }
+
+  &:hover[data-state="active"] {
+    border-bottom: ${props => props.theme.click.tabs.basic.stroke.active};
+  }
+`;
+
+const Content = styled(RadixTabs.Content)``;
+
+const TriggersList = styled(RadixTabs.List)`
+  border-bottom: ${props => props.theme.click.tabs.basic.stroke.global};
+`;
+
+const Tabs = ({
+  defaultValue,
+  children,
+  ariaLabel,
+  onValueChange,
+  ...delegated
+}: TabsProps) => {
+  return (
+    <RadixTabs.Root
+      aria-label={ariaLabel}
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+      {...delegated}
+    >
+      {children}
+    </RadixTabs.Root>
+  );
+};
+
+Tabs.TriggersList = TriggersList;
+Tabs.Trigger = Trigger;
+Tabs.Content = Content;
+
+export { Tabs };

package/src/components/icons/ChatIcon.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const ChatIcon = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="M13 17h5a3 3 0 003-3V6a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3h2v4l5-4"
+    ></path>
+  </svg>
+);
+
+export default ChatIcon;

package/src/components/icons/ChevronDown.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { ChevronRight } from "./ChevronRight";
+
+export const ChevronDown = styled(ChevronRight)`
+  transform: rotate(90deg);
+`;

package/src/components/icons/ChevronRight.tsx

@@ -0,0 +1,20 @@
+import { SVGAttributes } from "react";
+
+export const ChevronRight = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10 16L14 12L10 8"
+      stroke="#242325"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/icons/DatabaseIcon.tsx

@@ -0,0 +1,33 @@
+import { SVGAttributes } from "react";
+
+function DatabaseIcon(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='25'
+      fill='none'
+      viewBox='0 0 24 25'
+      {...props}
+    >
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        stroke='currentColor'
+        strokeWidth='0.5'
+        d='M5.5 13.993c0 1.776 2.934 3.033 6.498 3.033 3.565 0 6.499-1.257 6.499-3.033a.433.433 0 10-.867 0c0 1.096-2.497 2.166-5.632 2.166s-5.632-1.07-5.632-2.166a.433.433 0 10-.866 0h0zM5.5 10.311c0 1.557 2.919 2.6 6.498 2.6 3.58 0 6.499-1.043 6.499-2.6a.433.433 0 10-.867 0c0 .836-2.512 1.733-5.632 1.733-3.12 0-5.632-.897-5.632-1.733a.433.433 0 10-.866 0h0zM17.63 6.412c0 .836-2.512 1.733-5.632 1.733-3.12 0-5.632-.897-5.632-1.733 0-.836 2.513-1.733 5.632-1.733 3.12 0 5.632.897 5.632 1.733zm.867 0c0-1.557-2.919-2.6-6.499-2.6-3.58 0-6.498 1.043-6.498 2.6 0 1.557 2.919 2.6 6.498 2.6 3.58 0 6.499-1.043 6.499-2.6z'
+        clipRule='evenodd'
+      ></path>
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        stroke='currentColor'
+        strokeWidth='0.5'
+        d='M17.63 6.413V18.11c0 .284-.578.833-1.53 1.288-1.147.549-2.61.88-4.101.878-1.494.003-2.956-.33-4.102-.878-.953-.455-1.53-1.004-1.53-1.288V6.413a.433.433 0 10-.867 0V18.11c0 1.483 3.253 3.038 6.499 3.032 3.245.006 6.498-1.55 6.498-3.032V6.413a.433.433 0 00-.867 0h0z'
+        clipRule='evenodd'
+      ></path>
+    </svg>
+  );
+}
+
+export default DatabaseIcon;

package/src/components/icons/FilterIcon.tsx

@@ -0,0 +1,24 @@
+import { SVGAttributes } from "react";
+
+function FilterIcon(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      fill='none'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        stroke='#fff'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+        d='M14.5 13.5l5.207-5.207A1 1 0 0020 7.586V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2.586c0 .265.105.52.293.707L9.5 13.5M9.5 13.5v6.249c0 .813.764 1.41 1.553 1.213l2.5-.625a1.25 1.25 0 00.947-1.213V13.5'
+      ></path>
+    </svg>
+  );
+}
+
+export default FilterIcon;

package/src/components/icons/Flags/EuropeanUnion.tsx

@@ -0,0 +1,174 @@
+import React from "react";
+
+function EuropeanUnion(
+  props: React.SVGAttributes<SVGElement>
+): React.ReactElement {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={30}
+      height={20}
+      viewBox='0 0 30 20'
+      fill='none'
+      {...props}
+    >
+      <g clipPath='url(#euFlagClipPath1)'>
+        <g clipPath='url(#euFlagClipPath2)'>
+          <path fill='#039' d='M30 0H0v20h30V0Z' />
+          <path fill='#FC0' d='m15 2.222-.343 1.057.528.172L15 2.222Z' />
+          <path fill='#FC0' d='m15 2.222.343 1.057-.528.172L15 2.222Z' />
+          <path fill='#FC0' d='M16.057 2.99h-1.111v.555l1.11-.555Z' />
+          <path fill='#FC0' d='m16.057 2.99-.9.653-.326-.45 1.226-.203Z' />
+          <path fill='#FC0' d='m15.653 4.232-.343-1.057-.528.172.871.885Z' />
+          <path fill='#FC0' d='m15.653 4.232-.899-.653.327-.45.572 1.103Z' />
+          <path fill='#FC0' d='M13.944 2.99h1.111v.555l-1.11-.555Z' />
+          <path fill='#FC0' d='m13.944 2.99.9.653.326-.45-1.226-.203Z' />
+          <path fill='#FC0' d='m14.348 4.232.343-1.057.528.172-.871.885Z' />
+          <path
+            fill='#FC0'
+            d='m14.348 4.232.899-.653-.327-.45-.572 1.103ZM15 15.556l-.343 1.056.528.172L15 15.556Z'
+          />
+          <path fill='#FC0' d='m15 15.556.343 1.056-.528.172.185-1.228Z' />
+          <path fill='#FC0' d='M16.057 16.323h-1.111v.556l1.11-.556Z' />
+          <path fill='#FC0' d='m16.057 16.323-.9.653-.326-.45 1.226-.203Z' />
+          <path fill='#FC0' d='m15.653 17.565-.343-1.056-.528.171.871.885Z' />
+          <path fill='#FC0' d='m15.653 17.565-.899-.653.327-.45.572 1.103Z' />
+          <path fill='#FC0' d='M13.944 16.323h1.111v.556l-1.11-.556Z' />
+          <path fill='#FC0' d='m13.944 16.323.9.653.326-.45-1.226-.203Z' />
+          <path fill='#FC0' d='m14.348 17.565.343-1.056.528.171-.871.885Z' />
+          <path
+            fill='#FC0'
+            d='m14.348 17.565.899-.653-.327-.45-.572 1.103ZM8.333 8.889 7.99 9.945l.528.172-.185-1.228Z'
+          />
+          <path fill='#FC0' d='m8.333 8.889.343 1.056-.528.172.185-1.228Z' />
+          <path fill='#FC0' d='M9.39 9.656H8.279v.556l1.11-.556Z' />
+          <path fill='#FC0' d='m9.39 9.656-.9.653-.326-.45 1.226-.203Z' />
+          <path fill='#FC0' d='m8.986 10.898-.343-1.056-.528.171.871.885Z' />
+          <path fill='#FC0' d='m8.986 10.898-.899-.653.327-.45.572 1.103Z' />
+          <path fill='#FC0' d='M7.277 9.656h1.111v.556l-1.11-.556Z' />
+          <path fill='#FC0' d='m7.277 9.656.9.653.326-.45-1.226-.203Z' />
+          <path fill='#FC0' d='m7.68 10.898.344-1.056.528.171-.871.885Z' />
+          <path
+            fill='#FC0'
+            d='m7.68 10.898.9-.653-.327-.45-.572 1.103ZM11.014 5.126l.899-.653-.327-.45-.572 1.103Z'
+          />
+          <path fill='#FC0' d='m11.014 5.126.343-1.057.528.172-.871.885Z' />
+          <path fill='#FC0' d='m10.61 3.884.9.653.326-.45-1.226-.203Z' />
+          <path fill='#FC0' d='M10.61 3.884h1.112v.555l-1.112-.555Z' />
+          <path fill='#FC0' d='m11.667 3.116-.343 1.056.528.172-.185-1.228Z' />
+          <path fill='#FC0' d='m11.667 3.116.343 1.056-.528.172.185-1.228Z' />
+          <path fill='#FC0' d='m12.32 5.126-.899-.653.327-.45.572 1.103Z' />
+          <path fill='#FC0' d='m12.32 5.126-.343-1.057-.528.172.871.885Z' />
+          <path fill='#FC0' d='m12.725 3.884-.9.653-.326-.45 1.226-.203Z' />
+          <path
+            fill='#FC0'
+            d='M12.725 3.884h-1.111v.555l1.11-.555ZM9.879 7.566l-.343-1.057-.529.172.872.885Z'
+          />
+          <path fill='#FC0' d='m9.879 7.566-.899-.653.327-.45.572 1.103Z' />
+          <path fill='#FC0' d='m8.572 7.566.9-.653-.327-.45-.573 1.103Z' />
+          <path fill='#FC0' d='m8.572 7.566.344-1.057.528.172-.872.885Z' />
+          <path fill='#FC0' d='m8.168 6.324.899.653.326-.45-1.225-.203Z' />
+          <path fill='#FC0' d='M8.168 6.324h1.111v.555l-1.111-.555Z' />
+          <path fill='#FC0' d='m10.282 6.324-.899.653-.326-.45 1.225-.203Z' />
+          <path fill='#FC0' d='M10.282 6.324h-1.11v.555l1.11-.555Z' />
+          <path fill='#FC0' d='m9.226 5.556.343 1.056-.528.172.185-1.228Z' />
+          <path
+            fill='#FC0'
+            d='m9.226 5.556-.344 1.056.529.172-.185-1.228ZM10.283 12.99h-1.11v.556l1.11-.555Z'
+          />
+          <path fill='#FC0' d='m10.283 12.99-.899.654-.326-.45 1.225-.203Z' />
+          <path fill='#FC0' d='m9.88 14.233-.343-1.057-.529.172.872.885Z' />
+          <path fill='#FC0' d='m9.88 14.233-.899-.653.327-.45.572 1.103Z' />
+          <path fill='#FC0' d='m8.573 14.233.9-.653-.327-.45-.573 1.103Z' />
+          <path fill='#FC0' d='m8.573 14.233.344-1.057.528.172-.872.885Z' />
+          <path fill='#FC0' d='m9.227 12.223.343 1.057-.528.172.185-1.229Z' />
+          <path fill='#FC0' d='m9.227 12.223-.344 1.057.529.172-.185-1.229Z' />
+          <path fill='#FC0' d='M8.17 12.99H9.28v.556l-1.111-.555Z' />
+          <path
+            fill='#FC0'
+            d='m8.17 12.99.899.654.326-.45-1.225-.203ZM12.724 15.43h-1.111v.556l1.11-.555Z'
+          />
+          <path fill='#FC0' d='m12.724 15.43-.9.654-.326-.45 1.226-.203Z' />
+          <path fill='#FC0' d='m12.32 16.673-.343-1.057-.528.172.871.885Z' />
+          <path fill='#FC0' d='m12.32 16.673-.899-.653.327-.45.572 1.103Z' />
+          <path fill='#FC0' d='m11.014 16.673.899-.653-.327-.45-.572 1.103Z' />
+          <path fill='#FC0' d='m11.014 16.673.343-1.057.528.172-.871.885Z' />
+          <path fill='#FC0' d='m11.667 14.663.343 1.057-.528.171.185-1.228Z' />
+          <path fill='#FC0' d='m11.667 14.663-.343 1.057.528.171-.185-1.228Z' />
+          <path fill='#FC0' d='M10.61 15.43h1.112v.556l-1.112-.555Z' />
+          <path
+            fill='#FC0'
+            d='m10.61 15.43.9.654.326-.45-1.226-.203ZM21.663 8.888l.343 1.056-.528.172.185-1.228Z'
+          />
+          <path fill='#FC0' d='m21.663 8.888-.343 1.056.528.172-.185-1.228Z' />
+          <path fill='#FC0' d='M20.606 9.655h1.112v.556l-1.112-.556Z' />
+          <path fill='#FC0' d='m20.606 9.655.9.653.326-.45-1.226-.203Z' />
+          <path fill='#FC0' d='m21.01 10.898.343-1.057.528.171-.871.886Z' />
+          <path fill='#FC0' d='m21.01 10.898.899-.654-.327-.45-.572 1.104Z' />
+          <path fill='#FC0' d='M22.719 9.655h-1.111v.556l1.11-.556Z' />
+          <path fill='#FC0' d='m22.719 9.655-.9.653-.326-.45 1.226-.203Z' />
+          <path fill='#FC0' d='m22.315 10.898-.343-1.057-.528.171.871.886Z' />
+          <path
+            fill='#FC0'
+            d='m22.315 10.898-.899-.654.327-.45.572 1.104ZM18.982 5.125l-.898-.653.326-.45.572 1.103Z'
+          />
+          <path fill='#FC0' d='m18.982 5.125-.343-1.057-.528.172.871.885Z' />
+          <path fill='#FC0' d='m19.386 3.883-.9.653-.326-.45 1.226-.203Z' />
+          <path fill='#FC0' d='M19.386 3.883h-1.111v.555l1.11-.555Z' />
+          <path fill='#FC0' d='m18.33 3.115.343 1.056-.529.172.185-1.228Z' />
+          <path fill='#FC0' d='m18.33 3.115-.344 1.056.528.172-.185-1.228Z' />
+          <path fill='#FC0' d='m17.676 5.125.899-.653-.327-.45-.572 1.103Z' />
+          <path fill='#FC0' d='m17.676 5.125.343-1.057.529.172-.872.885Z' />
+          <path fill='#FC0' d='m17.271 3.883.9.653.326-.45-1.226-.203Z' />
+          <path
+            fill='#FC0'
+            d='M17.271 3.883h1.112v.555l-1.111-.555ZM20.117 7.565l.343-1.057.529.172-.872.885Z'
+          />
+          <path fill='#FC0' d='m20.117 7.565.9-.653-.328-.45-.572 1.103Z' />
+          <path fill='#FC0' d='m21.424 7.565-.9-.653.328-.45.572 1.103Z' />
+          <path fill='#FC0' d='m21.424 7.565-.343-1.057-.529.172.872.885Z' />
+          <path fill='#FC0' d='m21.828 6.323-.899.653-.326-.45 1.225-.203Z' />
+          <path fill='#FC0' d='M21.828 6.323h-1.111v.555l1.111-.555Z' />
+          <path fill='#FC0' d='m19.714 6.323.899.653.326-.45-1.225-.203Z' />
+          <path fill='#FC0' d='M19.714 6.323h1.111v.555l-1.111-.555Z' />
+          <path fill='#FC0' d='m20.77 5.555-.343 1.056.529.172-.186-1.228Z' />
+          <path
+            fill='#FC0'
+            d='m20.77 5.555.344 1.056-.529.172.185-1.228ZM19.713 12.99h1.111v.555l-1.111-.555Z'
+          />
+          <path fill='#FC0' d='m19.713 12.99.899.653.326-.45-1.225-.203Z' />
+          <path fill='#FC0' d='m20.116 14.232.344-1.057.528.172-.872.885Z' />
+          <path fill='#FC0' d='m20.116 14.232.9-.653-.327-.45-.573 1.103Z' />
+          <path fill='#FC0' d='m21.423 14.232-.9-.653.328-.45.572 1.103Z' />
+          <path fill='#FC0' d='m21.423 14.232-.343-1.057-.529.172.872.885Z' />
+          <path fill='#FC0' d='m20.77 12.222-.344 1.057.529.172-.185-1.229Z' />
+          <path fill='#FC0' d='m20.77 12.222.343 1.057-.529.172.186-1.229Z' />
+          <path fill='#FC0' d='M21.826 12.99h-1.11v.555l1.11-.555Z' />
+          <path
+            fill='#FC0'
+            d='m21.826 12.99-.899.653-.326-.45 1.225-.203ZM17.273 15.43h1.11v.555l-1.11-.555Z'
+          />
+          <path fill='#FC0' d='m17.273 15.43.898.653.327-.45-1.226-.203Z' />
+          <path fill='#FC0' d='m17.676 16.672.343-1.057.529.172-.872.885Z' />
+          <path fill='#FC0' d='m17.676 16.672.899-.653-.327-.45-.572 1.103Z' />
+          <path fill='#FC0' d='m18.982 16.672-.898-.653.326-.45.572 1.103Z' />
+          <path fill='#FC0' d='m18.982 16.672-.343-1.057-.528.172.871.885Z' />
+          <path fill='#FC0' d='m18.33 14.662-.344 1.057.528.171-.185-1.228Z' />
+          <path fill='#FC0' d='m18.33 14.662.343 1.057-.529.171.185-1.228Z' />
+          <path fill='#FC0' d='M19.386 15.43h-1.111v.555l1.11-.555Z' />
+          <path fill='#FC0' d='m19.386 15.43-.9.653-.326-.45 1.226-.203Z' />
+        </g>
+      </g>
+      <defs>
+        <clipPath id='euFlagClipPath1'>
+          <rect width={30} height={20} fill='#fff' rx={1} />
+        </clipPath>
+        <clipPath id='euFlagClipPath2'>
+          <path fill='#fff' d='M0 0h30v20H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default EuropeanUnion;

package/src/components/icons/Flags/Germany.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+const Germany = (
+  props: React.SVGAttributes<SVGElement>
+): React.ReactElement => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={30}
+    height={20}
+    viewBox='0 0 30 20'
+    fill='none'
+    {...props}
+  >
+    <g clipPath='url(#germanyFlagClipPath)'>
+      <path fill='#FFCE00' d='M30 0H0v20h30V0Z' />
+      <path fill='#D00' d='M30 0H0v13.333h30V0Z' />
+      <path fill='#000' d='M30 0H0v6.667h30V0Z' />
+    </g>
+    <defs>
+      <clipPath id='germanyFlagClipPath'>
+        <path fill='#fff' d='M0 0h30v20H0z' />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default Germany;

package/src/components/icons/Flags/India.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+function India(props: React.SVGAttributes<SVGElement>): React.ReactElement {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={30}
+      height={20}
+      viewBox='0 0 30 20'
+      fill='none'
+      {...props}
+    >
+      <g clipPath='url(#indiaFlagClipPath1)'>
+        <g clipPath='url(#indiaFlagClipPath2)'>
+          <path fill='#F93' d='M30 0H0v20h30V0Z' />
+          <path fill='#fff' d='M30 6.667H0v6.666h30V6.666Z' />
+          <path fill='#128807' d='M30 13.334H0V20h30v-6.666Z' />
+          <path
+            fill='#008'
+            d='M15 12.667a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.333Z'
+          />
+          <path
+            fill='#fff'
+            d='M15 12.333a2.333 2.333 0 1 0 0-4.667 2.333 2.333 0 0 0 0 4.667Z'
+          />
+          <path
+            fill='#008'
+            d='M15 10.466a.467.467 0 1 0 0-.933.467.467 0 0 0 0 .934ZM17.297 10.42a.117.117 0 1 0 .03-.231.117.117 0 0 0-.03.231Z'
+          />
+          <path
+            fill='#008'
+            d='m14.999 12.333.08-1.4-.08-.666-.08.666.08 1.4ZM17.105 11a.117.117 0 1 0 .09-.215.117.117 0 0 0-.09.216ZM14.39 12.254l.44-1.332.095-.665-.25.624-.285 1.373ZM16.776 11.512a.117.117 0 1 0 .142-.185.117.117 0 0 0-.142.185ZM13.829 12.02l.77-1.172.263-.618-.402.538-.631 1.252ZM16.327 11.922a.117.117 0 1 0 .185-.142.117.117 0 0 0-.185.142ZM13.35 11.65l1.047-.934.415-.528-.528.415-.934 1.046ZM15.788 12.2a.117.117 0 1 0 .216-.09.117.117 0 0 0-.216.09ZM12.983 11.166l1.252-.63.537-.403-.617.264-1.172.77ZM15.192 12.328a.117.117 0 1 0 .231-.03.117.117 0 0 0-.23.03ZM12.75 10.603l1.372-.285.623-.25-.664.095-1.332.44ZM14.579 12.297a.117.117 0 1 0 .231.03.117.117 0 0 0-.231-.03ZM12.666 9.999l1.4.08.666-.08-.666-.08-1.4.08ZM13.998 12.11a.117.117 0 1 0 .215.09.117.117 0 0 0-.215-.09ZM12.745 9.395l1.331.44.665.095-.623-.25-1.373-.285ZM13.488 11.78a.117.117 0 1 0 .185.141.117.117 0 0 0-.185-.142ZM12.98 8.832l1.173.77.617.264-.537-.403-1.252-.63ZM13.08 11.327a.117.117 0 1 0 .142.185.117.117 0 0 0-.142-.185ZM13.351 8.349l.934 1.046.528.415-.415-.528-1.047-.933ZM12.801 10.784a.117.117 0 1 0 .09.215.117.117 0 0 0-.09-.215ZM13.834 7.978l.63 1.252.403.538-.264-.618-.77-1.172ZM12.67 10.186a.117.117 0 1 0 .03.231.117.117 0 0 0-.03-.231ZM14.394 7.743l.285 1.373.25.623-.096-.664-.44-1.332ZM12.702 9.578a.117.117 0 1 0-.03.231.117.117 0 0 0 .03-.23ZM15 7.665l-.08 1.4.08.667.08-.667-.08-1.4ZM12.894 8.998a.117.117 0 1 0-.09.216.117.117 0 0 0 .09-.216ZM15.609 7.745l-.44 1.331-.095.665.25-.623.285-1.373ZM13.223 8.486a.117.117 0 1 0-.142.185.117.117 0 0 0 .142-.185ZM16.17 7.978l-.77 1.173-.263.617.402-.537.631-1.253ZM13.672 8.077a.117.117 0 1 0-.185.142.117.117 0 0 0 .185-.142ZM16.649 8.35l-1.047.933-.414.528.527-.415.934-1.047ZM14.213 7.799a.117.117 0 1 0-.216.09.117.117 0 0 0 .216-.09ZM17.018 8.833l-1.252.63-.537.403.617-.264 1.172-.77ZM14.809 7.671a.117.117 0 1 0-.231.03.117.117 0 0 0 .23-.03ZM17.252 9.396l-1.373.285-.623.25.664-.095 1.332-.44ZM15.422 7.702a.117.117 0 1 0-.23-.03.117.117 0 0 0 .23.03ZM17.335 10l-1.4-.08-.666.08.666.08 1.4-.08ZM16.003 7.889a.117.117 0 1 0-.215-.09.117.117 0 0 0 .215.09ZM17.256 10.604l-1.331-.44-.665-.095.623.25 1.373.285ZM16.511 8.22a.117.117 0 1 0-.185-.142.117.117 0 0 0 .185.142ZM17.018 11.167l-1.172-.77-.617-.263.537.402 1.252.631ZM16.92 8.673a.117.117 0 1 0-.143-.185.117.117 0 0 0 .142.185ZM16.648 11.65l-.934-1.046-.527-.414.414.527 1.047.934ZM17.198 9.216a.117.117 0 1 0-.09-.216.117.117 0 0 0 .09.216ZM16.165 12.022l-.63-1.253-.403-.537.264.617.77 1.173ZM17.33 9.814a.117.117 0 1 0-.03-.232.117.117 0 0 0 .03.232ZM15.605 12.256l-.285-1.373-.25-.623.096.665.44 1.331Z'
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id='indiaFlagClipPath1'>
+          <rect width={30} height={20} fill='#fff' rx={1} />
+        </clipPath>
+        <clipPath id='indiaFlagClipPath2'>
+          <path fill='#fff' d='M0 0h30v20H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default India;

package/src/components/icons/Flags/Ireland.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+function Ireland(props: React.SVGAttributes<SVGElement>): React.ReactElement {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={30}
+      height={20}
+      viewBox='0 0 30 20'
+      fill='none'
+      {...props}
+    >
+      <g clipPath='url(#irelandFlagClipPath1)'>
+        <g clipPath='url(#irelandFlagClipPath1)'>
+          <path fill='#169B62' d='M10 0H0v20h10V0Z' />
+          <path fill='#fff' d='M20 0H10v20h10V0Z' />
+          <path fill='#FF883E' d='M30 0H20v20h10V0Z' />
+        </g>
+      </g>
+      <defs>
+        <clipPath id='irelandFlagClipPath1'>
+          <rect width={30} height={20} fill='#fff' rx={1} />
+        </clipPath>
+        <clipPath id='irelandFlagClipPath2'>
+          <path fill='#fff' d='M0 0h30v20H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default Ireland;

package/src/components/icons/Flags/Netherlands.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+function Netherlands(
+  props: React.SVGAttributes<SVGElement>
+): React.ReactElement {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={30}
+      height={20}
+      viewBox='0 0 30 20'
+      fill='none'
+      {...props}
+    >
+      <g clipPath='url(#netherlandsFlagClipPath)'>
+        <path fill='#21468B' d='M30 0H0v20h30V0Z' />
+        <path fill='#fff' d='M30 0H0v13.333h30V0Z' />
+        <path fill='#AE1C28' d='M30 0H0v6.667h30V0Z' />
+      </g>
+      <defs>
+        <clipPath id='netherlandsFlagClipPath'>
+          <rect width={30} height={20} fill='#fff' rx={1} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default Netherlands;